web-admin/src/views/selfShop/order/index.vue

<template>
  <div id="index">
    <el-row>
      <el-col
        :span="24"
        class="main animate__animated animate__backInRight"
        v-loading="loadings"
        element-loading-text="拼命加载中"
        element-loading-spinner="el-icon-loading"
      >
        <span v-show="view === 'list'">
          <el-col :span="24" class="one"> <span>订单管理</span> </el-col>
          <el-col :span="24" class="four">
            <el-tabs v-model="activeName" @tab-click="handleClick" type="border-card">
              <el-tab-pane name="1" label="待付款"> </el-tab-pane>
              <el-tab-pane name="2" label="待发货"> </el-tab-pane>
              <el-tab-pane name="3" label="部分发货"> </el-tab-pane>
              <el-tab-pane name="4" label="待收货"> </el-tab-pane>
              <el-tab-pane name="5" label="已收货"> </el-tab-pane>
              <el-tab-pane name="6" label="取消订单"> </el-tab-pane>
              <!-- 待付款 -->
              <el-col :span="24" v-if="activeName == '1'">
                <card-1 :statusList="statusList" @toDetail="toDetail" @toSales="toSales"></card-1>
              </el-col>
              <!-- 待发货 -->
              <el-col :span="24" v-else-if="activeName == '2'">
                <card-2 :statusList="statusList" @toDetails="toDetail_t" @toSaless="toSales_t"></card-2>
              </el-col>
              <el-col :span="24" v-else-if="activeName == '3' || activeName == '4' || activeName == '5' || activeName == '6'">
                <el-col :span="24" class="one">
                  <search-1 :form="searchForm" @onSubmit="search" @querySearch="querySearch" @toReset="toClose" :shopList="shopList"> </search-1>
                </el-col>
                <data-table :fields="fields" :opera="opera" @query="search" :data="list" :total="total" @detail="toDetails" @sales="toSaless">
                  <template #is_afterSale="{ row }">
                    <span :style="{ color: row.is_afterSale === true ? 'red' : '' }">
                      {{ row.is_afterSale === true ? '该订单有商品申请售后' : '未申请售后' }}
                    </span>
                  </template>
                </data-table>
              </el-col>
            </el-tabs>
          </el-col>
        </span>
        <order v-if="view === 'order'" :id="order_id" @toBack="toBack"></order>
        <orderDetaile v-else-if="view === 'orderDetaile'" :id="order_id" @toBack="toBack"></orderDetaile>
        <salseOrder v-else-if="view === 'salseOrder'" :id="sales_id" @toBack="toBack"></salseOrder>
        <salseOrderDetail v-else-if="view === 'salseOrderDetail'" :id="sales_id" :status="status" @toBack="toBack"></salseOrderDetail>
      </el-col>
    </el-row>
  </div>
</template>

