feat: 保单详情页补充

src/api/policy.rec.js

+/*
+ * @Description: 保单详情推荐位数据
+ * @Date: 2020-08-03 16:02:15
+ * @LastEditors: gzw
+ * @LastEditTime: 2020-08-03 16:09:54
+ */
+import rec01 from "@/assets/images/policy/rec/rec-01.png";
+import rec02 from "@/assets/images/policy/rec/rec-02.png";
+import rec03 from "@/assets/images/policy/rec/rec-03.png";
+
+export default {
+  title: "重疾险",
+  type: "cii",
+  sub: "30万重疾保障+9万轻症保障",
+  rec: [
+    { img: rec01, title: ["100种重大疾病", "确诊即赔"] },
+    { img: rec02, title: ["20种轻症疾病", "确诊即赔"] },
+    { img: rec03, title: ["价格美丽"] }
+  ],
+  company: "华泰财险",
+  goodActionInfo: {
+    title: ["3", "元", "首月"],
+    sub: "次月5.6元/月起"
+  },
+  notice: [
+    "需要的。社保是基础保障，优势是覆盖范围广，劣势是抵御风险能力有限，社保报销外的自付部分，可以用商业保险来保障。比如【百万医疗险】的作用是补充社保，报销因大病造成的高额医疗负担；",
+    "需要的。社保是基础保障，优势是覆盖范围广，劣势是抵御风险能力有限，社保报销外的自付部分，可以用商业保险来保障。比如【百万医疗险】的作用是补充社保，报销因大病造成的高额医疗负担；",
+    "需要的。社保是基础保障，优势是覆盖范围广，劣势是抵御风险能力有限，社保报销外的自付部分，可以用商业保险来保障。比如【百万医疗险】的作用是补充社保，报销因大病造成的高额医疗负担；"
+  ],
+  popupArray: [
+    {
+      title: "保险条款",
+      url: "http://mangguo-contract.qthbx.com/huatai-bao-xian-tiao-kuan-v1/"
+    },
+    {
+      title: "健康告知",
+      url: "http://mangguo-contract.qthbx.com/huatai-jian-kang-gao-zhi-v1/"
+    },
+    {
+      title: "投保须知及声明",
+      url: "http://mangguo-contract.qthbx.com/huatai-toubaoxuzhi-v1/"
+    },
+    {
+      title: "平台服务协议",
+      url: "http://mangguo-contract.qthbx.com/fu-wu-xie-yi-v1/"
+    }
+  ]
+};

src/style/mixins.less

@@ -18,3 +18,23 @@
   color: @gray-4;
   line-height: @line-height-sm;
 }
+.item-show-mixin {
+  text-align: center;
+  .svg-icon {
+    height: 48px;
+    width: 48px;
+  }
+  h5 {
+    display: block;
+    margin: 10px 0 4px;
+    font-size: @font-size-14;
+    font-weight: @font-weight-bold;
+    line-height: @line-height-sm;
+    color: @black;
+  }
+  p {
+    display: block;
+    .sub-text-mixins();
+    color: @black;
+  }
+}
\ No newline at end of file

src/views/Policy/Detail/index.vue

@@ -148,6 +148,8 @@
         <span>如遇问题请拨打客服电话</span>
         <span>00000000000</span>
       </div>
+      <act-banner />
+      <rec-good />
       <insurance-recommend class="Pdb-recommend" />
     </div>
   </div>
@@ -155,11 +157,15 @@
 <script>
 import point from "@/assets/images/policy/detail/point@2x.png";
 import InsuranceRecommend from "../modules/InsuranceRecommend";
