Przeglądaj źródła

fix: 安卓页面无交互不会触发popstate,安卓微信端更换执行逻辑

cuiyalong 5 lat temu
rodzic
commit
02a4e9a518
5 zmienionych plików z 31 dodań i 3 usunięć
  1. 1 1
      package.json
  2. 5 2
      src/utils/globalVariable.ts
  3. 12 0
      src/views/404.vue
  4. 11 0
      src/views/buy/Buy.vue
  5. 2 0
      src/views/pay/Pay.vue

+ 1 - 1
package.json

@@ -1,6 +1,6 @@
 {
   "name": "jianyu-datareport",
-  "version": "1.8.52",
+  "version": "1.8.53",
   "private": true,
   "scripts": {
     "serve": "vue-cli-service serve",

+ 5 - 2
src/utils/globalVariable.ts

@@ -1,6 +1,6 @@
 import Vue from 'vue'
 import WeiXinSDK from '@/utils/wx-js-sdk-register.ts'
-import { isWeiXinBrowser } from '@/utils/globalFunctions.ts'
+import { isWeiXinBrowser, androidOrIOS } from '@/utils/globalFunctions.ts'
 import { getWxSdkSign } from '@/api/pay.ts'
 
 declare module 'vue/types/vue' {
@@ -12,11 +12,14 @@ declare module 'vue/types/vue' {
 }
 
 const inWeiXinBrowser = isWeiXinBrowser()
+const isAndroidOrIos = androidOrIOS()
 
 // 全局变量
 Vue.prototype.$env = {
   isWeiXinBrowser: inWeiXinBrowser,
-  platform: inWeiXinBrowser ? 'wx' : 'app'
+  platform: inWeiXinBrowser ? 'wx' : 'app',
+  isAndroid: isAndroidOrIos === 'android',
+  isIOS: isAndroidOrIos === 'ios'
 }
 
 // 如果是微信浏览器, 注册一个微信SDK初始化函数

+ 12 - 0
src/views/404.vue

@@ -20,11 +20,23 @@ import empty from '@/components/common/Empty.vue'
 })
 
 export default class Page404 extends Vue {
+  fromPath = ''
+
+  beforeRouteEnter (to, from, next) {
+    next(vm => {
+      vm.fromPath = from.fullPath
+    })
+  }
+
   created () {
     const route = this.$route
     const redirectedFrom = route.redirectedFrom
     if (redirectedFrom) {
       console.log('路由:%c %s %c未找到', 'color: red', redirectedFrom, 'color: #000')
+    } else {
+      setTimeout(() => {
+        console.log('主动跳转: 来自 -> %s', this.fromPath)
+      }, 500)
     }
   }
 }

+ 11 - 0
src/views/buy/Buy.vue

@@ -269,6 +269,17 @@ export default class BuyReport extends Vue {
   }
 
   mounted () {
+    // 解决安卓微信,在支付页面无交互的情况下,popstate不会触发的问题
+    // 此处使用变量控制
+    if (this.$env.isAndroid && this.$env.isWeiXinBrowser) {
+      const t = sessionStorage.getItem('datareport-ordercode')
+      if (t) {
+        sessionStorage.removeItem('datareport-ordercode')
+        location.href = `${process.env.BASE_URL}order/detail/${t}`
+        return
+      }
+    }
+
     const recover = this.recoverState()
     if (!recover) {
       this.getInfo()

+ 2 - 0
src/views/pay/Pay.vue

@@ -112,6 +112,7 @@ export default class Pay extends Vue {
   created () {
     const query: any = this.$route.query
     this.orderInfo.ordercode = query.ordercode
+    sessionStorage.setItem('datareport-ordercode', query.ordercode)
     if (this.env.isWeiXinBrowser) {
       // 微信端注册wxjsSdk
       this.$registerWxSdk()
@@ -255,6 +256,7 @@ export default class Pay extends Vue {
   // 微信专用后退监听
   onpopstate () {
     if (this.historyState.id && this.historyState.id === '1') {
+      sessionStorage.removeItem('datareport-ordercode')
       location.replace(`${process.env.BASE_URL}order/detail/${this.orderInfo.ordercode}`)
     } else {
       console.log('onpopstate事件监听未被正常注销', history.state)