web-admin/src/views/platmanag/sales/detail.vue

<template>
  <div id="form-1">
    <el-row>
      <el-col
        :span="24"
        class="main animate__animated animate__backInRight"
        v-loading="loading"
        element-loading-text="拼命加载中"
        element-loading-spinner="el-icon-loading"
      >
        <el-col class="top-btn">
          <el-button type="primary" size="mini" @click="toBack()">返回</el-button>
        </el-col>
        <el-col :span="8" class="one">
          <el-col :span="24" class="shop"> <i class="el-icon-s-shop"></i>{{ shop.name }}</el-col>
          <el-col v-if="info.type == '1' || info.type == '2' || info.type == '3'">
            <el-col :span="24" class="goods">
              <el-col :span="6"><el-image :src="file"></el-image></el-col>
              <el-col :span="18">
                <el-col :span="12">
                  <p>{{ goods.name }}</p>
                  <p>规格：{{ good.name }}</p>
                </el-col>
                <el-col :span="12" class="money">
                  <p>￥{{ good.sell_money }}</p>
                  <p>X{{ good.buy_num }}</p>
                </el-col>
              </el-col>
            </el-col>
          </el-col>
          <el-col v-if="info.type == '4' || info.type == '5'">
            <el-col :span="24" v-for="(item, index) in list" :key="index">
              <el-col :span="24" class="goods bode">
                <el-col :span="6"><el-image :src="item.goods.file[0].url"></el-image></el-col>
                <el-col :span="18">
                  <el-col :span="12">
                    <el-col>
                      <p>{{ item.goods.name }}</p>
                    </el-col>
                    <el-col>
                      <p>规格：{{ item.name }}</p>
                    </el-col>
                  </el-col>
                  <el-col :span="12" class="money">
                    <el-col>
                      <p>￥{{ item.sell_money }}</p>
                    </el-col>
                    <el-col>
                      <p>X{{ item.buy_num }}</p>
                    </el-col>
                  </el-col>
                </el-col>
              </el-col>
              <el-col :span="24" class="bode">
                <el-col :span="6">运费</el-col>
                <el-col :span="18" class="other" v-if="!item.goods.freight == '0'">{{ item.goods.freight }}</el-col>
                <el-col :span="18" class="other" v-else>包邮</el-col>
              </el-col>
            </el-col>
          </el-col>
          <el-col :span="24">
            <el-col :span="6">申请时间</el-col>
            <el-col :span="18" class="other">{{ info.apply_time }}</el-col>
          </el-col>
          <el-col :span="24">
            <el-col :span="6">结束时间</el-col>
            <el-col :span="18" class="other">{{ info.end_time || '暂无' }}</el-col>
          </el-col>
          <el-col :span="24">
            <el-col :span="6">售后类型</el-col>
            <el-col :span="18" class="other">{{ info.zhType }}</el-col>
          </el-col>
          <el-col :span="24" v-if="info.type == '1' || info.type == '2' || info.type == '4' || info.type == '5'">
            <el-col :span="6">退款金额</el-col>
            <el-col :span="18" class="other">{{ info.money || '' }}</el-col>
          </el-col>
          <el-col :span="24">
            <el-col :span="6">售后状态</el-col>
            <el-col :span="18" class="other">{{ info.zhStatus }}</el-col>
          </el-col>
          <el-col :span="24" v-if="info.type == '2' || info.type == '3'">
            <el-col :span="6">退回运单号</el-col>
            <el-col :span="18" class="other">{{ transport.customer_transport_no || '暂无单号' }}</el-col>
          </el-col>
          <el-col :span="24" v-if="info.type == '3'">
            <el-col :span="6">寄出运单号</el-col>
            <el-col :span="18" class="other">{{ transport.shop_transport_no || '暂无单号' }}</el-col>
          </el-col>
          <el-col :span="24" v-if="info.type == '1' || info.type == '2' || info.type == '3'">
            <el-col :span="6">售后描述</el-col>
            <el-col :span="18" class="other">{{ info.desc }}</el-col>
          </el-col>
        </el-col>
        <el-col :span="12" class="two">
          <steps-1 v-if="info.type == '1'" @exam="exam" :active="active" :form="form" :info="info"></steps-1>
          <steps-2 v-if="info.type == '2'" @exam="exam" :active="active" :customer="customer" :activit="activit" :form="form" :info="info"></steps-2>
          <steps-3
            v-if="info.type == '3'"
            @exam="exam"
            :active="active"
            @onSubmit="onSubmit"
            :form="form"
            :shop_transport_typeList="shop_transport_typeList"
            :activit="activit"
            @querySearch="querySearch"
            :customer="customer"
            :shopList="shopList"
            :transport="transport"
          ></steps-3>
          <steps-4 v-if="info.type == '4'" @exam="exam" :active="active"></steps-4>
          <steps-5 v-if="info.type == '5'" @exam="exam" :active="active"></steps-5>
        </el-col>
      </el-col>
    </el-row>
  </div>
