Merge branch 'feature/run_process' into 'master'

Feature/run process

See merge request !36

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/api/goodsList.mock.js

@@ -28,7 +28,12 @@ export default [
     icon: medical,
     guarantee_title: "医疗保障",
     guarantee_sub: "看病报销医药费,最高600万",
-    compony: "泰康在线"
+    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种轻症",
-    compony: "华泰财险"
+    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种轻症",
-    compony: "华泰财险"
+    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万保额",
-    compony: "众安保险"
+    company: "众安保险",
+    payType: [],
+    policyPeriod: []
   },
   {
     id: "HGSX001",
@@ -101,6 +118,15 @@ export default [
     icon: life,
     guarantee_title: "人寿保障",
     guarantee_sub: "最高350万保额,顶梁柱必备",
-    compony: "华泰财险"
+    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/api/policy.js

@@ -9,3 +9,18 @@ export const getPolicyList = () => {
 export const getPolicyDetail = orderNo => {
   return req.get(`/policy_order/detail?orderNo=${orderNo}`);
 };
+
+// 查询订单详情(购买成功页面使用)
+export const getGenPolicyDetail = orderNo => {
+  return req.get(`/policy_order/general?orderNo=${orderNo}`);
+};
+
+// 查询缴费记录
+export const getPayRecord = policySecId => {
+  return req.get(`/policy/pay_record?policySecId=${policySecId}`);
+};
+
+// 保单自动续保状态管理
+export const updateRenewal = (policySecId, status) => {
+  return req.post(`/auto_renew_policy/${policySecId}/${status}`);
+};

src/api/user.js

@@ -27,7 +27,7 @@ export const getCaptchaImg = param => {
 
 // 获取用户信息
 export const getUserInfo = () => {
-  return req.get("user/me");
+  return req.get("/user/info/me");
 };
 
 // 查询家人列表

src/components/LoginModal.vue

@@ -90,7 +90,7 @@ export default {
       this.formData.openId = localStorage.getItem("openId") || null;
       const res = await loginByPhone(this.formData);
       if (res) {
-        this.$notify("登录成功");
+        this.$notify({ type: "success", message: "登录成功" });
         this.setIsShowLogin(false);
         // localStorage.setItem("mongoToken", res.token);
         // TODO 开发目前使用这个token

src/mixins/formValidate.mixin.js

-import cherry from "@qg/cherry-ui";
-const { Notify } = cherry;
-
 export default {
   methods: {
     onFailed(errorInfo) {
-      Notify(errorInfo?.errors?.[0]?.message || "校验失败");
+      this.$notify({ type: "warning", message: errorInfo?.errors?.[0]?.message || "校验失败" });
     }
   }
 };

src/router/routes.js

@@ -90,7 +90,7 @@ export default [
     component: () => import("../views/Policy/VirtualDetail/index.vue")
   },
   {
-    path: "/policy/success",
+    path: "/policy/success/:orderNo",
     name: "Sucess",
     component: () => import("../views/Policy/Success/index.vue")
   },
@@ -100,14 +100,14 @@ export default [
     component: () => import("../views/Policy/Add/index.vue")
   },
   {
-    path: "/policy/payment-record",
-    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/renewal",
+    path: "/policy/payment-record/:policySecId/:status",
     name: "Renewal",
-    component: () => import("../views/Policy/Renewal/index.vue")
+    component: () => import("../views/Policy/PaymentRecord/index.vue")
   },
   {
     path: "/introduction",

src/store/modules/user.js

 import GOODS_LIST from "@/api/goodsList.mock";
 import { getUserInfo, getFamilyList } from "@/api/user";
 import { getPolicyList } from "@/api/policy";
+import man from "@/assets/images/user/man@2x.png";
+import woman from "@/assets/images/user/woman@2x.png";
+import avatar from "@/assets/images/user/avatar@2x.png";
 import _ from "lodash";
 
 const CONSTANT = {
   avatar: {
-    man: "../../../assets/images/user/man@2x.png",
-    woman: "../../../assets/images/user/woman@2x.png"
+    man,
+    woman
   },
   relation: ["本人", "父母", "配偶", "子女"]
 };
 
+// 0: man; 1: woman
 function getReletion(relation, gender) {
   let result = "";
   if ([1, 3].includes(+relation)) {
     if (+relation === 1) {
-      result = +gender ? "父亲" : "母亲";
+      result = +gender ? "母亲" : "父亲";
     } else {
-      result = +gender ? "儿子" : "女儿";
+      result = +gender ? "女儿" : "儿子";
     }
   } else {
     result = CONSTANT.relation[+relation];
@@ -33,7 +37,7 @@ export default {
     userInfo: {
       name: "未登录",
       phoneNoMask: "点击登录",
-      avatar: "../../assets/images/user/avatar@2x.png",
+      avatar,
       auth: false
     }
   },
@@ -63,10 +67,11 @@ export default {
             const policyListFilted = policyList
               .filter(
                 policy =>
-                  _.some(goodsList, { id: +policy.productNo }) &&
-                  +family.userInfoSecId === +policy.insuredUserSecId
+                  _.some(goodsList, { id: policy.productNo }) &&
+                  +family.userInfoSecId === +policy.insuredUserSecId &&
+                  ["6.1", "6.2", "6.3"].includes(policy.policyState)
               )
-              .map(policy => ({ ...policy, ..._.find(goodsList, { id: +policy.productNo }) }))
+              .map(policy => ({ ...policy, ..._.find(goodsList, { id: policy.productNo }) }))
               .sort((a, b) => a.termType > b.termType);
 
             return policyListFilted?.[0] || goodsList[0];

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/Home/Activity/index.less

@@ -66,6 +66,7 @@
 
   &-prize {
     margin: 20px 7px;
+    width: 362px;
     height: 362px;
     background: url('../../../assets/images/home/zhuanpan.png') no-repeat 0 0 /contain;
 
@@ -177,7 +178,7 @@
     flex-direction: column;
     justify-content: center;
     align-items: center;
-    margin: 0 10px 24px;
+    margin: 0 20px 24px;
     height: 139px;
     background: url('../../../assets/images/home/jiangpin.png') no-repeat 0 0 /contain;
 

src/views/Home/Activity/index.vue

@@ -97,6 +97,7 @@
 </template>
 <script>
 import Modal from "../modules/Modal";
+import localStorage from "@/service/localStorage";
 
 export default {
   name: "Activity",
@@ -106,6 +107,7 @@ export default {
   data() {
     return {
       isGoing: false,
+      isLogin: localStorage.get("mongoToken"),
       modal: {
         winning: false,
         guide: false,
@@ -114,7 +116,16 @@ export default {
       }
     };
   },
-  computed: {},
+  computed: {
+    voteButtonText() {
+      if (!this.isLogin) {
+        return "去投票";
+      }
+    }
+  },
+  created() {
+
+  },
   methods: {
     gameStart() {
       this.$nextTick(() => {
@@ -125,7 +136,7 @@ export default {
         const pointer = document.querySelector(".activity-prize-pointer");
         // 1. 计算旋转角度
         let rotateItemDeg = (3 * 360) / 6; // 每个item旋转角度, 第一个不用旋转
-        let rotate = rotateItemDeg + 5 * 360;
+        let rotate = rotateItemDeg + 4 * 360;
         let rotateSpeed = ((rotateItemDeg / 360) * 1 + 5).toFixed(2);
         // 2. 重置转盘样式
         turntable.removeAttribute("style");

src/views/Home/index.less

@@ -174,14 +174,13 @@
         height: 30px;
         background: #FFFFFF;
         &.active {
-          opacity: 0.4;
+          background:rgba(255,255,255,.4);
         }
         &:nth-child(3) {
           border-radius: 20px 0 0 20px;
         }
 
         &:nth-child(4) {
-          // opacity: 0.4;
           border-radius: 0 20px 20px 0;
         }
 

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

 <template>
   <div>
-    <status-desc
-      :firstTitle="data.cardConfig.detailText"
-      :secondTitle="data.cardConfig.statusText"
-      :recordText="data.cardConfig.recordText"
-    ></status-desc>
+    <status-desc :cardConfig="data.cardConfig" :policySecId="data.policySecId"></status-desc>
     <pay-cost
       v-if="showPayCost"
       :statusKey="data.cardConfig.key"
       :payCostConfig="data.cardConfig.payCostConfig"
+      :day="data.payInfo && data.payInfo.expiredDay"
+      :payInfo="payInfo"
     ></pay-cost>
     <insurance-card
       :productNo="data.productNo"
+      :policySecId="data.policySecId"
       :autoRenewPremium="data.autoRenewPremium"
       :policyNo="data.policyNo"
+      :orderNo="data.orderNo"
     ></insurance-card>
     <security-content :data="data" :detail="planDetail"></security-content>
     <insurance-service :detail="qaDetail"></insurance-service>
@@ -29,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";
@@ -37,6 +38,7 @@ import aiDetail from "@/api/detail.zhongan.yiwai";
 
 export default {
   name: "Guarantee",
+  mixins: [detailPayMixin],
   components: {
     InsuranceRecommend,
     InsuranceCard,
@@ -59,6 +61,7 @@ export default {
   },
   watch: {
     data: {
+      immediate: true,
       deep: true,
       handler() {
         this.setProductInfoByNo();

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

 <template>
   <div>
-    <status-desc
-      :firstTitle="data.cardConfig.detailText"
-      :secondTitle="data.cardConfig.statusText"
-      :recordText="data.cardConfig.recordText"
-    ></status-desc>
+    <status-desc :cardConfig="data.cardConfig" :policySecId="data.policySecId"></status-desc>
     <pay-cost
       v-if="showPayCost"
       :statusKey="data.cardConfig.key"
       :payCostConfig="data.cardConfig.payCostConfig"
+      :payInfo="payInfo"
     ></pay-cost>
     <refund
       v-else
       :refundConfig="data.cardConfig.refundConfig"
       :amount="amount"
       :payTime="payTime"
+      :payTimeText="payTimeText"
     ></refund>
     <Phone></Phone>
   </div>
@@ -24,10 +22,12 @@ import StatusDesc from "../modules/StatusDesc";
 import Phone from "../modules/Phone";
 import Refund from "../modules/Refund";
 import PayCost from "../modules/PayCost";
-import { parseTime } from "@/service/utils";
+import detailPayMixin from "@/views/Policy/mixin/orderInfo.mixin";
+// import { parseTime } from "@/service/utils";
 
 export default {
   name: "Guarantee",
+  mixins: [detailPayMixin],
   components: {
     StatusDesc,
     Phone,
@@ -45,10 +45,16 @@ export default {
   },
   computed: {
     amount() {
-      return this.data.cardConfig?.amount || 0;
+      console.log(this.data);
+      return this.data.refundInfo?.amount || 0;
     },
     payTime() {
-      return parseTime(this.data.cardConfig?.payTime, "{y}-{m}-{d}") || 0;
+      return this.data.cardConfig.key === "8"
+        ? this.data.refundInfo?.refundTime || "-"
+        : this.data.refundInfo?.payTime || "-";
+    },
+    payTimeText() {
+      return this.data.cardConfig.key === "8" ? "到账时间" : "支付时间";
     },
     showPayCost() {
       return ["4", "14", "13"].includes(this.data?.cardConfig?.key);

src/views/Policy/Detail/index.less

@@ -7,17 +7,20 @@
   color: #787EFF !important;
   line-height: 16px;
   background-color: #fff !important;
+
   &:first-child {
     margin-right: 8px;
   }
 }
+
 .card-container() {
   margin: 0 16px 10px;
   padding: 20px;
   background: #FFFFFF;
-  box-shadow: 0px 5px 25px 0px rgba(0,0,0,0.07);
+  box-shadow: 0px 5px 25px 0px rgba(0, 0, 0, 0.07);
   border-radius: 14px;
 }
+
 .card-title(@marginBottom) {
   margin-bottom: @marginBottom;
   font-size: 18px;
@@ -25,6 +28,7 @@
   color: #242629;
   line-height: 24px;
 }
+
 .card-desc(@marginBottom, @lineHeight: 16px) {
   margin-bottom: @marginBottom;
   font-size: 12px;
@@ -32,39 +36,47 @@
   color: #999999;
   line-height: @lineHeight;
 }
+
 .card-head() {
   display: flex;
   justify-content: space-between;
   margin-bottom: 16px;
+
   span:first-child {
     font-size: 18px;
     font-weight: 600;
     color: #242629;
     line-height: 24px;
   }
+
   span:last-child {
     font-size: 12px;
     font-weight: 400;
     color: #787EFF;
     line-height: 24px;
   }
+
   .svg-icon {
     padding: 4px 0;
     width: 16px;
     height: 16px;
   }
 }
+
 .card-body(@marginBottom: 0) {
   margin-bottom: @marginBottom;
+
   div {
     display: flex;
     justify-content: space-between;
+
     span:first-child {
       font-size: 12px;
       font-weight: 400;
       color: #666666;
       line-height: 24px;
     }
+
     span:last-child {
       font-size: 12px;
       font-weight: 600;
@@ -73,17 +85,20 @@
     }
   }
 }
+
 .policy-detail {
   position: relative;
   background: #F6F6F6;
+
   &:before {
     position: absolute;
     width: 375px;
     height: 269px;
     border: 0;
     content: '';
-  	background: linear-gradient(360deg,rgba(244,244,244,1) 0%,rgba(255,200,66,1) 100%);
+    background: linear-gradient(360deg, rgba(244, 244, 244, 1) 0%, rgba(255, 200, 66, 1) 100%);
   }
+
   &:after {
     position: absolute;
     top: 38px;
@@ -98,6 +113,7 @@
     position: absolute;
     left: 0;
     right: 0;
+
     // padding-bottom: 49px;
     .Pdb-status {
       margin: 0 0 5px 20px;
@@ -105,10 +121,12 @@
       font-weight: 600;
       color: #333333;
       line-height: 40px;
+
       &:first-child {
         margin: 32px 0 0 20px;
       }
     }
+
     .Pdb-tips {
       display: inline-flex;
       align-items: center;
@@ -120,6 +138,7 @@
       background: #000000;
       border-radius: 8px;
       opacity: 0.2;
+
       &-text {
         margin-right: 1px;
         font-size: 12px;
@@ -127,20 +146,57 @@
         color: #FFFFFF;
         line-height: 12px;
       }
+
       &-svg {
         width: 12px;
         height: 12px;
       }
     }
+
     .Pdb-refund {
       .card-container();
       margin: 27px 16px 10px;
+
       &-title {
         .card-title(8px);
       }
+
       &-desc {
         .card-desc(24px);
       }
+
+      &-note {
+        .card-desc(0);
+        margin-top: 16px;
+      }
+
+      &-operation {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        margin-top: 16px;
+        width: 100%;
+
+        .Pdbi-operation-button {
+          padding: 0 !important;
+          width: 146px;
+          height: 40px;
+          border-radius: 8px !important;
+          border: 1px solid #787EFF !important;
+          background-color: #fff !important;
+          font-size: 14px;
+          font-weight: 400;
+          color: #787EFF !important;
+          line-height: 16px;
+
+          &_paid {
+            border: 0 !important;
+            background: #F4F5FF !important;
+            color: #787EFF !important;
+          }
+        }
+      }
+
       &-content {
         .Pdbr-content-item {
           display: flex;
@@ -154,12 +210,14 @@
           &:first-child {
             margin-bottom: 12px;
           }
+
           span:first-child {
             font-size: 14px;
             font-weight: 400;
             color: #666666;
             line-height: 24px;
           }
+
           span:last-child {
             font-size: 14px;
             font-weight: 500;
@@ -169,10 +227,13 @@
         }
       }
     }
+
     .Pdb-payment {
       .card-container();
+
       &-title {
         .card-title(16px);
+
         &_tips {
           font-size: 14px;
           font-weight: 400;
@@ -180,11 +241,14 @@
           line-height: 16px;
         }
       }
+
       &-content {
         margin-bottom: 17px;
+
         .Pdbp-content-item {
           display: flex;
           align-items: center;
+
           .Pdbpc-item-svg {
             margin-right: 8px;
             width: 12px;
@@ -192,11 +256,13 @@
             border-radius: 50%;
             background: #FFC842;
           }
+
           .Pdbpc-item-text {
             .card-desc(0, 24px);
           }
         }
       }
+
       &-button {
         width: 100%;
         height: 52px;
@@ -208,49 +274,70 @@
         line-height: 22px;
       }
     }
+
     .Pdb-insurance {
       .card-container();
+
       &-name {
         .card-title(12px);
       }
+
       &-no {
         .card-desc(16px);
       }
+
       &-operation {
-	  	.Pdbi-operation-button { .button }
+        .Pdbi-operation-button {
+          .button
+        }
       }
     }
+
     .Pdb-content {
       .card-container();
+
       &-head {
         .card-head
       }
+
       &-body {
         .card-body(8px);
       }
+
       &-operation {
-	  	.Pdbc-button { .button }
+        .Pdbc-button {
+          .button
         }
+      }
+
       &-user {
         margin-top: 24px;
+
         .Pdbc-user-who {
           .card-title(16px);
         }
+
         .Pdbc-user-info {
           display: flex;
-	  	  justify-content: space-around;
+          // justify-content: space-around;
+          box-sizing: border-box;
+          padding: 0 16px;
           align-items: center;
           width: 100%;
           height: 50px;
           background: #F6F7FA;
           border-radius: 14px;
+
           span:first-child {
+            width: 55px;
             font-size: 14px;
             font-weight: 500;
             color: #333333;
             line-height: 24px;
           }
+
           span:last-child {
+            // flex: 1;
             font-size: 14px;
             font-weight: 400;
             color: #666666;
@@ -259,35 +346,44 @@
         }
       }
     }
+
     .Pdb-service {
       .card-container();
       margin: 0 16px 16px;
       padding: 20px 20px 11px;
+
       &-head {
         .card-head();
       }
+
       &-body {
         .card-body();
       }
+
       &-question {
         // margin-top: 24px;
         .card-head();
       }
+
       &-divider {
         margin: 0 0 12px 0;
+
         &:before {
           height: 1px;
           border-color: #EBEBEB;
         }
       }
+
       &-agreement {
         display: flex;
-				padding-top: 3px;
-				align-items: center;
+        justify-content: space-between;
         flex-wrap: wrap;
+
         a {
           font-size: 12px;
           color: #333;
+          font-weight: 400;
+          line-height: 24px;
           &::after {
             display: inline-block;
             content: " ";
@@ -301,21 +397,32 @@
             display: none;
           }
         }
+
+        // span {
+        //   font-size: 12px;
+        //   font-weight: 400;
+        //   color: #333333;
+        //   line-height: 24px;
+        // }
       }
     }
+
     .Pdb-operation {
       display: flex;
       justify-content: space-around;
       margin-bottom: 14px;
+
       &-item {
         display: flex;
         justify-content: space-between;
         align-items: center;
         width: 84px;
+
         .Pdbo-item-svg {
           width: 16px;
           height: 16px;
         }
+
         .Pdbo-item-text {
           font-size: 14px;
           font-weight: 400;
@@ -324,11 +431,13 @@
         }
       }
     }
+
     .Pdb-footer {
       display: flex;
       flex-direction: column;
       align-items: center;
       margin: 231px 0 20px;
+
       span:first-child {
         margin-bottom: 2px;
         font-size: 11px;
@@ -336,6 +445,7 @@
         color: #999999;
         line-height: 16px;
       }
+
       span:last-child {
         font-size: 20px;
         font-weight: 600;
@@ -343,17 +453,9 @@
         line-height: 28px;
       }
     }
+
     .Pdb-recommend {
       margin-bottom: 49px;
     }
   }
 }
\ No newline at end of file
-.Pdbc-body-item {
-	&.inline span:first-child {
-		color: #999999 !important;
-	}
-	.cr-divider {
-		width: 100%;
-		margin: 11px 0;
-	}
-}
\ No newline at end of file

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,16 +27,19 @@ export default {
     return {
       policy: {
         cardConfig: {
-          component: "Guarantee"
+          component: ""
         }
       }
     };
   },
-  async created() {
-    console.log(this.$route.params.orderNo);
+  created() {
+    this.getPolicy();
+  },
+  methods: {
+    async getPolicy() {
       const detail = await getPolicyDetail(this.$route.params.orderNo);
       this.policy = this.getData(detail);
-    // if (true) {}
+    }
   }
 };
 </script>

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

 <template>
   <div class="Pdb-insurance">
-    <p class="Pdb-insurance-name">{{ product.title }}</p>
-    <p class="Pdb-insurance-no">NO.{{ policyNo }}<br />由{{ product.compony }}承保</p>
+    <p class="Pdb-insurance-name">{{ productTitle }}</p>
+    <p class="Pdb-insurance-no">NO.{{ policyNo }}<br />由{{ productCompany }}承保</p>
     <div class="Pdb-insurance-operation">
       <cr-button class="Pdbi-operation-button" @click="goNext">{{ buttonText }}</cr-button>
       <cr-button class="Pdbi-operation-button">申请理赔</cr-button>
@@ -25,21 +25,34 @@ export default {
     policyNo: {
       type: String,
       default: ""
+    },
+    orderNo: {
+      type: String,
+      default: ""
+    },
+    policySecId: {
+      type: String,
+      default: ""
     }
   },
   data() {
     return {};
   },
   computed: {
-    product() {
-      return GOODS_LIST.find(v => v.id === +this.productNo);
+    productTitle() {
+      return GOODS_LIST.find(v => v.id === this.productNo)?.title || "";
+    },
+    productCompany() {
+      return GOODS_LIST.find(v => v.id === this.productNo)?.company || "";
     },
     buttonText() {
       return this.autoRenewPremium ? "已开通次年续保" : "已关闭次年续保";
     }
   },
   methods: {
-    goNext() {}
+    goNext() {
+      this.$router.push(`/policy/renewal/${this.orderNo}/${this.policySecId}`);
+    }
   }
 };
 </script>

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

@@ -4,7 +4,7 @@
       {{ payCostConfig.title }}
     </p>
     <div v-else>
-      <p class="Pdb-payment-title">保障将在XX天后失效，请立即缴费</p>
+      <p class="Pdb-payment-title">{{ expiredDayText }}</p>
       <div class="Pdb-payment-content">
         <div class="Pdbp-content-item">
           <svg-icon class-name="Pdbpc-item-svg" icon-class="check-circle" />
@@ -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,
@@ -37,11 +42,49 @@ export default {
         title: "",
         button: "立即缴费"
       })
+    },
+    payInfo: {
+      type: Object,
+      default: () => ({
+        payOrderNo: "",
+        payType: "",
+        orderNo: ""
+      })
+    },
+    day: {
+      type: String,
+      default: ""
     }
   },
   computed: {
     showTips() {
       return ["4", "14", "13"].includes(this.statusKey);
+    },
+    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();
+      }
     }
   }
 };

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

@@ -8,7 +8,7 @@
         <span>{{ amount }}元</span>
       </div>
       <div class="Pdbr-content-item">
-        <span>支付时间</span>
+        <span>{{ payTimeText }}</span>
         <span>{{ payTime }}</span>
       </div>
     </div>
@@ -32,6 +32,10 @@ export default {
     payTime: {
       type: String,
       default: "-"
+    },
+    payTimeText: {
+      type: String,
+      default: "支付时间"
     }
   },
   data() {

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

 <template>
   <div>
-    <p class="Pdb-status" v-if="firstTitle">{{ firstTitle }}</p>
-    <p class="Pdb-status">{{ secondTitleText }}</p>
-    <div class="Pdb-tips" v-if="recordText">
-      <span class="Pdb-tips-text">{{ recordText }}</span>
+    <p class="Pdb-status" v-if="cardConfig.detailText">{{ cardConfig.detailText }}</p>
+    <p class="Pdb-status">{{ cardConfig.statusText }}</p>
+    <div class="Pdb-tips" v-if="cardConfig.recordText" @click="goNext">
+      <span class="Pdb-tips-text">{{ cardConfig.recordText }}</span>
       <svg-icon class-name="Pdb-tips-svg" icon-class="payment-record" />
     </div>
   </div>
@@ -12,16 +12,17 @@
 export default {
   name: "StatusDesc",
   props: {
-    firstTitle: {
-      type: String,
-      default: ""
-    },
-    secondTitle: {
-      type: String,
-      default: ""
+    cardConfig: {
+      type: Object,
+      default: () => ({
+        detailText: "",
+        statusText: "",
+        recordText: "",
+        status: ""
+      })
     },
-    recordText: {
-      type: String,
+    policySecId: {
+      type: [String, Number],
       default: ""
     }
   },
@@ -30,7 +31,17 @@ export default {
   },
   computed: {
     secondTitleText() {
-      return this.firstTitle ? `${this.secondTitle}...` : this.secondTitle;
+      return this.cardConfig.detailText
+        ? `${this.cardConfig.statusText}...`
+        : this.cardConfig.statusText;
+    }
+  },
+  methods: {
+    goNext() {
+      const arr = ["6.2-3", "6.1-3", "6.3", "8", "9-5", "9-6", "10"];
+      if (arr.includes(this.cardConfig?.status)) {
+        this.$router.push(`/policy/payment-record/${this.policySecId}/${this.cardConfig.status}`);
+      }
     }
   }
 };

src/views/Policy/PaymentRecord/index.vue

 <template>
   <div class="payment-record">
-    <p class="payment-record-status">持续缴费中</p>
-    <p class="payment-record-desc payment-record-desc_owe">预计下次扣费时间 2020.5.11</p>
-    <!-- <div class="payment-record-term">
+    <p class="payment-record-status">{{ termStatistics.titelText }}</p>
+    <p
+      :class="[
+        { 'payment-record-desc_owe': $route.params.status === '6.3' },
+        'payment-record-desc'
+      ]"
+    >
+      {{ termStatistics.refundTimeText }}
+    </p>
+    <div class="payment-record-term" v-if="isShowCard">
       <div class="Pr-term-item">
-        <span>800元</span>
-        <span>下期应缴金额</span>
+        <span>{{ termStatistics.amount }}</span>
+        <span>{{ termStatistics.amountText }}</span>
       </div>
       <div class="Pr-term-item">
-        <span>6/12期</span>
+        <span>{{ termStatistics.termText }}</span>
         <span>已缴/总期数</span>
       </div>
       <div class="Pr-term-item">
-        <span>0期</span>
+        <span>{{ termStatistics.delayTerm }}</span>
         <span>已欠缴期数</span>
       </div>
-    </div> -->
+    </div>
     <div class="payment-record-detail">
       <div class="Pr-detail-title Pr-detail-title_year">
         <span>缴费明细</span>
-        <span>按月缴费</span>
-      </div>
-      <div class="Pr-detail-content">
-        <div class="Prd-content-amount">
-          <span>第2期保费</span>
-          <span>100.0元</span>
-        </div>
-        <div class="Prd-content-time">
-          <span>2020.05.11 17:45</span>
-          <span>缴费成功</span>
-        </div>
-      </div>
-      <div class="Pr-detail-content">
-        <div class="Prd-content-amount">
-          <span>第2期保费</span>
-          <span>100.0元</span>
-        </div>
-        <div class="Prd-content-time">
-          <span>2020.05.11 17:45</span>
-          <span>缴费成功</span>
-        </div>
-      </div>
-      <div class="Pr-detail-content">
-        <div class="Prd-content-amount">
-          <span>第2期保费</span>
-          <span>100.0元</span>
-        </div>
-        <div class="Prd-content-time">
-          <span>2020.05.11 17:45</span>
-          <span>缴费成功</span>
-        </div>
-      </div>
-      <div class="Pr-detail-content">
-        <div class="Prd-content-amount">
-          <span>第2期保费</span>
-          <span>100.0元</span>
-        </div>
-        <div class="Prd-content-time">
-          <span>2020.05.11 17:45</span>
-          <span>缴费成功</span>
-        </div>
+        <span>{{ payPeriodText }}</span>
       </div>
-      <div class="Pr-detail-content">
+      <div class="Pr-detail-content" v-for="(item, index) in termList" :key="index">
         <div class="Prd-content-amount">
-          <span>第2期保费</span>
-          <span>100.0元</span>
+          <span>{{ item.termNoText }}</span>
+          <span>{{ item.amountText }}</span>
         </div>
         <div class="Prd-content-time">
-          <span>2020.05.11 17:45</span>
-          <span>缴费成功</span>
+          <span>{{ item.recordDate }}</span>
+          <span>{{ item.payStatusText }}</span>
         </div>
       </div>
     </div>
   </div>
 </template>
-<script></script>
+<script>
+import { getPayRecord } from "@/api/policy";
+
+export default {
+  name: "paymentRecord",
+  data() {
+    return {
+      record: {},
+      termStatistics: {},
+      termList: [],
+      List: [],
+      title: "",
+      desc: "",
+      clauseStatistics: {
+        amount: 0,
+        paidTerm: "",
+        delayTerm: "",
+        totalTerm: ""
+      }
+    };
+  },
+  async created() {
+    this.record = await getPayRecord(this.$route.params.policySecId);
+    this.getTermStatistics();
+    this.getTermList();
+  },
+  computed: {
+    payPeriodText() {
+      return this.record.payPeriod === 1 ? "按月缴费" : "按年缴费";
+    },
+    isShowCard() {
+      console.log(this.record?.payPeriod === 1);
+      return this.record?.payPeriod === 1 && !["8", "10"].includes(this.$route.params.status);
+    }
+  },
+  methods: {
+    getTermStatistics() {
+      const status = this.$route.params.status;
+      const isMonthPay = this.record?.payPeriod === 1;
+      let result = {
+        titelText: "",
+        refundTimeText: "",
+        amount: "",
+        amountText: "",
+        termText: "",
+        delayTerm: ""
+      };
+      // 不同状态对应的缴费记录
+      if (["6.2-3", "6.1-3", "6.3"].includes(status)) {
+        result = {
+          titelText: isMonthPay ? "持续缴费中" : "缴费成功",
+          refundTimeText: isMonthPay
+            ? `预计下次扣费时间 ${this.record.nextPayDate}`
+            : `下次缴费时间 ${this.record.nextPayDate}`,
+          amount: `${this.record?.nextTermAmount || 0}元`,
+          amountText: "下期应缴金额",
+          termText: `${this.record.paidTerm}/${this.record.totalTerm}期`,
+          delayTerm: `${this.record.delayTerm}期`
+        };
+        if (status === "6.3") {
+          result.refundTimeText = `保单已欠费，欠缴${this.record?.delayAmount}元`;
+        }
+      } else if (["8", "9-5", "9-6", "10"].includes(status)) {
+        result = {
+          titelText: `共缴纳${this.record.totalAmount}元`,
+          refundTimeText: "保障已终止",
+          amount: `${this.record?.nextTermAmount || 0}元`,
+          amountText: "应退金额",
+          termText: `${this.record.paidTerm}/${this.record.totalTerm}期`,
+          delayTerm: `${this.record.delayTerm}期`
+        };
+      }
+
+      this.termStatistics = result;
+    },
+    getTermList() {
+      const status = this.$route.params.status;
+      const list =
+        this.record?.recordTerm?.map(v => ({
+          termNoText: this.record?.payPeriod === 1 ? `第${v.termNo}期保费` : "1年保费",
+          recordDate: v.recordDate,
+          amountText: `${v.amount}元`,
+          payStatusText:
+            v.currentPayState === "1" ? "已欠费" : v.currentPayState === "3" ? "缴费成功" : "-"
+        })) || [];
+
+      if (["9-5", "9-6"].includes(status)) {
+        list.unshift({
+          termNoText:
+            this.record?.refundRecord?.currentState === "2"
+              ? "退款中"
+              : this.record?.refundRecord?.currentState === "3"
+              ? "退款成功"
+              : "-",
+          recordDate: this.record?.refundRecord?.payTime || "-",
+          amountText: `${this.record?.refundRecord?.amount}元`,
+          payStatusText:
+            this.record?.refundRecord?.currentState === "2"
+              ? "应退金额"
+              : this.record?.refundRecord?.currentState === "3"
+              ? "已退金额"
+              : "-"
+        });
+      }
+
+      this.termList = list;
+    }
+  }
+};
+</script>
 <style lang="less" src="./index.less" scoped></style>

src/views/Policy/Renewal/index.less

@@ -3,6 +3,7 @@
 .renewal {
   overflow: hidden;
   height: 100%;
+
   &:after {
     position: absolute;
     top: 38px;
@@ -12,12 +13,15 @@
     content: '';
     background: url('../../../assets/images/policy/detail/point@2x.png') no-repeat 0 0 /cover;
   }
+
   &_open {
     background: #FFC842;
   }
+
   &_closed {
     background: #F65D5D;
   }
+
   &-status {
     margin: 64px 0 0 20px;
     font-size: 28px;
@@ -25,6 +29,7 @@
     color: #333333;
     line-height: 40px;
   }
+
   &-desc {
     margin: 0 0 49px 20px;
     font-size: 28px;
@@ -32,6 +37,7 @@
     color: #333333;
     line-height: 40px;
   }
+
   &-container {
     position: absolute;
     left: 0;
@@ -40,6 +46,7 @@
     padding: 28px 20px 34px;
     background: #FFFFFF;
     border-radius: 32px 32px 0 0;
+
     &-title {
       margin-bottom: 16px;
       font-size: 18px;
@@ -47,11 +54,14 @@
       color: #242629;
       line-height: 24px;
     }
+
     &-content {
       margin-bottom: 4px;
+
       .Rc-content-item {
         display: flex;
         align-items: center;
+
         .Rcc-item-svg {
           margin-right: 8px;
           width: 12px;
@@ -59,6 +69,7 @@
           border-radius: 50%;
           background: #FFC842;
         }
+
         .Rcc-item-text {
           font-size: 14px;
           font-weight: 400;
@@ -67,18 +78,23 @@
         }
       }
     }
+
     &-read {
       margin-bottom: 16px;
       font-size: 12px;
       font-weight: 400;
-	  color: rgba(153,153,153,1);
+      color: rgba(153, 153, 153, 1);
       line-height: 24px;
+
       span {
         color: #787EFF;
       }
     }
+
     &-detail {
       margin-bottom: 76px;
+      height: 130px;
+
       .Rc-detail-item {
         display: flex;
         justify-content: space-between;
@@ -87,15 +103,18 @@
         height: 60px;
         background: #F6F7FA;
         border-radius: 14px;
+
         &:first-child {
           margin-bottom: 10px;
         }
+
         span:first-child {
           font-size: 14px;
           font-weight: 400;
           color: #666666;
           line-height: 24px;
         }
+
         span:last-child {
           font-size: 14px;
           font-weight: 600;
@@ -104,14 +123,15 @@
         }
       }
     }
+
     &-button {
       width: 100%;
       height: 52px;
-  	  background: #FFC842;
-  	  border-radius: 14px;
+      background: #FFC842 !important;
+      border-radius: 14px !important;
       font-size: 16px;
       font-weight: 600;
-  	  color: #333333;
+      color: #333333 !important;
       line-height: 22px;
     }
   }

src/views/Policy/Renewal/index.vue

 <template>
-  <div class="renewal renewal_open">
-    <p class="renewal-status">该保单已开通</p>
+  <div class="renewal " :class="isOpened ? 'renewal_open' : 'renewal_closed'">
+    <p class="renewal-status">{{ statusText }}</p>
     <p class="renewal-desc">次年自动续保</p>
     <div class="renewal-container">
-      <p class="renewal-container-title">现在已享受</p>
+      <p class="renewal-container-title">{{ enjoyText }}</p>
       <div class="renewal-container-content">
         <div class="Rc-content-item">
           <svg-icon class-name="Rcc-item-svg" icon-class="check-circle" />
@@ -19,19 +19,56 @@
         </div>
       </div>
       <p class="renewal-container-read">阅读并同意《<span>次年自动续保服务协议</span>》</p>
-      <div class="renewal-container-detail">
+      <div class="renewal-container-detail" v-if="!isOpened"></div>
+      <div class="renewal-container-detail" v-if="isOpened">
         <div class="Rc-detail-item">
           <span>次年保但生效时间</span>
-          <span>2020.05.31</span>
+          <span>{{ nextYear }}</span>
         </div>
         <div class="Rc-detail-item">
           <span>扣款方式</span>
-          <span>安微信默认顺序依次扣款</span>
+          <span>按微信默认顺序依次扣款</span>
         </div>
       </div>
-      <cr-button class="renewal-container-button">取消续保</cr-button>
+      <cr-button class="renewal-container-button" @click="submit">{{ buttonText }}</cr-button>
     </div>
   </div>
 </template>
-<script></script>
+<script>
+import { getPolicyDetail, updateRenewal } from "@/api/policy";
+
+export default {
+  name: "Renewal",
+  data() {
+    return {
+      isOpened: false,
+      nextYear: "-"
+    };
+  },
+  async created() {
+    const detail = await getPolicyDetail(this.$route.params.orderNo);
+    if (detail.autoRenewPremium) {
+      this.isOpened = true;
+    }
+    this.nextYear = detail.nextYearEffectiveDate || "-";
+  },
+  computed: {
+    statusText() {
+      return this.isOpened ? "该保单已开通" : "该保单未开通";
+    },
+    enjoyText() {
+      return this.isOpened ? "现在已享受" : "开通后享受";
+    },
+    buttonText() {
+      return this.isOpened ? "取消续保" : "免费开通次年自动续保";
+    }
+  },
+  methods: {
+    async submit() {
+      await updateRenewal(this.$route.params.policySecId, !this.isOpened);
+      this.$router.go(-1);
+    }
+  }
+};
+</script>
 <style lang="less" src="./index.less" scoped></style>

src/views/Policy/Success/index.vue

 <template>
   <div class="policy-detail">
     <div class="policy-detail-body">
-      <status-desc secondTitle="购买成功"></status-desc>
-      <Refund></Refund>
+      <status-desc :cardConfig="cardConfig"></status-desc>
+      <pay-info :policy="policy"></pay-info>
       <ActBanner></ActBanner>
-      <RecGood></RecGood>
+      <insurance-recommend class="Pdb-recommend" />
     </div>
   </div>
 </template>
 <script>
 import ActBanner from "./modules/ActBanner";
+import PayInfo from "./modules/PayInfo";
 import StatusDesc from "../Detail/modules/StatusDesc";
-import Refund from "../Detail/modules/Refund";
-import RecGood from "./modules/RecGood";
+import InsuranceRecommend from "../modules/InsuranceRecommend";
+import { getGenPolicyDetail } from "@/api/policy";
+import policyStatusMixin from "../mixin/policyStatus.mixin";
 
 export default {
   name: "Sucess",
+  mixins: [policyStatusMixin],
   components: {
     StatusDesc,
-    Refund,
+    PayInfo,
     ActBanner,
-    RecGood
+    InsuranceRecommend
   },
   data() {
-    return {};
-  },
-  computed: {
-    showPayCost() {
-      return ["2", "4"].includes(this.data?.cardConfig?.key);
+    return {
+      policy: {},
+      cardConfig: {
+        detailText: "购买成功"
       }
+    };
+  },
+  async created() {
+    const detail = await getGenPolicyDetail(this.$route.params.orderNo);
+    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

+<template>
+  <div class="Pdb-refund">
+    <div class="Pdb-refund-content">
+      <div class="Pdbr-content-item">
+        <span>保障期限</span>
+        <span>{{ payInfo.guaranteePeriodText }}</span>
+      </div>
+      <div class="Pdbr-content-item">
+        <span>保费</span>
+        <span>{{ payInfo.permium }}</span>
+      </div>
+    </div>
+    <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('product')"
+        >为家人投保</cr-button
+      >
+      <cr-button class="Pdbi-operation-button" @click="goNext('policy')">查看保单</cr-button>
+    </div>
+  </div>
+</template>
+<script>
+export default {
+  name: "PayInfo",
+  props: {
+    policy: {
+      type: Object,
+      default: () => ({})
+    }
+  },
+  data() {
+    return {};
+  },
+  computed: {
+    payInfo() {
+      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(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}`);
+      }
+    }
+  }
+};
+</script>
+<style lang="less" src="../../Detail/index.less" scoped></style>

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/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,8 +14,6 @@ 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(
@@ -28,19 +26,22 @@ export default {
           .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 || "-");
+        }
       }
 
       // 校验是否支付成功
       const status = this.getStatus(policy);
-      console.log(1, this.isFromPay, status);
       if (["6.2-3", "6.1-3"].includes(status) && this.isFromPay) {
-        this.$router.replace("/policy/success");
+        this.$router.replace(`/policy/success/${this.$route.params.orderNo}`);
       }
 
       return {
         ...policy,
-        ..._.find(GOODS_LIST, { id: +policy?.productNo }),
-        cardConfig: { ...value, key }
+        ..._.find(GOODS_LIST, { id: policy?.productNo }),
+        cardConfig: { ...value, key, status: this.getStatus(policy) }
       };
     },
     findKey(policy) {
@@ -51,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) {
@@ -58,7 +65,6 @@ export default {
       const prePath = ["/goods/inform", "/goods/detail", "/policy/add"];
       if (prePath.includes(from.path)) {
         vm.isFromPay = true;
-        console.log(2, vm.isFromPay);
       }
     });
   }

src/views/Policy/modules/InsuranceRecommend.vue

 <template>
   <div class="policy-recommend">
     <div class="policy-recommend-content">
-      <cr-image class="Prc-left" width="" height="" :src="recommendContent" />
+      <cr-image class="Prc-left" width="" height="" :src="goods.img" />
       <div class="Prc-right">
         <p class="Prc-right-title">
-          <span>50万</span>
-          <span>重疾保障</span>
+          <span>30万</span>
+          <span>{{ goods.guarantee_title }}</span>
         </p>
-        <p class="Prc-right-desc">优势介绍 优势介绍 优势介绍</p>
+        <p class="Prc-right-desc">{{ goods.guarantee_sub }}</p>
       </div>
     </div>
     <cr-button class="policy-recommend-button" @click="goNext()">点此投保</cr-button>
-    <cr-image class="policy-recommend-angle" width="" height="" :src="recommendAngle" />
+    <cr-image
+      class="policy-recommend-angle"
+      width=""
+      height=""
+      src="@/assets/images/policy/recommend-angle@2x.png"
+    />
   </div>
 </template>
 <script>
-import recommendAngle from "@/assets/images/policy/recommend-angle@2x.png";
-import recommendContent from "@/assets/images/policy/recommend-content@2x.png";
+import GOODS_LIST from "@/api/goodsList.mock";
+
+const goods = GOODS_LIST.find(v => v.id === "HTDQZJX001");
 
 export default {
   name: "InsuranceRecommend",
   data() {
     return {
-      recommendAngle,
-      recommendContent
+      goods
     };
   },
   methods: {
     goNext() {
-      // todo 跳转医疗险详情页
+      this.$router.push({
+        path: "/goods/detail",
+        query: { id: this.goods.id, type: this.goods.itype }
+      });
     }
   }
 };

src/views/Policy/modules/PolicyItem.vue

@@ -34,7 +34,7 @@
             ]"
             v-for="button in item.cardConfig.buttons"
             :key="button"
-            @click="goNext(button, item)"
+            @click.stop="goNext(button, item)"
             >{{ button }}</cr-button
           >
           <p
@@ -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,
@@ -112,7 +113,7 @@ export default {
       this.list = list
         .filter(
           v =>
-            _.some(GOODS_LIST, { id: +v.productNo }) &&
+            _.some(GOODS_LIST, { id: v.productNo }) &&
             (type === 0 ? true : v.insuredRelation === relations[type]) &&
             this.findKey(v)
         )
@@ -121,15 +122,23 @@ export default {
     showStatusText(text) {
       return text === "保障中";
     },
-    // goNext(text, item) {
-    goNext() {
-      // if (text === "为家人投保") {
-      // } else if (text === "电子保单") {
-      // } else if (text === "开通自动续费") {
-      // } else if (text === "去支付") {
-      // } else if (text === "重新投保") {
-      // } else if (text === "联系客服") {
-      // }
+    goNext(text, item) {
+      if (["为家人投保", "重新投保"].includes(text)) {
+        this.$router.push({
+          path: "/goods/detail",
+          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 === "联系客服") {
+      }
     },
     goDetail(orderNo) {
       const policy = this.list.find(v => v.orderNo === orderNo);

src/views/User/Family/index.less

@@ -66,9 +66,14 @@
         line-height: 16px;
       }
 
-      &_overlay {
+      &_overlay_2 {
         border-radius: 17px;
-        margin-top: 35px;
+        margin-top: 10px;
+        box-shadow: 0px -5px 25px 0px rgba(0,0,0,0.07), 0px -20px 0 -10px #FFFFFF;
+      }
+      &_overlay_3 {
+        border-radius: 17px;
+        margin-top: 15px;
         box-shadow: 0px -5px 25px 0px rgba(0,0,0,0.07), 0px -20px 0 -10px #FFFFFF, 0px -25px 25px 0px rgba(0,0,0,0.07), 0px -33px 0 -14px #FFFFFF;
       }
     }

src/views/User/Family/index.vue

@@ -19,7 +19,11 @@
       </div>
       <div class="family-list" v-else>
         <div
-          class="family-list-item_overlay family-list-item"
+          :class="[
+            { 'family-list-item_overlay_2': familyList.length === 2 },
+            { 'family-list-item_overlay_3': familyList.length >= 3 },
+            'family-list-item'
+          ]"
           @click="go(`/user/family/detail/${familyList[0].userInfoSecId}`)"
         >
           <div class="Fl-item-left">
@@ -30,7 +34,7 @@
           <p class="Fl-item-right" v-if="familyList[0].auth">已认证</p>
         </div>
       </div>
-      <div class="family-collapse" @click="isCollapse = !isCollapse">
+      <div class="family-collapse" v-if="familyList.length !== 1" @click="isCollapse = !isCollapse">
         <span class="family-collapse-text">{{ collapseText }}</span>
         <svg-icon
           icon-class="triangle-down"

src/views/User/Family/modules/FamilyForm.vue

@@ -84,7 +84,7 @@
           <span>与您关系:</span>
           <span>{{ formData.relation }}</span>
         </div>
-        <div class="Fc-modal-item">
+        <div class="Fc-modal-item" v-if="formData.socialSecurity">
           <span>有无社保:</span>
           <span>{{ formData.socialSecurity === "true" ? "有社保" : "无社保" }}</span>
         </div>
@@ -204,16 +204,23 @@ export default {
       this.modal.confirm = false;
       // 组件不支持boolean,需转换
       const params = {
-        ...this.formData,
-        socialSecurity: this.formData?.socialSecurity === "true" ? true : false
+        name: this.formData?.nameMask,
+        idNo: this.formData?.idNoMask,
+        relation: this.getReletion(this.formData?.relation)
       };
+      // 转换参数类型
+      if (this.formData?.socialSecurity !== "") {
+        params.socialSecurity = this.formData?.socialSecurity === "true" ? true : false;
+      }
       if (this.type === "add") {
         await addFamily(params);
+        await this.setFamilyList();
+        this.formData = _.cloneDeep(defaultFormData);
       } else {
+        params.userInfoSecId = this.information?.userInfoSecId;
         await updateFamily(params);
+        this.$router.push("/user/family");
       }
-      await this.setFamilyList();
-      this.formData = _.cloneDeep(defaultFormData);
     },
     onConfirm(picker, res) {
       this.formData.relation = res[0];
@@ -228,9 +235,25 @@ export default {
       }
     },
     async delFamily() {
+      console.log(this.information);
       this.modal.delete = false;
-      await delFamily();
+      await delFamily({ userInfoSecId: this.information?.userInfoSecId });
       this.$router.push("/user/family");
+    },
+    getReletion(relation) {
+      let result = -1;
+
+      if (["父亲", "母亲"].includes(relation)) {
+        result = 1;
+      } else if (["女儿", "儿子"].includes(relation)) {
+        result = 3;
+      } else if (relation === "本人") {
+        result = 0;
+      } else if (relation === "配偶") {
+        result = 2;
+      }
+
+      return result;
     }
   }
 };

src/views/User/HelpCenter/index.less

@@ -39,6 +39,7 @@
   	left: 0;
   	right: 0;
   	bottom: 0;
+    overflow-y: scroll;
   	padding: 15px 20px 0;
   	background: #FFFFFF;
     border-radius: 32px 32px 0 0;

src/views/User/index.less

@@ -187,6 +187,22 @@
 			  font-size: 11px;
               font-weight: 400;
               color: @tag-warning-light-color;
+              &_illness {
+	          background: #FFD8BF;
+	          color: #FF6702;
+	        }
+	        &_life {
+	          background: #F3F2F1;
+	          color: #DDB984;
+	        }
+	        &_casualty {
+	          background: #F6E8FF;
+	          color: #858AFF;
+	        }
+	        &_medical {
+	          background: #FFEAB7;
+	          color: #EAAD1A;
+	        }
 		  	}
 		  }
 		  .Ufii-middle-footer {

src/views/User/index.vue

 <template>
   <div class="user">
     <div class="user-info">
-      <div class="user-info-account" @click="go('', true)">
+      <div class="user-info-account" @click="go()">
         <span>{{ userInfo.name }}</span>
         <span>{{ userInfo.phoneNoMask }}</span>
       </div>
-      <div class="user-info-image" @click="go('', true)">
+      <div class="user-info-image" @click="go()">
         <cr-image
           class="user-info-image-avatar"
           width=""
@@ -30,7 +30,7 @@
         <span class="user-insurance-list-title">全部保单</span>
       </div>
       <div class="user-insurance-divider"></div>
-      <div class="user-insurance-list" @click="go('', true)">
+      <div class="user-insurance-list" @click="go()">
         <div class="user-insurance-list-icon">
           <svg-icon icon-class="claims-apply" class-name="user-insurance-list-icon-svg" />
           <!-- <div class="user-insurance-list-icon-dot"></div> -->
@@ -41,20 +41,29 @@
     <user-family @go="go"></user-family>
     <div class="user-service">
       <p class="user-service-title">我的服务</p>
-      <div class="user-service-main" @click="go('', true)">
-        <cr-cell title="帮助中心" :icon="help" class="user-service-main-item">
+      <div class="user-service-main">
+        <cr-cell
+          title="帮助中心"
+          :icon="help"
+          class="user-service-main-item"
+          @click="go('/user/help-center', false)"
+        >
           <svg-icon slot="right-icon" icon-class="arrow" class-name="user-service-main-item-svg" />
         </cr-cell>
-        <cr-cell title="客服电话" :icon="customerService" class="user-service-main-item">
+        <cr-cell
+          title="客服电话"
+          :icon="customerService"
+          class="user-service-main-item"
+          @click="go()"
+        >
           <svg-icon slot="right-icon" icon-class="arrow" class-name="user-service-main-item-svg" />
         </cr-cell>
       </div>
     </div>
     <div class="user-logo">
       <svg-icon icon-class="logo" class-name="user-logo-svg" />
-      <p class="user-logo-desc" @click="go('/introduction')">了解芒果保险</p>
+      <p class="user-logo-desc" @click="go('/introduction', false)">了解芒果保险</p>
     </div>
-    <record-layer v-model="showLayer" desc="敬请期待"></record-layer>
     <tabbar></tabbar>
   </div>
 </template>
@@ -64,15 +73,14 @@ import customerService from "@/assets/images/user/customer-service@2x.png";
 import help from "@/assets/images/user/help@2x.png";
 import UserFamily from "./modules/UserFamily";
 import Tabbar from "@/components/Tabbar";
-import RecordLayer from "@/components/RecordLayer";
 import { getPolicyList } from "@/api/policy";
+import localStorage from "@/service/localStorage";
 
 export default {
   name: "User",
   components: {
     UserFamily,
-    Tabbar,
-    RecordLayer
+    Tabbar
   },
   data() {
     return {
@@ -84,22 +92,36 @@ export default {
     };
   },
   computed: {
-    ...mapState("user", ["familyList", "userInfo"])
+    ...mapState("user", ["familyList", "userInfo"]),
+    ...mapState(["isShowLogin"])
   },
-  async created() {
-    this.setUserInfo();
-    const policyList = await getPolicyList();
-    await this.setFamilyList(policyList);
-    this.showDot = policyList.some(policy => policy.policyState === "6.3");
+  created() {
+    if (localStorage.get("mongoToken")) {
+      this.getUserInfo();
+    }
+  },
+  watch: {
+    isShowLogin(val) {
+      if (!val && localStorage.get("mongoToken")) {
+        this.getUserInfo();
+      }
+    }
   },
   methods: {
     ...mapActions("user", ["setFamilyList", "setUserInfo"]),
-    go(path, isOverlay = false) {
-      if (isOverlay) {
-        this.showLayer = true;
-      } else {
-        this.$router.push(path);
+    ...mapActions(["setIsShowLogin"]),
+    go(path, isNeedLogin = true) {
+      if (isNeedLogin && !localStorage.get("mongoToken")) {
+        this.setIsShowLogin(true);
+        return;
       }
+      if (path) this.$router.push(path);
+    },
+    async getUserInfo() {
+      this.setUserInfo();
+      const policyList = await getPolicyList();
+      await this.setFamilyList(policyList);
+      this.showDot = policyList.some(policy => policy.policyState === "6.3");
     }
   }
 };

src/views/User/modules/UserFamily.vue

@@ -22,8 +22,12 @@
       </div>
     </div>
     <div class="user-family-insurance">
-      <!-- user-family-insurance-item-middle_enable 保障中 -->
-      <div class="user-family-insurance-item" v-for="(item, index) in policyList" :key="index">
+      <div
+        class="user-family-insurance-item"
+        @click="go('/policy/detail', item)"
+        v-for="(item, index) in policyList"
+        :key="index"
+      >
         <cr-image
           round
           width=""
@@ -31,59 +35,43 @@
           class="user-family-insurance-item-left"
           :src="item.productNo ? item.icon : item.icon_closed"
         />
-        <div class="user-family-insurance-item-middle">
+        <div
+          :class="[
+            { 'user-family-insurance-item-middle_enable': item.productNo },
+            'user-family-insurance-item-middle'
+          ]"
+        >
           <div class="Ufii-middle-main">
             <span class="Ufii-middle-main-title">{{ item.guarantee_title }}</span>
-            <span class="Ufii-middle-main-status" v-if="item.productNo">保障中</span>
+            <span
+              :class="[
+                { 'Ufii-middle-main-status_medical': item.itype === 'mi' },
+                { 'Ufii-middle-main-status_illness': item.itype === 'cii' },
+                { 'Ufii-middle-main-status_casualty': item.itype === 'ai' },
+                { 'Ufii-middle-main-status_life': item.itype === 'li' },
+                'Ufii-middle-main-status'
+              ]"
+              v-if="item.productNo"
+              >保障中</span
+            >
           </div>
           <div class="Ufii-middle-footer">{{ item.guarantee_sub }}</div>
         </div>
-        <p class="user-family-insurance-item-right" v-if="!item.productNo">开启保障</p>
-      </div>
-      <!-- <div class="user-family-insurance-item">
-        <cr-image round width="" height="" class="user-family-insurance-item-left" :src="illness" />
-        <div class="user-family-insurance-item-middle">
-          <div class="Ufii-middle-main">
-            <span class="Ufii-middle-main-title">重疾保障</span>
-            <span class="status">保障中</span>
-          </div>
-          <div class="Ufii-middle-footer">100种重症+40种轻症</div>
-        </div>
-        <p class="user-family-insurance-item-right">开启保障</p>
-      </div>
-      <div class="user-family-insurance-item">
-        <cr-image
-          round
-          width=""
-          height=""
-          class="user-family-insurance-item-left"
-          :src="casualty"
-        />
-        <div class="user-family-insurance-item-middle">
-          <div class="Ufii-middle-main">
-            <span class="Ufii-middle-main-title">意外保障</span>
-            <span class="Ufii-middle-main-status">保障中</span>
-          </div>
-          <div class="Ufii-middle-footer">意外风险覆盖全,最高100万保额</div>
-        </div>
-        <p class="user-family-insurance-item-right">开启保障</p>
-      </div>
-      <div class="user-family-insurance-item">
-        <cr-image round width="" height="" class="user-family-insurance-item-left" :src="illness" />
-        <div class="user-family-insurance-item-middle">
-          <div class="Ufii-middle-main">
-            <span class="Ufii-middle-main-title">人寿保障</span>
-            <span class="status">保障中</span>
-          </div>
-          <div class="Ufii-middle-footer">最高350万保额,顶梁柱必备</div>
+        <p
+          class="user-family-insurance-item-right"
+          v-if="!item.productNo"
+          @click.stop="go('/goods/detail', item)"
+        >
+          开启保障
+        </p>
       </div>
-        <p class="user-family-insurance-item-right">开启保障</p>
-      </div> -->
     </div>
   </div>
 </template>
 <script>
 import { mapState } from "vuex";
+import localStorage from "@/service/localStorage";
+import GOODS_LIST from "@/api/goodsList.mock";
 
 export default {
   name: "UserFamily",
@@ -96,22 +84,33 @@ export default {
   computed: {
     ...mapState("user", ["familyList"]),
     policyList() {
+      if (!localStorage.get("mongoToken")) {
+        // 未登录时返回默认徽章墙
+        const policyList = GOODS_LIST.filter(v => v.id !== "BNZJX001");
+        return policyList;
+      }
       return this.familyList[this.activeIndex]?.policyList;
     }
   },
   watch: {
     familyList() {
       this.$nextTick(() => {
-        console.log(this.familyList.length);
         const offsetWidth = document.querySelector(".user-family-info").offsetWidth;
         const scrollWidth = document.querySelector(".user-family-info").scrollWidth;
         this.isFixed = scrollWidth > offsetWidth;
-        // console.log(scrollWidth, offsetWidth, this.isFixed);
       });
     }
   },
   methods: {
-    go(path) {
+    go(path, params) {
+      if (path === "/goods/detail" && params) {
+        path = {
+          path,
+          query: { id: params.id, type: params.itype }
+        };
+      } else if (path === "/policy/detail" && params.orderNo) {
+        path = `${path}/${params.orderNo}`;
+      }
       this.$emit("go", path);
     }
   }