Skip to content

M
mongo-ui
Commit 7e9b2993 authored by 郭志伟's avatar 郭志伟
Browse files
Options

feat: 保单详情页补充

parent 5acc3542
Hide whitespace changes
Inline Side-by-side
Showing with 318 additions and 1 deletion
src/api/policy.rec.js 0 → 100644
View file @ 7e9b2993
/*
* @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
View file @ 7e9b2993
......@@ -17,4 +17,24 @@
font-size: @font-size-12;
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
View file @ 7e9b2993
......@@ -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 0 → 100644
View file @ 7e9b2993
<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 0 → 100644
View file @ 7e9b2993
<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>
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment