优化：用户端待支付订单支付后刷新列表

pages/order/detail.vue

@@ -36,8 +36,7 @@
       <!-- 下一步操作 -->
       <view class="next-action" v-if="order.order_status == OrderStatusEnum.NORMAL.value">
         <view v-if="order.pay_status == PayStatusEnum.PENDING.value" class="action-btn" @click="onPay()">去支付</view>
-        <view v-if="order.delivery_status == DeliveryStatusEnum.DELIVERED.value && order.receipt_status == ReceiptStatusEnum.NOT_RECEIVED.value"
-          class="action-btn" @click="onReceipt(order.order_id)">确认收货</view>
+        <view v-if="order.delivery_status == DeliveryStatusEnum.DELIVERED.value && order.receipt_status == ReceiptStatusEnum.NOT_RECEIVED.value" class="action-btn" @click="onReceipt(order.order_id)">确认收货</view>
       </view>
     </view>
 
@@ -54,8 +53,7 @@
     </view>
 
     <!-- 物流信息 -->
-    <view v-if="order.delivery_type == DeliveryTypeEnum.EXPRESS.value && order.delivery_status == DeliveryStatusEnum.DELIVERED.value && order.express"
-      class="express i-card" @click="handleTargetExpress()">
+    <view v-if="order.delivery_type == DeliveryTypeEnum.EXPRESS.value && order.delivery_status == DeliveryStatusEnum.DELIVERED.value && order.express" class="express i-card" @click="handleTargetExpress()">
       <view class="main">
         <view class="info-item">
           <view class="item-lable">物流公司</view>
@@ -279,7 +277,9 @@
         // 当前设置
         setting: {},
         // 支付方式弹窗
-        showPayPopup: false
+        showPayPopup: false,
+        // 控制onShow事件是否刷新订单信息
+        canReset: false,
       }
     },
 
@@ -291,12 +291,26 @@
       this.orderId = orderId
       // 获取当前订单信息
       this.getOrderDetail()
+      // 注册全局事件订阅: 是否刷新当前订单数据
+      uni.$on('syncRefreshOrder', (val, isCur) => {
+        if (!isCur) {
+          this.canReset = val
+        }
+      })
+    },
+
+    /**
+     * 生命周期函数--监听页面显示
+     */
+    onShow() {
+      this.canReset && this.getOrderDetail()
+      this.canReset = false
     },
 
     methods: {
 
       // 获取当前订单信息
-      getOrderDetail() {
+      getOrderDetail(canReset = false) {
         const app = this
         app.isLoading = true
         OrderApi.detail(app.orderId)
@@ -305,6 +319,8 @@
             app.setting = result.data.setting
             app.isLoading = false
           })
+        // 相应全局事件订阅: 刷新上级页面数据
+        canReset && uni.$emit('syncRefreshOrder', true, true)
       },
 
       // 复制指定内容
@@ -346,7 +362,7 @@
                   // 显示成功信息
                   app.$toast(result.message)
                   // 刷新当前订单数据
-                  app.getOrderDetail()
+                  app.getOrderDetail(true)
                 })
             }
           }
@@ -366,7 +382,7 @@
                   // 显示成功信息
                   app.$success(result.message)
                   // 刷新当前订单数据
-                  app.getOrderDetail()
+                  app.getOrderDetail(true)
                 })
             }
           }
@@ -398,25 +414,17 @@
           wxPayment(result.data.payment)
             .then(() => {
               app.$success('支付成功')
-              setTimeout(() => {
-                app.getOrderDetail()
-              }, 1500)
-            })
-            .catch(err => {
-              app.$error('订单未支付')
-            })
-            .finally(() => {
-              app.disabled = false
+              setTimeout(() => app.getOrderDetail(true), 1500)
             })
+            .catch(err => app.$error('订单未支付'))
+            .finally(() => app.disabled = false)
         }
         // 余额支付
         if (result.data.pay_type == PayTypeEnum.BALANCE.value) {
           app.$success('支付成功')
           app.disabled = false
-          setTimeout(() => {
-            // 刷新当前订单数据
-            app.getOrderDetail()
-          }, 1500)
+          // 刷新当前订单数据
+          setTimeout(() => app.getOrderDetail(true), 1500)
         }
       },
 

pages/order/index.vue

@@ -1,11 +1,9 @@
 <template>
   <view class="container">
-    <mescroll-body ref="mescrollRef" :sticky="true" @init="mescrollInit" :down="{ native: true }" @down="downCallback"
-      :up="upOption" @up="upCallback">
+    <mescroll-body ref="mescrollRef" :sticky="true" @init="mescrollInit" :down="{ native: true }" @down="downCallback" :up="upOption" @up="upCallback">
 
       <!-- tab栏 -->
-      <u-tabs :list="tabs" :is-scroll="false" :current="curTab" active-color="#FA2209" :duration="0.2"
-        @change="onChangeTab" />
+      <u-tabs :list="tabs" :is-scroll="false" :current="curTab" active-color="#FA2209" :duration="0.2" @change="onChangeTab" />
 
       <!-- 订单列表 -->
       <view class="order-list">
@@ -61,8 +59,7 @@
               </block>
               <!-- 已支付进行中的订单 -->
               <block v-if="item.order_status != OrderStatusEnum.APPLY_CANCEL.value">
-                <block
-                  v-if="item.pay_status == PayStatusEnum.SUCCESS.value && item.delivery_status == DeliveryStatusEnum.NOT_DELIVERED.value">
+                <block v-if="item.pay_status == PayStatusEnum.SUCCESS.value && item.delivery_status == DeliveryStatusEnum.NOT_DELIVERED.value">
                   <view class="btn-item" @click="onCancel(item.order_id)">申请取消</view>
                 </block>
               </block>
@@ -73,8 +70,7 @@
                 <view class="btn-item active" @click="onPay(item.order_id)">去支付</view>
               </block>
               <!-- 确认收货 -->
-              <block
-                v-if="item.delivery_status == DeliveryStatusEnum.DELIVERED.value && item.receipt_status == ReceiptStatusEnum.NOT_RECEIVED.value">
+              <block v-if="item.delivery_status == DeliveryStatusEnum.DELIVERED.value && item.receipt_status == ReceiptStatusEnum.NOT_RECEIVED.value">
                 <view class="btn-item active" @click="onReceipt(item.order_id)">确认收货</view>
               </block>
               <!-- 订单评价 -->
@@ -198,7 +194,7 @@
             tip: '亲，暂无订单记录'
           }
         },
-        // 控制首次触发onShow事件时不刷新列表
+        // 控制onShow事件是否刷新订单列表
         canReset: false,
         // 支付方式弹窗
         showPayPopup: false
@@ -211,6 +207,10 @@
     onLoad(options) {
       // 初始化当前选中的标签
       this.initCurTab(options)
+      // 注册全局事件订阅: 是否刷新订单列表
+      uni.$on('syncRefreshOrder', canReset => {
+        this.canReset = canReset
+      })
     },
 
     /**
@@ -218,7 +218,15 @@
      */
     onShow() {
       this.canReset && this.onRefreshList()
-      // this.canReset = true
+      this.canReset = false
+    },
+
+    /**
+     * 生命周期函数--监听页面的卸载
+     */
+    onUnload() {
+      // 卸载全局事件订阅
+      uni.$off('syncRefreshOrder')
     },
 
     methods: {