feat: 详情对接

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-05 16:56:21
  */
 
 import goodsBg from "@/assets/images/goods/detail/shouxian/bg.png";
@@ -19,6 +19,7 @@ export default {
     type: "huagui",
     company: "",
     title: "大麦2020定期寿险",
+    price: [155, "元/年起"],
     insuredNum: 0,
     stamp: false
   },
@@ -77,13 +78,6 @@ export default {
     { 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: "保险条款",

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-05 16:36:29
  */
 
 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
   },
@@ -89,14 +90,6 @@ export default {
     { 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": [
       { title: "投保年龄", value: `30天~50周岁` },

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-05 16:19:26
  */
 
 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
   },
@@ -78,14 +79,6 @@ export default {
     { 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-05 16:38:21
  */
 
 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
   },
@@ -108,12 +108,6 @@ export default {
     { label: "月缴<small style='color: #999;font-size: 11px'>（12期）</small>", value: "1" },
     { label: "一次交清", value: "2" }
   ],
-  goodActionInfo: {
-    title: ["53", "元/年", ""]
-  },
-  goodBuyModalInfo: [
-    { title: "每年保费", value: `350元` }
-  ],
   noticeCellInfo: {
     "10": [
       { title: "投保年龄", value: `18周岁~65周岁` },

src/api/goodsList.mock.js

@@ -14,14 +14,14 @@ import life from "@/assets/images/user/life@2x.png";
 export default [
   {
     id: 1,
-    itype: "mi",
+    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,
@@ -49,13 +49,13 @@ export default [
   {
     id: 3,
     itype: "cii",
-    scope: [1, 2],
+    scope: [1, 3],
     img: good02,
-    title: "康惠保2020终身重疾险",
-    sub: "100种重疾+40种轻症",
+    title: "百年康惠保(2.0)重大疾病险",
+    sub: "终身保障155种重疾，最多赔付6次",
     glory: "",
-    price: "3",
-    unit: "首月",
+    price: "256",
+    unit: "年起",
     allow: true,
     termType: "long",
     icon_closed: illness_closed,
@@ -69,10 +69,10 @@ export default [
     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,
@@ -83,13 +83,13 @@ export default [
   {
     id: 5,
     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/components/AuthFromXyqb.vue

@@ -38,20 +38,7 @@ export default {
   data() {
     return {
       showAuth: true,
-      userInfo: [
-        {
-          label: "手机号码",
-          value: xyqbUserInfo.phoneNoMask
-        },
-        {
-          label: "姓名",
-          value: xyqbUserInfo.nameMask
-        },
-        {
-          label: "身份证号码",
-          value: xyqbUserInfo.idNoMask
-        }
-      ]
+      userInfo: []
     };
   },
   watch: {
@@ -62,6 +49,22 @@ export default {
       }
     }
   },
+  created() {
+    this.userInfo = [
+      {
+        label: "手机号码",
+        value: xyqbUserInfo.phoneNoMask
+      },
+      {
+        label: "姓名",
+        value: xyqbUserInfo.nameMask
+      },
+      {
+        label: "身份证号码",
+        value: xyqbUserInfo.idNoMask
+      }
+    ];
+  },
   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: {

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/views/Goods/Detail/AIDetail.vue

@@ -85,9 +85,10 @@ import ProtocolRead from "./modules/ProtocolRead";
 import NavTab from "./modules/NavTab";
 
 import Detail from "@/api/detail.zhongan.yiwai";
+import { detail } from "@/api/product";
 
 export default {
-  name: "GoodsDetail-CII",
+  name: "GoodsDetail-AI",
   components: {
     DetailHeader,
     DetailFooter,
@@ -114,10 +115,12 @@ export default {
   data() {
     return {
       ...Detail,
+      goodActionInfo: {},
+      goodBuyModalInfo: [],
       popupShow: false,
       currentPupopIndex: null,
       formData: {
-        planValue: "5",
+        planValue: "10",
         insured: "1",
         payway: "1",
         auto: false,
@@ -127,6 +130,16 @@ export default {
       showLayer: false
     };
   },
+  watch: {
+    headerInfo: {
+      deep: true,
+      handler(val) {
+        const { price } = val;
+        this.goodActionInfo = { title: price };
+        this.goodBuyModalInfo = [{ title: `${price[2]}保费`, value: `${price[0]}${price[1]}` }];
+      }
+    }
+  },
   computed: {
     pupopData() {
       const { popupArray, currentPupopIndex } = this;
@@ -150,6 +163,9 @@ export default {
       };
     }
   },
+  mounted() {
+    this.getDetail();
+  },
   methods: {
     openIframePupop(index) {
       if (index === 4) {
@@ -158,6 +174,14 @@ export default {
       }
       this.currentPupopIndex = index;
       this.popupShow = true;
+    },
+    async getDetail() {
+      this.goodId = this.$route.query.id;
+      const res = await detail({ productNo: this.goodId });
+      if (res) {
+        this.headerInfo.price[0] = res.price;
+        this.headerInfo.company = res.companyName;
+      }
     }
   }
 };

src/views/Goods/Detail/CIIDetail.vue

@@ -83,6 +83,7 @@ import ProtocolRead from "./modules/ProtocolRead";
 import NavTab from "./modules/NavTab";
 
 import Detail from "@/api/detail.huatai.zhongjixian";
+import { detail, trail } from "@/api/product";
 
 export default {
   name: "GoodsDetail-CII",
@@ -112,12 +113,18 @@ export default {
   data() {
     return {
       ...Detail,
+      calTimer: null,
+      goodActionInfo: {},
+      goodBuyModalInfo: [],
       popupShow: false,
       currentPupopIndex: null,
       formData: {
-        planValue: "3",
+        name: "",
+        idNo: "",
+        socialSecurity: "1",
         insured: "1",
-        payway: "1",
+        type: "1",
+        planValue: "3",
         auto: false,
         pact: false
       },
@@ -125,6 +132,48 @@ export default {
       showLayer: false
     };
   },
+  watch: {
+    headerInfo: {
+      deep: true,
+      handler(val) {
+        console.log(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]}` }
+        ];
+      }
+    },
+    formData: {
+      deep: true,
+      handler(val, oldVal) {
+        if (this.calTimer) {
+          clearTimeout(this.calTimer);
+        }
+        const { name, idNo, socialSecurity, type } = val;
+        const {
+          name: oldName,
+          idNo: oldNo,
+          socialSecurity: oldSocialSecurity,
+          type: oldType
+        } = oldVal;
+        if (
+          name === oldName &&
+          idNo === oldNo &&
+          socialSecurity === oldSocialSecurity &&
+          type === oldType
+        )
+          return;
+        this.calTimer = setTimeout(() => {
+          this.calFee({ name, idNo, socialSecurity, type });
+        }, 600);
+      }
+    }
+  },
   computed: {
     pupopData() {
       const { popupArray, currentPupopIndex } = this;
@@ -148,6 +197,9 @@ export default {
       };
     }
   },
+  mounted() {
+    this.getDetail();
+  },
   methods: {
     openIframePupop(index) {
       if (index === 4) {
@@ -163,7 +215,32 @@ export default {
     onFailed(errorInfo) {
       const { errors } = errorInfo;
       this.$notify({ type: "warning", message: errors[0].message });
-      this.goInsureState = true;
+      // this.goInsureState = true;
+    },
+    async getDetail() {
+      this.goodId = this.$route.query.id;
+      const res = await detail({ productNo: this.goodId });
+      if (res) {
+        this.headerInfo.price[0] = res.firstMonthPrice;
+        this.headerInfo.subPrice[0] = res.price;
+        this.headerInfo.company = res.companyName;
+      }
+    },
+    async calFee({ name, idNo, socialSecurity, type }) {
+      let { price, subPrice } = this.headerInfo;
+      const res = await trail({ name, idNo, socialSecurity, type });
+      if (res) {
+        price[0] = res.firstPrice;
+        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

@@ -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>
@@ -108,9 +110,10 @@ import ProtocolRead from "./modules/ProtocolRead";
 import NavTab from "./modules/NavTab";
 
 import Detail from "@/api/detail.huagui.shouxian";
+import { detail } from "@/api/product";
 
 export default {
-  name: "GoodsDetail-CII",
+  name: "GoodsDetail-LI",
   components: {
     DetailHeader,
     DetailFooter,
@@ -134,6 +137,7 @@ export default {
   data() {
     return {
       ...Detail,
+      goodActionInfo: {},
       popupShow: false,
       currentPupopIndex: null,
       formData: {
@@ -147,6 +151,13 @@ export default {
   watch: {
     popupShow(val) {
       if (!val && this.currentPupopIndex === 6) this.currentPupopIndex = null;
+    },
+    headerInfo: {
+      deep: true,
+      handler(val) {
+        const { price } = val;
+        this.goodActionInfo = { title: price };
+      }
     }
   },
   computed: {
@@ -155,6 +166,9 @@ export default {
       return popupArray[currentPupopIndex] || {};
     }
   },
+  mounted() {
+    this.getDetail();
+  },
   methods: {
     openIframePupop(index) {
       if (index === 4) {
@@ -163,6 +177,14 @@ export default {
       }
       this.currentPupopIndex = index;
       this.popupShow = true;
+    },
+    async getDetail() {
+      this.goodId = this.$route.query.id;
+      const res = await detail({ productNo: this.goodId });
+      if (res) {
+        this.headerInfo.price[0] = res.price;
+        this.headerInfo.company = res.companyName;
+      }
     }
   }
 };

src/views/Goods/Detail/MIDetail.vue

@@ -81,10 +81,11 @@ import AutoDeduct from "./modules/AutoDeduct";
 import ProtocolRead from "./modules/ProtocolRead";
 import NavTab from "./modules/NavTab";
 
+import { detail } from "@/api/product";
 import Detail from "@/api/detail.taikang.yiliaobaozhang";
 
 export default {
-  name: "GoodsDetail-CII",
+  name: "GoodsDetail-MI",
   components: {
     DetailHeader,
     DetailFooter,
@@ -112,6 +113,8 @@ export default {
   data() {
     return {
       ...Detail,
+      goodActionInfo: {},
+      goodBuyModalInfo: [],
       popupShow: false,
       currentPupopIndex: null,
       formData: {
@@ -125,6 +128,22 @@ export default {
       showLayer: false
     };
   },
+  watch: {
+    headerInfo: {
+      deep: 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]}` }
+        ];
+      }
+    }
+  },
   computed: {
     pupopData() {
       const { popupArray, currentPupopIndex } = this;
@@ -139,6 +158,9 @@ export default {
       };
     }
   },
+  mounted() {
+    this.getDetail();
+  },
   methods: {
     openIframePupop(index) {
       if (index === 4) {
@@ -147,6 +169,15 @@ export default {
       }
       this.currentPupopIndex = index;
       this.popupShow = true;
+    },
+    async getDetail() {
+      this.goodId = this.$route.query.id;
+      const res = await detail({ productNo: this.goodId });
+      if (res) {
+        this.headerInfo.price[0] = res.firstMonthPrice;
+        this.headerInfo.subPrice[0] = res.price;
+        this.headerInfo.company = res.companyName;
+      }
     }
   }
 };

src/views/Goods/Detail/index.vue

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

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,7 +21,14 @@
         <small class="det-hd-insured-sub">
           {{ props.det.sub }}
         </small>
-        <h5 class="det-hd-insured-price" v-html="props.det.price"></h5>
+        <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 @click="listeners.click" native-type="submit">
           立即开启保障
         </cr-button>
@@ -49,6 +56,7 @@ export default {
           title: "",
           sub: "",
           price: "",
+          subPrice: "",
           insuredNum: 0
         };
       }

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

@@ -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,24 @@
       </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.insured"
+      :radio-data="radioOptions.insuredOptions"
+      class="insured"
+    />
     <cr-cell-group class="insure-form">
       <cr-field
         name="relativeName"
-        v-model="formData.relativeName"
+        v-if="formData.insured !== '1'"
+        v-model="formData.name"
         placeholder="请输入被保人姓名"
         label="姓名"
         :rules="[{ required: true, message: '请输入姓名' }]"
       />
       <cr-field
         name="relativeIdNo"
-        v-model="formData.relativeIdNo"
+        v-if="formData.insured !== '1'"
+        v-model="formData.idNo"
         placeholder="信息保密，仅用于投保"
         label="身份证号"
         :rules="[{ required: true, message: '请输入身份证号' }]"
@@ -56,15 +66,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-radio-btn
-          name="payway"
-          v-model="formData.payway"
+          name="type"
+          v-model="formData.type"
           :radio-data="radioOptions.paywayOptions"
         />
       </cr-cell>
@@ -74,6 +84,8 @@
 
 <script>
 import Card from "@/components/Card";
+import { mapState, mapActions } from "vuex";
+import localStorage from "@/service/localStorage";
 import CrRadioBtn from "@/components/CrRadioBtn";
 const DATA_CHANGE_EVENT = "input";
 export default {
@@ -98,7 +110,9 @@ export default {
   },
   data() {
     return {
-      formData: {}
+      formData: {},
+      mongoToken: localStorage.get("mongoToken"),
+      xyqbAuthState: localStorage.get("xyqbAuthState")
     };
   },
   watch: {
@@ -114,6 +128,30 @@ export default {
       handler(val) {
         this.$emit(DATA_CHANGE_EVENT, val);
       }
+    },
+    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();
+        }
+      }
+    }
+  },
+  computed: {
+    ...mapState(["showAuthXyqb"])
+  },
+  methods: {
+    ...mapActions(["setAuthXyqb"]),
+    inputClick() {
+      if (this.showAuthXyqb === 1) {
+        this.setAuthXyqb(2);
+      }
     }
   }
 };
@@ -168,4 +206,7 @@ export default {
     }
   }
 }
+.insured {
+  margin-bottom: 20px;
+}
 </style>

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,51 +17,96 @@
 
 <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";
+
+const categoryList = [
+  {
+    title: "住院医疗险",
+    sub: "报销医药费，有无社保均可保",
+    children: []
+  },
+  {
+    title: "重大疾病险",
+    sub: "责任内疾病确诊即赔",
+    children: []
+  },
+  {
+    title: "意外伤害险",
+    sub: "意外保障无等待期",
+    children: []
+  },
+  {
+    title: "人寿保险",
+    sub: "避免因家庭顶梁柱身故，导致的房贷、子女教育等生活压力",
+    children: []
+  }
+];
+
 export default {
   name: "GoodsList",
   components: {
     AiTestTip,
     GoodList,
     Tabbar,
-    copyright,
-    RecordLayer
+    copyright
   },
   data() {
     return {
       active: 0,
       showLayer: false,
-      goodsList: [],
-      goodsLists: [
-        {
-          title: "住院医疗险",
-          sub: "报销医药费，有无社保均可保",
-          children: []
-        },
-        {
-          title: "重大疾病险",
-          sub: "责任内疾病确诊即赔",
-          children: []
-        },
-        {
-          title: "意外伤害险",
-          sub: "意外保障无等待期",
-          children: []
-        },
-        {
-          title: "人寿保险",
-          sub: "家庭顶梁柱必备",
-          children: []
-        }
-      ]
+      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.goodsList = goodsList;
+    this.getList();
+  },
+  methods: {
+    async getList() {
+      const res = await list();
+      if (res) {
+        goodsList.forEach(item => {
+          res.forEach(it => {
+            item.id = "AKFSFA1421523151";
+            if (it.title === item.title) {
+              item.id = it.productNo ?? item.id;
+              item.price = it.priceDesc ?? item.price;
+              item.sellCount = it.sellCount ?? 0;
+            }
+          });
+        });
+        this.goodsList = goodsList;
+      }
+    }
   }
 };
 </script>