fix: 支付loading优化

src/App.vue

@@ -6,6 +6,9 @@
     <div class="loading-container" v-if="isLoading">
       <cr-loading class="loading" size="24px">加载中...</cr-loading>
     </div>
+    <div class="loading-container pay" v-if="isPayWait">
+      <cr-loading class="loading" size="24px" vertical>支付中</cr-loading>
+    </div>
     <login-modal />
     <auth-from-xyqb v-if="showAuthXyqb !== -1" />
     <net-error />
@@ -28,7 +31,7 @@ export default {
     };
   },
   computed: {
-    ...mapState(["isLoading", "showAuthXyqb"])
+    ...mapState(["isLoading", "showAuthXyqb", "isPayWait"])
   },
   watch: {
     $route(to, from) {
@@ -90,7 +93,7 @@ export default {
   display: flex;
   justify-content: center;
   align-items: center;
-  z-index: 9999;
+  z-index: 999;
   .loading {
     padding: 6px;
     border-radius: 6px;
@@ -101,5 +104,15 @@ export default {
       color: #fff;
     }
   }
+  &.pay {
+    z-index: 1000;
+    background-color: #fff;
+    .loading {
+      padding: 15px 25px;
+      @{deep} .cr-loading--text {
+        margin-top: 25px;
+      }
+    }
+  }
 }
 </style>

src/store/index.js

@@ -11,6 +11,7 @@ export default new Vuex.Store({
     activeIdx: 0,
     isLoading: false,
     isShowLogin: false,
+    isPayWait: false,
     showAuthXyqb: isXyqb ? localStorage.get("xyqbAuthState") || 1 : -1 // 1 已获取信息未授权，2 打开授权弹框， 3 拒绝授权，4 允许授权, -1 非信用钱包环境
   },
   mutations: {
@@ -23,6 +24,9 @@ export default new Vuex.Store({
     setIsShowLogin(state, value) {
       state.isShowLogin = value;
     },
+    setIsPayWait(state, value) {
+      state.isPayWait = value;
+    },
     setAuthXyqb(state, value) {
       state.showAuthXyqb = value;
       localStorage.set("xyqbAuthState", value);
@@ -38,6 +42,9 @@ export default new Vuex.Store({
     setIsShowLogin({ commit }, args) {
       commit("setIsShowLogin", args);
     },
+    setIsPayWait({ commit }, args) {
+      commit("setIsPayWait", args);
+    },
     setAuthXyqb({ commit }, args) {
       commit("setAuthXyqb", args);
     }

src/views/Goods/Detail/modules/detailPay.mixin.js

@@ -19,8 +19,9 @@ export default {
     this.tradeType = this.customTradeType ?? (isXyqb ? "MWEB" : isWeixinBrower ? "JSAPI" : "MWEB");
   },
   methods: {
-    ...mapActions(["setIsLoading"]),
+    ...mapActions(["setIsLoading", "setIsPayWait"]),
     async generateOrder() {
+      this.setIsLoading(true);
       const res = await placeOrder.create({
         ...this.subFormData
       });
@@ -30,6 +31,7 @@ export default {
       }
     },
     async goPay() {
+      this.setIsLoading(false);
       const { tradeType, orderInfo, openId } = this;
       const { payOrderNo, payType } = orderInfo;
       if (!payOrderNo) {
@@ -44,6 +46,7 @@ export default {
       if (openId && tradeType === "JSAPI") {
         params.openId = openId;
       }
+      this.setIsPayWait(true);
       const res = await placeOrder.pay(params);
       if (res) {
         let payInfo = {
@@ -65,15 +68,15 @@ export default {
     },
     getPayResult() {
       const { payOrderNo, orderNo } = this.orderInfo;
-      this.setIsLoading(true);
       placeOrder.polling({ payOrderNo, payOrderType: 1 }).then(payRes => {
         if (!payRes.result && payRes.payState === 2) {
           this.payTimer = setTimeout(() => {
             this.getPayResult();
           }, 3000);
         } else {
+          this.setIsPayWait(false);
           this.setIsLoading(false);
-          this.$router.push({ path: "/policy/detail/" + orderNo });
+          this.$router.replace({ path: "/policy/detail/" + orderNo });
         }
       });
     }