feat: 保单表单完成；微信支付

package.json

@@ -13,6 +13,7 @@
     "@qg/cherry-ui": "^1.1.2",
     "@qg/qg-scroll": "^1.4.2",
     "amfe-flexible": "^2.2.1",
+    "axios": "^0.19.2",
     "core-js": "^3.6.5",
     "lodash": "^4.17.19",
     "vconsole": "^3.3.4",

src/api/detail.huagui.shouxian.js

@@ -4,7 +4,7 @@
  * @Description: 华贵大麦2020定期寿险
  * @Date: 2020-07-27 15:46:37
  * @LastEditors: gzw
- * @LastEditTime: 2020-07-27 20:31:41
+ * @LastEditTime: 2020-07-28 14:57:28
  */
 
 import goodsBg from "@/assets/goods/detail/shouxian/bg.png";
@@ -79,6 +79,10 @@ export default {
   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-27 20:31:57
+ * @LastEditTime: 2020-07-28 15:16:47
  */
 
 import goodsBg from "@/assets/goods/detail/zhongjixian/bg.png";
@@ -92,9 +92,13 @@ export default {
     title: ["3", "元", "首月"],
     sub: "次月5.6元/月起"
   },
+  goodBuyModalInfo: [
+    { title: "首月保费", value: `3元` },
+    { title: "次月保费", value: "5.6元/月起（共11期）" }
+  ],
   noticeCellInfo: {
     "3": [
-      { title: "投保年龄", value: `30~50周岁` },
+      { title: "投保年龄", value: `30天~50周岁` },
       { title: "保障期限", value: "1年（可续保至99周岁）" },
       { title: "等待期", value: "90天" },
       {
@@ -107,7 +111,7 @@ export default {
       }
     ],
     "2": [
-      { title: "投保年龄", value: `30~60周岁` },
+      { title: "投保年龄", value: `30天~60周岁` },
       { title: "保障期限", value: "1年（可续保至99周岁）" },
       { title: "等待期", value: "90天" },
       {
@@ -120,7 +124,7 @@ export default {
       }
     ],
     "1": [
-      { title: "投保年龄", value: `30~60周岁` },
+      { 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-07-27 20:32:15
+ * @LastEditTime: 2020-07-28 14:57:18
  */
 
 import goodsBg from "@/assets/goods/detail/yiliaoxian/bg.png";
@@ -75,6 +75,10 @@ export default {
     title: ["3", "元", "首月"],
     sub: "次月5.6元/月起"
   },
+  goodBuyModalInfo: [
+    { title: "首月保费", value: `3元` },
+    { title: "次月保费", value: "5.6元/月起（共11期）" }
+  ],
   noticeCellInfo: [
     { title: "投保年龄", value: `30~50周岁` },
     { title: "保障期限", value: "1年（可续保至99周岁）" },

src/api/detail.zhongan.yiliaobaozhang.js

@@ -96,6 +96,10 @@ export default {
   goodActionInfo: {
     title: ["350", "元/年", ""]
   },
+  goodBuyModalInfo: [
+    { title: "首月保费", value: `3元` },
+    { title: "次月保费", value: "5.6元/月起（共11期）" }
+  ],
   noticeCellInfo: {
     "5": [
       { title: "投保年龄", value: `30~50周岁` },

src/api/goodsList.mock.js

@@ -9,13 +9,14 @@ export default [
     children: [
       {
         id: 1,
+        itype: "mi",
         img: good01,
         title: "万家保·百万医疗险",
         sub: "产品优势",
         glory: "好评榜第1名",
         price: "0",
         unit: "",
-        allow: false
+        allow: true
       }
     ]
   },
@@ -25,6 +26,7 @@ export default [
     children: [
       {
         id: 1,
+        itype: "cii",
         img: good02,
         title: "万家保·重疾轻症险",
         sub: "100种重疾+40种轻症",
@@ -32,16 +34,6 @@ export default [
         price: "3",
         unit: "首月",
         allow: true
-      },
-      {
-        id: 1,
-        img: good02,
-        title: "百年康惠保2.0重大疾病险",
-        sub: "产品优势",
-        glory: "",
-        price: "0",
-        unit: "",
-        allow: false
       }
     ]
   },
@@ -51,13 +43,14 @@ export default [
     children: [
       {
         id: 1,
+        itype: "ai",
         img: good03,
         title: "万家保·综合意外险",
         sub: "产品优势",
         glory: "开车必备",
         price: "0",
         unit: "",
-        allow: false
+        allow: true
       }
     ]
   },
@@ -67,13 +60,14 @@ export default [
     children: [
       {
         id: 1,
+        itype: "li",
         img: good04,
         title: "华贵大麦2020定期寿险",
         sub: "产品优势",
         glory: "",
         price: "0",
         unit: "",
-        allow: false
+        allow: true
       }
     ]
   }

src/components/GoodAction.vue

@@ -17,7 +17,7 @@
       </slot>
     </div>
     <div class="good-action-right">
-      <cr-button type="warning" round @click="rightClick">我要投保</cr-button>
+      <cr-button type="warning" round @click="rightClick" native-type="submit">我要投保</cr-button>
     </div>
   </div>
 </template>

src/components/GoodList/index.less

@@ -53,6 +53,7 @@
       }
     }
     &-img {
+      position: relative;
       img {
         display: block;
         position: relative;

src/components/GoodList/index.vue

@@ -93,7 +93,7 @@ export default {
       if (!item.allow) {
         return;
       }
-      this.$router.push({ path: "/goods/detail", query: { id: item.id } });
+      this.$router.push({ path: "/goods/detail", query: { id: item.id, type: item.itype } });
     }
   }
 };

src/components/Modal.vue

@@ -129,7 +129,7 @@ export default {
     display: flex;
     justify-content: space-between;
     align-items: center;
-    padding: @padding-lg;
+    padding: 0 @padding-lg @padding-lg;
     &.split {
       .cr-button {
         width: 48%;

src/components/PopupAreaPicker.vue

+<template>
+  <div class="picker-wrap">
+    <div
+      class="picker-wrap-txt"
+      :class="{ placeholder: !String(pickerValShow) }"
+      @click="show = true"
+    >
+      {{ pickerValShow || placeholder }}
+    </div>
+    <cr-popup v-model="show" position="bottom" get-container="body">
+      <cr-area ref="area" :list="areaList" @cancel="onCancel" @confirm="onConfirm" />
+    </cr-popup>
+  </div>
+</template>
+
+<script>
+import popupPickerMixin from "../mixins/popupPicker.mixin.js";
+import areaList from "@qg/cherry-ui/src/area/demo/china";
+export default {
+  name: "PopupAreaPicker",
+  mixins: [popupPickerMixin],
+  data() {
+    return {
+      refName: "area",
+      areaList
+    };
+  },
+  methods: {
+    handleResult(res) {
+      let valShow = [];
+      let val = [];
+      res.forEach(item => {
+        valShow.push(item.name);
+        val.push(item.code);
+      });
+      this.pickerValShow = valShow.join(",");
+      this.pickerVal = val;
+    }
+  }
+};
+</script>
+<style lang="less">
+.picker-wrap {
+  width: 100%;
+  &-txt {
+    height: 24px;
+    color: #333;
+    font-size: 14px;
+  }
+  .placeholder {
+    color: #ccc;
+  }
+}
+</style>

src/components/PopupDatePicker.vue

+<template>
+  <div class="picker-wrap">
+    <div
+      class="picker-wrap-txt"
+      :class="{ placeholder: !String(pickerValShow) }"
+      @click="show = true"
+    >
+      {{ pickerValShow || placeholder }}
+    </div>
+    <cr-popup v-model="show" position="bottom" get-container="body">
+      <cr-date-picker ref="datepicker" @confirm="onConfirm" @cancel="onCancel" />
+    </cr-popup>
+  </div>
+</template>
+
+<script>
+import popupPickerMixin from "../mixins/popupPicker.mixin.js";
+export default {
+  name: "PopupDatePicker",
+  mixins: [popupPickerMixin],
+  data() {
+    return {
+      refName: "datepicker"
+    };
+  },
+  methods: {
+    handleResult(res) {
+      this.pickerValShow = res;
+      this.pickerVal = res;
+    }
+  }
+};
+</script>
+<style lang="less">
+.picker-wrap {
+  width: 100%;
+  &-txt {
+    height: 24px;
+    color: #333;
+    font-size: 14px;
+  }
+  .placeholder {
+    color: #ccc;
+  }
+}
+</style>

src/components/PopupPicker.vue

+<template>
+  <div class="picker-wrap">
+    <div
+      class="picker-wrap-txt"
+      :class="{ placeholder: !String(pickerValShow) }"
+      @click="show = true"
+    >
+      {{ pickerValShow || placeholder }}
+    </div>
+    <cr-popup v-model="show" position="bottom" get-container="body">
+      <cr-picker
+        ref="picker"
+        :columns="pickerData"
+        show-toolbar
+        @cancel="onCancel"
+        @confirm="onConfirm"
+      />
+    </cr-popup>
+  </div>
+</template>
+
+<script>
+import popupPickerMixin from "../mixins/popupPicker.mixin.js";
+export default {
+  name: "PopupPicker",
+  mixins: [popupPickerMixin],
+  methods: {
+    handleResult(res) {
+      this.pickerValShow = res[0];
+      this.pickerVal = res[1];
+    }
+  }
+};
+</script>
+<style lang="less">
+.picker-wrap {
+  width: 100%;
+  &-txt {
+    height: 24px;
+    color: #333;
+    font-size: 14px;
+  }
+  .placeholder {
+    color: #ccc;
+  }
+}
+</style>

src/mixins/dialogMixin.js

-export default {
-  props: ["showmodal"],
-  methods: {
-    modalClose() {
-      this.$emit("update:showmodal", false);
-    }
-  }
-};

src/mixins/popupPicker.mixin.js

+/*
+ * @Description: PopupPicker mixin
+ * @Date: 2020-07-28 19:46:31
+ * @LastEditors: gzw
+ * @LastEditTime: 2020-07-28 20:33:52
+ */
+
+// TODO 默认值需要处理
+const VALUE_CHANGE_EVENT = "input";
+export default {
+  name: "PopupPicker",
+  props: {
+    value: null,
+    placeholder: {
+      type: String,
+      default: "请选择"
+    },
+    pickerData: {
+      type: Array,
+      default() {
+        return [];
+      }
+    }
+  },
+  data() {
+    return {
+      show: false,
+      pickerVal: "",
+      refreshed: false,
+      refName: "picker",
+      pickerValShow: ""
+    };
+  },
+  watch: {
+    show(val) {
+      if (val && !this.refreshed) {
+        this.refreshed = true;
+        this.$refs[this.refName].refreshColumns();
+      }
+    }
+    // value: {
+    //   immediate: true,
+    //   handler(val) {
+    //     this.pickerValShow = val[0];
+    //     this.pickerVal = val[1];
+    //   }
+    // }
+  },
+  methods: {
+    onCancel() {
+      this.show = false;
+    },
+    onConfirm(picker, res) {
+      this.handleResult(res);
+      this.$emit(VALUE_CHANGE_EVENT, String(this.pickerVal));
+      this.onCancel();
+    }
+  }
+};

src/router/index.js

@@ -44,6 +44,11 @@ const routes = [
     name: "Detail",
     component: () => import("../views/Policy/Detail/index.vue")
   },
+  {
+    path: "/policy/add",
+    name: "AddPolicy",
+    component: () => import("../views/Policy/Add/index.vue")
+  },
   {
     path: "/payment-record",
     name: "PaymentRecord",

src/service/cherry-ui.js

@@ -17,9 +17,9 @@ const {
   // Loading,
   Toast,
   // Uploader,
-  // Notify,
-  // Picker,
-  // Area,
+  Notify,
+  Picker,
+  Area,
   // Dialog,
   Field,
   Checkbox,
@@ -32,8 +32,8 @@ const {
   // CardList,
   // Search,
   // List,
-  // Stepper,
-  // DatePicker,
+  Stepper,
+  DatePicker,
   // SwipeCell,
   Form,
   Tabbar,
@@ -55,12 +55,17 @@ Vue.use(Col);
 Vue.use(Popup);
 Vue.use(Divider);
 Vue.use(Toast);
+Vue.use(Notify);
+Vue.use(Picker);
+Vue.use(Area);
 Vue.use(Field);
 Vue.use(Checkbox);
 Vue.use(Radio);
 Vue.use(RadioGroup);
 Vue.use(Switch);
 Vue.use(Tag);
+Vue.use(Stepper);
+Vue.use(DatePicker);
 Vue.use(Form);
 Vue.use(Tabbar);
 Vue.use(TabbarItem);

src/service/pay.service.js

+/*
+ * @Description: 支付微信h5, jsapi, 第三方收银台，跳转）
+ * @Date: 2020-07-28 15:03:52
+ * @LastEditors: gzw
+ * @LastEditTime: 2020-07-28 15:20:28
+ */
+
+/**
+ * payByWeixinJsapi
+ * @description: 微信通过jsapi支付
+ *               可以在微信浏览器调起支付
+ * @param {type}
+ * @return:
+ */
+export function payByWeixinJsapi() {
+  function onBridgeReady() {
+    // eslint-disable-next-line no-undef
+    WeixinJSBridge.invoke(
+      "getBrandWCPayRequest",
+      {
+        appId: "wx2421b1c4370ec43b", //公众号名称，由商户传入
+        timeStamp: "1395712654", //时间戳，自1970年以来的秒数
+        nonceStr: "e61463f8efa94090b1f366cccfbbb444", //随机串
+        package: "prepay_id=u802345jgfjsdfgsdg888",
+        signType: "MD5", //微信签名方式：
+        paySign: "70EA570631E4BB79628FBCA90534C63FF7FADD89" //微信签名
+      },
+      function(res) {
+        if (res.err_msg == "get_brand_wcpay_request:ok") {
+          // 使用以上方式判断前端返回,微信团队郑重提示：
+          //res.err_msg将在用户支付成功后返回ok，但并不保证它绝对可靠。
+        } else if (res.err_msg == "get_brand_wcpay_request:cancel") {
+          // 支付取消
+        } else {
+          // 支付失败
+        }
+      }
+    );
+  }
+  if (typeof WeixinJSBridge == "undefined") {
+    if (document.addEventListener) {
+      document.addEventListener("WeixinJSBridgeReady", onBridgeReady, false);
+    } else if (document.attachEvent) {
+      document.attachEvent("WeixinJSBridgeReady", onBridgeReady);
+      document.attachEvent("onWeixinJSBridgeReady", onBridgeReady);
+    }
+  } else {
+    onBridgeReady();
+  }
+}
+
+/**
+ * payByWeixinH5
+ * @description: 微信通过H5支付
+ *               可以在浏览器调起微信支付
+ * @param {type}
+ * @return:
+ */
+export function payByWeixinH5() {
+  window.location.href = "";
+}
+
+/**
+ * payByThirdPartyCashier
+ * @description: 第三方收银台
+ * @param {type}
+ * @return:
+ */
+export function payByThirdPartyCashier() {
+  window.location.href = "";
+}

src/style/index.less

@@ -86,3 +86,6 @@ a {
     }
   }
 }
+.cr-notify {
+  font-size: @font-size-14;
+}
\ No newline at end of file

src/views/Goods/Detail/AIDetail.vue

@@ -38,11 +38,7 @@
     </div>
     <detail-footer :company-info="companyInfo" />
     <copyright />
-    <good-action
-      @click="goInsureState = true"
-      @leftClick="goInsureState = true"
-      :content="goodActionInfo"
-    />
+    <good-action @leftClick="goInsureState = true" :content="goodActionInfo" />
     <popup-with-iframe
       v-model="popupShow"
       :title="pupopData.title"
@@ -52,8 +48,11 @@
       <cps-process-detail v-if="currentPupopIndex === 5" :process-data="processDetail" />
       <cps-rate v-if="currentPupopIndex === 6" />
     </popup-with-iframe>
-    <record-layer v-model="showLayer" desc="敬请期待" />
-    <go-insure-dialog v-model="goInsureState" />
+    <go-insure-dialog
+      v-model="goInsureState"
+      :title="headerInfo.title"
+      :pay-data="goodBuyModalInfo"
+    />
   </div>
 </template>
 
@@ -65,7 +64,6 @@ import CrRadioBtn from "@/components/CrRadioBtn";
 import Card from "@/components/Card";
 import Copyright from "@/components/Copyright";
 import GoodAction from "@/components/GoodAction";
-import RecordLayer from "@/components/RecordLayer";
 import Collapse from "@/components/Collapse";
 
 import DetailHeader from "./modules/DetailHeader";
@@ -105,7 +103,6 @@ export default {
     GoInsureDialog,
     CpsProcessDetail,
     CpsRate,
-    RecordLayer,
     PlanTip,
     InsurePersonForm,
     AutoDeduct,

src/views/Goods/Detail/CIIDetail.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" />
     <div class="det-body">
@@ -38,11 +38,7 @@
     </div>
     <detail-footer :company-info="companyInfo" />
     <copyright />
-    <good-action
-      @click="goInsureState = true"
-      @leftClick="goInsureState = true"
-      :content="goodActionInfo"
-    />
+    <good-action @leftClick="goInsureState = true" :content="goodActionInfo" />
     <popup-with-iframe
       v-model="popupShow"
       :title="pupopData.title"
@@ -52,9 +48,12 @@
       <cps-process-detail v-if="currentPupopIndex === 5" :process-data="processDetail" />
       <cps-rate v-if="currentPupopIndex === 6" />
     </popup-with-iframe>
-    <record-layer v-model="showLayer" desc="敬请期待" />
-    <go-insure-dialog v-model="goInsureState" />
-  </div>
+    <go-insure-dialog
+      v-model="goInsureState"
+      :title="headerInfo.title"
+      :pay-data="goodBuyModalInfo"
+    />
+  </cr-form>
 </template>
 
 <script>
@@ -65,7 +64,6 @@ import CrRadioBtn from "@/components/CrRadioBtn";
 import Card from "@/components/Card";
 import Copyright from "@/components/Copyright";
 import GoodAction from "@/components/GoodAction";
-import RecordLayer from "@/components/RecordLayer";
 import Collapse from "@/components/Collapse";
 
 import DetailHeader from "./modules/DetailHeader";
@@ -105,7 +103,6 @@ export default {
     GoInsureDialog,
     CpsProcessDetail,
     CpsRate,
-    RecordLayer,
     PlanTip,
     InsurePersonForm,
     AutoDeduct,
@@ -159,6 +156,14 @@ export default {
       }
       this.currentPupopIndex = index;
       this.popupShow = true;
+    },
+    onSubmit(values) {
+      console.log("submit", values);
+    },
+    onFailed(errorInfo) {
+      const { errors } = errorInfo;
+      this.$notify({ type: "warning", message: errors[0].message });
+      this.goInsureState = true;
     }
   }
 };

src/views/Goods/Detail/LIDetail.vue

@@ -14,7 +14,7 @@
     <div class="det-body">
       <card
         title="保险计划"
-        :footer="true"
+        footer="true"
         :option="['查看详情']"
         @option-click="openIframePupop(4)"
       >
@@ -69,11 +69,7 @@
     </div>
     <detail-footer :company-info="companyInfo" />
     <copyright />
-    <good-action
-      @click="goInsureState = true"
-      @leftClick="modalShow = true"
-      :content="goodActionInfo"
-    />
+    <good-action @leftClick="goInsureState = true" :content="goodActionInfo" />
     <popup-with-iframe
       v-model="popupShow"
       :title="pupopData.title"
@@ -83,8 +79,11 @@
       <cps-process-detail v-if="currentPupopIndex === 5" :process-data="processDetail" />
       <cps-rate v-if="currentPupopIndex === 6" />
     </popup-with-iframe>
-    <record-layer v-model="showLayer" desc="敬请期待" />
-    <go-insure-dialog v-model="goInsureState" />
+    <go-insure-dialog
+      v-model="goInsureState"
+      :title="headerInfo.title"
+      :pay-data="goodBuyModalInfo"
+    />
   </div>
 </template>
 
@@ -96,7 +95,6 @@ import CrRadioBtn from "@/components/CrRadioBtn";
 import Card from "@/components/Card";
 import Copyright from "@/components/Copyright";
 import GoodAction from "@/components/GoodAction";
-import RecordLayer from "@/components/RecordLayer";
 import Collapse from "@/components/Collapse";
 
 import DetailHeader from "./modules/DetailHeader";
@@ -135,7 +133,6 @@ export default {
     GoInsureDialog,
     CpsProcessDetail,
     CpsRate,
-    RecordLayer,
     PlanTip,
     NavTab,
     ProtocolRead

src/views/Goods/Detail/MIDetail.vue

@@ -37,11 +37,7 @@
     </div>
     <detail-footer :company-info="companyInfo" />
     <copyright />
-    <good-action
-      @click="goInsureState = true"
-      @leftClick="modalShow = true"
-      :content="goodActionInfo"
-    />
+    <good-action @leftClick="goInsureState = true" :content="goodActionInfo" />
     <popup-with-iframe
       v-model="popupShow"
       :title="pupopData.title"
@@ -51,8 +47,11 @@
       <cps-process-detail v-if="currentPupopIndex === 5" :process-data="processDetail" />
       <cps-rate v-if="currentPupopIndex === 6" />
     </popup-with-iframe>
-    <record-layer v-model="showLayer" desc="敬请期待" />
-    <go-insure-dialog v-model="goInsureState" />
+    <go-insure-dialog
+      v-model="goInsureState"
+      :title="headerInfo.title"
+      :pay-data="goodBuyModalInfo"
+    />
   </div>
 </template>
 
@@ -64,7 +63,6 @@ import CrRadioBtn from "@/components/CrRadioBtn";
 import Card from "@/components/Card";
 import Copyright from "@/components/Copyright";
 import GoodAction from "@/components/GoodAction";
-import RecordLayer from "@/components/RecordLayer";
 import Collapse from "@/components/Collapse";
 
 import DetailHeader from "./modules/DetailHeader";
@@ -105,7 +103,6 @@ export default {
     GoInsureDialog,
     CpsProcessDetail,
     CpsRate,
-    RecordLayer,
     PlanTip,
     InsurePersonForm,
     AutoDeduct,

src/views/Goods/Detail/index.less

@@ -12,6 +12,9 @@
     display: block;
     height: 60px;
   }
+  @{deep} .cr-field--error-message {
+    display: none;
+  }
 }
 .intro {
   margin: 10px 0;;
@@ -98,4 +101,4 @@
     color: @gray-5;
     margin-bottom: 12px;
   }
-}
\ No newline at end of file
+}

src/views/Goods/Detail/index.vue

@@ -26,7 +26,7 @@ export default {
     };
   },
   mounted() {
-    // this.detailType = this.$route.query.type;
+    this.detailType = this.$route.query.type;
   }
 };
 </script>

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

@@ -22,7 +22,9 @@
           {{ props.det.sub }}
         </small>
         <h5 class="det-hd-insured-price" v-html="props.det.price"></h5>
-        <cr-button type="warning" block @click="listeners.click">立即开启保障</cr-button>
+        <cr-button type="warning" block @click="listeners.click" native-type="submit">
+          立即开启保障
+        </cr-button>
         <div class="det-hd-insured-people">
           已有
           <em>{{ props.det.insuredNum }}</em>

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

 <template>
-  <cr-popup
-    v-model="show"
-    :style="{ backgroundColor: 'transparent' }"
-    closeable
-    get-container="body"
-    close-icon="close"
-    class="panel-wrap"
-  >
-    <div class="panel">
-      <div class="panel-head">
-        <h4>
-          立即拥有
-          <br />30万重疾轻症保障
-        </h4>
-      </div>
-      <div class="panel-body">
-        <compactCellGroup class="pay-det" :cell-data="payCellData" :text-bold="true" />
-        <div class="pay-tip">*不满意可随时退保</div>
-        <div class="pay-protocol">
-          <div class="pay-protocol-tip">投保前请阅读</div>
-          <div class="pay-protocol-link">
-            <a href="javascript:;" @click="openIframePupop(0)">保险条款</a>
-            <i></i>
-            <a href="javascript:;" @click="openIframePupop(1)">健康告知</a>
-            <i></i>
-            <a href="javascript:;" @click="openIframePupop(2)">投保须知与声明</a>
-            <i></i>
-            <a href="javascript:;" @click="openIframePupop(3)">服务协议</a>
-          </div>
-        </div>
-        <cr-button type="warning" size="large" block @click="go">好的 继续</cr-button>
+  <modal v-model="show" :closeable="true" cancel-btn="" confirm-btn="好的 继续" @confirm="go">
+    <h4 slot="title">立即拥有<br />{{ title }}</h4>
+    <compactCellGroup class="pay-det" :cell-data="payCellData" :text-bold="true" />
+    <div class="pay-tip">*不满意可随时退保</div>
+    <div class="pay-protocol">
+      <div class="pay-protocol-tip">投保前请阅读</div>
+      <div class="pay-protocol-link">
+        <a href="javascript:;" @click="openIframePupop(0)">保险条款</a>
+        <i></i>
+        <a href="javascript:;" @click="openIframePupop(1)">健康告知</a>
+        <i></i>
+        <a href="javascript:;" @click="openIframePupop(2)">投保须知与声明</a>
+        <i></i>
+        <a href="javascript:;" @click="openIframePupop(3)">服务协议</a>
       </div>
     </div>
-  </cr-popup>
+  </modal>
 </template>
 
 <script>
 import CompactCellGroup from "@/components/CompactCellGroup";
+import Modal from "@/components/Modal";
 const DIALOG_CHANGE_EVENT = "input";
 export default {
   name: "GoInsureDialog",
   components: {
-    CompactCellGroup
+    CompactCellGroup,
+    Modal
   },
   props: {
-    value: null
+    value: null,
+    title: {
+      type: String,
+      default: ""
+    },
+    payData: {
+      type: Array,
+      default() {
+        return [];
+      }
+    }
   },
   data() {
     return {
@@ -53,10 +48,7 @@ export default {
         { title: "首月保费", value: "3元" },
         {
           title: "次月保费",
-          value: {
-            tpl: "5.6元/月起（共11期）",
-            longTxt: true
-          }
+          value: "5.6元/月起（共11期）"
         }
       ]
     };

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

@@ -2,31 +2,71 @@
   <card title="请填写投保信息">
     <h6 class="insure-form-title">本人信息</h6>
     <cr-cell-group class="insure-form">
-      <cr-field v-model="formData.selfName" placeholder="请输入投保人姓名" label="姓名" />
-      <cr-field v-model="formData.selfIdNo" placeholder="信息保密，仅用于投保" label="身份证号" />
-      <cr-field v-model="formData.selfIdNo" placeholder="请输入您的手机号码" label="手机号码" />
-      <cr-field v-model="formData.selfIdNo" placeholder="请输入短信验证码" label="验证码">
+      <cr-field
+        name="selfName"
+        v-model="formData.selfName"
+        placeholder="请输入投保人姓名"
+        label="姓名"
+        :rules="[{ required: true, message: '请输入姓名' }]"
+      />
+      <cr-field
+        name="selfIdNo"
+        v-model="formData.selfIdNo"
+        placeholder="信息保密，仅用于投保"
+        label="身份证号"
+        :rules="[{ required: true, message: '请输入身份证号' }]"
+      />
+      <cr-field
+        name="selfIdNo"
+        v-model="formData.selfIdNo"
+        placeholder="请输入您的手机号码"
+        label="手机号码"
+        :rules="[{ required: true, message: '请输入手机号码' }]"
+      />
+      <cr-field
+        name="selfIdNo"
+        v-model="formData.selfIdNo"
+        placeholder="请输入短信验证码"
+        label="验证码"
+        :rules="[{ required: true, message: '请输入验证码' }]"
+      >
         <a href="javascript:;" slot="button">获取验证码</a>
       </cr-field>
     </cr-cell-group>
     <h6 class="insure-form-title">为谁投保</h6>
     <cr-radio-btn v-model="formData.insured" :radio-data="radioOptions.insuredOptions" />
     <cr-cell-group class="insure-form">
-      <cr-field v-model="formData.relativeName" placeholder="请输入投保人姓名" label="姓名" />
       <cr-field
+        name="relativeName"
+        v-model="formData.relativeName"
+        placeholder="请输入被保人姓名"
+        label="姓名"
+        :rules="[{ required: true, message: '请输入姓名' }]"
+      />
+      <cr-field
+        name="relativeIdNo"
         v-model="formData.relativeIdNo"
         placeholder="信息保密，仅用于投保"
         label="身份证号"
+        :rules="[{ required: true, message: '请输入身份证号' }]"
       />
       <cr-cell class="insure-form-item_nobg" v-if="radioOptions.medicalOptions">
         <template slot="title">
           <span>有无医保</span>
           <cr-icon type="question-o" color="#ccc" />
         </template>
-        <cr-radio-btn v-model="formData.medical" :radio-data="radioOptions.medicalOptions" />
+        <cr-radio-btn
+          name="medical"
+          v-model="formData.medical"
+          :radio-data="radioOptions.medicalOptions"
+        />
       </cr-cell>
       <cr-cell title="缴费方式" class="insure-form-item_nobg">
-        <cr-radio-btn v-model="formData.payway" :radio-data="radioOptions.paywayOptions" />
+        <cr-radio-btn
+          name="payway"
+          v-model="formData.payway"
+          :radio-data="radioOptions.paywayOptions"
+        />
       </cr-cell>
     </cr-cell-group>
   </card>

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

@@ -91,7 +91,7 @@ export default {
   position: fixed;
   top: 0;
   left: 0;
-  z-index: 200;
+  z-index: 98;
   width: 100%;
   .cr-tabbar {
     background-color: @white;

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

@@ -2,20 +2,26 @@
   <card :title="title" :option="options" footer="协议" @option-click="openIframe(6)">
     <compactCellGroup :cell-data="cellData" />
     <slot></slot>
-    <div class="insure-form-pact" slot="footer">
-      <cr-checkbox shape="round" icon-size="13px" v-model="pact" checked-color="#FFC842">
-        投保前请阅读
-      </cr-checkbox>
-      <div class="insure-form-pact-link">
-        <a href="javascript:;" @click="openIframe(0)">保险条款</a>
-        <i></i>
-        <a href="javascript:;" @click="openIframe(1)">健康告知</a>
-        <i></i>
-        <a href="javascript:;" @click="openIframe(2)">投保须知与声明</a>
-        <i></i>
-        <a href="javascript:;" @click="openIframe(3)">服务协议</a>
+    <template v-slot:footer>
+      <div class="insure-form-pact" slot="footer">
+        <cr-field name="pact" :rules="[{ required: true, message: '请阅读协议并确认' }]">
+          <template #input>
+            <cr-checkbox shape="round" icon-size="13px" v-model="pact" checked-color="#FFC842">
+              投保前请阅读
+            </cr-checkbox>
+          </template>
+        </cr-field>
+        <div class="insure-form-pact-link">
+          <a href="javascript:;" @click="openIframe(0)">保险条款</a>
+          <i></i>
+          <a href="javascript:;" @click="openIframe(1)">健康告知</a>
+          <i></i>
+          <a href="javascript:;" @click="openIframe(2)">投保须知与声明</a>
+          <i></i>
+          <a href="javascript:;" @click="openIframe(3)">服务协议</a>
+        </div>
       </div>
-    </div>
+    </template>
   </card>
 </template>
 
@@ -84,6 +90,13 @@ export default {
     justify-content: space-between;
     align-items: center;
     padding: 14px 0;
+    .cr-cell {
+      padding: 0;
+      width: auto;
+      &::after {
+        display: none;
+      }
+    }
     @{deep} .cr-checkbox__label {
       font-size: @font-size-11;
       color: @gray-4;

src/views/Goods/Inform/index.vue

@@ -30,19 +30,16 @@
       <cr-button @click="$router.back()">不符合</cr-button>
       <cr-button type="warning" @click="conform">符合，立即投保</cr-button>
     </div>
-    <record-layer v-model="showLayer" desc="不能支付,敬请期待"></record-layer>
   </div>
 </template>
 
 <script>
 import card from "@/components/Card";
-import RecordLayer from "@/components/RecordLayer";
 
 export default {
   name: "GoodsInform",
   components: {
-    card,
-    RecordLayer
+    card
   },
   data() {
     return {

src/views/Policy/Add/index.less

+@import "../../../style/var.less";
+@import "../../../style/mixins.less";
+
+.container {
+  overflow: hidden;
+  background-color: @white;
+  &::after {
+    content: " ";
+    display: block;
+    height: 70px;
+  }
+}
+.policy {
+  &-tip {
+    background: rgba(255, 228, 162, 1);
+    border-radius: @border-radius-sm;
+    font-size: @font-size-14;
+    color: @red;
+    line-height: @line-height-sm;
+    padding: @padding-xs + 1;
+    text-align: center;
+    &-wrap {
+      padding: @padding-md + 3 @padding-md;
+    }
+  }
+  &-form {
+    padding: 0 @padding-md;
+    .svg-icon {
+      height: 16px;
+      width: 16px;
+      align-self: center;
+    }
+    .radio-btn {
+      width: 100%;
+      justify-content: start;
+      flex-wrap: wrap;
+      margin-bottom: -8px;
+      @{deep} .cr-radio {
+        box-shadow: none;
+        border: 1px solid #ccc;
+        height: 24px;
+        line-height: 24px;
+        flex: none;
+        min-width: 40px;
+        padding: 0 15px;
+        margin-right: 6px;
+        margin-bottom: 8px;
+        &__label {
+          color: #aaa;
+        }
+        &.checked {
+          border-color: @orange-light;
+          color: @black;
+          .cr-radio__label {
+            color: @black;
+          }
+        }
+      }
+    }
+    @{deep} .cr-cell {
+      color: @black;
+      padding: @padding-sm 0;
+      &-group {
+        margin-bottom: 32px;
+        &__title {
+          font-size: @font-size-18;
+          font-weight: @font-weight-bold;
+          color: @black;
+          line-height: @line-height-lg;
+          padding: @padding-xs + 1 0 @padding-lg;
+        }
+        &::after {
+          border-top-width: 0;
+        }
+      }
+      &__title {
+        width: 100px !important;
+      }
+      &:not(:last-child)::after {
+        border-color: #ECE9E9;
+        left: 0;
+      }
+    }
+  }
+}
+.form-unit {
+  color: @black;
+}
\ No newline at end of file

src/views/Policy/Add/index.vue

+<template>
+  <div class="container">
+    <div class="policy-tip-wrap">
+      <div class="policy-tip">您所填写的数据，仅用于投保，平台将严格保密</div>
+    </div>
+    <cr-form class="policy-form" scroll-to-error @submit="onFormSubmit" @failed="onFormFailed">
+      <cr-cell-group title="投保人信息">
+        <cr-field
+          v-model="formData.text"
+          name="selfName"
+          label="姓名"
+          placeholder="请输入投保人姓名"
+          :rules="[{ require: true, message: '请输入投保人姓名' }]"
+        />
+        <cr-field
+          v-model="formData.text"
+          name="selfName"
+          label="身份证号"
+          placeholder="请填写投保人身份证号"
+          :rules="[{ require: true, message: '请填写投保人身份证号' }]"
+        />
+        <cr-field
+          v-model="formData.text"
+          name="selfName"
+          type="tel"
+          label="手机号"
+          placeholder="请填写投保人手机号"
+          :rules="[{ require: true, message: '请填写投保人手机号' }]"
+        />
+        <cr-field
+          v-model="formData.text"
+          name="selfName"
+          type="email"
+          label="电子邮箱"
+          placeholder="用户接收电子保单"
+          :rules="[{ require: true, message: '请填写电子邮箱' }]"
+        />
+        <cr-field
+          v-model="formData.text"
+          name="selfName"
+          label="年收入"
+          type="digit"
+          placeholder="请输入投保人年收入"
+          :rules="[{ require: true, message: '请输入投保人年收入' }]"
+        />
+        <cr-field
+          name="selfName"
+          label="居住省市"
+          readonly
+          :rules="[{ require: true, message: '请选择投保人居住省市' }]"
+        >
+          <template #input>
+            <popup-area-picker v-model="formData.text" placeholder="请选择投保人居住省市" />
+          </template>
+          <svg-icon icon-class="triangle-right" slot="button" />
+        </cr-field>
+        <cr-field
+          v-model="formData.text"
+          name="selfName"
+          label="详细地址"
+          placeholder="请输入居住详细地址"
+          :rules="[{ require: true, message: '请输入居住详细地址' }]"
+        />
+        <cr-field
+          name="selfName"
+          label="职业"
+          :rules="[{ require: true, message: '请选择投保人职业' }]"
+        >
+          <template #input>
+            <popup-picker
+              :picker-data="['老师', '工人']"
+              v-model="formData.text"
+              placeholder="请选择投保人职业"
+            />
+          </template>
+          <svg-icon icon-class="triangle-right" slot="button" />
+        </cr-field>
+        <cr-field
+          v-model="formData.text"
+          name="selfName"
+          label="身份证有效期"
+          :rules="[{ require: true, message: '请选择身份证有效期' }]"
+        >
+          <template #input>
+            <cr-radio-btn v-model="formData.planValue" :radio-data="idCardInvaildOptions" />
+          </template>
+        </cr-field>
+        <cr-field
+          name="selfName"
+          label="有效期至"
+          readonly
+          :rules="[{ require: true, message: '请选择您的证件有效止期' }]"
+        >
+          <template #input>
+            <popup-date-picker v-model="formData.text" placeholder="请选择您的证件有效止期" />
+          </template>
+          <svg-icon icon-class="triangle-right" slot="button" />
+        </cr-field>
+      </cr-cell-group>
+      <cr-cell-group title="被保人信息">
+        <cr-field v-model="formData.text" name="selfName" label="为谁投保">
+          <template #input>
+            <cr-radio-btn v-model="formData.planValue" :radio-data="insuredOptions" />
+          </template>
+        </cr-field>
+        <cr-field
+          v-model="formData.text"
+          name="selfName"
+          label="有无社保"
+          :rules="[{ require: true, message: '请选择社保状态' }]"
+        >
+          <template #input>
+            <cr-radio-btn v-model="formData.planValue" :radio-data="socialSecOptions" />
+          </template>
+        </cr-field>
+        <cr-field
+          v-model="formData.text"
+          name="selfName"
+          label="身高"
+          type="digit"
+          placeholder="请填写被保人身高"
+          :rules="[{ require: true, message: '请填写被保人身高' }]"
+        >
+          <div class="form-unit" slot="button">厘米</div>
+        </cr-field>
+        <cr-field
+          v-model="formData.text"
+          name="selfName"
+          label="体重"
+          type="digit"
+          placeholder="请填写被保人体重"
+          :rules="[{ require: true, message: '请填写被保人体重' }]"
+        >
+          <div class="form-unit" slot="button">公斤</div>
+        </cr-field>
+        <cr-field
+          v-model="formData.text"
+          name="selfName"
+          label="姓名"
+          placeholder="请输入投保人姓名"
+          :rules="[{ require: true, message: '请输入投保人姓名' }]"
+        />
+        <cr-field
+          v-model="formData.text"
+          name="selfName"
+          label="身份证号"
+          placeholder="请填写投保人身份证号"
+          :rules="[{ require: true, message: '请填写投保人身份证号' }]"
+        />
+        <cr-field
+          v-model="formData.text"
+          name="selfName"
+          label="手机号"
+          type="tel"
+          placeholder="请填写投保人手机号"
+          :rules="[{ require: true, message: '请填写投保人手机号' }]"
+        />
+        <cr-field
+          v-model="formData.text"
+          name="selfName"
+          label="年收入"
+          type="digit"
+          placeholder="请输入投保人年收入"
+          :rules="[{ require: true, message: '请输入投保人年收入' }]"
+        />
+        <cr-field
+          v-model="formMaskData.text"
+          name="selfName"
+          label="居住省市"
+          readonly
+          placeholder="请选择投保人居住省市"
+          :rules="[{ require: true, message: '请选择投保人居住省市' }]"
+          @click.native="handleShowAreaPopup(true)"
+        >
+          <svg-icon icon-class="triangle-right" slot="button" />
+        </cr-field>
+        <cr-field
+          v-model="formData.text"
+          name="selfName"
+          label="详细地址"
+          placeholder="请输入居住详细地址"
+          :rules="[{ require: true, message: '请输入居住详细地址' }]"
+        />
+        <cr-field
+          v-model="formData.text"
+          name="selfName"
+          label="职业"
+          readonly
+          placeholder="请选择投保人职业"
+          :rules="[{ require: true, message: '请选择投保人职业' }]"
+          @click.native="handleShowAreaPopup(true)"
+        >
+          <svg-icon icon-class="triangle-right" slot="button" />
+        </cr-field>
+        <cr-field
+          v-model="formData.text"
+          name="selfName"
+          label="身份证有效期"
+          :rules="[{ require: true, message: '请选择身份证有效期' }]"
+        >
+          <template #input>
+            <cr-radio-btn v-model="formData.planValue" :radio-data="idCardInvaildOptions" />
+          </template>
+        </cr-field>
+        <cr-field
+          v-model="formData.text"
+          name="selfName"
+          label="有效期至"
+          readonly
+          placeholder="请选择您的证件有效止期"
+          :rules="[{ require: true, message: '请选择您的证件有效止期' }]"
+          @click.native="handleShowAreaPopup(true)"
+        >
+          <svg-icon icon-class="triangle-right" slot="button" />
+        </cr-field>
+      </cr-cell-group>
+      <cr-cell-group title="保障方案">
+        <cr-field
+          name="selfName"
+          label="投保限额"
+          :rules="[{ require: true, message: '请选择投保限额' }]"
+        >
+          <template #input>
+            <cr-stepper v-model="formData.stepper" disable-input :step="10" />
+          </template>
+        </cr-field>
+        <cr-field
+          v-model="formData.text"
+          name="selfName"
+          label="保险期限"
+          :rules="[{ require: true, message: '请选择保险期限' }]"
+        >
+          <template #input>
+            <cr-radio-btn v-model="formData.planValue" :radio-data="termOptions" />
+          </template>
+        </cr-field>
+        <cr-field
+          v-model="formData.text"
+          name="selfName"
+          label="交费方式"
+          :rules="[{ require: true, message: '请选择交费方式' }]"
+        >
+          <template #input>
+            <cr-radio-btn v-model="formData.planValue" :radio-data="paywayOptions" />
+          </template>
+        </cr-field>
+        <cr-field
+          v-model="formData.text"
+          name="selfName"
+          label="为谁投保"
+          :rules="[{ require: true, message: '请选择为谁投保' }]"
+        >
+          <template #input>
+            <cr-radio-btn v-model="formData.planValue" :radio-data="benefitOptions" />
+          </template>
+        </cr-field>
+        <cr-field
+          v-model="formData.text"
+          name="selfName"
+          label="生效日期"
+          readonly
+          :rules="[{ require: true, message: '请选择生效日期' }]"
+        />
+        <cr-field
+          v-model="formData.text"
+          name="selfName"
+          label="受益人"
+          readonly
+          :rules="[{ require: true, message: '请选择受益人' }]"
+        />
+      </cr-cell-group>
+      <good-action @leftClick="goInsureState = true" :content="goodActionInfo" />
+    </cr-form>
+    <go-insure-dialog
+      v-model="goInsureState"
+      :title="headerInfo.title"
+      :pay-data="goodBuyModalInfo"
+    />
+  </div>
+</template>
+
+<script>
+import GoodAction from "@/components/GoodAction";
+import CrRadioBtn from "@/components/CrRadioBtn";
+import PopupPicker from "@/components/PopupPicker";
+import PopupAreaPicker from "@/components/PopupAreaPicker";
+import PopupDatePicker from "@/components/PopupDatePicker";
+import GoInsureDialog from "@/views/Goods/Detail/modules/GoInsureDialog";
+
+import Detail from "@/api/detail.huagui.shouxian";
+
+export default {
+  name: "AddPolicy",
+  components: {
+    GoodAction,
+    CrRadioBtn,
+    GoInsureDialog,
+    PopupPicker,
+    PopupAreaPicker,
+    PopupDatePicker
+  },
+  data() {
+    return {
+      ...Detail,
+      goInsureState: false,
+      formData: {},
+      formMaskData: {},
+      idCardInvaildOptions: [
+        { label: "非长期", value: "1" },
+        { label: "长期", value: "2" }
+      ],
+      socialSecOptions: [
+        { label: "有社保", value: "1" },
+        { label: "无社保", value: "2" }
+      ],
+      insuredOptions: [
+        { label: "本人", value: "1" },
+        { label: "配偶", value: "2" },
+        { label: "父母", value: "3" },
+        { label: "子女", value: "4" }
+      ],
+      termOptions: [
+        { label: "10年", value: "1" },
+        { label: "20年", value: "2" },
+        { label: "30年", value: "3" },
+        { label: "保至60周岁", value: "4" },
+        { label: "保至65周岁", value: "5" },
+        { label: "保至70周岁", value: "6" }
+      ],
+      paywayOptions: [
+        { label: "年交", value: "1" },
+        { label: "月交", value: "2" }
+      ],
+      benefitOptions: [
+        { label: "交5年", value: "1" },
+        { label: "交10年", value: "2" },
+        { label: "交20年", value: "3" },
+        { label: "交30年", value: "4" },
+        { label: "一次付清", value: "5" }
+      ]
+    };
+  },
+  mounted() {},
+  methods: {
+    onFormSubmit(values) {
+      console.log("submit", values);
+    },
+    onFormFailed(errorInfo) {
+      const { errors } = errorInfo;
+      this.$notify({ type: "warning", message: errors[0].message });
+      this.goInsureState = true;
+    }
+  }
+};
+</script>
+<style lang="less" src="./index.less" scoped></style>