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
Expand all 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
This diff is collapsed.
src/api/detail.zhongan.yiwai.js 0 → 100644
View file @ 972c1cc1
This diff is collapsed.
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