Merge branch 'feature/consultant' into 'master'

Feature/consultant

See merge request !30

src/api/detail.huagui.shouxian.js

@@ -4,7 +4,7 @@
  * @Description: 华贵大麦2020定期寿险
  * @Date: 2020-07-27 15:46:37
  * @LastEditors: gzw
- * @LastEditTime: 2020-08-03 15:30:14
+ * @LastEditTime: 2020-08-10 14:51:04
  */
 
 import goodsBg from "@/assets/images/goods/detail/shouxian/bg.png";
@@ -19,6 +19,8 @@ export default {
     type: "huagui",
     company: "",
     title: "大麦2020定期寿险",
+    price: [155, "元/年起"],
+    subPrice: [155, "元/年", "剩余", "(共9年)"],
     insuredNum: 0,
     stamp: false
   },
@@ -64,38 +66,31 @@ export default {
 
   ],
   insuredOptions: [
-    { label: "本人", value: "1" },
-    { label: "配偶", value: "2" },
-    { label: "父母", value: "3" },
-    { label: "子女", value: "4" }
+    { label: "本人", value: "0" },
+    { label: "配偶", value: "1" },
+    { label: "父母", value: "2" },
+    { label: "子女", value: "3" }
   ],
   medicalOptions: [
     { label: "有<small style='color: #999;font-size: 11px'>（含新农合）</small>", value: "1" },
-    { label: "无", value: "2" }
+    { label: "无", value: "0" }
   ],
   paywayOptions: [
     { label: "月缴<small style='color: #999;font-size: 11px'>（12期）</small>", value: "1" },
     { label: "一次交清", value: "2" }
   ],
