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-07 15:20:28
+ * @LastEditTime: 2020-08-10 14:51:04
  */
 
 import goodsBg from "@/assets/images/goods/detail/shouxian/bg.png";
@@ -82,7 +82,7 @@ export default {
   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: "健康告知",
@@ -102,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: {

src/api/detail.zhongan.yiwai.js

@@ -4,7 +4,7 @@
  * @Description:众安50万意外险
  * @Date: 2020-07-27 15:46:37
  * @LastEditors: gzw
- * @LastEditTime: 2020-08-07 16:25:27
+ * @LastEditTime: 2020-08-10 14:59:04
  */
 
 import goodsBg from "@/assets/images/goods/detail/yiwaixian/bg.png";
@@ -129,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: "健康告知",

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

@@ -335,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>
 
@@ -350,6 +357,7 @@ 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";
@@ -370,6 +378,7 @@ export default {
     PopupPicker,
     PopupAreaPicker,
     PopupDatePicker,
+    PopupWithIframe,
     Stepper
   },
   data() {
@@ -378,6 +387,8 @@ export default {
       headerInfo,
       calTimer: null,
       goInsureState: false,
+      popupShow: false,
+      currentPupopIndex: null,
       goodActionInfo: {},
       goodBuyModalInfo: [],
       policyFormData: JSON.parse(sessionStorage.getItem("policyFormData") || "{}"),
@@ -439,6 +450,9 @@ export default {
     };
   },
   watch: {
+    popupShow(val) {
+      if (!val && this.currentPupopIndex === 6) this.currentPupopIndex = null;
+    },
     headerInfo: {
       deep: true,
       handler(val) {
@@ -459,9 +473,7 @@ export default {
           clearTimeout(this.calTimer);
         }
         this.calTimer = setTimeout(() => {
-          this.$refs.policyForm.validate().then(() => {
-            this.calFee();
-          });
+          this.calFee();
         }, 600);
       }
     },
@@ -480,6 +492,10 @@ export default {
   },
   computed: {
     ...mapState(["showAuthXyqb"]),
+    pupopData() {
+      const { popupArray, currentPupopIndex } = this;
+      return popupArray[currentPupopIndex] || {};
+    },
     formDataCpu() {
       return JSON.parse(JSON.stringify(this.formData));
     }
@@ -505,6 +521,8 @@ export default {
     },
     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) {
@@ -528,6 +546,10 @@ export default {
         ...{ name, idNo, userInfoSecId, socialSecurity: socialSecurity ? "1" : "0" }
       };
     },
+    openIframePupop(index) {
+      this.currentPupopIndex = index;
+      this.popupShow = true;
+    },
     getParamFromSession() {
       const {
         amountInsured: insuredAmount,
@@ -568,7 +590,13 @@ export default {
         paymentPeriod: payPeriod,
         payType
       } = this.formData.productItem;
-      const { idNo, socialSecurity } = this.formData.insuredUserInfo;
+      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 = {
@@ -576,7 +604,7 @@ export default {
         productUserInfo: {
           userInfo: {
             idNo,
-            socialSecurity
+            socialSecurity: socialSecurity === "1" ? true : false
           },
           productItem: {
             amountInsured,