+import ActBanner from "../modules/ActBanner";
+import RecGood from "../modules/RecGood";
 
 export default {
   name: "PolicyList",
   components: {
-    InsuranceRecommend
+    InsuranceRecommend,
+    ActBanner,
+    RecGood
   },
   data() {
     return {

src/views/Policy/modules/ActBanner.vue

+<template functional>
+  <div class="activity-banner">
+    <div class="activity-banner-item" @click="parent.$router.push('/draw')">
+      <cr-image src="@/assets/images/policy/draw.png" width="343px" height="60px" />
+    </div>
+  </div>
+</template>
+<script>
+export default {
+  name: "ActBanner",
+  data() {
+    return {};
+  }
+};
+</script>
+<style lang="less" scoped>
+.activity-banner {
+  width: 343px;
+  margin: 24px auto;
+}
+</style>

src/views/Policy/modules/RecGood.vue

+<template>
+  <div class="rec-container">
+    <card title="" footer="1">
+      <div class="rec-hd" slot="header">
+        <div class="rec-hd-title">再买一份{{ title }}<br />构建全面保障</div>
+        <div class="rec-hd-sub">{{ sub }}</div>
+      </div>
+      <div class="rec-sign">
+        <div class="rec-sign-item" v-for="(item, index) in rec" :key="index">
+          <cr-image :src="item.img" width="96px" height="98px" />
+          <p
+            v-for="(it, index) in item.title"
+            :key="index"
+            :class="{ 'rec-sign-item-bold': index === 0 }"
+          >
+            {{ it }}
+          </p>
+        </div>
+      </div>
+      <div class="rec-ft" slot="footer">
+        <h6 v-if="goodActionInfo.title">
+          {{ goodActionInfo.title[2] || "" }}
+          <strong>{{ goodActionInfo.title[0] || "" }}</strong>
+          {{ goodActionInfo.title[1] || "" }}
+          <small v-if="goodActionInfo.sub">{{ goodActionInfo.sub }}</small>
+        </h6>
+        <cr-button type="warning" size="large" block>立刻开启保障</cr-button>
+        <div class="rec-ft-tip">
+          <div class="rec-ft-tip-tag">
+            由<strong>{{ company }}</strong>
+            公司承保
+          </div>
+          <a href="javascript:;">了解更多</a>
+        </div>
+        <div class="rec-person">
+          <div class="rec-person-item"><svg-icon icon-class="medal" />王*闹</div>
+          <div class="rec-person-item"><svg-icon icon-class="medal" />183******892</div>
+        </div>
+      </div>
+    </card>
+    <card title="投保提示">
+      <ul class="rec-tip">
+        <li class="rec-tip-item" v-for="(it, index) in notice" :key="index">
+          <p>{{ it }}</p>
+        </li>
+      </ul>
+      <cr-divider />
+      <div class="rec-tip-link">
+        <a
+          href="javascript:;"
+          @click="openIframe(item.id)"
+          v-for="(item, index) in popupArray"
+          :key="index"
+        >
+          {{ item.title }}
+        </a>
+      </div>
+    </card>
+  </div>
+</template>
+<script>
+import rec from "@/api/policy.rec";
+import Card from "@/components/Card";
+export default {
+  name: "RecGood",
+  components: {
+    Card
+  },
+  data() {
+    return {
+      ...rec
+    };
+  }
+};
+</script>
+<style lang="less" scoped>
+@import "../../../style/var.less";
+@import "../../../style/mixins.less";
+.rec {
+  &-container {
+    width: 343px;
+    margin: 24px auto;
+    background-color: @white;
+    overflow: hidden;
+    border-radius: @border-radius-md;
+    .card:first-child {
+      padding-bottom: 0;
+    }
+    @{deep} .card-body {
+      margin-bottom: 0;
+    }
+  }
+  &-hd {
+    flex: 1;
+    &-title {
+      font-size: 24px;
+      font-weight: @font-weight-bold;
+      color: #333;
+      line-height: 33px;
+    }
+    &-sub {
+      font-size: @font-size-12;
+      font-weight: @font-weight-bold;
+      color: @orange-dark;
+      line-height: @line-height-sm;
+      margin-top: 11px;
+    }
+  }
+  &-ft {
+    h6 {
+      margin: 0 0 22px;
+      text-align: center;
+      font-size: @font-size-16;
+      font-weight: @font-weight-bold;
+      color: @black;
+      line-height: @line-height-sm;
+    }
+    strong {
+      color: @orange-dark;
+      font-weight: @font-weight-bold;
+      font-size: 32px;
+    }
+    small {
+      color: @gray-4;
+      line-height: @line-height-sm;
+      font-size: @font-size-12;
+      margin-left: 10px;
+    }
+    .cr-button {
+      box-shadow: 1px 12px 14px 0px rgba(255, 200, 66, 0.4);
+      border-radius: @border-radius-max !important;
+    }
+    &-tip {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      margin: 21px 0 7px;
+      &-tag {
+        .sub-text-mixins();
+        strong {
+          font-size: @font-size-12;
+          color: @black;
+        }
+      }
+    }
+  }
+  &-person {
+    background-color: @gray-1;
+    border-radius: @border-radius-sm;
+    padding: 10px 20px;
+    &-item {
+      margin: 9px 0;
+      font-size: 12px;
+      line-height: 12px;
+      color: @black;
+      font-weight: @font-weight-bold;
+      .svg-icon {
+        width: 18px;
+        height: 18px;
+      }
+      &:first-child {
+        font-size: 16px;
+      }
+    }
+  }
+  &-sign {
+    display: flex;
+    justify-content: space-between;
+    padding: 10px 0 20px;
+    &-item {
+      flex: 1;
+      .item-show-mixin();
+      .cr-image {
+        margin-right: -25px;
+        margin-bottom: -15px;
+      }
+      &:nth-child(2) {
+        margin: 0 25px;
+      }
+      &-bold {
+        font-weight: @font-weight-bold;
+      }
+    }
+  }
+  &-tip {
+    padding-left: 16px;
+    &-item {
+      list-style-type: decimal;
+      padding-left: 8px;
+      font-size: @font-size-12;
+      color: @black;
+      font-weight: bold;
+      p {
+        line-height: @line-height-sm + 2;
+        color: @gray-5;
+        margin-bottom: 12px;
+      }
+    }
+    &-link {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      a {
+        font-size: @font-size-12;
+        color: @black;
+        &::after {
+          display: inline-block;
+          content: " ";
+          width: 0;
+          height: 12px;
+          border-right: 1px @blue solid;
+          margin: 0 3px 0 6px;
+          vertical-align: -2px;
+        }
+        &:last-child::after {
+          display: none;
+        }
+      }
+    }
+  }
+}
+</style>