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

<template>
  <div id="index">
    <el-row>
      <el-col :span="24" class="main animate__animated animate__backInRight">
        <el-col :span="24" class="one"> <span>订单管理</span> </el-col>
        <el-col :span="24" class="four">
          <el-tabs v-model="activeName" type="border-card" @tab-click="handleClick">
            <el-tab-pane label="待付款" name="1">
              <card-1 :statusList="statusList"></card-1>
            </el-tab-pane>
            <el-tab-pane label="待发货" name="2">
              <card-2 :statusList="statusList"></card-2>
            </el-tab-pane>
            <el-tab-pane label="待收货" name="3">
              <card-3 :statusList="statusList"></card-3>
            </el-tab-pane>
            <el-tab-pane label="已收货" name="4">
              <card-4 :statusList="statusList"></card-4>
            </el-tab-pane>
          </el-tabs>
        </el-col>
      </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');
export default {
  name: 'index',
  props: {},
  components: {
    card1: () => import('./parts/card-1.vue'),
    card2: () => import('./parts/card-2.vue'),
    card3: () => import('./parts/card-3.vue'),
    card4: () => import('./parts/card-4.vue'),
  },
  data: function () {
    const that = this;
    return {
      activeName: '2',
      // 类型列表
      statusList: [],
      // 店铺列表
      shopList: [],
    };
  },
  async created() {
    await this.searchOther();
  },
  methods: {
    ...dictData({ dictQuery: 'query' }),
    ...shop({ shopQuery: 'query' }),
    handleClick(tab, event) {},
    // 查询其他信息
    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']),
  },
  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;
  }
}
</style>