Skip to content

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

feat: 详情页完善组件封装

parent 3d1b73e9
Expand all Hide whitespace changes
Inline Side-by-side
Showing with 1885 additions and 591 deletions
src/api/detail.plan.mock.js 0 → 100644
View file @ 63b601e6
This diff is collapsed.
src/api/detail.process.mock.js 0 → 100644
View file @ 63b601e6
export default [
{
title: "电话报案",
desc: "请拨打华泰财险400-609-5509进行报案。华泰财险会有理赔专员1对1指导理赔事宜。 "
},
{
title: "准备材料",
desc: `1、索赔申请书；<br />
2、保险单或保险凭证复印件；（电子保单，不需要纸质）;<br />
3、被保险人身份证正反面复印件；<br />
4、有关部门出具的事故经过说明，如涉及交通事故，需提供交通事故责任认定书、被保险人驾驶证正副页复印件、机动车行驶证正副页复印件；涉及安全生产事故的，提供安全监管部门出具的调查报告；涉及特种作业的，提供被保险人特种作业操作证；<br />
5、医疗发票、医疗明细清单、门急诊病历、住院病历、病历检查报告等原件（若社保先报销则提供医疗费用分割单）；<br />
6、其他与确认保险事故性质、原因、损失程度等有关的证明或材料。<br />
`
},
{
title: "理赔付款",
desc: `1、转账方式直接支付给被保险人；<br />
2、若被保险人身故的，则转账支付给指定受益人或法定受益人。`
}
];
src/api/detail.qa.mock.js 0 → 100644
View file @ 63b601e6
/* eslint-disable */
export default [
{
q: "这个产品的等待期是多久？",
a: "本产品的等待期为90天,意外及续保无等待期。"
},
{
q: "如果同时购买了其他重疾险，可以赔付2次吗？",
a: "本保险产品为一次性给付型产品，如果您购买的重疾险为一次性给付型或报销型产品，可以和本保险同时申请理赔，获得两份赔偿。如果出险，请拨打华泰财险24小时客服电话4006095509。"
},
{
q: "这款产品提供了哪些保障？",
a: "本产品对人一生中可能罹患的99%以上的100种重大疾病提供保障，同时还有40种轻症保障也包含在内。在保险期间内，被保险人因意外伤害或在等待期后因疾病初次确诊罹患本产品定义的重大疾病或轻症的，即可获得一笔保险补偿。"
},
{
q: "被保险人有哪些限制？",
a: "可以为出生满30天-60周岁（含）身体健康，且符合健康告知提及状况的本人、配偶、子女或父母投保。"
},
{
q: "理赔后是否可以续保？需要重新完成健康告知吗？",
a: "无理赔或者已理赔过轻症的第二年可以续保；已理赔过重症的第二年不可以续保；续保无需重新填写健康告知。"
},
{
q: "如何在华泰官网进行保单验真？",
a: "请登录投保成功短信中提示的华泰官网查询网http://agt.ehuatai.com/nonautoquery/。填写登录信息时，类别选择“家庭财产、意外伤害保险”，保单号在投保成功的短信中，密码填写被保险人身份证号，即可登录查询保单承保信息。"
}
];
src/api/detail.rate.mock.js 0 → 100644
View file @ 63b601e6
/* eslint-disable */
export default [
{
title: "按月交费",
age: ["0-1", "2-17", "18-20", "21-25", "26-30", "31-35", "36-40", "41-45", "46-50", "51-55", "56-60"],
list: [
[
[30.7, 19.5, 23.1, 25.8, 34.3, 51.3, 86.8, 146.4, 252.3, "", ""],
[26.2, 17.2, 21.3, 29.3, 46.4, 75.6, 113.7, 166.6, 229.0, "", ""]
],
[
[20.4, 12.9, 15.3, 17.1, 22.8, 34.1, 57.8, 97.5, 168.1, 285.1, 443.3],
[17.4, 11.4, 14.1, 19.5, 30.8, 50.3, 75.7, 111, 152.6, 210.9, 303.6]
],
[
[10, 6.3, 7.5, 8.4, 11.2, 16.9, 28.7, 48.6, 83.9, 142.4, 221.5],
[8.6, 5.6, 6.9, 9.6, 15.3, 25, 37.7, 55.4, 76.2, 105.3, 151.7]
]
]
},
{
title: "一次交清",
age: ["0-1", "2-17", "18-20", "21-25", "26-30", "31-35", "36-40", "41-45", "46-50", "51-55", "56-60", "61-65", "66-70", "71-75", "76-80", "81-85", "86-90", "91-95", "96-99"],
list: [
[
[334, 213, 252, 281, 373, 556, 939, 1582, 2724, 4616, 7176, 10505, 15247, 22582, 34031, 49350, 68806, 91974, 120048],
[285, 189, 232, 319, 503, 818, 1229, 1800, 2473, 3416, 4916, 7650, 13398, 21368, 32216, 46892, 64195, 83506, 105165]
],
[
[223, 142, 168, 187, 248, 371, 626, 1055, 1816, 3077, 4784, 7003, 10165, 15055, 22687, 32900, 45871, 61316, 80032],
[190, 126, 155, 213, 335, 545, 819, 1200, 1648, 2277, 3277, 5100, 8932, 14245, 21477, 31261, 42797, 55671, 70110]
],
[
[111, 71, 84, 94, 124, 185, 313, 527, 908, 1539, 2392, 3502, 5082, 7527, 11344, 16450, 22935, 30658, 40016],
[95, 63, 77, 106, 168, 273, 410, 600, 824, 1139, 1639, 2550, 4466, 7123, 10739, 15631, 21398, 27835, 35055]
]
]
}
];
src/components/Card.vue 0 → 100644
View file @ 63b601e6
<template>
<div class="card" :style="style">
<div class="card-header">
<slot name="header">
<h5 class="card-title" v-if="title">
<slot name="title">{{ title }}</slot>
</h5>
<div class="card-option">
<slot name="option">
<a
:href="item.url || 'javascript:;'"
v-for="(item, index) in option"
:key="index"
@click="optionClick(index)"
>
{{ item }}
</a>
</slot>
</div>
</slot>
</div>
<div class="card-body">
<slot><div v-html="content"></div></slot>
</div>
<div class="card-footer" v-if="footer">
<slot name="footer">{{ footer }}</slot>
</div>
</div>
</template>
<script>
const OPTION_CLICK_EVENT = "option-click";
export default {
name: "Card",
props: {
title: {
type: String,
required: true
},
content: {
type: String,
default: ""
},
option: {
type: Array,
default() {
return [];
}
},
footer: {
type: String,
default: ""
},
style: {
type: Object,
default() {
return {};
}
}
},
methods: {
optionClick(index, item) {
this.$emit(OPTION_CLICK_EVENT, { index, item });
}
}
};
</script>
<style lang="less">
@import "../style/var.less";
.card {
padding: 20px;
background-color: @white;
// margin-bottom: 10px;
&-header {
padding: 4px 0 16px;
display: flex;
justify-content: space-between;
align-items: center;
}
&-title {
font-size: @font-size-18;
font-weight: @font-weight-bold;
color: @black;
line-height: @line-height-sm + 2;
}
&-option {
display: flex;
align-items: center;
}
&-body {
margin-bottom: 20px;
}
}
</style>
src/components/Copyright.vue 0 → 100644
View file @ 63b601e6
<template functional>
<div class="copyright">
<p class="copyright-logo" v-if="props.logo">
<img src="../assets/logo-foot.png" alt="logo" />
</p>
<p>版权所有©2020 全天候保险代理股份有限公司</p>
<p>京ICP备15059975号</p>
</div>
</template>
<script>
export default {
name: "Copyright",
props: ["logo"]
};
</script>
<style lang="less">
@import "../style/var.less";
.copyright {
margin: 16px 0;
text-align: center;
color: @gray-4;
font-size: @font-size-12;
line-height: @line-height-sm + 2;
&-logo {
text-align: center;
margin-bottom: 19px;
img {
width: 111px;
height: 35px;
}
}
}
</style>
src/components/CrRadioBtn.vue
View file @ 63b601e6
...@@ -6,12 +6,12 @@ ...@@ -6,12 +6,12 @@
v-for="(item, index) in radioData" v-for="(item, index) in radioData"
:key="index" :key="index"
> >
{{ item.label }} <div v-html="item.label"></div>
</cr-radio> </cr-radio>
</cr-radio-group> </cr-radio-group>
</template> </template>
<script> <script>
const CHANGE_EVENT = "change"; const CHANGE_EVENT = "input";
export default { export default {
name: "CrRadioBtn", name: "CrRadioBtn",
props: { props: {
...@@ -30,7 +30,7 @@ export default { ...@@ -30,7 +30,7 @@ export default {
} }
}; };
</script> </script>
<style lang="less" scoped> <style lang="less">
@import "../style/var.less"; @import "../style/var.less";
.radio-btn { .radio-btn {
display: flex; display: flex;
......
src/components/GoodAction.vue 0 → 100644
View file @ 63b601e6
<template>
<div class="good-action">
<div class="good-action-left">
<a href="javascript:;" class="good-action-left-btn" @click="leftClick">
<svg-icon icon-class="assistant" />
<i>客服</i>
</a>
</div>
<div class="good-action-content">
<h6>首月<strong>3</strong>元</h6>
<small>次月5.6元/月起</small>
</div>
<div class="good-action-right">
<cr-button type="warning" round @click="rightClick">我要投保</cr-button>
</div>
</div>
</template>
<script>
const LEFT_BTN_CLICK_EVENT = "leftClick";
const RIGHT_BTN_CLICK_EVENT = "rightClick";
export default {
name: "GoodAction",
props: {
leftBtns: {
type: Array,
default() {
return [];
}
},
rightBtns: {
type: Array,
default() {
return [];
}
},
content: {
type: String,
default: ""
}
},
methods: {
leftClick() {
this.$emit(LEFT_BTN_CLICK_EVENT, {});
},
rightClick() {
// TODO
this.$router.push("/goods/inform");
this.$emit(RIGHT_BTN_CLICK_EVENT, {});
}
}
};
</script>
<style lang="less">
@import "../style/var.less";
.good-action {
position: fixed;
bottom: 0;
left: 0;
width: 100%;
height: 60px;
display: flex;
align-items: center;
justify-content: space-between;
background-color: @white;
border-top: 1px solid rgba(0, 0, 0, 0.1);
&-left {
display: flex;
align-items: center;
position: relative;
&::after {
content: " ";
display: block;
position: absolute;
right: 0;
top: 0;
bottom: 0;
margin: auto;
height: 32px;
width: 0;
border-right: 1px solid #ebebeb;
}
&-btn {
color: @black;
padding: 0 16px;
.svg-icon {
display: block;
width: 28px;
height: 28px;
margin: 0 auto;
}
i {
display: block;
line-height: @line-height-sm + 2;
font-style: normal;
width: 28px;
margin: 0 auto;
}
}
}
&-content {
flex: 1;
padding: 0 12px;
h6 {
font-size: @font-size-16;
font-weight: @font-weight-bold;
color: @black;
line-height: @line-height-sm;
margin-bottom: 4px;
}
strong {
color: @orange-dark;
}
small {
display: block;
color: @gray-4;
line-height: @line-height-sm;
font-size: @font-size-11;
}
}
&-right {
padding-right: 8px;
.cr-button {
width: 188px;
font-size: @font-size-16 !important;
border-radius: @border-radius-max !important;
box-shadow: 1px 2px 8px 0px rgba(255, 200, 66, 0.4);
}
}
}
</style>
src/mixins/dialogMixin.js 0 → 100644
View file @ 63b601e6
export default {
props: ["showmodal"],
methods: {
modalClose() {
this.$emit("update:showmodal", false);
}
}
};
src/mixins/inputFixMixin.js 0 → 100644
View file @ 63b601e6
/*
* @Description: IOS12input弹框bug修复 mixins
修复讨论: https://developers.weixin.qq.com/community/develop/doc/00044ae90742f8c82fb78fcae56800
* @LastEditors: gzw
* @Date: 2019-03-14 18:40:11
* @LastEditTime: 2020-07-22 20:36:47
*/
export default {
methods: {
inputBlurFix() {
document.body.scrollTop = 0;
}
}
};
src/router/index.js
View file @ 63b601e6
...@@ -27,6 +27,16 @@ const routes = [ ...@@ -27,6 +27,16 @@ const routes = [
path: "/goods/detail", path: "/goods/detail",
name: "GoodsDetail", name: "GoodsDetail",
component: () => import(/* webpackChunkName: "goodsDetail" */ "../views/Goods/detail.vue") component: () => import(/* webpackChunkName: "goodsDetail" */ "../views/Goods/detail.vue")
},
{
path: "/goods/plan",
name: "GoodsPlan",
component: () => import(/* webpackChunkName: "GoodsPlan" */ "../views/Goods/plan.vue")
},
{
path: "/goods/inform",
name: "GoodsInform",
component: () => import(/* webpackChunkName: "GoodsInform" */ "../views/Goods/inform.vue")
} }
]; ];
......
src/service/cherry-ui.js
View file @ 63b601e6
...@@ -11,11 +11,11 @@ const { ...@@ -11,11 +11,11 @@ const {
CellGroup, CellGroup,
Row, Row,
Col, Col,
// Popup, Popup,
// Overlay, // Overlay,
Divider, Divider,
// Loading, // Loading,
// Toast, Toast,
// Uploader, // Uploader,
// Notify, // Notify,
// Picker, // Picker,
...@@ -52,7 +52,9 @@ Vue.use(Cell); ...@@ -52,7 +52,9 @@ Vue.use(Cell);
Vue.use(CellGroup); Vue.use(CellGroup);
Vue.use(Row); Vue.use(Row);
Vue.use(Col); Vue.use(Col);
Vue.use(Popup);
Vue.use(Divider); Vue.use(Divider);
Vue.use(Toast);
Vue.use(Field); Vue.use(Field);
Vue.use(Checkbox); Vue.use(Checkbox);
Vue.use(Radio); Vue.use(Radio);
......
src/views/Goods/detail.less
View file @ 63b601e6
...@@ -6,32 +6,8 @@ ...@@ -6,32 +6,8 @@
} }
.container { .container {
background-color: @background-color; background-color: @background-color;
margin-bottom: 80px;
} }
.card {
padding: 20px;
background-color: @white;
margin-bottom: 10px;
&-header {
padding: 4px 0 16px;
display: flex;
justify-content: space-between;
align-items: center;
}
&-title {
font-size: @font-size-18;
font-weight: @font-weight-bold;
color: @black;
line-height: @line-height-sm + 2;
}
&-option {
display: flex;
align-items: center;
}
&-body {
margin-bottom: 20px;
}
}
.plan-tip { .plan-tip {
font-size: @font-size-11; font-size: @font-size-11;
color: @gray-5; color: @gray-5;
...@@ -73,6 +49,8 @@ ...@@ -73,6 +49,8 @@
background-color: @white !important; background-color: @white !important;
padding: 10px 0; padding: 10px 0;
overflow: initial; overflow: initial;
align-items: baseline;
margin-bottom: 0 !important;
/deep/ .cr-cell { /deep/ .cr-cell {
&__title { &__title {
width: 31%; width: 31%;
...@@ -86,6 +64,13 @@ ...@@ -86,6 +64,13 @@
} }
} }
&-switch { &-switch {
display: flex;
justify-content: space-between;
align-items: center;
flex: 1;
&-card {
padding-top: 0;
}
&-label { &-label {
font-size: @font-size-12; font-size: @font-size-12;
color: @black; color: @black;
...@@ -95,7 +80,9 @@ ...@@ -95,7 +80,9 @@
margin: 0 auto 0 8px; margin: 0 auto 0 8px;
color: @white !important; color: @white !important;
} }
.card-option { &-option {
display: flex;
align-items: center;
justify-content: right; justify-content: right;
} }
} }
...@@ -103,6 +90,7 @@ ...@@ -103,6 +90,7 @@
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
padding: 14px 0;
/deep/ .cr-checkbox__label { /deep/ .cr-checkbox__label {
font-size: @font-size-11; font-size: @font-size-11;
color: @gray-4; color: @gray-4;
...@@ -126,318 +114,17 @@ ...@@ -126,318 +114,17 @@
} }
} }
.intro { .intro {
margin: 10px 0;;
padding: 0; padding: 0;
.card-body { .card-body {
margin-bottom: 0; margin-bottom: 0;
} }
} }
.cps-demo { .det-body {
border-radius: @border-radius-md; .card {
&-title_np {
padding-bottom: 0; padding-bottom: 0;
} }
&-header { /deep/ .card-body {
background: url(../../assets/goods/detail/assistant-card.png) top no-repeat; margin-bottom: 0;
background-size: contain;
padding: 24px 24px 20px;
h4 {
margin-top: 20px;
font-size: @font-size-20;
color: @black;
line-height: @line-height-lg;
font-weight: @font-weight-bold;
}
small {
margin-top: 9.5px;
padding-left: 8.8px;
display: block;
color: @white;
font-size: @font-size-12 - 1;
}
}
&-body {
background-color: @gray-1;
padding: @padding-sm + 1 @padding-md;
}
&-person {
background-color: @white;
border-radius: @border-radius-md;
font-size: @font-size-14 + 1;
font-weight: @font-weight-bold;
padding: @padding-xs @padding-sm;
line-height: @line-height-lg;
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 29px;
}
&-list {
&-item {
position: relative;
display: flex;
padding-bottom: 20px;
&-title {
font-size: @font-size-16;
font-weight: @font-weight-bold;
color: @black;
width: 32px;
line-height: @line-height-md;
}
&-content {
flex: 1;
font-size: @font-size-11;
color: @gray-5;
line-height: @line-height-sm + 1;
padding-left: 50px;
position: relative;
&::after,
&::before {
content: " ";
display: block;
position: absolute;
top: 4px;
left: 0;
}
&::before {
height: 12px;
width: 12px;
background-color: #d8d8d8;
border-radius: @border-radius-max;
left: 20px;
}
&::after {
width: 0;
height: calc(100% + 20px);
border-left: 1px solid #d8d8d8;
left: 26px;
}
}
&:last-child {
.cps-demo-list-item-content::after {
display: none;
}
}
}
}
}
.cps-process {
&-list {
&-item {
position: relative;
display: flex;
align-items: center;
padding-bottom: 16px;
&-title {
font-size: @font-size-12;
font-weight: @font-weight-bold;
color: @black;
width: 19px;
height: 19px;
margin: -10px 20px 0 4px;
background-color: @orange-light;
border-radius: @border-radius-max;
line-height: @line-height-md;
position: relative;
text-align: center;
line-height: 19px;
&::after {
content: " ";
display: block;
position: absolute;
top: 19px;
left: 9.5px;
width: 0;
height: calc(100% + 70px);
border-left: 1px solid #d8d8d8;
}
}
&-content {
flex: 1;
background-color: #f6f6f6;
border-radius: @border-radius-sm / 2 @border-radius-md;
padding: @padding-sm;
h6 {
color: @black;
font-weight: @font-weight-bold;
font-size: @font-size-14;
line-height: @line-height-sm + 2;
}
small {
color: @gray-5;
font-size: @font-size-12;
line-height: @line-height-sm + 2;
}
}
&:last-child {
color: #fff;
.cps-process-list-item-title::after {
display: none;
}
}
}
}
}
.collapse {
&-item {
background-color: @white;
&-title {
display: flex;
align-items: center;
color: @black;
font-weight: @font-weight-bold;
padding: @padding-md 0;
&-icon {
font-size: @font-size-12;
font-weight: @font-weight-bold;
font-style: normal;
line-height: @line-height-md - 2;
height: 20px;
text-align: center;
width: 20px;
border-radius: @border-radius-sm / 4 @border-radius-md / 2;
background-color: @orange-light;
box-shadow: 0px 6px 25px 0px rgba(255, 200, 66, 0.2);
}
&-txt {
margin-left: 12px;
font-weight: @font-weight-bold;
font-size: @font-size-14;
line-height: @line-height-lg;
}
.svg-icon {
height: 19px;
width: 19px;
margin-left: auto;
}
}
&-content {
display: flex;
color: @black;
font-size: @font-size-14;
background-color: @gray-1;
border-radius: @border-radius-md;
padding: 16px 16px 16px 12px;
line-height: @line-height-sm + 2;
&-icon {
font-style: normal;
font-weight: @font-weight-bold;
}
&-txt {
margin-left: 8px;
}
}
}
}
.collapse-more {
text-align: center;
line-height: @line-height-lg;
padding: 5px 0;
.svg-icon {
height: 11px;
width: 11px;
margin-left: 3px;
}
}
.det-footer {
padding: 25px 36px;
background-color: #fff;
p {
color: @gray-4;
font-size: @font-size-12;
line-height: @line-height-sm + 2;
}
&-offset {
padding-left: 60px;
}
&-logo {
text-align: center;
margin-bottom: 19px;
img {
width: 111px;
height: 35px;
}
}
}
.copyright {
margin: 16px 0;
text-align: center;
color: @gray-4;
font-size: @font-size-12;
line-height: @line-height-sm + 2;
}
.good-action {
position: fixed;
bottom: 0;
left: 0;
width: 100%;
height: 60px;
display: flex;
align-items: center;
justify-content: space-between;
background-color: @white;
border-top: 1px solid rgba(0, 0, 0, .1);
&-left {
display: flex;
align-items: center;
position: relative;
&::after {
content: " ";
display: block;
position: absolute;
right: 0;
top: 0;
bottom: 0;
margin: auto;
height: 32px;
width: 0;
border-right: 1px solid #ebebeb;
}
&-btn {
color: @black;
padding: 0 16px;
.svg-icon {
display: block;
width: 28px;
height: 28px;
margin: 0 auto;
}
i {
display: block;
line-height: @line-height-sm + 2;
font-style: normal;
width: 28px;
margin: 0 auto;
}
}
}
&-content {
flex: 1;
padding: 0 12px;
h6 {
font-size: @font-size-16;
font-weight: @font-weight-bold;
color: @black;
line-height: @line-height-sm;
margin-bottom: 4px;
}
strong {
color: @orange-dark;
}
small {
display: block;
color: @gray-4;
line-height: @line-height-sm;
font-size: @font-size-11;
}
}
&-right {
padding-right: 8px;
.cr-button {
width: 188px;
font-size: @font-size-16 !important;
border-radius: @border-radius-max !important;
box-shadow: 1px 2px 8px 0px rgba(255, 200, 66, 0.4);
}
} }
} }
src/views/Goods/detail.vue
View file @ 63b601e6
This diff is collapsed.
src/views/Goods/inform.less 0 → 100644
View file @ 63b601e6
@import "../../style/var.less";
.inform-container {
background-color: @white;
padding-top: 15px;
margin-bottom: 60px;
}
.inform {
&-notice {
width: calc(100% - 60px);
margin: 0 auto;
background: rgba(255, 235, 222, 1);
border-radius: 15px;
padding: 8px 16px;
display: flex;
align-items: center;
.cr-tag {
width: 18px;
padding: 1px 3px 2px !important;
}
&-content {
margin-left: 8px;
font-size: @font-size-11;
color: @orange-dark;
line-height: @line-height-sm;
}
}
&-content {
&-title {
strong {
color: @orange-dark;
}
}
/deep/ .card-body {
padding: 20px 20px 11px 20px;
background-color: @gray-1;
border-radius: @border-radius-md;
font-size: @font-size-12;
color: @black;
line-height: @line-height-sm + 2;
}
}
&-btns {
display: flex;
position: fixed;
bottom: 0;
left: 0;
width: 100%;
border-top: 1px solid rgba(0, 0, 0, 0.1);
.cr-button {
flex: 1;
border-radius: 0 !important;
height: 60px;
line-height: 60px;
border-width: 0;
}
}
}
src/views/Goods/inform.vue 0 → 100644
View file @ 63b601e6
<template>
<div class="inform-container">
<div class="inform-notice">
<cr-tag type="danger">重要</cr-tag>
<div class="inform-notice-content">
为保证被保险人的保险权益在理赔时不受影响，请确认被保险人健康状况是否符合以下投保条件：
</div>
</div>
<card :title="true" class="inform-content">
<span slot="title" class="inform-content-title">
请如实告知
<strong>被保人</strong> 是否有以下情形之一
</span>
<p>以下情况全为“否”，即符合投保条件：</p>
<!-- eslint-disable-next-line -->
<p>1.被保险人职业是否属于以下职业：接触放射线或放射性物质，接触化学、易燃或易爆物质，有毒及危险物质生产运输，参与矿物或煤炭开采，暴露于烟尘或粉尘，参加高空、海洋、水下、地下、隧道、桥梁作业或活动，从事渔业捕捉，森林砍伐业或相关作业，森林防火，建筑施工，机械设备制造加工操作，金属/合金冶炼，3吨及3吨以上重型卡车、砂石车、液化气化油罐车驾驶及随车工作，高压电、电缆作业，拆船工作，私人保镖，战地记者，驯兽师，无固定职业，消防队员、特种兵、军事院校学生、入伍受训新兵、消防爆破、缉毒及防爆警察，参与镇暴或军警行动，前线军人。</p>
<!-- eslint-disable-next-line -->
<p>2. 被保险人过去 1 年内是否发现健康检查异常（包括但不限于血液、超声、影像检查、内镜、病理检查等）,过去 2 年内是否住院或被要求进一步检查、手术或治疗（不包括剖腹产/顺产/急性胃肠炎/单次发作已痊愈的肺炎/上呼吸道感染住院）。</p>
<!-- eslint-disable-next-line -->
<p>3. 被保险人目前或过往是否患有下列疾病：良、恶性肿瘤（含原位癌），2 级或以上高血压（收缩压大于 160mmHg，或舒张压大于 100mmHg），心脏疾病，主动脉疾病，脑梗死（脑栓塞或脑血栓），脑出血，脑外伤后遗症，肾脏疾病，慢性肝脏疾病，血友病，重型再障性贫血，系统性红斑狼疮，类风湿性关节炎，风湿热，糖尿病，阿尔茨海默病，帕金森氏病，运动神经元病，多发性硬化，重症肌无力，硬皮病，克隆病，溃疡性结肠炎，慢性胰腺炎，癫痫，精神病，先天性疾病，法定传染病（包含甲类及乙类），慢性阻塞性肺病，瘫痪，性病，艾滋病及 HIV 阳性，慢性酒精中毒。是否曾经或正在使用毒品或违禁药物、是否有智能障碍或痴呆、失明、聋哑、身体任何部位缺失、畸形及功能障碍、重听、视力障碍（近视1000度以上）。</p>
<!-- eslint-disable-next-line -->
<p>4. 过去 1 年内是否存在下列症状：反复头痛、晕厥、胸痛、气急、紫绀、持续反复发热、抽搐、不明原因出血、皮下出血点、咯血、反复呕吐、进食梗噎感或吞咽困难、呕血、浮肿、腹痛、黄疸、便血、血尿、蛋白尿、性质不明的肿块、消瘦（非健身原因所致的体重减轻 5公斤以上） 。</p>
<!-- eslint-disable-next-line -->
<p>5. 适用于女性被保险人：是否曾患有葡萄胎或其他妊娠滋养细胞疾病、宫颈不典型增生；是否有半年内存在阴道异常出血、乳头异常溢液、疼痛、糜烂或回缩、乳房表面皮肤凹陷、皱褶或皮肤收缩等症状。</p>
<p>6. 2 周岁以下被保险人出生时体重是否低于 2.5 公斤，是否早产，窒息，发育迟缓，脑瘫。</p>
<!-- eslint-disable-next-line -->
<p>7.被保险人是否曾被保险公司解除合同或投保时被拒绝、延期、附加条款承保或有过任何形式的人身索赔？被保险人最近一年内是否已在其它保险公司申请累计重大疾病保险保额达50万以上？</p>
</card>
<div class="inform-btns">
<cr-button @click="$router.back()">不符合</cr-button>
<cr-button type="warning" @click="conform">符合，立即投保</cr-button>
</div>
</div>
</template>
<script>
import card from "@/components/Card";
export default {
name: "GoodsInform",
components: {
card
},
methods: {
conform() {
this.$toast("平台备案中，不能支付，敬请期待");
}
}
};
</script>
<style lang="less" src="./inform.less" scoped></style>
src/views/Goods/modules/AiTestTip.vue
View file @ 63b601e6
...@@ -30,7 +30,7 @@ export default { ...@@ -30,7 +30,7 @@ export default {
} }
}; };
</script> </script>
<style lang="less" scoped> <style lang="less">
@import "../../../style/var.less"; @import "../../../style/var.less";
@import "../../../style/mixins.less"; @import "../../../style/mixins.less";
......
src/views/Goods/modules/CompactCellGroup.vue
View file @ 63b601e6
...@@ -9,18 +9,23 @@ ...@@ -9,18 +9,23 @@
<cr-cell <cr-cell
v-for="(item, index) in cellData" v-for="(item, index) in cellData"
:key="index" :key="index"
:title="item.title" :title="!item.title.needSlot && (item.title.tpl || item.title)"
:value="item.value" :value="!item.value.needSlot && (item.value.tpl || item.value)"
class="compact-cell" :class="{ 'compact-cell': 1, 'compact-cell_br': item.value.longTxt }"
:class="item.className" @click="cellClick(item)"
> >
<div v-if="needSlot && item.title" v-html="item.title" slot="title"></div> <template v-if="item.title.needSlot" slot="title">
<div v-if="needSlot && item.value" v-html="item.value"></div> <div v-html="item.title.tpl"></div>
</template>
<template v-if="item.value.needSlot">
<div v-html="item.value.tpl"></div>
</template>
</cr-cell> </cr-cell>
</cr-cell-group> </cr-cell-group>
</template> </template>
<script> <script>
const CELL_CLICK_EVENT = "click";
export default { export default {
name: "CompactCellGroup", name: "CompactCellGroup",
props: { props: {
...@@ -38,10 +43,17 @@ export default { ...@@ -38,10 +43,17 @@ export default {
type: Boolean, type: Boolean,
default: false default: false
} }
},
methods: {
cellClick(e) {
if (e.title.needSlot || e.value.needSlot) {
this.$emit(CELL_CLICK_EVENT, e);
}
}
} }
}; };
</script> </script>
<style lang="less" scoped> <style lang="less">
@import "../../../style/var.less"; @import "../../../style/var.less";
.sub-text-mixins { .sub-text-mixins {
font-size: @font-size-12; font-size: @font-size-12;
......
src/views/Goods/modules/CpsDemo.vue 0 → 100644
View file @ 63b601e6
<template>
<card class="cps-demo-title_np" title="理赔案例">
<div class="cps-demo">
<div class="cps-demo-header">
<h4>1对1专员协助理赔</h4>
<small>因为专业 所以放心</small>
</div>
<div class="cps-demo-body">
<div class="cps-demo-person">
<span>吴先生</span>
<span>46岁 北京 有社保</span>
</div>
<div class="cps-demo-list">
<div class="cps-demo-list-item">
<div class="cps-demo-list-item-title">投保</div>
<div class="cps-demo-list-item-content">
2018年6月29日，吴先生为自己投保了一份万家保·重疾轻症险，保额20万，并续保。
</div>
</div>
<div class="cps-demo-list-item">
<div class="cps-demo-list-item-title">投保</div>
<div class="cps-demo-list-item-content">
2019年9月16日，吴先生意外烫伤双下肢皮肤，达到浅Ⅲ°烧伤，烧伤面积达20%。
</div>
</div>
<div class="cps-demo-list-item">
<div class="cps-demo-list-item-title">轻症理赔</div>
<div class="cps-demo-list-item-content">
2019年9月17日，吴先生后向我司报案，经核实符合该保险中轻症“特定面积Ⅲ度烧伤”的诊断赔付标准，给予4万保险金赔付。
</div>
</div>
<div class="cps-demo-list-item">
<div class="cps-demo-list-item-title">重疾理赔</div>
<div class="cps-demo-list-item-content">
2020年1月3日，吴先生突发胸痛咯血，后诊断为右肺非小细胞性肺癌，经我司核实后确认为保险责任，一次性给予20万元的重大疾病保险金。
</div>
</div>
</div>
</div>
</div>
</card>
</template>
<script>
import card from "@/components/Card";
export default {
name: "CpsDemo",
components: {
card
},
props: {
demoData: {
type: Object,
default() {}
}
}
};
</script>
<style lang="less">
@import "../../../style/var.less";
.cps-demo {
&-title_np {
.card-header {
padding-bottom: 0;
}
}
&-header {
background: url(../../../assets/goods/detail/assistant-card.png) top no-repeat;
background-size: contain;
padding: 24px 24px 20px;
h4 {
margin-top: 20px;
font-size: @font-size-20;
color: @black;
line-height: @line-height-lg;
font-weight: @font-weight-bold;
}
small {
margin-top: 9.5px;
padding-left: 8.8px;
display: block;
color: @white;
font-size: @font-size-12 - 1;
}
}
&-body {
background-color: @gray-1;
padding: @padding-sm + 1 @padding-md;
border-radius: 0 0 @border-radius-md @border-radius-md;
}
&-person {
background-color: @white;
border-radius: @border-radius-md;
font-size: @font-size-14 + 1;
font-weight: @font-weight-bold;
padding: @padding-xs @padding-sm;
line-height: @line-height-lg;
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 29px;
}
&-list {
&-item {
position: relative;
display: flex;
padding-bottom: 20px;
&-title {
font-size: @font-size-16;
font-weight: @font-weight-bold;
color: @black;
width: 32px;
line-height: @line-height-md;
}
&-content {
flex: 1;
font-size: @font-size-11;
color: @gray-5;
line-height: @line-height-sm + 1;
padding-left: 50px;
position: relative;
&::after,
&::before {
content: " ";
display: block;
position: absolute;
top: 4px;
left: 0;
}
&::before {
height: 12px;
width: 12px;
background-color: #d8d8d8;
border-radius: @border-radius-max;
left: 20px;
}
&::after {
width: 0;
height: calc(100% + 20px);
border-left: 1px solid #d8d8d8;
left: 26px;
}
}
&:last-child {
.cps-demo-list-item-content::after {
display: none;
}
}
}
}
}
</style>
src/views/Goods/modules/CpsProcess.vue 0 → 100644
View file @ 63b601e6
<template>
<card title="理赔流程" :option="['了解更多理赔信息']" @option-click="optionClick">
<div class="cps-process-list">
<div class="cps-process-list-item">
<div class="cps-process-list-item-title">1</div>
<div class="cps-process-list-item-content">
<h6>电话报案</h6>
<small>
请拨打华泰财险400-609-5509进行报案。华泰财险会有理赔专员1对1指导理赔事宜。
</small>
</div>
</div>
<div class="cps-process-list-item">
<div class="cps-process-list-item-title">2</div>
<div class="cps-process-list-item-content">
<h6>提交资料</h6>
<small>根据理赔专员的指导，准备理赔材料，并邮寄至指定地点进行审核。</small>
</div>
</div>
<div class="cps-process-list-item">
<div class="cps-process-list-item-title">3</div>
<div class="cps-process-list-item-content">
<h6>理赔付款</h6>
<small>审核通过后，理赔款将通过转账的方式支付。</small>
</div>
</div>
</div>
</card>
</template>
<script>
import card from "@/components/Card";
export default {
name: "CpsProcess",
components: {
card
},
props: {
processData: {
type: Object,
default() {}
}
},
methods: {
optionClick() {
this.$emit("click", 5);
}
}
};
</script>
<style lang="less" scoped>
@import "../../../style/var.less";
.cps-process {
&-list {
&-item {
position: relative;
display: flex;
align-items: center;
padding-bottom: 16px;
&-title {
font-size: @font-size-12;
font-weight: @font-weight-bold;
color: @black;
width: 19px;
height: 19px;
margin: -10px 20px 0 4px;
background-color: @orange-light;
border-radius: @border-radius-max;
line-height: @line-height-md;
position: relative;
text-align: center;
line-height: 19px;
&::after {
content: " ";
display: block;
position: absolute;
top: 19px;
left: 9.5px;
width: 0;
height: calc(100% + 70px);
border-left: 1px solid #d8d8d8;
}
}
&-content {
flex: 1;
background-color: #f6f6f6;
border-radius: @border-radius-sm / 2 @border-radius-md;
padding: @padding-sm;
h6 {
color: @black;
font-weight: @font-weight-bold;
font-size: @font-size-14;
line-height: @line-height-sm + 2;
}
small {
color: @gray-5;
font-size: @font-size-12;
line-height: @line-height-sm + 2;
}
}
&:last-child {
color: #fff;
padding-bottom: 0;
.cps-process-list-item-title::after {
display: none;
}
}
}
}
}
</style>
src/views/Goods/modules/CpsQA.vue 0 → 100644
View file @ 63b601e6
<template>
<card title="Q&A" class="collapse-header" id="collapse">
<div class="collapse">
<div
class="collapse-item"
:class="{
show: item.show,
more: index > 2 && !more
}"
v-for="(item, index) in list"
:key="index"
>
<div class="collapse-item-title" @click="itemClick(index)">
<i class="collapse-item-title-icon">Q</i>
<span class="collapse-item-title-txt">{{ item.q }}</span>
<svg-icon icon-class="triangle-down" />
</div>
<div class="collapse-item-content">
<i class="collapse-item-content-icon">A:</i>
<div class="collapse-item-content-txt">{{ item.a }}</div>
</div>
<cr-divider :hairline="false" :style="{ color: '#ebebeb', margin: 0 }" />
</div>
</div>
<div class="collapse-more" :class="{ active: more }" v-if="moreBtn">
<a href="#collapse" @click="showMore">
<span>查看更多</span>
<span>隐藏</span>
<svg-icon icon-class="arrow-down" />
</a>
</div>
</card>
</template>
<script>
import card from "@/components/Card";
import detail from "@/api/detail.qa.mock";
export default {
name: "CpsQA",
components: {
card
},
props: {
qaData: {
type: Array,
default() {
return detail;
}
},
moreBtn: {
type: Boolean,
default: true
}
},
watch: {
qaData: {
immediate: true,
deep: true,
handler(val) {
this.list = val.map(item => {
item.showItem = false;
return item;
});
}
}
},
data() {
return {
list: [],
more: false
};
},
methods: {
itemClick(index) {
let _item = this.list[index];
_item.show = !_item.show;
this.$set(this.list, index, _item);
},
showMore() {
this.more = !this.more;
}
}
};
</script>
<style lang="less">
@import "../../../style/var.less";
.collapse {
&-header {
.card-header {
padding-bottom: 4px;
}
}
&-item {
background-color: @white;
&.more {
display: none;
}
&-title {
display: flex;
color: @black;
font-weight: @font-weight-bold;
padding: @padding-md 0;
&-icon {
font-size: @font-size-12;
font-weight: @font-weight-bold;
font-style: normal;
line-height: @line-height-md - 2;
height: 20px;
text-align: center;
width: 20px;
margin-top: 2px;
border-radius: @border-radius-sm / 4 @border-radius-md / 2;
background-color: @orange-light;
box-shadow: 0px 6px 25px 0px rgba(255, 200, 66, 0.2);
}
&-txt {
margin-left: 10px;
font-weight: @font-weight-bold;
font-size: @font-size-14;
line-height: @line-height-lg;
}
.svg-icon {
height: 17px;
width: 17px;
transition: all 0.2s linear;
margin-left: auto;
margin-top: 4px;
}
}
&-content {
display: none;
overflow: hidden;
color: @black;
font-size: @font-size-14;
background-color: @gray-1;
border-radius: @border-radius-md;
padding: 16px 16px 16px 12px;
line-height: @line-height-sm + 2;
margin-bottom: 15px;
&-icon {
font-style: normal;
font-weight: @font-weight-bold;
}
&-txt {
margin-left: 8px;
}
}
&.show {
.collapse-item-title {
.svg-icon {
transform: rotate(180deg);
}
}
.collapse-item-content {
display: flex;
}
}
}
}
.collapse-more {
text-align: center;
line-height: @line-height-lg;
padding: 5px 0;
span:nth-child(2) {
display: none;
}
.svg-icon {
height: 11px;
width: 11px;
margin-left: 3px;
transition: all 0.2s linear;
}
&.active {
span:nth-child(1) {
display: none;
}
span:nth-child(2) {
display: inline;
}
.svg-icon {
transform: rotate(180deg);
}
}
}
</style>
src/views/Goods/modules/DetailFooter.vue 0 → 100644
View file @ 63b601e6
<template>
<div class="det-footer">
<p class="det-footer-logo"><img src="../../../assets/logo-foot.png" alt="logo" /></p>
<p>承保公司：华泰财产保险有限公司</p>
<p>经营范围：短期健康保险和意外伤害保险</p>
<p>备案名称：华泰财险重大疾病保险条款(B款)；</p>
<p class="det-footer-offset">华泰财险附加重大疾病轻症综合保险条款；</p>
<p class="det-footer-offset">华泰财险附加保险费分期支付条款</p>
<p>备案编号：C00015431912018061501152；</p>
<p class="det-footer-offset">C00015432622017111500872；</p>
<p class="det-footer-offset">C00015431922018061503991</p>
</div>
</template>
<script>
export default {
name: "DetailFooter",
data() {
return {};
}
};
</script>
<style lang="less">
@import "../../../style/var.less";
.det-footer {
padding: 25px 36px;
background-color: #fff;
margin: 10px 0;
p {
color: @gray-4;
font-size: @font-size-12;
line-height: @line-height-sm + 2;
}
&-offset {
padding-left: 60px;
}
&-logo {
text-align: center;
margin-bottom: 19px;
img {
width: 111px;
height: 35px;
}
}
}
</style>
src/views/Goods/modules/DetailHeader.vue
View file @ 63b601e6
...@@ -17,7 +17,7 @@ ...@@ -17,7 +17,7 @@
<strong>3</strong>元 <strong>3</strong>元
<small>次月5.6元/月起</small> <small>次月5.6元/月起</small>
</h5> </h5>
<cr-button type="warning" block>立即开启保障</cr-button> <cr-button type="warning" block @click="btnClick">立即开启保障</cr-button>
<div class="det-hd-insured-people"> <div class="det-hd-insured-people">
已有 已有
<em>31492</em>位用户投保 <em>31492</em>位用户投保
...@@ -27,14 +27,20 @@ ...@@ -27,14 +27,20 @@
</template> </template>
<script> <script>
const BTN_CLICK_EVENT = "click";
export default { export default {
name: "DetailHeader", name: "DetailHeader",
data() { data() {
return {}; return {};
},
methods: {
btnClick() {
this.$emit(BTN_CLICK_EVENT, 1);
}
} }
}; };
</script> </script>
<style lang="less" scoped> <style lang="less">
@import "../../../style/var.less"; @import "../../../style/var.less";
.sub-text-mixins { .sub-text-mixins {
font-size: @font-size-12; font-size: @font-size-12;
......
src/views/Goods/modules/GoInsureDialog.vue 0 → 100644
View file @ 63b601e6
<template>
<transition name="panel-fade">
<cr-popup
v-model="show"
:style="{ backgroundColor: 'transparent' }"
closeable
get-container="body"
close-icon="close"
class="panel-wrap"
>
<div class="panel">
<div class="panel-head">
<h4>
立即拥有
<br />30万重疾轻症保障
</h4>
</div>
<div class="panel-body">
<compactCellGroup class="pay-det" :cell-data="payCellData" :text-bold="true" />
<div class="pay-tip">*不满意可随时退保</div>
<div class="pay-protocol">
<div class="pay-protocol-tip">投保前请阅读</div>
<div class="pay-protocol-link">
<a href="javascript:;" @click="openIframePupop(0)">保险条款</a>
<i></i>
<a href="javascript:;" @click="openIframePupop(1)">健康告知</a>
<i></i>
<a href="javascript:;" @click="openIframePupop(2)">投保须知与声明</a>
<i></i>
<a href="javascript:;" @click="openIframePupop(3)">服务协议</a>
</div>
</div>
<cr-button type="warning" size="large" block @click="go">好的 继续</cr-button>
</div>
</div>
</cr-popup>
</transition>
</template>
<script>
import compactCellGroup from "./CompactCellGroup";
const DIALOG_CHANGE_EVENT = "input";
export default {
name: "GoInsureDialog",
components: {
compactCellGroup
},
props: {
value: null
},
data() {
return {
show: false,
payCellData: [
{ title: "首月保费", value: "1元" },
{
title: "次月保费",
value: {
tpl: "100.00元/月（共11期）",
longTxt: true
}
}
]
};
},
watch: {
value(val) {
this.show = val;
},
show(val) {
this.$emit(DIALOG_CHANGE_EVENT, val);
}
},
methods: {
openIframePupop(index) {
this.$parent.openIframePupop(index);
},
go() {
this.$router.push("/goods/inform");
}
}
};
</script>
<style lang="less" scoped>
@import "../../../style/var.less";
.panel-fade-enter-active {
animation: dialog-fadein 0.4s;
.panel {
animation: dialog-zoom 0.4s;
}
}
@keyframes dialog-fadein {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
@keyframes dialog-zoom {
0% {
transform: scale(0);
}
50% {
transform: scale(1.1);
}
100% {
transform: scale(1);
}
}
.panel {
background-color: @white;
border-radius: @border-radius-md;
width: 300px;
&-wrap {
overflow: initial;
/deep/ .cr-popup--close {
top: -36px;
right: 0;
color: @white;
font-size: 24px;
}
}
&-head {
border-top-left-radius: @border-radius-md;
border-top-right-radius: @border-radius-md;
padding: @padding-lg @padding-lg 5px @padding-lg;
background: url("../../../assets/dialog-header-bg.png") right no-repeat;
background-size: 34px 25px;
background-position: right center;
h4 {
color: @black;
font-size: @font-size-18;
font-weight: @font-weight-bold;
line-height: @line-height-lg + 1;
}
}
&-body {
padding: @padding-lg;
}
&-foot {
display: flex;
justify-content: center;
align-items: center;
padding: @padding-lg;
}
}
.pay {
&-tip {
font-size: @font-size-12;
color: @gray-4;
line-height: @line-height-lg;
margin: 12px 0;
}
&-protocol {
margin-bottom: 18px;
&-tip {
font-size: @font-size-12;
color: @gray-4;
line-height: @line-height-lg;
margin-bottom: 4px;
}
&-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 3px;
}
}
}
}
</style>
src/views/Goods/modules/ProtocolIframe.vue 0 → 100644
View file @ 63b601e6
<template>
<cr-popup
v-model="popupShow"
get-container="body"
round
closeable
position="bottom"
class="protocol"
>
<div class="protocol-title">{{ title }}</div>
<cr-divider :hairline="false" :style="{ color: '#F4F4F4', margin: 0 }" />
<div
class="protocol-content"
v-if="content && scrollRefresh && !$slots.default"
v-html="content"
></div>
<iframe v-if="url && scrollRefresh" class="protocol-frame" :src="url" frameborder="0"></iframe>
<div class="protocol-wrap" v-if="!content && scrollRefresh && $slots.default">
<slot></slot>
</div>
</cr-popup>
</template>
<script>
const CHANGE_EVENT = "input";
export default {
name: "SvgIcon",
props: {
value: null,
title: {
type: String,
default: ""
},
content: {
type: String,
default: ""
},
url: {
type: String,
default: ""
}
},
watch: {
value(val) {
this.popupShow = val;
if (val) {
this.scrollRefresh = true;
}
},
popupShow(val) {
this.$emit(CHANGE_EVENT, val);
if (!val) {
setTimeout(() => {
this.scrollRefresh = false;
}, 300);
}
}
},
data() {
return {
popupShow: false,
scrollRefresh: true
};
}
};
</script>
<style lang="less">
@import "../../../style/var.less";
.body-wrap-mixin {
overflow-x: hidden;
overflow-y: auto;
max-height: 480px;
padding: @padding-lg;
}
.protocol {
z-index: 200;
/deep/ .cr-icon {
color: #d0cfcf;
font-size: @font-size-18;
top: 16px;
right: 14px;
}
&-title {
font-weight: @font-weight-bold;
font-size: @font-size-18;
color: @black;
line-height: @line-height-lg + 1;
padding: 13px 0 10px;
text-align: center;
}
&-frame {
height: 520px;
width: 100vw;
}
&-wrap {
.body-wrap-mixin();
}
&-content {
.body-wrap-mixin();
font-size: @font-size-12;
color: @gray-5;
line-height: @line-height-md - 2;
}
}
</style>
src/views/Goods/plan.less 0 → 100644
View file @ 63b601e6
@import "../../style/var.less";
.plan-container {
background-color: @white;
padding-bottom: 20px;
.card {
position: relative;
padding-bottom: 5px;
}
/deep/ .card {
&-body {
border-radius: @border-radius-md;
background-color: @gray-1;
padding: @padding-lg @padding-lg 54px @padding-lg;
color: @black;
font-size: @font-size-12;
line-height: @line-height-sm + 2;
margin-bottom: 0;
}
&-footer {
position: absolute;
bottom: 25px;
left: 40px;
}
}
.no-url {
/deep/ .card {
&-body {
padding: @padding-lg;
margin-bottom: 0;
p {
&:nth-child(2n) {
margin-bottom: 20px;
}
&:last-child {
margin-bottom: 0;
}
}
strong {
font-weight: @font-weight-bold;
}
}
&-footer {
bottom: 25px;
}
}
}
}
src/views/Goods/plan.vue 0 → 100644
View file @ 63b601e6
<template>
<div class="plan-container">
<card
:title="item.title"
:content="item.desc"
v-for="(item, index) in detail"
:key="index"
:footer="item.url"
:class="{ 'no-url': !item.url }"
>
<a href="javascript:;" @click="openIframePupop(index)" v-if="item.url" slot="footer">
{{ item.url }}
</a>
</card>
<protocol-iframe v-model="popupShow" :title="pupopData.title" :content="pupopData.list" />
</div>
</template>
<script>
import protocolIframe from "./modules/ProtocolIframe";
import card from "@/components/Card";
import detail from "@/api/detail.plan.mock";
export default {
name: "GoodsDetail",
components: {
card,
protocolIframe
},
data() {
return {
detail,
popupShow: false,
currentPupopIndex: null
};
},
computed: {
pupopData() {
const { detail, currentPupopIndex } = this;
const { title, list } = detail[currentPupopIndex] || { title: "", list: "" };
return {
title: title.substring(0, title.length - 3),
list
};
}
},
methods: {
openIframePupop(index) {
this.currentPupopIndex = index;
this.popupShow = true;
}
}
};
</script>
<style lang="less" src="./plan.less" scoped></style>
src/views/Goods/process.less 0 → 100644
View file @ 63b601e6
@import "../../style/var.less";
@import "../../style/mixins.less";
.cps-process {
&-list {
&-item {
position: relative;
display: flex;
padding-bottom: 16px;
&-title {
font-size: @font-size-12;
font-weight: @font-weight-bold;
color: @black;
width: 19px;
height: 19px;
margin: 0 20px 0 4px;
background-color: @orange-light;
border-radius: @border-radius-max;
line-height: @line-height-md;
position: relative;
text-align: center;
line-height: 19px;
}
&-content {
flex: 1;
background-color: #f6f6f6;
border-radius: @border-radius-sm / 2 @border-radius-md;
padding: @padding-sm;
h6 {
color: @black;
font-weight: @font-weight-bold;
font-size: @font-size-14;
line-height: @line-height-sm + 2;
}
small {
color: @gray-5;
font-size: @font-size-12;
line-height: @line-height-sm + 2;
}
}
&:last-child {
color: #fff;
padding-bottom: 0;
&::after {
display: none;
}
}
&::after {
content: " ";
display: block;
position: absolute;
top: 19px;
left: 13px;
width: 0;
height: 100%;
border-left: 1px solid #d8d8d8;
}
}
}
}
src/views/Goods/process.vue 0 → 100644
View file @ 63b601e6
<template>
<div class="cps-process-list">
<div class="cps-process-list-item" v-for="(item, index) in detail" :key="index">
<div class="cps-process-list-item-title">{{ index + 1 }}</div>
<div class="cps-process-list-item-content">
<h6>{{ item.title }}</h6>
<small v-html="item.desc"></small>
</div>
</div>
</div>
</template>
<script>
import detail from "@/api/detail.process.mock";
export default {
name: "CpsProcessDetail",
data() {
return {
detail
};
}
};
</script>
<style lang="less" src="./process.less" scoped></style>
src/views/Goods/rate.less 0 → 100644
View file @ 63b601e6
@import "../../style/var.less";
.rate-container {
background-color: @white;
}
.rate-head {
width: 100% !important;
/deep/ & > div {
width: 100% !important;
z-index: 100;
}
/deep/ .cr-tabbar {
font-size: @font-size-16;
padding: @padding-lg+1 0;
&-item {
position: relative;
&::after {
position: absolute;
left: 0;
right: 0;
margin: auto;
top: 26px;
// transition: width .2s linear;
content: " ";
display: block;
width: 0;
height: 4px;
background: @orange-light;
border-radius: @border-radius-lx;
}
&--active {
font-weight: 600;
&::after {
width: 32px;
}
}
}
}
.cr-radio-group {
margin-top: 10px;
}
}
.rate-body {
padding: 15px 0;
}
.rate-table {
margin: 0;
width: 100%;
thead {
th {
color: @gray-5;
font-size: @font-size-12;
font-weight: @font-weight-bold;
padding: @padding-sm + 2 @padding-md + 2;
text-align: left;
background-color: @gray-1;
&:first-child {
border-top-left-radius: @border-radius-lg;
border-bottom-left-radius: @border-radius-lg;
padding-left: 30px;
}
&:last-child {
border-top-right-radius: @border-radius-lg;
border-bottom-right-radius: @border-radius-lg;
}
}
}
tbody {
th {
color: @black;
font-size: @font-size-12;
font-weight: @font-weight-bold;
padding: @padding-sm + 2 @padding-md + 2;
text-align: left;
padding-left: 30px;
}
td {
color: @black;
font-size: @font-size-12;
padding: @padding-sm + 2 @padding-md + 2;
text-align: left;
}
}
}
\ No newline at end of file
src/views/Goods/rate.vue 0 → 100644
View file @ 63b601e6
<template>
<div class="rate-container">
<cr-sticky class="rate-head">
<cr-radio-btn v-model="titleIndex" :radio-data="titleOptions" />
<cr-tabbar v-model="amountIndex" active-color="#333" inactive-color="#666">
<cr-tabbar-item v-for="(item, index) in amountOptions" :key="index">
{{ item }}
</cr-tabbar-item>
</cr-tabbar>
</cr-sticky>
<div class="rate-body">
<table class="rate-table">
<thead>
<tr>
<th style="width: 40%">投保年龄</th>
<th style="width: 30%">男</th>
<th style="width: 30%">女</th>
</tr>
</thead>
<tbody>
<tr v-for="(item, index) in listOptions.age" :key="index">
<th>{{ item }}</th>
<td>{{ listOptions.list[0][index] || "-" }}</td>
<td>{{ listOptions.list[1][index] || "-" }}</td>
</tr>
</tbody>
</table>
</div>
</div>
</template>
<script>
import crRadioBtn from "@/components/CrRadioBtn";
import detail from "@/api/detail.rate.mock";
export default {
name: "GoodsDetail",
components: {
crRadioBtn
},
data() {
return {
detail,
titleIndex: 0,
amountIndex: 0
};
},
computed: {
titleOptions() {
return this.detail.map((item, index) => {
return {
label: item.title,
value: index
};
});
},
amountOptions() {
const { detail, titleIndex } = this;
const _length = detail[titleIndex].list.length;
return detail[titleIndex].list.map((item, index) => `${_length - index}0万保额`);
},
listOptions() {
const { detail, titleIndex, amountIndex } = this;
return {
age: detail[titleIndex].age,
list: detail[titleIndex].list[amountIndex]
};
}
},
methods: {}
};
</script>
<style lang="less" src="./rate.less" scoped></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