feat: 支付页面返回跳转订单详情

src/views/main/Home.vue

@@ -79,14 +79,7 @@ export default class Home extends Vue {
     scroll: 0
   }
 
-  defaultListState = {
-    list: [],
-    loading: false,
-    finished: false,
-    currentPage: 1,
-    totalPage: 0,
-    scroll: 0
-  }
+  defaultListState = JSON.parse(JSON.stringify(this.listState))
 
   beforeRouteEnter (to, from, next) {
     if (from.name === 'detail') {

src/views/pay/Pay.vue

@@ -93,8 +93,19 @@ export default class Pay extends Vue {
 
   checkPaySuccessTimer = 0
 
+  // 保存当前监听popstate的history.state
+  historyState = {
+    id: ''
+  }
+
   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()
   }
 
@@ -109,6 +120,18 @@ export default class Pay extends Vue {
 
   mounted () {
     this.getInfo()
+
+    // 微信下使用addEventListener监听返回 跳转订单详情
+    if (this.env.isWeiXinBrowser) {
+      this.pushHistory()
+
+      window.addEventListener('popstate', this.onpopstate)
+
+      // 当组件销毁时解绑addEventListener的事件监听
+      this.$once('hook:beforeDestroy', () => {
+        window.removeEventListener('popstate', this.onpopstate)
+      })
+    }
   }
 
   radioCheck (type) {
@@ -228,6 +251,26 @@ export default class Pay extends Vue {
       })
     }, 3000)
   }
+
+  // 微信专用后退监听
+  onpopstate () {
+    if (this.historyState.id && this.historyState.id === '1') {
+      location.replace(`${process.env.BASE_URL}order/detail/${this.orderInfo.ordercode}`)
+    } else {
+      console.log('onpopstate事件监听未被正常注销', history.state)
+    }
+    this.historyState.id = ''
+  }
+
+  pushHistory () {
+    const pushContent = {
+      id: '1',
+      title: '订单详情',
+      url: '#backToOrderDetail'
+    }
+    this.historyState = pushContent
+    history.pushState(pushContent, pushContent.title, pushContent.url)
+  }
 }
 </script>