</template>

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

export default {
  name: 'form-1',
  props: {},
  components: {
    steps1: () => import('./parts/steps-1.vue'),
    steps2: () => import('./parts/steps-2.vue'),
    steps3: () => import('./parts/steps-3.vue'),
    steps4: () => import('./parts/steps-4.vue'),
    steps5: () => import('./parts/steps-5.vue'),
  },
  data: function () {
    return {
      // 商品
      shop: {},
      // 状态4,5商品
      list: [],
      // 图片
      file: '',
      // 商品
      goods: {},
      // 规格
      good: {},
      transport: {},
      typeList: [],
      statusList: [],
      status: [],
      form: {},
      info: {},
      // 物流
      shop_transport_typeList: [],
      customer: [],
      shopList: [],
      activit: {},
      active: 1,
      loading: true,
    };
  },
  async created() {
    await this.searchOther();
    await this.search();
  },
  methods: {
    ...sot({ sotFetch: 'fetch' }),
    ...dictData({ dictQuery: 'query' }),
    ...getTransportInfo({ getFetch: 'fetch' }),
    ...mapActions(['fetch', 'create', 'update']),
    // 查询
    async search() {
      let res = await this.fetch(this.id);
      if (this.$checkRes(res)) {
        let type = this.typeList.find((i) => i.value == res.data.type);
        if (type) res.data.zhType = type.label;
        let status = this.statusList.find((i) => i.value == res.data.status);
        if (status) res.data.zhStatus = status.label;
        this.$set(this, `info`, res.data);
        this.$set(this, `shop`, res.data.shop);
        if (res.data.type == '4' || res.data.type == '5') {
          // 商品
          this.$set(this, `list`, res.data.order_detail.goods);
        } else if (res.data.type == '1' || res.data.type == '2' || res.data.type == '3') {
          if (res.data.transport) this.$set(this, `transport`, res.data.transport);
          // 图片
          this.$set(this, `file`, res.data.goods.goods.file[0].url);
          // 商品
          this.$set(this, `goods`, res.data.goods.goods);
          // 规格
          this.$set(this, `good`, res.data.goods);
        }
        // 仅退款
        if (res.data.status == '-1') this.$set(this, `active`, 3);
        else if (res.data.status == '!1') this.$set(this, `active`, 4);
        // 退货
        else if (res.data.status == '2') this.$set(this, `active`, 2);
        else if (res.data.status == '-2') this.$set(this, `active`, 4);
        else if (res.data.status == '!2') this.$set(this, `active`, 5);
        // 换货
        else if (res.data.status == '3') this.$set(this, `active`, 2);
        else if (res.data.status == '-3') this.$set(this, `active`, 6);
        else if (res.data.status == '!3') this.$set(this, `active`, 7);
        // 取消订单
        else if (res.data.status == '-4') this.$set(this, `active`, 3);
        else if (res.data.status == '!4') this.$set(this, `active`, 4);
        // 拒收
        else if (res.data.status == '5') this.$set(this, `active`, 3);
        else if (res.data.status == '!5') this.$set(this, `active`, 5);
        else if (res.data.status == '-5') this.$set(this, `active`, 4);
        // 查询物流
        if (res.data.transport) {
          // 快递数据回显
          let arr = await this.dictQuery({ code: 'transport_type', value: res.data.transport.shop_transport_type });
          if (this.$checkRes(arr)) {
            let type = arr.data.find((i) => i.value == res.data.transport.shop_transport_type);
            if (type) {
              res.data.transport.shop_transport_name = type.label;
              this.querySearch(type.label);
            }
            this.$set(this, `transport`, res.data.transport);
            this.$set(this.form, `shop_transport_type`, this.transport.shop_transport_type);
            this.$set(this.form, `shop_transport_no`, this.transport.shop_transport_no);
          }
          // 显示物流
          res = await this.getFetch(this.id);
          if (this.$checkRes(res)) {
            if (res.errcode == '0') {
              if (res.data.customer) {
                let customer = res.data.customer.list;
                this.$set(this, `customer`, customer);
                customer[0].color = '#0bbd87';
                if (res.data.customer.is_check == '已签收' && this.info.status == '3') this.$set(this, `active`, 3);
              }
              if (res.data.shop) {
                let shopList = res.data.shop.list;
                this.$set(this, `shopList`, shopList);
                shopList[0].color = '#0bbd87';
                if (res.data.shop.is_check == '已签收' && this.info.status == '3') this.$set(this, `active`, 5);
              }
              this.$set(this, `activit`, res.data);
            }
          }
        }
        this.loading = false;
      }
    },
    async exam(status, form) {
      let info = this.info;
      info.status = status;
      if (status == '-2' && info.transport) info.transport.shop_receive = true;
      else if (status == '-2' && !info.transport) {
        let transport = {};
        transport.shop_receive = true;
        info.transport = transport;
      }
      if (status == '-3' && info.transport) info.transport.customer_receive = true;
      else if (status == '-3' && !info.transport) {
        let transport = {};
        transport.customer_receive = true;
        info.transport = transport;
      }
      if (form != undefined && form.money != undefined && (status == '2' || status == '1')) info.money = form.money;
      let res;
      this.$confirm('是否确认修改售后状态', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      }).then(async () => {
        if (info.id) res = await this.update(info);
        if (this.$checkRes(res)) {
          this.$message({ type: `success`, message: `维护信息成功` });
          this.search();
        }
      });
    },
    async querySearch(value) {
      let res = await this.dictQuery({ code: 'transport_type', label: value });
      if (this.$checkRes(res)) {
        this.$set(this, 'shop_transport_typeList', res.data);
      }
    },
    async onSubmit(val) {
      let info = this.info;
      let res;
      if (info.transport) {
        info.transport = { ...info.transport, shop_transport_no: val.shop_transport_no, shop_transport_type: val.shop_transport_type, shop_receive: true };
      } else {
        let transport = { shop_transport_no: val.shop_transport_no, shop_transport_type: val.shop_transport_type, shop_receive: true };
        info.transport = transport;
      }
      if (info.id) res = await this.update(info);
      if (this.$checkRes(res)) {
        this.$message({ type: `success`, message: `维护信息成功` });
        this.search();
      }
    },
    // 查询其他信息
    async searchOther() {
      let res;
      // 类型
      res = await this.dictQuery({ code: 'afterSale_type' });
      if (this.$checkRes(res)) {
        this.$set(this, `typeList`, res.data);
      }
      res = await this.dictQuery({ code: 'afterSale_status' });
      if (this.$checkRes(res)) {
        this.$set(this, `statusList`, res.data);
      }
    },
    // 返回
    toBack() {
      window.history.go('-1');
    },
  },
  computed: {
    id() {
      return this.$route.query.id;
    },
  },
  metaform() {
    return { title: this.$route.meta.title };
  },
  watch: {
    test: {
      deep: true,
      immediate: true,
      handler(val) {},
    },
  },
};
</script>

<style lang="less" scoped>
.main {
  .one {
    font-size: 20px;
    margin: 10px 4% 0 8%;
    padding: 5px;
    .add {
      border-bottom: 2px dashed #ccc;
      margin: 0 0 5px 0;
      padding: 5px 0;
    }
    .shop {
      padding: 4px 0;
      font-size: 22px;
      border-bottom: 1px solid #ccc;
    }
    .goods {
      padding: 10px 0;
      .money {
        text-align: right;
      }
    }
    .other {
      text-align: right;
      p {
        color: red;
      }
    }
    .el-col {
      margin: 4px 0;
    }
  }
  .two {
    margin: 0 0 0 20px;
  }
}
</style>