管理订单-详情

src/router/module/selfShop.js

@@ -17,6 +17,18 @@ export default [
     meta: { title: '自营店铺-订单管理' },
     component: () => import(/* webpackChunkName: "selfShop_order" */ '@/views/selfShop/order/index.vue'),
   },
+  {
+    path: '/selfShop/order/detail_order',
+    name: 'selfShop_order_detail_order',
+    meta: { title: '自营店铺-订单管理-详细信息' },
+    component: () => import(/* webpackChunkName: "selfShop_order_detail_order" */ '@/views/selfShop/order/detail_order.vue'),
+  },
+  {
+    path: '/selfShop/order/detail_orderDetail',
+    name: 'selfShop_order_detail_orderDetail',
+    meta: { title: '自营店铺-订单管理-详细信息' },
+    component: () => import(/* webpackChunkName: "selfShop_order_detail_orderDetail" */ '@/views/selfShop/order/detail_orderDetail.vue'),
+  },
   {
     path: '/selfShop/coupon',
     name: 'selfShop_coupon',

src/views/selfShop/order/detail_order.vue

@@ -0,0 +1,157 @@
+<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.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_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">快递配送</el-col>
+          </el-col>
+          <el-col :span="24">
+            <el-col :span="6">运费</el-col>
+            <el-col :span="18" class="other" v-if="!goods.freight_total == '0'">{{ goods.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="goods_goods.remarks">{{ goods_goods.remarks }}</el-col>
+            <el-col :span="18" class="other" v-else>选填,可填写您与卖家达成一致的要求</el-col>
+          </el-col>
+          <el-col :span="24" class="goods_total">
+            <el-col :span="6">实付金额</el-col>
+            <el-col :span="18" class="other">
+              <p>￥{{ total_detail.goods_total }}</p>
+            </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 {
+      form: {},
+      address: {},
+      shop: {},
+      goods: {},
+      goods_goods: {},
+      file: '',
+      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, `address`, res.data.address);
+        // 店铺
+        this.$set(this, `shop`, res.data.goods[0]);
+        // 商品
+        this.$set(this, `goods`, res.data.goods[0].goods[0]);
+        this.$set(this, `goods_goods`, res.data.goods[0].goods[0].goods);
+        this.$set(this, `file`, res.data.goods[0].goods[0].goods.file[0].url);
+        // 实付金额
+        this.$set(this, `total_detail`, res.data.total_detail);
+      }
+    },
+    // 返回
+    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/selfShop/order/detail_orderDetail.vue

@@ -0,0 +1,164 @@
+<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" class="goods">
+            <el-col :span="6"><el-image :src="file"></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">快递配送</el-col>
+          </el-col>
+          <el-col :span="24">
+            <el-col :span="6">运费</el-col>
+            <el-col :span="18" class="other" v-if="!goods.freight_total == '0'">{{ goods.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="goods_goods.remarks">{{ goods_goods.remarks }}</el-col>
+            <el-col :span="18" class="other" v-else>选填,可填写您与卖家达成一致的要求</el-col>
+          </el-col>
+          <el-col :span="24" class="goods_total">
+            <el-col :span="6">实付金额</el-col>
+            <el-col :span="18" class="other">
+              <p>￥{{ total_detail.goods_total }}</p>
+            </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');
+const { mapActions: shop } = createNamespacedHelpers('shop');
+
+export default {
+  name: 'form-1',
+  props: {},
+  components: {},
+  data: function () {
+    return {
+      form: {},
+      address: {},
+      shop: {},
+      goods: {},
+      goods_goods: {},
+      file: '',
+      total_detail: {},
+      typeList: [],
+      statusList: [],
+    };
+  },
+  async created() {
+    await this.search();
+  },
+  methods: {
+    ...mapActions(['query', 'fetch', 'create', 'update']),
+    ...shop({ shopFetch: 'fetch' }),
+    // 查询
+    async search() {
+      let res;
+      res = await this.fetch(this.id);
+      if (this.$checkRes(res)) {
+        // 地址
+        this.$set(this, `address`, res.data.address);
+        // 商品
+        this.$set(this, `goods`, res.data.goods[0]);
+        this.$set(this, `goods_goods`, res.data.goods[0].goods);
+        this.$set(this, `file`, res.data.goods[0].goods.file[0].url);
+        // 实付金额
+        this.$set(this, `total_detail`, res.data.total_detail);
+        // 店铺
+        res = await this.shopFetch(res.data.shop);
+        if (this.$checkRes(res)) {
+          this.$set(this, `shop`, res.data);
+        }
+      }
+    },
+    // 返回
+    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/selfShop/order/index.vue

@@ -6,16 +6,16 @@
         <el-col :span="24" class="four">
           <el-tabs v-model="activeName" type="border-card" @tab-click="handleClick" v-if="shop && shop._id">
             <el-tab-pane label="待付款" name="1">
-              <card-1 :shop="shop" @toEdit="toEdit" @toDel="toDel" :statusList="statusList"></card-1>
+              <card-1 :shop="shop" :statusList="statusList"></card-1>
             </el-tab-pane>
             <el-tab-pane label="待发货" name="2">
-              <card-2 :shop="shop" @toEdit="toEdit" @toDel="toDel" :statusList="statusList"></card-2>
+              <card-2 :shop="shop" :statusList="statusList"></card-2>
             </el-tab-pane>
             <el-tab-pane label="待收货" name="3">
-              <card-3 :shop="shop" @toEdit="toEdit" @toDel="toDel" :statusList="statusList"></card-3>
+              <card-3 :shop="shop" :statusList="statusList"></card-3>
             </el-tab-pane>
             <el-tab-pane label="已收货" name="4">
-              <card-4 :shop="shop" @toEdit="toEdit" @toDel="toDel" :statusList="statusList"></card-4>
+              <card-4 :shop="shop" :statusList="statusList"></card-4>
             </el-tab-pane>
           </el-tabs>
         </el-col>
@@ -43,10 +43,6 @@ export default {
     const that = this;
     return {
       activeName: '1',
-      // 查询
-      searchForm: {},
-      // 多选值
-      selected: [],
       // 类型列表
       statusList: [],
       // 自营店铺信息
@@ -59,26 +55,7 @@ export default {
   methods: {
     ...dictData({ dictQuery: 'query' }),
     ...selfShop(['getInfo']),
-    handleClick(tab, event) {
-      this.search();
-    },
-    // 新增
-    toAdd() {},
-    // 修改
-    async toEdit({ data }) {
-      console.log(data);
-    },
-    async toDel({ data }) {
-      console.log(data);
-    },
-    toClose() {
-      this.searchForm = {};
-      this.search();
-    },
-    // 多选
-    handleSelect(data) {
-      this.$set(this, `selected`, data);
-    },
+    handleClick(tab, event) {},
     // 查询其他信息
     async searchOther() {
       let res;

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

@@ -14,8 +14,7 @@
           @query="search"
           :data="list"
           :total="total"
-          @edit="toEdit"
-          @del="toDel"
+          @detail="toDetail"
         >
         </data-table>
       </el-col>
@@ -37,10 +36,7 @@ export default {
       searchForm: {},
       list: [],
       total: 0,
-      opera: [
-        { label: '修改', method: 'edit' },
-        { label: '删除', method: 'del', confirm: true, type: 'danger' },
-      ],
+      opera: [{ label: '详情', method: 'detail' }],
       fields: [
         { label: '订单号', model: 'no' },
         { label: '下单时间', model: 'buy_time' },
@@ -82,11 +78,8 @@ export default {
         this.$set(this, 'total', res.total);
       }
     },
-    toEdit({ data }) {
-      this.$emit('toEdit', { data: data });
-    },
-    toDel({ data }) {
-      this.$emit('toDel', { data: data });
+    toDetail({ data }) {
+      this.$router.push({ path: '/selfShop/order/detail_order', query: { id: data.id } });
     },
     toClose() {
       this.searchForm = {};

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

@@ -14,8 +14,7 @@
           @query="search"
           :data="list"
           :total="total"
-          @edit="toEdit"
-          @del="toDel"
+          @detail="toDetail"
         >
         </data-table>
       </el-col>
@@ -38,21 +37,15 @@ export default {
       searchForm: {},
       list: [],
       total: 0,
-      opera: [
-        { label: '修改', method: 'edit' },
-        { label: '删除', method: 'del', confirm: true, type: 'danger' },
-      ],
+      opera: [{ label: '详情', method: 'detail' }],
       fields: [
-        { label: '店铺名称', model: 'shop.name' },
-        { label: '支付金额', model: 'pay.pay_money' },
+        { label: '订单号', model: 'no' },
+        { label: '下单时间', model: 'buy_time' },
+        { label: '顾客', model: 'customer.name' },
         {
-          label: '订单状态',
-          model: 'status',
-          format: (i) => {
-            let data = this.statusList.find((f) => f.value == i);
-            if (data) return data.label;
-            else return '暂无';
-          },
+          label: '需支付金额',
+          model: 'total_detail',
+          format: (i) => this.computedNeedPay(i),
         },
       ],
       // 多选值
@@ -64,21 +57,30 @@ export default {
   },
   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 } = {}) {
-      const condition = _.cloneDeep(this.searchForm);
+      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 });
+      let res = await this.query({ skip, limit, ...condition, ...info, shop: _.get(this.shop, '_id') });
       if (this.$checkRes(res)) {
         this.$set(this, 'list', res.data);
         this.$set(this, 'total', res.total);
       }
     },
-    toEdit({ data }) {
-      this.$emit('toEdit', { data: data });
-    },
-    toDel({ data }) {
-      this.$emit('toDel', { data: data });
+    toDetail({ data }) {
+      this.$router.push({ path: '/selfShop/order/detail_orderDetail', query: { id: data.id } });
     },
     toClose() {
       this.searchForm = {};

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

@@ -14,8 +14,7 @@
           @query="search"
           :data="list"
           :total="total"
-          @edit="toEdit"
-          @del="toDel"
+          @detail="toDetail"
         >
         </data-table>
       </el-col>
@@ -38,21 +37,15 @@ export default {
       searchForm: {},
       list: [],
       total: 0,
-      opera: [
-        { label: '修改', method: 'edit' },
-        { label: '删除', method: 'del', confirm: true, type: 'danger' },
-      ],
+      opera: [{ label: '详情', method: 'detail' }],
       fields: [
-        { label: '店铺名称', model: 'shop.name' },
-        { label: '支付金额', model: 'pay.pay_money' },
+        { label: '订单号', model: 'no' },
+        { label: '下单时间', model: 'buy_time' },
+        { label: '顾客', model: 'customer.name' },
         {
-          label: '订单状态',
-          model: 'status',
-          format: (i) => {
-            let data = this.statusList.find((f) => f.value == i);
-            if (data) return data.label;
-            else return '暂无';
-          },
+          label: '需支付金额',
+          model: 'total_detail',
+          format: (i) => this.computedNeedPay(i),
         },
       ],
       // 多选值
@@ -64,21 +57,30 @@ export default {
   },
   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 } = {}) {
-      const condition = _.cloneDeep(this.searchForm);
+      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 });
+      let res = await this.query({ skip, limit, ...condition, ...info, shop: _.get(this.shop, '_id') });
       if (this.$checkRes(res)) {
         this.$set(this, 'list', res.data);
         this.$set(this, 'total', res.total);
       }
     },
-    toEdit({ data }) {
-      this.$emit('toEdit', { data: data });
-    },
-    toDel({ data }) {
-      this.$emit('toDel', { data: data });
+    toDetail({ data }) {
+      this.$router.push({ path: '/selfShop/order/detail_orderDetail', query: { id: data.id } });
     },
     toClose() {
       this.searchForm = {};

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

@@ -14,8 +14,7 @@
           @query="search"
           :data="list"
           :total="total"
-          @edit="toEdit"
-          @del="toDel"
+          @detail="toDetail"
         >
         </data-table>
       </el-col>
@@ -38,21 +37,15 @@ export default {
       searchForm: {},
       list: [],
       total: 0,
-      opera: [
-        { label: '修改', method: 'edit' },
-        { label: '删除', method: 'del', confirm: true, type: 'danger' },
-      ],
+      opera: [{ label: '详情', method: 'detail' }],
       fields: [
-        { label: '店铺名称', model: 'shop.name' },
-        { label: '支付金额', model: 'pay.pay_money' },
+        { label: '订单号', model: 'no' },
+        { label: '下单时间', model: 'buy_time' },
+        { label: '顾客', model: 'customer.name' },
         {
-          label: '订单状态',
-          model: 'status',
-          format: (i) => {
-            let data = this.statusList.find((f) => f.value == i);
-            if (data) return data.label;
-            else return '暂无';
-          },
+          label: '需支付金额',
+          model: 'total_detail',
+          format: (i) => this.computedNeedPay(i),
         },
       ],
       // 多选值
@@ -64,21 +57,30 @@ export default {
   },
   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 } = {}) {
-      const condition = _.cloneDeep(this.searchForm);
+      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 });
+      let res = await this.query({ skip, limit, ...condition, ...info, shop: _.get(this.shop, '_id') });
       if (this.$checkRes(res)) {
         this.$set(this, 'list', res.data);
         this.$set(this, 'total', res.total);
       }
     },
-    toEdit({ data }) {
-      this.$emit('toEdit', { data: data });
-    },
-    toDel({ data }) {
-      this.$emit('toDel', { data: data });
+    toDetail({ data }) {
+      this.$router.push({ path: '/selfShop/order/detail_orderDetail', query: { id: data.id } });
     },
     toClose() {
       this.searchForm = {};