订单

src/router/module/system.js

@@ -35,6 +35,18 @@ export default [
     meta: { title: '平台管理-平台订单管理' },
     component: () => import(/* webpackChunkName: "system_goodsTags" */ '@/views/system/order/index.vue'),
   },
+  {
+    path: '/system/order/detail_order',
+    name: 'system_order_detail_order',
+    meta: { title: '自营店铺-订单管理-详细信息' },
+    component: () => import(/* webpackChunkName: "system_order_detail_order" */ '@/views/system/order/detail_order.vue'),
+  },
+  {
+    path: '/system/order/detail_orderDetail',
+    name: 'system_order_detail_orderDetail',
+    meta: { title: '自营店铺-订单管理-详细信息' },
+    component: () => import(/* webpackChunkName: "system_order_detail_orderDetail" */ '@/views/system/order/detail_orderDetail.vue'),
+  },
   {
     path: '/system/coupon',
     name: 'system_coupon',

src/views/system/order/detail_order.vue

@@ -0,0 +1,179 @@
+<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="add">
+            <el-col :span="2">
+              <i class="el-icon-location"></i>
+            </el-col>
+            <el-col :span="22">
+              <p>{{ address.name }},{{ address.phone }}</p>
+              <p>{{ address.province }} , {{ address.city }} , {{ address.area }} , {{ address.address }}</p>
+            </el-col>
+          </el-col>
+          <el-col :span="24" v-for="(item, index) in list" :key="index">
+            <el-col :span="24" class="shop"> <i class="el-icon-s-shop"></i>{{ item.shop_name }}</el-col>
+            <el-col :span="24" v-for="(goods, index) in item.goods" :key="index">
+              <el-col :span="24" class="goods">
+                <el-col :span="6"><el-image :src="goods.goods.file[0].url"></el-image></el-col>
+                <el-col :span="18">
+                  <el-col :span="12">
+                    <p>{{ goods.goods.name }}</p>
+                    <p>规格：{{ goods.name }}</p>
+                  </el-col>
+                  <el-col :span="12" class="money">
+                    <p>￥{{ goods.sell_money }}</p>
+                    <p>X{{ goods.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" v-if="!item.freight_total == '0'">{{ item.freight_total }}</el-col>
+                <el-col :span="18" class="other" v-else>包邮</el-col>
+              </el-col>
+              <el-col :span="24">
+                <el-col :span="6">订单备注</el-col>
+                <el-col :span="18" class="other" v-if="item.remarks">{{ item.remarks }}</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">快递配送</el-col>
+          </el-col>
+          <el-col :span="24" class="goods_total">
+            <el-col :span="6">应付金额</el-col>
+            <el-col :span="18" class="other">
+              <p v-if="total_detail.discount_detail">￥{{ goods_total }}</p>
+              <p v-else>￥{{ total_detail.goods_total }}</p>
+            </el-col>
+          </el-col>
+          <el-col :span="24">
+            <el-col :span="6">下单时间</el-col>
+            <el-col :span="18" class="other">{{ info.buy_time }}</el-col>
+          </el-col>
+          <el-col :span="24">
+            <el-col :span="6">支付时间</el-col>
+            <el-col :span="18" class="other">{{ info.pay_time || '未支付' }}</el-col>
+          </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('order');
+export default {
+  name: 'form-1',
+  props: {},
+  components: {},
+  data: function () {
+    return {
+      info: {},
+      address: {},
+      goods_total: 0,
+      list: [],
+      total_detail: {},
+      typeList: [],
+      statusList: [],
+    };
+  },
+  async created() {
+    await this.search();
+  },
+  methods: {
+    ...mapActions(['query', 'fetch', 'create', 'update']),
+    // 查询
+    async search() {
+      let res = await this.fetch(this.id);
+      if (this.$checkRes(res)) {
+        this.$set(this, `info`, res.data);
+        // 地址
+        this.$set(this, `address`, res.data.address);
+        // 商品
+        this.$set(this, `list`, res.data.goods);
+        // 实付金额
+        this.$set(this, `total_detail`, res.data.total_detail);
+        var goods_total = 0;
+        let discount_detail = res.data.total_detail.discount_detail;
+        for (const key in discount_detail) {
+          if (Object.hasOwnProperty.call(discount_detail, key)) {
+            const element = discount_detail[key];
+            for (const i in element) {
+              if (Object.hasOwnProperty.call(element, i)) {
+                const ele = element[i].realPay;
+                goods_total += ele;
+              }
+            }
+          }
+        }
+        this.$set(this, `goods_total`, goods_total);
+      }
+    },
+    // 返回
+    toBack() {
+      window.history.go('-1');
+    },
+  },
+  computed: {
+    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 {
+    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>

src/views/system/order/detail_orderDetail.vue

@@ -0,0 +1,180 @@
+<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="add">
+            <el-col :span="2">
+              <i class="el-icon-location"></i>
+            </el-col>
+            <el-col :span="22">
+              <p>{{ address.name }},{{ address.phone }}</p>
+              <p>{{ address.province }} , {{ address.city }} , {{ address.area }} , {{ address.address }}</p>
+            </el-col>
+          </el-col>
+          <el-col :span="24" class="shop"> <i class="el-icon-s-shop"></i>{{ shop.name }}</el-col>
+          <el-col :span="24" v-for="(item, index) in list" :key="index">
+            <el-col :span="24" class="goods">
+              <el-col :span="6"><el-image :src="item.goods.file[0].url"></el-image></el-col>
+              <el-col :span="18">
+                <el-col :span="12">
+                  <p>{{ item.goods.name }}</p>
+                  <p>规格：{{ item.name }}</p>
+                </el-col>
+                <el-col :span="12" class="money">
+                  <p>￥{{ item.sell_money }}</p>
+                  <p>X{{ item.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" v-if="!item.freight_total == '0'">{{ item.freight_total }}</el-col>
+              <el-col :span="18" class="other" v-else>包邮</el-col>
+            </el-col>
+          </el-col>
+          <el-col :span="24">
+            <el-col :span="6">订单备注</el-col>
+            <el-col :span="18" class="other" v-if="info.remarks">{{ info.remarks }}</el-col>
+            <el-col :span="18" class="other" v-else>暂无备注</el-col>
+          </el-col>
+          <el-col :span="24">
+            <el-col :span="6">配送方式</el-col>
+            <el-col :span="18" class="other">快递配送</el-col>
+          </el-col>
+          <el-col :span="24" class="goods_total">
+            <el-col :span="6">实付金额</el-col>
+            <el-col :span="18" class="other">
+              <p v-if="total_detail.discount_detail">￥{{ goods_total }}</p>
+              <p v-else>￥{{ total_detail.goods_total }}</p>
+            </el-col>
+          </el-col>
+          <el-col :span="24">
+            <el-col :span="6">下单时间</el-col>
+            <el-col :span="18" class="other">{{ info.buy_time }}</el-col>
+          </el-col>
+          <el-col :span="24">
+            <el-col :span="6">支付时间</el-col>
+            <el-col :span="18" class="other">{{ info.pay_time }}</el-col>
+          </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('orderDetail');
+export default {
+  name: 'form-1',
+  props: {},
+  components: {},
+  data: function () {
+    return {
+      info: {},
+      address: {},
+      goods_total: 0,
+      shop: {},
+      list: [],
+      total_detail: {},
+      typeList: [],
+      statusList: [],
+    };
+  },
+  async created() {
+    await this.search();
+  },
+  methods: {
+    ...mapActions(['query', 'fetch', 'create', 'update']),
+    // 查询
+    async search() {
+      let res;
+      res = await this.fetch(this.id);
+      if (this.$checkRes(res)) {
+        this.$set(this, `info`, 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);
+        var goods_total = 0;
+        let discount_detail = res.data.total_detail.discount_detail;
+        for (const key in discount_detail) {
+          if (Object.hasOwnProperty.call(discount_detail, key)) {
+            const element = discount_detail[key];
+            for (const i in element) {
+              if (Object.hasOwnProperty.call(element, i)) {
+                const ele = element[i].realPay;
+                goods_total += ele;
+              }
+            }
+          }
+        }
+        this.$set(this, `goods_total`, goods_total);
+      }
+    },
+    // 返回
+    toBack() {
+      window.history.go('-1');
+    },
+  },
+  computed: {
+    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 {
+    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>

src/views/system/order/index.vue

@@ -1,27 +1,104 @@
 <template>
   <div id="index">
-    <p>index</p>
+    <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>
-import { mapState, createNamespacedHelpers } from 'vuex';
+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: {},
+  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 () {
-    return {};
+    const that = this;
+    return {
+      activeName: '1',
+      // 类型列表
+      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']),
   },
-  created() {},
-  methods: {},
   metaInfo() {
     return { title: this.$route.meta.title };
   },
+  watch: {
+    test: {
+      deep: true,
+      immediate: true,
+      handler(val) {},
+    },
+  },
 };
 </script>
 
-<style lang="less" scoped></style>
+<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>

src/views/system/order/parts/card-1.vue

@@ -0,0 +1,137 @@
+<template>
+  <div id="card-1">
+    <el-row>
+      <el-col :span="24" class="main">
+        <el-col :span="24" class="one">
+          <search-1
+            :form="searchForm"
+            :statusList="statusList"
+            @onSubmit="search"
+            @querySearch="querySearch"
+            @toReset="toClose"
+            :total="total"
+            :shopList="shopList"
+          >
+          </search-1>
+        </el-col>
+        <data-table
+          :select="true"
+          :selected="selected"
+          @handleSelect="handleSelect"
+          :fields="fields"
+          :opera="opera"
+          @query="search"
+          :data="list"
+          :total="total"
+          @detail="toDetail"
+        >
+        </data-table>
+      </el-col>
+    </el-row>
+  </div>
+</template>
+
+<script>
+const _ = require('lodash');
+import { mapState, createNamespacedHelpers } from 'vuex';
+const { mapActions } = createNamespacedHelpers('order');
+const { mapActions: shop } = createNamespacedHelpers('shop');
+export default {
+  name: 'card-1',
+  // props: { list: { type: Array }, total: { type: Number }, statusList: { type: Array }  },
+  props: { statusList: { type: Array } },
+  components: { search1: () => import('./search-1.vue') },
+  data: function () {
+    return {
+      searchForm: {},
+      list: [],
+      total: 0,
+      opera: [{ label: '详情', method: 'detail' }],
+      fields: [
+        { label: '订单号', model: 'no' },
+        { label: '下单时间', model: 'buy_time' },
+        { label: '顾客', model: 'customer.name' },
+        { label: '店铺名称', model: 'goods', format: (i) => this.getShopName(i) },
+        {
+          label: '需支付金额',
+          model: 'total_detail',
+          format: (i) => this.computedNeedPay(i),
+        },
+      ],
+      // 多选值
+      selected: [],
+      shopList: [],
+    };
+  },
+  async created() {
+    await this.search();
+  },
+  methods: {
+    ...shop({ shopQuery: 'query' }),
+    ...mapActions(['query', 'fetch', 'create', 'update', 'delete']),
+    computedNeedPay(details) {
+      let total = 0;
+      for (const key in details) {
+        total += details[key];
+      }
+      return _.floor(total, 2);
+    },
+    // 查询
+    async search({ skip = 0, limit = 10, ...info } = {}) {
+      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;
+      }
+      info.status = '0';
+      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);
+      }
+    },
+    getShopName(i) {
+      let shopname = i.map((e) => e.shop_name);
+      return shopname.join(',');
+    },
+    toDetail({ data }) {
+      this.$router.push({ path: '/system/order/detail_order', query: { id: data.id } });
+    },
+    toClose() {
+      this.searchForm = {};
+      this.search();
+    },
+    // 多选
+    handleSelect(data) {
+      this.$emit('handleSelect');
+    },
+    // 店铺名称远程查询
+    async querySearch(value) {
+      let res = await this.shopQuery({ name: value });
+      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>
+.one {
+  margin: 0 0 10px 0;
+}
+</style>

src/views/system/order/parts/card-2.vue

@@ -0,0 +1,115 @@
+<template>
+  <div id="card-1">
+    <el-row>
+      <el-col :span="24" class="main">
+        <el-col :span="24" class="one">
+          <search-1 :form="searchForm" :statusList="statusList" @onSubmit="search" @toReset="toClose" :total="total"></search-1>
+        </el-col>
+        <data-table
+          :select="true"
+          :selected="selected"
+          @handleSelect="handleSelect"
+          :fields="fields"
+          :opera="opera"
+          @query="search"
+          :data="list"
+          :total="total"
+          @detail="toDetail"
+        >
+        </data-table>
+      </el-col>
+    </el-row>
+  </div>
+</template>
+
+<script>
+const _ = require('lodash');
+
+import { mapState, createNamespacedHelpers } from 'vuex';
+const { mapActions } = createNamespacedHelpers('orderDetail');
+
+export default {
+  name: 'card-1',
+  props: { statusList: { type: Array } },
+  components: { search1: () => import('./search-1.vue') },
+  data: function () {
+    return {
+      searchForm: {},
+      list: [],
+      total: 0,
+      opera: [{ label: '详情', method: 'detail' }],
+      fields: [
+        { label: '订单号', model: 'no' },
+        { label: '下单时间', model: 'buy_time' },
+        { label: '顾客', model: 'customer.name' },
+        { label: '店铺名称', model: 'shop.name' },
+        {
+          label: '需支付金额',
+          model: 'total_detail',
+          format: (i) => this.computedNeedPay(i),
+        },
+      ],
+      // 多选值
+      selected: [],
+    };
+  },
+  async created() {
+    await this.search();
+  },
+  methods: {
+    ...mapActions(['query', 'fetch', 'create', 'update', 'delete']),
+    computedNeedPay(details) {
+      let total = 0;
+      for (const key in details) {
+        total += details[key];
+      }
+      return _.floor(total, 2);
+    },
+    // 查询
+    async search({ skip = 0, limit = 10, ...info } = {}) {
+      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;
+      }
+      info.status = '1';
+      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);
+      }
+    },
+    toDetail({ data }) {
+      this.$router.push({ path: '/system/order/detail_orderDetail', query: { id: data.id } });
+    },
+    toClose() {
+      this.searchForm = {};
+      this.search();
+    },
+    // 多选
+    handleSelect(data) {
+      this.$emit('handleSelect');
+    },
+  },
+  computed: {
+    ...mapState(['user']),
+  },
+  metaInfo() {
+    return { title: this.$route.meta.title };
+  },
+  watch: {
+    test: {
+      deep: true,
+      immediate: true,
+      handler(val) {},
+    },
+  },
+};
+</script>
+
+<style lang="less" scoped>
+.one {
+  margin: 0 0 10px 0;
+}
+</style>

src/views/system/order/parts/card-3.vue

@@ -0,0 +1,115 @@
+<template>
+  <div id="card-1">
+    <el-row>
+      <el-col :span="24" class="main">
+        <el-col :span="24" class="one">
+          <search-1 :form="searchForm" :statusList="statusList" @onSubmit="search" @toReset="toClose" :total="total"></search-1>
+        </el-col>
+        <data-table
+          :select="true"
+          :selected="selected"
+          @handleSelect="handleSelect"
+          :fields="fields"
+          :opera="opera"
+          @query="search"
+          :data="list"
+          :total="total"
+          @detail="toDetail"
+        >
+        </data-table>
+      </el-col>
+    </el-row>
+  </div>
+</template>
+
+<script>
+const _ = require('lodash');
+
+import { mapState, createNamespacedHelpers } from 'vuex';
+const { mapActions } = createNamespacedHelpers('orderDetail');
+
+export default {
+  name: 'card-1',
+  props: { statusList: { type: Array } },
+  components: { search1: () => import('./search-1.vue') },
+  data: function () {
+    return {
+      searchForm: {},
+      list: [],
+      total: 0,
+      opera: [{ label: '详情', method: 'detail' }],
+      fields: [
+        { label: '订单号', model: 'no' },
+        { label: '下单时间', model: 'buy_time' },
+        { label: '顾客', model: 'customer.name' },
+        { label: '店铺名称', model: 'shop.name' },
+        {
+          label: '需支付金额',
+          model: 'total_detail',
+          format: (i) => this.computedNeedPay(i),
+        },
+      ],
+      // 多选值
+      selected: [],
+    };
+  },
+  async created() {
+    await this.search();
+  },
+  methods: {
+    ...mapActions(['query', 'fetch', 'create', 'update', 'delete']),
+    computedNeedPay(details) {
+      let total = 0;
+      for (const key in details) {
+        total += details[key];
+      }
+      return _.floor(total, 2);
+    },
+    // 查询
+    async search({ skip = 0, limit = 10, ...info } = {}) {
+      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;
+      }
+      info.status = '2';
+      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);
+      }
+    },
+    toDetail({ data }) {
+      this.$router.push({ path: '/system/order/detail_orderDetail', query: { id: data.id } });
+    },
+    toClose() {
+      this.searchForm = {};
+      this.search();
+    },
+    // 多选
+    handleSelect(data) {
+      this.$emit('handleSelect');
+    },
+  },
+  computed: {
+    ...mapState(['user']),
+  },
+  metaInfo() {
+    return { title: this.$route.meta.title };
+  },
+  watch: {
+    test: {
+      deep: true,
+      immediate: true,
+      handler(val) {},
+    },
+  },
+};
+</script>
+
+<style lang="less" scoped>
+.one {
+  margin: 0 0 10px 0;
+}
+</style>

src/views/system/order/parts/card-4.vue

@@ -0,0 +1,115 @@
+<template>
+  <div id="card-1">
+    <el-row>
+      <el-col :span="24" class="main">
+        <el-col :span="24" class="one">
+          <search-1 :form="searchForm" :statusList="statusList" @onSubmit="search" @toReset="toClose" :total="total"></search-1>
+        </el-col>
+        <data-table
+          :select="true"
+          :selected="selected"
+          @handleSelect="handleSelect"
+          :fields="fields"
+          :opera="opera"
+          @query="search"
+          :data="list"
+          :total="total"
+          @detail="toDetail"
+        >
+        </data-table>
+      </el-col>
+    </el-row>
+  </div>
+</template>
+
+<script>
+const _ = require('lodash');
+
+import { mapState, createNamespacedHelpers } from 'vuex';
+const { mapActions } = createNamespacedHelpers('orderDetail');
+
+export default {
+  name: 'card-1',
+  props: { statusList: { type: Array } },
+  components: { search1: () => import('./search-1.vue') },
+  data: function () {
+    return {
+      searchForm: {},
+      list: [],
+      total: 0,
+      opera: [{ label: '详情', method: 'detail' }],
+      fields: [
+        { label: '订单号', model: 'no' },
+        { label: '下单时间', model: 'buy_time' },
+        { label: '顾客', model: 'customer.name' },
+        { label: '店铺名称', model: 'shop.name' },
+        {
+          label: '需支付金额',
+          model: 'total_detail',
+          format: (i) => this.computedNeedPay(i),
+        },
+      ],
+      // 多选值
+      selected: [],
+    };
+  },
+  async created() {
+    await this.search();
+  },
+  methods: {
+    ...mapActions(['query', 'fetch', 'create', 'update', 'delete']),
+    computedNeedPay(details) {
+      let total = 0;
+      for (const key in details) {
+        total += details[key];
+      }
+      return _.floor(total, 2);
+    },
+    // 查询
+    async search({ skip = 0, limit = 10, ...info } = {}) {
+      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;
+      }
+      info.status = '3';
+      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);
+      }
+    },
+    toDetail({ data }) {
+      this.$router.push({ path: '/system/order/detail_orderDetail', query: { id: data.id } });
+    },
+    toClose() {
+      this.searchForm = {};
+      this.search();
+    },
+    // 多选
+    handleSelect(data) {
+      this.$emit('handleSelect');
+    },
+  },
+  computed: {
+    ...mapState(['user']),
+  },
+  metaInfo() {
+    return { title: this.$route.meta.title };
+  },
+  watch: {
+    test: {
+      deep: true,
+      immediate: true,
+      handler(val) {},
+    },
+  },
+};
+</script>
+
+<style lang="less" scoped>
+.one {
+  margin: 0 0 10px 0;
+}
+</style>

src/views/system/order/parts/search-1.vue

@@ -0,0 +1,104 @@
+<template>
+  <div id="search-1">
+    <el-row>
+      <el-col :span="24" class="main">
+        <el-form :model="form" ref="form" label-width="130px">
+          <el-col :span="6">
+            <el-form-item label="订单号" prop="no">
+              <el-input v-model="form.no" placeholder="请输入订单号" size="small"></el-input>
+            </el-form-item>
+          </el-col>
+          <el-col :span="7">
+            <el-form-item label="下单日期" prop="buy_time">
+              <el-date-picker
+                v-model="form.buy_time"
+                type="daterange"
+                range-separator="至"
+                start-placeholder="开始日期"
+                end-placeholder="结束日期"
+                value-format="yyyy-MM-dd"
+              >
+              </el-date-picker>
+            </el-form-item>
+          </el-col>
+          <el-col :span="6">
+            <el-form-item label="店铺名称" prop="type">
+              <el-select
+                v-model="form.shop"
+                filterable
+                remote
+                reserve-keyword
+                placeholder="请输入商铺名称"
+                :remote-method="querySearch"
+                :loading="loading"
+                @change="handleSelect"
+              >
+                <el-option v-for="item in shopList" :key="item.id" :label="item.name" :value="item.id"> </el-option>
+              </el-select>
+            </el-form-item>
+          </el-col>
+          <el-col :span="24" class="btn">
+            <el-button type="primary" icon="el-icon-search" size="mini" @click="onSubmit('form')">搜索</el-button>
+            <el-button icon="el-icon-refresh" size="mini" @click="toReset('form')">重置</el-button>
+          </el-col>
+        </el-form>
+      </el-col>
+    </el-row>
+  </div>
+</template>
+
+<script>
+import { mapState, createNamespacedHelpers } from 'vuex';
+export default {
+  name: 'search-1',
+  props: { form: { type: Object }, statusList: { type: Array }, shopList: { type: Array } },
+  components: {},
+  data: function () {
+    return {
+      loading: false,
+    };
+  },
+  created() {},
+  methods: {
+    querySearch(value) {
+      this.loading = true;
+      this.$emit('querySearch', value);
+      this.loading = false;
+    },
+    handleSelect(value) {
+      this.$set(this.form, `shop`, value);
+    },
+    onSubmit() {
+      this.$emit('onSubmit');
+    },
+    toReset(formName) {
+      this.$refs[formName].resetFields();
+      this.$emit('toReset');
+    },
+  },
+  computed: {},
+  metaInfo() {
+    return { title: this.$route.meta.title };
+  },
+  watch: {
+    test: {
+      deep: true,
+      immediate: true,
+      handler(val) {},
+    },
+  },
+};
+</script>
+
+<style lang="less" scoped>
+.main {
+  .btn {
+    text-align: right;
+  }
+  /deep/.el-form-item {
+    float: left;
+    width: 100%;
+    margin: 0 0 10px 0;
+  }
+}
+</style>