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-11 16:51:59
+ * @LastEditTime: 2020-08-11 17:03:21
  */
 
 import goodsBg from "@/assets/images/goods/detail/shouxian/bg.png";
@@ -143,6 +143,15 @@ export default {
       url: "http://mangguo-contract.qthbx.com/hua-gui-ren-shen-bao-xian-tou-bao-ti-shi-shu-v1/"
     }
   ],
+  protocolData: [
+    { title: "保险条款", id: 0 },
+    { title: "投保须知与声明", id: 2 },
+    { title: "服务协议", id: 3 },
+    { title: "转账授权书", id: 1 },
+    { title: "人身保险投保提示书", id: 8 },
+    { title: "税收居民身份证明", id: 3 },
+    { title: "风控查询授权书", id: 3 }
+  ],
   caseInfo: {
     name: "张先生",
     info: "33岁 北京",

src/api/detail.huatai.zhongjixian.js

@@ -4,7 +4,7 @@
  * @Description:华太30万轻重疾险
  * @Date: 2020-07-27 15:46:37
  * @LastEditors: gzw
- * @LastEditTime: 2020-08-11 14:41:05
+ * @LastEditTime: 2020-08-11 17:04:45
  */
 
 import goodsBg from "@/assets/images/goods/detail/zhongjixian/bg.png";
@@ -157,6 +157,12 @@ export default {
       url: "http://mangguo-contract.qthbx.com/zi-dong-xu-bao-fu-wu-xie-yi-v1/"
     }
   ],
+  protocolData: [
+    { title: "保险条款", id: 0 },
+    { title: "健康告知", id: 1 },
+    { title: "投保须知及声明", id: 2 },
+    { title: "平台服务协议", id: 3 }
+  ],
   caseInfo: {
     name: "吴先生",
     info: "46岁 北京 有社保",

src/api/detail.taikang.yiliaobaozhang.js

@@ -4,7 +4,7 @@
  * @Description: 泰康600万医疗保障
  * @Date: 2020-07-27 15:46:37
  * @LastEditors: gzw
- * @LastEditTime: 2020-08-11 16:39:54
+ * @LastEditTime: 2020-08-11 17:05:02
  */
 
 import goodsBg from "@/assets/images/goods/detail/yiliaoxian/bg.png";
@@ -121,6 +121,12 @@ export default {
       url: "http://mangguo-contract.qthbx.com/zi-dong-xu-bao-fu-wu-xie-yi-v1/"
     }
   ],
