web-admin/src/components/orderParts/detail/detail_orderDetail.vue

<template>
  <div id="form-1">
    <!-- 订单详情 -->
    <el-row>
      <el-col :span="24" class="top-btn">
        <el-button type="primary" size="mini" @click="toBack()">返回</el-button>
      </el-col>
      <el-col
        :span="24"
        class="main animate__animated animate__backInRight"
        v-loading="loadings"
        element-loading-text="拼命加载中"
        element-loading-spinner="el-icon-loading"
      >
        <el-tabs type="border-card">
          <el-tab-pane label="订单详情">
            <card-1 :address="address" :list="list" :pay="pay" :form="form" :total_detail="total_detail" :shop="shop"></card-1>
          </el-tab-pane>
          <el-tab-pane label="发货信息">
            <card-2
              :transport="transport"
              :list="list"
              :address="address"
              :form="form"
              :activities="activities"
              :shop_transport_typeList="shop_transport_typeList"
              :transport_typeList="transport_typeList"
              @querySearch="querySearch"
              @search="search"
            ></card-2>
          </el-tab-pane>
        </el-tabs>
      </el-col>
    </el-row>
  </div>
</template>

<script>
const _ = require('lodash');
const moment = require('moment');
import { mapState, mapGetters, createNamespacedHelpers } from 'vuex';
const { mapActions } = createNamespacedHelpers('orderDetail');
const { mapActions: dictData } = createNamespacedHelpers('dictData');
const { mapActions: sot } = createNamespacedHelpers('sot');

export default {
  name: 'form-1',
  props: { id: { type: String } },
  components: {
    card1: () => import('./parts/card-1.vue'),
    card2: () => import('./parts/card-2.vue'),
  },
  data: function () {
    return {
      loadings: true,
      form: {},
      // 地址
      address: {},
      // 实付金额
      total_detail: [],
      // 商铺
      shop: {},
      // 运单号
      transport: [],
      pay: {},
      // 商品列表
      list: [],
      activities: [],
      // 订单状态
      order_processList: [],
      // 快递公司
      shop_transport_typeList: [],
      // 快递类型
      transport_typeList: [],
    };
  },
  async created() {
    await this.searchOther();
    await this.search();
  },
  methods: {
    ...dictData({ dictQuery: 'query' }),
    ...sot({ sotCreate: 'create' }),
    ...mapActions(['query', 'fetch', 'create', 'update']),
    // 查询
    async search() {
      let res;
      res = await this.fetch(this.id);
      if (this.$checkRes(res)) {
        let name = this.transport_typeList.find((i) => i.value == res.data.transport_type);
        if (name) res.data.transport_type_name = name.label;
        if (res.data.transport_type == undefined) res.data.transport_type = '0';
        this.$set(this, `form`, res.data);
        // 地址
        this.$set(this, `address`, res.data.address);
        this.$set(this, `shop`, res.data.shop);
        // 商品
        this.$set(this, `list`, res.data.goods);
        // 应付金额
        this.$set(this, `total_detail`, res.data.total_detail);
        this.$set(this, `pay`, res.data.order.pay);
        if (res.data.transport != undefined || res.data.transport.length > 0) {
          for (const p1 of res.data.transport) {
            if (p1.goods) {
              for (const p2 of p1.goods) {
                let goods = this.form.goods.find((i) => i.id == p2.goods_id);
                if (goods) p2.goods_name = goods.goods.name + ',' + goods.name;
              }
            }
            let arr = await this.dictQuery({ code: 'transport_company', value: p1.shop_transport_type });
            if (this.$checkRes(arr)) {
              let type = arr.data.find((i) => i.value == p1.shop_transport_type);
              if (type) {
                p1.shop_transport_name = type.label;
                this.querySearch(type.label);
              }
            }
          }
          this.$set(this, `transport`, res.data.transport);
          let info = { id: this.id };
          res = await this.sotCreate(info);
          if (this.$checkRes(res)) {
            if (res.errcode == '0') this.$set(this, `activities`, res.data);
          }
        }
      }
      this.loadings = false;
    },
    async querySearch(value) {
      let res = await this.dictQuery({ code: 'transport_company', label: value });
      if (this.$checkRes(res)) this.$set(this, 'shop_transport_typeList', res.data);
    },
    // 返回
    toBack() {
      this.$emit('toBack');
    },
    // 查询其他信息
    async searchOther() {
      let res;
      // 减免方式
      res = await this.dictQuery({ code: 'order_process' });
      if (this.$checkRes(res)) this.$set(this, `order_processList`, res.data);
      // 快递类型
      res = await this.dictQuery({ code: 'transport_type' });
      if (this.$checkRes(res)) this.$set(this, `transport_typeList`, res.data);
    },
  },
  computed: {},
  metaform() {
    return { title: this.$route.meta.title };
  },
  watch: {
    test: {
      deep: true,
      immediate: true,
      handler(val) {},
    },
  },
};
</script>

<style lang="less" scoped>
.top-btn {
  margin: 20px 0;
}
</style>