Skip to content

M
mongo-ui
Commit fa1ab9ec authored by 郝聪敏's avatar 郝聪敏
Browse files
Options

Merge branch 'feature/goods' into 'master' 

Feature/goods

See merge request !5
parents 9a8c998f fffdc5e4
Expand all Hide whitespace changes
Inline Side-by-side
Showing with 2688 additions and 67 deletions
jsconfig.json
View file @ fa1ab9ec
{ {
"compilerOptions": { "compilerOptions": {
"target": "es2017", "target": "es2017",
"allowSyntheticDefaultImports": false, "allowSyntheticDefaultImports": true,
"baseUrl": "./", "baseUrl": "./",
"paths": { "paths": {
"@/*": ["src/*"] "@/*": ["src/*"]
......
src/api/detail.plan.mock.js 0 → 100644
View file @ fa1ab9ec
This diff is collapsed.
src/api/detail.process.mock.js 0 → 100644
View file @ fa1ab9ec
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 @ fa1ab9ec
/* 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 @ fa1ab9ec
/* 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/api/goodsList.mock.js
View file @ fa1ab9ec
...@@ -8,6 +8,7 @@ export default [ ...@@ -8,6 +8,7 @@ export default [
sub: "报销医药费，有无社保均可保", sub: "报销医药费，有无社保均可保",
children: [ children: [
{ {
id: 1,
img: good01, img: good01,
title: "万家保·百万医疗险", title: "万家保·百万医疗险",
sub: "产品优势", sub: "产品优势",
...@@ -23,6 +24,7 @@ export default [ ...@@ -23,6 +24,7 @@ export default [
sub: "责任内疾病确诊即赔", sub: "责任内疾病确诊即赔",
children: [ children: [
{ {
id: 1,
img: good02, img: good02,
title: "万家保·重疾轻症险", title: "万家保·重疾轻症险",
sub: "100种重疾+40种轻症", sub: "100种重疾+40种轻症",
...@@ -32,6 +34,7 @@ export default [ ...@@ -32,6 +34,7 @@ export default [
allow: true allow: true
}, },
{ {
id: 1,
img: good02, img: good02,
title: "百年康惠保2.0重大疾病险", title: "百年康惠保2.0重大疾病险",
sub: "产品优势", sub: "产品优势",
...@@ -47,6 +50,7 @@ export default [ ...@@ -47,6 +50,7 @@ export default [
sub: "意外保障无等待期", sub: "意外保障无等待期",
children: [ children: [
{ {
id: 1,
img: good03, img: good03,
title: "万家保·综合意外险", title: "万家保·综合意外险",
sub: "产品优势", sub: "产品优势",
...@@ -62,6 +66,7 @@ export default [ ...@@ -62,6 +66,7 @@ export default [
sub: "避免因家庭顶梁柱身故，导致的房贷、子女教育等生活压力", sub: "避免因家庭顶梁柱身故，导致的房贷、子女教育等生活压力",
children: [ children: [
{ {
id: 1,
img: good04, img: good04,
title: "华贵大麦2020定期寿险", title: "华贵大麦2020定期寿险",
sub: "产品优势", sub: "产品优势",
......
src/assets/icons/svg/arrow-down.svg 0 → 100644
View file @ fa1ab9ec
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1595332471748" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2077" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><defs><style type="text/css"></style></defs><path d="M454.188 785.022c-145.192-150.177-290.378-300.353-435.422-450.526-59.842-61.836 37.327-154.021 97.313-91.899 129.23 133.647 258.318 267.296 387.548 400.868 133.646-134.287 267.436-268.574 401.083-402.934 60.84-61.123 158.011 31.060 97.244 91.971-150.105 150.89-300.279 301.703-450.454 452.521-24.933 24.934-72.666 25.575-97.311 0z" p-id="2078" fill="#666666"></path></svg>
\ No newline at end of file
src/assets/icons/svg/assistant.svg 0 → 100644
View file @ fa1ab9ec
<?xml version="1.0" encoding="UTF-8"?>
<svg width="28px" height="28px" viewBox="0 0 28 28" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<!-- Generator: Sketch 52.2 (67145) - http://www.bohemiancoding.com/sketch -->
<title>Group 19</title>
<desc>Created with Sketch.</desc>
<g id="产品" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="医疗险-" transform="translate(-17.000000, -3440.000000)">
<g id="Group-21" transform="translate(0.000000, 3433.000000)">
<g id="Group-19" transform="translate(17.000000, 7.000000)">
<g id="Group-18">
<rect id="Rectangle" fill-rule="nonzero" x="0" y="0" width="28" height="28"></rect>
<g id="Group-17" transform="translate(4.000000, 4.000000)">
<g id="客服">
<g id="Group">
<path d="M19,14.497429 L17.4685139,14.497429 L17.4685139,9.66495264 C17.4685139,5.19620298 13.8950542,1.55886333 9.50478589,1.55886333 C5.11451763,1.55886333 1.54105793,5.19620298 1.54105793,9.66495264 L1.54105793,14.497429 L0.00957178841,14.497429 L0.00957178841,9.66495264 C0.00957178841,4.31286333 4.24669144,0 9.50478589,0 C14.7628804,0 19,4.31286333 19,9.66495264 L19,14.497429 Z" id="Path" fill="#000000"></path>
<path d="M3.42988287,17.9788823 L2.91938829,17.9788823 C1.28580227,17.9788823 0.00956460957,16.6278666 0.00956460957,15.0170419 L0.00956460957,12.9905196 C0.00956460957,11.3277313 1.3368534,10.0286793 2.91938829,10.0286793 L3.42988287,10.0286793 C5.06346889,10.0286793 6.33970655,11.379695 6.33970655,12.9905196 L6.33970655,15.0170419 C6.33970655,16.6798303 5.01241776,17.9788823 3.42988287,17.9788823 Z M2.91938829,11.5355886 C2.15364521,11.5355886 1.54105076,12.159134 1.54105076,12.9385656 L1.54105076,14.965088 C1.54105076,15.7445196 2.15364521,16.368065 2.91938829,16.368065 L3.42988287,16.368065 C4.19562594,16.368065 4.8082204,15.7445196 4.8082204,14.965088 L4.8082204,12.9905269 C4.8082204,12.2110953 4.19562594,11.5875499 3.42988287,11.5875499 L2.91938829,11.5875499 L2.91938829,11.5355886 Z M16.0901691,17.9788823 L15.6307233,17.9788823 C13.9971373,17.9788823 12.7208996,16.6278666 12.7208996,15.0170419 L12.7208996,12.9905196 C12.7208996,11.3277313 14.0481884,10.0286793 15.6307233,10.0286793 L16.0901691,10.0286793 C17.7237552,10.0286793 18.9999928,11.379695 18.9999928,12.9905196 L18.9999928,15.0170419 C18.9999928,16.6798303 17.672704,17.9788823 16.0901691,17.9788823 Z M15.5796746,11.5355886 C14.8139315,11.5355886 14.201337,12.159134 14.201337,12.9385656 L14.201337,14.965088 C14.201337,15.7445196 14.8139315,16.368065 15.5796746,16.368065 L16.0391204,16.368065 C16.8048635,16.368065 17.4174579,15.7445196 17.4174579,14.965088 L17.4174579,12.9905269 C17.4174579,12.2110953 16.8048635,11.5875499 16.0391204,11.5875499 L15.5796746,11.5875499 L15.5796746,11.5355886 Z" id="Shape" fill="#000000" fill-rule="nonzero"></path>
<path d="M14.8139458,8.26197564 C14.5076486,8.26197564 14.2013514,8.05412728 14.0992515,7.74235535 C13.5887569,6.23545332 12.2614681,5.55994668 12.2614681,5.55994668 C11.9041222,5.35209832 11.7509736,4.88444005 11.9551709,4.52070365 C12.159369,4.15696969 12.6188141,4.00108336 12.9761625,4.20893099 C13.0272119,4.26089302 14.8139458,5.19621028 15.5286474,7.27470365 C15.681796,7.69040135 15.4775979,8.10609662 15.0692015,8.26198295 L14.813953,8.26198295 L14.8139458,8.26197564 Z" id="Path" fill="#FFC842" fill-rule="nonzero"></path>
<path d="M18.3282801,12.2678018 L18.3282801,16.7592603 C18.3282801,18.9683993 16.5374191,20.7592603 14.3282801,20.7592603 L11,20.7592603" id="Path-3" stroke="#000000" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" fill-rule="nonzero"></path>
<rect id="Rectangle" fill="#FFC842" fill-rule="nonzero" x="6" y="19" width="7" height="3" rx="1"></rect>
</g>
</g>
<path d="" id="Path-37" stroke="#979797" fill-rule="nonzero"></path>
</g>
</g>
</g>
</g>
</g>
</g>
</svg>
\ No newline at end of file
src/assets/icons/svg/check-circle.svg 0 → 100644
View file @ fa1ab9ec
<?xml version="1.0" encoding="UTF-8"?>
<svg width="12px" height="13px" viewBox="0 0 12 13" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<!-- Generator: Sketch 52.2 (67145) - http://www.bohemiancoding.com/sketch -->
<title>首页</title>
<desc>Created with Sketch.</desc>
<g id="首页" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g transform="translate(-20.000000, -427.000000)" id="Group-10">
<g transform="translate(20.000000, 427.664719)">
<g id="对勾">
<g id="Group-2">
<circle id="Oval" fill="#FFC842" fill-rule="nonzero" cx="6" cy="6" r="6"></circle>
<polyline id="Path-17" stroke="#333333" stroke-linecap="round" stroke-linejoin="round" fill-rule="nonzero" points="3 6.24771798 5.05215696 8.24771798 8.15040625 5"></polyline>
</g>
</g>
</g>
</g>
</g>
</svg>
\ No newline at end of file
src/assets/icons/svg/triangle-down.svg 0 → 100644
View file @ fa1ab9ec
<?xml version="1.0" encoding="UTF-8"?>
<svg width="16px" height="17px" viewBox="0 0 16 17" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<!-- Generator: Sketch 52.2 (67145) - http://www.bohemiancoding.com/sketch -->
<title>Group 8</title>
<desc>Created with Sketch.</desc>
<g id="顾问" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g transform="translate(-339.000000, -1834.000000)" fill-rule="nonzero" id="Group-8">
<g transform="translate(20.000000, 1830.000000)">
<g id="Group-24" transform="translate(319.000000, 4.000000)">
<g id="Group-14" transform="translate(0.000000, 0.500000)">
<rect id="Rectangle" fill="#FFFFFF" x="0" y="0" width="16" height="16"></rect>
<path d="M8.70710678,5.70710678 L13.2928932,10.2928932 C13.6834175,10.6834175 13.6834175,11.3165825 13.2928932,11.7071068 C13.1053568,11.8946432 12.8510029,12 12.5857864,12 L3.41421356,12 C2.86192881,12 2.41421356,11.5522847 2.41421356,11 C2.41421356,10.7347835 2.5195704,10.4804296 2.70710678,10.2928932 L7.29289322,5.70710678 C7.68341751,5.31658249 8.31658249,5.31658249 8.70710678,5.70710678 Z" id="Triangle" fill="#EEEEEE" transform="translate(8.000000, 8.500000) scale(1, -1) translate(-8.000000, -8.500000) "></path>
</g>
</g>
</g>
</g>
</g>
</svg>
\ No newline at end of file
src/components/Card.vue 0 → 100644
View file @ fa1ab9ec
<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/Collapse.vue 0 → 100644
View file @ fa1ab9ec
<template>
<div>
<ul>
<li v-for="(item, index) in list" :key="index">
<p @click="changeContent(index)">{{ item.title }}</p>
<div class="box" v-show="item.showContent">11111</div>
</li>
</ul>
</div>
</template>
<script>
export default {
name: "Collapse",
props: {
list: {
type: Array,
required: true,
default() {
return [];
}
}
},
methods: {
changeContent(index) {
//通过index拿到当前值
this.list[index].showContent = !this.list[index].showContent;
}
}
};
</script>
<style></style>
src/components/Copyright.vue 0 → 100644
View file @ fa1ab9ec
<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 0 → 100644
View file @ fa1ab9ec
<template>
<cr-radio-group v-model="value" class="radio-btn">
<cr-radio
:name="item.value"
:class="{ checked: value === item.value }"
v-for="(item, index) in radioData"
:key="index"
>
<div v-html="item.label"></div>
</cr-radio>
</cr-radio-group>
</template>
<script>
const CHANGE_EVENT = "input";
export default {
name: "CrRadioBtn",
props: {
radioData: {
type: Array,
default() {
return [];
}
},
value: null
},
watch: {
value(val) {
this.$emit(CHANGE_EVENT, val);
}
}
};
</script>
<style lang="less">
@import "../style/var.less";
.radio-btn {
display: flex;
justify-content: space-around;
align-items: center;
margin-bottom: 12px;
/deep/ .cr-radio {
margin-right: 10px;
flex: 1;
background: @white;
box-shadow: 0px 5px 25px 0px rgba(0, 0, 0, 0.07);
border-radius: @border-radius-sm;
height: 36px;
line-height: 36px;
transition: all 0.1s linear;
&:last-child {
margin-right: 0;
}
&.checked {
background-color: @orange-light;
/deep/ .cr-radio__label {
font-weight: @font-weight-bold;
}
}
&__icon {
display: none;
}
&__label {
font-size: @font-size-14;
color: @black;
width: 100%;
text-align: center;
margin-left: 0;
}
}
}
</style>
src/components/GoodAction.vue 0 → 100644
View file @ fa1ab9ec
<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/components/GoodList/index.less 0 → 100644
View file @ fa1ab9ec
@import "../../style/var.less";
@import "../../style/mixins.less";
.goods-list {
background-color: @white;
padding: 18px 20px;
.cell-title-mixin();
&-head {
margin-bottom: 15px;
.svg-icon {
width: 16px;
height: 16px;
vertical-align: -0.3em;
}
}
// &-children {}
&-item {
margin: 16px 0 20px;
border-radius: 14px;
overflow: hidden;
&.not-allow {
position: relative;
pointer-events: none;
&::before,
&::after {
display: block;
position: absolute;
top: 0px;
left: 0;
z-index: 99;
text-align: center;
width: 100%;
font-weight: bold;
}
&::before {
content: "即将开放，敬请期待";
background: rgba(227, 226, 226, 0.9);
font-size: @font-size-16;
color: @black;
height: calc(100% - 20px);
line-height: 20px;
padding-top: 20px;
}
&::after {
content: "COMING SOON";
font-size: @font-size-12;
font-family: "DIN-Bold";
line-height: 10px;
padding-top: 44px;
height: calc(100% - 44px);
letter-spacing: 6px;
left: 3px;
color: @white;
}
}
&-img {
img {
display: block;
position: relative;
z-index: 90;
width: 72px;
height: 72px;
}
}
&-glory {
position: absolute;
top: 0;
left: 0;
z-index: 98;
background-color: #fcfe67 !important;
}
&-info {
max-height: 72px;
h5 {
margin-bottom: 3px;
}
small {
line-height: 20px;
}
}
&-price {
display: flex;
align-items: baseline;
margin-top: 4px;
&-amount {
font-size: @font-size-20;
line-height: @line-height-md;
color: @red;
font-weight: 600;
margin-right: 3px;
}
&-unit {
font-size: @font-size-12;
color: @gray-4;
line-height: @line-height-sm;
}
}
}
}
\ No newline at end of file
src/components/GoodList.vue → src/components/GoodList/index.vue
View file @ fa1ab9ec
...@@ -12,10 +12,19 @@ ...@@ -12,10 +12,19 @@
</slot> </slot>
</div> </div>
<div class="goods-list-children" v-if="item.children.length > 0" :key="'children' + index"> <div class="goods-list-children" v-if="item.children.length > 0" :key="'children' + index">
<cr-row type="flex" class="goods-list-item" v-for="(it, idx) in item.children" :key="idx"> <cr-row
type="flex"
class="goods-list-item"
:class="{ 'not-allow': !it.allow }"
v-for="(it, idx) in item.children"
:key="idx"
@click.native="clickItem(it)"
>
<cr-col span="7" class="goods-list-item-img"> <cr-col span="7" class="goods-list-item-img">
<!-- <cr-tag type="primary">标签</cr-tag> --> <cr-tag type="warning" shape="round" class="goods-list-item-glory" v-if="it.glory">
<cr-image width="72px" height="72px" :src="it.img" /> {{ it.glory }}
</cr-tag>
<img :src="it.img" />
</cr-col> </cr-col>
<cr-col span="17" class="goods-list-item-info"> <cr-col span="17" class="goods-list-item-info">
<h5>{{ it.title || "-" }}</h5> <h5>{{ it.title || "-" }}</h5>
...@@ -31,9 +40,19 @@ ...@@ -31,9 +40,19 @@
</template> </template>
</div> </div>
<div v-else> <div v-else>
<cr-row type="flex" class="goods-list-item" v-for="(it, idx) in list" :key="idx"> <cr-row
type="flex"
class="goods-list-item"
:class="{ 'not-allow': !it.allow }"
v-for="(it, idx) in list"
:key="idx"
@click.native="clickItem(it)"
>
<cr-col span="7" class="goods-list-item-img"> <cr-col span="7" class="goods-list-item-img">
<cr-image width="72px" height="72px" :src="it.img" /> <cr-tag type="warning" shape="round" class="goods-list-item-glory" v-if="it.glory">
{{ it.glory }}
</cr-tag>
<img :src="it.img" />
</cr-col> </cr-col>
<cr-col span="17" class="goods-list-item-info"> <cr-col span="17" class="goods-list-item-info">
<h5>{{ it.title || "-" }}</h5> <h5>{{ it.title || "-" }}</h5>
...@@ -61,47 +80,17 @@ export default { ...@@ -61,47 +80,17 @@ export default {
computed: { computed: {
// TODO // TODO
hasChildren: function() { hasChildren: function() {
return this.list[0].children && this.list[0].children.length > 0; return this.list[0] && this.list[0].children && this.list[0].children.length > 0;
} }
} },
}; methods: {
</script> clickItem(item) {
<style lang="less" scoped> if (!item.allow) {
@import "../style/var.less"; return;
@import "../style/mixins.less";
.goods-list {
background-color: @white;
padding: 18px 20px;
.cell-title-mixin();
&-head {
margin-bottom: 15px;
/deep/ .svg-icon {
width: 16px;
height: 16px;
vertical-align: -0.3em;
}
}
// &-children {}
&-item {
margin: 16px 0 20px;
// &-img {}
&-price {
display: flex;
align-items: baseline;
margin-top: 4px;
&-amount {
font-size: @font-size-20;
line-height: @line-height-md;
color: @red;
font-weight: 600;
margin-right: 3px;
}
&-unit {
font-size: @font-size-12;
color: @gray-4;
line-height: @line-height-sm;
} }
this.$router.push({ path: "/goods/detail", query: { id: item.id } });
} }
} }
} };
</style> </script>
<style lang="less" src="./index.less" scoped></style>
src/components/SvgIcon.vue
View file @ fa1ab9ec
...@@ -32,7 +32,7 @@ export default { ...@@ -32,7 +32,7 @@ export default {
}; };
</script> </script>
<style scoped> <style>
.svg-icon { .svg-icon {
width: 1em; width: 1em;
height: 1em; height: 1em;
......
src/mixins/dialogMixin.js 0 → 100644
View file @ fa1ab9ec
export default {
props: ["showmodal"],
methods: {
modalClose() {
this.$emit("update:showmodal", false);
}
}
};
src/mixins/inputFixMixin.js 0 → 100644
View file @ fa1ab9ec
/*
* @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 @ fa1ab9ec
...@@ -20,8 +20,23 @@ const routes = [ ...@@ -20,8 +20,23 @@ const routes = [
}, },
{ {
path: "/goods", path: "/goods",
name: "goods", name: "Goods",
component: () => import(/* webpackChunkName: "about" */ "../views/Goods/index.vue") component: () => import(/* webpackChunkName: "goods" */ "../views/Goods/index.vue")
},
{
path: "/goods/detail",
name: "GoodsDetail",
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 @ fa1ab9ec
...@@ -7,26 +7,26 @@ const { ...@@ -7,26 +7,26 @@ const {
Button, Button,
Image, Image,
// Icon, // Icon,
// Cell, Cell,
// CellGroup, CellGroup,
Row, Row,
Col, Col,
// Popup, Popup,
// Overlay, // Overlay,
Divider, Divider,
// Loading, // Loading,
// Toast, Toast,
// Uploader, // Uploader,
// Notify, // Notify,
// Picker, // Picker,
// Area, // Area,
// Dialog, // Dialog,
// Field, Field,
// Checkbox, Checkbox,
// CheckboxGroup, // CheckboxGroup,
// Radio, Radio,
// RadioGroup, RadioGroup,
// Switch, Switch,
Tag, Tag,
// PullRefresh, // PullRefresh,
// CardList, // CardList,
...@@ -48,9 +48,18 @@ const { ...@@ -48,9 +48,18 @@ const {
Vue.use(Button); Vue.use(Button);
Vue.use(Image); Vue.use(Image);
Vue.use(Cell);
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(Checkbox);
Vue.use(Radio);
Vue.use(RadioGroup);
Vue.use(Switch);
Vue.use(Tag); Vue.use(Tag);
Vue.use(Tabbar); Vue.use(Tabbar);
Vue.use(TabbarItem); Vue.use(TabbarItem);
......
src/style/index.less
View file @ fa1ab9ec
@import "reset.less"; @import "reset.less";
@import "var.less"; @import "var.less";
@import "mixins.less";
html,body { html,body {
height: 100%; height: 100%;
} }
...@@ -7,6 +8,10 @@ body { ...@@ -7,6 +8,10 @@ body {
font-family: @font-family; font-family: @font-family;
background-color: @background-color; background-color: @background-color;
} }
a {
color: @blue;
font-size: @font-size-12;
}
.cr-button { .cr-button {
padding: 0 @padding-sm !important; padding: 0 @padding-sm !important;
&__text { &__text {
...@@ -17,8 +22,53 @@ body { ...@@ -17,8 +22,53 @@ body {
background-color: @button-warning-background-color !important; background-color: @button-warning-background-color !important;
border: 1px solid @button-warning-border-color !important; border: 1px solid @button-warning-border-color !important;
border-radius: @border-radius-md !important; border-radius: @border-radius-md !important;
height: @button-default-height !important; }
line-height: @button-default-line-height !important; }
font-size: @button-default-font-size !important;
.cr-tag {
border-radius: 8px 2px 8px 2px !important;
background-color: @tag-default-background-color !important;
color: @tag-default-color !important;
padding: 1px 6px 2px !important;
font-size: 10px !important;
font-weight: bold;
&--round {
border-radius: 1em !important;
}
&_light {
background-color: @tag-default-light-background-color !important;
color: @tag-default-light-color !important;
}
&--primary {
background-color: @tag-primary-background-color !important;
color: @tag-primary-color !important;
&_light {
background-color: @tag-primary-light-background-color !important;
color: @tag-primary-light-color !important;
}
}
&--success {
background-color: @tag-success-background-color !important;
color: @tag-success-color !important;
&_light {
background-color: @tag-success-light-background-color !important;
color: @tag-success-light-color !important;
}
}
&--danger {
background-color: @tag-danger-background-color !important;
color: @tag-danger-color !important;
&_light {
background-color: @tag-danger-light-background-color !important;
color: @tag-danger-light-color !important;
}
}
&--warning {
background-color: @tag-warning-background-color !important;
color: @tag-warning-color !important;
&_light {
background-color: @tag-warning-light-background-color !important;
color: @tag-warning-light-color !important;
}
} }
} }
src/style/var.less
View file @ fa1ab9ec
...@@ -59,9 +59,10 @@ ...@@ -59,9 +59,10 @@
@font-size-16: 16px; @font-size-16: 16px;
@font-size-18: 18px; @font-size-18: 18px;
@font-size-20: 20px; @font-size-20: 20px;
@font-size-26: 26px;
@font-size-28: 28px; @font-size-28: 28px;
@font-size-32: 32px; @font-size-32: 32px;
@font-weight-bold: 500; @font-weight-bold: 700;
@font-family: -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Helvetica, Segoe UI, Arial, Roboto, 'PingFang SC', 'Hiragino Sans GB', 'Microsoft Yahei', sans-serif; @font-family: -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Helvetica, Segoe UI, Arial, Roboto, 'PingFang SC', 'Hiragino Sans GB', 'Microsoft Yahei', sans-serif;
@base-font-family: @font-family; @base-font-family: @font-family;
...@@ -72,8 +73,8 @@ ...@@ -72,8 +73,8 @@
@button-small-min-width: 48px; @button-small-min-width: 48px;
@button-small-line-height: 28px; @button-small-line-height: 28px;
@button-large-height: 52px; @button-large-height: 50px;
@button-large-line-height: 52px; @button-large-line-height: 50px;
@button-default-height: 36px; @button-default-height: 36px;
@button-default-line-height: 36px; @button-default-line-height: 36px;
......
src/views/Goods/detail.less 0 → 100644
View file @ fa1ab9ec
@import "../../style/var.less";
.sub-text-mixins {
font-size: @font-size-12;
color: @gray-4;
line-height: @line-height-sm;
}
.container {
background-color: @background-color;
margin-bottom: 80px;
}
.plan-tip {
font-size: @font-size-11;
color: @gray-5;
line-height: @line-height-sm;
margin-top: 14px;
.svg-icon {
margin-right: 3px;
width: 12px;
height: 12px;
}
&_offset {
margin-right: 4px;
}
}
.insure-form {
&-title {
font-size: @font-size-16;
font-weight: @font-weight-bold;
margin: @padding-md 0;
}
/deep/ .cr-cell {
&-group {
&::after {
display: none;
}
}
background-color: @gray-1;
border-radius: @border-radius-md;
margin-bottom: 12px;
&::after {
display: none;
}
&__title {
color: #333333;
}
}
&-item_nobg {
background-color: @white !important;
padding: 10px 0;
overflow: initial;
align-items: baseline;
margin-bottom: 0 !important;
/deep/ .cr-cell {
&__title {
width: 31%;
flex: none;
}
&__value {
width: 69%;
flex: none;
overflow: initial;
}
}
}
&-switch {
display: flex;
justify-content: space-between;
align-items: center;
flex: 1;
&-card {
padding-top: 0;
}
&-label {
font-size: @font-size-12;
color: @black;
margin-right: 4px;
}
.cr-tag {
margin: 0 auto 0 8px;
color: @white !important;
}
&-option {
display: flex;
align-items: center;
justify-content: right;
}
}
&-pact {
display: flex;
justify-content: space-between;
align-items: center;
padding: 14px 0;
/deep/ .cr-checkbox__label {
font-size: @font-size-11;
color: @gray-4;
line-height: @line-height-lg;
}
&-link {
margin-top: -3.5px;
a {
font-size: @font-size-11;
vertical-align: middle;
}
i {
display: inline-block;
width: 0;
height: 12px;
border-right: 1px @blue solid;
vertical-align: middle;
margin: 0 3px;
}
}
}
}
.intro {
margin: 10px 0;;
padding: 0;
.card-body {
margin-bottom: 0;
}
}
.det-body {
.card {
padding-bottom: 0;
}
/deep/ .card-body {
margin-bottom: 0;
}
}
src/views/Goods/detail.vue
View file @ fa1ab9ec
<template>
<div class="container">
<detail-header @click="goInsureState = true" />
<div class="det-body">
<card title="保险计划" :option="['查看详情']" @option-click="openIframePupop(4)">
<cr-radio-btn v-model="formData.planValue" :radio-data="planOptions" />
<compactCellGroup :cell-data="planCellData" :text-bold="true" />
<div class="plan-tip">
<svg-icon icon-class="check-circle" />
<span class="plan-tip_offset">垫付医药费轻症赔付后，重疾保障继续有效</span>
<svg-icon icon-class="check-circle" />
<span>可逐年续保至99岁</span>
</div>
</card>
<card title="请填写投保信息">
<h6 class="insure-form-title">本人信息</h6>
<cr-cell-group class="insure-form">
<cr-field v-model="value" placeholder="请输入投保人姓名" label="姓名" />
<cr-field v-model="value" placeholder="信息保密，仅用于投保" label="身份证号" />
</cr-cell-group>
<h6 class="insure-form-title">为谁投保</h6>
<cr-radio-btn v-model="formData.insured" :radio-data="insuredOptions" />
<cr-cell-group class="insure-form">
<cr-field v-model="value" placeholder="请输入投保人姓名" label="姓名" />
<cr-field v-model="value" placeholder="信息保密，仅用于投保" label="身份证号" />
<cr-cell title="缴费方式" class="insure-form-item_nobg">
<cr-radio-btn v-model="formData.payway" :radio-data="paywayOptions" />
</cr-cell>
</cr-cell-group>
</card>
<card class="insure-form-switch-card">
<div class="insure-form-switch" slot="header">
<h5 class="card-title">开通次年自动续保</h5>
<cr-tag type="warning">小果建议您开通</cr-tag>
<div class="insure-form-switch-option">
<span class="insure-form-switch-label">已开通</span>
<cr-switch v-model="formData.auto" active-color="#FFC842" size="23.5px" />
</div>
</div>
<div>
<compactCellGroup :cell-data="autoCellData" :no-val="true" @click="openIframePupop(7)" />
</div>
</card>
<card
title="投保须知"
:option="['查看完整费率表']"
:footer="true"
@option-click="openIframePupop(6)"
>
<compactCellGroup :cell-data="noticeCellData" />
<div class="insure-form-pact" slot="footer">
<cr-checkbox
shape="round"
icon-size="12px"
v-model="formData.pact"
checked-color="#FFC842"
>
投保前请阅读
</cr-checkbox>
<div class="insure-form-pact-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>
</card>
<card class="intro">
<cr-image :src="item" v-for="(item, index) in introImg" :key="index" />
</card>
<cps-demo />
<cps-process @click="openIframePupop" />
<cps-qa />
</div>
<detail-footer />
<copyright />
<good-action />
<protocol-iframe
v-model="popupShow"
:title="pupopData.title"
:content="pupopData.content"
:url="pupopData.url"
>
<cps-process-detail v-if="currentPupopIndex === 5" />
<cps-rate v-if="currentPupopIndex === 6" />
</protocol-iframe>
<go-insure-dialog v-model="goInsureState" />
</div>
</template>
<script>
import intro01 from "@/assets/goods/detail/zhongjixian/intro-01.png";
import intro02 from "@/assets/goods/detail/zhongjixian/intro-02.png";
import intro03 from "@/assets/goods/detail/zhongjixian/intro-03.png";
import intro04 from "@/assets/goods/detail/zhongjixian/intro-04.png";
import detailHeader from "./modules/DetailHeader";
import detailFooter from "./modules/DetailFooter";
import compactCellGroup from "./modules/CompactCellGroup";
import cpsDemo from "./modules/CpsDemo";
import cpsProcess from "./modules/CpsProcess";
import cpsQa from "./modules/CpsQA";
import protocolIframe from "./modules/ProtocolIframe";
import goInsureDialog from "./modules/GoInsureDialog";
import cpsProcessDetail from "./process";
import cpsRate from "./rate";
import crRadioBtn from "@/components/CrRadioBtn";
import card from "@/components/Card";
import copyright from "@/components/Copyright";
import goodAction from "@/components/GoodAction";
export default {
name: "GoodsDetail",
components: {
detailHeader,
detailFooter,
compactCellGroup,
crRadioBtn,
card,
cpsDemo,
cpsProcess,
cpsQa,
copyright,
goInsureDialog,
goodAction,
protocolIframe,
cpsProcessDetail,
cpsRate
},
data() {
return {
introImg: [intro01, intro02, intro03, intro04],
autoCellData: [
{ title: "【省心】自动续保，不用担心续保不及时导致保障中断", value: "" },
{ title: "【放心】开通自动续保后，可随时取消", value: "" },
{ title: "【安心】自动续保按费率可自动扣费", value: "" },
{
title: {
needSlot: true,
tpl: " 阅读并同意<a href='javascript:;'>《自动续保服务协议》</a>"
},
value: ""
}
],
noticeCellData: [
{ title: "投保年龄", value: "30~6周岁" },
{ title: "保障期限", value: "1年（可续保至99周岁）" },
{ title: "等待期", value: "90天" },
{
title: "保费",
value: {
needSlot: true,
tpl: "保费与保额、被保人年龄有关<br />首月3元，次月5.6元/月起",
longTxt: true
}
}
],
planOptions: [
{ label: "30万", value: "3" },
{ label: "20万", value: "2" },
{ label: "10万", value: "1" }
],
insuredOptions: [
{ label: "本人", value: "1" },
{ label: "配偶", value: "2" },
{ label: "父母", value: "3" },
{ label: "子女", value: "4" }
],
paywayOptions: [
{ label: "月缴<small style='color: #999;font-size: 11px'>（12期）</small>", value: "1" },
{ label: "一次交清", value: "2" }
],
popupShow: false,
currentPupopIndex: null,
popupArray: [
{ title: "保险条款", url: "http://pages.xyqb.com/p/d3c0c8d6-ddea-4335-8aaf-f09dafc580e9/" },
{ title: "健康告知", url: "http://pages.xyqb.com/p/d3c0c8d6-ddea-4335-8aaf-f09dafc580e9/" },
{
title: "投保须知及声明",
url: "http://pages.xyqb.com/p/d3c0c8d6-ddea-4335-8aaf-f09dafc580e9/"
},
{
title: "平台服务协议",
url: "http://pages.xyqb.com/p/d3c0c8d6-ddea-4335-8aaf-f09dafc580e9/"
},
{ title: "保险计划" },
{ title: "保险计划" },
{ title: "完整费率" },
{ title: "自动续保", url: "http://pages.xyqb.com/p/d3c0c8d6-ddea-4335-8aaf-f09dafc580e9/" }
],
formData: {
planValue: "3",
insured: "1",
payway: "1",
auto: true,
pact: true
},
goInsureState: false
};
},
computed: {
pupopData() {
const { popupArray, currentPupopIndex } = this;
return popupArray[currentPupopIndex] || {};
},
planCellData() {
const { planValue } = this.formData;
let _data = [
{ title: "100种重大疾病医疗保险金", value: "30万" },
{ title: "40种轻症保险金", value: "6万" },
{ title: "投保年龄", value: "30天~60周岁" },
{ title: "保险期限", value: "1年" }
];
switch (planValue) {
case "3":
_data = [
{ title: "100种重大疾病医疗保险金", value: "30万" },
{ title: "40种轻症保险金", value: "6万" },
{ title: "投保年龄", value: "30天~60周岁" },
{ title: "保险期限", value: "1年" }
];
break;
case "2":
_data = [
{ title: "100种重大疾病医疗保险金", value: "20万" },
{ title: "40种轻症保险金", value: "4万" },
{ title: "投保年龄", value: "30天~60周岁" },
{ title: "保险期限", value: "1年" }
];
break;
case "1":
_data = [
{ title: "100种重大疾病医疗保险金", value: "10万" },
{ title: "40种轻症保险金", value: "2万" },
{ title: "投保年龄", value: "30天~50周岁" },
{ title: "保险期限", value: "1年" }
];
break;
default:
break;
}
return _data;
}
},
methods: {
openIframePupop(index) {
if (index === 4) {
this.$router.push("/goods/plan");
return;
}
this.currentPupopIndex = index;
this.popupShow = true;
}
}
};
</script>
<style lang="less" src="./detail.less" scoped></style>
src/views/Goods/index.vue
View file @ fa1ab9ec
...@@ -15,7 +15,7 @@ ...@@ -15,7 +15,7 @@
<script> <script>
import AiTestTip from "./modules/AiTestTip"; import AiTestTip from "./modules/AiTestTip";
import GoodList from "@/components/GoodList"; import GoodList from "@/components/GoodList/index";
import goodsList from "@/api/goodsList.mock"; import goodsList from "@/api/goodsList.mock";
...@@ -28,8 +28,11 @@ export default { ...@@ -28,8 +28,11 @@ export default {
data() { data() {
return { return {
active: 0, active: 0,
goodsList goodsList: []
}; };
},
mounted() {
this.goodsList = goodsList;
} }
}; };
</script> </script>
......
src/views/Goods/inform.less 0 → 100644
View file @ fa1ab9ec
@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 @ fa1ab9ec
<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 @ fa1ab9ec
...@@ -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";
...@@ -61,11 +61,15 @@ export default { ...@@ -61,11 +61,15 @@ export default {
} }
span { span {
color: @orange-dark; color: @orange-dark;
font-weight: bold;
} }
} }
&-btn { &-btn {
width: 76px; width: 76px;
.cr-button { .cr-button {
font-size: @button-default-font-size !important;
height: @button-default-height !important;
line-height: @button-default-line-height !important;
border-radius: @border-radius-sm !important; border-radius: @border-radius-sm !important;
} }
} }
......
src/views/Goods/modules/CompactCellGroup.vue 0 → 100644
View file @ fa1ab9ec
<template>
<cr-cell-group
class="compact-cell-group"
:class="{
'compact-cell-text_bold': textBold,
'compact-cell-text_noval': noVal
}"
>
<cr-cell
v-for="(item, index) in cellData"
:key="index"
:title="!item.title.needSlot && (item.title.tpl || item.title)"
:value="!item.value.needSlot && (item.value.tpl || item.value)"
:class="{ 'compact-cell': 1, 'compact-cell_br': item.value.longTxt }"
@click="cellClick(item)"
>
<template v-if="item.title.needSlot" slot="title">
<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-group>
</template>
<script>
const CELL_CLICK_EVENT = "click";
export default {
name: "CompactCellGroup",
props: {
cellData: {
type: Array,
default() {
return [];
}
},
textBold: {
type: Boolean,
default: false
},
noVal: {
type: Boolean,
default: false
}
},
methods: {
cellClick(e) {
if (e.title.needSlot || e.value.needSlot) {
this.$emit(CELL_CLICK_EVENT, e);
}
}
}
};
</script>
<style lang="less">
@import "../../../style/var.less";
.sub-text-mixins {
font-size: @font-size-12;
color: @gray-4;
line-height: @line-height-sm;
}
.compact-cell {
&-group {
background: @gray-1;
border-radius: @border-radius-md;
padding: @padding-md;
/deep/ .cr-cell {
&-group {
&::after {
display: none;
}
}
&__title {
color: @gray-5;
}
&__value {
color: @black;
}
}
}
background-color: @gray-1;
font-size: @font-size-12;
color: @black;
padding: 0;
&::after {
display: none;
}
&-text_bold {
/deep/ .cr-cell__title {
color: @black;
}
/deep/ .cr-cell__value {
color: @black;
font-weight: @font-weight-bold;
}
}
&-text_noval {
/deep/ .cr-cell__value {
display: none;
}
}
&_br {
/deep/ .cr-cell__value {
flex: none;
width: 165px;
}
}
}
</style>
src/views/Goods/modules/CpsDemo.vue 0 → 100644
View file @ fa1ab9ec
<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 @ fa1ab9ec
<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 @ fa1ab9ec
<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 @ fa1ab9ec
<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 0 → 100644
View file @ fa1ab9ec
<template>
<div class="det-hd">
<img src="../../../assets/logo-top.png" alt="logo" class="det-hd-logo" />
<div class="det-hd-recommend">
<h2 class="det-hd-recommend-h2">智能产品官-小果</h2>
<h1 class="det-hd-recommend-h1">为您优选推荐</h1>
<cr-tag>
由
<strong>华泰财险</strong>承保
</cr-tag>
</div>
<div class="det-hd-insured">
<h1 class="det-hd-insured-title">30万重疾轻症保障</h1>
<small class="det-hd-insured-sub">100种重症+40种轻症确诊即赔</small>
<h5 class="det-hd-insured-price">
首月
<strong>3</strong>元
<small>次月5.6元/月起</small>
</h5>
<cr-button type="warning" block @click="btnClick">立即开启保障</cr-button>
<div class="det-hd-insured-people">
已有
<em>31492</em>位用户投保
</div>
</div>
</div>
</template>
<script>
const BTN_CLICK_EVENT = "click";
export default {
name: "DetailHeader",
data() {
return {};
},
methods: {
btnClick() {
this.$emit(BTN_CLICK_EVENT, 1);
}
}
};
</script>
<style lang="less">
@import "../../../style/var.less";
.sub-text-mixins {
font-size: @font-size-12;
color: @gray-4;
line-height: @line-height-sm;
}
.det-hd {
background: url("../../../assets/goods/detail/bg-zhongjixian.png") top no-repeat;
background-size: contain;
padding: 10px 16px;
&-logo {
position: relative;
left: -16px;
width: 100px;
height: 32px;
margin: 16px 0 12px;
}
&-recommend {
color: @white;
padding: 0 8px;
&-h2 {
font-size: @font-size-20;
font-weight: @font-weight-bold;
line-height: 28px;
}
&-h1 {
font-size: @font-size-26;
font-weight: @font-weight-bold;
line-height: 37px;
margin-top: -3px;
}
.cr-tag {
background: linear-gradient(180deg, rgba(219, 99, 19, 1) 0%, rgba(192, 83, 10, 1) 100%);
font-size: 12px !important;
font-weight: normal !important;
strong {
font-weight: bold;
margin: 0 3px;
}
}
}
&-insured {
margin-top: 39px;
background: @white;
box-shadow: 0px 5px 25px 0px rgba(0, 0, 0, 0.07);
border-radius: @border-radius-md;
padding: 30px 32px;
text-align: center;
background: url(../../../assets/goods/detail/stamp.png) no-repeat;
background-color: #fff;
background-position: bottom right;
background-size: 19%;
&-title {
font-size: 34px;
font-weight: @font-weight-bold;
color: @black;
line-height: @line-height-lg * 2;
margin-top: 1px;
}
&-sub {
.sub-text-mixins();
margin-top: 8px;
}
&-price {
font-size: @font-size-16;
font-weight: @font-weight-bold;
color: @black;
line-height: @line-height-sm;
margin-top: 24px;
strong {
color: @orange-dark;
font-size: @font-size-32;
font-weight: @font-weight-bold;
margin: 0 3px;
}
small {
margin-left: 5px;
.sub-text-mixins();
}
}
.cr-button {
margin-top: 30px;
height: @button-large-height;
line-height: @button-large-line-height;
font-size: @font-size-16;
box-shadow: 1px 12px 14px 0px rgba(255, 200, 66, 0.4);
}
&-people {
.sub-text-mixins();
margin-top: 18px;
em {
color: @black;
font-style: normal;
margin: 0 3px;
}
}
}
}
</style>
src/views/Goods/modules/GoInsureDialog.vue 0 → 100644
View file @ fa1ab9ec
<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 @ fa1ab9ec
<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 @ fa1ab9ec
@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 @ fa1ab9ec
<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 @ fa1ab9ec
@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 @ fa1ab9ec
<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 @ fa1ab9ec
@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 @ fa1ab9ec
<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