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

<template>
  <div id="form-1">
    <el-row>
      <el-col :span="24" class="main animate__animated animate__backInRight">
        <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 :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 :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">
            <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'">
            <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 == '2'">
            <el-col :span="6">寄出运单号</el-col>
            <el-col :span="18" class="other">{{ transport.shop_transport_no || '暂无单号' }}</el-col>
          </el-col>
          <el-col :span="24">
            <el-col :span="6">售后描述</el-col>
            <el-col :span="18" class="other">{{ info.desc }}</el-col>
          </el-col>
          <el-col :span="24">
            <el-form :model="form" ref="form" label-width="100px" class="demo-ruleForm">
              <el-form-item label="售后状态" prop="status">
                <el-select v-model="form.status" clearable filterable placeholder="请选择" style="width: 100%" size="small">
                  <el-option v-for="i in status" :key="i.label" :label="i.label" :value="i.value"></el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="寄出运单号" prop="shop_transport_no" v-if="info.type == '2' && !transport.shop_transport_no">
                <el-input v-model="form.shop_transport_no" placeholder="请输入运单号,快递类型,同时填入" size="small"></el-input>
              </el-form-item>
              <el-form-item label="快递类型" prop="shop_transport_type" v-if="info.type == '2' && !transport.shop_transport_no">
                <el-select
                  v-model="form.shop_transport_type"
                  clearable
                  filterable
                  placeholder="请选择快递类型,运单号,同时填入"
                  size="small"
                  style="width: 100%"
                >
                  <el-option v-for="i in shop_transport_typeList" :key="i._id" :label="i.label" :value="i.value"> </el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="售后结束时间" prop="end_time" v-if="!info.end_time">
                <el-date-picker v-model="form.end_time" type="datetime" placeholder="选择时间" value-format="yyyy-MM-dd HH:mm:ss"> </el-date-picker>
              </el-form-item>
              <el-form-item>
                <el-button type="primary" @click="onSubmit()">保存</el-button>
              </el-form-item>
            </el-form>
          </el-col>
        </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');

export default {
  name: 'form-1',
  props: {},
  components: {},
  data: function () {
    return {
      shop: {},
      file: '',
      goods: {},
      good: {},
      transport: {},
      typeList: [],
      statusList: [],
      status: [],
      form: {},
      info: {},
      shop_transport_typeList: [],
    };
  },
  async created() {
    await this.searchOther();
    await this.search();
  },
  methods: {
    ...sot({ sotFetch: 'fetch' }),
    ...dictData({ dictQuery: 'query' }),
    ...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.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);
        this.getStatusList();
      }
    },
    async getStatusList() {
      let form = this.form;
      let e = this.statusList;
      let list = [];
      if (form.type == '0') {
        for (const val of e) {
          if (val.value == '0' || val.value == '1' || val.value == '-1') {
            list.push(val);
          }
        }
      } else if (form.type == '1') {
        for (const val of e) {
          if (val.value == '0' || val.value == '2' || val.value == '-2') {
            list.push(val);
          }
        }
      } else {
        for (const val of e) {
          if (val.value == '0' || val.value == '3' || val.value == '-3') {
            list.push(val);
          }
        }
      }
      this.$set(this, `status`, list);
    },
    // 提交
    async onSubmit() {
      let form = this.form;
      let transport = {};
      let res;
      if (form.shop_transport_no && form.shop_transport_type) {
        transport.shop_transport_no = form.shop_transport_no;
        transport.shop_transport_type = form.shop_transport_type;
        form.transport = transport;
      }
      if (form.id) res = await this.update(form);
      if (this.$checkRes(res)) {
        this.$message({ type: `success`, message: `维护信息成功` });
        this.toBack();
      }
    },
    // 查询其他信息
    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);
      }
      // 减免方式
      res = await this.dictQuery({ code: 'transport_type' });
      if (this.$checkRes(res)) {
        this.$set(this, `shop_transport_typeList`, 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 0 0 20%;
    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;
    }
  }
}
</style>