<script>
const _ = require('lodash');
import { mapState, mapGetters, createNamespacedHelpers } from 'vuex';
const { mapActions: dictData } = createNamespacedHelpers('dictData');
const { mapActions: shop } = createNamespacedHelpers('shop');
const { mapActions } = createNamespacedHelpers('orderDetail');
export default {
  name: 'index',
  props: {},
  components: {
    card1: () => import('@/components/orderParts/card/card-2.vue'),
    card2: () => import('@/components/orderParts/card/card-3.vue'),
    // 未付款---详情
    order: () => import('@/components/orderParts/detail/order.vue'),
    // 待发货，待收货，已收货---详情
    orderDetaile: () => import('@/components/orderParts/detail/orderDetaile.vue'),
    // 未付款----申请售后
    salseOrder: () => import('@/components/orderParts/detail/salseOrder.vue'),
    // 待发货，待收货，已收货----申请售后
    salseOrderDetail: () => import('@/components/orderParts/detail/salseOrderDetail.vue'),
    search1: () => import('@/components/orderParts/search/search-2.vue'),
  },
  data: function () {
    const that = this;
    return {
      loadings: true,
      view: 'list',
      activeName: '2',
      // 类型列表
      statusList: [],
      // 店铺列表
      shopList: [],
      order_id: '',
      sales_id: '',
      status: '',
      searchForm: {},
      list: [],
      total: 0,
      opera: [
        { label: '详情', method: 'detail' },
        { label: '售后', method: 'sales', type: 'danger', display: (i) => i.status == '1' || i.status == '2' || i.status == '2-' || i.status == '3' },
        // { label: '联系', method: 'message', type: 'warning' },
      ],
      fields: [
        { label: '订单号', model: 'no', showTip: false },
        { label: '下单时间', model: 'buy_time' },
        { label: '顾客', model: 'customer.name' },
        { label: '收货人', model: 'address', showTip: false, format: (i) => this.getAddress(i) },
        { label: '支付金额', model: 'real_pay' },
        { label: '商品数量', model: 'buy_num_total' },
        { label: '是否售后', model: 'is_afterSale', format: (i) => (i === true ? '该订单有商品申请售后' : '未申请售后'), custom: true },
      ],
    };
  },
  async created() {
    await this.searchOther();
    await this.search();
  },
  methods: {
    ...dictData({ dictQuery: 'query' }),
    ...shop({ shopQuery: 'query' }),
    ...mapActions(['query', 'fetch', 'create', 'update', 'delete']),
    // 查询
    async search({ skip = 0, limit = this.$limit, ...info } = {}) {
      if (this.$route.query.id) {
        let data = this.$route.query.id;
        this.toDetail_t(data);
      } else {
        if (this.active) this.$set(this, 'activeName', this.active);
        let condition = _.cloneDeep(this.searchForm);
        if (condition.buy_time) {
          condition[`buy_time@start`] = _.head(condition.buy_time);
          condition[`buy_time@end`] = _.last(condition.buy_time);
          delete condition.buy_time;
        }
        if (this.activeName == '3') info.status = '2-';
        else if (this.activeName == '2') info.status = '1';
        else if (this.activeName == '1') info.status = '0';
        else if (this.activeName == '4') info.status = '2';
        else if (this.activeName == '5') info.status = '3';
        else if (this.activeName == '6') info.status = '-1';
        info.shop = this.user.shop.id;
        let res = await this.query({ skip, limit, ...condition, ...info });
        if (this.$checkRes(res)) {
          this.$set(this, 'list', res.data);
          this.$set(this, 'total', res.total);
        }
      }
      this.loadings = false;
    },
    // 未付款
    toDetail(val) {
      this.$set(this, `order_id`, val);
      this.$set(this, `view`, 'order');
    },
    toSales(val) {
      this.$set(this, `sales_id`, val);
      this.$set(this, `view`, 'salseOrder');
    },
    // 待收货，已收货
    toDetails({ data }) {
      this.$set(this, `order_id`, data._id);
      this.$set(this, `view`, 'orderDetaile');
    },
    toSaless({ data }) {
      this.$set(this, `sales_id`, data._id);
      this.$set(this, `status`, data.status);
      this.$set(this, `view`, 'salseOrderDetail');
    },
    // 待发货
    toDetail_t(data) {
      this.$set(this, `order_id`, data);
      this.$set(this, `view`, 'orderDetaile');
    },
    toSales_t(data) {
      this.$set(this, `sales_id`, data.id);
      this.$set(this, `status`, data.status);
      this.$set(this, `view`, 'salseOrderDetail');
    },
    handleClick(tab) {
      this.loadings = true;
      this.search();
    },
    toBack() {
      this.view = 'list';
      this.loadings = true;
      if (this.$route.query.id) {
        delete this.$route.query.id;
      }
      this.search(this.searchQuery);
    },
    getAddress(i) {
      let name = i.name + ',' + i.phone;
      return name;
    },
    // 店铺名称
    getShopName(i) {
      let shopname = i.map((e) => e.shop_name);
      return shopname.join(',');
    },
    // 重置
    toClose() {
      this.searchForm = {};
      this.search();
    },
    // 店铺名称远程查询
    async querySearch(value) {
      let res = await this.shopQuery({ name: value });
      if (this.$checkRes(res)) this.$set(this, 'shopList', res.data);
    },
    // 查询其他信息
    async searchOther() {
      let res;
      // 类型
      res = await this.dictQuery({ code: 'order_process' });
      if (this.$checkRes(res)) this.$set(this, `statusList`, res.data);
      // 店铺
      res = await this.shopQuery();
      if (this.$checkRes(res)) this.$set(this, `shopList`, res.data);
    },
  },
  computed: {
    ...mapState(['user']),
    active() {
      return this.$route.query.activeName;
    },
    orders_id() {
      return this.$route.query.id;
    },
  },
  metaInfo() {
    return { title: this.$route.meta.title };
  },
  watch: {
    test: {
      deep: true,
      immediate: true,
      handler(val) {},
    },
  },
};
</script>

<style lang="less" scoped>
.main {
  .one {
    margin: 0 0 10px 0;

    span:nth-child(1) {
      font-size: 20px;
      font-weight: 700;
      margin-right: 10px;
    }
  }
  .two {
    margin: 0 0 10px 0;
  }
  .thr {
    margin: 0 0 10px 0;
  }
}

.el-col {
  margin: 10px 0;
}
</style>