Skip to content

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

Merge branch 'feature/consultant' into 'master' 

Feature/consultant

See merge request !27
parents f30ce811 7e9b2993
Show whitespace changes
Inline Side-by-side
Showing with 2881 additions and 552 deletions
src/api/detail.huagui.shouxian.js
View file @ 972c1cc1
...@@ -4,7 +4,7 @@ ...@@ -4,7 +4,7 @@
* @Description: 华贵大麦2020定期寿险 * @Description: 华贵大麦2020定期寿险
* @Date: 2020-07-27 15:46:37 * @Date: 2020-07-27 15:46:37
* @LastEditors: gzw * @LastEditors: gzw
* @LastEditTime: 2020-07-29 18:55:06 * @LastEditTime: 2020-08-03 15:30:14
*/ */
import goodsBg from "@/assets/images/goods/detail/shouxian/bg.png"; import goodsBg from "@/assets/images/goods/detail/shouxian/bg.png";
...@@ -13,6 +13,7 @@ import intro02 from "@/assets/images/goods/detail/shouxian/intro-02.png"; ...@@ -13,6 +13,7 @@ import intro02 from "@/assets/images/goods/detail/shouxian/intro-02.png";
import intro03 from "@/assets/images/goods/detail/shouxian/intro-03.png"; import intro03 from "@/assets/images/goods/detail/shouxian/intro-03.png";
export default { export default {
type: "li",
headerInfo: { headerInfo: {
bgSrc: goodsBg, bgSrc: goodsBg,
type: "huagui", type: "huagui",
...@@ -109,24 +110,20 @@ export default { ...@@ -109,24 +110,20 @@ export default {
} }
], ],
caseInfo: { caseInfo: {
name: "吴先生", name: "张先生",
info: "46岁 北京 有社保", info: "33岁 北京",
list: [ list: [
{ {
title: "投保", title: "投保",
event: "2018年6月29日，吴先生为自己投保了一份万家保·重疾轻症险，保额20万，并续保。" event: "张先生全家生活在北京，有一个可爱的女儿，考虑到家里的房贷、孩子教育，张先生为自己购买了华贵大麦2020定期寿险，保额100万，保障至70周岁，缴费期限20年。"
}, },
{ {
title: "投保", title: "报案",
event: "2019年9月16日，吴先生意外烫伤双下肢皮肤，达到浅Ⅲ°烧伤，烧伤面积达20" event: "投保后第5年，张先生不幸身故，家人向保险公司报案。"
},
{
title: "轻症理赔",
event: "2019年9月17日，吴先生后向我司报案，经核实符合该保险中轻症“特定面积Ⅲ度烧伤”的诊断赔付标准，给予4万保险金赔付。"
}, },
{ {
title: "重疾理赔", title: "理赔",
event: "2020年1月3日，吴先生突发胸痛咯血，后诊断为右肺非小细胞性肺癌，经我司核实后确认为保险责任，一次性给予20万元的重大疾病保险金。" event: "张先生在投保时指定了受益人为张先生的太太和女儿，张太太及其女儿一次性获得100万赔偿金。"
} }
] ]
}, },
...@@ -158,88 +155,20 @@ export default { ...@@ -158,88 +155,20 @@ export default {
], ],
processDetail: [ processDetail: [
{ {
title: "电话报案", title: "报案",
desc: "拨打XX健康电话XXXXXXXXXXX 进行报案。" desc: "通过华贵保险的官方网站、微信公众号，或拨打客服电话400-6841-888进行报案。"
},
{
title: "准备资料",
desc: `准备化验资料等住院资料`
}, },
{ {
title: "提交资料", title: "提交资料",
desc: `热线客服将向您了解出现情况，介绍所需的申请材料并引导后续理赔流程。您需要安保险公司要求，邮寄相应理赔申请资料原件和身份证、银行储蓄卡复印件等资料。` desc: `根据理赔专员的指导，准备理赔材料，并邮寄至指定地点进行审，或由保险公司指派人员上门收取。`
}, },
{ {
title: "完成理赔", title: "审核",
desc: `我们收到齐全的资料后，简易案件将在10个工作日结案，复杂案件将在30日内结案` desc: `保险公司收到材料后，对案件进行立案和审批。`
}
],
rateInfo: [
{
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: "一次交清", 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"], desc: `保险公司结案后，转账付款完成理赔。`
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]
]
]
}
],
planInfo: [
{
title: "100种重大疾病保险金",
desc:
"<p>重大疾病包括恶性肿瘤、急性心肌梗塞、终末期肾病（或称慢性肾功能衰竭尿毒症期）等100种。在等待期（90天，意外伤害事故无等待期）后初次发生并经医院专科医生确诊罹患本合同约定的一种或多种重大疾病，保险人按照保险单中约定的重大疾病保险金额给付重大疾病保险金，同时在本保险合同项下对该被保险人的保险责任终止。</p>",
url: "查看100种重大疾病",
path: "http://mangguo-contract.qthbx.com/hua-tai-100chong-zhong-ji-v1/",
list: ""
},
{
title: "40种轻症疾病保险金",
desc:
"<p>轻症疾病包括冠状动脉介入手术、非危及生命的（极早期的）恶性病变、轻度中风后遗症等40种。在等待期（90天，意外伤害事故无等待期）后初次发生并经医院专科医生确诊罹患本合同约定的一种或多种轻症。保险人按照保险合同中约定的轻症保险金额给付轻症保险金，同时轻症责任终止。轻症保险金仅针对本保险合同约定的轻症进行给付，轻症疾病必须在生前诊断，对于任何身故后的尸检诊断不给付轻症疾病保险金。对于已经符合重大疾病保险金给付条件的，仅给付重大疾病保险金，不再给付轻症保险金。</p>",
url: "查看40种轻症疾病",
path: "http://mangguo-contract.qthbx.com/hua-tai-100chong-qing-zheng-v1/",
list:""
},
{
title: "保额说明",
desc: `
<p><strong>重疾30万保额：</strong></p>
<p>30天~50周岁可投保，可逐年续保至99周岁。</p>
<p><strong>重疾20万保额：</strong></p>
<p>30天~60周岁可投保，可逐年续保至99周岁。</p>
<p><strong>重疾10万保额：</strong></p>
<p>
30天~60周岁可投保，可逐年续保至99周岁。</p>
`
} }
] ]
}; };
src/api/detail.huatai.zhongjixian.js
View file @ 972c1cc1
...@@ -14,6 +14,7 @@ import intro03 from "@/assets/images/goods/detail/zhongjixian/intro-03.png"; ...@@ -14,6 +14,7 @@ import intro03 from "@/assets/images/goods/detail/zhongjixian/intro-03.png";
import intro04 from "@/assets/images/goods/detail/zhongjixian/intro-04.png"; import intro04 from "@/assets/images/goods/detail/zhongjixian/intro-04.png";
export default { export default {
type: "cii",
headerInfo: { headerInfo: {
bgSrc: goodsBg, bgSrc: goodsBg,
type: "huatai", type: "huatai",
......
src/api/detail.taikang.yiliaobaozhang.js
View file @ 972c1cc1
...@@ -4,7 +4,7 @@ ...@@ -4,7 +4,7 @@
* @Description: 泰康600万医疗保障 * @Description: 泰康600万医疗保障
* @Date: 2020-07-27 15:46:37 * @Date: 2020-07-27 15:46:37
* @LastEditors: gzw * @LastEditors: gzw
* @LastEditTime: 2020-07-28 14:57:18 * @LastEditTime: 2020-08-03 15:11:55
*/ */
import goodsBg from "@/assets/images/goods/detail/yiliaoxian/bg.png"; import goodsBg from "@/assets/images/goods/detail/yiliaoxian/bg.png";
...@@ -14,19 +14,20 @@ import intro03 from "@/assets/images/goods/detail/zhongjixian/intro-03.png"; ...@@ -14,19 +14,20 @@ import intro03 from "@/assets/images/goods/detail/zhongjixian/intro-03.png";
import intro04 from "@/assets/images/goods/detail/zhongjixian/intro-04.png"; import intro04 from "@/assets/images/goods/detail/zhongjixian/intro-04.png";
export default { export default {
type: "mi",
headerInfo: { headerInfo: {
bgSrc: goodsBg, bgSrc: goodsBg,
type: "taikang", type: "taikang",
company: "泰康在线", company: "泰康在线",
title: "600万医疗保障", title: "1000万医疗保障",
sub: "优势介绍|优势介绍|优势介绍|优势介绍", sub: "责任内100%报销住院医疗费",
price: "首月<strong>1</strong>元<small>次月5.6元/月起</small>", price: "首月<strong>1</strong>元<small>次月3.6元/月起</small>",
insuredNum: 0, insuredNum: 0,
stamp: true stamp: true
}, },
introImg: [intro01, intro02, intro03, intro04], introImg: [intro01, intro02, intro03, intro04],
companyInfo: [ companyInfo: [
{ content: "承保公司：华泰财产保险有限公司", offset: false }, { content: "承保公司：泰康财产保险有限公司", offset: false },
{ content: "经营范围：短期健康保险和意外伤害保险", offset: false }, { content: "经营范围：短期健康保险和意外伤害保险", offset: false },
{ content: "备案名称：华泰财险重大疾病保险条款", offset: false }, { content: "备案名称：华泰财险重大疾病保险条款", offset: false },
{ content: "备案编号：C00015431912018061501152；", offset: false } { content: "备案编号：C00015431912018061501152；", offset: false }
...@@ -49,14 +50,20 @@ export default { ...@@ -49,14 +50,20 @@ export default {
} }
], ],
planCellInfo: [ planCellInfo: [
{ title: "100种重大疾病医疗保险金（0免赔额）", value: "600万" }, { title: "以下4项保险金，汇总后的年度累计赔付限额600万元", value: "", inline: true },
{ title: "一般医疗保险金（1万免赔额）", value: "300万" }, { title: "重大疾病医疗保险金", value: "600万" },
{ title: "质子重离子医疗保险金（60%赔付）", value: "600万" }, { title: "一般医疗保险金", value: "300万" },
{ title: "意外身故", value: "1万" }, { title: "质子重离子医疗保险金", value: "600万" },
{ title: "意外伤残", value: "1万" }, { title: "恶性肿瘤院外特定药品费用保险金", value: "600万" },
{ title: "意外住院津贴", value: "100元/天" } { title: "", value: "", divider: true },
], { title: "发生以下治疗费用，获额外400万年度累计限额的赔付", value: "", inline: true },
planTipOptions: ["垫付医药费", "责任内100%报销", "不限社保"], { title: "恶性肿瘤特定治疗保险金/康复医疗保险金", value: "400万" },
{ title: "", value: "", divider: true },
{ title: "发生以下指定费用，赔付不超过对应限额", value: "", inline: true },
{ title: "指定检查费用保险金", value: "5000元" },
{ title: "特定疾病保险金", value: "5000元" }
],
planTipOptions: ["不限社保", "报销自费药", "额外400万特定赔付"],
insuredOptions: [ insuredOptions: [
{ label: "本人", value: "1" }, { label: "本人", value: "1" },
{ label: "配偶", value: "2" }, { label: "配偶", value: "2" },
...@@ -76,18 +83,18 @@ export default { ...@@ -76,18 +83,18 @@ export default {
sub: "次月5.6元/月起" sub: "次月5.6元/月起"
}, },
goodBuyModalInfo: [ goodBuyModalInfo: [
{ title: "首月保费", value: `3元` }, { title: "首月保费", value: `1元` },
{ title: "次月保费", value: "5.6元/月起（共11期）" } { title: "次月保费", value: "3.6元/月起（共11期）" }
], ],
noticeCellInfo: [ noticeCellInfo: [
{ title: "投保年龄", value: `30~50周岁` }, { title: "投保年龄", value: `30~65周岁` },
{ title: "保障期限", value: "1年（可续保至99周岁）" }, { title: "保障期限", value: "1年（可续保至99周岁）" },
{ title: "等待期", value: "90天" }, { title: "等待期", value: "30天" },
{ {
title: "保费", title: "保费",
value: { value: {
needSlot: true, needSlot: true,
tpl: "保费与保额、被保人年龄有关<br />首月3元，次月5.6元/月起", tpl: "保费于被保人年龄、有无社保有关<br />首月1元，次月3.6元/月起",
longTxt: true longTxt: true
} }
} }
......
src/api/detail.zhongan.yiliaobaozhang.js deleted 100644 → 0
View file @ f30ce811
/* eslint-disable */
/*
* //TODO 后期可以做成json文件，以减小包体积
* @Description:众安50万意外险
* @Date: 2020-07-27 15:46:37
* @LastEditors: gzw
* @LastEditTime: 2020-07-27 20:32:46
*/
import goodsBg from "@/assets/images/goods/detail/yiwaixian/bg.png";
import intro01 from "@/assets/images/goods/detail/zhongjixian/intro-01.png";
import intro02 from "@/assets/images/goods/detail/zhongjixian/intro-02.png";
import intro03 from "@/assets/images/goods/detail/zhongjixian/intro-03.png";
import intro04 from "@/assets/images/goods/detail/zhongjixian/intro-04.png";
export default {
headerInfo: {
bgSrc: goodsBg,
type: "zhongan",
company: "众安保险",
title: "50万意外保障",
sub: "优势介绍|优势介绍|优势介绍|优势介绍",
price: "<strong>350</strong>元/年",
insuredNum: 0,
stamp: true
},
introImg: [intro01, intro02, intro03, intro04],
companyInfo: [
{ content: "承保公司：华泰财产保险有限公司", offset: false },
{ content: "经营范围：短期健康保险和意外伤害保险", offset: false },
{ content: "备案名称：华泰财险重大疾病保险条款", offset: false },
{ content: "华泰财险附加重大疾病轻症综合保险条款；", offset: true },
{ content: "华泰财险附加保险费分期支付条款", offset: true },
{ content: "备案编号：C00015431912018061501152；", offset: false },
{ content: "C00015432622017111500872；", offset: true },
{ content: "C00015431922018061503991", offset: true }
],
navBarOptions: [
{ label: "我要投保", value: "insure" },
{ label: "产品特色", value: "intro" },
{ label: "理赔说明", value: "process" }
],
autoCellInfo: [
{ title: "【省心】自动续保，不用担心续保不及时导致保障中断", value: "" },
{ title: "【放心】开通自动续保后，可随时取消", value: "" },
{ title: "【安心】自动续保按费率可自动扣费", value: "" },
{
title: {
needSlot: true,
tpl: " 阅读并同意<a href='javascript:;'>《自动续保服务协议》</a>"
},
value: ""
}
],
planCellInfo: {
"5": [
{ title: "意外身故", value: "50万" },
{ title: "意外伤残", value: "50万" },
{ title: "猝死", value: "10万" },
{ title: "意外医疗", value: "5万" },
{ title: "意外骨折", value: "1万" },
{ title: "意外住院津贴", value: "200元/天" },
{ title: "意外伤害救火车费用", value: "500元" },
{ title: "", value: "", divider: true },
{ title: "以下原因导致的身故或伤残，获额外保额赔付", value: "", inline: true },
{ title: "乘坐客运民航飞机", value: " 300万" },
{ title: "乘坐客运机动车（含出租车、网约车）", value: "50万" },
{ title: "乘坐他人驾驶非营运机动车（含私家车）", value: "50万" },
{ title: "乘坐客运轮船", value: "80万" },
{ title: "乘坐客运轨道交通车辆", value: "80万" },
{ title: "公共场所个人责任", value: "10万" },
{ title: "新冠肺炎", value: "20万" }
],
"2": [
{ title: "100种重大疾病医疗保险金", value: "20万" },
{ title: "40种轻症保险金", value: "4万" },
{ title: "投保年龄", value: "30天~60周岁" },
{ title: "保险期限", value: "1年" }
]
},
planTipOptions: ["垫付医药费", "责任内100%报销", "不限社保"],
planOptions: [
{ label: "50万", value: "5" },
{ label: "20万", value: "2" }
],
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" }
],
goodActionInfo: {
title: ["350", "元/年", ""]
},
goodBuyModalInfo: [
{ title: "首月保费", value: `3元` },
{ title: "次月保费", value: "5.6元/月起（共11期）" }
],
noticeCellInfo: {
"5": [
{ title: "投保年龄", value: `30~50周岁` },
{ title: "保障期限", value: "1年（可续保至99周岁）" },
{ title: "等待期", value: "90天" },
{
title: "保费",
value: {
needSlot: true,
tpl: "保费与保额、被保人年龄有关<br />首月3元，次月5.6元/月起",
longTxt: true
}
}
],
"2": [
{ title: "投保年龄", value: `30~60周岁` },
{ title: "保障期限", value: "1年（可续保至99周岁）" },
{ title: "等待期", value: "90天" },
{
title: "保费",
value: {
needSlot: true,
tpl: "保费与保额、被保人年龄有关<br />首月3元，次月5.6元/月起",
longTxt: true
}
}
]
},
popupArray: [
{
title: "保险条款",
url: "http://mangguo-contract.qthbx.com/huatai-bao-xian-tiao-kuan-v1/"
},
{
title: "健康告知",
url: "http://mangguo-contract.qthbx.com/huatai-jian-kang-gao-zhi-v1/"
},
{
title: "投保须知及声明",
url: "http://mangguo-contract.qthbx.com/huatai-toubaoxuzhi-v1/"
},
{
title: "平台服务协议",
url: "http://mangguo-contract.qthbx.com/fu-wu-xie-yi-v1/"
},
{ title: "保险计划" },
{ title: "理赔信息" },
{ title: "完整费率" },
{
title: "自动续保服务协议",
url: "http://mangguo-contract.qthbx.com/zi-dong-xu-bao-fu-wu-xie-yi-v1/"
}
],
caseInfo: {
name: "吴先生",
info: "46岁 北京 有社保",
list: [
{
title: "投保",
event: "2018年6月29日，吴先生为自己投保了一份万家保·重疾轻症险，保额20万，并续保。"
},
{
title: "投保",
event: "2019年9月16日，吴先生意外烫伤双下肢皮肤，达到浅Ⅲ°烧伤，烧伤面积达20"
},
{
title: "轻症理赔",
event: "2019年9月17日，吴先生后向我司报案，经核实符合该保险中轻症“特定面积Ⅲ度烧伤”的诊断赔付标准，给予4万保险金赔付。"
},
{
title: "重疾理赔",
event: "2020年1月3日，吴先生突发胸痛咯血，后诊断为右肺非小细胞性肺癌，经我司核实后确认为保险责任，一次性给予20万元的重大疾病保险金。"
}
]
},
qaInfo: [
{
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/。填写登录信息时，类别选择“家庭财产、意外伤害保险”，保单号在投保成功的短信中，密码填写被保险人身份证号，即可登录查询保单承保信息。"
}
],
processDetail: [
{
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、若被保险人身故的，则转账支付给指定受益人或法定受益人。`
}
],
rateInfo: [
{
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]
]
]
}
],
planInfo: [
{
title: "100种重大疾病保险金",
desc:
"<p>重大疾病包括恶性肿瘤、急性心肌梗塞、终末期肾病（或称慢性肾功能衰竭尿毒症期）等100种。在等待期（90天，意外伤害事故无等待期）后初次发生并经医院专科医生确诊罹患本合同约定的一种或多种重大疾病，保险人按照保险单中约定的重大疾病保险金额给付重大疾病保险金，同时在本保险合同项下对该被保险人的保险责任终止。</p>",
url: "查看100种重大疾病",
path: "http://mangguo-contract.qthbx.com/hua-tai-100chong-zhong-ji-v1/",
list: ""
},
{
title: "40种轻症疾病保险金",
desc:
"<p>轻症疾病包括冠状动脉介入手术、非危及生命的（极早期的）恶性病变、轻度中风后遗症等40种。在等待期（90天，意外伤害事故无等待期）后初次发生并经医院专科医生确诊罹患本合同约定的一种或多种轻症。保险人按照保险合同中约定的轻症保险金额给付轻症保险金，同时轻症责任终止。轻症保险金仅针对本保险合同约定的轻症进行给付，轻症疾病必须在生前诊断，对于任何身故后的尸检诊断不给付轻症疾病保险金。对于已经符合重大疾病保险金给付条件的，仅给付重大疾病保险金，不再给付轻症保险金。</p>",
url: "查看40种轻症疾病",
path: "http://mangguo-contract.qthbx.com/hua-tai-100chong-qing-zheng-v1/",
list: ""
},
{
title: "保额说明",
desc: `
<p><strong>重疾30万保额：</strong></p>
<p>30天~50周岁可投保，可逐年续保至99周岁。</p>
<p><strong>重疾20万保额：</strong></p>
<p>30天~60周岁可投保，可逐年续保至99周岁。</p>
<p><strong>重疾10万保额：</strong></p>
<p>
30天~60周岁可投保，可逐年续保至99周岁。</p>
`
}
]
};
src/api/detail.zhongan.yiwai.js 0 → 100644
View file @ 972c1cc1
/* eslint-disable */
/*
* //TODO 后期可以做成json文件，以减小包体积
* @Description:众安50万意外险
* @Date: 2020-07-27 15:46:37
* @LastEditors: gzw
* @LastEditTime: 2020-08-03 14:33:37
*/
import goodsBg from "@/assets/images/goods/detail/yiwaixian/bg.png";
import intro01 from "@/assets/images/goods/detail/yiwaixian/intro-01.png";
import intro02 from "@/assets/images/goods/detail/yiwaixian/intro-02.png";
import intro03 from "@/assets/images/goods/detail/yiwaixian/intro-03.png";
import intro04 from "@/assets/images/goods/detail/yiwaixian/intro-04.png";
export default {
type: "ai",
headerInfo: {
bgSrc: goodsBg,
type: "zhongan",
company: "众安保险",
title: "100万意外保障",
sub: "最高可赔400万 包含猝死责任",
price: "<strong>53</strong>元/年起",
insuredNum: 0,
stamp: true
},
introImg: [intro01, intro02, intro03, intro04],
companyInfo: [
{ content: "承保公司：众安在线财产保险股份有限公司", offset: false },
{ content: "备案名称：众安在线财产保险股份有限公司个人意外伤害保险条款(2019 版) ", offset: false },
{ content: "众安在线财产保险股份有限公司附加急性疾病猝死保险条款", offset: true },
{ content: "众安在线财产保险股份有限公司附加意外伤害医疗费用保险条款（C款）", offset: true },
{ content: "众安在线财产保险股份有限公司营运交通工具乘客意外伤害保险条款(2018版)", offset: true },
{ content: "备案名称：(众安在线)(备-普通意外保险)【2019】(主)018号", offset: false },
{ content: " (众安在线)(备-疾病保险)【2017】(附)006号", offset: true },
{ content: " (众安在线)(备-普通意外保险)【2016】(附)037号", offset: true },
{ content: " (众安在线)(备-普通意外保险)【2019】(主)010号", offset: true }
],
navBarOptions: [
{ label: "我要投保", value: "insure" },
{ label: "产品特色", value: "intro" },
{ label: "理赔说明", value: "process" }
],
autoCellInfo: [
{ title: "【省心】自动续保，不用担心续保不及时导致保障中断", value: "" },
{ title: "【放心】开通自动续保后，可随时取消", value: "" },
{ title: "【安心】自动续保按费率可自动扣费", value: "" },
{
title: {
needSlot: true,
tpl: " 阅读并同意<a href='javascript:;'>《自动续保服务协议》</a>"
},
value: ""
}
],
planCellInfo: {
"10": [
{ title: "意外身故", value: "100万" },
{ title: "意外伤残", value: "100万" },
{ title: "意外医疗", value: "10万" },
{ title: "猝死", value: "20万" },
{ title: "", value: "", divider: true },
{ title: "以下原因导致的身故或伤残，获额外保额赔付", value: "", inline: true },
{ title: "航空意外", value: "300万" },
{ title: "营运汽车意外", value: "100万" },
{ title: "火车意外", value: "100万" },
{ title: "轮船意外", value: "100万" }
],
"5": [
{ title: "意外身故", value: "50万" },
{ title: "意外伤残", value: "50万" },
{ title: "意外医疗", value: "5万" },
{ title: "猝死", value: "10万" },
{ title: "", value: "", divider: true },
{ title: "以下原因导致的身故或伤残，获额外保额赔付", value: "", inline: true },
{ title: "航空意外", value: "200万" },
{ title: "营运汽车意外", value: "50万" },
{ title: "火车意外", value: "50万" },
{ title: "轮船意外", value: "50万" }
],
"1": [
{ title: "意外身故", value: "10万" },
{ title: "意外伤残", value: "10万" },
{ title: "意外医疗", value: "5000" },
{ title: "猝死", value: "2万" },
{ title: "", value: "", divider: true },
{ title: "以下原因导致的身故或伤残，获额外保额赔付", value: "", inline: true },
{ title: "航空意外", value: "100万" },
{ title: "营运汽车意外", value: "10万" },
{ title: "火车意外", value: "10万" },
{ title: "轮船意外", value: "10万" }
]
},
planTipOptions: ["10天内全额退保", "在线理赔", "最高可赔400万"],
planOptions: [
{ label: "100万", value: "10" },
{ label: "50万", value: "5" },
{ 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" }
],
goodActionInfo: {
title: ["53", "元/年", ""]
},
goodBuyModalInfo: [
{ title: "每年保费", value: `350元` }
],
noticeCellInfo: {
"10": [
{ title: "投保年龄", value: `18周岁~65周岁` },
{ title: "保障期限", value: "1年" },
{ title: "保费", value: "53元/年起" }
],
"5": [
{ title: "投保年龄", value: `18周岁~65周岁` },
{ title: "保障期限", value: "1年" },
{ title: "保费", value: "53元/年起" }
],
"1": [
{ title: "投保年龄", value: `18周岁~65周岁` },
{ title: "保障期限", value: "1年" },
{ title: "保费", value: "53元/年起" }
],
},
protocolData: [
{ title: "保险条款", id: 0 },
{ title: "投保须知与声明", id: 2 },
{ title: "服务协议", id: 3 }
],
popupArray: [
{
title: "保险条款",
url: "http://mangguo-contract.qthbx.com/huatai-bao-xian-tiao-kuan-v1/"
},
{
title: "健康告知",
url: "http://mangguo-contract.qthbx.com/huatai-jian-kang-gao-zhi-v1/"
},
{
title: "投保须知及声明",
url: "http://mangguo-contract.qthbx.com/huatai-toubaoxuzhi-v1/"
},
{
title: "平台服务协议",
url: "http://mangguo-contract.qthbx.com/fu-wu-xie-yi-v1/"
},
{ title: "保险计划" },
{ title: "理赔信息" },
{ title: "完整费率" },
{
title: "自动续保服务协议",
url: "http://mangguo-contract.qthbx.com/zi-dong-xu-bao-fu-wu-xie-yi-v1/"
}
],
caseInfo: {
name: "刘先生",
info: "35岁 上海",
list: [
{
title: "投保",
event: "2020年7月，刘先生在芒果保险上购买了一份万家保·综合意外险50万版。"
},
{
title: "出险",
event: "2020年8月，刘先生出差乘坐网约车去机场的路上，在高速上与大货车发生追尾事故。经诊断，刘先生肋骨多处骨折，身体多处挫伤。"
},
{
title: "报案",
event: "2020年8月14日，刘先生出院后向保险公司发起报案，并于8月30日提交完整理赔材料至保险公司。"
},
{
title: "理赔",
event: `
<p>本次事故花费医疗费4.4万元，其中医保报销1.6万，社保外费用0.8万，意外医疗可赔付 医保内100%报销：</p>
<p>医保内100%报销：</p>
<p>(44000-16000-8000-200)*100% </p>
<p>医保外80%报销：(8000-200)*80%</p>
<p style="font-weight: bold;color: #333;margin-bottom: 15px;">意外医疗赔付合计：26040元</p>
<p>另外刘先生乘网约车发生意外导致4根肋骨骨折，构成10级伤残，意外伤残可赔付</p>
<p>10级伤残：50万*10%=5万</p>
<p>乘坐营运交通工具：额外赔付5万</p>
<p style="font-weight: bold;color: #333;margin-bottom: 15px;">意外伤残赔付合计：10万元</p>
<p style="font-weight: bold;color: #333;">刘先生累计获得赔付总额：126040元</p>
`
}
]
},
qaInfo: [
{
q: "万家保·综合意外险产品投保的职业要求？",
a: `<p>本保险可承保被保险人从事1-3类职业，暂不接受4类及以上职业投保本产品。职业分类以众安职业分类表为准（须告知职业分类表的展示位置）。</p>
<p>温馨提醒：因职业类别问题误投或错投本产品的，保险公司不承接赔付责任，并全额退保本产品。</p>`
},
{
q: "万家保·综合意外险产品的生效时间是？",
a: "投保成功并缴纳保费后的第7日零时。"
},
{
q: "万家保·综合意外险产品有犹豫期吗？",
a: "犹豫期10天。在保单生效前及生效后10天内申请退保，并提供完整资料，则可获得全额保费退还。"
},
{
q: "万家保·综合意外险产品受益人是谁?",
a: "本保险全同的身故受益人为法定，其他保险责任的受益人为被保险人本人。"
},
{
q: "万家保·综合意外险产品缴费方式有哪些？",
a: "一次性付清，您可通过微信支付、****（明确可支持的支付方式）进行支付。"
},
{
q: "万家保·综合意外险产品投保人和被保险人有年龄要求吗？",
a: `<p>投保人为年满18周岁有完全民事行为能力，且对被保险人具可保利益的自然人；</p>
<p>被保险人为18-65周岁具有完全民事行为能力，生活自理能力身体健康的自然人。投被保险人关系：本人、子女、配偶、父母均可以。</p>`
},
{
q: "万家保·综合意外险产品的保障范围是什么？",
a: `被保险人在保障期间的意外伤害身故、残疾，意外医疗费用，乘坐营运交通工具（飞机、火车、轮船、营运汽车）期间发生的意外身故、残疾，猝死。`
},
{
q: "万家保·综合意外险产品的保障额度有多少？",
a: `保额可选择三档，主险意外伤害保险金分为：10万版/50万版/100万版。`
},
{
q: "万家保·综合意外险产品的保障期间是多久？",
a: `保障期间为1年。`
},
{
q: "万家保·综合意外险产品如何退保？",
a: `如需退保，可在支付宝搜索“众安保险服务”，关注“众安保险服务”小程序，自助申请退保。如需办理其他批改，请拨打客服电话1010-9955，根据客服指引，提交材料办理。`
},
{
q: "万家保·综合意外险产品的免赔额是多少？",
a: `本保险意外伤害医疗费用责任是指国家卫生部医院等级分类中的二级及二级以上公立医院实际发生的必需且合理的医疗费用，社保内费用每次扣除免赔200元后按100%赔付，社保外费用每次扣除免赔200元后按80%赔付，北京市平谷区、密云县和怀柔区的任何医疗机构、四川省宜宾市的所有医疗机构、四川省雅安市雨城区人民医院、四川省雅安市第二人民医院与山东省栖霞市的所有医疗机构除外。`
},
{
q: "如何获得万家保·综合意外险产品的保单和发票？",
a: `可登陆众安保险官网（www.zhongan.com）申请电子保单和电子发票，电子发票效力同纸质发票。`
},
{
q: "理赔需要哪些材料？",
a: `
<p>一、身故理赔需提供：</p>
<p>1.理赔申请书（身故、伤残）；</p>
<p>2.保险金受益人确认表</p>
<p>3.保险金领款授权书及受托人声明</p>
<p>4.所有受益人身份证明；</p>
<p>5.户籍注销证明；</p>
<p>6.医学死亡证明（推断）书</p>
<p>7.火化/土葬证明；</p>
<p>8.意外事故证明（例：交通事故认定书）；</p>
<p>9.受托人银行卡。</p>
<p>二、残疾理赔需提供：</p>
<p>1.理赔申请书（身故、伤残）；</p>
<p>2.被保险人身份证明；</p>
<p>3.门诊住院病历；</p>
<p>4.诊断证明书；</p>
<p>5.影像检查报告；</p>
<p>6.伤残鉴定报告；</p>
<p>7.意外事故证明（例：交通事故认定书）；</p>
<p>8.被保险人银行卡。</p>
<p>三、医疗理赔需提供：</p>
<p>1.理赔申请书（医疗、津贴）；</p>
<p>2.被保险人身份证明；</p>
<p>3.门诊住院病历；</p>
<p>4.诊断证明书；</p>
<p>5.影像检查报告；</p>
<p>6.发票原件/医保结算单原件；（救护车费用需提供发票）</p>
<p>7.费用清单（门诊）/住院费用清单（住院）；</p>
<p>8.意外事故证明（例：交通事故认定书）；</p>
<p>9.被保险人银行卡。</p>
`
}
],
processDetail: [
{
title: "报案",
desc: "发生事故后24小时内拨打众安保险客服热线10109955电话报案，客服人员将告知理赔所需材料及相关事宜。"
},
{
title: "申请",
desc: `根据客服指引准备理赔资料，理赔材料齐全后快递至众安保险。`
},
{
title: "审核",
desc: `收到材料后，众安保险将进行及时审核和调查。`
},
{
title: "结案",
desc: `根据审核结果进行理赔并将理赔款支付至被保险人或受益人的指定账户。`
}
],
rateInfo: [
{
title: "一次交清",
list: [
["18-45周岁", "564元", "264元", "53元"],
["18-45周岁", "818元", "390元", "77元"],
["18-45周岁", "1185元", "551元", "111元"]
]
}
],
planInfo: [
{
title: "意外身故",
desc:
"在保险期间内被保险人遭受意外伤害，并自该意外伤害发生之日起180日（含第180日）内因该意外伤害身故的，保险人按本合同载明的意外身故保险金额承担向意外身故保险金受益人给付意外身故保险金的责任，本合同终止。"
},
{
title: "意外残疾",
desc:
"在保险期间内被保险人因遭受意外伤害，并自该意外伤害发生之日起180日（含第180日）内因该意外伤害造成被保险人伤残并达到本合同附件《人身保险伤残评定标准及代码》（标准编号为JR/T 0083-2013）所列伤残程度之一的，保险人按《人身保险伤残评定标准及代码》（标准编号为JR/T 0083-2013）所对应伤残等级的给付比例乘以约定的意外伤残保险金额。"
},
{
title: "猝死",
desc: `被保险人在本附加合同的保险期限内突然发生急性疾病，且在疾病发生后24小时内死亡，则保险人按本附加合同约定的保险金额给付猝死保险金，本附加合同终止。`
},
{
title: "意外医疗",
desc:
"在本附加险合同的保险期间内，被保险人遭受主合同责任范围内的意外伤害，并在中华人民共和国境内（不包括香港、澳门及台湾地区）的医院或保险人认可的医疗机构进行治疗所支出的合理且必要的医疗费用的，保险人按照下列约定进行赔偿。"
},
{
title: "营运交通工具乘客意外",
desc:
"在保险期限内，被保险人以乘客身份乘坐从事客运的营运交通工具（飞机、火车、轮船、营运汽车）期间遭受意外伤害，自该意外伤害发生之日起180日内因该意外伤害身故或伤残并达到本合同所附《人身保险伤残评定标准》所列伤残程度之一的，保险人按本保险合同载明的意外身故保险金额，或按《评定标准》所对应伤残等级的给付比例乘以约定的意外伤残保险金额进行给付。"
}
]
};
src/api/policy.rec.js 0 → 100644
View file @ 972c1cc1
/*
* @Description: 保单详情推荐位数据
* @Date: 2020-08-03 16:02:15
* @LastEditors: gzw
* @LastEditTime: 2020-08-03 16:09:54
*/
import rec01 from "@/assets/images/policy/rec/rec-01.png";
import rec02 from "@/assets/images/policy/rec/rec-02.png";
import rec03 from "@/assets/images/policy/rec/rec-03.png";
export default {
title: "重疾险",
type: "cii",
sub: "30万重疾保障+9万轻症保障",
rec: [
{ img: rec01, title: ["100种重大疾病", "确诊即赔"] },
{ img: rec02, title: ["20种轻症疾病", "确诊即赔"] },
{ img: rec03, title: ["价格美丽"] }
],
company: "华泰财险",
goodActionInfo: {
title: ["3", "元", "首月"],
sub: "次月5.6元/月起"
},
notice: [
"需要的。社保是基础保障，优势是覆盖范围广，劣势是抵御风险能力有限，社保报销外的自付部分，可以用商业保险来保障。比如【百万医疗险】的作用是补充社保，报销因大病造成的高额医疗负担；",
"需要的。社保是基础保障，优势是覆盖范围广，劣势是抵御风险能力有限，社保报销外的自付部分，可以用商业保险来保障。比如【百万医疗险】的作用是补充社保，报销因大病造成的高额医疗负担；",
"需要的。社保是基础保障，优势是覆盖范围广，劣势是抵御风险能力有限，社保报销外的自付部分，可以用商业保险来保障。比如【百万医疗险】的作用是补充社保，报销因大病造成的高额医疗负担；"
],
popupArray: [
{
title: "保险条款",
url: "http://mangguo-contract.qthbx.com/huatai-bao-xian-tiao-kuan-v1/"
},
{
title: "健康告知",
url: "http://mangguo-contract.qthbx.com/huatai-jian-kang-gao-zhi-v1/"
},
{
title: "投保须知及声明",
url: "http://mangguo-contract.qthbx.com/huatai-toubaoxuzhi-v1/"
},
{
title: "平台服务协议",
url: "http://mangguo-contract.qthbx.com/fu-wu-xie-yi-v1/"
}
]
};
src/assets/icons/svg/arrow-right.svg 0 → 100644
View file @ 972c1cc1
<?xml version="1.0" encoding="utf-8"?>
<svg width="13px" height="21px" viewBox="0 0 13 21" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg">
<desc>Created with Lunacy</desc>
<g id="Group-6" transform="translate(1.5 1.5)">
<path d="M0 0L10 9L0 18" id="Path-3" fill="none" stroke="#FFFFFF" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" />
</g>
</svg>
\ No newline at end of file
src/assets/icons/svg/flag-black.svg 0 → 100644
View file @ 972c1cc1
<?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</title>
<desc>Created with Sketch.</desc>
<g id="顾问" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="聘请成功" transform="translate(-286.000000, -292.000000)">
<g id="Group-4" transform="translate(16.000000, 165.000000)">
<g id="Group" transform="translate(31.000000, 127.000000)">
<g id="编组-2备份" transform="translate(239.000000, 0.000000)">
<rect id="矩形" opacity="0.174107143" x="0" y="0" width="28" height="28"></rect>
<g id="编组" transform="translate(5.000000, 3.000000)" stroke-width="1.5">
<path d="M4,0.75 C2.20507456,0.75 0.75,2.20507456 0.75,4 L0.75,18.0840321 C0.75,18.7778162 0.972016476,19.4533941 1.38356853,20.011929 C2.44831657,21.4569442 4.48288167,21.7652116 5.92789687,20.7004636 L9.5,18.0683876 L13.0721031,20.7004636 C13.6306381,21.1120156 14.3062159,21.3340321 15,21.3340321 C16.7949254,21.3340321 18.25,19.8789576 18.25,18.0840321 L18.25,4 C18.25,2.20507456 16.7949254,0.75 15,0.75 L4,0.75 Z" id="矩形" stroke="#333333"></path>
<path d="M12.6184679,7.34507194 C11.7610968,6.5756448 10.3708384,6.54861094 9.47608795,7.28585366 L8.99915858,7.67882658 L8.52222828,7.28585479 C7.62724078,6.54842034 6.23532693,6.57632431 5.37856187,7.34622509 C4.54846489,8.09479872 4.53952596,9.28445061 5.3540918,10.0387327 L5.38207236,10.0642878 L5.45136557,10.1366355 L8.84131833,14.1948452 C8.91400195,14.2625649 9.05338824,14.2683195 9.13354047,14.2139584 L12.5470789,10.1387093 L12.6203403,10.0628009 C13.4511847,9.31513493 13.4609153,8.12481993 12.6466299,7.37079539 L12.6184679,7.34507194 Z" id="路径" stroke="#333333"></path>
</g>
</g>
</g>
</g>
</g>
</g>
</svg>
\ No newline at end of file
src/assets/icons/svg/order.svg 0 → 100644
View file @ 972c1cc1
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="118.253" height="121.857" viewBox="0 0 118.253 121.857">
<defs>
<filter id="矩形" x="0" y="18.541" width="111.224" height="66.327" filterUnits="userSpaceOnUse">
<feOffset dx="6" dy="2" input="SourceAlpha"/>
<feGaussianBlur stdDeviation="7.5" result="blur"/>
<feFlood flood-color="#dadbfc"/>
<feComposite operator="in" in2="blur"/>
<feComposite in="SourceGraphic"/>
</filter>
<filter id="矩形备份" x="0" y="46.602" width="111.224" height="66.327" filterUnits="userSpaceOnUse">
<feOffset dx="6" dy="2" input="SourceAlpha"/>
<feGaussianBlur stdDeviation="7.5" result="blur-2"/>
<feFlood flood-color="#dadbfc"/>
<feComposite operator="in" in2="blur-2"/>
<feComposite in="SourceGraphic"/>
</filter>
</defs>
<g id="编组_2" data-name="编组 2" transform="translate(16.5 2)">
<rect id="矩形-2" data-name="矩形" width="87.551" height="112" rx="8" transform="translate(2.245 7.857)" fill="#ececff"/>
<rect id="矩形-3" data-name="矩形" width="74.082" height="97.653" rx="5" transform="translate(11.224 15.714)" fill="#dadbfc"/>
<rect id="矩形-4" data-name="矩形" width="74.082" height="97.653" rx="5" transform="translate(8.98 13.469)" fill="#fff"/>
<path id="矩形-5" data-name="矩形" d="M0,0H39.286a0,0,0,0,1,0,0V7.1a3,3,0,0,1-3,3H3a3,3,0,0,1-3-3V0A0,0,0,0,1,0,0Z" transform="translate(26.939 7.857)" fill="#babdff"/>
<g transform="matrix(1, 0, 0, 1, -16.5, -2)" filter="url(#矩形)">
<rect id="矩形-6" data-name="矩形" width="66.224" height="21.327" rx="4" transform="translate(16.5 39.04)" fill="#fff"/>
</g>
<g transform="matrix(1, 0, 0, 1, -16.5, -2)" filter="url(#矩形备份)">
<rect id="矩形备份-2" data-name="矩形备份" width="66.224" height="21.327" rx="4" transform="translate(16.5 67.1)" fill="#fff"/>
</g>
<path id="路径" d="M15.714,7.857A7.857,7.857,0,0,0,0,7.857" transform="translate(39.286)" fill="none" stroke="#babdff" stroke-miterlimit="10" stroke-width="4"/>
<path id="路径_8" data-name="路径 8" d="M0,.561H33.673" transform="translate(29.184 28.061)" fill="none" stroke="#dadbfc" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" stroke-width="4"/>
<path id="路径_8备份" data-name="路径 8备份" stroke="#ffc842" d="M0,.561H33.673" fill="none" transform="translate(29.184 99.337)" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" stroke-width="4" opacity="0.375"/>
<g id="编组" transform="translate(49.369 66.02) rotate(-45)" class="searching">
<g id="编组_3" data-name="编组 3" transform="translate(0 0)">
<g id="椭圆形" transform="translate(0 0)" fill="rgba(255,243,0,0.19)" stroke="#ffc842" stroke-miterlimit="10" stroke-width="4">
<circle cx="18.52" cy="18.52" r="18.52" stroke="none"/>
<circle cx="18.52" cy="18.52" r="16.52" fill="none"/>
</g>
<path id="路径-2" data-name="路径" d="M10.5,10.5A10.5,10.5,0,0,0,0,0" transform="translate(18.138 8.316)" fill="none" stroke="#fff" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" stroke-width="3"/>
<path id="路径_9" data-name="路径 9" d="M.561,0V12.347" transform="translate(17.165 35.881)" fill="none" stroke="#ffc842" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" stroke-width="4"/>
</g>
</g>
<path id="MANGO" d="M26.612,5.83A2.579,2.579,0,0,1,24.585,5a3.029,3.029,0,0,1-.7-2.074,3.006,3.006,0,0,1,.7-2.083A2.542,2.542,0,0,1,26.612,0a2.583,2.583,0,0,1,2.027.833,3.029,3.029,0,0,1,.707,2.091A3.016,3.016,0,0,1,28.639,5,2.6,2.6,0,0,1,26.612,5.83Zm0-5.021a1.657,1.657,0,0,0-1.352.59A2.33,2.33,0,0,0,24.8,2.923,2.32,2.32,0,0,0,25.26,4.44a1.656,1.656,0,0,0,1.352.581,1.675,1.675,0,0,0,1.344-.558,2.356,2.356,0,0,0,.463-1.54,2.411,2.411,0,0,0-.463-1.556A1.636,1.636,0,0,0,26.612.809ZM20.719,5.83a2.632,2.632,0,0,1-2.082-.849,2.991,2.991,0,0,1-.691-2.043A3.1,3.1,0,0,1,18.637.864,2.455,2.455,0,0,1,20.617,0a2.7,2.7,0,0,1,1.7.48,2.115,2.115,0,0,1,.754,1.406h-.927a1.3,1.3,0,0,0-.5-.809,1.781,1.781,0,0,0-1.03-.267,1.535,1.535,0,0,0-1.249.535,2.288,2.288,0,0,0-.5,1.595,2.311,2.311,0,0,0,.448,1.525,1.886,1.886,0,0,0,1.508.565,2.965,2.965,0,0,0,.754-.094,2.58,2.58,0,0,0,.6-.26V3.52H20.7V2.734h2.4V5.108a3.223,3.223,0,0,1-1.021.534A4.56,4.56,0,0,1,20.719,5.83ZM13.35,5.721h-.92V.11h.92l2.773,4.046h.032V.11h.927v5.61h-.9l-2.805-4.1H13.35v4.1Zm-12.431,0H0V.11H1.076l1.909,4.4h.032l1.9-4.4H5.995v5.61H5.076V1.854H5.044L3.394,5.72H2.6L.95,1.854H.919V5.72Zm6.608,0H6.545L8.69.11H9.735l2.144,5.609H10.9l-.511-1.407H8.038L7.527,5.72ZM9.2,1.1l-.887,2.46h1.8L9.232,1.1Z" transform="translate(33.101 9.994)" fill="#fff"/>
</g>
</svg>
src/components/Collapse.vue
View file @ 972c1cc1
...@@ -17,7 +17,7 @@ ...@@ -17,7 +17,7 @@
</div> </div>
<div class="collapse-item-content"> <div class="collapse-item-content">
<i class="collapse-item-content-icon">A:</i> <i class="collapse-item-content-icon">A:</i>
<div class="collapse-item-content-txt">{{ item.a }}</div> <div class="collapse-item-content-txt" v-html="item.a"></div>
</div> </div>
<cr-divider :hairline="false" :style="{ color: '#ebebeb', margin: 0 }" /> <cr-divider :hairline="false" :style="{ color: '#ebebeb', margin: 0 }" />
</div> </div>
......
src/components/CompactCellGroup.vue
View file @ 972c1cc1
...@@ -138,7 +138,7 @@ export default { ...@@ -138,7 +138,7 @@ export default {
@{deep} .cr-cell__title { @{deep} .cr-cell__title {
color: @gray-4 !important; color: @gray-4 !important;
font-size: @font-size-12 !important; font-size: @font-size-12 !important;
margin-bottom: 10px; // margin-bottom: 10px;
} }
} }
} }
......
src/components/LoginModal.vue
View file @ 972c1cc1
<template> <template>
<modal <modal
v-model="isShowLogin" :value="isShowLogin"
title="您好<br />欢迎来到芒果保险" title="您好<br />欢迎来到芒果保险"
:closeable="true" :closeable="true"
cancel-btn cancel-btn
confirm-btn="确定" confirm-btn="确定"
@close="setLoginIsShow(false)" @close="setIsShowLogin(false)"
@confirm="$refs.loginForm.submit()" @confirm="$refs.loginForm.submit()"
> >
<cr-form <cr-form
...@@ -73,7 +73,7 @@ export default { ...@@ -73,7 +73,7 @@ export default {
...mapState(["isShowLogin"]) ...mapState(["isShowLogin"])
}, },
methods: { methods: {
...mapActions(["setLoginIsShow"]), ...mapActions(["setIsShowLogin"]),
onFormFailed(errorInfo) { onFormFailed(errorInfo) {
const { errors } = errorInfo; const { errors } = errorInfo;
this.$notify({ type: "warning", message: errors[0].message }); this.$notify({ type: "warning", message: errors[0].message });
...@@ -84,7 +84,7 @@ export default { ...@@ -84,7 +84,7 @@ export default {
const res = await loginByPhone(this.formData); const res = await loginByPhone(this.formData);
if (res.code === "0") { if (res.code === "0") {
this.$notify("登录成功"); this.$notify("登录成功");
this.setLoginIsShow(false); this.setIsShowLogin(false);
localStorage.setItem("mongoToken", res.data.token); localStorage.setItem("mongoToken", res.data.token);
} }
}, },
......
src/components/Tabbar.vue
View file @ 972c1cc1
...@@ -37,6 +37,12 @@ const tabbarData = [ ...@@ -37,6 +37,12 @@ const tabbarData = [
icon: "product", icon: "product",
activeIcon: "product-active" activeIcon: "product-active"
}, },
{
name: "顾问",
path: "/consultant",
icon: "counselor",
activeIcon: "counselor-active"
},
{ {
name: "我的", name: "我的",
path: "/user", path: "/user",
......
src/router/index.js
View file @ 972c1cc1
...@@ -34,6 +34,31 @@ const routes = [ ...@@ -34,6 +34,31 @@ const routes = [
name: "GoodsInform", name: "GoodsInform",
component: () => import("../views/Goods/Inform/index.vue") component: () => import("../views/Goods/Inform/index.vue")
}, },
{
path: "/consultant",
name: "Consultant",
component: () => import("../views/Consultant/index.vue")
},
{
path: "/consultant/success",
name: "ConsultantSuccess",
component: () => import("../views/Consultant/Success/index.vue")
},
{
path: "/consultant/question",
name: "ConsultantQuestion",
component: () => import("../views/Consultant/Question/index.vue")
},
{
path: "/consultant/exclusive",
name: "ConsultantExclusive",
component: () => import("../views/Consultant/Exclusive/index.vue")
},
{
path: "/consultant/plan",
name: "ConsultantPlan",
component: () => import("../views/Consultant/Plan/index.vue")
},
{ {
path: "/user", path: "/user",
name: "User", name: "User",
......
src/service/cherry-ui.js
View file @ 972c1cc1
...@@ -39,7 +39,7 @@ const { ...@@ -39,7 +39,7 @@ const {
Tabbar, Tabbar,
TabbarItem, TabbarItem,
// Navbar, // Navbar,
// Progress, Progress,
// Skeleton, // Skeleton,
Sticky Sticky
// Swipe, // Swipe,
...@@ -70,6 +70,7 @@ Vue.use(Form); ...@@ -70,6 +70,7 @@ Vue.use(Form);
Vue.use(Tabbar); Vue.use(Tabbar);
Vue.use(TabbarItem); Vue.use(TabbarItem);
Vue.use(Icon); Vue.use(Icon);
Vue.use(Progress);
Vue.use(Sticky); Vue.use(Sticky);
Vue.use(Overlay); Vue.use(Overlay);
Vue.use(Form); Vue.use(Form);
......
src/service/pay.service.js
View file @ 972c1cc1
...@@ -2,7 +2,7 @@ ...@@ -2,7 +2,7 @@
* @Description: 支付微信h5, jsapi, 第三方收银台，跳转） * @Description: 支付微信h5, jsapi, 第三方收银台，跳转）
* @Date: 2020-07-28 15:03:52 * @Date: 2020-07-28 15:03:52
* @LastEditors: gzw * @LastEditors: gzw
* @LastEditTime: 2020-07-29 15:08:38 * @LastEditTime: 2020-07-31 10:46:33
*/ */
import { Notify } from "@qg/cherry-ui"; import { Notify } from "@qg/cherry-ui";
...@@ -24,7 +24,7 @@ function payByWeixinJsapi(info, callback) { ...@@ -24,7 +24,7 @@ function payByWeixinJsapi(info, callback) {
appId: info.appId, //公众号名称，由商户传入 appId: info.appId, //公众号名称，由商户传入
timeStamp: info.timeStamp, //时间戳，自1970年以来的秒数 timeStamp: info.timeStamp, //时间戳，自1970年以来的秒数
nonceStr: info.nonceStr, //随机串 nonceStr: info.nonceStr, //随机串
package: `prepay_id=${info.prepayId}&partner_id=${info.partnerId}`, package: `prepay_id=${info.prepayId}`,
signType: "MD5", //微信签名方式： signType: "MD5", //微信签名方式：
paySign: info.sign //微信签名 paySign: info.sign //微信签名
}, },
......
src/store/index.js
View file @ 972c1cc1
...@@ -17,7 +17,7 @@ export default new Vuex.Store({ ...@@ -17,7 +17,7 @@ export default new Vuex.Store({
state.isLoading = value; state.isLoading = value;
}, },
setIsShowLogin(state, value) { setIsShowLogin(state, value) {
state.showLogin = value; state.isShowLogin = value;
} }
}, },
actions: { actions: {
......
src/style/index.less
View file @ 972c1cc1
@import "reset.less"; @import "reset.less";
@import "var.less"; @import "var.less";
@import "mixins.less"; @import "mixins.less";
html,body,#app { html,
body,
#app {
height: 100%; height: 100%;
} }
body { body {
...@@ -89,3 +91,64 @@ a { ...@@ -89,3 +91,64 @@ a {
.cr-notify { .cr-notify {
font-size: @font-size-14; font-size: @font-size-14;
} }
.table {
margin: 0;
width: 100%;
thead {
th {
color: @gray-5;
font-size: @font-size-12;
font-weight: @font-weight-bold;
padding: 12px 0 12px 18px;
text-align: left;
background-color: @gray-1;
&:first-child {
border-top-left-radius: @border-radius-lg;
border-bottom-left-radius: @border-radius-lg;
}
&: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: 12px 9px 12px 18px;
text-align: left;
border-bottom: 1px solid #ece9e9;
}
td {
color: @black;
font-size: @font-size-12;
padding: @padding-sm + 2 @padding-md + 2;
border-bottom: 1px solid #ece9e9;
text-align: left;
}
}
}
.searching {
animation: search-move 2s;
animation-timing-function: linear;
animation-iteration-count: infinite;
}
@keyframes search-move {
0% {
transform: translate(49.369px, 66.02px) rotate(-45deg);
}
25% {
transform: translate(39.369px, 66.02px) rotate(-45deg);
}
50% {
transform: translate(39.369px, 76.02px) rotate(-45deg);
}
75% {
transform: translate(49.369px, 76.02px) rotate(-45deg);
}
100% {
transform: translate(49.369px, 66.02px) rotate(-45deg);
}
}
src/style/mixins.less
View file @ 972c1cc1
...@@ -13,3 +13,28 @@ ...@@ -13,3 +13,28 @@
line-height: @line-height-md; line-height: @line-height-md;
} }
} }
.sub-text-mixins {
font-size: @font-size-12;
color: @gray-4;
line-height: @line-height-sm;
}
.item-show-mixin {
text-align: center;
.svg-icon {
height: 48px;
width: 48px;
}
h5 {
display: block;
margin: 10px 0 4px;
font-size: @font-size-14;
font-weight: @font-weight-bold;
line-height: @line-height-sm;
color: @black;
}
p {
display: block;
.sub-text-mixins();
color: @black;
}
}
\ No newline at end of file
src/views/Consultant/Exclusive/index.less 0 → 100644
View file @ 972c1cc1
@import "../index.less";
.container {
background-color: @white;
}
.cul-hd {
background: #fff url("../../../assets/images/consultant/culstor-bg.png") top no-repeat;
background-size: contain;
display: flex;
justify-content: center;
align-items: flex-end;
padding: 0;
height: 249px;
&-info {
padding: 66px 0 40px 30px;
word-break: break-all;
small {
display: block;
.sub-text-mixins();
font-size: @font-size-11;
color: @black;
}
h1 {
font-weight: @font-weight-bold;
font-size: @font-size-32;
line-height: 45px;
margin-top: 7px;
}
.cr-tag {
display: block;
margin: 4px 0 11px;
width: 75px;
font-size: @font-size-12;
background: linear-gradient(
178deg,
rgba(114, 114, 114, 1) 0%,
rgba(0, 0, 0, 1) 100%
);
border-radius: 7px 3px 7px 3px;
}
}
}
.cul {
&-card {
padding-bottom: 0 !important;
}
&-contact {
display: flex;
justify-content: space-between;
&-qrcode {
background: @white;
border-radius: @border-radius-md;
box-shadow: 0px 10px 25px 0px rgba(0, 0, 0, 0.09);
padding: 4px 6px 9px;
p {
text-align: center;
font-size: @font-size-11;
color: @gray-5;
line-height: @line-height-sm;
}
}
}
&-rate {
flex: 1;
padding-left: 22px;
&-item {
background:@gray-1;
border-radius: @border-radius-md;
padding: @padding-md;
text-align: center;
&:first-child {
margin-bottom: 11px;
}
h2 {
font-size: @font-size-20;
font-weight: @font-weight-bold;
line-height: 28px;
color: @black;
}
p {
.sub-text-mixins();
color: @gray-5;
}
}
}
&-tel {
padding: 8px 17px;
margin: 20px 0 24px;
background-color: @gray-1;
border-radius: @border-radius-max;
display: flex;
justify-content: space-between;
align-items: center;
a {
color: @black;
font-weight: @font-weight-bold;
font-size: @font-size-16;
line-height: @line-height-md;
padding-right: 25px;
border-right: 1px solid #e9e9e9;
}
.svg-icon {
width: 19px;
height: 19px;
vertical-align: -4px;
margin-right: 2px;
}
}
&-time {
.sub-text-mixins();
}
&-slogan {
text-align: center;
p {
font-size: @font-size-14;
color: @gray-5;
line-height: @line-height-lg;
}
}
&-entry {
background: url("../../../assets/images/consultant/card-bg.png") center no-repeat;
background-size: contain;
height: 117px;
display: flex;
justify-content: space-between;
align-items: center;
padding: 0 28px 0 26px;
&-title {
color: @white;
position: relative;
h3 {
font-size: 24px;
font-weight: @font-weight-bold;
line-height: 33px;
margin-bottom: 4px;
}
small {
display: block;
font-size: 11px;
line-height: 11px;
letter-spacing: 4px;
}
.cr-tag {
border-radius: 7px 3px !important;
background-color: rgba(0, 0, 0, 0.2) !important;
font-size: 12px !important;
position: absolute;
top: -3px;
right: -37px;
}
}
.svg-icon {
width: 22px;
height: 22px;
}
}
}
src/views/Consultant/Exclusive/index.vue 0 → 100644
View file @ 972c1cc1
<template>
<div class="container">
<div class="cul-hd">
<div class="cul-hd-info">
<small>“保险从业多年，口碑极佳”</small>
<h1>李玉婷</h1>
<cr-tag><svg-icon icon-class="medal" />金牌保险顾问</cr-tag>
<small>执业保险销售资质：</small>
<small>201920000000800<br />02020003828</small>
</div>
<cr-image
class="cul-hd-img"
src="@/assets/images/consultant/culstor-demo.png"
width="215px"
height="230px"
/>
</div>
<div class="cul-det">
<card title="" class="cul-card">
<div class="cul-contact">
<div class="cul-contact-qrcode">
<cr-image
src="@/assets/images/consultant/qrcode-demo.png"
width="130px"
height="130px"
/>
<p>长安识别二维码加好友</p>
</div>
<div class="cul-rate">
<div class="cul-rate-item">
<h2>38100</h2>
<p>已服务用户人</p>
</div>
<div class="cul-rate-item">
<h2>99.8%</h2>
<p>满意度</p>
</div>
</div>
</div>
<router-link tag="div" class="cul-entry" to="/consultant/plan">
<div class="cul-entry-title">
<h3>您的专属保险方案</h3>
<small>CAPTIVE INSURANC</small>
<cr-tag>自己</cr-tag>
</div>
<svg-icon icon-class="arrow-right" />
</router-link>
<div class="cul-tel">
<a class="cul-tel-num" href="tel:13888888888">
<svg-icon icon-class="call" />138 8888 8888
</a>
<div class="cul-time">服务时间 9:00 ~ 21:00</div>
</div>
<div class="cul-slogan">
<p>“我们的价值：让客户少花钱买好保险”</p>
<p>“我们的愿景：让每个家庭都有备无患”</p>
</div>
<cr-divider :style="{ marginBottom: 0 }" />
</card>
<card title="芒果保险·1对1保险顾问来帮您?">
<div class="cul-odds-list">
<div class="cul-odds-list-item" v-for="(item, index) in oddsInsureList" :key="index">
<div class="cul-odds-list-title">
<i class="cul-odds-list-title-icon">{{ index + 1 }}</i>
<span class="cul-odds-list-title-txt">{{ item.title }}</span>
</div>
<div class="cul-odds-list-content">
<div class="cul-odds-list-content-item" v-for="(it, idx) in item.children" :key="idx">
<div class="cul-odds-list-content-title">
<svg-icon icon-class="check-circle" />
{{ it[0] }}
</div>
<div class="cul-odds-list-content-txt">{{ it[1] }}</div>
</div>
</div>
</div>
</div>
</card>
</div>
<copyright :logo="true" />
</div>
</template>
<script>
import copyright from "@/components/Copyright";
import Card from "@/components/Card";
export default {
name: "ConsultantExclusive",
components: {
Card,
copyright
},
data() {
return {
Info: {},
oddsInsureList: [
{
title: "投保前",
children: [
["全方位评估:", "360°筛查、识别、评估您的家庭风险"],
[
"量身筛选:",
"根据您的自身情况，分析对比几百款产品，选出最适合的保障方案，最高节省50%保费"
],
["保单诊断:", "全面评估已有保单，中立、客观的给您提供针对性的意见 "]
]
},
{
title: "投保中",
children: [
["条款解读:", "为您解释复杂难懂的条款"],
["有效投保:", "为您做好健康告知，做到有效投保"]
]
},
{
title: "省钱",
children: [["协助理赔:", "申请理赔时，理赔专家全程协助"]]
}
]
};
},
mounted() {}
};
</script>
<style lang="less" src="./index.less" scoped></style>
src/views/Consultant/Plan/index.less 0 → 100644
View file @ 972c1cc1
@import "../Success/index.less";
.container {
background-color: @white;
}
.cul-hd {
background: url("../../../assets/images/consultant/linear-bg.png") top no-repeat;
background-size: contain;
padding: 10px 16px;
&-rec {
margin: 30px 0 33px;
&-title {
display: block;
font-size: @font-size-20;
font-weight: @font-weight-bold;
line-height: 24px;
color: @black;
margin-bottom: 8px;
}
&-sub {
display: block;
font-size: @font-size-14;
color: @black;
line-height: 24px;
}
}
.card {
border-radius: @border-radius-md;
box-shadow: 0px 5px 25px 0px rgba(0, 0, 0, 0.07);
@{deep} &-body {
margin-bottom: 0;
}
}
&-card {
&-title {
font-size: @font-size-16;
font-weight: @font-weight-bold;
color: @black;
line-height: @line-height-lg;
strong {
color: @red;
font-weight: @font-weight-bold;
}
}
&-content {
.sub-text-mixins();
}
}
}
.cul {
&-det {
margin-top: 15px;
.card {
padding: 0 16px 20px;
@{deep} &-body {
margin-bottom: 0;
}
}
}
&-dist {
background-color: @orange-light;
border-radius: 16px 3px;
display: flex;
justify-content: space-around;
padding: 20px 14px;
&-item {
text-align: center;
h3 {
font-size: @font-size-20;
font-weight: @font-weight-bold;
color: @black;
line-height: 28px;
}
p {
.sub-text-mixins();
color: #333;
}
}
}
}
.good {
&-item {
background: @white;
box-shadow: 0px 5px 25px 0px rgba(0, 0, 0, 0.07);
border-radius: @border-radius-md;
margin-bottom: 10px;
padding: @padding-lg;
}
&-title {
font-size: @font-size-20;
font-weight: @font-weight-bold;
color: @black;
line-height: 28px;
.cr-tag {
margin-left: 4px;
vertical-align: 5px;
}
}
&-date {
.sub-text-mixins();
&-item {
margin-right: 16px;
strong {
font-weight: @font-weight-bold;
}
}
}
&-price {
display: flex;
justify-content: space-between;
align-items: center;
padding: 16px 0;
&-item {
font-size: @font-size-16;
color: @black;
font-weight: @font-weight-bold;
strong {
font-weight: @font-weight-bold;
font-size: @font-size-16;
color: @red;
}
}
.cr-button {
width: 96px;
height: 36px;
line-height: 36px;
border-radius: @border-radius-sm !important;
}
}
&-reason {
display: flex;
background-color: @gray-1;
padding: 7px 12px;
border-radius: 8px;
position: relative;
&::after{
position: absolute;
top: -12px;
left: 18px;
content: ' ';
border-top: 6px transparent dashed;
border-left: 6px transparent dashed;
border-bottom: 6px @gray-1 dashed;
border-right: 6px transparent solid;
}
&-avator {
width: 28px;
margin-right: 8px;
}
&-content {
.sub-text-mixins();
}
}
}
src/views/Consultant/Plan/index.vue 0 → 100644
View file @ 972c1cc1
<template>
<div class="container">
<div class="cul-hd">
<div class="cul-hd-rec">
<small class="cul-hd-rec-sub">
HI,{{ baseInfo.userName }}{{ baseInfo.sex === 1 ? "先生" : "女士" }}
</small>
<h4 class="cul-hd-rec-title">以下是您本人的专属保险方案</h4>
</div>
<card title="1">
<h5 class="cul-hd-card-title" slot="header">
总保费：
<strong>{{ baseInfo.amount }}</strong>
{{ baseInfo.unit }}
</h5>
<p class="cul-hd-card-content">
推荐理由：
{{ baseInfo.reason }}
</p>
</card>
</div>
<div class="cul-det">
<card title="保障分布">
<div class="cul-dist">
<div class="cul-dist-item" v-for="(item, index) in distList" :key="index">
<h3>{{ item.price }}</h3>
<p>{{ item.title }}</p>
</div>
</div>
</card>
<card title="保障总览">
<table class="table">
<thead>
<tr>
<th style="width: 19%">险种</th>
<th style="width: 20%">保额</th>
<th style="width: 23%">保障期限</th>
<th style="width: 17%">缴费期</th>
<th style="width: 20%">保费</th>
</tr>
</thead>
<tbody>
<tr v-for="(item, index) in overviewList" :key="index">
<th>{{ item.title }}</th>
<th>{{ item.amount }}</th>
<th>{{ item.range }}</th>
<th>{{ item.way }}</th>
<th>{{ item.price }}</th>
</tr>
</tbody>
</table>
</card>
<card title="保障产品">
<div class="good-item" v-for="(item, index) in overviewList" :key="index">
<div class="good-title">
{{ item.goods }}
<cr-tag :type="tagFilter(item.type)">{{ item.title }}</cr-tag>
</div>
<div class="good-date">
<span class="good-date-item">
保额 | <strong>{{ item.amount }}</strong>
</span>
<span class="good-date-item">
缴费期 | <strong>{{ item.way }}</strong>
</span>
<span class="good-date-item">
保障期限 | <strong>{{ item.range }}</strong>
</span>
</div>
<div class="good-price">
<div class="good-price-item">
<strong>{{ item.goodsPirce }}</strong>
{{ item.goodsUnit }}
</div>
<cr-button type="warning" @click="goDetail(item.id, item.type)">去投保</cr-button>
</div>
<div class="good-reason">
<div class="good-reason-avator">
<cr-image :src="avator" width="28px" height="28px" />
</div>
<div class="good-reason-content">
推荐理由：
{{ item.reason }}
</div>
</div>
</div>
</card>
</div>
</div>
</template>
<script>
import Card from "@/components/Card";
import avator from "@/assets/images/consultant/avator.png";
export default {
name: "ConsultantSuccess",
components: {
Card
},
data() {
return {
avator,
baseInfo: {
userName: "王斌",
sex: 1,
amount: 10425,
unit: "元/年",
reason: "推荐理由推荐理由推荐理由推荐理由推荐理由推荐理由推荐理由"
},
distList: [
{ title: "医疗险", price: "500万" },
{ title: "重疾险", price: "50万" },
{ title: "意外险", price: "60万" },
{ title: "寿险", price: "350万" }
],
overviewList: [
{
id: 1,
goods: "国民保·百万医疗险",
type: "mi",
title: "医疗险",
amount: "600万",
range: "1年",
way: "趸交",
price: "350元",
goodsPirce: "3000",
goodsUnit: "元/每年",
reason: "推荐理由推荐理由推荐理由推荐理由推荐理由推荐理由推荐理由"
},
{
id: 2,
goods: "康惠保2020终身重疾险",
type: "cii",
title: "重疾险",
amount: "50万",
range: "终身",
way: "20年",
price: "6000元",
goodsPirce: "6000",
goodsUnit: "元/每年",
reason: "推荐理由推荐理由推荐理由推荐理由推荐理由推荐理由推荐理由"
},
{
id: 3,
goods: "国民保·百万意外险",
type: "ai",
title: "意外险",
amount: "50万",
range: "1年",
way: "趸交",
price: "350元",
goodsPirce: "3000",
goodsUnit: "元/每年",
reason: "推荐理由推荐理由推荐理由推荐理由推荐理由推荐理由推荐理由"
},
{
id: 4,
goods: "国民保·百万寿险",
type: "li",
title: "寿险",
amount: "350万",
range: "保至70岁",
way: "20年",
price: "3725元",
goodsPirce: "3000",
goodsUnit: "元/每年",
reason: "推荐理由推荐理由推荐理由推荐理由推荐理由推荐理由推荐理由"
}
]
};
},
mounted() {},
methods: {
tagFilter(type) {
let _type = "";
switch (type) {
case "mi":
_type = "warning";
break;
case "cii":
_type = "danger";
break;
case "ai":
_type = "primary";
break;
case "li":
_type = "light";
break;
default:
_type = "light";
break;
}
return _type;
},
goDetail(id, type) {
this.$router.push({ url: "/goods/detail", query: { id, type } });
}
}
};
</script>
<style lang="less" src="./index.less" scoped></style>
src/views/Consultant/Question/index.less 0 → 100644
View file @ 972c1cc1
@import "../Success/index.less";
.cul-hd {
background: url("../../../assets/images/consultant/dotted-bg.png") top no-repeat;
background-size: contain;
&-pr {
padding: 50px 46px 60px;
}
&-card {
&-title {
display: flex;
justify-content: space-between;
width: 100%;
}
&-footer {
text-align: center;
a {
.sub-text-mixins();
}
}
&-body {
@{deep} .wheel-item {
font-size: 16px;
}
@{deep} .cr-picker--toolbar {
display: none;
}
}
}
.card {
@{deep} &-header {
flex-wrap: wrap;
}
}
.qus-radio {
width: 100%;
justify-content: space-between;
flex-wrap: wrap;
@{deep} .cr-radio {
box-shadow: none;
height: 48px;
line-height: 48px;
flex: none;
width: 145px;
padding: 0;
margin-bottom: 12px;
margin-right: 0;
background-color: @gray-1;
&__label {
font-size: @font-size-16;
}
&.checked {
background-color: @orange-light;
}
}
}
}
.step {
font-size: @font-size-18;
font-weight: @font-weight-bold;
color: @black;
line-height: @line-height-lg + 4;
em {
font-style: normal;
font-size: @font-size-18;
font-weight: @font-weight-bold;
color: #e4d82b;
}
}
.cul-tip {
margin-top: 8px;
color: @gray-4;
width: 100%;
}
.cul-inline {
@{deep} .cr-radio {
width: 100% !important;
margin-right: 0 !important;
}
}
.qus-form {
@{deep} .cr-field--error-message {
display: none;
}
&_radio {
background-color: @white !important;
overflow: initial;
padding: 0 0 0 16px !important;
@{deep} .cr-cell {
&__value {
overflow: initial;
}
}
}
@{deep} .cr-cell {
&-group {
&::after {
display: none;
}
}
background-color: @gray-1;
border-radius: @border-radius-md;
margin-bottom: 12px;
align-items: center;
padding: 9px 16px;
&::after {
display: none;
}
&__title {
color: #333333;
display: flex;
align-items: center;
}
}
.radio-btn {
margin-bottom: 0;
margin-left: auto;
justify-content: space-between;
@{deep} .cr-radio {
margin-bottom: 0;
width: 72px;
border-radius: 14px;
}
}
}
.subing {
display: flex;
align-items: center;
justify-content: center;
height: 100%;
&-item {
position: relative;
&::after {
content: " ";
display: block;
position: absolute;
top: 122px;
left: 0;
width: 68px;
height: 0;
background-color: rgba(133, 138, 255, 0.21);
box-shadow: 27px -3px 26px 14px rgba(133, 138, 255, 0.37);
}
}
.svg-icon {
width: 111px;
height: 127px;
}
&-mask {
background-color: #fff;
}
&-title {
text-align: center;
h3 {
font-size: 20px;
font-weight: bold;
line-height: 28px;
color: #858aff;
margin: 30px 0 6px;
}
small {
display: block;
.sub-text-mixins();
}
}
}
.ani_dot {
display: inline-block;
width: 0.8em;
vertical-align: bottom;
overflow: hidden;
animation: dot 2s infinite step-start;
}
@keyframes dot {
0% {
width: 0;
margin-right: 0.8em;
}
33% {
width: 0.3em;
margin-right: 0.5em;
}
66% {
width: 0.5em;
margin-right: 0.3em;
}
100% {
width: 0.8em;
margin-right: 0;
}
}
src/views/Consultant/Question/index.vue 0 → 100644
View file @ 972c1cc1
<template>
<div class="container">
<div class="cul-hd">
<div class="cul-hd-pr">
<div class="cul-process">
<div
class="cul-process-item"
v-for="(item, index) in processList"
:key="index"
:class="{ active: item.active }"
>
<svg-icon :icon-class="item.icon" />
<p>{{ item.sub }}</p>
</div>
</div>
</div>
<card title="1" footer="1">
<template slot="header">
<h5 class="cul-hd-card-title">
<span>{{ stepTips[currentStep].title }}</span>
<span class="step">
<em>{{ currentStep + 1 }}</em>
/ {{ stepTips.length }}
</span>
</h5>
<div class="cul-tip">{{ stepTips[currentStep].sub }}</div>
</template>
<cr-form class="cul-hd-card-body" @submit="onSubmit" @failed="onFailed">
<cr-radio-btn
v-model="formData.who"
class="qus-radio"
:radio-data="insuredOptions"
v-show="currentStep === 0"
/>
<cr-date-picker
ref="birthday"
@change="
(picker, value) => {
onPickerChange(picker, value, 'birthday');
}
"
v-show="currentStep === 1"
:show-toolbar="false"
/>
<cr-radio-btn
v-model="formData.social"
:radio-data="hasSocialOptions"
class="qus-radio cul-inline"
v-show="currentStep === 2"
/>
<cr-picker
ref="income"
:columns="incomeOptions"
@change="
(picker, value) => {
onPickerChange(picker, value, 'income');
}
"
v-show="currentStep === 3"
:show-toolbar="false"
/>
<cr-picker
ref="loan"
:columns="loanOptions"
@change="
(picker, value) => {
onPickerChange(picker, value, 'loan');
}
"
v-show="currentStep === 4"
:show-toolbar="false"
/>
<cr-area
ref="area"
:list="areaList"
@change="
(picker, value) => {
onPickerChange(picker, value, 'area');
}
"
:columns-num="2"
v-show="currentStep === 5"
/>
<cr-radio-btn
v-model="formData.solve"
:radio-data="solveOptions"
class="qus-radio cul-inline"
v-show="currentStep === 6"
/>
<div class="qus-form" v-show="currentStep === 7">
<cr-field
v-model="formData.username"
name="姓名"
label="姓名"
placeholder="请输入投保人姓名"
:rules="[{ required: true, message: '请填写姓名' }]"
/>
<cr-field
class="qus-form_radio"
name="您的性别"
label="您的性别"
:rules="[{ required: true, message: '请选择性别' }]"
>
<cr-radio-btn slot="input" v-model="formData.sex" :radio-data="sexOptions" />
</cr-field>
<cr-field
v-model="formData.phone"
type="password"
name="预留手机"
label="预留手机"
placeholder="请输入手机号"
:rules="[{ required: true, message: '请输入手机号' }]"
/>
<cr-field
v-model="formData.code"
name="验证码"
label="验证码"
placeholder="输入短信验证码"
:rules="[{ required: true, message: '输入短信验证码' }]"
>
<a href="javascript:;" slot="button">发送验证码</a>
</cr-field>
</div>
</cr-form>
<div slot="footer" class="cul-hd-card-footer">
<cr-button type="warning" size="large" block @click="nextQuestion">下一步</cr-button>
<a href="javascsript:;" @click="prevQuestion" v-show="currentStep > 0">返回上一步</a>
</div>
</card>
</div>
<cr-overlay class="subing-mask" :show="showSubState" @click="showSubState = false">
<div class="subing">
<div class="subing-item">
<svg-icon icon-class="order" />
<div class="subing-title">
<h3>问卷分析中<span class="ani_dot">...</span></h3>
<small>正在为您分配顾问，请稍等</small>
</div>
</div>
</div>
</cr-overlay>
</div>
</template>
<script>
import CrRadioBtn from "@/components/CrRadioBtn";
import Card from "@/components/Card";
import areaList from "@qg/cherry-ui/src/area/demo/china";
export default {
name: "ConsultantQuestion",
components: {
Card,
CrRadioBtn
},
data() {
return {
areaList,
formData: {},
currentStep: 0,
showSubState: false,
stepTips: [
{
title: "您准备为谁买保险？",
sub:
"想为多人买保险的情况，请在和保险顾问沟通时说明信息，保险顾问会为每一位家人量身定制方案哦~~"
},
{
title: "请选择TA的出生日期？",
sub: "出生日期会影响保费计算，准确的填写可让保险顾问帮您更精准的测算保费~"
},
{ title: "请选择TA有无社保", sub: "新农合也算社保哦~~" },
{
title: "请选择您的年收入？",
sub: "保险顾问会根据您的年收入，帮您选择合适的额度和保费预算"
},
{
title: "请问您每月要还多少贷款呢？",
sub: "贷款包含房贷、车贷、信用卡等，了解您的贷款情况，能让顾问更好的帮您定制寿险额度"
},
{
title: "请选择您的居住城市？",
sub: "保险产品的销售会受到地区的限制，了解您的居住城市能让顾问帮您挑选到合适的保险"
},
{
title: "您主要想解决哪方面问题？",
sub: "告诉保险顾问您的咨询意向，可以为您提供更专业的服务哦"
},
{
title: "请填写您的个人信息",
sub: "请预留您的信息，保险师会在您方便时联系您"
}
],
insuredOptions: [
{ label: "本人", value: "1" },
{ label: "配偶", value: "2" },
{ label: "儿子", value: "3" },
{ label: "女儿", value: "4" },
{ label: "父亲", value: "5" },
{ label: "母亲", value: "6" }
],
hasSocialOptions: [
{ label: "有", value: "1" },
{ label: "无", value: "2" }
],
sexOptions: [
{ label: "男", value: "1" },
{ label: "女", value: "2" }
],
incomeOptions: ["10万", "20万", "25万", "30万"],
loanOptions: ["无房贷", "1000元", "2000元", "3000元", "4000元"],
solveOptions: [
{ label: "之前从没买过保险，打算配置保险", value: "1" },
{ label: "已配置部分保险，打算再补充一些", value: "2" },
{ label: "不配置保险，就想咨询些保险疑惑", value: "3" },
{ label: "无", value: "4" }
],
processList: [
{ icon: "package-active", sub: "聘请成功", active: true },
{ icon: "page-active", sub: "完成问卷", active: true },
{ icon: "flag-black", sub: "顾问服务" }
]
};
},
watch: {
currentStep(val) {
this.$forceUpdate();
if (val === 1) {
this.$refs["birthday"].refreshColumns();
}
if (val === 3) {
this.$refs["income"].refreshColumns();
}
if (val === 4) {
this.$refs["loan"].refreshColumns();
}
if (val === 5) {
this.$refs["area"].refreshColumns();
}
}
},
mounted() {},
methods: {
nextQuestion() {
if (this.currentStep === 7) {
this.showSubState = true;
setTimeout(() => {
this.showSubState = false;
this.$router.push("/consultant/exclusive");
}, 3000);
return;
}
this.currentStep++;
},
prevQuestion() {
if (this.currentStep === 0) {
return;
}
this.currentStep--;
},
onPickerChange(picker, value, type) {
this.formData[type] = value;
},
async onSubmit() {
// console.log('sucess', values);
},
onFailed() {
// console.log('fail', errorInfo);
}
}
};
</script>
<style lang="less" src="./index.less" scoped></style>
src/views/Consultant/Success/index.less 0 → 100644
View file @ 972c1cc1
@import "../../../style/var.less";
@import "../../../style/mixins.less";
.item-show-mixin {
text-align: center;
.svg-icon {
height: 28px;
width: 28px;
margin-bottom: 11px;
}
p {
display: block;
.sub-text-mixins();
color: @black;
&.active {
font-weight: @font-weight-bold;
}
}
}
.container {
overflow: hidden;
background-color: @background-color;
&::after {
content: " ";
display: block;
height: 60px;
}
}
.cul-hd {
background: url("../../../assets/images/consultant/avator-bg.png") top no-repeat;
background-size: contain;
padding: 10px 16px;
&-rec {
margin: 53px 0 42px;
&-title {
display: block;
font-size: @font-size-14 * 2;
font-weight: @font-weight-bold;
line-height: 40px;
color: @black;
margin-bottom: 8px;
}
&-sub {
display: block;
font-size: @font-size-12;
font-weight: @font-weight-bold;
color: @black;
line-height: 12px;
}
}
.card {
border-radius: @border-radius-md;
}
&-card {
&-title {
font-size: @font-size-18;
font-weight: @font-weight-bold;
color: @black;
line-height:@line-height-lg + 4;
}
&-body {
.cul-process {
background-color: @gray-1;
border-radius: @border-radius-md;
padding: 24px 10px;
}
}
}
}
.cul-process {
display: flex;
justify-content: space-between;
&-item {
.item-show-mixin();
.svg-icon {
margin-bottom: 8px;
}
position: relative;
&::after {
content: " ";
display: block;
position: absolute;
top: 15px;
left: -60px;
width: 120%;
height: 0;
border-top: 1px dashed @black;
}
&:first-child::after {
display: none;
}
&.active::after {
border-top: 1px solid @black;
}
}
}
.cul-tip {
.sub-text-mixins();
color: @gray-5;
margin-top: 24px;
}
src/views/Consultant/Success/index.vue 0 → 100644
View file @ 972c1cc1
<template>
<div class="container">
<div class="cul-hd">
<div class="cul-hd-rec">
<h4 class="cul-hd-rec-title">聘请成功</h4>
<small class="cul-hd-rec-sub">立刻开始填写问卷吧</small>
</div>
<card title="1" footer="1">
<h5 class="cul-hd-card-title" slot="header">
仅需一步
<br />
开启顾问服务，定制保险方案
</h5>
<div class="cul-hd-card-body">
<div class="cul-process">
<div class="cul-process-item" v-for="(item, index) in processList" :key="index">
<svg-icon :icon-class="item.icon" />
<p>{{ item.sub }}</p>
</div>
</div>
<div class="cul-tip">
为了给您提供更精准的保险定制服务，请花1分钟填写问卷，让顾问更了解您。
</div>
</div>
<cr-button
type="warning"
size="large"
block
slot="footer"
@click="$router.push('/consultant/question')"
>
开始填写问卷
</cr-button>
</card>
</div>
<tabbar />
</div>
</template>
<script>
import Tabbar from "@/components/Tabbar";
import Card from "@/components/Card";
export default {
name: "ConsultantSuccess",
components: {
Tabbar,
Card
},
data() {
return {
processList: [
{ icon: "package-active", sub: "聘请成功", active: true },
{ icon: "page", sub: "完成问卷" },
{ icon: "flag", sub: "顾问服务" }
]
};
},
mounted() {}
};
</script>
<style lang="less" src="./index.less" scoped></style>
src/views/Consultant/index.less 0 → 100644
View file @ 972c1cc1
@import "../../style/var.less";
@import "../../style/mixins.less";
.item-show-mixin {
text-align: center;
.svg-icon {
height: 48px;
width: 48px;
}
h5 {
display: block;
margin: 10px 0 4px;
font-size: @font-size-14;
font-weight: @font-weight-bold;
line-height: @line-height-sm;
color: @black;
}
p {
display: block;
.sub-text-mixins();
color: @black;
}
}
.container {
overflow: hidden;
background-color: @background-color;
&::after {
content: " ";
display: block;
height: 60px;
}
}
.cul-hd {
background: url("../../assets/images/consultant/bg.png") top no-repeat;
background-size: contain;
padding: 10px 16px;
position: relative;
&-logo {
position: absolute;
left: -5px;
top: 26px;
width: 100px;
height: 32px;
}
&-rec {
text-align: center;
margin: 128px 0 109px;
&-title {
display: block;
font-size: @font-size-14;
font-weight: @font-weight-bold;
line-height: 18px;
color: #000;
}
&-sub {
display: block;
font-size: @font-size-11;
color: #000;
line-height: 18px;
}
}
&-card {
box-shadow: 0px 5px 25px 0px rgba(0, 0, 0, 0.07);
border-radius: 44px 14px 14px 14px;
padding: 20px 20px 32px;
background-color: #fff;
&-title {
.sub-text-mixins();
}
.cr-button {
height: @button-large-height + 2;
line-height: @button-large-line-height + 2;
font-size: @font-size-16;
}
&-foot {
position: relative;
}
}
&-discount {
position: absolute;
right: 0;
top: -19px;
background: linear-gradient(
180deg,
rgba(253, 132, 132, 1) 0%,
rgba(249, 76, 76, 1) 100%
);
border-bottom-left-radius: 4px !important;
font-size: 11px !important;
strong {
font-weight: 600;
margin-right: 3px;
}
del {
color: @red;
}
span {
color: @white;
}
em {
font-style: normal;
color: #FFC600;
}
}
&-progress {
padding: 12px 17px 40px;
}
&-service {
display: flex;
justify-content: space-around;
padding: 20px 0;
&-item {
.item-show-mixin();
}
}
&-stock {
&-title {
.sub-text-mixins();
text-align: center;
strong {
color: @black;
font-weight: @font-weight-bold;
}
}
}
}
.cul-det {
.card {
padding: 20px 16px;
@{deep} &-body {
margin-bottom: 0;
}
}
@{deep} .collapse-item-content {
font-size: @font-size-12;
}
}
.cul-odds {
&-sign {
display: flex;
justify-content: space-around;
padding: 10px 0 20px;
&-item {
&:nth-child(2) {
position: relative;
&::before,
&::after {
content: " ";
display: block;
position: absolute;
top: 10px;
width: 1px;
height: 111px;
background-color: #F6F6F6;
}
&::after {
right: -27px;
}
&::before {
left: -27px;
}
}
.item-show-mixin();
.svg-icon {
width: 56px;
height: 56px;
}
h5 {
font-size: @font-size-16;
}
p:last-child {
font-weight: @font-weight-bold;
}
}
}
&-list {
&-item {
margin-bottom: 5px;
}
&-title {
display: flex;
color: @black;
font-weight: @font-weight-bold;
padding: @padding-sm 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;
}
}
&-content {
color: @gray-5;
font-size: @font-size-12;
background-color: @gray-1;
border-radius: @border-radius-md;
padding: 16px;
line-height: @line-height-sm + 2;
.svg-icon {
height: 13px;
width: 13px;
margin-right: 2px;
}
&-item {
display: flex;
justify-content: space-between;
margin-bottom: 8px;
&:last-child {
margin-bottom: 0;
}
}
&-title {
font-weight: @font-weight-bold;
}
&-txt {
margin-left: 8px;
width: 216px;
}
}
}
}
\ No newline at end of file
src/views/Consultant/index.vue 0 → 100644
View file @ 972c1cc1
<template>
<div class="container">
<div class="cul-hd">
<img src="../../assets/logo-top.png" alt="logo" class="cul-hd-logo" />
<div class="cul-hd-rec">
<h4 class="cul-hd-rec-title">最高节省50%保费</h4>
<small class="cul-hd-rec-sub">帮你量身选保险</small>
</div>
<div class="cul-hd-card">
<div class="cul-hd-card-title">您将获得的服务</div>
<div class="cul-hd-service">
<div class="cul-hd-service-item" v-for="(item, index) in serviceList" :key="index">
<svg-icon :icon-class="item.icon" />
<h5>{{ item.title }}</h5>
<p>{{ item.sub }}</p>
</div>
</div>
<div class="cul-hd-stock">
<h4 class="cul-hd-stock-title">
还剩
<strong>126</strong>份
</h4>
<div class="cul-hd-progress">
<cr-progress
:show-pivot="false"
stroke-width="6"
color="#FFC842"
track-color="#F9F3F3"
:percentage="25"
/>
</div>
</div>
<div class="cul-hd-card-foot">
<cr-button type="warning" block @click="$router.push('/consultant/success')">
0.99元聘请
</cr-button>
<cr-tag class="cul-hd-discount" shape="round">
<strong>限时优惠</strong>
<del>
<span>原价</span>
<em>199</em>
<span>元</span>
</del>
</cr-tag>
</div>
</div>
</div>
<div class="cul-det">
<card title="想买保险，你是不是也有这些疑问?">
<cr-image src="@/assets/images/consultant/intro.png" width="100%" height="auto" />
</card>
<card title="芒果保险·1对1保险顾问来帮您?">
<div class="cul-odds-sign">
<div class="cul-odds-sign-item" v-for="(item, index) in oddsList" :key="index">
<svg-icon :icon-class="item.icon" />
<h5>{{ item.title }}</h5>
<p v-for="(it, index) in item.sub" :key="index">{{ it }}</p>
</div>
</div>
<div class="cul-odds-list">
<div class="cul-odds-list-item" v-for="(item, index) in oddsInsureList" :key="index">
<div class="cul-odds-list-title">
<i class="cul-odds-list-title-icon">{{ index + 1 }}</i>
<span class="cul-odds-list-title-txt">{{ item.title }}</span>
</div>
<div class="cul-odds-list-content">
<div class="cul-odds-list-content-item" v-for="(it, idx) in item.children" :key="idx">
<div class="cul-odds-list-content-title">
<svg-icon icon-class="check-circle" />
{{ it[0] }}
</div>
<div class="cul-odds-list-content-txt">{{ it[1] }}</div>
</div>
</div>
</div>
</div>
</card>
<cps-qa :qa-data="qaInfo" :more="false" />
</div>
<tabbar />
</div>
</template>
<script>
import Tabbar from "@/components/Tabbar";
import Card from "@/components/Card";
import Collapse from "@/components/Collapse";
import CpsQa from "../Goods/Detail/modules/CpsQA";
export default {
name: "Consultant",
components: {
Tabbar,
Card,
CpsQa,
// eslint-disable-next-line
Collapse
},
data() {
return {
serviceList: [
{ icon: "team", title: "资深", sub: "保险精算团队" },
{ icon: "card", title: "专属", sub: "保险顾问" },
{ icon: "computer", title: "全程", sub: "一站式服务" }
],
oddsList: [
{ icon: "ticket-shadow", title: "省钱", sub: ["最高节省", "50%保费"] },
{ icon: "shield-shadow", title: "放心", sub: ["中立客观", "量身定制"] },
{
icon: "ok-shadow",
title: "专业",
sub: ["条款解读", "有效投保", "协助理赔"]
}
],
oddsInsureList: [
{
title: "投保前",
children: [
["全方位评估:", "360°筛查、识别、评估您的家庭风险"],
[
"量身筛选:",
"根据您的自身情况，分析对比几百款产品，选出最适合的保障方案，最高节省50%保费"
],
["保单诊断:", "全面评估已有保单，中立、客观的给您提供针对性的意见 "]
]
},
{
title: "投保中",
children: [
["条款解读:", "为您解释复杂难懂的条款"],
["有效投保:", "为您做好健康告知，做到有效投保"]
]
},
{
title: "省钱",
children: [["协助理赔:", "申请理赔时，理赔专家全程协助"]]
}
],
qaInfo: [
{
q: "有了社保，还需要买保险吗？",
a: `<p style="margin-bottom: 5px;">需要的。社保是基础保障，优势是覆盖范围广，劣势是抵御风险能力有限，社保报销外的自付部分，可以用商业保险来保障。</p>
<p style="margin-bottom: 5px;">比如【百万医疗险】的作用是补充社保，报销因大病造成的高额医疗负担；</p>
<p style="margin-bottom: 5px;">比如【重大疾病险】的作用是弥补因病造成的收入损失、维持家庭正常运转的成本；</p>
<p style="margin-bottom: 5px;">比如【意外险】的作用是保障意外风险，弥补家庭劳动力确实造成的收入损失。</p>
<p style="margin-bottom: 5px;">比如【寿险】的作用是身故赔付，是对家庭责任的延续。</p>
`
},
{
q: "我是小白，买保险应该怎么买？",
a: `<p style="margin-bottom: 5px;">健康类保险最基本的分为【医疗险】【重疾险】【意外险】【定期寿险】四类。</p>
<p style="margin-bottom: 5px;">【医疗险】通常需要提供“医疗票据”实报实销，赔付的保险金保障了因“疾病”、“意外”产生的医疗费用。</p>
<p style="margin-bottom: 5px;">【重疾险】通常需要提供“确诊证明”一次性获得赔付的保险金，前提是罹患的重大疾病在合同约定内。</p>
<p style="margin-bottom: 5px;">【意外险】通常需要提供“身故证明”或“致残证明”获得赔付的保险金，前提是“身故”、“致残”是因意外事件导致。</p>
<p style="margin-bottom: 5px;">【定期寿险】通常需要提供“身故证明”一次性赔付，赔付的保险金在一定程度上，缓解了家庭因被保人身故导致的经济压力。</p>
`
},
{
q: "百万医疗险和重大疾病险有什么区别？",
a: `<p style="margin-bottom: 5px;">【医疗险】和【重疾险】的区别主要有2种。</p>
<p style="margin-bottom: 5px;">一、【医疗险】是报销型，合理医疗费花多少报多少。<br />
【重疾险】是给付型，确诊后即可获得赔付，买多少保额赔多少钱。</p>
<p style="margin-bottom: 5px;"> 二、【医疗险】的本质是应对医疗支出。<br />
【重疾险】的本质是弥补因病导致的收入损失。</p>
`
},
{
q: "我是中低收入，应该怎么买保险？",
a: `<p style="margin-bottom: 5px;">对于大部分家庭来讲，每年比较合理的保费支出占可支配收入的5%~10%。</p>
<p style="margin-bottom: 5px;">低收入家庭：建议配置【医疗险】+【意外险】</p>
<p style="margin-bottom: 5px;">中收入家庭：建议酌情配置【医疗险】+【重疾险】+【意外险】</p>
<p style="margin-bottom: 5px;">有条件的家庭：可以配置【高端医疗险】+【重疾险】+【意外险】+【寿险】</p>`
},
{
q: "“消费型保险”和“返还型保险”是什么意思？",
a: `<p style="margin-bottom: 5px;">简单讲，“消费型保险”在合同到期后不返还保费，“返还型保险”在合同到期后返还保费。</p>
<p style="margin-bottom: 5px;">【消费型保险】重点在“保障”，合同期内发生风险，保险公司赔偿保险金，合同期外发生风险，保险公司不赔偿也不退回保费。</p>
<p style="margin-bottom: 5px;">【返还型保险】重点在“返还”，合同期内发生风险，保险公司赔偿保险金，合同到期未赔偿，保险公司退回保费。</p>
<p style="margin-bottom: 5px;">两种类型的保险各有优势，而且“返回型保险”种类繁多，建议投保人咨询“闪电保险1对1保险顾问”进行详细了解。</p>
`
},
{
q: "医疗险可以重复购买吗?",
a: `<p style="margin-bottom: 5px;">不建议重复购买。</p>
<p style="margin-bottom: 5px;">医疗险属于报销型，原则上报销后的医疗费不得高于已支付的医疗费。</p>
<p style="margin-bottom: 5px;">医疗险在报销时，通常由一家保险公司报销，如果达到报销额度上限还未报销完，且购买其他医疗险，可由第二家保险公司接着报销。</p>
<p style="margin-bottom: 5px;">现在常见的【百万医疗险】保额可达600万，基本上可以覆盖所有的医疗费用。</p>`
}
]
};
},
mounted() {}
};
</script>
<style lang="less" src="./index.less" scoped></style>
src/views/Consultant/modules/AiTestTip.vue 0 → 100644
View file @ 972c1cc1
<template functional>
<div class="ai-test">
<div class="ai-test-tip">
<h5>不知道怎么买保险</h5>
<small>试一试智能风险评测，推荐最适合你的保险</small>
</div>
<cr-row class="ai-test-cell" type="flex" align="center">
<cr-col span="5" class="ai-test-cell-image">
<cr-image width="60px" height="68px" src="@/assets/images/goods/ai-mongo.png" />
</cr-col>
<div class="ai-test-cell-title">
<h5>智能<span>风险测评</span></h5>
<small>AI小果：为您提供30s快速测评</small>
</div>
<div class="ai-test-cell-btn">
<cr-button type="warning">开始测评</cr-button>
</div>
</cr-row>
</div>
</template>
<script>
export default {
name: "AiTestTip"
};
</script>
<style lang="less" scoped>
@import "../../../style/var.less";
@import "../../../style/mixins.less";
.ai-test {
padding: 20px 16px 25.5px;
&-tip {
text-align: center;
.cell-title-mixin();
margin-bottom: @padding-md;
}
&-cell {
background-color: @white;
border-radius: @border-radius-md;
padding: 0 0 0 @padding-xs;
height: 72px;
&-image {
align-self: flex-end;
.cr-image {
display: block;
margin: 0 auto;
}
}
&-title {
padding: 8px 10px 0 5px;
.cell-title-mixin();
h5 {
margin: 0;
}
span {
color: @orange-dark;
font-weight: bold;
}
}
&-btn {
width: 76px;
.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;
}
}
}
}
</style>
src/views/Goods/Detail/AIDetail.vue
View file @ 972c1cc1
...@@ -18,6 +18,7 @@ ...@@ -18,6 +18,7 @@
<protocol-read <protocol-read
v-model="formData.pact" v-model="formData.pact"
:cell-data="noticeCellData" :cell-data="noticeCellData"
:protocol-data="protocolData"
@cell-click="openIframePupop" @cell-click="openIframePupop"
/> />
</div> </div>
...@@ -46,12 +47,13 @@ ...@@ -46,12 +47,13 @@
:url="pupopData.url" :url="pupopData.url"
> >
<cps-process-detail v-if="currentPupopIndex === 5" :process-data="processDetail" /> <cps-process-detail v-if="currentPupopIndex === 5" :process-data="processDetail" />
<cps-rate v-if="currentPupopIndex === 6" /> <cps-rate v-if="currentPupopIndex === 6" :rate-data="rateInfo" :is-ai="true" />
</popup-with-iframe> </popup-with-iframe>
<go-insure-dialog <go-insure-dialog
v-model="goInsureState" v-model="goInsureState"
:title="headerInfo.title" :title="headerInfo.title"
:pay-data="goodBuyModalInfo" :pay-data="goodBuyModalInfo"
:protocol-data="protocolData"
/> />
</div> </div>
</template> </template>
...@@ -82,7 +84,7 @@ import AutoDeduct from "./modules/AutoDeduct"; ...@@ -82,7 +84,7 @@ import AutoDeduct from "./modules/AutoDeduct";
import ProtocolRead from "./modules/ProtocolRead"; import ProtocolRead from "./modules/ProtocolRead";
import NavTab from "./modules/NavTab"; import NavTab from "./modules/NavTab";
import Detail from "@/api/detail.zhongan.yiliaobaozhang"; import Detail from "@/api/detail.zhongan.yiwai";
export default { export default {
name: "GoodsDetail-CII", name: "GoodsDetail-CII",
...@@ -151,7 +153,7 @@ export default { ...@@ -151,7 +153,7 @@ export default {
methods: { methods: {
openIframePupop(index) { openIframePupop(index) {
if (index === 4) { if (index === 4) {
this.$router.push("/goods/plan"); this.$router.push({ path: "/goods/plan", query: { type: this.type } });
return; return;
} }
this.currentPupopIndex = index; this.currentPupopIndex = index;
......
src/views/Goods/Detail/CIIDetail.vue
View file @ 972c1cc1
...@@ -151,7 +151,7 @@ export default { ...@@ -151,7 +151,7 @@ export default {
methods: { methods: {
openIframePupop(index) { openIframePupop(index) {
if (index === 4) { if (index === 4) {
this.$router.push("/goods/plan"); this.$router.push({ path: "/goods/plan", query: { type: this.type } });
return; return;
} }
this.currentPupopIndex = index; this.currentPupopIndex = index;
......
src/views/Goods/Detail/LIDetail.vue
View file @ 972c1cc1
...@@ -37,7 +37,7 @@ ...@@ -37,7 +37,7 @@
</card> </card>
<cps-case :case-data="caseInfo" /> <cps-case :case-data="caseInfo" />
<div id="det_process"> <div id="det_process">
<cps-process :process-data="processDetail" @click="openIframePupop(5)" /> <cps-process :process-data="processDetail" @click="openIframePupop(5)" :more="false" />
</div> </div>
<div id="det_notice"> <div id="det_notice">
<protocol-read <protocol-read
...@@ -80,7 +80,6 @@ ...@@ -80,7 +80,6 @@
:content="pupopData.content" :content="pupopData.content"
:url="pupopData.url" :url="pupopData.url"
> >
<cps-process-detail v-if="currentPupopIndex === 5" :process-data="processDetail" />
<cal-insured-fee v-if="currentPupopIndex === 6" /> <cal-insured-fee v-if="currentPupopIndex === 6" />
</popup-with-iframe> </popup-with-iframe>
</div> </div>
...@@ -103,7 +102,6 @@ import CpsCase from "./modules/CpsCase"; ...@@ -103,7 +102,6 @@ import CpsCase from "./modules/CpsCase";
import CpsProcess from "./modules/CpsProcess"; import CpsProcess from "./modules/CpsProcess";
import CpsQa from "./modules/CpsQA"; import CpsQa from "./modules/CpsQA";
import PopupWithIframe from "@/components/PopupWithIframe"; import PopupWithIframe from "@/components/PopupWithIframe";
import CpsProcessDetail from "./modules/CpsProcessDetail";
import CalInsuredFee from "./modules/CalInsuredFee"; import CalInsuredFee from "./modules/CalInsuredFee";
import PlanTip from "./modules/PlanTip"; import PlanTip from "./modules/PlanTip";
import ProtocolRead from "./modules/ProtocolRead"; import ProtocolRead from "./modules/ProtocolRead";
...@@ -128,7 +126,6 @@ export default { ...@@ -128,7 +126,6 @@ export default {
Copyright, Copyright,
PopupWithIframe, PopupWithIframe,
GoodAction, GoodAction,
CpsProcessDetail,
PlanTip, PlanTip,
NavTab, NavTab,
ProtocolRead, ProtocolRead,
...@@ -161,7 +158,7 @@ export default { ...@@ -161,7 +158,7 @@ export default {
methods: { methods: {
openIframePupop(index) { openIframePupop(index) {
if (index === 4) { if (index === 4) {
this.$router.push("/goods/plan"); this.$router.push({ path: "/goods/plan", query: { type: this.type } });
return; return;
} }
this.currentPupopIndex = index; this.currentPupopIndex = index;
......
src/views/Goods/Detail/MIDetail.vue
View file @ 972c1cc1
...@@ -142,7 +142,7 @@ export default { ...@@ -142,7 +142,7 @@ export default {
methods: { methods: {
openIframePupop(index) { openIframePupop(index) {
if (index === 4) { if (index === 4) {
this.$router.push("/goods/plan"); this.$router.push({ path: "/goods/plan", query: { type: this.type } });
return; return;
} }
this.currentPupopIndex = index; this.currentPupopIndex = index;
......
src/views/Goods/Detail/modules/CpsCase.vue
View file @ 972c1cc1
...@@ -13,7 +13,7 @@ ...@@ -13,7 +13,7 @@
<div class="cps-demo-list"> <div class="cps-demo-list">
<div class="cps-demo-list-item" v-for="(item, index) in props.caseData.list" :key="index"> <div class="cps-demo-list-item" v-for="(item, index) in props.caseData.list" :key="index">
<div class="cps-demo-list-item-title">{{ item.title }}</div> <div class="cps-demo-list-item-title">{{ item.title }}</div>
<div class="cps-demo-list-item-content">{{ item.event }}</div> <div class="cps-demo-list-item-content" v-html="item.event"></div>
</div> </div>
</div> </div>
</div> </div>
......
src/views/Goods/Detail/modules/CpsProcess.vue
View file @ 972c1cc1
<template functional> <template functional>
<card title="理赔流程" :option="['了解更多理赔信息']" @option-click="listeners.click"> <card
title="理赔流程"
:option="props.more ? ['了解更多理赔信息'] : ''"
@option-click="listeners.click"
>
<div class="cps-process-list"> <div class="cps-process-list">
<div class="cps-process-list-item" v-for="(item, index) in props.processData" :key="index"> <div class="cps-process-list-item" v-for="(item, index) in props.processData" :key="index">
<div class="cps-process-list-item-title">{{ index + 1 }}</div> <div class="cps-process-list-item-title">{{ index + 1 }}</div>
...@@ -21,6 +25,10 @@ export default { ...@@ -21,6 +25,10 @@ export default {
default() { default() {
return []; return [];
} }
},
more: {
type: Boolean,
default: true
} }
} }
}; };
......
src/views/Goods/Detail/modules/CpsQA.vue
View file @ 972c1cc1
<template functional> <template functional>
<card title="常见问题" class="qa-header"> <card title="常见问题" class="qa-header">
<collapse :collapse-data="props.qaData" :more-btn="true" /> <collapse :collapse-data="props.qaData" :more-btn="props.more" />
</card> </card>
</template> </template>
<script> <script>
export default { export default {
name: "CpsQA" name: "CpsQA",
props: {
qaData: {
type: Array,
default() {
return [];
}
},
more: {
type: Boolean,
default: true
}
}
}; };
</script> </script>
......
src/views/Goods/Detail/modules/CpsRate.vue
View file @ 972c1cc1
...@@ -2,14 +2,14 @@ ...@@ -2,14 +2,14 @@
<div class="rate-container"> <div class="rate-container">
<cr-sticky class="rate-head"> <cr-sticky class="rate-head">
<cr-radio-btn v-model="titleIndex" :radio-data="titleOptions" /> <cr-radio-btn v-model="titleIndex" :radio-data="titleOptions" />
<cr-tabbar v-model="amountIndex" active-color="#333" inactive-color="#666"> <cr-tabbar v-model="amountIndex" active-color="#333" inactive-color="#666" v-if="!isAi">
<cr-tabbar-item v-for="(item, index) in amountOptions" :key="index"> <cr-tabbar-item v-for="(item, index) in amountOptions" :key="index">
{{ item }} {{ item }}
</cr-tabbar-item> </cr-tabbar-item>
</cr-tabbar> </cr-tabbar>
</cr-sticky> </cr-sticky>
<div class="rate-body"> <div class="rate-body">
<table class="rate-table"> <table class="table rate-table rate-table-padding" v-if="!isAi">
<thead> <thead>
<tr> <tr>
<th style="width: 40%">投保年龄</th> <th style="width: 40%">投保年龄</th>
...@@ -25,29 +25,56 @@ ...@@ -25,29 +25,56 @@
</tr> </tr>
</tbody> </tbody>
</table> </table>
<table class="table rate-table" v-else>
<thead>
<tr>
<th style="width: 25%;">投保年龄</th>
<th style="width: 25%">100万保额</th>
<th style="width: 25%">50万保额</th>
<th style="width: 25%">10万保额</th>
</tr>
</thead>
<tbody>
<tr v-for="(item, index) in rateData[0].list" :key="index">
<th>{{ item[0] }}</th>
<td>{{ item[1] || "-" }}</td>
<td>{{ item[2] || "-" }}</td>
<td>{{ item[3] || "-" }}</td>
</tr>
</tbody>
</table>
</div> </div>
</div> </div>
</template> </template>
<script> <script>
import crRadioBtn from "@/components/CrRadioBtn"; import crRadioBtn from "@/components/CrRadioBtn";
import detail from "@/api/detail.huatai.zhongjixian";
const { rateInfo } = detail;
export default { export default {
name: "GoodsDetail", name: "GoodsDetail",
components: { components: {
crRadioBtn crRadioBtn
}, },
props: {
rateData: {
type: Array,
default() {
return [];
}
},
isAi: {
type: Boolean,
default: false
}
},
data() { data() {
return { return {
rateInfo,
titleIndex: 0, titleIndex: 0,
amountIndex: 0 amountIndex: 0
}; };
}, },
computed: { computed: {
titleOptions() { titleOptions() {
return this.rateInfo.map((item, index) => { return this.rateData.map((item, index) => {
return { return {
label: item.title, label: item.title,
value: index value: index
...@@ -55,17 +82,25 @@ export default { ...@@ -55,17 +82,25 @@ export default {
}); });
}, },
amountOptions() { amountOptions() {
const { rateInfo, titleIndex } = this; const { rateData, titleIndex } = this;
const _length = rateInfo[titleIndex].list.length; if (this.isAi) {
return rateInfo[titleIndex].list.map((item, index) => `${_length - index}0万保额`); return [];
} else {
const _length = rateData[titleIndex].list.length;
return rateData[titleIndex].list.map((item, index) => `${_length - index}0万保额`);
}
}, },
listOptions() { listOptions() {
const { rateInfo, titleIndex, amountIndex } = this; if (this.isAi) {
return [];
} else {
const { rateData, titleIndex, amountIndex } = this;
return { return {
age: rateInfo[titleIndex].age, age: rateData[titleIndex].age,
list: rateInfo[titleIndex].list[amountIndex] list: rateData[titleIndex].list[amountIndex]
}; };
} }
}
}, },
methods: {} methods: {}
}; };
...@@ -120,39 +155,18 @@ export default { ...@@ -120,39 +155,18 @@ export default {
.rate-table { .rate-table {
margin: 0; margin: 0;
width: 100%; width: 100%;
&-padding {
thead { thead {
th { 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 { &:first-child {
border-top-left-radius: @border-radius-lg;
border-bottom-left-radius: @border-radius-lg;
padding-left: 30px; padding-left: 30px;
} }
&:last-child {
border-top-right-radius: @border-radius-lg;
border-bottom-right-radius: @border-radius-lg;
}
} }
} }
tbody { tbody {
th { 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; padding-left: 30px;
} }
td {
color: @black;
font-size: @font-size-12;
padding: @padding-sm + 2 @padding-md + 2;
text-align: left;
} }
} }
} }
......
src/views/Goods/Detail/modules/DetailFooter.vue
View file @ 972c1cc1
...@@ -4,7 +4,10 @@ ...@@ -4,7 +4,10 @@
<p <p
v-for="(item, index) in props.companyInfo" v-for="(item, index) in props.companyInfo"
:key="index" :key="index"
:class="{ 'det-footer-offset': item.offset }" :class="{
'det-footer-offset': item.offset,
'det-footer-indent': !item.offset
}"
> >
{{ item.content }} {{ item.content }}
</p> </p>
...@@ -38,6 +41,10 @@ export default { ...@@ -38,6 +41,10 @@ export default {
&-offset { &-offset {
padding-left: 60px; padding-left: 60px;
} }
&-indent {
padding-left: 60px;
text-indent: -60px;
}
&-logo { &-logo {
text-align: center; text-align: center;
margin-bottom: 19px; margin-bottom: 19px;
......
src/views/Goods/Detail/modules/GoInsureDialog.vue
View file @ 972c1cc1
<template> <template>
<modal v-model="show" :closeable="true" cancel-btn="" confirm-btn="好的 继续" @confirm="go"> <modal v-model="show" :closeable="true" cancel-btn="" confirm-btn="好的 继续" @confirm="go">
<h4 slot="title" class="pay-title">立即拥有<br />{{ title }}</h4> <h4 slot="title" class="pay-title">立即拥有<br />{{ title }}</h4>
<compactCellGroup class="pay-det" :cell-data="payCellData" :text-bold="true" /> <compactCellGroup class="pay-det" :cell-data="payData" :text-bold="true" />
<slot> <slot>
<div class="pay-tip">*不满意可随时退保</div> <div class="pay-tip">*不满意可随时退保</div>
<div class="pay-protocol"> <div class="pay-protocol">
<div class="pay-protocol-tip">投保前请阅读</div> <div class="pay-protocol-tip">投保前请阅读</div>
<div class="pay-protocol-link"> <div class="pay-protocol-link">
<a href="javascript:;" @click="openIframePupop(0)">保险条款</a> <a
<i></i> href="javascript:;"
<a href="javascript:;" @click="openIframePupop(1)">健康告知</a> @click="openIframePupop(item.id)"
<i></i> v-for="(item, index) in protocolData"
<a href="javascript:;" @click="openIframePupop(2)">投保须知与声明</a> :key="index"
<i></i> >
<a href="javascript:;" @click="openIframePupop(3)">服务协议</a> {{ item.title }}
</a>
</div> </div>
</div> </div>
</slot> </slot>
...@@ -41,18 +42,22 @@ export default { ...@@ -41,18 +42,22 @@ export default {
default() { default() {
return []; return [];
} }
},
protocolData: {
type: Array,
default() {
return [
{ title: "保险条款", id: 0 },
{ title: "健康告知", id: 1 },
{ title: "投保须知与声明", id: 2 },
{ title: "服务协议", id: 3 }
];
}
} }
}, },
data() { data() {
return { return {
show: false, show: false
payCellData: [
{ title: "首月保费", value: "3元" },
{
title: "次月保费",
value: "5.6元/月起（共11期）"
}
]
}; };
}, },
watch: { watch: {
...@@ -87,32 +92,40 @@ export default { ...@@ -87,32 +92,40 @@ export default {
&-det { &-det {
padding-left: 34px; padding-left: 34px;
position: relative; position: relative;
@{deep} .cr-cell {
position: relative;
overflow: initial;
&::after, &::after,
&::before { &::before {
content: " "; content: " ";
display: block; display: block;
position: absolute; position: absolute;
left: 18px; }
&::before {
left: -18px;
top: 7px;
width: 8px; width: 8px;
height: 8px; height: 8px;
border-radius: @border-radius-max; border-radius: @border-radius-max;
z-index: 201;
border: 1px solid @black; border: 1px solid @black;
background-color: @white;
} }
&::before { &:first-child::before {
background-color: @orange-light; background-color: @orange-light;
top: 24px;
} }
&::after { &::after {
bottom: 26.5px; left: -13px;
} top: 16px;
@{deep} & > div:first-child { height: 20px;
position: absolute;
left: 22.5px;
top: 35px;
height: 14px;
width: 0; width: 0;
z-index: 200;
border-right: 1px dotted @gray-4; border-right: 1px dotted @gray-4;
} }
&:last-child::after {
display: none;
}
}
} }
&-tip { &-tip {
font-size: @font-size-12; font-size: @font-size-12;
...@@ -132,14 +145,18 @@ export default { ...@@ -132,14 +145,18 @@ export default {
a { a {
font-size: @font-size-12; font-size: @font-size-12;
vertical-align: middle; vertical-align: middle;
} &::after {
i {
display: inline-block; display: inline-block;
content: " ";
width: 0; width: 0;
height: 12px; height: 12px;
border-right: 1px @blue solid; border-right: 1px @blue solid;
vertical-align: middle; margin: 0 3px 0 1px;
margin: 0 3px; vertical-align: -2px;
}
&:last-child::after {
display: none;
}
} }
} }
} }
......
src/views/Goods/Detail/modules/InsurePersonForm.vue
View file @ 972c1cc1
...@@ -152,6 +152,9 @@ export default { ...@@ -152,6 +152,9 @@ export default {
overflow: initial; overflow: initial;
align-items: baseline !important; align-items: baseline !important;
margin-bottom: 0 !important; margin-bottom: 0 !important;
.radio-btn {
margin-bottom: 0;
}
@{deep} .cr-cell { @{deep} .cr-cell {
&__title { &__title {
width: 31%; width: 31%;
......
src/views/Goods/Detail/modules/ProtocolRead.vue
View file @ 972c1cc1
...@@ -12,13 +12,14 @@ ...@@ -12,13 +12,14 @@
</template> </template>
</cr-field> </cr-field>
<div class="insure-form-pact-link"> <div class="insure-form-pact-link">
<a href="javascript:;" @click="openIframe(0)">保险条款</a> <a
<i></i> href="javascript:;"
<a href="javascript:;" @click="openIframe(1)">健康告知</a> @click="openIframe(item.id)"
<i></i> v-for="(item, index) in protocolData"
<a href="javascript:;" @click="openIframe(2)">投保须知与声明</a> :key="index"
<i></i> >
<a href="javascript:;" @click="openIframe(3)">服务协议</a> {{ item.title }}
</a>
</div> </div>
</div> </div>
</template> </template>
...@@ -49,6 +50,17 @@ export default { ...@@ -49,6 +50,17 @@ export default {
return ["查看完整费率表"]; return ["查看完整费率表"];
} }
}, },
protocolData: {
type: Array,
default() {
return [
{ title: "保险条款", id: 0 },
{ title: "健康告知", id: 1 },
{ title: "投保须知与声明", id: 2 },
{ title: "服务协议", id: 3 }
];
}
},
value: null, value: null,
cellData: { cellData: {
type: Array, type: Array,
...@@ -109,12 +121,18 @@ export default { ...@@ -109,12 +121,18 @@ export default {
align-items: center; align-items: center;
a { a {
font-size: @font-size-11; font-size: @font-size-11;
} &::after {
i { display: inline-block;
content: " ";
width: 0; width: 0;
height: 12px; height: 12px;
border-right: 1px @blue solid; border-right: 1px @blue solid;
margin: 0 3px; margin: 0 3px 0 1px;
vertical-align: -2px;
}
&:last-child::after {
display: none;
}
} }
} }
} }
......
src/views/Goods/Plan/index.vue
View file @ 972c1cc1
...@@ -18,17 +18,19 @@ ...@@ -18,17 +18,19 @@
<script> <script>
import PopupWithIframe from "@/components/PopupWithIframe"; import PopupWithIframe from "@/components/PopupWithIframe";
import card from "@/components/Card"; import card from "@/components/Card";
import detail from "@/api/detail.huatai.zhongjixian"; import cii from "@/api/detail.huatai.zhongjixian";
const { planInfo } = detail; import li from "@/api/detail.huagui.shouxian";
import mi from "@/api/detail.taikang.yiliaobaozhang";
import ai from "@/api/detail.zhongan.yiwai";
export default { export default {
name: "GoodsDetail", name: "GoodsPlan",
components: { components: {
card, card,
PopupWithIframe PopupWithIframe
}, },
data() { data() {
return { return {
planInfo, planInfo: [],
popupShow: false, popupShow: false,
currentPupopIndex: null currentPupopIndex: null
}; };
...@@ -43,6 +45,25 @@ export default { ...@@ -43,6 +45,25 @@ export default {
}; };
} }
}, },
mounted() {
const detailType = this.$route.query.type;
switch (detailType) {
case "cii":
this.planInfo = cii.planInfo;
break;
case "li":
this.planInfo = li.planInfo;
break;
case "mi":
this.planInfo = mi.planInfo;
break;
case "ai":
this.planInfo = ai.planInfo;
break;
default:
break;
}
},
methods: { methods: {
openIframePupop(index) { openIframePupop(index) {
this.currentPupopIndex = index; this.currentPupopIndex = index;
......
src/views/Policy/Add/index.less
View file @ 972c1cc1
...@@ -82,7 +82,7 @@ ...@@ -82,7 +82,7 @@
color: @black; color: @black;
} }
.pay&-protocol { .pay-protocol {
margin-bottom: 8px; margin-bottom: 8px;
&-tip { &-tip {
font-size: @font-size-12; font-size: @font-size-12;
......
src/views/Policy/Detail/index.vue
View file @ 972c1cc1
...@@ -148,6 +148,8 @@ ...@@ -148,6 +148,8 @@
<span>如遇问题请拨打客服电话</span> <span>如遇问题请拨打客服电话</span>
<span>00000000000</span> <span>00000000000</span>
</div> </div>
<act-banner />
<rec-good />
<insurance-recommend class="Pdb-recommend" /> <insurance-recommend class="Pdb-recommend" />
</div> </div>
</div> </div>
...@@ -155,11 +157,15 @@ ...@@ -155,11 +157,15 @@
<script> <script>
import point from "@/assets/images/policy/detail/point@2x.png"; import point from "@/assets/images/policy/detail/point@2x.png";
import InsuranceRecommend from "../modules/InsuranceRecommend"; import InsuranceRecommend from "../modules/InsuranceRecommend";
import ActBanner from "../modules/ActBanner";
import RecGood from "../modules/RecGood";
export default { export default {
name: "PolicyList", name: "PolicyList",
components: { components: {
InsuranceRecommend InsuranceRecommend,
ActBanner,
RecGood
}, },
data() { data() {
return { return {
......
src/views/Policy/modules/ActBanner.vue 0 → 100644
View file @ 972c1cc1
<template functional>
<div class="activity-banner">
<div class="activity-banner-item" @click="parent.$router.push('/draw')">
<cr-image src="@/assets/images/policy/draw.png" width="343px" height="60px" />
</div>
</div>
</template>
<script>
export default {
name: "ActBanner",
data() {
return {};
}
};
</script>
<style lang="less" scoped>
.activity-banner {
width: 343px;
margin: 24px auto;
}
</style>
src/views/Policy/modules/RecGood.vue 0 → 100644
View file @ 972c1cc1
<template>
<div class="rec-container">
<card title="" footer="1">
<div class="rec-hd" slot="header">
<div class="rec-hd-title">再买一份{{ title }}<br />构建全面保障</div>
<div class="rec-hd-sub">{{ sub }}</div>
</div>
<div class="rec-sign">
<div class="rec-sign-item" v-for="(item, index) in rec" :key="index">
<cr-image :src="item.img" width="96px" height="98px" />
<p
v-for="(it, index) in item.title"
:key="index"
:class="{ 'rec-sign-item-bold': index === 0 }"
>
{{ it }}
</p>
</div>
</div>
<div class="rec-ft" slot="footer">
<h6 v-if="goodActionInfo.title">
{{ goodActionInfo.title[2] || "" }}
<strong>{{ goodActionInfo.title[0] || "" }}</strong>
{{ goodActionInfo.title[1] || "" }}
<small v-if="goodActionInfo.sub">{{ goodActionInfo.sub }}</small>
</h6>
<cr-button type="warning" size="large" block>立刻开启保障</cr-button>
<div class="rec-ft-tip">
<div class="rec-ft-tip-tag">
由<strong>{{ company }}</strong>
公司承保
</div>
<a href="javascript:;">了解更多</a>
</div>
<div class="rec-person">
<div class="rec-person-item"><svg-icon icon-class="medal" />王*闹</div>
<div class="rec-person-item"><svg-icon icon-class="medal" />183******892</div>
</div>
</div>
</card>
<card title="投保提示">
<ul class="rec-tip">
<li class="rec-tip-item" v-for="(it, index) in notice" :key="index">
<p>{{ it }}</p>
</li>
</ul>
<cr-divider />
<div class="rec-tip-link">
<a
href="javascript:;"
@click="openIframe(item.id)"
v-for="(item, index) in popupArray"
:key="index"
>
{{ item.title }}
</a>
</div>
</card>
</div>
</template>
<script>
import rec from "@/api/policy.rec";
import Card from "@/components/Card";
export default {
name: "RecGood",
components: {
Card
},
data() {
return {
...rec
};
}
};
</script>
<style lang="less" scoped>
@import "../../../style/var.less";
@import "../../../style/mixins.less";
.rec {
&-container {
width: 343px;
margin: 24px auto;
background-color: @white;
overflow: hidden;
border-radius: @border-radius-md;
.card:first-child {
padding-bottom: 0;
}
@{deep} .card-body {
margin-bottom: 0;
}
}
&-hd {
flex: 1;
&-title {
font-size: 24px;
font-weight: @font-weight-bold;
color: #333;
line-height: 33px;
}
&-sub {
font-size: @font-size-12;
font-weight: @font-weight-bold;
color: @orange-dark;
line-height: @line-height-sm;
margin-top: 11px;
}
}
&-ft {
h6 {
margin: 0 0 22px;
text-align: center;
font-size: @font-size-16;
font-weight: @font-weight-bold;
color: @black;
line-height: @line-height-sm;
}
strong {
color: @orange-dark;
font-weight: @font-weight-bold;
font-size: 32px;
}
small {
color: @gray-4;
line-height: @line-height-sm;
font-size: @font-size-12;
margin-left: 10px;
}
.cr-button {
box-shadow: 1px 12px 14px 0px rgba(255, 200, 66, 0.4);
border-radius: @border-radius-max !important;
}
&-tip {
display: flex;
justify-content: space-between;
align-items: center;
margin: 21px 0 7px;
&-tag {
.sub-text-mixins();
strong {
font-size: @font-size-12;
color: @black;
}
}
}
}
&-person {
background-color: @gray-1;
border-radius: @border-radius-sm;
padding: 10px 20px;
&-item {
margin: 9px 0;
font-size: 12px;
line-height: 12px;
color: @black;
font-weight: @font-weight-bold;
.svg-icon {
width: 18px;
height: 18px;
}
&:first-child {
font-size: 16px;
}
}
}
&-sign {
display: flex;
justify-content: space-between;
padding: 10px 0 20px;
&-item {
flex: 1;
.item-show-mixin();
.cr-image {
margin-right: -25px;
margin-bottom: -15px;
}
&:nth-child(2) {
margin: 0 25px;
}
&-bold {
font-weight: @font-weight-bold;
}
}
}
&-tip {
padding-left: 16px;
&-item {
list-style-type: decimal;
padding-left: 8px;
font-size: @font-size-12;
color: @black;
font-weight: bold;
p {
line-height: @line-height-sm + 2;
color: @gray-5;
margin-bottom: 12px;
}
}
&-link {
display: flex;
align-items: center;
justify-content: space-between;
a {
font-size: @font-size-12;
color: @black;
&::after {
display: inline-block;
content: " ";
width: 0;
height: 12px;
border-right: 1px @blue solid;
margin: 0 3px 0 6px;
vertical-align: -2px;
}
&:last-child::after {
display: none;
}
}
}
}
}
</style>
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment