plus-ui/src/views/oms/order/detail.vue

<template>
  <div class="order_detail_wrapper">
    <el-main v-loading="loading">
      <el-card class="mt10">
        <template v-slot:header>
          <div class="clearfix">
            <span style="font-size: 16px; font-weight: bold">订单进程</span>
            <el-button style="float: right" size="small" @click="$router.back()">返回</el-button>
          </div>
        </template>
        <el-steps :active="active" align-center>
          <el-step title="买家下单" :description="parseTime(orderDetail.createTime, '')"></el-step>
          <el-step title="买家付款" :description="parseTime(orderDetail.payTime, '')"></el-step>
          <el-step title="商家发货" :description="parseTime(orderDetail.deliveryTime, '')"></el-step>
          <el-step title="买家收货" :description="parseTime(orderDetail.receiveTime, '')"></el-step>
        </el-steps>
      </el-card>
      <el-card class="mt10">
        <el-descriptions title="订单信息" :column="2" border label-class-name="my-label" contentClassName="my-content">
          <!--                    <template slot="extra">-->
          <!--                        <el-button size="small" @click="$router.back()">返回</el-button>-->
          <!--                    </template>-->
          <el-descriptions-item label="订单编号">{{ orderDetail.orderSn }}</el-descriptions-item>
          <el-descriptions-item label="用户名称">{{ orderDetail.userName }}</el-descriptions-item>
          <el-descriptions-item label="用户手机号">{{ orderDetail.userPhone }}</el-descriptions-item>
          <el-descriptions-item label="下单时间">{{ parseTime(orderDetail.createTime, '') }}</el-descriptions-item>
          <el-descriptions-item label="支付方式">{{ getPayType(orderDetail) }}</el-descriptions-item>
          <el-descriptions-item label="支付时间">{{ parseTime(orderDetail.payTime, '') }}</el-descriptions-item>
          <el-descriptions-item label="订单状态">{{ getOrderStatus(orderDetail) }}</el-descriptions-item>
        </el-descriptions>
      </el-card>
      <el-card class="mt10">
        <el-descriptions title="收货信息" :column="2" border label-class-name="my-label" contentClassName="my-content">
          <el-descriptions-item label="收货人姓名">{{ getHiddenName(addressInfo.name) }}</el-descriptions-item>
          <el-descriptions-item label="收货人手机号">{{ addressInfo.userPhone }}</el-descriptions-item>
          <el-descriptions-item label="收货区域">{{ addressInfo.area }}</el-descriptions-item>
          <el-descriptions-item label="详细地址">{{ getHiddenDetailAddress(addressInfo.address) }}</el-descriptions-item>
        </el-descriptions>
      </el-card>
      <el-card class="mt10">
        <template v-slot:header>
          <div style="font-size: 16px; font-weight: bold">商品信息</div>
        </template>
        <el-table :data="products">
          <el-table-column label="商品图片" prop="pic">
            <template v-slot="{ row }"><el-image class="small-img circle-img" :src="row.pic" :preview-src-list="[row.pic]" /></template>
          </el-table-column>
          <el-table-column label="商品ID" prop="productId"></el-table-column>
          <el-table-column label="商品名称" prop="productName"></el-table-column>
          <el-table-column label="商品规格" align="center" prop="spData" width="180">
            <template v-slot="scope">
              <div v-for="(item, key) in JSON.parse(scope.row.spData)">{{ key }}：{{ item }}</div>
            </template>
          </el-table-column>
          <el-table-column label="购买数量" prop="buyNum"></el-table-column>
          <el-table-column label="实付金额" prop="payAmount">
            <template v-slot="scope">
              <span>￥{{ orderDetail.payAmount }}</span>
            </template>
          </el-table-column>
        </el-table>
      </el-card>
      <el-card class="mt10">
        <el-descriptions title="物流信息" :column="3" border label-class-name="my-label" contentClassName="my-content">
          <el-descriptions-item label="发货时间">{{ parseTime(orderDetail.deliveryTime, '') }}</el-descriptions-item>
          <el-descriptions-item label="快递单号">{{ orderDetail.expressNo }}</el-descriptions-item>
          <el-descriptions-item label="物流公司">{{ orderDetail.expressName }}</el-descriptions-item>
          <!--                    <el-descriptions-item label="物流进度">-->
          <!--                        <el-popover placement="top" width="300" trigger="hover" popper-class="popperOptions">-->
          <!--                            <el-timeline-item v-for="(activity, index) in aliLogisticsInfoList" :key="index"-->
          <!--                                :timestamp="activity.time">-->
          <!--                                {{ activity.context }}-->
          <!--                            </el-timeline-item>-->
          <!--                            <span slot="reference">{{ orderDetail.logistics }}</span>-->
          <!--                        </el-popover>-->
          <!--                    </el-descriptions-item>-->
        </el-descriptions>
      </el-card>
    </el-main>
  </div>
</template>

<script>
import { getOmsOrder } from '@/api/oms/order';
const key = 'express-set-key';

export default {
  name: 'OrderDetail',
  dicts: ['oms_order_status', 'oms_pay_type'],
  data() {
    return {
      products: [],
      orderDetail: {},
      addressInfo: {},
      aliLogisticsInfoList: [],
      loading: false,
      experssList: [],
      active: 1,
      payTypeMap: [],
      orderStatusMap: []
    };
  },
  async created() {
    const { id } = this.$route.query;
    this.queryDetail(id);
    const orderStatusMap = await this.getDictionaryByKey('oms_order_status');
    const payTypeMap = await this.getDictionaryByKey('oms_pay_type');
    this.orderStatusMap = orderStatusMap;
    this.payTypeMap = payTypeMap;
  },
  computed: {},
  methods: {
    queryDetail(id) {
      this.loading = true;
      return new Promise((resolve) =>
        getOmsOrder(id).then((res) => {
          const { productInfo, addressInfo } = res.data;
          this.orderDetail = res.data;
          this.products = productInfo;
          this.addressInfo = addressInfo;
          if (this.orderDetail.orderStatus <= 3) {
            this.active = this.orderDetail.orderStatus + 1;
          } else {
            this.active = 1;
          }
          this.loading = false;
        })
      );
    },
    getOrderStatus(row) {
      const { label = '' } =
        this.orderStatusMap.find((item) => {
          return row.orderStatus == item.value;
        }) || {};
      return label;
    },
    getPayType(row) {
      const { label = '' } =
        this.payTypeMap.find((item) => {
          return row.orderStatus == item.value;
        }) || {};
      return label;
    }
  }
};
</script>

<style lang="stylus">
  .order_detail_wrapper
    > .el-card + .el-card
      margin-top 1rem

    .el-form-item
      margin-bottom 0

      .el-form-item__content, .el-form-item__label
        line-height 2

  .my-label
    width 100px
  .my-content
    width 400px
.popperOptions[x-placement^=left] .popper__arrow::after{
    border-left-color: #565D6B;
}
.popperOptions[x-placement^=right] .popper__arrow::after{
    border-right-color: #565D6B;
}
.popperOptions[x-placement^=bottom] .popper__arrow::after{
    border-bottom-color: #565D6B;
}
.popperOptions[x-placement^=top] .popper__arrow::after{
    border-top-color: #565D6B;
}
.popperOptions{
    background-color: #565D6B;
    color: #FFFFFF;
    border: #565D6B;
}
.el-timeline-item__content {
    color: #fff;
}
.el-timeline-item__timestamp {
    color: #fff;
}
</style>