订单列表页接入小程序确认收货组件

pages/order/index.vue

@@ -70,7 +70,7 @@
               </block>
               <!-- 确认收货 -->
               <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>
+                <view class="btn-item active" @click="onReceipt(index)">确认收货</view>
               </block>
               <!-- 订单评价 -->
               <block v-if="item.order_status == OrderStatusEnum.COMPLETED.value && item.is_comment == 0">
@@ -92,6 +92,7 @@
     PayStatusEnum,
     ReceiptStatusEnum
   } from '@/common/enum/order'
+  import ClientEnum from '@/common/enum/Client'
   import MescrollMixin from '@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins'
   import { getEmptyPaginateObj, getMoreListData } from '@/core/app'
   import * as OrderApi from '@/api/order'
@@ -117,6 +118,9 @@
     value: 'comment'
   }]
 
+  // wx.onAppShow监听器
+  let listener = false
+
   export default {
     mixins: [MescrollMixin],
     data() {
@@ -167,6 +171,15 @@
       })
     },
 
+    /**
+     * 生命周期函数--监听页面卸载
+     */
+    onUnload() {
+      // #ifdef MP-WEIXIN
+      wx.offAppShow(listener)
+      // #endif
+    },
+
     /**
      * 生命周期函数--监听页面显示
      */
@@ -279,23 +292,97 @@
       },
 
       // 确认收货
-      onReceipt(orderId) {
+      async onReceipt(orderIndex) {
+        const app = this
+        const orderItem = app.list.data[orderIndex]
+        // 判断微信小程序端 - 同步发货信息管理
+        if (
+          app.platform === ClientEnum.MP_WEIXIN.value &&
+          orderItem.sync_weixin_shipping &&
+          orderItem.pay_method === PayMethodEnum.WECHAT.value &&
+          orderItem.platform === ClientEnum.MP_WEIXIN.value
+        ) {
+          // #ifdef MP-WEIXIN
+          // 微信小程序确认收货组件 - 回调监听
+          this.listenerBusinessView(orderItem.order_id)
+          // 确认收货弹窗 (微信小程序提供的用于同步发货信息管理)
+          app.openBusinessView(orderItem)
+          // #endif
+        } else {
+          // 确认收货弹窗 (系统默认)
+          app.receiptModal(orderItem.order_id)
+        }
+      },
+
+      // 确认收货弹窗 (微信小程序提供的用于同步发货信息管理)
+      // #ifdef MP-WEIXIN
+      openBusinessView(orderItem) {
+        const app = this
+        return new Promise((resolve, reject) => {
+          // 引导用户升级微信版本
+          if (!wx.openBusinessView) {
+            console.log('不支持 wx.openBusinessView')
+            resolve(false)
+          }
+          // 拉起确认收货组件
+          wx.openBusinessView({
+            businessType: 'weappOrderConfirm',
+            extraData: { transaction_id: orderItem.trade.trade_no },
+            success() {
+              // dosomething
+              console.log('拉起确认收货组件 success')
+              resolve(true)
+            },
+            fail(err) {
+              //dosomething
+              console.error('拉起确认收货组件 fail', err)
+              resolve(false)
+            }
+          })
+        })
+      },
+
+      // 微信小程序确认收货组件 - 回调监听
+      listenerBusinessView(orderId) {
+        // 这一步是为了防止出现多个监听器
+        if (listener !== false) {
+          wx.offAppShow(listener)
+        }
+        // 监听页面显示事件：微信小程序确认收货组件
+        listener = wx.onAppShow(({ referrerInfo }) => {
+          console.log('wx.onAppShow', orderId, referrerInfo.extraData)
+          // referrerInfo.extraData.status = success 用户确认收货成功;  fail 用户确认收货失败; cancel 用户取消
+          // 确认收货
+          if (referrerInfo.extraData && referrerInfo.extraData.status && referrerInfo.extraData.status === 'success') {
+            console.log('success receiptEvent', orderId)
+            this.receiptEvent(orderId)
+          }
+        })
+      },
+      // #endif
+
+      // 确认收货弹窗 (系统默认)
+      receiptModal(orderId) {
         const app = this
         uni.showModal({
           title: '友情提示',
           content: '确认收到商品了吗？',
           success(o) {
-            if (o.confirm) {
-              OrderApi.receipt(orderId)
-                .then(result => {
-                  // 显示成功信息
-                  app.$success(result.message)
-                  // 刷新订单列表
-                  app.onRefreshList()
-                })
-            }
+            o.confirm && app.receiptEvent(orderId)
           }
-        });
+        })
+      },
+
+      // 确认收货事件
+      receiptEvent(orderId) {
+        const app = this
+        OrderApi.receipt(orderId)
+          .then(result => {
+            // 显示成功信息
+            app.$success(result.message)
+            // 刷新订单列表
+            app.onRefreshList()
+          })
       },
 
       // 点击去支付