farming-business-shop-web/src/views/order/detail/transmission.vue

<template>
  <div class="app-container">
    <div class="header">
      <div class="left">
        <div class="title">
          <div class="status">
            订单状态：
            <dict-text
              :options="dict.type.sys_order_query_orderstatus_transmission"
              :value="spuInfo.orderStatusEnum"
            />
            {{ spuInfo.pickupCode }}
            <el-tag
              type="warning"
              style="margin-left: 10px"
              v-if="spuInfo.deliveryType == 1"
              >上门服务</el-tag
            >
            <el-tag
              type="success"
              style="margin-left: 10px"
              v-if="spuInfo.deliveryType == 0"
              >到店</el-tag
            >
          </div>
          <div style="display: flex; flex-direction: row; align-items: center">
            <div style="margin-right: 10px">
              预计
              {{
                spuInfo.receiveTime
                  ? $moment(spuInfo.receiveTime).format("HH:mm")
                  : $moment().format("HH:mm")
              }}
              -
              {{
                spuInfo.exceptArriveTime
                  ? $moment(spuInfo.exceptArriveTime).format("HH:mm")
                  : ""
              }}
              送达
            </div>
            <el-button size="small" @click="cancalOrder">取消订单</el-button>

            <el-button
              size="small"
              type="primary"
              @click="takingOrder"
              v-if="spuInfo.orderStatusEnum == 'WAIT_DRIVER_ORDER'"
              >接单</el-button
            >
            <el-button
              size="small"
              type="primary"
              @click="takingOrder"
              v-if="spuInfo.orderStatusEnum == 'WAIT_PENDING_ORDERS'"
              >确认出单</el-button
            >
          </div>
        </div>
        <div class="info">
          <div class="remark">备注：{{ spuInfo.porderRemark }}</div>
          <div
            class="surplus"
            v-if="spuInfo.orderStatusEnum == 'WAIT_DRIVER_ORDER'"
          >
            距离接单还剩:{{ countdown }}
          </div>
        </div>
      </div>
    </div>

    <div class="main">
      <div class="subTitle">订单信息</div>
      <div class="main-info">
        <el-row>
          <el-col :span="8">
            <el-descriptions title="交易信息" column="1">
              <el-descriptions-item label="订单编号">
                {{ spuInfo ? spuInfo.carPayNo : "" }}</el-descriptions-item
              >
              <el-descriptions-item label="下单时间">
                {{
                  spuInfo.createTime
                    ? $moment(spuInfo.createTime).format("HH:mm")
                    : ""
                }}</el-descriptions-item
              >
              <el-descriptions-item label="支付总金额">
                {{ spuInfo ? spuInfo.totalOrderAmount : "" }}
              </el-descriptions-item>
              <el-descriptions-item label="支付方式">
                <dict-text
                  :options="dict.type.sys_order_paymentType"
                  :value="spuInfo.paymentType"
                />
              </el-descriptions-item>
              <el-descriptions-item label="支付时间">
                {{
                  spuInfo.paymentTime
                    ? $moment(spuInfo.paymentTime).format("yyyy-MM-DD HH:mm:ss")
                    : ""
                }}
              </el-descriptions-item>
            </el-descriptions>
          </el-col>
          <el-col :span="8">
            <el-descriptions title="买家信息" column="1">
              <el-descriptions-item label="昵称">
                {{ spuInfo ? spuInfo.nick : "" }}
              </el-descriptions-item>
              <el-descriptions-item label="ID">
                {{ spuInfo ? spuInfo.userId : "" }}
              </el-descriptions-item>
              <el-descriptions-item label="注册手机号">
                {{
                  spuInfo ? spuInfo.consigneeContactMobile : ""
                }}</el-descriptions-item
              >
              <el-descriptions-item label="提货人">
                {{ spuInfo ? spuInfo.consigneeContactName : "" }}
              </el-descriptions-item>
              <el-descriptions-item label="提货时间">
                {{
                  spuInfo.receiveTime
                    ? $moment(spuInfo.receiveTime).format("yyyy-MM-DD HH:mm:ss")
                    : ""
                }}
              </el-descriptions-item>
            </el-descriptions>
          </el-col>
          <el-col :span="8">
            <el-descriptions title="配送信息" column="1">
              <el-descriptions-item label="骑手">
                {{ spuInfo ? spuInfo.riderName : "" }}
              </el-descriptions-item>
              <el-descriptions-item label="手机号">
                {{ spuInfo ? spuInfo.riderPhone : "" }}
              </el-descriptions-item>
              <el-descriptions-item label="接单时间">
                {{
                  spuInfo.riderReceiveTime
                    ? $moment(spuInfo.riderReceiveTime).format(
                        "yyyy-MM-DD HH:mm:ss"
                      )
                    : ""
                }}
              </el-descriptions-item>
              <el-descriptions-item label="送达时间">
                {{
                  spuInfo.deliveryTime
                    ? $moment(spuInfo.deliveryTime).format(
                        "yyyy-MM-DD HH:mm:ss"
                      )
                    : ""
                }}
              </el-descriptions-item>
            </el-descriptions>
          </el-col>
        </el-row>
      </div>
    </div>

    <div class="table">
      <el-table
        ref="multipleTable"
        v-loading="loading"
        :data="spuList"
        :border="true"
        @selection-change="handleSelectionChange"
        row-key="id"
      >
        <el-table-column label="商品信息" align="center" width="200">
          <template slot-scope="scope">
            <div class="tableRow">
              <div>
                <img :src="scope.row.goodsInfo[0].skuPic" style="width: 50px" />
              </div>
              <div style="margin-left: 10px">
                <div>{{ scope.row.goodsInfo[0].skuName }}</div>
                <div>ID:{{ scope.row.goodsInfo[0].skuId }}</div>
              </div>
            </div>
          </template>
        </el-table-column>
        <el-table-column label="商品规格" align="center" prop="price">
          <template slot-scope="scope">
            <div>
              <div>
                {{ scope.row.goodsInfo[0].specsValue[0].specsName }}：{{
                  scope.row.goodsInfo[0].specsValue[0].specsValue
                }}
              </div>
            </div>
          </template>
        </el-table-column>

        <el-table-column label="退款售后状态" align="center" prop="price">
          <template slot-scope="scope">
            <dict-tag
              :options="dict.type.sys_order_aftersalestatus"
              :value="scope.row.afterSaleStatus"
            />
          </template>
        </el-table-column>

        <el-table-column
          label="单价"
          align="center"
          prop="paymentAmount"
          width="100"
        >
          <template slot-scope="scope">
            ￥{{ scope.row.goodsInfo[0].price }}/{{
              scope.row.goodsInfo[0].unit
            }}
          </template>
        </el-table-column>

        <el-table-column label="数量" align="center" width="120">
          <template slot-scope="scope">
            {{ scope.row.goodsInfo[0].quantity
            }}{{ scope.row.goodsInfo[0].unit }}
          </template>
        </el-table-column>
        <el-table-column label="优惠" align="center">
          <template slot-scope="scope">
            {{
              scope.row.discountAmount == 0
                ? 0
                : "-￥" + scope.row.discountAmount
            }}
          </template>
        </el-table-column>
        <el-table-column label="包装费" align="center">
          <template slot-scope="scope">
            {{
              scope.row.packingPrice == 0 ? 0 : "￥" + scope.row.packingPrice
            }}
          </template>
        </el-table-column>
        <el-table-column label="配送费" align="center">
          <template slot-scope="scope">
            {{
              scope.row.freightFee == 0 ? 0 : "￥" + scope.row.freightFee
            }}</template
          >
        </el-table-column>
        <el-table-column label="总金额" align="center">
          <template slot-scope="scope">
            {{
              scope.row.totalOrderAmount == 0
                ? 0
                : "￥" + scope.row.totalOrderAmount
            }}
          </template>
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script>
import moment from "moment";
import { sendSecondOrderInfo } from "@/api/manage/order";
export default {
  dicts: [
    "sys_order_query_orderstatus_transmission",
    "sys_order_paymentType",
    "sys_order_aftersalestatus",
  ],
  data() {
    return {
      activeName: "1",
      spuList: [],
      spuInfo: {},
      countdown: "", // 初始倒计时为30分钟
      timer: null, // 用于存储定时器ID
      endTime: null,
      loading: false,
    };
  },
  mounted() {
    this.getSecondOrderInfo();
    // 计算30分钟后的结束时间
  },

  methods: {
    updateCountdown() {
      const now = moment();
      let end = moment(this.spuInfo.paymentTime).add(30, "minutes");
      // 使用 diff 方法计算差值，并指定单位为秒
      const diff = end.diff(now, "seconds");
      if (diff > 0) {
        const minutes = Math.floor(diff / 60);
        const seconds = diff % 60;
        this.countdown = `${minutes.toString().padStart(2, "0")}:${seconds
          .toString()
          .padStart(2, "0")}`;
      } else {
        clearInterval(this.timer);
        this.countdown = "00:00";
        this.isCountingDown = false;
      }
    },
    getSecondOrderInfo() {
      sendSecondOrderInfo(this.$route.query.carPayNo).then((res) => {
        if (res.code == 200) {
          this.spuList = res.data;

          if (this.spuList.length > 0) {
            this.spuList.forEach((e) => {
              if (e.goodsInfo) {
                e.goodsInfo = JSON.parse(e.goodsInfo);
              }
            });
            this.spuInfo = this.spuList[0];
          }
          if (this.spuInfo.orderStatusEnum == "WAIT_DRIVER_ORDER") {
            this.timer = setInterval(() => {
              this.updateCountdown();
            }, 1000);
          }
        }
      });
    },
    //倒计时
    getCountdown() {},
    takingOrder() {
      this.$confirm("是否确认接单?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {})
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消",
          });
        });
    },
    cancalOrder() {
      this.$confirm("是否确认取消订单?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {})
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消",
          });
        });
    },
  },
  beforeDestroy() {
    if (this.timer) {
      clearInterval(this.timer);
    }
  },
};
</script>
<style>
.el-descriptions__body {
  background: none;
}
</style>
<style scoped lang="scss">
.tableRow {
  text-align: left;
  display: flex;
  flex-direction: row;
  // justify-content: center;
  align-items: center;
}
.header {
  border-radius: 10px;
  height: 150px;
  background: #f4f4f4;
  padding: 30px;
  display: flex;
  flex-direction: row;
  align-items: center;
  .left {
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    line-height: 30px;
    .title {
      font-size: 20px;
      font-weight: bold;
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      align-items: center;
      width: 100%;
      .status {
        display: flex;
        flex-direction: row;
        align-items: center;
      }
    }
    .info {
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      align-items: center;
      .remark {
        min-width: 70vw;
        min-height: 50px;
        width: 70%;
        margin-top: 10px;
        color: orange;
        font-size: 16px;
      }
      .surplus {
        font-weight: bold;
      }
    }
  }
}
.main {
  .subTitle {
    font-size: 18px;
    font-weight: bold;
    margin: 20px 0px;
  }
  .main-info {
    border-radius: 10px;
    padding: 20px;
    background: #f4f4f4;
  }
}
.table {
  margin-top: 20px;
}
</style>