Skip to content

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

feat: 详情页完善组件封装

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