From 5a667351c6b5372ca2a53ba90e5d38f6b094ca7a Mon Sep 17 00:00:00 2001
From: szdot <szdot@live.com>
Date: Thu, 9 Nov 2023 21:39:50 +0800
Subject: [PATCH] =?UTF-8?q?=E8=AE=A2=E5=8D=95=E6=8A=BD=E5=B1=89=E7=BB=84?=
 =?UTF-8?q?=E4=BB=B6=E4=BF=AE=E6=94=B9=EF=BC=9B=E9=A1=B5=E5=A4=B4=E7=BB=84?=
 =?UTF-8?q?=E4=BB=B6=E6=A0=87=E9=A2=98=E4=BF=AE=E6=94=B9=EF=BC=9B=E6=97=A5?=
 =?UTF-8?q?=E5=BF=97=E7=BB=84=E4=BB=B6=E6=A0=87=E9=A2=98=E4=BF=AE=E6=94=B9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/QuestTabs.vue                  | 145 ++++++++++--------
 src/store/index.js                            |   8 +-
 src/views/layout/components/BlogBox.vue       |  10 +-
 src/views/layout/components/headbar.vue       |  81 +++++++---
 .../layout/components/main/order/show.vue     |  17 +-
 5 files changed, 161 insertions(+), 100 deletions(-)

diff --git a/src/components/QuestTabs.vue b/src/components/QuestTabs.vue
index 4de0400..c7483a7 100644
--- a/src/components/QuestTabs.vue
+++ b/src/components/QuestTabs.vue
@@ -1,36 +1,54 @@
 <template>
   <div class="p-15">
     <el-collapse v-model="activeNames" accordion>
-      <template v-if="list.length != 0">
-        <el-collapse-item class="mainFontColor" v-for="(item, index) in list" :key="item.id"
-          :title="'订单ID：' + item.id + ' | 时间：' + parseTime(item.addtime)" :name="item.id">
-          <el-descriptions direction="vertical" :column="3" border>
-            <el-descriptions-item label="状态" span="1">{{ orderState(item.status, item.back, item.quest) }}
+      <template v-if="orderListArr.length != 0">
+        <el-collapse-item class="mainFontColor" v-for="(item, index) in orderListArr" :key="index" :name="item.id">
+          <template slot="title">
+            <div class="clearB w-100">
+              <div class="fb l w-30">
+                订单ID：{{ item.id }}
+              </div>
+              <div class="r fb w-70 fr p-r-15">
+                下单时间：{{ parseTime(item.addtime) }}
+              </div>
+            </div>
+          </template>
+          <el-descriptions direction=" vertical" :column="3" border>
+            <el-descriptions-item label="状态">{{ orderState(item.back, item.status) }}
             </el-descriptions-item>
-            <el-descriptions-item label="订单号" span="2">{{ item.order_sn }}</el-descriptions-item>
-            <el-descriptions-item label="昵称">{{ item.name }}</el-descriptions-item>
-            <el-descriptions-item label="手机号">{{ item.tel }}</el-descriptions-item>
-            <el-descriptions-item label="价格">{{ item.price }}</el-descriptions-item>
-            <el-descriptions-item label="货品总数">{{ item.product_num }}</el-descriptions-item>
-            <el-descriptions-item label="收货站点">{{ item.receive_site_name }}</el-descriptions-item>
+            <el-descriptions-item label="订单号">{{ item.order_sn }}</el-descriptions-item>
             <el-descriptions-item label="取餐号">{{ item.food_sn }}</el-descriptions-item>
+            <el-descriptions-item label="收货人">{{ item.receiver }}</el-descriptions-item>
+            <el-descriptions-item label="手机号">{{ item.tel }}</el-descriptions-item>
+            <el-descriptions-item label="收货站点">{{ item.receive_site_name }}</el-descriptions-item>
+            <el-descriptions-item label="总重量">{{ item.total_weight }}克</el-descriptions-item>
+            <el-descriptions-item label="总价">{{ item.total_price }}元</el-descriptions-item>
+            <el-descriptions-item label="货品总数">{{ item.total_num }}件</el-descriptions-item>
             <el-descriptions-item label="订单详情" span="3">
