feat: app新增放弃支付回调。支付页面放弃支付跳转订单详情

src/utils/globalFunctionsForApp.ts

@@ -1,7 +1,9 @@
 import {
   isWeiXinBrowser
 } from './globalFunctions'
+
 declare const JyObj: any
+declare const window: any
 
 const inWeiXinBrowser = isWeiXinBrowser()
 
@@ -17,3 +19,54 @@ export function hiddenBottomBar (params = 0) {
     }
   }
 }
+
+/**
+ * app支付回调函数
+ * @param fns
+ * fns.cancel = function () {}
+ * fns.success = function () {}
+ * fns.fail = function () {}
+ */
+export function registerPayCallBack (fns: any = {}) {
+  const payStatusMap = {
+    0: '支付取消',
+    1: '支付完成',
+    '-1': '支付失败'
+  }
+  // 如果是app端，隐藏底部导航
+  if (inWeiXinBrowser) return
+  const empty = Object.keys(fns).length === 0
+  if (!empty) {
+    window.payCallBack = function (status) {
+      console.log('payCallBackStatus', status)
+      switch (status) {
+        case '0': {
+          // 支付取消
+          console.log('支付取消 ---> in globalFunctions')
+          fns && fns.cancel && fns.cancel()
+          break
+        }
+        case '1': {
+          // 支付完成
+          console.log('支付完成 ---> in globalFunctions')
+          fns && fns.success && fns.success()
+          break
+        }
+        case '-1': {
+          // 支付失败
+          fns && fns.fail && fns.fail()
+          console.log('支付失败 ---> in globalFunctions')
+          break
+        }
+        default: {
+          console.log('未定义状态 ---> in globalFunctions')
+        }
+      }
+    }
+  } else {
+    window.payCallBack = function (status) {
+      const tipText = payStatusMap[status] || '未定义状态'
+      console.log(tipText + ' ---> in globalFunctions')
+    }
+  }
+}

src/views/buy/Buy.vue

@@ -419,7 +419,7 @@ export default class BuyReport extends Vue {
         if (this.$env.isWeiXinBrowser) {
           location.href = `/weixin/pay/datareport?ordercode=${res.data.ordercode}`
         } else {
-          this.$router.push(`/pay?ordercode=${res.data.ordercode}`)
+          this.$router.push(`/pay?ordercode=${res.data.ordercode}&from=buy`)
         }
       }
     })

src/views/pay/Pay.vue

@@ -34,6 +34,7 @@
 import { Component, Vue } from 'vue-property-decorator'
 import { Cell, CellGroup, Radio, RadioGroup } from 'vant'
 import { mapActions } from 'vuex'
+import { registerPayCallBack } from '@/utils/globalFunctionsForApp.ts'
 
 declare const JyObj: any
 
@@ -100,12 +101,6 @@ export default class Pay extends Vue {
 
   beforeRouteLeave (to, from, next) {
     clearInterval(this.checkPaySuccessTimer)
-
-    // app端(不跳出vue程序) --- 支付返回订单详情
-    // (由于微信端使用location.href跳转，故此处监听不到，不会执行)
-    if (to.name === 'buy' && from.name === 'pay') {
-      next({ path: `/order/detail/${this.orderInfo.ordercode}` })
-    }
     next()
   }
 
@@ -120,6 +115,7 @@ export default class Pay extends Vue {
   }
 
   mounted () {
+    const from: any = this.$route.query.from
     this.getInfo()
 
     // 微信下使用addEventListener监听返回 跳转订单详情
@@ -132,6 +128,15 @@ export default class Pay extends Vue {
       this.$once('hook:beforeDestroy', () => {
         window.removeEventListener('popstate', this.onpopstate)
       })
+    } else {
+      // 如果是从购买页面进入
+      if (from === 'buy') {
+        registerPayCallBack({
+          cancel: this.appPayCancelCallBack
+        })
+      } else {
+        registerPayCallBack()
+      }
     }
   }
 
@@ -239,6 +244,10 @@ export default class Pay extends Vue {
     this.checkAppPaySuccess()
   }
 
+  appPayCancelCallBack () {
+    this.$router.replace({ path: `/order/detail/${this.orderInfo.ordercode}` })
+  }
+
   // 开启定时任务，3s查询一次是否支付成功
   checkAppPaySuccess () {
     const ordercode = this.orderInfo.ordercode