feature: 根据接口枚举处理样式

src/App.vue

 <template>
   <div id="app">
     <router-view />
-    <div class="loading-container" v-show="isLoading">
+    <div class="loading-container" v-if="isLoading">
       <cr-loading class="loading" size="24px">加载中...</cr-loading>
     </div>
     <login-modal />
@@ -30,6 +30,7 @@ export default {
 </script>
 <style lang="less" scoped>
 @import "./style/index.less";
+
 .loading-container {
   position: fixed;
   left: 0;

src/router/routes.js

@@ -99,18 +99,13 @@ export default [
     name: "AddPolicy",
     component: () => import("../views/Policy/Add/index.vue")
   },
-  {
-    path: "/policy/payment-record/:orderNo/:status",
-    name: "PaymentRecord",
-    component: () => import("../views/Policy/PaymentRecord/index.vue")
-  },
   {
     path: "/policy/renewal/:orderNo/:policySecId",
     name: "Renewal",
     component: () => import("../views/Policy/Renewal/index.vue")
   },
   {
-    path: "/policy/pay-record/:policySecId/:status",
+    path: "/policy/payment-record/:policySecId/:status",
     name: "Renewal",
     component: () => import("../views/Policy/PaymentRecord/index.vue")
   },

src/views/Goods/Inform/index.vue

@@ -39,8 +39,9 @@ export default {
   },
   methods: {
     conform() {
-      this.generateFormData();
-      this.generateOrder();
+      this.$router.push(`/policy/detail/123`);
+      // this.generateFormData();
+      // this.generateOrder();
     },
     generateFormData() {
       const {

src/views/Policy/Detail/Types/Guarantee.vue

@@ -6,6 +6,7 @@
       :statusKey="data.cardConfig.key"
       :payCostConfig="data.cardConfig.payCostConfig"
       :day="data.payInfo && data.payInfo.expiredDay"
+      :payInfo="payInfo"
     ></pay-cost>
     <insurance-card
       :productNo="data.productNo"
@@ -28,6 +29,7 @@ import InsuranceService from "../modules/InsuranceService";
 import PayCost from "../modules/PayCost";
 import StatusDesc from "../modules/StatusDesc";
 import CustomerService from "../modules/CustomerService";
+import detailPayMixin from "@/views/Policy/mixin/orderInfo.mixin";
 
 import ciiDetail from "@/api/detail.huatai.zhongjixian";
 import liDetail from "@/api/detail.huagui.shouxian";
@@ -36,6 +38,7 @@ import aiDetail from "@/api/detail.zhongan.yiwai";
 
 export default {
   name: "Guarantee",
+  mixins: [detailPayMixin],
   components: {
     InsuranceRecommend,
     InsuranceCard,
@@ -58,6 +61,7 @@ export default {
   },
   watch: {
     data: {
+      immediate: true,
       deep: true,
       handler() {
         this.setProductInfoByNo();

src/views/Policy/Detail/Types/Refund.vue

@@ -5,6 +5,7 @@
       v-if="showPayCost"
       :statusKey="data.cardConfig.key"
       :payCostConfig="data.cardConfig.payCostConfig"
+      :payInfo="payInfo"
     ></pay-cost>
     <refund
       v-else
@@ -21,10 +22,12 @@ import StatusDesc from "../modules/StatusDesc";
 import Phone from "../modules/Phone";
 import Refund from "../modules/Refund";
 import PayCost from "../modules/PayCost";
+import detailPayMixin from "@/views/Policy/mixin/orderInfo.mixin";
 // import { parseTime } from "@/service/utils";
 
 export default {
   name: "Guarantee",
+  mixins: [detailPayMixin],
   components: {
     StatusDesc,
     Phone,

src/views/Policy/Detail/index.vue

@@ -14,6 +14,11 @@ import { getPolicyDetail } from "@/api/policy";
 export default {
   name: "PolicyList",
   mixins: [policyStatusMixin],
+  provide() {
+    return {
+      getPolicy: this.getPolicy
+    };
+  },
   components: {
     Guarantee,
     Refund
@@ -22,15 +27,20 @@ export default {
     return {
       policy: {
         cardConfig: {
-          component: "Guarantee"
+          component: ""
         }
       }
     };
   },
-  async created() {
+  created() {
+    this.getPolicy();
+  },
+  methods: {
+    async getPolicy() {
       const detail = await getPolicyDetail(this.$route.params.orderNo);
       this.policy = this.getData(detail);
     }
+  }
 };
 </script>
 <style lang="less" src="./index.less" scoped></style>

src/views/Policy/Detail/modules/PayCost.vue

@@ -20,12 +20,17 @@
         </div>
       </div>
     </div>
-    <cr-button class="Pdb-payment-button">{{ payCostConfig.button }}</cr-button>
+    <cr-button class="Pdb-payment-button" @click="goNext()">{{ payCostConfig.button }}</cr-button>
   </div>
 </template>
 <script>
+import detailPayMixin from "@/views/Goods/Detail/modules/detailPay.mixin";
+let timer = null;
+
 export default {
   name: "PayCost",
+  mixins: [detailPayMixin],
+  inject: ["getPolicy"],
   props: {
     statusKey: {
       type: String,
@@ -38,6 +43,14 @@ export default {
         button: "立即缴费"
       })
     },
+    payInfo: {
+      type: Object,
+      default: () => ({
+        payOrderNo: "",
+        payType: "",
+        orderNo: ""
+      })
+    },
     day: {
       type: String,
       default: ""
@@ -50,6 +63,29 @@ export default {
     expiredDayText() {
       return this.statusKey === "2" ? `保障将在${this.day}天后失效，请立即缴费` : "";
     }
+  },
+  watch: {
+    statusKey: {
+      immediate: true,
+      handler(val) {
+        if (["14", "13"].includes(val)) {
+          timer = setInterval(this.getPolicy, 3000);
+        }
+      }
+    }
+  },
+  beforeDestroy() {
+    clearTimeout(timer);
+  },
+  methods: {
+    goNext() {
+      if (this.payCostConfig.button === "立即缴费") {
+        this.orderInfo = this.payInfo;
+        this.goPay();
+      } else {
+        this.getPolicy();
+      }
+    }
   }
 };
 </script>

src/views/Policy/Detail/modules/StatusDesc.vue

@@ -38,11 +38,9 @@ export default {
   },
   methods: {
     goNext() {
-      console.log(this.cardConfig?.status);
       const arr = ["6.2-3", "6.1-3", "6.3", "8", "9-5", "9-6", "10"];
       if (arr.includes(this.cardConfig?.status)) {
-        console.log(`/policy/pay-record/${this.policySecId}/${this.cardConfig.status}`);
-        this.$router.push(`/policy/pay-record/${this.policySecId}/${this.cardConfig.status}`);
+        this.$router.push(`/policy/payment-record/${this.policySecId}/${this.cardConfig.status}`);
       }
     }
   }

src/views/Policy/PaymentRecord/index.vue

@@ -123,15 +123,26 @@ export default {
           termNoText: this.record?.payPeriod === 1 ? `第${v.termNo}期保费` : "1年保费",
           recordDate: v.recordDate,
           amountText: `${v.amount}元`,
-          payStatusText: "缴费成功"
+          payStatusText:
+            v.currentPayState === "1" ? "已欠费" : v.currentPayState === "2" ? "缴费成功" : "-"
         })) || [];
 
       if (["9-5", "9-6"].includes(status)) {
         list.unshift({
-          termNoText: "退款中",
+          termNoText:
+            this.record?.refundRecord?.currentState === "1"
+              ? "退款中"
+              : this.record?.refundRecord?.currentState === "2"
+              ? "退款成功"
+              : "-",
           recordDate: this.record?.refundRecord?.payTime || "-",
           amountText: `${this.record?.refundRecord?.amount}元`,
-          payStatusText: "应退金额"
+          payStatusText:
+            this.record?.refundRecord?.currentState === "1"
+              ? "应退金额"
+              : this.record?.refundRecord?.currentState === "2"
+              ? "已退金额"
+              : "-"
         });
       }
 

src/views/Policy/Success/modules/PayInfo.vue

@@ -35,9 +35,9 @@ export default {
   },
   computed: {
     payInfo() {
-      console.log(this.policy);
       let result = {
-        guaranteePeriodText: `${this.policy?.policyEffectiveDate || "-"}至${this.policy?.policyEndDate || "-"}`,
+        guaranteePeriodText: `${this.policy?.policyEffectiveDate || "-"}至${this.policy
+          ?.policyEndDate || "-"}`,
         permium: "",
         note: "",
         isShowNote: true
@@ -60,8 +60,8 @@ export default {
           ...result,
           permium: `${this.policy?.downPayPrice || 0}元/年`,
           note: `合同终止前，每年${this.policy?.nextPayInfo?.day || "-"}月${this.policy?.nextPayInfo
-            ?.day || "-"}日${this.policy?.company || "-"}保险公司将在您预留尾号为${this.policy?.bankCardNoLast4 ||
-            "-"}的银行卡内扣除次年保费，请保证余额充足哦。`
+            ?.day || "-"}日${this.policy?.company || "-"}保险公司将在您预留尾号为${this.policy
+            ?.bankCardNoLast4 || "-"}的银行卡内扣除次年保费，请保证余额充足哦。`
         };
         // 缴费方式为“一次结清”时不显示扣费提醒
         if (!payType || payType === "一次交清") {

src/views/Policy/mixin/orderInfo.mixin.js

+export default {
+  computed: {
+    payInfo() {
+      return {
+        payOrderNo: this.data?.payInfo?.payOrderNo,
+        payOrderType: this.data?.payInfo?.payOrderType,
+        orderNo: this.data?.orderNo
+      };
+    }
+  }
+};

src/views/Policy/mixin/policyStatus.mixin.js

@@ -14,22 +14,22 @@ export default {
       const key = this.findKey(policy);
       const value = _.cloneDeep(STATUS_MAP[key]);
 
-      // console.log(status, key, value);
-
       if (["6", "7", "8", "9"].includes(key)) {
         value.title = value.title.replace("${title}", policy?.refundInfo?.amount || "-");
         value.contend = value.contend.replace(
           "${start}",
           parseTime(policy?.refundInfo?.payTime, "{y}-{m}-{d}")
         );
-      } else if (key === "2") {
-        value.recordText = value.recordText.replace("${money}", policy?.payInfo?.amount || "-");
       } else {
         value.title = value.title.replace("${title}", policy?.insuredUserName || "-");
         value.contend = value.contend
           .replace("${start}", parseTime(policy?.policyEffectiveDate, "{y}-{m}-{d}"))
           .replace("${end}", parseTime(policy?.policyEndDate, "{y}-{m}-{d}"))
           .replace("${money}", policy?.payInfo?.amount || "-");
+
+        if (key === "2") {
+          value.recordText = value.recordText.replace("${money}", policy?.payInfo?.amount || "-");
+        }
       }
 
       // 校验是否支付成功

src/views/Policy/modules/PolicyItem.vue

@@ -77,6 +77,7 @@ import _ from "lodash";
 import GOODS_LIST from "@/api/goodsList.mock";
 import { getPolicyList } from "@/api/policy";
 import policyStatusMixin from "../mixin/policyStatus.mixin";
+import detailPayMixin from "@/views/Goods/Detail/modules/detailPay.mixin";
 
 // SELF(0, "本人"),
 // PARENT(1, "父母"),
@@ -86,7 +87,7 @@ const relations = [-1, 0, 1, 2, 3];
 
 export default {
   name: "InsuranceRecommend",
-  mixins: [policyStatusMixin],
+  mixins: [policyStatusMixin, detailPayMixin],
   props: {
     type: {
       type: Number,
@@ -129,8 +130,14 @@ export default {
           query: { id: item.id, type: item.itype }
         });
       } else if (text === "电子保单") {
+        this.$router.push({ path: "/policy/virtual-detail", query: { url: item.policyUrl } });
       } else if (text === "去支付") {
-        
+        this.orderInfo = {
+          payOrderNo: item?.payInfo?.payOrderNo,
+          payType: item?.payInfo?.payType,
+          orderNo: item?.orderNo
+        };
+        this.goPay();
       } else if (text === "联系客服") {
       }
     },