fix: 支付loading组件化；form验证错误滚动问题

package.json

@@ -12,7 +12,7 @@
   },
   "dependencies": {
     "@better-scroll/core": "^2.0.0-beta.6",
-    "@qg/cherry-ui": "^1.2.3",
+    "@qg/cherry-ui": "^1.2.6",
     "@qg/qg-scroll": "^1.4.2",
     "amfe-flexible": "^2.2.1",
     "axios": "^0.19.2",

src/App.vue

@@ -6,9 +6,6 @@
     <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 />
@@ -43,7 +40,7 @@ export default {
     };
   },
   computed: {
-    ...mapState(["isLoading", "showAuthXyqb", "isPayWait", "isShowPublicPopup", "publicPupopData"])
+    ...mapState(["isLoading", "showAuthXyqb", "isShowPublicPopup", "publicPupopData"])
   },
   watch: {
     $route(to, from) {
@@ -60,7 +57,7 @@ export default {
     }
   },
   methods: {
-    ...mapActions(["setIsLoading", "setPublicPopup"]),
+    ...mapActions(["setPublicPopup"]),
     onClose(e) {
       if (!e) {
         this.setPublicPopup({});
@@ -121,15 +118,5 @@ export default {
       color: #fff;
     }
   }
-  &.pay {
-    z-index: 1000;
-    background-color: #fff;
-    .loading {
-      padding: 15px 25px;
-      @{deep} .cr-loading--text {
-        margin-top: 25px;
-      }
-    }
-  }
 }
 </style>

src/components/PayWaitLayer.vue

+<template functional>
+  <div class="loading-container pay" v-if="props.value">
+    <cr-loading class="loading" size="24px" vertical>支付中</cr-loading>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "PayWaitLayer",
+  props: {
+    value: {
+      type: Boolean,
+      default: false
+    }
+  }
+};
+</script>
+
+<style lang="less" scoped>
+@import "../style/var.less";
+.loading-container {
+  position: fixed;
+  left: 0;
+  right: 0;
+  top: 0;
+  bottom: 0;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  z-index: 999;
+  .loading {
+    padding: 6px;
+    border-radius: 6px;
+    background-color: rgba(0, 0, 0, 0.5);
+    color: #fff;
+
+    @{deep} .cr-loading--text {
+      color: #fff;
+    }
+  }
+  &.pay {
+    z-index: 1000;
+    background-color: #fff;
+    .loading {
+      padding: 15px 25px;
+      @{deep} .cr-loading--text {
+        margin-top: 25px;
+      }
+    }
+  }
+}
+</style>

src/service/http.js

@@ -85,12 +85,10 @@ axios.interceptors.response.use(
       }, 1000);
     }
     Notify({ type: "danger", message: response.data.msg || "后端服务异常" });