+  protocolData: [
+    { title: "保险条款", id: 0 },
+    { title: "健康告知", id: 1 },
+    { title: "投保须知及声明", id: 2 },
+    { title: "平台服务协议", id: 3 }
+  ],
   caseInfo: {
     name: "吴先生",
     info: "46岁 北京 有社保",

src/api/detail.zhongan.yiwai.js

@@ -4,7 +4,7 @@
  * @Description:众安50万意外险
  * @Date: 2020-07-27 15:46:37
  * @LastEditors: gzw
- * @LastEditTime: 2020-08-11 14:41:35
+ * @LastEditTime: 2020-08-11 17:05:56
  */
 
 import goodsBg from "@/assets/images/goods/detail/yiwaixian/bg.png";
@@ -132,10 +132,6 @@ export default {
       title: "保险条款",
       url: "http://mangguo-contract.qthbx.com/zhong-an-baoxiantiaokuan-v1/"
     },
-    {
-      title: "健康告知",
-      url: "http://mangguo-contract.qthbx.com/huatai-jian-kang-gao-zhi-v1/"
-    },
     {
       title: "投保须知及声明",
       url: "http://mangguo-contract.qthbx.com/zhong-an-tou-bao-xu-zhi-v1/"

src/components/Collapse.vue

@@ -5,6 +5,7 @@
         class="collapse-item"
         :class="{
           show: item.show,
+          'hide-icon': hideIcon,
           more: index > initLength && !more && moreBtn
         }"
         v-for="(item, index) in list"
@@ -19,7 +20,11 @@
           <i class="collapse-item-content-icon">A:</i>
           <div class="collapse-item-content-txt" v-html="item.a"></div>
         </div>
-        <cr-divider :hairline="false" :style="{ color: '#ebebeb', margin: 0 }" />
+        <cr-divider
+          :hairline="false"
+          :style="{ color: '#ebebeb', margin: 0 }"
+          v-if="index !== list.length - 1"
+        />
       </div>
     </div>
     <div class="collapse-more" :class="{ active: more }" v-if="moreBtn">
@@ -49,6 +54,10 @@ export default {
     initLength: {
       type: Number,
       default: 2
+    },
+    hideIcon: {
+      type: Boolean,
+      default: false
     }
   },
   watch: {
@@ -90,6 +99,20 @@ export default {
     &.more {
       display: none;
     }
+    &.hide-icon {
+      .collapse-item-title-icon {
+        display: none;
+      }
+      .collapse-item-content-icon {
+        display: none;
+      }
+      .collapse-item-title-txt {
+        margin-left: 0;
+      }
+      .collapse-item-content-txt {
+        margin-left: 0;
+      }
+    }
     &-title {
       display: flex;
       color: @black;

src/components/PopupWithIframe.vue

@@ -96,7 +96,6 @@ export default {
   methods: {
     pdfTask() {
       this.pdfUrl = pdf.createLoadingTask(this.url);
-      console.log(this.pdfUrl);
       this.pdfUrl.promise
         .then(pdf => {
           this.pdfNumPages = pdf.numPages;

src/router/routes.js

@@ -84,6 +84,11 @@ export default [
     name: "Detail",
     component: () => import("../views/Policy/Detail/index.vue")
   },
+  {
+    path: "/policy/virtual-detail",
+    name: "PolicyVirtualDetail",
+    component: () => import("../views/Policy/VirtualDetail/index.vue")
+  },
   {
     path: "/policy/success",
     name: "Sucess",

src/views/Goods/Detail/AIDetail.vue

@@ -203,10 +203,10 @@ export default {
     },
     onSubmit() {
       this.goInsureState = true;
-      sessionStorage.setItem(
-        "policyFormData",
-        JSON.stringify(Object.assign(this.formData, { productNo: this.goodId }))
-      );
+      // sessionStorage.setItem(
+      //   "policyFormData",
+      //   JSON.stringify(Object.assign(this.formData, { productNo: this.goodId }))
+      // );
     },
     onFailed(errorInfo) {
       const { errors } = errorInfo;

src/views/Policy/Detail/Types/Guarantee.vue

@@ -15,8 +15,8 @@
       :autoRenewPremium="data.autoRenewPremium"
       :policyNo="data.policyNo"
     ></insurance-card>
-    <security-content :data="data" :detail="SecurityDetail"></security-content>
-    <insurance-service></insurance-service>
+    <security-content :data="data" :detail="planDetail"></security-content>
+    <insurance-service :detail="qaDetail"></insurance-service>
     <customer-service></customer-service>
     <insurance-recommend class="Pdb-recommend" />
   </div>
@@ -69,11 +69,15 @@ export default {
     showPayCost() {
       return ["2", "4"].includes(this.data?.cardConfig?.key);
     },
-    SecurityDetail() {
+    planDetail() {
       const { type, planCellInfo: info } = this.productInfo;
       const { amountInsured } = this.data.productItem;
       const planCellInfo = amountInsured ? info[amountInsured] : info;
       return { type, planCellInfo: planCellInfo };
+    },
+    qaDetail() {
+      const { qaInfo, protocolData, popupArray } = this.productInfo;
+      return { qaInfo, protocolData, popupArray };
     }
   },
   methods: {

src/views/Policy/Detail/index.less

@@ -282,14 +282,25 @@
   	  }
   	  &-agreement {
   	    display: flex;
-        justify-content: space-between;
-	    font-size: 0;
-	    span {
-		  font-size: 12px;
-		  font-weight: 400;
-		  color: #333333;
-		  line-height: 24px;
-	    }
+				padding-top: 3px;
+				align-items: center;
+				flex-wrap: wrap;
+				a {
+					font-size: 12px;
+					color: #333;
+					&::after {
+						display: inline-block;
+						content: " ";
+						width: 0;
+						height: 12px;
+						border-right: 1px #333 solid;
+						margin: 0 5px;
+						vertical-align: -2px;
+					}
+					&:last-child::after {
+						display: none;
+					}
+				}
   	  }
 	}
 	.Pdb-operation {

src/views/Policy/Detail/modules/InsuranceService.vue

 <template>
   <div class="Pdb-service">
-    <!-- <div class="Pdb-service-head">
-      <span>增值服务</span>
-      <span>查看详情</span>
-    </div>
-    <div class="Pdb-service-body">
-      <div>
-        <span>重疾快速就医</span>
-        <span></span>
-      </div>
-      <div>
-        <span>住院押金垫付</span>
-        <span></span>
-      </div>
-    </div> -->
-    <div class="Pdb-service-question">
+    <div class="Pdb-service-question" @click="showQa = !showQa">
       <span>常见问题</span>
-      <svg-icon icon-class="arrow" />
+      <svg-icon icon-class="arrow" :style="{ transform: `rotate(${showQa ? '90deg' : '0deg'})` }" />
     </div>
+    <collapse
+      :collapse-data="detail.qaInfo"
+      :more-btn="false"
+      :hide-icon="true"
+      :init-length="3"
+      v-show="showQa"
+    />
     <cr-divider class="Pdb-service-divider" :hairline="false" />
     <div class="Pdb-service-agreement">
-      <span>保险条款</span>
-      <span>|</span>
-      <span>健康告知</span>
-      <span>|</span>
-      <span>投保须知与声明</span>
-      <span>|</span>
-      <span>服务协议</span>
+      <a
+        href="javascript:;"
+        @click="openIframePupop(item.id)"
+        v-for="(item, index) in detail.protocolData"
+        :key="index"
+      >
+        {{ item.title }}
+      </a>
     </div>
+    <popup-with-iframe
+      v-model="popupShow"
+      :title="pupopData.title"
+      :content="pupopData.content"
+      :url="pupopData.url"
+    />
   </div>
 </template>
 <script>
+import Collapse from "@/components/Collapse";
+import PopupWithIframe from "@/components/PopupWithIframe";
+
 export default {
   name: "InsuranceService",
+  components: {
+    PopupWithIframe,
+    Collapse
+  },
+  props: {
+    detail: {
+      type: Object,
+      default() {
+        return {};
+      }
+    }
+  },
+  computed: {
+    pupopData() {
+      const { currentPupopIndex } = this;
+      const { popupArray } = this.detail;
+      return popupArray[currentPupopIndex] || {};
+    }
+  },
   data() {
-    return {};
+    return {
+      showQa: false,
+      popupShow: false,
+      currentPupopIndex: null
+    };
+  },
+  methods: {
+    openIframePupop(index) {
+      this.currentPupopIndex = index;
+      this.popupShow = true;
+    }
   }
 };
 </script>

src/views/Policy/Detail/modules/SecurityContent.vue

@@ -81,8 +81,15 @@ export default {
     }
   },
   methods: {
-    showPdf() {}
+    showPdf() {
+      this.$router.push({ path: "/policy/virtual-detail", query: { url: this.data.policyUrl } });
+    }
   }
 };
 </script>
-<style lang="less" src="../index.less" scoped></style>
+<style lang="less" src="../index.less" scoped>
+container {
+  width: 100%;
+  height: 100%;
+}
+</style>

src/views/Policy/VirtualDetail/index.vue

+<template>
+  <div class="container">
+    <pdf v-for="(item, index) in pdfNumPages" :key="index" :src="pdfUrl" :page="index + 1" />
+  </div>
+</template>
+
+<script>
+import pdf from "vue-pdf";
+export default {
+  name: "PolicyVirtualDetail",
+  components: {
+    pdf
+  },
+  data() {
+    return {
+      url: "",
+      pdfUrl: "",
+      pdfNumPages: null
+    };
+  },
+  mounted() {
+    this.setDetail();
+  },
+  methods: {
+    setDetail() {
+      const { url } = this.$route.query;
+      if (!url) this.$router.back();
+      this.url = url;
+      this.pdfTask();
+    },
+    pdfTask() {
+      this.pdfUrl = pdf.createLoadingTask(this.url);
+      this.pdfUrl.promise
+        .then(pdf => {
+          this.pdfNumPages = pdf.numPages;
+        })
+        .catch(err => {
+          console.error(err);
+        });
+    }
+  }
+};
+</script>
+<style lang="less" scoped></style>