-              <el-table :data="item.products" style="width: 100%">
-                <el-table-column prop="pid" label="ID" width="60">
+              <el-table v-for="spu, i in item.product_snapshot" :show-header="i === 0" :data="spu.sku_arr"
+                style="width: 100%">
+                <el-table-column prop="sku_name" label="名称">
                 </el-table-column>
-                <el-table-column prop="name" label="名称">
+                <el-table-column label="编号">
+                  <template slot-scope="scope">
+                    {{ scope.row.sku_number }}
+                  </template>
                 </el-table-column>
-                <el-table-column prop="pro_buff" label="属性">
+                <el-table-column label="数量">
+                  <template slot-scope="scope">
+                    {{ scope.row.sku_totol }}{{ scope.row.sku_unit }}
+                  </template>
                 </el-table-column>
-                <el-table-column prop="num" label="数量" width="60">
+                <el-table-column label="详情" width="120">
+                  <el-button type="primary" size="small">查看</el-button>
                 </el-table-column>
               </el-table>
             </el-descriptions-item>
-            <el-descriptions-item :label="item.back == 0 ? '客户备注' : '退货缘由'" span="3">
-              {{ item.back == 0 ? item.remark != '' ? item.remark : '无' : item.back_remark }}
+            <el-descriptions-item :label="item.back == 'normal' ? '客户备注' : '退货缘由'" span="3">
+              {{ item.back == 'requested' ? (item.back_remark || '无') : (item.remark || '无') }}
             </el-descriptions-item>
             <el-descriptions-item label="操作" span="3">
-              <el-button-group v-if="item.back == 1">
+              <el-button-group v-if="item.back == 'requested'">
                 <el-button type="danger" icon="iconfont icon-zhengque">
                   <font class="m-l-5">同意退款</font>
                 </el-button>
@@ -38,9 +56,9 @@
                   <font class="m-l-5">拒绝退款</font>
                 </el-button>
               </el-button-group>
-              <el-button-group v-else-if="item.back == 0 && item.quest == 0">
+              <el-button-group v-else-if="item.back == 'normal' && item.status == 'pending'">
                 <el-button @click="questAss(item.id, 'quest', '1')" type="primary" icon="iconfont icon-chengjie">
-                  <font class="m-l-5">承接订单</font>
+                  <font class="m-l-5">确认备货</font>
                 </el-button>
                 <el-button type="danger" icon="iconfont icon-cuowu">
                   <font class="m-l-5">取消订单</font>
@@ -49,7 +67,7 @@
                   <font class="m-l-5" @click="orderPrint(index)">打印小票</font>
                 </el-button>
               </el-button-group>
-              <el-button-group v-else-if="item.back == 0 && item.quest == 1 && item.status == 20">
+              <el-button-group v-else-if="item.back == 'normal' && item.status == 'processing'">
                 <el-button type="danger" icon="iconfont icon-cuowu">
                   <font class="m-l-5">取消订单</font>
                 </el-button>
@@ -71,42 +89,59 @@
 
 <script>
 import { parseTime } from '@/utils/index'