-  goodActionInfo: {
-    title: ["155", "元/年起"]
-  },
-  goodBuyModalInfo: [
-    { title: "首月保费", value: `3元` },
-    { title: "次月保费", value: "5.6元/月起（共11期）" }
-  ],
   popupArray: [
     {
       title: "保险条款",
-      url: "http://mangguo-contract.qthbx.com/huatai-bao-xian-tiao-kuan-v1/"
+      url: "http://mangguo-contract.qthbx.com/hua-gui-bao-xian-tiao-kuan-v1/"
     },
     {
       title: "健康告知",
-      url: "http://mangguo-contract.qthbx.com/huatai-jian-kang-gao-zhi-v1/"
+      url: "http://mangguo-contract.qthbx.com/hua-gui-jian-kang-gao-zhi-v1/"
     },
     {
       title: "投保须知及声明",
-      url: "http://mangguo-contract.qthbx.com/huatai-toubaoxuzhi-v1/"
+      url: "http://mangguo-contract.qthbx.com/huagui-tou-bao-xu-zhi-v1/"
     },
     {
       title: "平台服务协议",
@@ -107,6 +102,10 @@ export default {
     {
       title: "自动续保服务协议",
       url: "http://mangguo-contract.qthbx.com/zi-dong-xu-bao-fu-wu-xie-yi-v1/"
+    },
+    {
+      title: "人身保险投保提示书",
+      url: "http://mangguo-contract.qthbx.com/hua-gui-ren-shen-bao-xian-tou-bao-ti-shi-shu-v1/"
     }
   ],
   caseInfo: {
@@ -170,5 +169,35 @@ export default {
       title: "理赔付款",
       desc: `保险公司结案后，转账付款完成理赔。`
     }
+  ],
+  planInfo: [
+    {
+      title: "100种重大疾病保险金",
+      desc:
+        "<p>重大疾病包括恶性肿瘤、急性心肌梗塞、终末期肾病（或称慢性肾功能衰竭尿毒症期）等100种。在等待期（90天，意外伤害事故无等待期）后初次发生并经医院专科医生确诊罹患本合同约定的一种或多种重大疾病，保险人按照保险单中约定的重大疾病保险金额给付重大疾病保险金，同时在本保险合同项下对该被保险人的保险责任终止。</p>",
+      url: "查看100种重大疾病",
+      path: "http://mangguo-contract.qthbx.com/hua-tai-100chong-zhong-ji-v1/",
+      list: ""
+    },
+    {
+      title: "40种轻症疾病保险金",
+      desc:
+        "<p>轻症疾病包括冠状动脉介入手术、非危及生命的（极早期的）恶性病变、轻度中风后遗症等40种。在等待期（90天，意外伤害事故无等待期）后初次发生并经医院专科医生确诊罹患本合同约定的一种或多种轻症。保险人按照保险合同中约定的轻症保险金额给付轻症保险金，同时轻症责任终止。轻症保险金仅针对本保险合同约定的轻症进行给付，轻症疾病必须在生前诊断，对于任何身故后的尸检诊断不给付轻症疾病保险金。对于已经符合重大疾病保险金给付条件的，仅给付重大疾病保险金，不再给付轻症保险金。</p>",
+      url: "查看40种轻症疾病",
+      path: "http://mangguo-contract.qthbx.com/hua-tai-100chong-qing-zheng-v1/",
+      list: ""
+    },
+    {
+      title: "保额说明",
+      desc: `
+          <p><strong>重疾30万保额：</strong></p>
+          <p>30天~50周岁可投保，可逐年续保至99周岁。</p>
+          <p><strong>重疾20万保额：</strong></p>
+          <p>30天~60周岁可投保，可逐年续保至99周岁。</p>
+          <p><strong>重疾10万保额：</strong></p>
+          <p>
+          30天~60周岁可投保，可逐年续保至99周岁。</p>
+      `
+    }
   ]
 };

src/api/detail.huatai.zhongjixian.js

@@ -4,7 +4,7 @@
  * @Description:华太30万轻重疾险
  * @Date: 2020-07-27 15:46:37
  * @LastEditors: gzw
- * @LastEditTime: 2020-07-29 19:56:56
+ * @LastEditTime: 2020-08-07 16:06:43
  */
 
 import goodsBg from "@/assets/images/goods/detail/zhongjixian/bg.png";
@@ -21,7 +21,8 @@ export default {
     company: "华泰财险",
     title: "30万重疾轻症保障",
     sub: "100种重症+40种轻症确诊即赔",
-    price: "首月<strong>3</strong>元<small>次月5.6元/月起</small>",
+    price: [3, "元", "首月"],
+    subPrice: [5.6, "元/月起", "次月", "（共11期）"],
     insuredNum: 0,
     stamp: true
   },
@@ -54,19 +55,19 @@ export default {
     }
   ],
   planCellInfo: {
-    "3": [
+    "300000": [
       { title: "100种重大疾病医疗保险金", value: "30万" },
       { title: "40种轻症保险金", value: "6万" },
       { title: "投保年龄", value: "30天~50周岁" },
       { title: "保险期限", value: "1年" }
     ],
-    "2": [
+    "200000": [
       { title: "100种重大疾病医疗保险金", value: "20万" },
       { title: "40种轻症保险金", value: "4万" },
       { title: "投保年龄", value: "30天~60周岁" },
       { title: "保险期限", value: "1年" }
     ],
-    "1": [
+    "100000": [
       { title: "100种重大疾病医疗保险金", value: "10万" },
       { title: "40种轻症保险金", value: "2万" },
       { title: "投保年龄", value: "30天~60周岁" },
@@ -75,30 +76,22 @@ export default {
   },
   planTipOptions: ["轻症赔付后，重疾保障继续有效", "可逐年续保至99岁"],
   planOptions: [
-    { label: "30万", value: "3" },
-    { label: "20万", value: "2" },
-    { label: "10万", value: "1" }
+    { label: "30万", value: "300000" },
+    { label: "20万", value: "200000" },
+    { label: "10万", value: "100000" }
   ],
   insuredOptions: [
-    { label: "本人", value: "1" },
-    { label: "配偶", value: "2" },
-    { label: "父母", value: "3" },
-    { label: "子女", value: "4" }
+    { label: "本人", value: "0" },
+    { label: "配偶", value: "1" },
+    { label: "父母", value: "2" },
+    { label: "子女", value: "3" }
   ],
   paywayOptions: [
     { label: "月缴<small style='color: #999;font-size: 11px'>（12期）</small>", value: "1" },
     { label: "一次交清", value: "2" }
   ],
-  goodActionInfo: {
-    title: ["3", "元", "首月"],
-    sub: "次月5.6元/月起"
-  },
-  goodBuyModalInfo: [
-    { title: "首月保费", value: `3元` },
-    { title: "次月保费", value: "5.6元/月起（共11期）" }
-  ],
   noticeCellInfo: {
-    "3": [
+    "300000": [
       { title: "投保年龄", value: `30天~50周岁` },
       { title: "保障期限", value: "1年（可续保至99周岁）" },
       { title: "等待期", value: "90天" },
@@ -111,7 +104,7 @@ export default {
         }
       }
     ],
-    "2": [
+    "200000": [
       { title: "投保年龄", value: `30天~60周岁` },
       { title: "保障期限", value: "1年（可续保至99周岁）" },
       { title: "等待期", value: "90天" },
@@ -124,7 +117,7 @@ export default {
         }
       }
     ],
-    "1": [
+    "100000": [
       { title: "投保年龄", value: `30天~60周岁` },
       { title: "保障期限", value: "1年（可续保至99周岁）" },
       { title: "等待期", value: "90天" },

src/api/detail.taikang.yiliaobaozhang.js

@@ -4,7 +4,7 @@
  * @Description: 泰康600万医疗保障
  * @Date: 2020-07-27 15:46:37
  * @LastEditors: gzw
- * @LastEditTime: 2020-08-03 15:11:55
+ * @LastEditTime: 2020-08-07 15:20:37
  */
 
 import goodsBg from "@/assets/images/goods/detail/yiliaoxian/bg.png";
@@ -21,7 +21,8 @@ export default {
     company: "泰康在线",
     title: "1000万医疗保障",
     sub: "责任内100%报销住院医疗费",
-    price: "首月<strong>1</strong>元<small>次月3.6元/月起</small>",
+    price: [1, "元", "首月"],
+    subPrice: [3.6, "元/月起", "次月", "（共11期）"],
     insuredNum: 0,
     stamp: true
   },
@@ -65,27 +66,19 @@ export default {
   ],
   planTipOptions: ["不限社保", "报销自费药", "额外400万特定赔付"],
   insuredOptions: [
-    { label: "本人", value: "1" },
-    { label: "配偶", value: "2" },
-    { label: "父母", value: "3" },
-    { label: "子女", value: "4" }
+    { label: "本人", value: "0" },
+    { label: "配偶", value: "1" },
+    { label: "父母", value: "2" },
+    { label: "子女", value: "3" }
   ],
   medicalOptions: [
     { label: "有<small style='color: #999;font-size: 11px'>（含新农合）</small>", value: "1" },
-    { label: "无", value: "2" }
+    { label: "无", value: "0" }
   ],
   paywayOptions: [
     { label: "月缴<small style='color: #999;font-size: 11px'>（12期）</small>", value: "1" },
     { label: "一次交清", value: "2" }
   ],
-  goodActionInfo: {
-    title: ["3", "元", "首月"],
-    sub: "次月5.6元/月起"
-  },
-  goodBuyModalInfo: [
-    { title: "首月保费", value: `1元` },
-    { title: "次月保费", value: "3.6元/月起（共11期）" }
-  ],
   noticeCellInfo: [
     { title: "投保年龄", value: `30~65周岁` },
     { title: "保障期限", value: "1年（可续保至99周岁）" },
@@ -94,8 +87,7 @@ export default {
       title: "保费",
       value: {
         needSlot: true,
-        tpl: "保费于被保人年龄、有无社保有关<br />首月1元，次月3.6元/月起",
-        longTxt: true
+        tpl: "保费于被保人年龄、有无社保有关<br />首月1元，次月3.6元/月起"
       }
     }
   ],

src/api/detail.zhongan.yiwai.js

@@ -4,7 +4,7 @@
  * @Description:众安50万意外险
  * @Date: 2020-07-27 15:46:37
  * @LastEditors: gzw
- * @LastEditTime: 2020-08-03 14:33:37
+ * @LastEditTime: 2020-08-10 14:59:04
  */
 
 import goodsBg from "@/assets/images/goods/detail/yiwaixian/bg.png";
@@ -21,7 +21,7 @@ export default {
     company: "众安保险",
     title: "100万意外保障",
     sub: "最高可赔400万 包含猝死责任",
-    price: "<strong>53</strong>元/年起",
+    price: [53, "元/年起"],
     insuredNum: 0,
     stamp: true
   },
@@ -55,7 +55,7 @@ export default {
     }
   ],
   planCellInfo: {
-    "10": [
+    "1000000": [
       { title: "意外身故", value: "100万" },
       { title: "意外伤残", value: "100万" },
       { title: "意外医疗", value: "10万" },
@@ -67,7 +67,7 @@ export default {
       { title: "火车意外", value: "100万" },
       { title: "轮船意外", value: "100万" }
     ],
-    "5": [
+    "500000": [
       { title: "意外身故", value: "50万" },
       { title: "意外伤残", value: "50万" },
       { title: "意外医疗", value: "5万" },
@@ -79,7 +79,7 @@ export default {
       { title: "火车意外", value: "50万" },
       { title: "轮船意外", value: "50万" }
     ],
-    "1": [
+    "100000": [
       { title: "意外身故", value: "10万" },
       { title: "意外伤残", value: "10万" },
       { title: "意外医疗", value: "5000" },
@@ -94,38 +94,28 @@ export default {
   },
   planTipOptions: ["10天内全额退保", "在线理赔", "最高可赔400万"],
   planOptions: [
-    { label: "100万", value: "10" },
-    { label: "50万", value: "5" },
-    { label: "10万", value: "1" }
+    { label: "100万", value: "1000000" },
+    { label: "50万", value: "500000" },
+    { label: "10万", value: "100000" }
   ],
   insuredOptions: [
-    { label: "本人", value: "1" },
-    { label: "配偶", value: "2" },
-    { label: "父母", value: "3" },
-    { label: "子女", value: "4" }
-  ],
-  paywayOptions: [
-    { label: "月缴<small style='color: #999;font-size: 11px'>（12期）</small>", value: "1" },
-    { label: "一次交清", value: "2" }
-  ],
-  goodActionInfo: {
-    title: ["53", "元/年", ""]
-  },
-  goodBuyModalInfo: [
-    { title: "每年保费", value: `350元` }
+    { label: "本人", value: "0" },
+    { label: "配偶", value: "1" },
+    { label: "父母", value: "2" },
+    { label: "子女", value: "3" }
   ],
   noticeCellInfo: {
-    "10": [
+    "1000000": [
       { title: "投保年龄", value: `18周岁~65周岁` },
       { title: "保障期限", value: "1年" },
       { title: "保费", value: "53元/年起" }
     ],
-    "5": [
+    "500000": [
       { title: "投保年龄", value: `18周岁~65周岁` },
       { title: "保障期限", value: "1年" },
       { title: "保费", value: "53元/年起" }
     ],
-    "1": [
+    "100000": [
       { title: "投保年龄", value: `18周岁~65周岁` },
       { title: "保障期限", value: "1年" },
       { title: "保费", value: "53元/年起" }
@@ -139,7 +129,7 @@ export default {
   popupArray: [
     {
       title: "保险条款",
-      url: "http://mangguo-contract.qthbx.com/huatai-bao-xian-tiao-kuan-v1/"
+      url: "http://mangguo-contract.qthbx.com/zhong-an-baoxiantiaokuan-v1/"
     },
     {
       title: "健康告知",
@@ -147,7 +137,7 @@ export default {
     },
     {
       title: "投保须知及声明",
-      url: "http://mangguo-contract.qthbx.com/huatai-toubaoxuzhi-v1/"
+      url: "http://mangguo-contract.qthbx.com/zhong-an-tou-bao-xu-zhi-v1/"
     },
     {
       title: "平台服务协议",

src/api/goodsList.mock.js

@@ -13,15 +13,15 @@ import life from "@/assets/images/user/life@2x.png";
 
 export default [
   {
-    id: 1,
-    itype: "mi",
+    id: "TKYLX001",
+    itype: "mi", // 保险类型，英文收字母缩写，详情需要传
     scope: [1, 2, 3], // 范围，列表中区分类型用，1成人 2老年 3少儿
     img: good01,
     title: "万家保·百万医疗险",
-    sub: "产品优势",
+    sub: "看病报销医药费，最高600万",
     glory: "好评榜第1名",
-    price: "0",
-    unit: "",
+    price: "1",
+    unit: "首月",
     allow: true,
     termType: "short",
     icon_closed: medical_closed,
@@ -30,7 +30,7 @@ export default [
     guarantee_sub: "看病报销医药费,最高600万"
   },
   {
-    id: 2,
+    id: "HTDQZJX001",
     itype: "cii",
     scope: [1, 2, 3],
     img: good02,
@@ -47,15 +47,16 @@ export default [
     guarantee_sub: "100种重症+40种轻症"
   },
   {
-    id: 3,
+    id: "BNZJX001",
     itype: "cii",
-    scope: [1, 2],
+    scope: [1, 3],
     img: good02,
-    title: "康惠保2020终身重疾险",
-    sub: "100种重疾+40种轻症",
+    url: "http://www.baidu.com",
+    title: "百年康惠保(2.0)重大疾病险",
+    sub: "终身保障155种重疾，最多赔付6次",
     glory: "",
-    price: "3",
-    unit: "首月",
+    price: "256",
+    unit: "年起",
     allow: true,
     termType: "long",
     icon_closed: illness_closed,
@@ -64,15 +65,15 @@ export default [
     guarantee_sub: "100种重症+40种轻症"
   },
   {
-    id: 4,
+    id: "ZAYWX001",
     itype: "ai",
     scope: [1, 2, 3],
     img: good03,
     title: "万家保·综合意外险",
-    sub: "产品优势",
+    sub: "意外风险覆盖全，最高100万保额",
     glory: "开车必备",
-    price: "0",
-    unit: "",
+    price: "145",
+    unit: "年起",
     allow: true,
     termType: "short",
     icon_closed: casualty_closed,
@@ -81,15 +82,15 @@ export default [
     guarantee_sub: "意外风险覆盖全,最高100万保额"
   },
   {
-    id: 5,
+    id: "HGSX001",
     itype: "li",
-    scope: [1, 3],
+    scope: [1, 2],
     img: good04,
     title: "华贵大麦2020定期寿险",
-    sub: "产品优势",
-    glory: "",
-    price: "0",
-    unit: "",
+    sub: "最高350万保额，顶梁柱必备",
+    glory: "顶梁柱必备",
+    price: "15.5",
+    unit: "年起",
     allow: true,
     termType: "long",
     icon_closed: life_closed,

src/api/product.js

@@ -6,7 +6,7 @@ export const list = param => {
 };
 
 // 产品详情
-export const addPolicyDetail = param => {
+export const detail = param => {
   return req.get("product/detail", param);
 };
 

src/assets/icons/svg/less.svg

+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg class="icon" width="32px" height="32.00px" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"><path fill="#787eff" d="M117.734106 458.213254 906.212134 458.213254C925.995765 458.213254 959.972 482.279754 959.972 511.97312 959.972 541.666486 925.995765 565.732986 906.212134 565.732986L117.734106 565.732986C97.950475 565.732986 63.97424 541.666486 63.97424 511.97312 63.97424 482.279754 97.950475 458.213254 117.734106 458.213254Z" /></svg>
\ No newline at end of file

src/assets/icons/svg/plus.svg

+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg class="icon" width="32px" height="32.00px" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"><path fill="#787eff" d="M451.76 451.76V60.24a60.24 60.24 0 0 1 120.48 0v391.52h391.52a60.24 60.24 0 0 1 0 120.48h-391.52v391.52a60.24 60.24 0 0 1-120.48 0v-391.52H60.24a60.24 60.24 0 0 1 0-120.48h391.52z" /></svg>
\ No newline at end of file

src/components/AuthFromXyqb.vue

@@ -38,7 +38,19 @@ export default {
   data() {
     return {
       showAuth: true,
-      userInfo: [
+      userInfo: []
+    };
+  },
+  watch: {
+    showAuthXyqb: {
+      immediate: true,
+      handler(val) {
+        this.showAuth = val === 2;
+      }
+    }
+  },
+  created() {
+    this.userInfo = [
       {
         label: "手机号码",
         value: xyqbUserInfo.phoneNoMask
@@ -51,16 +63,7 @@ export default {
         label: "身份证号码",
         value: xyqbUserInfo.idNoMask
       }
-      ]
-    };
-  },
-  watch: {
-    showAuthXyqb: {
-      immediate: true,
-      handler(val) {
-        this.showAuth = val === 2;
-      }
-    }
+    ];
   },
   computed: {
     ...mapState(["showAuthXyqb"])

src/components/CompactCellGroup.vue

@@ -13,7 +13,6 @@
       :value="item.value.tpl || item.value"
       :class="{
         'compact-cell': 1,
-        'compact-cell_br': item.value.longTxt,
         'compact-cell_divider': item.divider,
         'compact-cell_inline': item.inline
       }"

src/components/GoodAction.vue

@@ -13,7 +13,11 @@
           <strong>{{ content.title[0] || "" }}</strong>
           {{ content.title[1] || "" }}
         </h6>
-        <small v-if="content.sub">{{ content.sub }}</small>
+        <small v-if="content.sub">
+          {{ content.sub[2] || "" }}
+          {{ content.sub[0] || "" }}
+          {{ content.sub[1] || "" }}
+        </small>
       </slot>
     </div>
     <div class="good-action-right">

src/components/GoodList/index.vue

 <template>
   <div class="goods-list">
     <div v-if="hasChildren">
-      <template v-for="(item, index) in goodsList">
-        <div class="goods-list-head" :key="'head' + index">
+      <template v-for="(item, index) in list">
+        <div class="goods-list-head" :key="'head' + index" v-if="item.children.length > 0">
           <slot :data="item">
             <h5>{{ item.title || "-" }}</h5>
             <small>
@@ -44,7 +44,7 @@
         type="flex"
         class="goods-list-item"
         :class="{ 'not-allow': !it.allow }"
-        v-for="(it, idx) in goodsList"
+        v-for="(it, idx) in list"
         :key="idx"
         @click.native="clickItem(it)"
       >
@@ -80,28 +80,12 @@ export default {
       default() {
         return [];
       }
-    },
-    sort: {
-      type: Number,
-      default: 0
     }
   },
   computed: {
     // TODO
     hasChildren: function() {
       return this.list[0] && this.list[0].children && this.list[0].children.length > 0;
-    },
-    goodsList() {
-      const { sort, list, hasChildren } = this;
-      if (sort === 0) {
-        return list;
-      } else {
-        if (hasChildren) {
-          return list;
-        } else {
-          return list.filter(item => item.scope.includes(sort));
-        }
-      }
     }
   },
   methods: {
@@ -109,7 +93,15 @@ export default {
       if (!item.allow) {
         return;
       }
-      this.$router.push({ path: "/goods/detail", query: { id: item.id, type: item.itype } });
+      if (item.url) {
+        window.location.href = item.url;
+      } else {
+        const { id, itype } = item;
+        this.$router.push({
+          path: "/goods/detail",
+          query: { id, type: itype }
+        });
+      }
     }
   }
 };

src/components/PopupDatePicker.vue

@@ -39,6 +39,9 @@ export default {
     height: 24px;
     color: #333;
     font-size: 14px;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
   }
   .svg-icon {
     height: 16px;

src/components/PopupPicker.vue

@@ -40,6 +40,9 @@ export default {
     height: 24px;
     color: #333;
     font-size: 14px;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
   }
   .svg-icon {
     height: 16px;

src/components/PopupWithIframe.vue

@@ -119,10 +119,10 @@ export default {
     overflow: scroll;
     -webkit-overflow-scrolling: touch;
     &-wrap {
-      position: fixed;
-      bottom: 0;
-      left: 0;
-      z-index: 201;
+      // position: fixed;
+      // bottom: 0;
+      // left: 0;
+      // z-index: 201;
       height: 80vh;
       overflow: scroll;
       width: 100vw;

src/components/Stepper.vue

+<template>
+  <div class="stepper">
+    <button type="button" class="stepper-btn decrease" @click="optionClick('decrease')">
+      <slot name="decrease">
+        <svg-icon icon-class="less" />
+      </slot>
+    </button>
+    <div class="stepper-lebel">{{ currentLabel }}</div>
+    <button type="button" class="stepper-btn increase" @click="optionClick('increase')">
+      <slot name="increase">
+        <svg-icon icon-class="plus" />
+      </slot>
+    </button>
+  </div>
+</template>
+
+<script>
+/**
+ * @description: 面板组件
+ * @param {type}
+ * @return:
+ */
+const OPTION_CLICK_EVENT = "click";
+const CHANGE_EVENT = "input";
+export default {
+  name: "Stepper",
+  props: {
+    value: {
+      type: String,
+      default: ""
+    },
+    option: {
+      type: Array,
+      default() {
+        return [];
+      }
+    }
+    // increase: {
+    //   txt: "",
+    //   icon: ""
+    // },
+    // decrease: {
+    //   txt: "",
+    //   icon: ""
+    // }
+  },
+  watch: {
+    value: {
+      immediate: true,
+      handler(val) {
+        this.current = val ? this.option.findIndex(item => item.value === val) : 0;
+      }
+    },
+    current(val) {
+      this.$emit(CHANGE_EVENT, this.option[val].value);
+    }
+  },
+  computed: {
+    currentLabel() {
+      return this.option[this.current].label;
+    }
+  },
+  data() {
+    return {
+      current: ""
+    };
+  },
+  methods: {
+    optionClick(type, index) {
+      const { option, current } = this;
+      if (type === "increase" && current < option.length - 1) {
+        this.current = current + 1;
+      }
+      if (type === "decrease" && current > 0) {
+        this.current = current - 1;
+      }
+      this.$emit(OPTION_CLICK_EVENT, { type, index, value: option[current] });
+    }
+  }
+};
+</script>
+
+<style lang="less" scoped>
+@import "../style/var.less";
+.stepper {
+  display: flex;
+  align-items: center;
+  border-radius: 8px;
+  border: 1px solid #ccc;
+  &-btn {
+    background-color: #f4f5ff;
+    color: #787eff;
+    text-align: center;
+    border: 0;
+    outline: none;
+    height: 24px;
+    .svg-icon {
+      vertical-align: -1px;
+      width: 10px;
+      height: 10px;
+    }
+    &.decrease {
+      border-top-left-radius: 8px;
+      border-bottom-left-radius: 8px;
+    }
+    &.increase {
+      border-top-right-radius: 8px;
+      border-bottom-right-radius: 8px;
+    }
+  }
+  &-lebel {
+    color: #aaa;
+    font-size: 14px;
+    height: 24px;
+    line-height: 24px;
+    padding: 0 10px;
+  }
+}
+</style>

src/config/dev.config.js

 export default {
   basicHost: "http://yapi.quantgroups.com/mock/329/",
-  // basicHost: "http://192.168.29.211:80/",
+  // basicHost: "http://192.168.29.100:8964/",
   wxAppId: "wx514de17b23d53a20"
 };

src/store/modules/user.js

 import GOODS_LIST from "@/api/goodsList.mock";
 import { getUserInfo, getFamilyList } from "@/api/user";
 import { getPolicyList } from "@/api/policy";
+import _ from "lodash";
 
 const CONSTANT = {
   avatar: {
@@ -45,32 +46,32 @@ export default {
     }
   },
   actions: {
-    async setFamilyList({ commit }) {
+    async setFamilyList({ commit }, policyList) {
       let familyList = await getFamilyList();
-      const policyList = await getPolicyList();
-
-      familyList = familyList.concat(familyList);
+      if (!policyList) {
+        policyList = await getPolicyList();
+      }
+      let goodsMap = _.groupBy(GOODS_LIST, "itype");
 
       // todo 家人保单列表筛选
       const result = familyList.map(family => ({
         ...family,
         avatar: +family.gender === 0 ? CONSTANT.avatar.man : CONSTANT.avatar.woman,
-        relation: getReletion(family.relation, family.gender),
-        policyList: GOODS_LIST.map(goods => {
-          // todo 家人保单列表推荐
-          const filterPolicyList = policyList
-            .map(policy => {
-              const goodsChild = goods.children.find(child => child.id === +policy.productNo) || {};
-              return {
-                ...policy,
-                ...goodsChild
-              };
-            })
-            .filter(policy => policy.insuredUserSecId === family.userInfoSecId && policy.id)
+        appellation: getReletion(family.relation, family.gender),
+        policyList: _.values(
+          _.mapValues(goodsMap, goodsList => {
+            const policyListFilted = policyList
+              .filter(
+                policy =>
+                  _.some(goodsList, { id: +policy.productNo }) &&
+                  +family.userInfoSecId === +policy.insuredUserSecId
+              )
+              .map(policy => ({ ...policy, ..._.find(goodsList, { id: +policy.productNo }) }))
               .sort((a, b) => a.termType > b.termType);
 
-          return filterPolicyList?.[0] || goods.children[0];
+            return policyListFilted?.[0] || goodsList[0];
           })
+        )
       }));
       commit("setFamilyList", result);
     },

src/views/Consultant/index.vue

@@ -13,7 +13,6 @@
 
 <script>
 import Tabbar from "@/components/Tabbar";
-
 import Buy from "./Buy";
 import Success from "./Success";
 import Question from "./Question";

src/views/Goods/Detail/AIDetail.vue

 <template>
-  <div class="container">
+  <cr-form scroll-to-error @submit="onSubmit" @failed="onFailed" class="container">
     <nav-tab :nav-list="navBarOptions" />
-    <detail-header @click="goInsureState = true" :det="headerInfo" />
+    <detail-header :det="headerInfo" />
     <div class="det-body">
       <card title="保险计划" :option="['查看详情']" @option-click="openIframePupop(4)">
-        <cr-radio-btn v-model="formData.planValue" :radio-data="planOptions" />
+        <cr-radio-btn v-model="formData.amountInsured" :radio-data="planOptions" />
         <compactCellGroup :cell-data="planCellData" :text-bold="true" />
         <plan-tip :tip-list="planTipOptions" />
       </card>
       <div id="det_insure">
         <insure-person-form v-model="formData" :radio-options="personFormOptions" />
         <auto-deduct
-          v-model="formData.auto"
+          v-model="formData.autoRenewPolicy"
           :cell-data="autoCellInfo"
           @cell-click="openIframePupop"
         />
         <protocol-read
-          v-model="formData.pact"
+          v-model="formData.read"
           :cell-data="noticeCellData"
           :protocol-data="protocolData"
           @cell-click="openIframePupop"
@@ -53,9 +53,11 @@
       v-model="goInsureState"
       :title="headerInfo.title"
       :pay-data="goodBuyModalInfo"
+      @confirm="nextStep"
+      @read-protocol="openIframePupop"
       :protocol-data="protocolData"
     />
-  </div>
+  </cr-form>
 </template>
 
 <script>
@@ -83,11 +85,14 @@ import InsurePersonForm from "./modules/InsurePersonForm";
 import AutoDeduct from "./modules/AutoDeduct";
 import ProtocolRead from "./modules/ProtocolRead";
 import NavTab from "./modules/NavTab";
+import detailPayMixin from "./modules/detailPay.mixin";
 
 import Detail from "@/api/detail.zhongan.yiwai";
+import { trail, list } from "@/api/product";
 
 export default {
-  name: "GoodsDetail-CII",
+  name: "GoodsDetail-AI",
+  mixins: [detailPayMixin],
   components: {
     DetailHeader,
     DetailFooter,
@@ -114,19 +119,50 @@ export default {
   data() {
     return {
       ...Detail,
+      goodId: "",
+      goodActionInfo: {},
+      goodBuyModalInfo: [],
       popupShow: false,
       currentPupopIndex: null,
+      calTimer: null,
       formData: {
-        planValue: "5",
-        insured: "1",
-        payway: "1",
-        auto: false,
-        pact: false
-      },
-      goInsureState: false,
-      showLayer: false
+        name: "",
+        idNo: "",
+        socialSecurity: "1",
+        relation: "0",
+        payType: "1",
+        amountInsured: "1000000",
+        autoRenewPolicy: false,
+        read: true
+      },
+      goInsureState: false
     };
   },
+  watch: {
+    headerInfo: {
+      deep: true,
+      immediate: true,
+      handler(val) {
+        const { price } = val;
+        this.goodActionInfo = { title: price };
+        this.goodBuyModalInfo = [{ title: `每年保费`, value: `${price[0]}元` }];
+      }
+    },
+    formDataCpu: {
+      deep: true,
+      handler(val, oldVal) {
+        if (this.calTimer) {
+          clearTimeout(this.calTimer);
+        }
+        const { idNo } = val;
+        const { idNo: oldNo } = oldVal;
+        if (idNo === oldNo) return;
+        this.calTimer = setTimeout(() => {
+          this.calFee();
+        }, 600);
+      }
+    }
+  },
   computed: {
     pupopData() {
       const { popupArray, currentPupopIndex } = this;
@@ -134,13 +170,13 @@ export default {
     },
     planCellData() {
       const { planCellInfo } = this;
-      const { planValue } = this.formData;
-      return planCellInfo[planValue];
+      const { amountInsured } = this.formData;
+      return planCellInfo[amountInsured];
     },
     noticeCellData() {
       const { noticeCellInfo } = this;
-      const { planValue } = this.formData;
-      return noticeCellInfo[planValue];
+      const { amountInsured } = this.formData;
+      return noticeCellInfo[amountInsured];
     },
     personFormOptions() {
       const { insuredOptions, paywayOptions } = this;
@@ -148,8 +184,14 @@ export default {
         insuredOptions,
         paywayOptions
       };
+    },
+    formDataCpu() {
+      return JSON.parse(JSON.stringify(this.formData));
     }
   },
+  mounted() {
+    this.getDetail();
+  },
   methods: {
     openIframePupop(index) {
       if (index === 4) {
@@ -158,6 +200,60 @@ export default {
       }
       this.currentPupopIndex = index;
       this.popupShow = true;
+    },
+    onSubmit() {
+      this.goInsureState = true;
+      sessionStorage.setItem(
+        "policyFormData",
+        JSON.stringify(Object.assign(this.formData, { productNo: this.goodId }))
+      );
+    },
+    onFailed(errorInfo) {
+      const { errors } = errorInfo;
+      this.$notify({ type: "warning", message: errors[0].message });
+    },
+    nextStep() {
+      this.generateFormData();
+      this.generateOrder();
+    },
+    generateFormData() {
+      this.subFromData = {};
+    },
+    async getDetail() {
+      this.goodId = this.$route.query.id;
+      const res = await list();
+      if (res) {
+        res.forEach(item => {
+          if (item.productNo === this.goodId) {
+            this.headerInfo.price[0] = item.downPayPrice;
+            this.headerInfo.insuredNum = item.sellCount;
+          }
+        });
+      }
+    },
+    async calFee() {
+      let { price } = this.headerInfo;
+      const { idNo, amountInsured } = this.formData;
+      if (!idNo || !amountInsured) return;
+      const _param = {
+        productNo: this.goodId,
+        productUserInfo: {
+          userInfo: {
+            idNo
+          },
+          productItem: {
+            amountInsured
+          }
+        }
+      };
+      const res = await trail(_param);
+      if (res) {
+        price[0] = res.downPayPrice;
+        this.goodActionInfo = {
+          title: price
+        };
+        this.goodBuyModalInfo = [{ title: `每年保费`, value: `${price[0]}元` }];
+      }
     }
   }
 };

src/views/Goods/Detail/CIIDetail.vue

 <template>
   <cr-form scroll-to-error @submit="onSubmit" @failed="onFailed" class="container">
     <nav-tab :nav-list="navBarOptions" />
-    <detail-header @click="goInsureState = true" :det="headerInfo" />
+    <detail-header :det="headerInfo" />
     <div class="det-body">
       <card title="保险计划" :option="['查看详情']" @option-click="openIframePupop(4)">
-        <cr-radio-btn v-model="formData.planValue" :radio-data="planOptions" />
+        <cr-radio-btn v-model="formData.amountInsured" :radio-data="planOptions" />
         <compactCellGroup :cell-data="planCellData" :text-bold="true" />
         <plan-tip :tip-list="planTipOptions" />
       </card>
       <div id="det_insure">
         <insure-person-form v-model="formData" :radio-options="personFormOptions" />
         <auto-deduct
-          v-model="formData.auto"
+          v-model="formData.autoRenewPolicy"
           :cell-data="autoCellInfo"
           @cell-click="openIframePupop"
         />
         <protocol-read
-          v-model="formData.pact"
+          v-model="formData.read"
           :cell-data="noticeCellData"
           @cell-click="openIframePupop"
         />
@@ -52,6 +52,8 @@
       v-model="goInsureState"
       :title="headerInfo.title"
       :pay-data="goodBuyModalInfo"
+      @confirm="nextStep"
+      @read-protocol="openIframePupop"
     />
   </cr-form>
 </template>
@@ -83,6 +85,7 @@ import ProtocolRead from "./modules/ProtocolRead";
 import NavTab from "./modules/NavTab";
 
 import Detail from "@/api/detail.huatai.zhongjixian";
+import { trail, list } from "@/api/product";
 
 export default {
   name: "GoodsDetail-CII",
@@ -112,18 +115,55 @@ export default {
   data() {
     return {
       ...Detail,
+      goodId: "",
+      calTimer: null,
+      goodActionInfo: {},
+      goodBuyModalInfo: [],
       popupShow: false,
       currentPupopIndex: null,
       formData: {
-        planValue: "3",
-        insured: "1",
-        payway: "1",
-        auto: false,
-        pact: false
-      },
-      goInsureState: false,
-      showLayer: false
+        name: "",
+        idNo: "",
+        socialSecurity: "1",
+        relation: "0",
+        payType: "1",
+        amountInsured: "300000",
+        autoRenewPolicy: false,
+        read: true
+      },
+      goInsureState: false
+    };
+  },
+  watch: {
+    headerInfo: {
+      deep: true,
+      immediate: true,
+      handler(val) {
+        const { price, subPrice } = val;
+        this.goodActionInfo = {
+          title: price,
+          sub: subPrice
         };
+        this.goodBuyModalInfo = [
+          { title: `${price[2]}保费`, value: `${price[0]}${price[1]}` },
+          { title: `${subPrice[2]}保费`, value: `${subPrice[0]}${subPrice[1]}${subPrice[3]}` }
+        ];
+      }
+    },
+    formDataCpu: {
+      deep: true,
+      handler(val, oldVal) {
+        if (this.calTimer) {
+          clearTimeout(this.calTimer);
+        }
+        const { idNo, payType } = val;
+        const { idNo: oldNo, payType: oldType } = oldVal;
+        if (idNo === oldNo && payType === oldType) return;
+        this.calTimer = setTimeout(() => {
+          this.calFee();
+        }, 600);
+      }
+    }
   },
   computed: {
     pupopData() {
@@ -132,13 +172,13 @@ export default {
     },
     planCellData() {
       const { planCellInfo } = this;
-      const { planValue } = this.formData;
-      return planCellInfo[planValue];
+      const { amountInsured } = this.formData;
+      return planCellInfo[amountInsured];
     },
     noticeCellData() {
       const { noticeCellInfo } = this;
-      const { planValue } = this.formData;
-      return noticeCellInfo[planValue];
+      const { amountInsured } = this.formData;
+      return noticeCellInfo[amountInsured];
     },
     personFormOptions() {
       const { insuredOptions, paywayOptions } = this;
@@ -146,8 +186,14 @@ export default {
         insuredOptions,
         paywayOptions
       };
+    },
+    formDataCpu() {
+      return JSON.parse(JSON.stringify(this.formData));
     }
   },
+  mounted() {
+    this.getDetail();
+  },
   methods: {
     openIframePupop(index) {
       if (index === 4) {
@@ -157,13 +203,65 @@ export default {
       this.currentPupopIndex = index;
       this.popupShow = true;
     },
-    onSubmit(values) {
-      console.log("submit", values);
+    onSubmit() {
+      this.goInsureState = true;
+      sessionStorage.setItem(
+        "policyFormData",
+        JSON.stringify(Object.assign(this.formData, { productNo: this.goodId }))
+      );
     },
     onFailed(errorInfo) {
       const { errors } = errorInfo;
       this.$notify({ type: "warning", message: errors[0].message });
-      this.goInsureState = true;
+    },
+    nextStep() {
+      this.$router.push("/goods/inform");
+    },
+    async getDetail() {
+      this.goodId = this.$route.query.id;
+      const res = await list();
+      if (res) {
+        res.forEach(item => {
+          if (item.productNo === this.goodId) {
+            this.headerInfo.price[0] = item.downPayPrice;
+            this.headerInfo.subPrice[0] = item.regularPrice;
+            this.headerInfo.insuredNum = item.sellCount;
+          }
+        });
+      }
+    },
+    async calFee() {
+      let { price, subPrice } = this.headerInfo;
+      const { idNo, socialSecurity, payType, amountInsured, userInfoSecId } = this.formData;
+      if (!idNo || !socialSecurity || !payType) return;
+      const _param = {
+        productNo: this.goodId,
+        productUserInfo: {
+          userInfo: {
+            idNo,
+            socialSecurity: !!Number(socialSecurity),
+            userInfoSecId: userInfoSecId ?? null
+          },
+          productItem: {
+            payType,
+            amountInsured
+          }
+        }
+      };
+
+      const res = await trail(_param);
+      if (res) {
+        price[0] = res.downPayPrice;
+        subPrice[0] = res.regularPrice;
+        this.goodActionInfo = {
+          title: price,
+          sub: subPrice
+        };
+        this.goodBuyModalInfo = [
+          { title: `${price[2]}保费`, value: `${price[0]}${price[1]}` },
+          { title: `${subPrice[2]}保费`, value: `${subPrice[0]}${subPrice[1]}${subPrice[3]}` }
+        ];
+      }
     }
   }
 };

src/views/Goods/Detail/LIDetail.vue

 <template>
-  <div class="container">
+  <cr-form scroll-to-error @submit="onSubmit" @failed="onFailed" class="container">
     <nav-tab :nav-list="navBarOptions" />
-    <detail-header @click="goInsureState = true" :det="headerInfo">
+    <detail-header :det="headerInfo">
       <div class="li-header">
         <plan-tip :tip-list="planTipOptions" />
         <cr-divider :hairline="false" :style="{ color: '#ECE9E9' }" />
@@ -21,7 +21,9 @@
         <compactCellGroup :cell-data="planCellInfo" :text-bold="true" />
         <div class="cal-footer" slot="footer">
           <div class="cal-footer-num">
-            <h4>155<small>元/年起</small></h4>
+            <h4>
+              {{ headerInfo.price[0] }}<small>{{ headerInfo.price[1] }}</small>
+            </h4>
           </div>
           <cr-button type="warning" @click="openIframePupop(6)">算一算保费</cr-button>
         </div>
@@ -44,7 +46,7 @@
           title="理赔须知"
           :options="[]"
           :text-bold="true"
-          v-model="formData.pact"
+          v-model="formData.read"
           :cell-data="noticeCellInfo"
           @cell-click="openIframePupop"
         >
@@ -69,20 +71,16 @@
     </div>
     <detail-footer :company-info="companyInfo" />
     <copyright />
-    <good-action
-      @click="$router.push('/policy/add')"
-      :content="goodActionInfo"
-      :class="{ 'cal-fee': currentPupopIndex === 6 }"
-    />
+    <good-action :content="goodActionInfo" :class="{ 'cal-fee': currentPupopIndex === 6 }" />
     <popup-with-iframe
       v-model="popupShow"
       :title="pupopData.title"
       :content="pupopData.content"
       :url="pupopData.url"
     >
-      <cal-insured-fee v-if="currentPupopIndex === 6" />
+      <cal-insured-fee v-model="formData" v-if="currentPupopIndex === 6" />
     </popup-with-iframe>
-  </div>
+  </cr-form>
 </template>
 
 <script>
@@ -108,9 +106,10 @@ import ProtocolRead from "./modules/ProtocolRead";
 import NavTab from "./modules/NavTab";
 
 import Detail from "@/api/detail.huagui.shouxian";
+import { trail, list } from "@/api/product";
 
 export default {
-  name: "GoodsDetail-CII",
+  name: "GoodsDetail-LI",
   components: {
     DetailHeader,
     DetailFooter,
@@ -134,12 +133,13 @@ export default {
   data() {
     return {
       ...Detail,
+      goodId: "",
+      calTimer: null,
+      goodActionInfo: {},
       popupShow: false,
       currentPupopIndex: null,
       formData: {
-        insured: "1",
-        payway: "1",
-        pact: false
+        read: false
       },
       showLayer: false
     };
@@ -147,14 +147,42 @@ export default {
   watch: {
     popupShow(val) {
       if (!val && this.currentPupopIndex === 6) this.currentPupopIndex = null;
+    },
+    headerInfo: {
+      deep: true,
+      immediate: true,
+      handler(val) {
+        const { price } = val;
+        this.goodActionInfo = { title: price };
+      }
+    },
+    formDataCpu: {
+      deep: true,
+      handler(val, oldVal) {
+        if (this.calTimer) {
+          clearTimeout(this.calTimer);
+        }
+        const { read } = val;
+        const { read: oldread } = oldVal;
+        if (read !== oldread) return;
+        this.calTimer = setTimeout(() => {
+          this.calFee();
+        }, 600);
+      }
     }
   },
   computed: {
     pupopData() {
       const { popupArray, currentPupopIndex } = this;
       return popupArray[currentPupopIndex] || {};
+    },
+    formDataCpu() {
+      return JSON.parse(JSON.stringify(this.formData));
     }
   },
+  mounted() {
+    this.getDetail();
+  },
   methods: {
     openIframePupop(index) {
       if (index === 4) {
@@ -163,6 +191,56 @@ export default {
       }
       this.currentPupopIndex = index;
       this.popupShow = true;
+    },
+    onSubmit() {
+      sessionStorage.setItem(
+        "policyFormData",
+        JSON.stringify(Object.assign(this.formData, { productNo: this.goodId }))
+      );
+      this.nextStep();
+    },
+    onFailed(errorInfo) {
+      const { errors } = errorInfo;
+      this.$notify({ type: "warning", message: errors[0].message });
+    },
+    nextStep() {
+      this.$router.push("/policy/add");
+    },
+    async getDetail() {
+      this.goodId = this.$route.query.id;
+      const res = await list();
+      if (res) {
+        res.forEach(item => {
+          if (item.productNo === this.goodId) {
+            this.headerInfo.price[0] = item.downPayPrice;
+            this.headerInfo.insuredNum = item.sellCount;
+          }
+        });
+      }
+    },
+    async calFee() {
+      let { price } = this.headerInfo;
+      const { birth, gender, amountInsured, policyPeriod, payPeriod, payType } = this.formData;
+      const _param = {
+        productNo: this.goodId,
+        productUserInfo: {
+          userInfo: {
+            birth,
+            gender
+          },
+          productItem: {
+            amountInsured,
+            policyPeriod,
+            payPeriod,
+            payType
+          }
+        }
+      };
+      const res = await trail(_param);
+      if (res) {
+        price[0] = res.regularPrice;
+        this.goodActionInfo = { title: price };
+      }
     }
   }
 };

src/views/Goods/Detail/MIDetail.vue

 <template>
-  <div class="container">
+  <cr-form scroll-to-error @submit="onSubmit" @failed="onFailed" class="container">
     <nav-tab :nav-list="navBarOptions" />
-    <detail-header @click="goInsureState = true" :det="headerInfo" />
+    <detail-header :det="headerInfo" />
     <div class="det-body">
       <card title="保险计划" :option="['查看详情']" @option-click="openIframePupop(4)">
         <compactCellGroup :cell-data="planCellInfo" :text-bold="true" />
@@ -10,12 +10,12 @@
       <div id="det_insure">
         <insure-person-form v-model="formData" :radio-options="personFormOptions" />
         <auto-deduct
-          v-model="formData.auto"
+          v-model="formData.autoRenewPolicy"
           :cell-data="autoCellInfo"
           @cell-click="openIframePupop"
         />
         <protocol-read
-          v-model="formData.pact"
+          v-model="formData.read"
           :cell-data="noticeCellInfo"
           @cell-click="openIframePupop"
         />
@@ -45,14 +45,16 @@
       :url="pupopData.url"
     >
       <cps-process-detail v-if="currentPupopIndex === 5" :process-data="processDetail" />
-      <cps-rate v-if="currentPupopIndex === 6" />
+      <cps-rate v-if="currentPupopIndex === 6" :rate-data="rateInfo" />
     </popup-with-iframe>
     <go-insure-dialog
       v-model="goInsureState"
       :title="headerInfo.title"
       :pay-data="goodBuyModalInfo"
+      @confirm="nextStep"
+      @read-protocol="openIframePupop"
     />
-  </div>
+  </cr-form>
 </template>
 
 <script>
@@ -80,11 +82,14 @@ import InsurePersonForm from "./modules/InsurePersonForm";
 import AutoDeduct from "./modules/AutoDeduct";
 import ProtocolRead from "./modules/ProtocolRead";
 import NavTab from "./modules/NavTab";
+import detailPayMixin from "./modules/detailPay.mixin";
 
+import { trail, list } from "@/api/product";
 import Detail from "@/api/detail.taikang.yiliaobaozhang";
 
 export default {
-  name: "GoodsDetail-CII",
+  name: "GoodsDetail-MI",
+  mixins: [detailPayMixin],
   components: {
     DetailHeader,
     DetailFooter,
@@ -112,18 +117,55 @@ export default {
   data() {
     return {
       ...Detail,
+      goodId: "",
+      calTimer: null,
+      goodActionInfo: {},
+      goodBuyModalInfo: [],
       popupShow: false,
       currentPupopIndex: null,
       formData: {
-        insured: "1",
-        payway: "1",
-        medical: "1",
-        auto: false,
-        pact: false
-      },
-      goInsureState: false,
-      showLayer: false
+        name: "",
+        idNo: "",
+        socialSecurity: "1",
+        relation: "0",
+        payType: "1",
+        planValue: "3",
+        autoRenewPolicy: false,
+        read: true
+      },
+      goInsureState: false
+    };
+  },
+  watch: {
+    headerInfo: {
+      deep: true,
+      immediate: true,
+      handler(val) {
+        const { price, subPrice } = val;
+        this.goodActionInfo = {
+          title: price,
+          sub: subPrice
         };
+        this.goodBuyModalInfo = [
+          { title: `${price[2]}保费`, value: `${price[0]}${price[1]}` },
+          { title: `${subPrice[2]}保费`, value: `${subPrice[0]}${subPrice[1]}${subPrice[3]}` }
+        ];
+      }
+    },
+    formDataCpu: {
+      deep: true,
+      handler(val, oldVal) {
+        if (this.calTimer) {
+          clearTimeout(this.calTimer);
+        }
+        const { idNo, socialSecurity, payType } = val;
+        const { idNo: oldNo, socialSecurity: oldSocialSecurity, payType: oldType } = oldVal;
+        if (idNo === oldNo && socialSecurity === oldSocialSecurity && payType === oldType) return;
+        this.calTimer = setTimeout(() => {
+          this.calFee();
+        }, 600);
+      }
+    }
   },
   computed: {
     pupopData() {
@@ -137,8 +179,14 @@ export default {
         paywayOptions,
         medicalOptions
       };
+    },
+    formDataCpu() {
+      return JSON.parse(JSON.stringify(this.formData));
     }
   },
+  mounted() {
+    this.getDetail();
+  },
   methods: {
     openIframePupop(index) {
       if (index === 4) {
@@ -147,6 +195,99 @@ export default {
       }
       this.currentPupopIndex = index;
       this.popupShow = true;
+    },
+    onSubmit() {
+      this.goInsureState = true;
+      // sessionStorage.setItem("policyFormData", JSON.stringify(this.formData));
+    },
+    onFailed(errorInfo) {
+      const { errors } = errorInfo;
+      this.$notify({ type: "warning", message: errors[0].message });
+    },
+    nextStep() {
+      this.generateFormData();
+      this.generateOrder();
+    },
+    generateFormData() {
+      const {
+        userInfoSecId,
+        name,
+        idNo,
+        relation,
+        socialSecurity,
+        // selfSocialSecurity,
+        selfName,
+        selfIdNo,
+        selfPhone,
+        selfSecId,
+        payType,
+        autoRenewPolicy
+      } = this.formData;
+      this.subFromData = {
+        insuredUserInfo: {
+          userInfoSecId: userInfoSecId ?? null,
+          name,
+          idNo,
+          relation,
+          socialSecurity: !!Number(socialSecurity)
+        },
+        productNo: this.goodId,
+        holderUserInfo: {
+          phoneNo: selfPhone,
+          userInfoSecId: selfSecId ?? null,
+          name: selfName,
+          idNo: selfIdNo
+          // socialSecurity: selfSocialSecurity ? !!Number(selfSocialSecurity) : null
+        },
+        productItem: {
+          payType
+        },
+        autoRenewPolicy: autoRenewPolicy
+      };
+    },
+    async getDetail() {
+      this.goodId = this.$route.query.id;
+      const res = await list();
+      if (res) {
+        res.forEach(item => {
+          if (item.productNo === this.goodId) {
+            this.headerInfo.price[0] = item.downPayPrice;
+            this.headerInfo.subPrice[0] = item.regularPrice;
+            this.headerInfo.insuredNum = item.sellCount;
+          }
+        });
+      }
+    },
+    async calFee() {
+      let { price, subPrice } = this.headerInfo;
+      const { idNo, socialSecurity, payType, userInfoSecId } = this.formData;
+      if (!idNo || !socialSecurity || !payType) return;
+      const _param = {
+        productNo: this.goodId,
+        productUserInfo: {
+          userInfo: {
+            idNo,
+            socialSecurity: !!Number(socialSecurity),
+            userInfoSecId: userInfoSecId ?? null
+          },
+          productItem: {
+            payType
+          }
+        }
+      };
+      const res = await trail(_param);
+      if (res) {
+        price[0] = res.downPayPrice;
+        subPrice[0] = res.regularPrice;
+        this.goodActionInfo = {
+          title: price,
+          sub: subPrice
+        };
+        this.goodBuyModalInfo = [
+          { title: `${price[2]}保费`, value: `${price[0]}${price[1]}` },
+          { title: `${subPrice[2]}保费`, value: `${subPrice[0]}${subPrice[1]}${subPrice[3]}` }
+        ];
+      }
     }
   }
 };

src/views/Goods/Detail/index.vue

@@ -22,7 +22,7 @@ export default {
   },
   data() {
     return {
-      detailType: "li",
+      detailType: "",
       show: true
     };
   },

src/views/Goods/Detail/modules/CalInsuredFee.vue

 <template>
-  <cr-form class="policy-form" scroll-to-error @submit="onFormSubmit" @failed="onFormFailed">
+  <cr-form ref="calFeeForm" class="policy-form" @submit="onFormSubmit">
     <cr-cell-group title="被保人年龄需满足18周岁~60周岁">
-      <cr-field v-model="formData.text" name="selfName" label="出生日期" readonly>
+      <cr-field
+        v-model="formData.birth"
+        name="birth"
+        label="出生日期"
+        :rules="[{ required: true, message: 'required' }]"
+      >
         <template #input>
-          <popup-date-picker v-model="formData.text" placeholder="请选择被保人出生日期" />
+          <popup-date-picker v-model="formData.birth" placeholder="请选择被保人出生日期" />
         </template>
       </cr-field>
-      <cr-field name="selfName" label="保障额度">
+      <cr-field
+        name="amountInsured"
+        label="保障额度"
+        :rules="[{ required: true, message: 'required' }]"
+      >
         <template #input>
-          <cr-radio-btn v-model="formData.planValue" :radio-data="countOptions" />
+          <cr-radio-btn v-model="formData.amountInsured" :radio-data="countOptions" />
         </template>
       </cr-field>
-      <cr-field v-model="formData.text" name="selfName" label="保险期限">
+      <cr-field
+        name="policyPeriod"
+        label="保险期限"
+        :rules="[{ required: true, message: 'required' }]"
+      >
         <template #input>
-          <cr-radio-btn v-model="formData.planValue" :radio-data="termOptions" />
+          <cr-radio-btn v-model="formData.policyPeriod" :radio-data="termOptions" />
         </template>
       </cr-field>
-      <cr-field v-model="formData.text" name="selfName" label="交费年限">
+      <cr-field
+        name="payPeriod"
+        label="交费年限"
+        :rules="[{ required: true, message: 'required' }]"
+      >
         <template #input>
-          <cr-radio-btn v-model="formData.planValue" :radio-data="benefitOptions" />
+          <cr-radio-btn v-model="formData.payPeriod" :radio-data="benefitOptions" />
         </template>
       </cr-field>
-      <cr-field v-model="formData.text" name="selfName" label="性别">
+      <cr-field name="gender" label="性别" :rules="[{ required: true, message: 'required' }]">
         <template #input>
-          <cr-radio-btn v-model="formData.planValue" :radio-data="sexOptions" />
+          <cr-radio-btn v-model="formData.gender" :radio-data="sexOptions" />
         </template>
       </cr-field>
-      <cr-field v-model="formData.text" name="selfName" label="交费方式">
+      <cr-field name="payType" label="交费方式" :rules="[{ required: true, message: 'required' }]">
         <template #input>
-          <cr-radio-btn v-model="formData.planValue" :radio-data="paywayOptions" />
+          <cr-radio-btn v-model="formData.payType" :radio-data="paywayOptions" />
         </template>
       </cr-field>
     </cr-cell-group>
@@ -38,6 +55,7 @@
 <script>
 import CrRadioBtn from "@/components/CrRadioBtn";
 import PopupDatePicker from "@/components/PopupDatePicker";
+const DATA_CHANGE_EVENT = "input";
 
 export default {
   name: "CalInsuredFee",
@@ -45,20 +63,28 @@ export default {
     CrRadioBtn,
     PopupDatePicker
   },
+  props: {
+    value: {
+      type: Object,
+      default() {
+        return {};
+      }
+    }
+  },
   data() {
     return {
       formData: {},
       sexOptions: [
-        { label: "男", value: "1" },
-        { label: "女", value: "2" }
+        { label: "男", value: "0" },
+        { label: "女", value: "1" }
       ],
       countOptions: [
-        { label: "100万", value: "1" },
-        { label: "150万", value: "2" },
-        { label: "200万", value: "3" },
-        { label: "250万", value: "4" },
-        { label: "300万", value: "5" },
-        { label: "350万", value: "6" }
+        { label: "100万", value: "1000000" },
+        { label: "150万", value: "15000000" },
+        { label: "200万", value: "2000000" },
+        { label: "250万", value: "2500000" },
+        { label: "300万", value: "3000000" },
+        { label: "350万", value: "3500000" }
       ],
       termOptions: [
         { label: "10年", value: "1" },
@@ -80,23 +106,24 @@ export default {
     };
   },
   watch: {
+    value: {
+      deep: true,
+      handler(val) {
+        this.formData = val;
+      }
+    },
     formData: {
       deep: true,
       handler() {
-        this.calFee();
+        this.$refs.calFeeForm.submit();
       }
     }
   },
   mounted() {},
   methods: {
-    onFormSubmit(values) {
-      console.log("submit", values);
-    },
-    onFormFailed(errorInfo) {
-      const { errors } = errorInfo;
-      this.$notify({ type: "warning", message: errors[0].message });
-    },
-    calFee() {}
+    onFormSubmit() {
+      this.$emit(DATA_CHANGE_EVENT, this.formData);
+    }
   }
 };
 </script>

src/views/Goods/Detail/modules/CpsProcess.vue

 <template functional>
   <card
     title="理赔流程"
-    :option="props.more ? ['了解更多理赔信息'] : ''"
+    :option="props.more ? ['了解更多理赔信息'] : []"
     @option-click="listeners.click"
   >
     <div class="cps-process-list">

src/views/Goods/Detail/modules/CpsQA.vue

 <template functional>
   <card title="常见问题" class="qa-header">
-    <collapse :collapse-data="props.qaData" :more-btn="props.more" />
+    <collapse :collapse-data="props.qaData" :more-btn="props.more" :init-length="4" />
   </card>
 </template>
 

src/views/Goods/Detail/modules/DetailHeader.vue

@@ -21,8 +21,15 @@
         <small class="det-hd-insured-sub">
           {{ props.det.sub }}
         </small>
-        <h5 class="det-hd-insured-price" v-html="props.det.price"></h5>
-        <cr-button type="warning" block @click="listeners.click" native-type="submit">
+        <h5 class="det-hd-insured-price" v-if="props.det.price">
+          <!-- eslint-disable-next-line prettier/prettier -->
+          {{ props.det.price[2] || "" }}<strong>{{ props.det.price[0] || "" }}</strong>{{ props.det.price[1] || "" }}
+          <small v-if="props.det.subPrice">
+            <!-- eslint-disable-next-line prettier/prettier -->
+            {{ props.det.subPrice[2] || "" }}{{ props.det.subPrice[0] || "" }}{{ props.det.subPrice[1] || "" }}
+          </small>
+        </h5>
+        <cr-button type="warning" block native-type="submit">
           立即开启保障
         </cr-button>
         <div class="det-hd-insured-people">
@@ -49,6 +56,7 @@ export default {
           title: "",
           sub: "",
           price: "",
+          subPrice: "",
           insuredNum: 0
         };
       }

src/views/Goods/Detail/modules/GoInsureDialog.vue

@@ -25,6 +25,8 @@
 import CompactCellGroup from "@/components/CompactCellGroup";
 import Modal from "@/components/Modal";
 const DIALOG_CHANGE_EVENT = "input";
+const DIALOG_CONFIRM_EVENT = "confirm";
+const READ_PROTOCOL_EVENT = "read-protocol";
 export default {
   name: "GoInsureDialog",
   components: {
@@ -70,10 +72,10 @@ export default {
   },
   methods: {
     openIframePupop(index) {
-      this.$parent.openIframePupop(index);
+      this.$emit(READ_PROTOCOL_EVENT, index);
     },
     go() {
-      this.$router.push("/goods/inform");
+      this.$emit(DIALOG_CONFIRM_EVENT);
     }
   }
 };
@@ -151,7 +153,7 @@ export default {
           width: 0;
           height: 12px;
           border-right: 1px @blue solid;
-          margin: 0 3px 0 1px;
+          margin: 0 0px 0 2px;
           vertical-align: -2px;
         }
         &:last-child::after {

src/views/Goods/Detail/modules/InsurePersonForm.vue

 <template>
-  <card title="请填写投保信息">
+  <card title="请填写投保信息" class="insure-card">
     <h6 class="insure-form-title">本人信息</h6>
     <cr-cell-group class="insure-form">
       <cr-field
@@ -8,6 +8,7 @@
         placeholder="请输入投保人姓名"
         label="姓名"
         :rules="[{ required: true, message: '请输入姓名' }]"
+        @click.native="inputClick"
       />
       <cr-field
         name="selfIdNo"
@@ -15,17 +16,20 @@
         placeholder="信息保密，仅用于投保"
         label="身份证号"
         :rules="[{ required: true, message: '请输入身份证号' }]"
+        @click.native="inputClick"
       />
       <cr-field
-        name="selfIdNo"
-        v-model="formData.selfIdNo"
+        name="selfPhone"
+        v-model="formData.selfPhone"
         placeholder="请输入您的手机号码"
         label="手机号码"
         :rules="[{ required: true, message: '请输入手机号码' }]"
+        @click.native="inputClick"
       />
       <cr-field
-        name="selfIdNo"
-        v-model="formData.selfIdNo"
+        name="selfCode"
+        v-model="formData.selfCode"
+        v-if="xyqbAuthState !== 4"
         placeholder="请输入短信验证码"
         label="验证码"
         :rules="[{ required: true, message: '请输入验证码' }]"
@@ -34,18 +38,25 @@
       </cr-field>
     </cr-cell-group>
     <h6 class="insure-form-title">为谁投保</h6>
-    <cr-radio-btn v-model="formData.insured" :radio-data="radioOptions.insuredOptions" />
+    <cr-radio-btn
+      v-model="formData.relation"
+      @input="relationChange"
+      :radio-data="radioOptions.insuredOptions"
+      class="insured"
+    />
     <cr-cell-group class="insure-form">
       <cr-field
         name="relativeName"
-        v-model="formData.relativeName"
+        v-if="formData.relation !== '0'"
+        v-model="formData.name"
         placeholder="请输入被保人姓名"
         label="姓名"
         :rules="[{ required: true, message: '请输入姓名' }]"
       />
       <cr-field
         name="relativeIdNo"
-        v-model="formData.relativeIdNo"
+        v-if="formData.relation !== '0'"
+        v-model="formData.idNo"
         placeholder="信息保密，仅用于投保"
         label="身份证号"
         :rules="[{ required: true, message: '请输入身份证号' }]"
@@ -56,15 +67,15 @@
           <cr-icon type="question-o" color="#ccc" />
         </template>
         <cr-radio-btn
-          name="medical"
-          v-model="formData.medical"
+          name="socialSecurity"
+          v-model="formData.socialSecurity"
           :radio-data="radioOptions.medicalOptions"
         />
       </cr-cell>
-      <cr-cell title="缴费方式" class="insure-form-item_nobg">
+      <cr-cell title="缴费方式" class="insure-form-item_nobg" v-if="radioOptions.paywayOptions">
         <cr-radio-btn
-          name="payway"
-          v-model="formData.payway"
+          name="type"
+          v-model="formData.payType"
           :radio-data="radioOptions.paywayOptions"
         />
       </cr-cell>
@@ -74,6 +85,9 @@
 
 <script>
 import Card from "@/components/Card";
+import { mapState, mapActions } from "vuex";
+import { getFamilyList } from "@/api/user";
+import localStorage from "@/service/localStorage";
 import CrRadioBtn from "@/components/CrRadioBtn";
 const DATA_CHANGE_EVENT = "input";
 export default {
@@ -98,7 +112,10 @@ export default {
   },
   data() {
     return {
-      formData: {}
+      formData: {},
+      familyList: [],
+      mongoToken: localStorage.get("mongoToken"),
+      xyqbAuthState: localStorage.get("xyqbAuthState")
     };
   },
   watch: {
@@ -110,9 +127,75 @@ export default {
       }
     },
     formData: {
+      immediate: true,
       deep: true,
       handler(val) {
         this.$emit(DATA_CHANGE_EVENT, val);
+        this.$forceUpdate();
+      }
+    },
+    showAuthXyqb: {
+      immediate: true,
+      handler(val) {
+        if (val === 4) {
+          const xyqbUserInfo = localStorage.get("xyqbUserInfo");
+          this.formData.selfName = xyqbUserInfo.nameMask;
+          this.formData.selfIdNo = xyqbUserInfo.idNoMask;
+          this.formData.selfPhone = xyqbUserInfo.phoneNoMask;
+          this.xyqbAuthState = localStorage.get("xyqbAuthState");
+          this.$forceUpdate();
+        }
+      }
+    },
+    familyList() {
+      this.relationChange();
+    }
+  },
+  computed: {
+    ...mapState(["showAuthXyqb"])
+  },
+  mounted() {
+    this.getFamilyList();
+  },
+  methods: {
+    ...mapActions(["setAuthXyqb"]),
+    inputClick() {
+      if (this.showAuthXyqb === 1) {
+        this.setAuthXyqb(2);
+      }
+    },
+    relationChange(relation = this.formData.relation) {
+      this.familyList.forEach(item => {
+        const {
+          relation,
+          nameMask: selfName,
+          idNoMask: selfIdNo,
+          userInfoSecId: selfSecId,
+          socialSecurity
+        } = item;
+        if (relation === 0) {
+          this.formData = {
+            ...this.formData,
+            ...{ selfName, selfIdNo, selfSecId, selfSocialSecurity: socialSecurity ? "1" : "0" }
+          };
+        }
+      });
+      const userArray = this.familyList.filter(item => item.relation === +relation);
+      let [name, idNo, userInfoSecId, socialSecurity] = ["", "", "", "0"];
+      if (userArray.length) {
+        let { nameMask, idNoMask, userInfoSecId: id, socialSecurity: ss } = userArray[0];
+        [name, idNo, userInfoSecId, socialSecurity] = [nameMask, idNoMask, id, ss];
+      }
+      this.formData = {
+        ...this.formData,
+        ...{ name, idNo, userInfoSecId, socialSecurity: socialSecurity ? "1" : "0" }
+      };
+    },
+    async getFamilyList() {
+      const res = await getFamilyList();
+      if (res) {
+        this.familyList = res;
+        this.showAuthXyqb && this.relationChange();
       }
     }
   }
@@ -120,6 +203,11 @@ export default {
 </script>
 <style lang="less" scoped>
 @import "../../../../style/var.less";
+.insure-card {
+  @{deep} .card-body {
+    padding-bottom: 10px;
+  }
+}
 .insure-form {
   &-title {
     font-size: @font-size-16;
@@ -168,4 +256,7 @@ export default {
     }
   }
 }
+.insured {
+  margin-bottom: 20px;
+}
 </style>

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

+import { payByWay } from "@/service/pay";
+import { isXyqb, isWeixinBrower } from "@/service/validation";
+import { placeOrder } from "@/api/product";
+
+export default {
+  data() {
+    return {
+      subFromData: {}, // 组装好的数据
+      orderInfo: {},
+      tradeType: ""
+      // customTradeType: ""
+    };
+  },
+  created() {
+    this.tradeType = this.customTradeType ?? (isXyqb ? "MWEB" : isWeixinBrower ? "JSAPI" : "MWEB");
+  },
+  methods: {
+    async generateOrder() {
+      const res = await placeOrder.create({
+        ...this.subFromData
+      });
+      if (res) {
+        this.orderInfo = res;
+        this.goPay();
+      }
+    },
+    async goPay() {
+      const { tradeType, orderInfo } = this;
+      const { payOrderNo, payType, orderNo } = orderInfo;
+      if (!payOrderNo) {
+        this.$toast("请先生成订单");
+        return;
+      }
+      const res = await placeOrder.pay({ payOrderNo, payType, tradeType });
+      if (res) {
+        let payInfo = {
+          url: res.payUrl,
+          params: {
+            ...orderInfo,
+            tradeType,
+            state: 1
+          }
+        };
+        if (tradeType === "JSAPI") {
+          payInfo = res.payInfo;
+        }
+        payByWay(tradeType, payInfo).then(() => {
+          this.$router.push({ url: "/policy/detail", query: { id: orderNo } });
+        });
+      }
+    }
+  }
+};

src/views/Goods/Inform/index.less

@@ -30,19 +30,20 @@
     }
   }
   &-content {
+    padding-bottom: 0;
     &-title {
       strong {
         color: @orange-dark;
       }
     }
     @{deep} .card-body {
-      padding: 20px 20px 11px 20px;
-      background-color: @gray-1;
-      border-radius: @border-radius-md;
-      font-size: @font-size-12;
-      color: @black;
-      line-height: @line-height-sm + 2;
-      margin-bottom: 0;
+      padding: 0;
+      // background-color: @gray-1;
+      // border-radius: @border-radius-md;
+      -webkit-overflow-scrolling: touch;
+      overflow: scroll;
+      margin: 0 -15px;
+      height: 72vh;
     }
   }
   &-btns {
@@ -60,4 +61,8 @@
       border-width: 0;
     }
   }
+  &-frame {
+    height: 72vh;
+    width: 100%;
+  }
 }

src/views/Goods/Inform/index.vue

@@ -11,20 +11,7 @@
         请如实告知
         <strong>被保人</strong> 是否有以下情形之一
       </span>
-      <p>以下情况全为“否”，即符合投保条件：</p>
-      <!-- eslint-disable-next-line -->
-      <p>1.被保险人职业是否属于以下职业：接触放射线或放射性物质，接触化学、易燃或易爆物质，有毒及危险物质生产运输，参与矿物或煤炭开采，暴露于烟尘或粉尘，参加高空、海洋、水下、地下、隧道、桥梁作业或活动，从事渔业捕捉，森林砍伐业或相关作业，森林防火，建筑施工，机械设备制造加工操作，金属/合金冶炼，3吨及3吨以上重型卡车、砂石车、液化气化油罐车驾驶及随车工作，高压电、电缆作业，拆船工作，私人保镖，战地记者，驯兽师，无固定职业，消防队员、特种兵、军事院校学生、入伍受训新兵、消防爆破、缉毒及防爆警察，参与镇暴或军警行动，前线军人。</p>
-      <!-- eslint-disable-next-line -->
-      <p>2. 被保险人过去 1 年内是否发现健康检查异常（包括但不限于血液、超声、影像检查、内镜、病理检查等）,过去 2 年内是否住院或被要求进一步检查、手术或治疗（不包括剖腹产/顺产/急性胃肠炎/单次发作已痊愈的肺炎/上呼吸道感染住院）。</p>
-      <!-- eslint-disable-next-line -->
-      <p>3. 被保险人目前或过往是否患有下列疾病：良、恶性肿瘤（含原位癌），2 级或以上高血压（收缩压大于 160mmHg，或舒张压大于 100mmHg），心脏疾病，主动脉疾病，脑梗死（脑栓塞或脑血栓），脑出血，脑外伤后遗症，肾脏疾病，慢性肝脏疾病，血友病，重型再障性贫血，系统性红斑狼疮，类风湿性关节炎，风湿热，糖尿病，阿尔茨海默病，帕金森氏病，运动神经元病，多发性硬化，重症肌无力，硬皮病，克隆病，溃疡性结肠炎，慢性胰腺炎，癫痫，精神病，先天性疾病，法定传染病（包含甲类及乙类），慢性阻塞性肺病，瘫痪，性病，艾滋病及 HIV 阳性，慢性酒精中毒。是否曾经或正在使用毒品或违禁药物、是否有智能障碍或痴呆、失明、聋哑、身体任何部位缺失、畸形及功能障碍、重听、视力障碍（近视1000度以上）。</p>
-      <!-- eslint-disable-next-line -->
-      <p>4. 过去 1 年内是否存在下列症状：反复头痛、晕厥、胸痛、气急、紫绀、持续反复发热、抽搐、不明原因出血、皮下出血点、咯血、反复呕吐、进食梗噎感或吞咽困难、呕血、浮肿、腹痛、黄疸、便血、血尿、蛋白尿、性质不明的肿块、消瘦（非健身原因所致的体重减轻 5公斤以上） 。</p>
-      <!-- eslint-disable-next-line -->
-      <p>5. 适用于女性被保险人：是否曾患有葡萄胎或其他妊娠滋养细胞疾病、宫颈不典型增生；是否有半年内存在阴道异常出血、乳头异常溢液、疼痛、糜烂或回缩、乳房表面皮肤凹陷、皱褶或皮肤收缩等症状。</p>
-      <p>6. 2 周岁以下被保险人出生时体重是否低于 2.5 公斤，是否早产，窒息，发育迟缓，脑瘫。</p>
-      <!-- eslint-disable-next-line -->
-      <p>7.被保险人是否曾被保险公司解除合同或投保时被拒绝、延期、附加条款承保或有过任何形式的人身索赔？被保险人最近一年内是否已在其它保险公司申请累计重大疾病保险保额达50万以上？</p>
+      <iframe class="inform-frame" :src="url" frameborder="0" height="100%"></iframe>
     </card>
     <div class="inform-btns">
       <cr-button @click="$router.back()">不符合</cr-button>
@@ -35,21 +22,63 @@
 
 <script>
 import card from "@/components/Card";
-
+import detailPayMixin from "../Detail/modules/detailPay.mixin";
 export default {
   name: "GoodsInform",
+  mixins: [detailPayMixin],
   components: {
     card
   },
   data() {
     return {
-      showLayer: false
+      formData: JSON.parse(sessionStorage.getItem("policyFormData") || "{}"),
+      orderInfo: {},
+      tradeType: "JSAPI",
+      url: "http://mangguo-contract.qthbx.com/huatai-jian-kang-gao-zhi-v1/"
     };
   },
   methods: {
     conform() {
-      // this.$toast("平台备案中，不能支付，敬请期待");
-      this.showLayer = true;
+      this.generateFormData();
+      this.generateOrder();
+    },
+    generateFormData() {
+      const {
+        productNo,
+        userInfoSecId,
+        name,
+        idNo,
+        relation,
+        // socialSecurity,
+        // selfSocialSecurity,
+        selfName,
+        selfIdNo,
+        selfPhone,
+        selfSecId,
+        payType,
+        autoRenewPolicy
+      } = this.formData;
+      this.subFromData = {
+        insuredUserInfo: {
+          userInfoSecId: userInfoSecId ?? null,
+          name,
+          idNo,
+          relation
+          // socialSecurity: socialSecurity ? !!Number(socialSecurity) : null
+        },
+        productNo,
+        holderUserInfo: {
+          phoneNo: selfPhone,
+          userInfoSecId: selfSecId,
+          name: selfName,
+          idNo: selfIdNo
+          // socialSecurity: selfSocialSecurity ? !!Number(selfSocialSecurity) : null
+        },
+        productItem: {
+          payType: payType ? payType : null
+        },
+        autoRenewPolicy: autoRenewPolicy
+      };
     }
   }
 };

src/views/Goods/index.vue

@@ -8,8 +8,7 @@
         <cr-tabbar-item>少儿</cr-tabbar-item>
       </cr-tabbar>
     </cr-sticky>
-    <good-list :list="goodsList" />
-    <record-layer v-model="showLayer" desc="敬请期待"></record-layer>
+    <good-list :list="list" />
     <ai-test-tip @click.native="showLayer = true" />
     <copyright :logo="true" />
     <tabbar></tabbar>
@@ -18,26 +17,14 @@
 
 <script>
 import goodsList from "@/api/goodsList.mock";
+import { list } from "@/api/product";
+
 import AiTestTip from "./modules/AiTestTip";
 import GoodList from "@/components/GoodList/index";
 import Tabbar from "@/components/Tabbar";
 import copyright from "@/components/Copyright";
-import RecordLayer from "@/components/RecordLayer";
-export default {
-  name: "GoodsList",
-  components: {
-    AiTestTip,
-    GoodList,
-    Tabbar,
-    copyright,
-    RecordLayer
-  },
-  data() {
-    return {
-      active: 0,
-      showLayer: false,
-      goodsList: [],
-      goodsLists: [
+
+const categoryList = [
   {
     title: "住院医疗险",
     sub: "报销医药费，有无社保均可保",
@@ -55,15 +42,72 @@ export default {
   },
   {
     title: "人寿保险",
-          sub: "家庭顶梁柱必备",
+    sub: "避免因家庭顶梁柱身故，导致的房贷、子女教育等生活压力",
     children: []
   }
-      ]
+];
+
+export default {
+  name: "GoodsList",
+  components: {
+    AiTestTip,
+    GoodList,
+    Tabbar,
+    copyright
+  },
+  data() {
+    return {
+      active: 0,
+      showLayer: false,
+      goodsList: []
     };
   },
+  computed: {
+    list() {
+      const { active } = this;
+      const _catList = JSON.parse(JSON.stringify(categoryList));
+      this.goodsList.forEach(item => {
+        switch (item.itype) {
+          case "mi":
+            _catList[0].children.push(item);
+            break;
+          case "cii":
+            (item.scope.includes(active) || active === 0) && _catList[1].children.push(item);
+            break;
+          case "ai":
+            _catList[2].children.push(item);
+            break;
+          case "li":
+            (item.scope.includes(active) || active === 0) && _catList[3].children.push(item);
+            break;
+          default:
+            break;
+        }
+      });
+      return _catList;
+    }
+  },
   mounted() {
+    this.getList();
+  },
+  methods: {
+    async getList() {
+      const res = await list();
+      if (res) {
+        goodsList.forEach(item => {
+          res.forEach(it => {
+            if (it.productNo === item.id) {
+              item.price = it.downPayPrice ?? item.price;
+              item.regularPrice = it.regularPrice ?? 0;
+              item.sellCount = it.sellCount ?? 0;
+              // item.title = it.title ?? item.title;
+            }
+          });
+        });
         this.goodsList = goodsList;
       }
+    }
+  }
 };
 </script>
 <style lang="less" src="./index.less" scoped></style>

src/views/Goods/modules/AiTestTip.vue

@@ -13,7 +13,9 @@
         <small>AI小果：为您提供30s快速测评</small>
       </div>
       <div class="ai-test-cell-btn">
-        <cr-button type="warning">开始测评</cr-button>
+        <cr-button type="warning" @click="parent.$router.push('/home/smart-measure')">
+          开始测评
+        </cr-button>
       </div>
     </cr-row>
   </div>

src/views/Home/index.less

@@ -136,6 +136,9 @@
         font-weight: 600;
         color: #242629;
         line-height: 31px;
+        display: block;
+        position: relative;
+        z-index: 2;
       }
 
       .Hc-card-result {
@@ -158,13 +161,15 @@
         width: 80px;
         height: 30px;
         background: #FFFFFF;
-
+        &.active {
+          opacity: 0.4;
+        }
         &:nth-child(3) {
           border-radius: 20px 0 0 20px;
         }
 
         &:nth-child(4) {
-          opacity: 0.4;
+          // opacity: 0.4;
           border-radius: 0 20px 20px 0;
         }
 
@@ -183,6 +188,7 @@
 
       .Hc-card-image {
         position: absolute;
+        z-index: 1;
         right: 15px;
         bottom: 0;
         width: 132px;

src/views/Home/index.vue

@@ -8,14 +8,14 @@
       src="@/assets/images/home/activity@2x.png"
     />
     <div class="home-service">
-      <div class="home-service-item">
+      <router-link tag="div" to="/home/smart-measure" class="home-service-item">
         <svg-icon icon-class="risk-assessment" class-name="Hs-item-svg" />
         <span class="Hs-item-text">智能风险评测</span>
-      </div>
-      <div class="home-service-item">
+      </router-link>
+      <router-link tag="div" to="/consultant" class="home-service-item">
         <svg-icon icon-class="consult-service" class-name="Hs-item-svg" />
         <span class="Hs-item-text">1对1咨询服务</span>
-      </div>
+      </router-link>
     </div>
     <div class="home-select">
       <p class="home-select-title">芒果保险精选推荐</p>
@@ -38,13 +38,23 @@
     <div class="home-classroom">
       <p class="home-classroom-title">芒果小课堂</p>
       <div class="home-classroom-card">
-        <p class="Hc-card-question">医保到底能保多少?</p>
+        <a :href="articleList[0].url" target="_blank" class="Hc-card-question">
+          {{ articleList[0].title }}
+        </a>
         <p class="Hc-card-result">已有1.8万人认为有用</p>
-        <div class="Hc-card-operation">
+        <div
+          class="Hc-card-operation"
+          :class="{ active: articleUseful === '0' }"
+          @click="clickUsefulOption('0')"
+        >
           <svg-icon class-name="Hcc-operation-svg" icon-class="useful" />
           <span class="Hcc-operation-text">有用</span>
         </div>
-        <div class="Hc-card-operation">
+        <div
+          class="Hc-card-operation"
+          :class="{ active: articleUseful === '1' }"
+          @click="clickUsefulOption('1')"
+        >
           <svg-icon class-name="Hcc-operation-svg" icon-class="useless" />
           <span class="Hcc-operation-text">没用</span>
         </div>
@@ -56,22 +66,14 @@
           src="@/assets/images/home/teacher@2x.png"
         />
       </div>
-      <div class="home-classroom-item">
-        <div class="Hc-item-left">
-          <p>保险公司公司会倒闭吗？</p>
-          <p>芒果小课堂</p>
-        </div>
-        <cr-image
-          class="Hc-item-right"
-          width=""
-          height=""
-          fit="cover"
-          src="@/assets/images/home/teacher@2x.png"
-        />
-      </div>
-      <div class="home-classroom-item">
+      <a
+        :href="item.url"
+        class="home-classroom-item"
+        v-for="(item, index) in articleList.slice(1)"
+        :key="index"
+      >
         <div class="Hc-item-left">
-          <p>科学投保要知道以下几大原则</p>
+          <p>{{ item.title }}</p>
           <p>芒果小课堂</p>
         </div>
         <cr-image
@@ -81,81 +83,73 @@
           fit="cover"
           src="@/assets/images/home/teacher@2x.png"
         />
-      </div>
+      </a>
     </div>
     <div class="home-phone">
-      <p>客服电话：XXXXXXXX</p>
+      <p>客服电话：010-82194734</p>
       <p>服务时间：9:00-21:00</p>
     </div>
-    <div class="home-logo">
-      <svg-icon icon-class="logo" class-name="home-logo-svg" />
-      <p class="home-logo-info">全天候保险代理股份有限公司</p>
-      <p class="home-logo-info">京ICP备XXXXXXXX号</p>
-    </div>
+    <copyright :logo="true" />
     <tabbar></tabbar>
   </div>
 </template>
 <script>
 import GoodList from "@/components/GoodList/index";
-import good01 from "@/assets/images/goods/goods-01.png";
-import good02 from "@/assets/images/goods/goods-02.png";
-import good03 from "@/assets/images/goods/goods-03.png";
-import good04 from "@/assets/images/goods/goods-04.png";
 import Tabbar from "@/components/Tabbar";
-
-const goodsList = [
-  {
-    id: 1,
-    img: good01,
-    title: "万家保·百万医疗险",
-    sub: "产品优势",
-    glory: "好评榜第1名",
-    price: "0",
-    unit: "",
-    allow: true
-  },
-  {
-    id: 2,
-    img: good02,
-    title: "万家保·重疾轻症险",
-    sub: "100种重疾+40种轻症",
-    glory: "",
-    price: "3",
-    unit: "首月",
-    allow: true
-  },
-  {
-    id: 3,
-    img: good03,
-    title: "万家保·综合意外险",
-    sub: "产品优势",
-    glory: "开车必备",
-    price: "0",
-    unit: "",
-    allow: true
-  },
-  {
-    id: 4,
-    img: good04,
-    title: "华贵大麦2020定期寿险",
-    sub: "产品优势",
-    glory: "",
-    price: "0",
-    unit: "",
-    allow: true
-  }
-];
+import Copyright from "@/components/Copyright";
+import { list } from "@/api/product";
+import goodsList from "@/api/goodsList.mock";
 
 export default {
   name: "Home",
   components: {
     GoodList,
-    Tabbar
+    Tabbar,
+    Copyright
   },
   data() {
     return {
-      goodsList
+      goodsList,
+      articleUseful: localStorage.getItem("articleUseful"),
+      articleList: [
+        {
+          title: "25~45岁间该怎么买保险",
+          url: "https://mp.weixin.qq.com/s/yG_n8cnvsFd9NPIYZycYvg"
+        },
+        {
+          title: "有了医保，还需要买商业保险吗？",
+          url: "https://mp.weixin.qq.com/s/6GZTTDwwHMHaIKFib7QGfg"
+        },
+        {
+          title: "常见保险有几类，作用是什么？",
+          url: "https://mp.weixin.qq.com/s/rIhVsxnxcxHfiYHIwq11hQ"
+        }
+      ]
     };
+  },
+  mounted() {
+    this.getList();
+  },
+  methods: {
+    clickUsefulOption(val) {
+      this.articleUseful = val;
+      localStorage.setItem("articleUseful", val);
+    },
+    async getList() {
+      const res = await list();
+      if (res) {
+        goodsList.forEach(item => {
+          res.forEach(it => {
+            if (it.productNo === item.id) {
+              item.price = it.downPayPrice ?? item.price;
+              item.regularPrice = it.regularPrice ?? 0;
+              // item.title = it.title ?? item.title;
+            }
+          });
+        });
+        this.goodsList = goodsList;
+      }
+    }
   }
 };
 </script>

src/views/Policy/Add/index.vue

@@ -3,116 +3,146 @@
     <div class="policy-tip-wrap">
       <div class="policy-tip">您所填写的数据，仅用于投保，平台将严格保密</div>
     </div>
-    <cr-form class="policy-form" scroll-to-error @submit="onFormSubmit" @failed="onFormFailed">
+    <cr-form
+      ref="policyForm"
+      class="policy-form"
+      scroll-to-error
+      @submit="onFormSubmit"
+      @failed="onFormFailed"
+    >
       <cr-cell-group title="投保人信息">
         <cr-field
-          v-model="formData.text"
-          name="selfName"
+          v-model="formData.holderUserInfo.name"
+          name="holderUserInfo.name"
           label="姓名"
           placeholder="请输入投保人姓名"
           :rules="[{ require: true, message: '请输入投保人姓名' }]"
+          @click.native="inputClick"
         />
         <cr-field
-          v-model="formData.text"
-          name="selfName"
+          v-model="formData.holderUserInfo.idNo"
+          name="holderUserInfo.idNo"
           label="身份证号"
           placeholder="请填写投保人身份证号"
           :rules="[{ require: true, message: '请填写投保人身份证号' }]"
+          @click.native="inputClick"
         />
         <cr-field
-          v-model="formData.text"
-          name="selfName"
+          v-model="formData.holderUserInfo.phoneNo"
+          name="formData.holderUserInfo.phoneNo"
           type="tel"
           label="手机号"
           placeholder="请填写投保人手机号"
           :rules="[{ require: true, message: '请填写投保人手机号' }]"
+          @click.native="inputClick"
         />
         <cr-field
-          v-model="formData.text"
-          name="selfName"
+          v-model="formData.holderUserInfo.email"
+          name="holderUserInfo.email"
           type="email"
           label="电子邮箱"
           placeholder="用户接收电子保单"
           :rules="[{ require: true, message: '请填写电子邮箱' }]"
         />
         <cr-field
-          v-model="formData.text"
-          name="selfName"
+          v-model="formData.holderUserInfo.annualIncome"
+          name="holderUserInfo.annualIncome"
           label="年收入"
           type="digit"
           placeholder="请输入投保人年收入"
           :rules="[{ require: true, message: '请输入投保人年收入' }]"
         />
         <cr-field
-          name="selfName"
+          v-model="formData.holderUserInfo.addressCode"
+          name="holderUserInfo.addressCode"
           label="居住省市"
-          readonly
           :rules="[{ require: true, message: '请选择投保人居住省市' }]"
         >
           <template #input>
-            <popup-area-picker v-model="formData.text" placeholder="请选择投保人居住省市" />
+            <popup-area-picker
+              v-model="formData.holderUserInfo.addressCode"
+              placeholder="请选择投保人居住省市"
+            />
           </template>
         </cr-field>
         <cr-field
-          v-model="formData.text"
-          name="selfName"
+          v-model="formData.holderUserInfo.addressDetail"
+          name="holderUserInfo.addressDetail"
           label="详细地址"
           placeholder="请输入居住详细地址"
           :rules="[{ require: true, message: '请输入居住详细地址' }]"
         />
         <cr-field
-          name="selfName"
+          v-model="formData.holderUserInfo.occupation"
+          name="holderUserInfo.occupation"
           label="职业"
           :rules="[{ require: true, message: '请选择投保人职业' }]"
         >
           <template #input>
             <popup-picker
               :picker-data="['老师', '工人']"
-              v-model="formData.text"
+              v-model="formData.holderUserInfo.occupation"
               placeholder="请选择投保人职业"
             />
           </template>
         </cr-field>
         <cr-field
-          v-model="formData.text"
-          name="selfName"
+          v-model="formData.holderUserInfo.longTerm"
+          name="holderUserInfo.longTerm"
           label="身份证有效期"
           :rules="[{ require: true, message: '请选择身份证有效期' }]"
         >
           <template #input>
-            <cr-radio-btn v-model="formData.planValue" :radio-data="idCardInvaildOptions" />
+            <cr-radio-btn
+              v-model="formData.holderUserInfo.longTerm"
+              :radio-data="idCardInvaildOptions"
+            />
           </template>
         </cr-field>
         <cr-field
-          name="selfName"
+          v-model="formData.holderUserInfo.validEnd"
+          name="holderUserInfo.validEnd"
           label="有效期至"
-          readonly
           :rules="[{ require: true, message: '请选择您的证件有效止期' }]"
         >
           <template #input>
-            <popup-date-picker v-model="formData.text" placeholder="请选择您的证件有效止期" />
+            <popup-date-picker
+              v-model="formData.holderUserInfo.validEnd"
+              placeholder="请选择您的证件有效止期"
+            />
           </template>
         </cr-field>
       </cr-cell-group>
       <cr-cell-group title="被保人信息">
-        <cr-field v-model="formData.text" name="selfName" label="为谁投保">
+        <cr-field
+          v-model="formData.insuredUserInfo.relation"
+          name="insuredUserInfo.relation"
+          label="为谁投保"
+        >
           <template #input>
-            <cr-radio-btn v-model="formData.planValue" :radio-data="insuredOptions" />
+            <cr-radio-btn
+              v-model="formData.insuredUserInfo.relation"
+              @input="relationChange"
+              :radio-data="insuredOptions"
+            />
           </template>
         </cr-field>
         <cr-field
-          v-model="formData.text"
-          name="selfName"
+          v-model="formData.insuredUserInfo.socialSecurity"
+          name="insuredUserInfo.socialSecurity"
           label="有无社保"
           :rules="[{ require: true, message: '请选择社保状态' }]"
         >
           <template #input>
-            <cr-radio-btn v-model="formData.planValue" :radio-data="socialSecOptions" />
+            <cr-radio-btn
+              v-model="formData.insuredUserInfo.socialSecurity"
+              :radio-data="socialSecOptions"
+            />
           </template>
         </cr-field>
         <cr-field
-          v-model="formData.text"
-          name="selfName"
+          v-model="formData.insuredUserInfo.height"
+          name="insuredUserInfo.height"
           label="身高"
           type="digit"
           placeholder="请填写被保人身高"
@@ -121,8 +151,8 @@
           <div class="form-unit" slot="button">厘米</div>
         </cr-field>
         <cr-field
-          v-model="formData.text"
-          name="selfName"
+          v-model="formData.insuredUserInfo.weight"
+          name="insuredUserInfo.weight"
           label="体重"
           type="digit"
           placeholder="请填写被保人体重"
@@ -130,140 +160,159 @@
         >
           <div class="form-unit" slot="button">公斤</div>
         </cr-field>
+        <template v-if="formData.insuredUserInfo.relation !== '0'">
           <cr-field
-          v-model="formData.text"
-          name="selfName"
+            v-model="formData.insuredUserInfo.name"
+            name="insuredUserInfo.name"
             label="姓名"
             placeholder="请输入投保人姓名"
             :rules="[{ require: true, message: '请输入投保人姓名' }]"
           />
           <cr-field
-          v-model="formData.text"
-          name="selfName"
+            v-model="formData.insuredUserInfo.idNo"
+            name="insuredUserInfo.idNo"
             label="身份证号"
             placeholder="请填写投保人身份证号"
             :rules="[{ require: true, message: '请填写投保人身份证号' }]"
           />
           <cr-field
-          v-model="formData.text"
-          name="selfName"
+            v-model="formData.insuredUserInfo.phoneNo"
+            name="insuredUserInfo.phoneNo"
             label="手机号"
             type="tel"
             placeholder="请填写投保人手机号"
             :rules="[{ require: true, message: '请填写投保人手机号' }]"
           />
           <cr-field
-          v-model="formData.text"
-          name="selfName"
+            v-model="formData.insuredUserInfo.annualIncome"
+            name="insuredUserInfo.annualIncome"
             label="年收入"
             type="digit"
             placeholder="请输入投保人年收入"
             :rules="[{ require: true, message: '请输入投保人年收入' }]"
           />
           <cr-field
-          name="selfName"
+            v-model="formData.insuredUserInfo.addressCode"
+            name="insuredUserInfo.addressCode"
             label="居住省市"
-          readonly
             :rules="[{ require: true, message: '请选择投保人居住省市' }]"
           >
             <template #input>
-            <popup-area-picker v-model="formData.text" placeholder="请选择投保人居住省市" />
+              <popup-area-picker
+                v-model="formData.insuredUserInfo.addressCode"
+                placeholder="请选择投保人居住省市"
+              />
             </template>
           </cr-field>
           <cr-field
-          v-model="formData.text"
-          name="selfName"
+            v-model="formData.insuredUserInfo.addressDetail"
+            name="insuredUserInfo.weigaddressDetailht"
             label="详细地址"
             placeholder="请输入居住详细地址"
             :rules="[{ require: true, message: '请输入居住详细地址' }]"
           />
           <cr-field
-          name="selfName"
+            v-model="formData.insuredUserInfo.occupation"
+            name="insuredUserInfo.occupation"
             label="职业"
             :rules="[{ require: true, message: '请选择投保人职业' }]"
           >
             <template #input>
               <popup-picker
                 :picker-data="['老师', '工人']"
-              v-model="formData.text"
+                v-model="formData.insuredUserInfo.occupation"
                 placeholder="请选择投保人职业"
               />
             </template>
           </cr-field>
           <cr-field
-          v-model="formData.text"
-          name="selfName"
+            v-model="formData.insuredUserInfo.longTerm"
+            name="insuredUserInfo.longTerm"
             label="身份证有效期"
             :rules="[{ require: true, message: '请选择身份证有效期' }]"
           >
             <template #input>
-            <cr-radio-btn v-model="formData.planValue" :radio-data="idCardInvaildOptions" />
+              <cr-radio-btn
+                v-model="formData.insuredUserInfo.longTerm"
+                :radio-data="idCardInvaildOptions"
+              />
             </template>
           </cr-field>
           <cr-field
-          name="selfName"
+            v-model="formData.insuredUserInfo.validEnd"
+            name="insuredUserInfo.validEnd"
             label="有效期至"
-          readonly
             :rules="[{ require: true, message: '请选择您的证件有效止期' }]"
           >
             <template #input>
-            <popup-date-picker v-model="formData.text" placeholder="请选择您的证件有效止期" />
+              <popup-date-picker
+                v-model="formData.insuredUserInfo.validEnd"
+                placeholder="请选择您的证件有效止期"
+              />
             </template>
           </cr-field>
+        </template>
       </cr-cell-group>
       <cr-cell-group title="保障方案">
         <cr-field
-          name="selfName"
+          v-model="formData.productItem.insuredAmount"
+          name="productItem.insuredAmount"
           label="投保限额"
           :rules="[{ require: true, message: '请选择投保限额' }]"
         >
           <template #input>
-            <cr-stepper v-model="formData.stepper" disable-input :step="10" />
+            <stepper v-model="formData.productItem.insuredAmount" :option="insuredAmountOptions" />
           </template>
         </cr-field>
         <cr-field
-          v-model="formData.text"
-          name="selfName"
+          v-model="formData.productItem.policyPeriod"
+          name="productItem.policyPeriod"
           label="保险期限"
           :rules="[{ require: true, message: '请选择保险期限' }]"
         >
           <template #input>
-            <cr-radio-btn v-model="formData.planValue" :radio-data="termOptions" />
+            <cr-radio-btn v-model="formData.productItem.policyPeriod" :radio-data="termOptions" />
           </template>
         </cr-field>
         <cr-field
-          v-model="formData.text"
-          name="selfName"
+          v-model="formData.payPeriod"
+          name="payPeriod"
           label="交费方式"
           :rules="[{ require: true, message: '请选择交费方式' }]"
         >
           <template #input>
-            <cr-radio-btn v-model="formData.planValue" :radio-data="paywayOptions" />
+            <cr-radio-btn v-model="formData.productItem.payType" :radio-data="paywayOptions" />
           </template>
         </cr-field>
         <cr-field
-          v-model="formData.text"
-          name="selfName"
-          label="为谁投保"
-          :rules="[{ require: true, message: '请选择为谁投保' }]"
+          v-model="formData.productItem.paymentPeriod"
+          name="productItem.paymentPeriod"
+          label="交费期间"
+          :rules="[{ require: true, message: '请选择交费期间' }]"
         >
           <template #input>
-            <cr-radio-btn v-model="formData.planValue" :radio-data="benefitOptions" />
+            <cr-radio-btn
+              v-model="formData.productItem.paymentPeriod"
+              :radio-data="benefitOptions"
+            />
           </template>
         </cr-field>
         <cr-field
-          v-model="formData.text"
-          name="selfName"
+          v-model="formData.effectiveDate"
+          name="effectiveDate"
           label="生效日期"
-          readonly
-          :rules="[{ require: true, message: '请选择生效日期' }]"
-        />
+          :rules="[{ require: true, message: '生效日期' }]"
+        >
+          <template #input>
+            <popup-date-picker v-model="formData.effectiveDate" placeholder="请选择生效日期" />
+          </template>
+        </cr-field>
         <cr-field
-          v-model="formData.text"
-          name="selfName"
+          v-model="formData.beneficiaryUser"
+          name="beneficiaryUser"
+          placeholder="请填写受益人"
           label="受益人"
-          readonly
-          :rules="[{ require: true, message: '请选择受益人' }]"
+          :rules="[{ require: true, message: '请填写受益人' }]"
         />
       </cr-cell-group>
       <good-action @leftClick="goInsureState = true" :content="goodActionInfo" />
@@ -272,6 +321,7 @@
       v-model="goInsureState"
       :title="headerInfo.title"
       :pay-data="goodBuyModalInfo"
+      @confirm="nextStep"
     >
       <div class="pay-protocol">
         <div class="pay-protocol-tip"><span>投保前请阅读</span><span>*不犹豫期免费退保</span></div>
@@ -285,12 +335,19 @@
           <a href="javascript:;" @click="openIframePupop(1)">转账授权书</a>
         </div>
         <div class="pay-protocol-link pay-protocol-link_wrap">
-          <a href="javascript:;" @click="openIframePupop(3)">人身保险投保提示书</a>
+          <a href="javascript:;" @click="openIframePupop(8)">人身保险投保提示书</a>
           <a href="javascript:;" @click="openIframePupop(3)">税收居民身份证明</a>
           <a href="javascript:;" @click="openIframePupop(3)">风控查询授权书</a>
         </div>
       </div>
     </go-insure-dialog>
+    <popup-with-iframe
+      v-model="popupShow"
+      :title="pupopData.title"
+      :content="pupopData.content"
+      :url="pupopData.url"
+    >
+    </popup-with-iframe>
   </div>
 </template>
 
@@ -300,25 +357,52 @@ import CrRadioBtn from "@/components/CrRadioBtn";
 import PopupPicker from "@/components/PopupPicker";
 import PopupAreaPicker from "@/components/PopupAreaPicker";
 import PopupDatePicker from "@/components/PopupDatePicker";
+import PopupWithIframe from "@/components/PopupWithIframe";
+import Stepper from "@/components/Stepper";
 import GoInsureDialog from "@/views/Goods/Detail/modules/GoInsureDialog";
+import detailPayMixin from "@/views/Goods/Detail/modules/detailPay.mixin";
 
+import localStorage from "@/service/localStorage";
+import { mapState, mapActions } from "vuex";
 import Detail from "@/api/detail.huagui.shouxian";
-
+import { list, trail } from "@/api/product";
+import { getFamilyList } from "@/api/user";
+const { headerInfo, popupArray } = Detail;
 export default {
   name: "AddPolicy",
+  mixins: [detailPayMixin],
   components: {
     GoodAction,
     CrRadioBtn,
     GoInsureDialog,
     PopupPicker,
     PopupAreaPicker,
-    PopupDatePicker
+    PopupDatePicker,
+    PopupWithIframe,
+    Stepper
   },
   data() {
     return {
-      ...Detail,
+      popupArray,
+      headerInfo,
+      calTimer: null,
       goInsureState: false,
-      formData: {},
+      popupShow: false,
+      currentPupopIndex: null,
+      goodActionInfo: {},
+      goodBuyModalInfo: [],
+      policyFormData: JSON.parse(sessionStorage.getItem("policyFormData") || "{}"),
+      formData: {
+        insuredUserInfo: {
+          relation: "0"
+        },
+        holderUserInfo: {},
+        productItem: {
+          insuredAmount: "500000"
+        }
+      },
+      subFromData: {},
+      familyList: [],
       formMaskData: {},
       idCardInvaildOptions: [
         { label: "非长期", value: "1" },
@@ -326,13 +410,13 @@ export default {
       ],
       socialSecOptions: [
         { label: "有社保", value: "1" },
-        { label: "无社保", value: "2" }
+        { label: "无社保", value: "0" }
       ],
       insuredOptions: [
-        { label: "本人", value: "1" },
-        { label: "配偶", value: "2" },
-        { label: "父母", value: "3" },
-        { label: "子女", value: "4" }
+        { label: "本人", value: "0" },
+        { label: "配偶", value: "1" },
+        { label: "父母", value: "2" },
+        { label: "子女", value: "3" }
       ],
       termOptions: [
         { label: "10年", value: "1" },
@@ -350,21 +434,194 @@ export default {
         { label: "交5年", value: "1" },
         { label: "交10年", value: "2" },
         { label: "交20年", value: "3" },
-        { label: "交30年", value: "4" },
-        { label: "一次付清", value: "5" }
+        { label: "交30年", value: "4" }
+        // { label: "一次付清", value: "5" }
+      ],
+      insuredAmountOptions: [
+        { label: "30万", value: "300000" },
+        { label: "50万", value: "500000" },
+        { label: "100万", value: "1000000" },
+        { label: "150万", value: "15000000" },
+        { label: "200万", value: "2000000" },
+        { label: "250万", value: "2500000" },
+        { label: "300万", value: "3000000" },
+        { label: "350万", value: "3500000" }
       ]
     };
   },
-  mounted() {},
+  watch: {
+    popupShow(val) {
+      if (!val && this.currentPupopIndex === 6) this.currentPupopIndex = null;
+    },
+    headerInfo: {
+      deep: true,
+      handler(val) {
+        const { price, subPrice } = val;
+        this.goodActionInfo = {
+          title: price
+        };
+        this.goodBuyModalInfo = [
+          { title: `${price[2]}保费`, value: `${price[0]}${price[1]}` },
+          { title: `${subPrice[2]}保费`, value: `${subPrice[0]}${subPrice[1]}${subPrice[3]}` }
+        ];
+      }
+    },
+    formDataCpu: {
+      deep: true,
+      handler() {
+        if (this.calTimer) {
+          clearTimeout(this.calTimer);
+        }
+        this.calTimer = setTimeout(() => {
+          this.calFee();
+        }, 600);
+      }
+    },
+    showAuthXyqb: {
+      immediate: true,
+      handler(val) {
+        if (val === 4) {
+          const xyqbUserInfo = localStorage.get("xyqbUserInfo");
+          this.formData.holderUserInfo.name = xyqbUserInfo.nameMask;
+          this.formData.holderUserInfo.idNo = xyqbUserInfo.idNoMask;
+          this.formData.holderUserInfo.phoneNo = xyqbUserInfo.phoneNoMask;
+          this.$forceUpdate();
+        }
+      }
+    }
+  },
+  computed: {
+    ...mapState(["showAuthXyqb"]),
+    pupopData() {
+      const { popupArray, currentPupopIndex } = this;
+      return popupArray[currentPupopIndex] || {};
+    },
+    formDataCpu() {
+      return JSON.parse(JSON.stringify(this.formData));
+    }
+  },
+  mounted() {
+    this.getParamFromSession();
+    this.getDetail();
+    this.getFamilyList();
+  },
   methods: {
-    onFormSubmit(values) {
-      console.log("submit", values);
+    ...mapActions(["setAuthXyqb"]),
+    inputClick() {
+      if (this.showAuthXyqb === 1) {
+        this.setAuthXyqb(2);
+      }
+    },
+    onFormSubmit() {
       this.goInsureState = true;
     },
     onFormFailed(errorInfo) {
       const { errors } = errorInfo;
       this.$notify({ type: "warning", message: errors[0].message });
-      this.goInsureState = true;
+    },
+    nextStep() {
+      this.subFromData = JSON.parse(JSON.stringify(this.formData));
+      this.subFromData.insuredUserInfo.socialSecurity =
+        this.subFromData.insuredUserInfo.socialSecurity === "1" ? true : false;
+      this.generateOrder();
+    },
+    relationChange(relation = this.formData.insuredUserInfo.relation) {
+      this.familyList.forEach(item => {
+        const { relation, nameMask: name, idNoMask: idNo, userInfoSecId, socialSecurity } = item;
+        if (+relation === 0) {
+          this.formData.holderUserInfo = {
+            ...this.formData.holderUserInfo,
+            ...{ name, idNo, userInfoSecId, socialSecurity: socialSecurity ? "1" : "0" }
+          };
+        }
+      });
+      const userArray = this.familyList.filter(item => item.relation === +relation);
+      let [name, idNo, userInfoSecId, socialSecurity] = ["", "", "", "0"];
+      if (userArray.length) {
+        let { nameMask, idNoMask, userInfoSecId: id, socialSecurity: ss } = userArray[0];
+        [name, idNo, userInfoSecId, socialSecurity] = [nameMask, idNoMask, id, ss];
+      }
+      this.formData.insuredUserInfo = {
+        ...this.formData.insuredUserInfo,
+        ...{ name, idNo, userInfoSecId, socialSecurity: socialSecurity ? "1" : "0" }
+      };
+    },
+    openIframePupop(index) {
+      this.currentPupopIndex = index;
+      this.popupShow = true;
+    },
+    getParamFromSession() {
+      const {
+        amountInsured: insuredAmount,
+        policyPeriod,
+        payPeriod: paymentPeriod,
+        payType,
+        productNo
+      } = this.policyFormData;
+      this.formData.productNo = productNo;
+      this.formData.productItem = {
+        ...this.formData.productItem,
+        ...{ insuredAmount, policyPeriod, paymentPeriod, payType }
+      };
+      this.$forceUpdate();
+    },
+    async getDetail() {
+      const res = await list();
+      if (res) {
+        res.forEach(item => {
+          if (item.productNo === this.formData.productNo) {
+            this.headerInfo.price[0] = item.downPayPrice;
+          }
+        });
+      }
+    },
+    async getFamilyList() {
+      const res = await getFamilyList();
+      if (res) {
+        this.familyList = res;
+        this.showAuthXyqb === -1 && this.relationChange();
+      }
+    },
+    async calFee() {
+      let { price } = this.headerInfo;
+      const {
+        insuredAmount: amountInsured,
+        policyPeriod,
+        paymentPeriod: payPeriod,
+        payType
+      } = this.formData.productItem;
+      let idNo = "";
+      const { socialSecurity } = this.formData.insuredUserInfo;
+      if (this.formData.insuredUserInfo.relation !== "0") {
+        idNo = this.formData.insuredUserInfo.idNo;
+      } else {
+        idNo = this.formData.holderUserInfo.idNo;
+      }
+      if (!amountInsured || !policyPeriod || !payPeriod || !payType || !idNo || !socialSecurity)
+        return;
+      const _param = {
+        productNo: this.goodId,
+        productUserInfo: {
+          userInfo: {
+            idNo,
+            socialSecurity: socialSecurity === "1" ? true : false
+          },
+          productItem: {
+            amountInsured,
+            policyPeriod,
+            payPeriod,
+            payType
+          }
+        }
+      };
+      const res = await trail(_param);
+      if (res) {
+        price[0] = res.downPayPrice;
+        this.goodActionInfo = {
+          title: price
+        };
+        this.goodBuyModalInfo = [{ title: `保费`, value: `${price[0]}${price[1]}` }];
+      }
     }
   }
 };