feat: 顾问推荐弹框；保费推荐页面

src/api/detail.huagui.shouxian.js

@@ -4,7 +4,7 @@
  * @Description: 华贵大麦2020定期寿险
  * @Date: 2020-07-27 15:46:37
  * @LastEditors: gzw
- * @LastEditTime: 2020-07-28 14:57:28
+ * @LastEditTime: 2020-07-29 18:55:06
  */
 
 import goodsBg from "@/assets/goods/detail/shouxian/bg.png";
@@ -102,7 +102,7 @@ export default {
     },
     { title: "保险计划" },
     { title: "理赔信息" },
-    { title: "完整费率" },
+    { title: "算一算保费" },
     {
       title: "自动续保服务协议",
       url: "http://mangguo-contract.qthbx.com/zi-dong-xu-bao-fu-wu-xie-yi-v1/"

src/components/PopupAreaPicker.vue

@@ -5,7 +5,8 @@
       :class="{ placeholder: !String(pickerValShow) }"
       @click="show = true"
     >
-      {{ pickerValShow || placeholder }}
+      <span>{{ pickerValShow || placeholder }}</span>
+      <svg-icon icon-class="triangle-right" slot="button" />
     </div>
     <cr-popup v-model="show" position="bottom" get-container="body">
       <cr-area ref="area" :list="areaList" @cancel="onCancel" @confirm="onConfirm" />
@@ -46,6 +47,13 @@ export default {
     height: 24px;
     color: #333;
     font-size: 14px;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+  }
+  .svg-icon {
+    height: 16px;
+    width: 16px;
   }
   .placeholder {
     color: #ccc;

src/components/PopupDatePicker.vue

@@ -5,7 +5,8 @@
       :class="{ placeholder: !String(pickerValShow) }"
       @click="show = true"
     >
-      {{ pickerValShow || placeholder }}
+      <span>{{ pickerValShow || placeholder }}</span>
+      <svg-icon icon-class="triangle-right" slot="button" />
     </div>
     <cr-popup v-model="show" position="bottom" get-container="body">
       <cr-date-picker ref="datepicker" @confirm="onConfirm" @cancel="onCancel" />
@@ -39,6 +40,10 @@ export default {
     color: #333;
     font-size: 14px;
   }
+  .svg-icon {
+    height: 16px;
+    width: 16px;
+  }
   .placeholder {
     color: #ccc;
   }

src/components/PopupPicker.vue

@@ -5,7 +5,8 @@
       :class="{ placeholder: !String(pickerValShow) }"
       @click="show = true"
     >
-      {{ pickerValShow || placeholder }}
+      <span>{{ pickerValShow || placeholder }}</span>
+      <svg-icon icon-class="triangle-right" slot="button" />
     </div>
     <cr-popup v-model="show" position="bottom" get-container="body">
       <cr-picker
@@ -40,6 +41,10 @@ export default {
     color: #333;
     font-size: 14px;
   }
+  .svg-icon {
+    height: 16px;
+    width: 16px;
+  }
   .placeholder {
     color: #ccc;
   }

src/components/PopupWithIframe.vue

@@ -82,12 +82,12 @@ export default {
 .body-wrap-mixin {
   overflow-x: hidden;
   overflow-y: auto;
-  height: 75vh;
+  height: 80vh;
   padding: @padding-lg;
 }
 .protocol {
   z-index: 200;
-  height: 75vh;
+  height: 80vh;
   padding-top: 48px;
   overflow: hidden;
   @{deep} .cr-icon {
@@ -123,7 +123,7 @@ export default {
       bottom: 0;
       left: 0;
       z-index: 201;
-      height: 75vh;
+      height: 80vh;
       overflow: scroll;
       width: 100vw;
       -webkit-overflow-scrolling: touch;

src/views/Goods/Detail/LIDetail.vue

@@ -23,7 +23,7 @@
           <div class="cal-footer-num">
             <h4>155<small>元/年起</small></h4>
           </div>
-          <cr-button type="warning">算一算保费</cr-button>
+          <cr-button type="warning" @click="openIframePupop(6)">算一算保费</cr-button>
         </div>
       </card>
       <card class="intro" id="det_intro">
@@ -69,7 +69,11 @@
     </div>
     <detail-footer :company-info="companyInfo" />
     <copyright />
-    <good-action @click="$router.push('/policy/add')" :content="goodActionInfo" />
+    <good-action
+      @click="$router.push('/policy/add')"
+      :content="goodActionInfo"
+      :class="{ 'cal-fee': currentPupopIndex === 6 }"
+    />
     <popup-with-iframe
       v-model="popupShow"
       :title="pupopData.title"
@@ -77,7 +81,7 @@
       :url="pupopData.url"
     >
       <cps-process-detail v-if="currentPupopIndex === 5" :process-data="processDetail" />
-      <cps-rate v-if="currentPupopIndex === 6" />
+      <cal-insured-fee v-if="currentPupopIndex === 6" />
     </popup-with-iframe>
   </div>
 </template>
@@ -100,7 +104,7 @@ import CpsProcess from "./modules/CpsProcess";
 import CpsQa from "./modules/CpsQA";
 import PopupWithIframe from "@/components/PopupWithIframe";
 import CpsProcessDetail from "./modules/CpsProcessDetail";
-import CpsRate from "./modules/CpsRate";
+import CalInsuredFee from "./modules/CalInsuredFee";
 import PlanTip from "./modules/PlanTip";
 import ProtocolRead from "./modules/ProtocolRead";
 import NavTab from "./modules/NavTab";
@@ -125,10 +129,10 @@ export default {
     PopupWithIframe,
     GoodAction,
     CpsProcessDetail,
-    CpsRate,
     PlanTip,
     NavTab,
-    ProtocolRead
+    ProtocolRead,
+    CalInsuredFee
   },
   data() {
     return {
@@ -143,6 +147,11 @@ export default {
       showLayer: false
     };
   },
+  watch: {
+    popupShow(val) {
+      if (!val && this.currentPupopIndex === 6) this.currentPupopIndex = null;
+    }
+  },
   computed: {
     pupopData() {
       const { popupArray, currentPupopIndex } = this;

src/views/Goods/Detail/index.less

@@ -102,3 +102,6 @@
     margin-bottom: 12px;
   }
 }
+.cal-fee {
+  z-index: 202;
+}
\ No newline at end of file

src/views/Goods/Detail/index.vue

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

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

+<template>
+  <modal
+    v-model="show"
+    :closeable="true"
+    cancel-btn=""
+    confirm-btn="0.99元聘请"
+    @confirm="go"
+    class="rec"
+  >
+    <div class="rec-title" slot="title">
+      <small class="rec-title_small">亲爱的用户</small>
+      <h4 class="rec-title_h4">芒果保险恭喜您<br />受邀0.99元聘请保险顾问</h4>
+    </div>
+    <div class="rec-reason">
+      <div class="rec-reason-item">
+        <svg-icon icon-class="check-circle" />
+        <span class="plan-tip_offset">【省钱】帮您最高节省50%保费</span>
+      </div>
+      <div class="rec-reason-item">
+        <svg-icon icon-class="check-circle" />
+        <span class="plan-tip_offset">【放心】中立客观的量身定制方案</span>
+      </div>
+      <div class="rec-reason-item">
+        <svg-icon icon-class="check-circle" />
+        <span class="plan-tip_offset">【专业】帮您解读条款做到有效投保 </span>
+      </div>
+    </div>
+    <div class="rec-discount">限时优惠 <del>原价199元</del></div>
+  </modal>
+</template>
+
+<script>
+import Modal from "@/components/Modal";
+const DIALOG_CHANGE_EVENT = "input";
+export default {
+  name: "AdvisorRecDialog",
+  components: {
+    Modal
+  },
+  props: {
+    value: null
+  },
+  data() {
+    return {
+      show: false
+    };
+  },
+  watch: {
+    value: {
+      immediate: true,
+      handler(val) {
+        this.show = val;
+      }
+    },
+    show(val) {
+      this.$emit(DIALOG_CHANGE_EVENT, val);
+    }
+  },
+  methods: {
+    go() {
+      this.$router.push("/goods/inform");
+    }
+  }
+};
+</script>
+
+<style lang="less" scoped>
+@import "../../../../style/var.less";
+.rec {
+  &-title {
+    &_small {
+      font-size: @font-size-16;
+      color: @gray-4;
+      line-height: @line-height-sm + 3;
+    }
+    &_h4 {
+      font-size: @font-size-18;
+      font-weight: @font-weight-bold;
+      color: @black;
+      line-height: @line-height-lg + 1;
+    }
+  }
+  &-reason {
+    margin: 10px 0 40px;
+    .svg-icon {
+      width: 14px;
+      height: 14px;
+    }
+    &-item {
+      font-size: @font-size-14;
+      color: @gray-4;
+      line-height: @line-height-lg;
+    }
+  }
+  &-discount {
+    position: absolute;
+    bottom: -78px;
+    left: 0;
+    right: 0;
+    margin: auto;
+    font-size: @font-size-12;
+    color: @red;
+    line-height: @line-height-sm;
+    text-align: center;
+  }
+  @{deep} .panel-body {
+    position: relative;
+  }
+  @{deep} .panel-foot {
+    padding-bottom: 50px;
+  }
+}
+</style>

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

+<template>
+  <cr-form class="policy-form" scroll-to-error @submit="onFormSubmit" @failed="onFormFailed">
+    <cr-cell-group title="被保人年龄需满足18周岁~60周岁">
+      <cr-field v-model="formData.text" name="selfName" label="出生日期" readonly>
+        <template #input>
+          <popup-date-picker v-model="formData.text" placeholder="请选择被保人出生日期" />
+        </template>
+      </cr-field>
+      <cr-field name="selfName" label="保障额度">
+        <template #input>
+          <cr-radio-btn v-model="formData.planValue" :radio-data="countOptions" />
+        </template>
+      </cr-field>
+      <cr-field v-model="formData.text" name="selfName" label="保险期限">
+        <template #input>
+          <cr-radio-btn v-model="formData.planValue" :radio-data="termOptions" />
+        </template>
+      </cr-field>
+      <cr-field v-model="formData.text" name="selfName" label="交费年限">
+        <template #input>
+          <cr-radio-btn v-model="formData.planValue" :radio-data="benefitOptions" />
+        </template>
+      </cr-field>
+      <cr-field v-model="formData.text" name="selfName" label="性别">
+        <template #input>
+          <cr-radio-btn v-model="formData.planValue" :radio-data="sexOptions" />
+        </template>
+      </cr-field>
+      <cr-field v-model="formData.text" name="selfName" label="交费方式">
+        <template #input>
+          <cr-radio-btn v-model="formData.planValue" :radio-data="paywayOptions" />
+        </template>
+      </cr-field>
+    </cr-cell-group>
+  </cr-form>
+</template>
+
+<script>
+import CrRadioBtn from "@/components/CrRadioBtn";
+import PopupDatePicker from "@/components/PopupDatePicker";
+
+export default {
+  name: "CalInsuredFee",
+  components: {
+    CrRadioBtn,
+    PopupDatePicker
+  },
+  data() {
+    return {
+      formData: {},
+      sexOptions: [
+        { label: "男", value: "1" },
+        { label: "女", value: "2" }
+      ],
+      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" }
+      ],
+      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: "10年", value: "2" },
+        { label: "20年", value: "3" },
+        { label: "30年", value: "4" }
+      ]
+    };
+  },
+  watch: {
+    formData: {
+      deep: true,
+      handler() {
+        this.calFee();
+      }
+    }
+  },
+  mounted() {},
+  methods: {
+    onFormSubmit(values) {
+      console.log("submit", values);
+    },
+    onFormFailed(errorInfo) {
+      const { errors } = errorInfo;
+      this.$notify({ type: "warning", message: errors[0].message });
+    },
+    calFee() {}
+  }
+};
+</script>
+<style lang="less" scoped>
+@import "../../../Policy/Add/index.less";
+.policy-form {
+  padding: 0;
+  @{deep} .cr-cell {
+    &-group {
+      &__title {
+        font-size: @font-size-16;
+        padding: 0 0 @padding-sm;
+      }
+    }
+  }
+}
+</style>

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

@@ -2,6 +2,7 @@
   <modal v-model="show" :closeable="true" cancel-btn="" confirm-btn="好的 继续" @confirm="go">
     <h4 slot="title" class="pay-title">立即拥有<br />{{ title }}</h4>
     <compactCellGroup class="pay-det" :cell-data="payCellData" :text-bold="true" />
+    <slot>
       <div class="pay-tip">*不满意可随时退保</div>
       <div class="pay-protocol">
         <div class="pay-protocol-tip">投保前请阅读</div>
@@ -15,6 +16,7 @@
           <a href="javascript:;" @click="openIframePupop(3)">服务协议</a>
         </div>
       </div>
+    </slot>
   </modal>
 </template>
 

src/views/Policy/Add/index.less

@@ -25,11 +25,6 @@
   }
   &-form {
     padding: 0 @padding-md;
-    .svg-icon {
-      height: 16px;
-      width: 16px;
-      align-self: center;
-    }
     .radio-btn {
       width: 100%;
       justify-content: start;
@@ -86,3 +81,35 @@
 .form-unit {
   color: @black;
 }
+
+.pay&-protocol {
+  margin-bottom: 8px;
+  &-tip {
+    font-size: @font-size-12;
+    color: @gray-4;
+    line-height: @line-height-lg;
+    margin: 15px 0 10px;
+    display: flex;
+    justify-content: space-between;
+  }
+  &-link {
+    a {
+      font-size: @font-size-12;
+      vertical-align: middle;
+    }
+    i {
+      display: inline-block;
+      width: 0;
+      height: 12px;
+      border-right: 1px @blue solid;
+      vertical-align: middle;
+      margin: 0 2px;
+    }
+    &_wrap {
+      a {
+        display: block;
+        margin-top: 8px;
+      }
+    }
+  }
+}
\ No newline at end of file

src/views/Policy/Add/index.vue

@@ -52,7 +52,6 @@
           <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"
@@ -73,7 +72,6 @@
               placeholder="请选择投保人职业"
             />
           </template>
-          <svg-icon icon-class="triangle-right" slot="button" />
         </cr-field>
         <cr-field
           v-model="formData.text"
@@ -94,7 +92,6 @@
           <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="被保人信息">
@@ -164,15 +161,14 @@
           :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" />
+          <template #input>
+            <popup-area-picker v-model="formData.text" placeholder="请选择投保人居住省市" />
+          </template>
         </cr-field>
         <cr-field
           v-model="formData.text"
@@ -182,15 +178,17 @@
           :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" />
+          <template #input>
+            <popup-picker
+              :picker-data="['老师', '工人']"
+              v-model="formData.text"
+              placeholder="请选择投保人职业"
+            />
+          </template>
         </cr-field>
         <cr-field
           v-model="formData.text"
@@ -203,15 +201,14 @@
           </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" />
+          <template #input>
+            <popup-date-picker v-model="formData.text" placeholder="请选择您的证件有效止期" />
+          </template>
         </cr-field>
       </cr-cell-group>
       <cr-cell-group title="保障方案">
@@ -275,7 +272,25 @@
       v-model="goInsureState"
       :title="headerInfo.title"
       :pay-data="goodBuyModalInfo"
-    />
+    >
+      <div class="pay-protocol">
+        <div class="pay-protocol-tip"><span>投保前请阅读</span><span>*不犹豫期免费退保</span></div>
+        <div class="pay-protocol-link">
+          <a href="javascript:;" @click="openIframePupop(0)">保险条款</a>
+          <i></i>
+          <a href="javascript:;" @click="openIframePupop(2)">投保须知与声明</a>
+          <i></i>
+          <a href="javascript:;" @click="openIframePupop(3)">服务协议</a>
+          <i></i>
+          <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(3)">税收居民身份证明</a>
+          <a href="javascript:;" @click="openIframePupop(3)">风控查询授权书</a>
+        </div>
+      </div>
+    </go-insure-dialog>
   </div>
 </template>