-import { questAss } from '@/utils/api/table'
 
 export default {
   data () {
     return {
-      list: [],
       activeNames: []
     }
   },
-  props: ['fil'],
+  props: {
+    fil: Number,
+    shop_id: String
+  },
   computed: {
     /**
-     * @description: 获取订单列表 ps:待发货及待收货 并没有发起退款和正在退款状态
+     * @description: 获取订单列表
      */
-    questList () {
-      return this.$store.state.questList
+    orderList () {
+      return this.$store.state.orderList
+    },
+    /**
+ * @description: 获取订单列表
+ */
+    orderListArr () {
+      let list = this.orderList // 初始化list变量为this.orderList数组
+      if (list.length > 0) {
+        if (this.fil === 2) { // 过滤“申请退款”的订单
+          list = list.filter(item => item.shop_id === this.shop_id && item.back === 'requested')
+        } else if (this.fil === 0) { // 过滤“待处理”的订单
+          list = list.filter(item => item.shop_id === this.shop_id && item.back === 'normal' && item.status === 'pending')
+        } else if (this.fil === 1) { // 过滤“备货中”的订单
+          list = list.filter(item => item.shop_id === this.shop_id && item.back === 'normal' && item.status === 'processing')
+        }
+        return list
+      }
+      return []
     }
   },
   methods: {
     parseTime, // 时间戳格式化
-    questAss,
-    orderState (status, back, quest) {
-      if (back === 1) {
+    orderState (back, status) {
+      if (back === 'requested') {
         return '申请退款'
       } else {
-        if (quest === 1) {
-          return '已确认接单'
+        if (status === 'pending') {
+          return '处理中'
         } else {
-          return '未确认订单'
+          return '备货中'
         }
       }
     },
     /**
-         * @description: 通过蓝牙打印机并打印小票
-         * @param {number} index 订单列表下标索引
-         */
+     * @description: 通过蓝牙打印机并打印小票
+     * @param {number} index 订单列表下标索引
+     */
     orderPrint (index) {
       // 订单文本编辑
       // console.log(this.list[index])
@@ -163,11 +198,11 @@ export default {
       // this.btPrint(con, '0', '1')
     },
     /**
-         * @description: cordova 打印api接口
-         * @param {string} str 内容
-         * @param {string} size 字体大小预设
-         * @param {string} algin 对齐
-         */
+     * @description: cordova 打印api接口
+     * @param {string} str 内容
+     * @param {string} size 字体大小预设
+     * @param {string} algin 对齐
+     */
     btPrint (str, size = '0', align = '0') {
       // BTPrinter.printTitle(function (data) {
       //   console.log('Success')
@@ -176,30 +211,18 @@ export default {
       //   console.log('Error')
       //   console.log(err)
       // }, str, size, align)// string, size, align
-    },
-    /**
-     * @description: 按父组件的fil参数 条件 显示列表
-     * @param {*} list 要处理的列表
-     */
-    computeQuestList () {
-      if (this.fil === 2) {
-        this.list = this.questList.filter(item => item.back === '1')
-      } else if (this.fil === 0) {
-        this.list = this.questList.filter(item => item.back === '0' && item.quest === '0' && item.status === '20')
-      } else if (this.fil === 1) {
-        this.list = this.questList.filter(item => item.back === '0' && item.quest === '1' && item.status === '20')
-      }
     }
   },
   watch: {
-    questList () {
-      this.computeQuestList()
-    }
   },
-  mounted () {
-    this.computeQuestList()
+  created () {
   }
 }
 </script>
 
-<style lang="scss" scoped></style>
+<style lang="scss" scoped>
+.orterTit {
+  display: flex;
+  justify-content: space-between;
+}
+</style>
diff --git a/src/store/index.js b/src/store/index.js
index 39c0b2a..7dfca44 100644
--- a/src/store/index.js
+++ b/src/store/index.js
@@ -896,7 +896,13 @@ const store = new Vuex.Store({
     async fetchOrderList ({ commit }) {
       const res = await api.get('getOrderList', 'Admin')
       if (res.data.status === 1) {
-        commit('setOrderList', res.data.orderList)
+        const list = res.data.orderList
+        list.forEach((item, index) => { // 拿到订单列表数据 直接把订单列表数据反序列化
+          if (item.product_snapshot !== '') {
+            list[index].product_snapshot = JSON.parse(item.product_snapshot)
+          }
+        })
+        commit('setOrderList', list)
       } else {
         commit('setOrderList', [])
       }
diff --git a/src/views/layout/components/BlogBox.vue b/src/views/layout/components/BlogBox.vue
index 13ac7e6..1e3b052 100644
--- a/src/views/layout/components/BlogBox.vue
+++ b/src/views/layout/components/BlogBox.vue
@@ -7,7 +7,15 @@
       <span>{{ newLog.timestamp | parseTime('{h}:{i}:{s}') }}</span>
       <span class="m-l-10">{{ newLog.content }}</span>
     </div>
-    <el-drawer title="程序日志" :modal-append-to-body="false" :visible.sync="drawer" direction="btt" size="50%">
+    <el-drawer :modal-append-to-body="false" :visible.sync="drawer" direction="btt" size="50%">
+      <template slot="title">
+        <div>
+          <i class="l f-s-18 vm iconfont icon-zengjia m-r-10"></i>
+          <h3>
+            程序日志
+          </h3>
+        </div>
+      </template>
       <el-timeline :reverse="true" class="p-l-50 p-r-50">
         <el-timeline-item v-for="(activity, index) in log" :key="index" :icon="activity.icon" :type="activity.type"
           :color="activity.color" :size="activity.size"
diff --git a/src/views/layout/components/headbar.vue b/src/views/layout/components/headbar.vue
index d827ab4..55084d3 100644
--- a/src/views/layout/components/headbar.vue
+++ b/src/views/layout/components/headbar.vue
@@ -35,20 +35,47 @@
       <el-button size="small" icon="iconfont icon-shuaxin" @click="refreshPage" circle></el-button>
     </div>
     <!-- 订单信息按钮 -->
-    <el-badge :hidden="orderCount == 0 ? true : false" :value="orderCount" class="navbarBadge l-h-50 p-r-15 r">
-      <el-button :type="orderCount !== 0 ? 'primary' : ''" @click="drawer = true" size="small" :icon="orderIcon"
-        circle></el-button>
+    <el-badge :hidden="pendingCount + processingCount + requestedCount == 0 ? true : false"
+      :value="pendingCount + processingCount + requestedCount" class="navbarBadge l-h-50 p-r-15 r">
+      <el-button :type="pendingCount + processingCount + requestedCount !== 0 ? 'primary' : ''" @click="drawer = true"
+        size="small" :icon="orderIcon" circle></el-button>
     </el-badge>
-    <el-drawer title="待处理订单" :visible.sync="drawer" size="40%" :append-to-body="true" :modal-append-to-body="false">
+    <el-drawer :visible.sync="drawer" size="40%" :append-to-body="true" :modal-append-to-body="false">
+      <template slot="title">
+        <div>
+          <i class="l f-s-18 iconfont icon-jinjidingdan m-r-5 l-h-18"></i>
+          <h3>
+            待处理订单
+          </h3>
+        </div>
+      </template>
+      <el-button-group class="m-l-20 m-b-15">
+        <SelectionShopId v-model="shop_id" />
+      </el-button-group>
       <el-tabs type="card">
-        <el-tab-pane label="未接订单">
-          <QuestTabs :fil='0' />
+        <el-tab-pane>
+          <template slot="label">
+            <span>已付款处理中</span>
+            <el-badge :hidden="pendingCount == 0 ? true : false" :value="pendingCount">
+            </el-badge>
+          </template>
+          <QuestTabs :fil='0' :shop_id="shop_id" />
         </el-tab-pane>
-        <el-tab-pane label="已接订单">
-          <QuestTabs :fil='1' />
+        <el-tab-pane>
+          <template slot="label">
+            <span>已接单备货中</span>
+            <el-badge :hidden="processingCount == 0 ? true : false" :value="processingCount">
+            </el-badge>
+          </template>
+          <QuestTabs :fil='1' :shop_id="shop_id" />
         </el-tab-pane>
-        <el-tab-pane label="申请退款订单">
-          <QuestTabs :fil='2' />
+        <el-tab-pane>
+          <template slot="label">
+            <span>申请退款订单</span>
+            <el-badge :hidden="requestedCount == 0 ? true : false" :value="requestedCount">
+            </el-badge>
+          </template>
+          <QuestTabs :fil='2' :shop_id="shop_id" />
         </el-tab-pane>
       </el-tabs>
     </el-drawer>
@@ -65,13 +92,16 @@
 import mqtt from '@/utils/mqtt'
 import Breadcrumb from '@/components/Breadcrumb'
 import QuestTabs from '@/components/QuestTabs'
+import SelectionShopId from '@/components/SelectionShopId'
 
 export default {
   name: 'Headbar',
   data () {
     return {
-      orderCount: null, // 订单总数
-      rebackCount: null, // 退款订单总数
+      shop_id: '', // 商铺id 过滤条件
+      pendingCount: null, // 处理中 订单总数
+      processingCount: null, // 备货中 订单总数
+      requestedCount: null, // 申请退款 订单总数
       drawer: false,
       getQuestInterval: null, // 用于销毁时间轴
       animationTrumpet: true // 喇叭动画
@@ -79,7 +109,8 @@ export default {
   },
   components: {
     Breadcrumb,
-    QuestTabs
+    QuestTabs,
+    SelectionShopId
   },
   computed: {
     /**
@@ -101,17 +132,17 @@ export default {
       return this.$store.state.settings.host + this.$store.state.user.photo
     },
     /**
-     * @description: 获取订单列表 ps:待发货及待收货 并没有发起退款和正在退款状态
+     * @description: 获取订单列表
      */
-    questList () {
-      return this.$store.state.questList
+    orderList () {
+      return this.$store.state.orderList
     },
     /**
      * @description: 面包条 订单图标动画
      * @return {*} 图标样式
      */
     orderIcon () {
-      if (this.orderCount === 0) {
+      if (this.pendingCount + this.processingCount + this.requestedCount === 0) {
         return 'iconfont icon-meiyoudingdan-01'
       } else {
         if (this.animationTrumpet) {
@@ -137,16 +168,18 @@ export default {
       if (this.getQuestInterval !== null) {
         clearInterval(this.getQuestInterval)
       }
-      const waitShip = list.filter(item => item.status === '20')// 过滤待处理订单
-      if (this.orderCount < waitShip.length && this.orderCount != null) { // 有新的数据 播放提示声音
+      const pending = list.filter(item => item.status === 'pending')// 过滤处理中 订单
+      const processing = list.filter(item => item.status === 'processing')// 过滤 备货中订单
+      const requested = list.filter(item => item.back === 'requested')// 过滤退款订单
+      if (this.pendingCount < pending.length && this.pendingCount != null) { // 有新的数据 播放提示声音
         this.playMusic('newMsg')// 新消息 声音播放
       }
-      this.orderCount = waitShip.length// 待处理订单总数（待发货订单总数）
-      const reBack = list.filter(item => item.back === '1')// 过滤退款订单
-      if (this.rebackCount < reBack.length && this.rebackCount != null) { // 有新的数据 播放提示声音
+      if (this.requestedCount < requested.length && this.requestedCount != null) { // 有新的数据 播放提示声音
         this.playMusic('rebackMsg')// 退款 声音播放
       }
-      this.rebackCount = reBack.length// 待处理订单总数（待发货订单总数）
+      this.pendingCount = pending.length// 处理中 订单总数
+      this.processingCount = processing.length// 备货中 订单总数
+      this.requestedCount = requested.length// 申请退款 订单总数
       this.getQuestInterval = setInterval(() => {
         this.animationTrumpet = !this.animationTrumpet// 面包条订单图标跳动
       }, 500)
@@ -187,7 +220,7 @@ export default {
     }
   },
   watch: {
-    questList (val) {
+    orderList (val) {
       this.computeQuestList(val)
     }
   }
diff --git a/src/views/layout/components/main/order/show.vue b/src/views/layout/components/main/order/show.vue
index 0fcd727..cd46d85 100644
--- a/src/views/layout/components/main/order/show.vue
+++ b/src/views/layout/components/main/order/show.vue
@@ -132,7 +132,8 @@
           <div class="el-descriptions__title">订单详情</div>
           <div class="el-descriptions__extra"></div>
         </div>
-        <el-descriptions class="margin-top m-b-20" v-for="spu, index in spuList" :key="index" :column="3" border>
+        <el-descriptions class="margin-top m-b-20" v-for="spu, index in orderDetails.product_snapshot" :key="index"
+          :column="3" border>
           <el-descriptions-item :span="3">
             <template slot="label">
               <i class="iconfont icon-chanpinliebiao-02"></i>
@@ -254,16 +255,6 @@ export default {
       } else {
         return {}
       }
-    },
-    /**
-     * @description: 解构spu
-     */
-    spuList () {
-      if (Object.keys(this.orderDetails).length > 0) {
-        return JSON.parse(this.orderDetails.product_snapshot)
-      } else {
-        return {}
-      }
     }
   },
   methods: {
@@ -277,9 +268,9 @@ export default {
       } else if (val.status === 'unpaid') {
         this.orderStatus = '未付款'
       } else if (val.status === 'pending') {
-        this.orderStatus = '未承接订单'
+        this.orderStatus = '已付款处理中'
       } else if (val.status === 'processing') {
-        this.orderStatus = '备货中'
+        this.orderStatus = '已接单备货中'
       } else if (val.status === 'shipped') {
         this.orderStatus = '已发货'
       } else if (val.status === 'completed') {