feature: 添加购买结果页

src/api/goodsList.mock.js

@@ -28,7 +28,12 @@ export default [
     icon: medical,
     guarantee_title: "医疗保障",
     guarantee_sub: "看病报销医药费,最高600万",
-    company: "泰康在线"
+    company: "泰康在线",
+    payType: [
+      { label: "月缴", value: "1" },
+      { label: "一次交清", value: "2" }
+    ],
+    policyPeriod: []
   },
   {
     id: "HTDQZJX001",
@@ -46,7 +51,12 @@ export default [
     icon: illness,
     guarantee_title: "重疾保障",
     guarantee_sub: "100种重症+40种轻症",
-    company: "华泰财险"
+    company: "华泰财险",
+    payType: [
+      { label: "月缴", value: "1" },
+      { label: "一次交清", value: "2" }
+    ],
+    policyPeriod: []
   },
   {
     id: "BNZJX001",
@@ -65,7 +75,12 @@ export default [
     icon: illness,
     guarantee_title: "重疾保障",
     guarantee_sub: "100种重症+40种轻症",
-    company: "华泰财险"
+    company: "华泰财险",
+    payType: [{ label: "年缴", value: "1" }],
+    policyPeriod: [
+      { label: "保至70周岁", value: "1" },
+      { label: "保至终身", value: "2" }
+    ]
   },
   {
     id: "ZAYWX001",
@@ -83,7 +98,9 @@ export default [
     icon: casualty,
     guarantee_title: "意外保障",
     guarantee_sub: "意外风险覆盖全,最高100万保额",
-    company: "众安保险"
+    company: "众安保险",
+    payType: [],
+    policyPeriod: []
   },
   {
     id: "HGSX001",
@@ -101,6 +118,15 @@ export default [
     icon: life,
     guarantee_title: "人寿保障",
     guarantee_sub: "最高350万保额,顶梁柱必备",
-    company: "华泰财险"
+    company: "华泰财险",
+    payType: [{ label: "年缴", value: "1" }],
+    policyPeriod: [
+      { label: "10年", value: "1" },
+      { label: "20年", value: "2" },
+      { label: "30年", value: "3" },
+      { label: "保至60周岁", value: "4" },
+      { label: "保至65周岁", value: "5" },
+      { label: "保至70周岁", value: "6" }
+    ]
   }
 ];

src/views/Policy/Detail/index.less

@@ -166,7 +166,7 @@
       }
 
       &-note {
-        .card-desc(16px);
+        .card-desc(0);
         margin-top: 16px;
       }
 
@@ -174,6 +174,7 @@
         display: flex;
         align-items: center;
         justify-content: space-between;
+        margin-top: 16px;
         width: 100%;
 
         .Pdbi-operation-button {

src/views/Policy/Success/index.vue

@@ -2,7 +2,7 @@
   <div class="policy-detail">
     <div class="policy-detail-body">
       <status-desc :cardConfig="cardConfig"></status-desc>
-      <pay-info></pay-info>
+      <pay-info :policy="policy"></pay-info>
       <ActBanner></ActBanner>
       <insurance-recommend class="Pdb-recommend" />
     </div>
@@ -35,7 +35,7 @@ export default {
   },
   async created() {
     const detail = await getGenPolicyDetail(this.$route.params.orderNo);
-    this.policy = this.getData(detail);
+    this.policy = this.getGoodsInfo(detail);
   }
 };
 </script>

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

 <template functional>
   <div class="activity-banner">
-    <div class="activity-banner-item" @click="parent.$router.push('/draw')">
+    <div class="activity-banner-item" @click="parent.$router.push('/home/activity')">
       <cr-image src="@/assets/images/policy/draw.png" width="343px" height="60px" />
     </div>
   </div>

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

@@ -3,21 +3,21 @@
     <div class="Pdb-refund-content">
       <div class="Pdbr-content-item">
         <span>保障期限</span>
-        <span>2020.6.5 至 2021.6.4</span>
+        <span>{{ payInfo.guaranteePeriodText }}</span>
       </div>
       <div class="Pdbr-content-item">
-        <span>次月保费</span>
-        <span>首月保费1元，次月起xxx.x元/月</span>
+        <span>保费</span>
+        <span>{{ payInfo.permium }}</span>
       </div>
     </div>
-    <p class="Pdb-refund-note">
-      注:微信将会在每月5日在您的账户内扣除该保费。（您可以随时取消自动扣费）
+    <p class="Pdb-refund-note" v-if="payInfo.isShowNote">
+      {{ payInfo.note }}
     </p>
     <div class="Pdb-refund-operation">
-      <cr-button class="Pdbi-operation-button Pdbi-operation-button_paid" @click="goNext()"
+      <cr-button class="Pdbi-operation-button Pdbi-operation-button_paid" @click="goNext('product')"
         >为家人投保</cr-button
       >
-      <cr-button class="Pdbi-operation-button" @click="goNext()">查看保单</cr-button>
+      <cr-button class="Pdbi-operation-button" @click="goNext('policy')">查看保单</cr-button>
     </div>
   </div>
 </template>
@@ -35,19 +35,61 @@ export default {
   },
   computed: {
     payInfo() {
-      return {
-        guaranteePeriodName: "保障期限",
-        guaranteePeriodText: `${this.policy.policyEffectiveDate}至${this.policy.policyEndDate}`,
-        permiumName: "保费",
-        permium: "xxx元",
-        note: "注:微信将会在每月5日在您的账户内扣除该保费。（您可以随时取消自动扣费）",
+      console.log(this.policy);
+      let result = {
+        guaranteePeriodText: `${this.policy?.policyEffectiveDate || "-"}至${this.policy?.policyEndDate || "-"}`,
+        permium: "",
+        note: "",
         isShowNote: true
       };
+
+      const payType = this.policy?.payType?.find(
+        v => v.value === this.policy?.productItem?.payType
+      );
+
+      // 根据月缴或年缴区分缴费卡片内容
+      if (payType?.label === "月缴") {
+        result = {
+          ...result,
+          permium: `首月保费${this.policy?.downPayPrice || 0}元，次月起${this.policy
+            ?.regularPrice || 0}元`,
+          note: `注:微信将会在每月${this.policy.nextPayInfo.day}日在您的账户内扣除该保费。（您可以随时取消自动扣费）`
+        };
+      } else {
+        result = {
+          ...result,
+          permium: `${this.policy?.downPayPrice || 0}元/年`,
+          note: `合同终止前，每年${this.policy?.nextPayInfo?.day || "-"}月${this.policy?.nextPayInfo
+            ?.day || "-"}日${this.policy?.company || "-"}保险公司将在您预留尾号为${this.policy?.bankCardNoLast4 ||
+            "-"}的银行卡内扣除次年保费，请保证余额充足哦。`
+        };
+        // 缴费方式为“一次结清”时不显示扣费提醒
+        if (!payType || payType === "一次交清") {
+          result.isShowNote = false;
+        }
+      }
+
+      // 根据产品是否存在保障期限确定保障期限文案
+      if (this.policy?.policyPeriod?.length) {
+        const policyPeriod = this.policy.policyPeriod.find(
+          v => v.value === this.policy?.productItem?.policyPeriod
+        );
+        result.guaranteePeriodText = policyPeriod.label || "";
+      }
+
+      return result;
     }
   },
   methods: {
-    goNext() {
-      this.$router.push();
+    goNext(type) {
+      if (type === "product") {
+        this.$router.push({
+          path: "/goods/detail",
+          query: { id: this.policy.id, type: this.policy.itype }
+        });
+      } else if (type === "policy") {
+        this.$router.push(`/policy/detail/${this.policy.orderNo}`);
+      }
     }
   }
 };

src/views/Policy/constants.js

@@ -14,7 +14,7 @@ const statusMap = {
     title: "被保人：${title}",
     contend: "保障期限：${start} 至 ${end}",
     statusText: "保障中",
-    buttons: ["开通自动续费", "电子保单"],
+    buttons: ["去支付", "电子保单"],
     detailText: "",
     recordText: "保单已欠费，欠缴${money}元",
     component: "Guarantee"

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

@@ -52,6 +52,12 @@ export default {
       return policy?.payState
         ? `${policy?.policyState}-${policy?.payState}`
         : String(policy?.policyState);
+    },
+    getGoodsInfo(policy) {
+      return {
+        ...policy,
+        ..._.find(GOODS_LIST, { id: policy?.productNo })
+      };
     }
   },
   beforeRouteEnter(to, from, next) {

src/views/Policy/modules/PolicyItem.vue

@@ -129,8 +129,8 @@ export default {
           query: { id: item.id, type: item.itype }
         });
       } else if (text === "电子保单") {
-      } else if (text === "开通自动续费") {
       } else if (text === "去支付") {
+        
       } else if (text === "联系客服") {
       }
     },