Skip to content

M
mongo-ui
Commit a57a1808 authored by 郭志伟's avatar 郭志伟 Committed by 郝聪敏
Browse files
Options

feat: 详情页梳理

parent 20e12d35
Show whitespace changes
Inline Side-by-side
Showing with 692 additions and 356 deletions
src/api/detail.case.mock.js deleted 100644 → 0
View file @ 20e12d35
/* eslint-disable */
export default {
name: "吴先生",
info: "46岁 北京 有社保",
list: [
{
title: "投保",
event: "2018年6月29日，吴先生为自己投保了一份万家保·重疾轻症险，保额20万，并续保。"
},
{
title: "投保",
event: "2019年9月16日，吴先生意外烫伤双下肢皮肤，达到浅Ⅲ°烧伤，烧伤面积达20"
},
{
title: "轻症理赔",
event: "2019年9月17日，吴先生后向我司报案，经核实符合该保险中轻症“特定面积Ⅲ度烧伤”的诊断赔付标准，给予4万保险金赔付。"
},
{
title: "重疾理赔",
event: "2020年1月3日，吴先生突发胸痛咯血，后诊断为右肺非小细胞性肺癌，经我司核实后确认为保险责任，一次性给予20万元的重大疾病保险金。"
}
]
};
src/api/detail.huataizhongjixian.js 0 → 100644
View file @ a57a1808
/* eslint-disable */
/*
* //TODO 后期可以做成json文件，以减小包体积
* @Description:华太30万轻重疾险
* @Date: 2020-07-27 15:46:37
* @LastEditors: gzw
* @LastEditTime: 2020-07-27 15:56:03
*/
import goodsBg01 from "@/assets/goods/detail/bg-zhongjixian.png";
import intro01 from "@/assets/goods/detail/zhongjixian/intro-01.png";
import intro02 from "@/assets/goods/detail/zhongjixian/intro-02.png";
import intro03 from "@/assets/goods/detail/zhongjixian/intro-03.png";
import intro04 from "@/assets/goods/detail/zhongjixian/intro-04.png";
export default {
headerInfo: {
bgSrc: goodsBg01,
type: "huatai",
company: "华泰财险",
title: "30万重疾轻症保障",
sub: "100种重症+40种轻症确诊即赔",
price: "首月<strong>3</strong>元<small>次月5.6元/月起</small>",
insuredNum: 0,
stamp: true
},
introImg: [intro01, intro02, intro03, intro04],
companyInfo: [
{ content: "承保公司：华泰财产保险有限公司", offset: false },
{ content: "经营范围：短期健康保险和意外伤害保险", offset: false },
{ content: "备案名称：华泰财险重大疾病保险条款", offset: false },
{ content: "华泰财险附加重大疾病轻症综合保险条款；", offset: true },
{ content: "华泰财险附加保险费分期支付条款", offset: true },
{ content: "备案编号：C00015431912018061501152；", offset: false },
{ content: "C00015432622017111500872；", offset: true },
{ content: "C00015431922018061503991", offset: true }
],
navBarOptions: [
{ label: "我要投保", value: "insure" },
{ label: "产品特色", value: "intro" },
{ label: "理赔说明", value: "process" }
],
autoCellInfo: [
{ title: "【省心】自动续保，不用担心续保不及时导致保障中断", value: "" },
{ title: "【放心】开通自动续保后，可随时取消", value: "" },
{ title: "【安心】自动续保按费率可自动扣费", value: "" },
{
title: {
needSlot: true,
tpl: " 阅读并同意<a href='javascript:;'>《自动续保服务协议》</a>"
},
value: ""
}
],
planTipOptions: ["轻症赔付后，重疾保障继续有效", "可逐年续保至99岁"],
planOptions: [
{ label: "30万", value: "3" },
{ label: "20万", value: "2" },
{ label: "10万", value: "1" }
],
insuredOptions: [
{ label: "本人", value: "1" },
{ label: "配偶", value: "2" },
{ label: "父母", value: "3" },
{ label: "子女", value: "4" }
],
paywayOptions: [
{ label: "月缴<small style='color: #999;font-size: 11px'>（12期）</small>", value: "1" },
{ label: "一次交清", value: "2" }
],
popupArray: [
{
title: "保险条款",
url: "http://mangguo-contract.qthbx.com/huatai-bao-xian-tiao-kuan-v1/"
},
{
title: "健康告知",
url: "http://mangguo-contract.qthbx.com/huatai-jian-kang-gao-zhi-v1/"
},
{
title: "投保须知及声明",
url: "http://mangguo-contract.qthbx.com/huatai-toubaoxuzhi-v1/"
},
{
title: "平台服务协议",
url: "http://mangguo-contract.qthbx.com/fu-wu-xie-yi-v1/"
},
{ title: "保险计划" },
{ title: "理赔信息" },
{ title: "完整费率" },
{
title: "自动续保服务协议",
url: "http://mangguo-contract.qthbx.com/zi-dong-xu-bao-fu-wu-xie-yi-v1/"
}
],
caseInfo: {
name: "吴先生",
info: "46岁 北京 有社保",
list: [
{
title: "投保",
event: "2018年6月29日，吴先生为自己投保了一份万家保·重疾轻症险，保额20万，并续保。"
},
{
title: "投保",
event: "2019年9月16日，吴先生意外烫伤双下肢皮肤，达到浅Ⅲ°烧伤，烧伤面积达20"
},
{
title: "轻症理赔",
event: "2019年9月17日，吴先生后向我司报案，经核实符合该保险中轻症“特定面积Ⅲ度烧伤”的诊断赔付标准，给予4万保险金赔付。"
},
{
title: "重疾理赔",
event: "2020年1月3日，吴先生突发胸痛咯血，后诊断为右肺非小细胞性肺癌，经我司核实后确认为保险责任，一次性给予20万元的重大疾病保险金。"
}
]
},
qaInfo: [
{
q: "这个产品的等待期是多久？",
a: "本产品的等待期为90天,意外及续保无等待期。"
},
{
q: "如果同时购买了其他重疾险，可以赔付2次吗？",
a: "本保险产品为一次性给付型产品，如果您购买的重疾险为一次性给付型或报销型产品，可以和本保险同时申请理赔，获得两份赔偿。如果出险，请拨打华泰财险24小时客服电话4006095509。"
},
{
q: "这款产品提供了哪些保障？",
a: "本产品对人一生中可能罹患的99%以上的100种重大疾病提供保障，同时还有40种轻症保障也包含在内。在保险期间内，被保险人因意外伤害或在等待期后因疾病初次确诊罹患本产品定义的重大疾病或轻症的，即可获得一笔保险补偿。"
},
{
q: "被保险人有哪些限制？",
a: "可以为出生满30天-60周岁（含）身体健康，且符合健康告知提及状况的本人、配偶、子女或父母投保。"
},
{
q: "理赔后是否可以续保？需要重新完成健康告知吗？",
a: "无理赔或者已理赔过轻症的第二年可以续保；已理赔过重症的第二年不可以续保；续保无需重新填写健康告知。"
},
{
q: "如何在华泰官网进行保单验真？",
a: "请登录投保成功短信中提示的华泰官网查询网http://agt.ehuatai.com/nonautoquery/。填写登录信息时，类别选择“家庭财产、意外伤害保险”，保单号在投保成功的短信中，密码填写被保险人身份证号，即可登录查询保单承保信息。"
}
],
processDetail: [
{
title: "电话报案",
desc: "请拨打华泰财险400-609-5509进行报案。华泰财险会有理赔专员1对1指导理赔事宜。 "
},
{
title: "准备材料",
desc: `1、索赔申请书；<br />
2、保险单或保险凭证复印件；（电子保单，不需要纸质）;<br />
3、被保险人身份证正反面复印件；<br />
4、有关部门出具的事故经过说明，如涉及交通事故，需提供交通事故责任认定书、被保险人驾驶证正副页复印件、机动车行驶证正副页复印件；涉及安全生产事故的，提供安全监管部门出具的调查报告；涉及特种作业的，提供被保险人特种作业操作证；<br />
5、医疗发票、医疗明细清单、门急诊病历、住院病历、病历检查报告等原件（若社保先报销则提供医疗费用分割单）；<br />
6、其他与确认保险事故性质、原因、损失程度等有关的证明或材料。<br />
`
},
{
title: "理赔付款",
desc: `1、转账方式直接支付给被保险人；<br />
2、若被保险人身故的，则转账支付给指定受益人或法定受益人。`
}
]
};
src/api/detail.process.mock.js deleted 100644 → 0
View file @ 20e12d35
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 deleted 100644 → 0
View file @ 20e12d35
/* 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/service/cherry-ui.js
View file @ a57a1808
...@@ -35,7 +35,7 @@ const { ...@@ -35,7 +35,7 @@ const {
// Stepper, // Stepper,
// DatePicker, // DatePicker,
// SwipeCell, // SwipeCell,
// Form, Form,
Tabbar, Tabbar,
TabbarItem, TabbarItem,
// Navbar, // Navbar,
...@@ -61,6 +61,7 @@ Vue.use(Radio); ...@@ -61,6 +61,7 @@ Vue.use(Radio);
Vue.use(RadioGroup); Vue.use(RadioGroup);
Vue.use(Switch); Vue.use(Switch);
Vue.use(Tag); Vue.use(Tag);
Vue.use(Form);
Vue.use(Tabbar); Vue.use(Tabbar);
Vue.use(TabbarItem); Vue.use(TabbarItem);
Vue.use(Icon); Vue.use(Icon);
......
src/views/Goods/Detail/index.less
View file @ a57a1808
...@@ -13,120 +13,6 @@ ...@@ -13,120 +13,6 @@
height: 60px; height: 60px;
} }
} }
.plan-tip {
font-size: @font-size-11;
color: @gray-5;
line-height: @line-height-sm;
margin-top: 14px;
.svg-icon {
margin-right: 4px;
width: 12px;
height: 12px;
}
&_offset {
margin-right: 9px;
}
}
.insure-form {
&-title {
font-size: @font-size-16;
font-weight: @font-weight-bold;
margin: @padding-md 0;
}
@{deep} .cr-cell {
&-group {
&::after {
display: none;
}
}
background-color: @gray-1;
border-radius: @border-radius-md;
margin-bottom: 12px;
align-items: center;
padding: 9px 16px;
&::after {
display: none;
}
&__title {
color: #333333;
display: flex;
align-items: center;
}
}
&-item_nobg {
background-color: @white !important;
padding: 10px 0;
overflow: initial;
align-items: baseline !important;
margin-bottom: 0 !important;
@{deep} .cr-cell {
&__title {
width: 31%;
flex: none;
}
&__value {
width: 69%;
flex: none;
overflow: initial;
}
}
}
&-switch {
display: flex;
justify-content: space-between;
align-items: center;
flex: 1;
&-card {
padding-top: 0;
}
&-label {
font-size: @font-size-12;
color: @black;
margin-right: 4px;
}
.cr-switch {
@{deep} &__control {
box-shadow: none;
}
}
.cr-tag {
margin: 0 auto 0 8px;
color: @white !important;
}
&-option {
display: flex;
align-items: center;
justify-content: right;
}
}
&-pact {
display: flex;
justify-content: space-between;
align-items: center;
padding: 14px 0;
@{deep} .cr-checkbox__label {
font-size: @font-size-11;
color: @gray-4;
margin-left: 5px;
}
&-link {
margin-top: -3.5px;
display: flex;
padding-top: 3px;
align-items: center;
a {
font-size: @font-size-11;
}
i {
width: 0;
height: 12px;
border-right: 1px @blue solid;
margin: 0 3px;
}
}
}
}
.intro { .intro {
margin: 10px 0;; margin: 10px 0;;
padding: 0; padding: 0;
......
src/views/Goods/Detail/index.vue
View file @ a57a1808
<template> <template>
<div class="container"> <div class="container">
<nav-tab :nav-list="navBarOptions" />
<detail-header @click="goInsureState = true" :det="headerInfo" /> <detail-header @click="goInsureState = true" :det="headerInfo" />
<div class="det-body"> <div class="det-body">
<card title="保险计划" :option="['查看详情']" @option-click="openIframePupop(4)"> <card title="保险计划" :option="['查看详情']" @option-click="openIframePupop(4)">
<cr-radio-btn v-model="formData.planValue" :radio-data="planOptions" /> <cr-radio-btn v-model="formData.planValue" :radio-data="planOptions" />
<compactCellGroup :cell-data="planCellData" :text-bold="true" /> <compactCellGroup :cell-data="planCellData" :text-bold="true" />
<div class="plan-tip"> <plan-tip :tip-list="planTipOptions" />
<svg-icon icon-class="check-circle" />
<span class="plan-tip_offset">轻症赔付后，重疾保障继续有效</span>
<svg-icon icon-class="check-circle" />
<span>可逐年续保至99岁</span>
</div>
</card> </card>
<card title="请填写投保信息"> <div id="det_insure">
<h6 class="insure-form-title">本人信息</h6> <insure-person-form v-model="formData" :radio-options="personFormOptions" />
<cr-cell-group class="insure-form"> <auto-deduct
<cr-field v-model="formData.selfName" placeholder="请输入投保人姓名" label="姓名" /> v-model="formData.auto"
<cr-field :cell-data="autoCellInfo"
v-model="formData.selfIdNo" @cell-click="openIframePupop"
placeholder="信息保密，仅用于投保"
label="身份证号"
/>
</cr-cell-group>
<h6 class="insure-form-title">为谁投保</h6>
<cr-radio-btn v-model="formData.insured" :radio-data="insuredOptions" />
<cr-cell-group class="insure-form">
<cr-field v-model="formData.relativeName" placeholder="请输入投保人姓名" label="姓名" />
<cr-field
v-model="formData.relativeIdNo"
placeholder="信息保密，仅用于投保"
label="身份证号"
/> />
<cr-cell title="缴费方式" class="insure-form-item_nobg"> <protocol-read
<cr-radio-btn v-model="formData.payway" :radio-data="paywayOptions" />
</cr-cell>
</cr-cell-group>
</card>
<card class="insure-form-switch-card">
<div class="insure-form-switch" slot="header">
<h5 class="card-title">开通次年自动续保</h5>
<cr-tag type="warning">小果建议您开通</cr-tag>
<div class="insure-form-switch-option">
<span class="insure-form-switch-label">{{ formData.auto ? "已" : "未" }}开通</span>
<cr-switch v-model="formData.auto" active-color="#FFC842" size="23.5px" />
</div>
</div>
<div>
<compactCellGroup :cell-data="autoCellData" :no-val="true" @click="openIframePupop(7)" />
</div>
</card>
<card
title="投保须知"
:option="['查看完整费率表']"
footer="协议"
@option-click="openIframePupop(6)"
>
<compactCellGroup :cell-data="noticeCellData" />
<div class="insure-form-pact" slot="footer">
<cr-checkbox
shape="round"
icon-size="13px"
v-model="formData.pact" v-model="formData.pact"
checked-color="#FFC842" :cell-data="noticeCellData"
> @cell-click="openIframePupop"
投保前请阅读 />
</cr-checkbox>
<div class="insure-form-pact-link">
<a href="javascript:;" @click="openIframePupop(0)">保险条款</a>
<i></i>
<a href="javascript:;" @click="openIframePupop(1)">健康告知</a>
<i></i>
<a href="javascript:;" @click="openIframePupop(2)">投保须知与声明</a>
<i></i>
<a href="javascript:;" @click="openIframePupop(3)">服务协议</a>
</div>
</div> </div>
</card> <card class="intro" id="det_intro">
<card class="intro">
<cr-image <cr-image
:src="item" :src="item"
v-for="(item, index) in introImg" v-for="(item, index) in introImg"
...@@ -86,8 +31,10 @@ ...@@ -86,8 +31,10 @@
/> />
</card> </card>
<cps-case :case-data="caseInfo" /> <cps-case :case-data="caseInfo" />
<div id="det_process">
<cps-process :process-data="processDetail" @click="openIframePupop(5)" /> <cps-process :process-data="processDetail" @click="openIframePupop(5)" />
<cps-qa :qa-data="qaList" /> </div>
<cps-qa :qa-data="qaInfo" />
</div> </div>
<detail-footer :company-info="companyInfo" /> <detail-footer :company-info="companyInfo" />
<copyright /> <copyright />
...@@ -107,6 +54,13 @@ ...@@ -107,6 +54,13 @@
</template> </template>
<script> <script>
import CrRadioBtn from "@/components/CrRadioBtn";
import Card from "@/components/Card";
import Copyright from "@/components/Copyright";
import GoodAction from "@/components/GoodAction";
import RecordLayer from "@/components/RecordLayer";
import Collapse from "@/components/Collapse";
import DetailHeader from "./modules/DetailHeader"; import DetailHeader from "./modules/DetailHeader";
import DetailFooter from "./modules/DetailFooter"; import DetailFooter from "./modules/DetailFooter";
import CompactCellGroup from "@/components/CompactCellGroup"; import CompactCellGroup from "@/components/CompactCellGroup";
...@@ -117,39 +71,13 @@ import PopupWithIframe from "@/components/PopupWithIframe"; ...@@ -117,39 +71,13 @@ import PopupWithIframe from "@/components/PopupWithIframe";
import GoInsureDialog from "./modules/GoInsureDialog"; import GoInsureDialog from "./modules/GoInsureDialog";
import CpsProcessDetail from "./modules/CpsProcessDetail"; import CpsProcessDetail from "./modules/CpsProcessDetail";
import CpsRate from "./modules/CpsRate"; import CpsRate from "./modules/CpsRate";
import CrRadioBtn from "@/components/CrRadioBtn"; import PlanTip from "./modules/PlanTip";
import Card from "@/components/Card"; import InsurePersonForm from "./modules/InsurePersonForm";
import Copyright from "@/components/Copyright"; import AutoDeduct from "./modules/AutoDeduct";
import GoodAction from "@/components/GoodAction"; import ProtocolRead from "./modules/ProtocolRead";
import RecordLayer from "@/components/RecordLayer"; import NavTab from "./modules/NavTab";
import Collapse from "@/components/Collapse";
import goodsBg01 from "@/assets/goods/detail/bg-zhongjixian.png";
import qaList from "@/api/detail.qa.mock";
import caseInfo from "@/api/detail.case.mock";
import processDetail from "@/api/detail.process.mock";
const headerInfo = {
bgSrc: goodsBg01,
type: "huatai",
company: "华泰财险",
title: "30万重疾轻症保障",
sub: "100种重症+40种轻症确诊即赔",
price: "首月<strong>3</strong>元<small>次月5.6元/月起</small>",
insuredNum: 0,
stamp: true
};
const companyInfo = [ import Detail from "@/api/detail.huataizhongjixian";
{ content: "承保公司：华泰财产保险有限公司", offset: false },
{ content: "经营范围：短期健康保险和意外伤害保险", offset: false },
{ content: "备案名称：华泰财险重大疾病保险条款", offset: false },
{ content: "华泰财险附加重大疾病轻症综合保险条款；", offset: true },
{ content: "华泰财险附加保险费分期支付条款", offset: true },
{ content: "备案编号：C00015431912018061501152；", offset: false },
{ content: "C00015432622017111500872；", offset: true },
{ content: "C00015431922018061503991", offset: true }
];
export default { export default {
name: "GoodsDetail", name: "GoodsDetail",
...@@ -170,75 +98,18 @@ export default { ...@@ -170,75 +98,18 @@ export default {
GoInsureDialog, GoInsureDialog,
CpsProcessDetail, CpsProcessDetail,
CpsRate, CpsRate,
RecordLayer RecordLayer,
PlanTip,
InsurePersonForm,
AutoDeduct,
ProtocolRead,
NavTab
}, },
data() { data() {
return { return {
headerInfo, ...Detail,
qaList,
caseInfo,
processDetail,
companyInfo,
introImg: [
"@/assets/goods/detail/zhongjixian/intro-01.png",
"@/assets/goods/detail/zhongjixian/intro-02.png",
"@/assets/goods/detail/zhongjixian/intro-03.png",
"@/assets/goods/detail/zhongjixian/intro-04.png"
],
autoCellData: [
{ title: "【省心】自动续保，不用担心续保不及时导致保障中断", value: "" },
{ title: "【放心】开通自动续保后，可随时取消", value: "" },
{ title: "【安心】自动续保按费率可自动扣费", value: "" },
{
title: {
needSlot: true,
tpl: " 阅读并同意<a href='javascript:;'>《自动续保服务协议》</a>"
},
value: ""
}
],
planOptions: [
{ label: "30万", value: "3" },
{ label: "20万", value: "2" },
{ label: "10万", value: "1" }
],
insuredOptions: [
{ label: "本人", value: "1" },
{ label: "配偶", value: "2" },
{ label: "父母", value: "3" },
{ label: "子女", value: "4" }
],
paywayOptions: [
{ label: "月缴<small style='color: #999;font-size: 11px'>（12期）</small>", value: "1" },
{ label: "一次交清", value: "2" }
],
popupShow: false, popupShow: false,
currentPupopIndex: null, currentPupopIndex: null,
popupArray: [
{
title: "保险条款",
url: "http://mangguo-contract.qthbx.com/huatai-bao-xian-tiao-kuan-v1/"
},
{
title: "健康告知",
url: "http://mangguo-contract.qthbx.com/huatai-jian-kang-gao-zhi-v1/"
},
{
title: "投保须知及声明",
url: "http://mangguo-contract.qthbx.com/huatai-toubaoxuzhi-v1/"
},
{
title: "平台服务协议",
url: "http://mangguo-contract.qthbx.com/fu-wu-xie-yi-v1/"
},
{ title: "保险计划" },
{ title: "理赔信息" },
{ title: "完整费率" },
{
title: "自动续保服务协议",
url: "http://mangguo-contract.qthbx.com/zi-dong-xu-bao-fu-wu-xie-yi-v1/"
}
],
formData: { formData: {
planValue: "3", planValue: "3",
insured: "1", insured: "1",
...@@ -308,6 +179,13 @@ export default { ...@@ -308,6 +179,13 @@ export default {
} }
} }
]; ];
},
personFormOptions() {
const { insuredOptions, paywayOptions } = this;
return {
insuredOptions,
paywayOptions
};
} }
}, },
methods: { methods: {
......
src/views/Goods/Detail/modules/AutoDeduct.vue 0 → 100644
View file @ a57a1808
<template>
<card class="insure-form-switch-card">
<div class="insure-form-switch" slot="header">
<h5 class="card-title">开通次年自动续保</h5>
<cr-tag type="warning">小果建议您开通</cr-tag>
<div class="insure-form-switch-option">
<span class="insure-form-switch-label">{{ auto ? "已" : "未" }}开通</span>
<cr-switch v-model="auto" active-color="#FFC842" size="23.5px" />
</div>
</div>
<compactCellGroup :cell-data="cellData" :no-val="true" @click="openIframe" />
</card>
</template>
<script>
import Card from "@/components/Card";
import CompactCellGroup from "@/components/CompactCellGroup";
const DATA_CHANGE_EVENT = "input";
const CELL_CLICK_EVENT = "cell-click";
export default {
name: "AutoDeduct",
components: {
CompactCellGroup,
Card
},
props: {
value: null,
cellData: {
type: Array,
default() {
return [];
}
}
},
data() {
return {
auto: false
};
},
watch: {
value: {
immediate: true,
handler(val) {
this.auto = val;
}
},
auto: {
handler(val) {
this.$emit(DATA_CHANGE_EVENT, val);
}
}
},
methods: {
openIframe() {
this.$emit(CELL_CLICK_EVENT, 7);
}
}
};
</script>
<style lang="less" scoped>
@import "../../../../style/var.less";
.insure-form {
&-switch {
display: flex;
justify-content: space-between;
align-items: center;
flex: 1;
&-card {
padding-top: 0;
}
&-label {
font-size: @font-size-12;
color: @black;
margin-right: 4px;
}
.cr-switch {
@{deep} &__control {
box-shadow: none;
}
}
.cr-tag {
margin: 0 auto 0 8px;
color: @white !important;
}
&-option {
display: flex;
align-items: center;
justify-content: right;
}
}
}
</style>
src/views/Goods/Detail/modules/DetailHeader.vue
View file @ a57a1808
...@@ -20,7 +20,7 @@ ...@@ -20,7 +20,7 @@
<slot>{{ props.det.sub }}</slot> <slot>{{ props.det.sub }}</slot>
</small> </small>
<h5 class="det-hd-insured-price" v-html="props.det.price"></h5> <h5 class="det-hd-insured-price" v-html="props.det.price"></h5>
<cr-button type="warning" block>立即开启保障</cr-button> <cr-button type="warning" block @click="listeners.click">立即开启保障</cr-button>
<div class="det-hd-insured-people"> <div class="det-hd-insured-people">
已有 已有
<em>{{ props.det.insuredNum }}</em> <em>{{ props.det.insuredNum }}</em>
......
src/views/Goods/Detail/modules/InsurePersonForm.vue 0 → 100644
View file @ a57a1808
<template>
<card title="请填写投保信息">
<h6 class="insure-form-title">本人信息</h6>
<cr-cell-group class="insure-form">
<cr-field v-model="formData.selfName" placeholder="请输入投保人姓名" label="姓名" />
<cr-field v-model="formData.selfIdNo" placeholder="信息保密，仅用于投保" label="身份证号" />
</cr-cell-group>
<h6 class="insure-form-title">为谁投保</h6>
<cr-radio-btn v-model="formData.insured" :radio-data="radioOptions.insuredOptions" />
<cr-cell-group class="insure-form">
<cr-field v-model="formData.relativeName" placeholder="请输入投保人姓名" label="姓名" />
<cr-field
v-model="formData.relativeIdNo"
placeholder="信息保密，仅用于投保"
label="身份证号"
/>
<cr-cell title="缴费方式" class="insure-form-item_nobg">
<cr-radio-btn v-model="formData.payway" :radio-data="radioOptions.paywayOptions" />
</cr-cell>
</cr-cell-group>
</card>
</template>
<script>
import Card from "@/components/Card";
import CrRadioBtn from "@/components/CrRadioBtn";
const DATA_CHANGE_EVENT = "input";
export default {
name: "InsurePersonForm",
components: {
CrRadioBtn,
Card
},
props: {
value: {
type: Object,
default() {
return {};
}
},
radioOptions: {
type: Object,
default() {
return {};
}
}
},
data() {
return {
formData: {}
};
},
watch: {
value: {
deep: true,
immediate: true,
handler(val) {
this.formData = val;
}
},
formData: {
deep: true,
handler(val) {
this.$emit(DATA_CHANGE_EVENT, val);
}
}
}
};
</script>
<style lang="less" scoped>
@import "../../../../style/var.less";
.insure-form {
&-title {
font-size: @font-size-16;
font-weight: @font-weight-bold;
margin: @padding-md 0;
}
@{deep} .cr-cell {
&-group {
&::after {
display: none;
}
}
background-color: @gray-1;
border-radius: @border-radius-md;
margin-bottom: 12px;
align-items: center;
padding: 9px 16px;
&::after {
display: none;
}
&__title {
color: #333333;
display: flex;
align-items: center;
}
}
&-item_nobg {
background-color: @white !important;
padding: 10px 0;
overflow: initial;
align-items: baseline !important;
margin-bottom: 0 !important;
@{deep} .cr-cell {
&__title {
width: 31%;
flex: none;
}
&__value {
width: 69%;
flex: none;
overflow: initial;
}
}
}
}
</style>
src/views/Goods/Detail/modules/NavTab.vue 0 → 100644
View file @ a57a1808
<template>
<div class="det-navbar" v-if="showNavBar">
<cr-tabbar v-model="active" active-color="#333" inactive-color="#666" @change="scrollTo">
<cr-tabbar-item v-for="(item, index) in navList" :key="index">
{{ item.label }}
</cr-tabbar-item>
</cr-tabbar>
</div>
</template>
<script>
const SCROLL_ACHOR_CHANGE_EVENT = "input";
export default {
name: "NavTab",
props: {
value: null,
navList: {
type: Array,
default() {
return [];
}
}
},
data() {
return {
active: "",
showNavBar: false
};
},
watch: {
value: {
immediate: true,
handler(val) {
this.active = val;
}
},
active: {
handler(val) {
this.$emit(SCROLL_ACHOR_CHANGE_EVENT, val);
}
}
},
mounted() {
// 监听滚动事件
window.addEventListener("scroll", this.onScroll, false);
},
destroy() {
// 必须移除监听器，不然当该vue组件被销毁了，监听器还在就会出错
window.removeEventListener("scroll", this.onScroll);
},
methods: {
// 滚动监听器
onScroll() {
// 获取所有锚点元素
const navContents = document.querySelectorAll("div[id*=det_]");
// 所有锚点元素的 offsetTop
const offsetTopArr = [];
navContents.forEach(item => {
offsetTopArr.push(item.offsetTop);
});
// 获取当前文档流的 scrollTop
const scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
// 定义当前点亮的导航下标
let navIndex = 0;
for (let n = 0; n < offsetTopArr.length; n++) {
// 如果 scrollTop 大于等于第n个元素的 offsetTop 则说明 n-1 的内容已经完全不可见
// 那么此时导航索引就应该是n了
if (scrollTop >= offsetTopArr[n]) {
navIndex = n;
}
}
this.active = navIndex;
this.showNavBar = scrollTop > 300;
},
// 跳转到指定索引的元素
scrollTo(index) {
const _val = this.navList[index].value;
// 获取目标的 offsetTop
const targetOffsetTop = document.querySelector(`#det_${_val}`).offsetTop;
document.body.scrollTop = targetOffsetTop;
document.documentElement.scrollTop = targetOffsetTop;
}
}
};
</script>
<style lang="less" scoped>
@import "../../../../style/var.less";
@import "../../../../style/mixins.less";
.det-navbar {
position: fixed;
top: 0;
left: 0;
z-index: 200;
width: 100%;
.cr-tabbar {
background-color: @white;
font-size: @font-size-16;
border-bottom: 1px #ece9e9 solid;
padding: 10px 0;
height: 30px;
&-item {
position: relative;
line-height: 22px;
&::after {
position: absolute;
left: 0;
right: 0;
margin: auto;
top: 32px;
// 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;
}
}
}
}
}
</style>
src/views/Goods/Detail/modules/PlanTip.vue 0 → 100644
View file @ a57a1808
<template functional>
<div class="plan-tip">
<div class="plan-tip-item" v-for="(item, index) in props.tipList" :key="index">
<svg-icon icon-class="check-circle" />
<span class="plan-tip_offset">{{ item }}</span>
</div>
</div>
</template>
<script>
export default {
name: "PlanTip",
props: {
tipList: {
type: Array,
default() {
return [];
}
}
}
};
</script>
<style lang="less">
@import "../../../../style/var.less";
.plan-tip {
font-size: @font-size-11;
color: @gray-5;
line-height: @line-height-sm;
display: flex;
align-items: center;
margin-top: 14px;
.svg-icon {
margin-right: 4px;
width: 12px;
height: 12px;
}
&-item {
margin-right: 7px;
&:last-child {
margin-right: 0;
}
}
}
</style>
src/views/Goods/Detail/modules/ProtocolRead.vue 0 → 100644
View file @ a57a1808
<template>
<card title="投保须知" :option="['查看完整费率表']" footer="协议" @option-click="openIframe(6)">
<compactCellGroup :cell-data="cellData" />
<div class="insure-form-pact" slot="footer">
<cr-checkbox shape="round" icon-size="13px" v-model="pact" checked-color="#FFC842">
投保前请阅读
</cr-checkbox>
<div class="insure-form-pact-link">
<a href="javascript:;" @click="openIframe(0)">保险条款</a>
<i></i>
<a href="javascript:;" @click="openIframe(1)">健康告知</a>
<i></i>
<a href="javascript:;" @click="openIframe(2)">投保须知与声明</a>
<i></i>
<a href="javascript:;" @click="openIframe(3)">服务协议</a>
</div>
</div>
</card>
</template>
<script>
import Card from "@/components/Card";
import CompactCellGroup from "@/components/CompactCellGroup";
const DATA_CHANGE_EVENT = "input";
const CELL_CLICK_EVENT = "cell-click";
export default {
name: "ProtocolRead",
components: {
CompactCellGroup,
Card
},
props: {
value: null,
cellData: {
type: Array,
default() {
return [];
}
}
},
data() {
return {
pact: false
};
},
watch: {
value: {
immediate: true,
handler(val) {
this.pact = val;
}
},
pact: {
handler(val) {
this.$emit(DATA_CHANGE_EVENT, val);
}
}
},
methods: {
openIframe(idx) {
this.$emit(CELL_CLICK_EVENT, idx);
}
}
};
</script>
<style lang="less" scoped>
@import "../../../../style/var.less";
.insure-form {
&-pact {
display: flex;
justify-content: space-between;
align-items: center;
padding: 14px 0;
@{deep} .cr-checkbox__label {
font-size: @font-size-11;
color: @gray-4;
margin-left: 5px;
}
&-link {
margin-top: -3.5px;
display: flex;
padding-top: 3px;
align-items: center;
a {
font-size: @font-size-11;
}
i {
width: 0;
height: 12px;
border-right: 1px @blue solid;
margin: 0 3px;
}
}
}
}
</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