-    store.dispatch("setIsPayWait", false);
     return Promise.reject(response.data);
   },
   err => {
     afterRequest();
-    store.dispatch("setIsPayWait", false);
     // 判断是否取消请求
     if (err?.message === "取消重复请求") {
       const res = {

src/store/index.js

@@ -11,7 +11,7 @@ export default new Vuex.Store({
     activeIdx: 0,
     isLoading: false,
     isShowLogin: false,
-    isPayWait: false,
+    // isPayWait: false,
     isShowPublicPopup: false,
     isShowOpenBrower: false,
     publicPupopData: {
@@ -31,9 +31,9 @@ export default new Vuex.Store({
     setIsShowLogin(state, value) {
       state.isShowLogin = value;
     },
-    setIsPayWait(state, value) {
-      state.isPayWait = value;
-    },
+    // setIsPayWait(state, value) {
+    //   state.isPayWait = value;
+    // },
     setIsShowOpenBrower(state, value) {
       state.isShowOpenBrower = value;
     },
@@ -60,9 +60,9 @@ export default new Vuex.Store({
     setIsShowLogin({ commit }, args) {
       commit("setIsShowLogin", args);
     },
-    setIsPayWait({ commit }, args) {
-      commit("setIsPayWait", args);
-    },
+    // setIsPayWait({ commit }, args) {
+    //   commit("setIsPayWait", args);
+    // },
     setIsShowOpenBrower({ commit }, args) {
       commit("setIsShowOpenBrower", args);
     },

src/views/Consultant/Buy/index.vue

@@ -76,6 +76,7 @@
       </card>
       <cps-qa :qa-data="qaInfo" :more="false" />
     </div>
+    <pay-wait-layer :value="isPayWait" />
   </div>
 </template>
 
@@ -110,6 +111,7 @@ export default {
       price: [0.99, 199],
       consultantOrderNo: "",
       openId: localStorage.get("openId"),
+      isPayWait: false,
       tradeType: isXyqb ? "MWEB" : isWeixinBrower ? "JSAPI" : "MWEB",
       serviceList: [
         { icon: "team", title: "资深", sub: "保险精算团队" },
@@ -222,7 +224,7 @@ export default {
     this.updateRemain();
   },
   methods: {
-    ...mapActions(["setIsShowLogin", "setIsPayWait"]),
+    ...mapActions(["setIsShowLogin"]),
     checkLogin() {
       if (!this.isLogin) {
         this.setIsShowLogin(true);
@@ -241,7 +243,7 @@ export default {
       }
     },
     async generateOrder() {
-      this.setIsPayWait(true);
+      this.isPayWait = true;
       const res = await create();
       if (res) {
         this.consultantOrderNo = res.consultantOrderNo;
@@ -250,7 +252,7 @@ export default {
       }
     },
     async goPay() {
-      this.setIsPayWait(true);
+      this.isPayWait = true;
       try {
         const res = await goPay({ tradeType: this.tradeType, openId: this.openId });
         if (res) {
@@ -261,6 +263,7 @@ export default {
           });
         }
       } catch (error) {
+        this.isPayWait = false;
         setTimeout(() => {
           this.$parent.getOrderInfo(true);
         }, 1000);

src/views/Consultant/index.vue

@@ -17,7 +17,7 @@ import Buy from "./Buy";
 import Success from "./Success";
 import Question from "./Question";
 import Exclusive from "./Exclusive";
-import { mapState, mapActions } from "vuex";
+import { mapState } from "vuex";
 import localStorage from "@/service/localStorage";
 import { getCulOrder, getPayState } from "@/api/consultant";
 export default {
@@ -60,7 +60,6 @@ export default {
     this.getOrderInfo();
   },
   methods: {
-    ...mapActions(["setIsPayWait"]),
     // 1-待支付,3-支付成功,4-问卷收集完成，方案配置中,5-方案配置完成,  -1 -支付失败订单关闭,-2 -支付超过1小时订单关闭,-3 -订单关闭
     async getOrderInfo(checkPayState = false) {
       if (!this.isLogin) return;
@@ -70,8 +69,6 @@ export default {
         this.orderInfo = res;
         if (checkPayState && res[0] && res[0].state < 3) {
           this.getPayState();
-        } else {
-          this.setIsPayWait(false);
         }
         this.$forceUpdate();
       }
@@ -83,7 +80,6 @@ export default {
           this.getPayState();
         }, 3000);
       } else {
-        this.setIsPayWait(false);
         this.getOrderInfo();
       }
     },

src/views/Goods/Detail/AIDetail.vue

 <template>
-  <cr-form scroll-to-error @submit="onSubmit" @failed="onFailed" class="container" ref="subForm">
+  <cr-form
+    scroll-to-error
+    @submit="onSubmit"
+    @failed="onFailed"
+    class="container"
+    ref="subForm"
+    :scroll-offset="100"
+  >
     <nav-tab :nav-list="navBarOptions" ref="navTab" @show="e => (goodActionShow = e)" />
     <detail-header :det="headerInfo" />
     <div class="det-body">
@@ -62,6 +69,7 @@
       @read-protocol="openIframePupop"
       :protocol-data="protocolData"
     />
+    <pay-wait-layer :value="isPayWait" />
   </cr-form>
 </template>
 
@@ -263,9 +271,6 @@ export default {
         "relativeName",
         "relativeIdNo"
       ];
-      setTimeout(() => {
-        this.$refs.navTab.showNavBar = false;
-      }, 0);
       if (!noMsgArr.includes(errors[0].name)) {
         this.$notify({ type: "warning", message: errors[0].message });
       }

src/views/Goods/Detail/CIIDetail.vue

 <template>
-  <cr-form scroll-to-error @submit="onSubmit" @failed="onFailed" class="container" ref="subForm">
+  <cr-form
+    scroll-to-error
+    @submit="onSubmit"
+    @failed="onFailed"
+    class="container"
+    ref="subForm"
+    :scroll-offset="100"
+  >
     <nav-tab :nav-list="navBarOptions" ref="navTab" @show="e => (goodActionShow = e)" />
     <detail-header :det="headerInfo" />
     <div class="det-body">
@@ -271,9 +278,6 @@ export default {
         "relativeName",
         "relativeIdNo"
       ];
-      setTimeout(() => {
-        this.$refs.navTab.showNavBar = false;
-      }, 0);
       if (!noMsgArr.includes(errors[0].name)) {
         this.$notify({ type: "warning", message: errors[0].message });
       }

src/views/Goods/Detail/LIDetail.vue

@@ -241,9 +241,6 @@ export default {
     },
     onFailed(errorInfo) {
       const { errors } = errorInfo;
-      setTimeout(() => {
-        this.$refs.navTab.showNavBar = false;
-      }, 0);
       this.$notify({ type: "warning", message: errors[0].message });
     },
     nextStep() {

src/views/Goods/Detail/MIDetail.vue

 <template>
-  <cr-form scroll-to-error @submit="onSubmit" @failed="onFailed" class="container" ref="subForm">
+  <cr-form
+    scroll-to-error
+    :scroll-offset="100"
+    @submit="onSubmit"
+    @failed="onFailed"
+    class="container"
+    ref="subForm"
+  >
     <nav-tab :nav-list="navBarOptions" ref="navTab" @show="e => (goodActionShow = e)" />
     <detail-header :det="headerInfo" />
     <div class="det-body">
@@ -58,6 +65,7 @@
       @confirm="nextStep"
       @read-protocol="openIframePupop"
     />
+    <pay-wait-layer :value="isPayWait" />
   </cr-form>
 </template>
 
@@ -264,9 +272,6 @@ export default {
         "relativeIdNo"
       ];
       console.log(errorInfo);
-      setTimeout(() => {
-        this.$refs.navTab.showNavBar = false;
-      }, 0);
       if (!noMsgArr.includes(errors[0].name)) {
         this.$notify({ type: "warning", message: errors[0].message });
       }

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

@@ -4,15 +4,19 @@ import { placeOrder } from "@/api/product";
 import { getPolicyDetail } from "@/api/policy";
 import localStorage from "@/service/localStorage";
 import { mapActions } from "vuex";
-
+import PayWaitLayer from "@/components/PayWaitLayer";
 export default {
+  components: {
+    PayWaitLayer
+  },
   data() {
     return {
       subFormData: {}, // 组装好的数据
       orderInfo: {},
       openId: localStorage.get("openId"),
       tradeType: "",
-      payTimer: null
+      payTimer: null,
+      isPayWait: false
       // customTradeType: ""
     };
   },
@@ -20,7 +24,7 @@ export default {
     this.tradeType = this.customTradeType ?? (isXyqb ? "MWEB" : isWeixinBrower ? "JSAPI" : "MWEB");
   },
   methods: {
-    ...mapActions(["setIsLoading", "setIsPayWait", "setIsShowOpenBrower"]),
+    ...mapActions(["setIsLoading", "setIsShowOpenBrower"]),
     async generateOrder(detailType) {
       this.setIsLoading(true);
       const res = await placeOrder.create({
@@ -48,7 +52,7 @@ export default {
       if (openId && tradeType === "JSAPI") {
         params.openId = openId;
       }
-      this.setIsPayWait(true);
+      this.isPayWait = true;
       const res = await placeOrder.pay(params);
       if (res) {
         let payInfo = "";
@@ -82,7 +86,7 @@ export default {
             return;
           });
       } else {
-        this.setIsPayWait(false);
+        this.isPayWait = false;
       }
     },
     getPayResult() {
@@ -107,7 +111,7 @@ export default {
           this.$router.replace({
             path: "/policy/detail/" + orderNo + "?isWxH5=" + this.orderInfo.isWxH5 || ""
           });
-          this.setIsPayWait(false);
+          this.isPayWait = false;
           this.setIsLoading(false);
         }
       });

src/views/Goods/Inform/index.vue

@@ -23,6 +23,7 @@
       <cr-button @click="$router.back()">不符合</cr-button>
       <cr-button type="warning" @click="conform">符合，立即投保</cr-button>
     </div>
+    <pay-wait-layer :value="isPayWait" />
   </div>
 </template>
 

src/views/Policy/Add/index.vue

@@ -7,6 +7,7 @@
       ref="policyForm"
       class="policy-form"
       scroll-to-error
+      :scroll-offset="100"
       @submit="onFormSubmit"
       @failed="onFormFailed"
     >
@@ -509,6 +510,7 @@
         @confirm="onRelationConfirm"
       />
     </cr-popup>
+    <pay-wait-layer :value="isPayWait" />
   </div>
 </template>
 

src/views/Policy/PayWaiting/index.vue

 <template>
-  <div class="container"></div>
+  <div class="container">
+    <pay-wait-layer :value="isPayWait" />
+  </div>
 </template>
 
 <script>
@@ -21,7 +23,7 @@ export default {
     //     "/payWaiting" +
     //     qs.stringify(this.$route.query, { encode: true, addQueryPrefix: true });
     // }
-    this.setIsPayWait(true);
+    this.isPayWait = true;
     this.orderInfo = this.$route.query;
     // 如果存在isXyqb，同时当前不是在信用钱包环境，或众安第三方支付
     if (this.orderInfo.isXyqb == 1 && (!isXyqb || this.orderInfo.third)) {

yarn.lock

@@ -900,10 +900,10 @@
   dependencies:
     mkdirp "^1.0.4"
 
-"@qg/cherry-ui@^1.2.3":
-  version "1.2.3"
-  resolved "http://npmprivate.quantgroups.com/@qg%2fcherry-ui/-/cherry-ui-1.2.3.tgz#280698c19039ee079f33e33856653e16d3f0e0c6"
-  integrity sha512-0sgYtoAg8Ixbqw/HpPvnkUxLlBCLbgK8ZgzaRLnSeuvdgNzOH2bZoI0siWt9BFygak3MIcwD984bkywV5ggEqg==
+"@qg/cherry-ui@^1.2.6":
+  version "1.2.6"
+  resolved "http://npmprivate.quantgroups.com/@qg%2fcherry-ui/-/cherry-ui-1.2.6.tgz#c8fcff71d35f0cb59c49019132e1bb5426648da6"
+  integrity sha512-vXpCUPAlPhcn9hnsTJS7qGgg9KcfTgZIWINaiiahRZQA6pEH4qmLihQp7HYeYvih/ENgDgDcVRRc4OSd7zibcg==
 
 "@qg/qg-scroll@^1.4.2":
   version "1.4.2"