Skip to content

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

feat: 剩余4种详情页完成

parent a06728fc
Expand all Hide whitespace changes
Inline Side-by-side
Showing with 1717 additions and 211 deletions
src/api/detail.huagui.shouxian.js 0 → 100644
View file @ 73c2a98f
This diff is collapsed.
src/api/detail.huataizhongjixian.js → src/api/detail.huatai.zhongjixian.js
View file @ 73c2a98f
...@@ -4,10 +4,10 @@ ...@@ -4,10 +4,10 @@
* @Description:华太30万轻重疾险 * @Description:华太30万轻重疾险
* @Date: 2020-07-27 15:46:37 * @Date: 2020-07-27 15:46:37
* @LastEditors: gzw * @LastEditors: gzw
* @LastEditTime: 2020-07-27 16:42:22 * @LastEditTime: 2020-07-27 18:25:25
*/ */
import goodsBg01 from "@/assets/goods/detail/bg-zhongjixian.png"; import goodsBg from "@/assets/goods/detail/zhongjixian/bg.png";
import intro01 from "@/assets/goods/detail/zhongjixian/intro-01.png"; import intro01 from "@/assets/goods/detail/zhongjixian/intro-01.png";
import intro02 from "@/assets/goods/detail/zhongjixian/intro-02.png"; import intro02 from "@/assets/goods/detail/zhongjixian/intro-02.png";
import intro03 from "@/assets/goods/detail/zhongjixian/intro-03.png"; import intro03 from "@/assets/goods/detail/zhongjixian/intro-03.png";
...@@ -15,7 +15,7 @@ import intro04 from "@/assets/goods/detail/zhongjixian/intro-04.png"; ...@@ -15,7 +15,7 @@ import intro04 from "@/assets/goods/detail/zhongjixian/intro-04.png";
export default { export default {
headerInfo: { headerInfo: {
bgSrc: goodsBg01, bgSrc: goodsBg,
type: "huatai", type: "huatai",
company: "华泰财险", company: "华泰财险",
title: "30万重疾轻症保障", title: "30万重疾轻症保障",
...@@ -52,6 +52,26 @@ export default { ...@@ -52,6 +52,26 @@ export default {
value: "" value: ""
} }
], ],
planCellInfo: {
"3": [
{ title: "100种重大疾病医疗保险金", value: "30万" },
{ title: "40种轻症保险金", value: "6万" },
{ title: "投保年龄", value: "30天~50周岁" },
{ title: "保险期限", value: "1年" }
],
"2": [
{ title: "100种重大疾病医疗保险金", value: "20万" },
{ title: "40种轻症保险金", value: "4万" },
{ title: "投保年龄", value: "30天~60周岁" },
{ title: "保险期限", value: "1年" }
],
"1": [
{ title: "100种重大疾病医疗保险金", value: "10万" },
{ title: "40种轻症保险金", value: "2万" },
{ title: "投保年龄", value: "30天~60周岁" },
{ title: "保险期限", value: "1年" }
]
},
planTipOptions: ["轻症赔付后，重疾保障继续有效", "可逐年续保至99岁"], planTipOptions: ["轻症赔付后，重疾保障继续有效", "可逐年续保至99岁"],
planOptions: [ planOptions: [
{ label: "30万", value: "3" }, { label: "30万", value: "3" },
...@@ -68,6 +88,51 @@ export default { ...@@ -68,6 +88,51 @@ export default {
{ label: "月缴<small style='color: #999;font-size: 11px'>（12期）</small>", value: "1" }, { label: "月缴<small style='color: #999;font-size: 11px'>（12期）</small>", value: "1" },
{ label: "一次交清", value: "2" } { label: "一次交清", value: "2" }
], ],
goodActionInfo: {
title: ["3", "元", "首月"],
sub: "次月5.6元/月起"
},
noticeCellInfo: {
"3": [
{ title: "投保年龄", value: `30~50周岁` },
{ title: "保障期限", value: "1年（可续保至99周岁）" },
{ title: "等待期", value: "90天" },
{
title: "保费",
value: {
needSlot: true,
tpl: "保费与保额、被保人年龄有关<br />首月3元，次月5.6元/月起",
longTxt: true
}
}
],
"2": [
{ title: "投保年龄", value: `30~60周岁` },
{ title: "保障期限", value: "1年（可续保至99周岁）" },
{ title: "等待期", value: "90天" },
{
title: "保费",
value: {
needSlot: true,
tpl: "保费与保额、被保人年龄有关<br />首月3元，次月5.6元/月起",
longTxt: true
}
}
],
"1": [
{ title: "投保年龄", value: `30~60周岁` },
{ title: "保障期限", value: "1年（可续保至99周岁）" },
{ title: "等待期", value: "90天" },
{
title: "保费",
value: {
needSlot: true,
tpl: "保费与保额、被保人年龄有关<br />首月3元，次月5.6元/月起",
longTxt: true
}
}
]
},
popupArray: [ popupArray: [
{ {
title: "保险条款", title: "保险条款",
......
src/api/detail.taikang.yiliaobaozhang.js 0 → 100644
View file @ 73c2a98f
This diff is collapsed.
src/api/detail.zhongan.yiliaobaozhang.js 0 → 100644
View file @ 73c2a98f
This diff is collapsed.
src/components/CompactCellGroup.vue
View file @ 73c2a98f
...@@ -11,7 +11,12 @@ ...@@ -11,7 +11,12 @@
:key="index" :key="index"
:title="item.title.tpl || item.title" :title="item.title.tpl || item.title"
:value="item.value.tpl || item.value" :value="item.value.tpl || item.value"
:class="{ 'compact-cell': 1, 'compact-cell_br': item.value.longTxt }" :class="{
'compact-cell': 1,
'compact-cell_br': item.value.longTxt,
'compact-cell_divider': item.divider,
'compact-cell_inline': item.inline
}"
@click="cellClick(item)" @click="cellClick(item)"
> >
<template v-if="item.title.needSlot" slot="title"> <template v-if="item.title.needSlot" slot="title">
...@@ -20,6 +25,7 @@ ...@@ -20,6 +25,7 @@
<template v-if="item.value.needSlot"> <template v-if="item.value.needSlot">
<div v-html="item.value.tpl"></div> <div v-html="item.value.tpl"></div>
</template> </template>
<cr-divider :hairline="false" :style="{ color: '#ECE9E9' }" v-if="item.divider" />
</cr-cell> </cr-cell>
</cr-cell-group> </cr-cell-group>
</template> </template>
...@@ -71,6 +77,7 @@ export default { ...@@ -71,6 +77,7 @@ export default {
border-radius: @border-radius-md; border-radius: @border-radius-md;
padding: @padding-md; padding: @padding-md;
@{deep} .cr-cell { @{deep} .cr-cell {
justify-content: space-between;
&-group { &-group {
&::after { &::after {
display: none; display: none;
...@@ -78,9 +85,11 @@ export default { ...@@ -78,9 +85,11 @@ export default {
} }
&__title { &__title {
color: @gray-5; color: @gray-5;
flex: none;
} }
&__value { &__value {
color: @black; color: @black;
flex: none;
} }
} }
} }
...@@ -111,5 +120,26 @@ export default { ...@@ -111,5 +120,26 @@ export default {
width: 70%; width: 70%;
} }
} }
&_divider {
height: 32px;
overflow: initial;
@{deep} .cr-cell__value {
width: 100%;
overflow: initial;
}
.cr-divider {
position: absolute;
top: 0;
left: -15px;
width: calc(100% + 30px);
}
}
&_inline {
@{deep} .cr-cell__title {
color: @gray-4 !important;
font-size: @font-size-12 !important;
margin-bottom: 10px;
}
}
} }
</style> </style>
src/components/GoodAction.vue
View file @ 73c2a98f
...@@ -7,8 +7,14 @@ ...@@ -7,8 +7,14 @@
</a> </a>
</div> </div>
<div class="good-action-content"> <div class="good-action-content">
<h6>首月<strong>3</strong>元</h6> <slot>
<small>次月5.6元/月起</small> <h6 v-if="content.title">
{{ content.title[2] || "" }}
<strong>{{ content.title[0] || "" }}</strong>
{{ content.title[1] || "" }}
</h6>
<small v-if="content.sub">{{ content.sub }}</small>
</slot>
</div> </div>
<div class="good-action-right"> <div class="good-action-right">
<cr-button type="warning" round @click="rightClick">我要投保</cr-button> <cr-button type="warning" round @click="rightClick">我要投保</cr-button>
...@@ -40,7 +46,7 @@ export default { ...@@ -40,7 +46,7 @@ export default {
} }
}, },
content: { content: {
type: String, type: [String, Object],
default: "" default: ""
} }
}, },
......
src/style/index.less
View file @ 73c2a98f
...@@ -33,6 +33,10 @@ a { ...@@ -33,6 +33,10 @@ a {
height: @button-large-height !important; height: @button-large-height !important;
line-height: @button-large-line-height !important; line-height: @button-large-line-height !important;
} }
&--small {
height: @button-small-height !important;
line-height: @button-small-line-height !important;
}
} }
.cr-tag { .cr-tag {
......
src/views/Goods/Detail/AIDetail.vue 0 → 100644
View file @ 73c2a98f
<template>
<div class="container">
<nav-tab :nav-list="navBarOptions" />
<detail-header @click="goInsureState = true" :det="headerInfo" />
<div class="det-body">
<card title="保险计划" :option="['查看详情']" @option-click="openIframePupop(4)">
<cr-radio-btn v-model="formData.planValue" :radio-data="planOptions" />
<compactCellGroup :cell-data="planCellData" :text-bold="true" />
<plan-tip :tip-list="planTipOptions" />
</card>
<div id="det_insure">
<insure-person-form v-model="formData" :radio-options="personFormOptions" />
<auto-deduct
v-model="formData.auto"
:cell-data="autoCellInfo"
@cell-click="openIframePupop"
/>
<protocol-read
v-model="formData.pact"
:cell-data="noticeCellData"
@cell-click="openIframePupop"
/>
</div>
<card class="intro" id="det_intro">
<cr-image
:src="item"
v-for="(item, index) in introImg"
:key="index"
width="100%"
height="auto"
/>
</card>
<cps-case :case-data="caseInfo" />
<div id="det_process">
<cps-process :process-data="processDetail" @click="openIframePupop(5)" />
</div>
<cps-qa :qa-data="qaInfo" />
</div>
<detail-footer :company-info="companyInfo" />
<copyright />
<good-action
@click="goInsureState = true"
@leftClick="goInsureState = true"
:content="goodActionInfo"
/>
<popup-with-iframe
v-model="popupShow"
:title="pupopData.title"
:content="pupopData.content"
:url="pupopData.url"
>
<cps-process-detail v-if="currentPupopIndex === 5" :process-data="processDetail" />
<cps-rate v-if="currentPupopIndex === 6" />
</popup-with-iframe>
<record-layer v-model="showLayer" desc="敬请期待" />
<go-insure-dialog v-model="goInsureState" />
</div>
</template>
<script>
/**
* @description: 华太轻重疾险 Critical illness insurance
*/
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 DetailFooter from "./modules/DetailFooter";
import CompactCellGroup from "@/components/CompactCellGroup";
import CpsCase from "./modules/CpsCase";
import CpsProcess from "./modules/CpsProcess";
import CpsQa from "./modules/CpsQA";
import PopupWithIframe from "@/components/PopupWithIframe";
import GoInsureDialog from "./modules/GoInsureDialog";
import CpsProcessDetail from "./modules/CpsProcessDetail";
import CpsRate from "./modules/CpsRate";
import PlanTip from "./modules/PlanTip";
import InsurePersonForm from "./modules/InsurePersonForm";
import AutoDeduct from "./modules/AutoDeduct";
import ProtocolRead from "./modules/ProtocolRead";
import NavTab from "./modules/NavTab";
import Detail from "@/api/detail.zhongan.yiliaobaozhang";
export default {
name: "GoodsDetail-CII",
components: {
DetailHeader,
DetailFooter,
CompactCellGroup,
CrRadioBtn,
Card,
// eslint-disable-next-line
Collapse,
CpsCase,
CpsProcess,
CpsQa,
Copyright,
PopupWithIframe,
GoodAction,
GoInsureDialog,
CpsProcessDetail,
CpsRate,
RecordLayer,
PlanTip,
InsurePersonForm,
AutoDeduct,
ProtocolRead,
NavTab
},
data() {
return {
...Detail,
popupShow: false,
currentPupopIndex: null,
formData: {
planValue: "5",
insured: "1",
payway: "1",
auto: false,
pact: false
},
goInsureState: false,
showLayer: false
};
},
computed: {
pupopData() {
const { popupArray, currentPupopIndex } = this;
return popupArray[currentPupopIndex] || {};
},
planCellData() {
const { planCellInfo } = this;
const { planValue } = this.formData;
return planCellInfo[planValue];
},
noticeCellData() {
const { noticeCellInfo } = this;
const { planValue } = this.formData;
return noticeCellInfo[planValue];
},
personFormOptions() {
const { insuredOptions, paywayOptions } = this;
return {
insuredOptions,
paywayOptions
};
}
},
methods: {
openIframePupop(index) {
if (index === 4) {
this.$router.push("/goods/plan");
return;
}
this.currentPupopIndex = index;
this.popupShow = true;
}
}
};
</script>
<style lang="less" src="./index.less" scoped></style>
src/views/Goods/Detail/CIIDetail.vue 0 → 100644
View file @ 73c2a98f
<template>
<div class="container">
<nav-tab :nav-list="navBarOptions" />
<detail-header @click="goInsureState = true" :det="headerInfo" />
<div class="det-body">
<card title="保险计划" :option="['查看详情']" @option-click="openIframePupop(4)">
<cr-radio-btn v-model="formData.planValue" :radio-data="planOptions" />
<compactCellGroup :cell-data="planCellData" :text-bold="true" />
<plan-tip :tip-list="planTipOptions" />
</card>
<div id="det_insure">
<insure-person-form v-model="formData" :radio-options="personFormOptions" />
<auto-deduct
v-model="formData.auto"
:cell-data="autoCellInfo"
@cell-click="openIframePupop"
/>
<protocol-read
v-model="formData.pact"
:cell-data="noticeCellData"
@cell-click="openIframePupop"
/>
</div>
<card class="intro" id="det_intro">
<cr-image
:src="item"
v-for="(item, index) in introImg"
:key="index"
width="100%"
height="auto"
/>
</card>
<cps-case :case-data="caseInfo" />
<div id="det_process">
<cps-process :process-data="processDetail" @click="openIframePupop(5)" />
</div>
<cps-qa :qa-data="qaInfo" />
</div>
<detail-footer :company-info="companyInfo" />
<copyright />
<good-action
@click="goInsureState = true"
@leftClick="goInsureState = true"
:content="goodActionInfo"
/>
<popup-with-iframe
v-model="popupShow"
:title="pupopData.title"
:content="pupopData.content"
:url="pupopData.url"
>
<cps-process-detail v-if="currentPupopIndex === 5" :process-data="processDetail" />
<cps-rate v-if="currentPupopIndex === 6" />
</popup-with-iframe>
<record-layer v-model="showLayer" desc="敬请期待" />
<go-insure-dialog v-model="goInsureState" />
</div>
</template>
<script>
/**
* @description: 华太轻重疾险 Critical illness insurance
*/
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 DetailFooter from "./modules/DetailFooter";
import CompactCellGroup from "@/components/CompactCellGroup";
import CpsCase from "./modules/CpsCase";
import CpsProcess from "./modules/CpsProcess";
import CpsQa from "./modules/CpsQA";
import PopupWithIframe from "@/components/PopupWithIframe";
import GoInsureDialog from "./modules/GoInsureDialog";
import CpsProcessDetail from "./modules/CpsProcessDetail";
import CpsRate from "./modules/CpsRate";
import PlanTip from "./modules/PlanTip";
import InsurePersonForm from "./modules/InsurePersonForm";
import AutoDeduct from "./modules/AutoDeduct";
import ProtocolRead from "./modules/ProtocolRead";
import NavTab from "./modules/NavTab";
import Detail from "@/api/detail.huatai.zhongjixian";
export default {
name: "GoodsDetail-CII",
components: {
DetailHeader,
DetailFooter,
CompactCellGroup,
CrRadioBtn,
Card,
// eslint-disable-next-line
Collapse,
CpsCase,
CpsProcess,
CpsQa,
Copyright,
PopupWithIframe,
GoodAction,
GoInsureDialog,
CpsProcessDetail,
CpsRate,
RecordLayer,
PlanTip,
InsurePersonForm,
AutoDeduct,
ProtocolRead,
NavTab
},
data() {
return {
...Detail,
popupShow: false,
currentPupopIndex: null,
formData: {
planValue: "3",
insured: "1",
payway: "1",
auto: false,
pact: false
},
goInsureState: false,
showLayer: false
};
},
computed: {
pupopData() {
const { popupArray, currentPupopIndex } = this;
return popupArray[currentPupopIndex] || {};
},
planCellData() {
const { planCellInfo } = this;
const { planValue } = this.formData;
return planCellInfo[planValue];
},
noticeCellData() {
const { noticeCellInfo } = this;
const { planValue } = this.formData;
return noticeCellInfo[planValue];
},
personFormOptions() {
const { insuredOptions, paywayOptions } = this;
return {
insuredOptions,
paywayOptions
};
}
},
methods: {
openIframePupop(index) {
if (index === 4) {
this.$router.push("/goods/plan");
return;
}
this.currentPupopIndex = index;
this.popupShow = true;
}
}
};
</script>
<style lang="less" src="./index.less" scoped></style>
src/views/Goods/Detail/LIDetail.vue 0 → 100644
View file @ 73c2a98f
<template>
<div class="container">
<nav-tab :nav-list="navBarOptions" />
<detail-header @click="goInsureState = true" :det="headerInfo">
<div class="li-header">
<plan-tip :tip-list="planTipOptions" />
<cr-divider :hairline="false" :style="{ color: '#ECE9E9' }" />
<h5>什么样的人需要定期寿险？</h5>
<p>有房贷、有车贷的家庭顶梁柱</p>
<p>有子女抚养、老人赡养的家庭依靠</p>
<p>家庭主要收入来源的贡献者</p>
</div>
</detail-header>
<div class="det-body">
<card
title="保险计划"
:footer="true"
:option="['查看详情']"
@option-click="openIframePupop(4)"
>
<compactCellGroup :cell-data="planCellInfo" :text-bold="true" />
<div class="z" slot="footer">
<div class="cal-footer-num">
<h4>155<small>元/年起</small></h4>
</div>
<cr-button type="warning">算一算保费</cr-button>
</div>
</card>
<card class="intro" id="det_intro">
<cr-image
:src="item"
v-for="(item, index) in introImg"
:key="index"
width="100%"
height="auto"
/>
</card>
<cps-case :case-data="caseInfo" />
<div id="det_process">
<cps-process :process-data="processDetail" @click="openIframePupop(5)" />
</div>
<protocol-read
title="理赔须知"
:options="[]"
:text-bold="true"
v-model="formData.pact"
:cell-data="noticeCellInfo"
@cell-click="openIframePupop"
>
<div class="important-intro">
<h6 class="important-intro-title">重点说明</h6>
<ul class="important-intro-list">
<li class="important-intro-item">
投保人可以为父母、配偶、子女，但是必须获得被保险人的同意并认可保险金额，如果未经被保险人同意并认可金额的，合同无效。
</li>
<li class="important-intro-item">
等待期内，被保险人如因非意外导致身故或身体全残，保险公司返还合同实际交纳的保险费，保险合同终止。
</li>
<li class="important-intro-item">本产品为消费型，保险期满后不返还保费。</li>
<li class="important-intro-item">
本产品有20天犹豫期，在犹豫期内退保不收取任何费用，无息返还所交保费。犹豫期过后退保将承担保费损失。如需退保，请拨打华贵保险，客服电话400-684-1888。
</li>
</ul>
</div>
</protocol-read>
<cps-qa :qa-data="qaInfo" />
</div>
<detail-footer :company-info="companyInfo" />
<copyright />
<good-action
@click="goInsureState = true"
@leftClick="modalShow = true"
:content="goodActionInfo"
/>
<popup-with-iframe
v-model="popupShow"
:title="pupopData.title"
:content="pupopData.content"
:url="pupopData.url"
>
<cps-process-detail v-if="currentPupopIndex === 5" :process-data="processDetail" />
<cps-rate v-if="currentPupopIndex === 6" />
</popup-with-iframe>
<record-layer v-model="showLayer" desc="敬请期待" />
<go-insure-dialog v-model="goInsureState" />
</div>
</template>
<script>
/**
* @description: 华贵大麦2020定期寿险 Life insurance
*/
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 DetailFooter from "./modules/DetailFooter";
import CompactCellGroup from "@/components/CompactCellGroup";
import CpsCase from "./modules/CpsCase";
import CpsProcess from "./modules/CpsProcess";
import CpsQa from "./modules/CpsQA";
import PopupWithIframe from "@/components/PopupWithIframe";
import GoInsureDialog from "./modules/GoInsureDialog";
import CpsProcessDetail from "./modules/CpsProcessDetail";
import CpsRate from "./modules/CpsRate";
import PlanTip from "./modules/PlanTip";
import ProtocolRead from "./modules/ProtocolRead";
import NavTab from "./modules/NavTab";
import Detail from "@/api/detail.huagui.shouxian";
export default {
name: "GoodsDetail-CII",
components: {
DetailHeader,
DetailFooter,
CompactCellGroup,
// eslint-disable-next-line
CrRadioBtn,
Card,
// eslint-disable-next-line
Collapse,
CpsCase,
CpsProcess,
CpsQa,
Copyright,
PopupWithIframe,
GoodAction,
GoInsureDialog,
CpsProcessDetail,
CpsRate,
RecordLayer,
PlanTip,
NavTab,
ProtocolRead
},
data() {
return {
...Detail,
popupShow: false,
currentPupopIndex: null,
formData: {
insured: "1",
payway: "1",
pact: false
},
goInsureState: false,
showLayer: false
};
},
computed: {
pupopData() {
const { popupArray, currentPupopIndex } = this;
return popupArray[currentPupopIndex] || {};
}
},
methods: {
openIframePupop(index) {
if (index === 4) {
this.$router.push("/goods/plan");
return;
}
this.currentPupopIndex = index;
this.popupShow = true;
}
}
};
</script>
<style lang="less" src="./index.less" scoped></style>
src/views/Goods/Detail/MIDetail.vue 0 → 100644
View file @ 73c2a98f
<template>
<div class="container">
<nav-tab :nav-list="navBarOptions" />
<detail-header @click="goInsureState = true" :det="headerInfo" />
<div class="det-body">
<card title="保险计划" :option="['查看详情']" @option-click="openIframePupop(4)">
<compactCellGroup :cell-data="planCellInfo" :text-bold="true" />
<plan-tip :tip-list="planTipOptions" />
</card>
<div id="det_insure">
<insure-person-form v-model="formData" :radio-options="personFormOptions" />
<auto-deduct
v-model="formData.auto"
:cell-data="autoCellInfo"
@cell-click="openIframePupop"
/>
<protocol-read
v-model="formData.pact"
:cell-data="noticeCellInfo"
@cell-click="openIframePupop"
/>
</div>
<card class="intro" id="det_intro">
<cr-image
:src="item"
v-for="(item, index) in introImg"
:key="index"
width="100%"
height="auto"
/>
</card>
<cps-case :case-data="caseInfo" />
<div id="det_process">
<cps-process :process-data="processDetail" @click="openIframePupop(5)" />
</div>
<cps-qa :qa-data="qaInfo" />
</div>
<detail-footer :company-info="companyInfo" />
<copyright />
<good-action
@click="goInsureState = true"
@leftClick="modalShow = true"
:content="goodActionInfo"
/>
<popup-with-iframe
v-model="popupShow"
:title="pupopData.title"
:content="pupopData.content"
:url="pupopData.url"
>
<cps-process-detail v-if="currentPupopIndex === 5" :process-data="processDetail" />
<cps-rate v-if="currentPupopIndex === 6" />
</popup-with-iframe>
<record-layer v-model="showLayer" desc="敬请期待" />
<go-insure-dialog v-model="goInsureState" />
</div>
</template>
<script>
/**
* @description: 泰康600万医疗保障 medical insurance
*/
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 DetailFooter from "./modules/DetailFooter";
import CompactCellGroup from "@/components/CompactCellGroup";
import CpsCase from "./modules/CpsCase";
import CpsProcess from "./modules/CpsProcess";
import CpsQa from "./modules/CpsQA";
import PopupWithIframe from "@/components/PopupWithIframe";
import GoInsureDialog from "./modules/GoInsureDialog";
import CpsProcessDetail from "./modules/CpsProcessDetail";
import CpsRate from "./modules/CpsRate";
import PlanTip from "./modules/PlanTip";
import InsurePersonForm from "./modules/InsurePersonForm";
import AutoDeduct from "./modules/AutoDeduct";
import ProtocolRead from "./modules/ProtocolRead";
import NavTab from "./modules/NavTab";
import Detail from "@/api/detail.taikang.yiliaobaozhang";
export default {
name: "GoodsDetail-CII",
components: {
DetailHeader,
DetailFooter,
CompactCellGroup,
// eslint-disable-next-line
CrRadioBtn,
Card,
// eslint-disable-next-line
Collapse,
CpsCase,
CpsProcess,
CpsQa,
Copyright,
PopupWithIframe,
GoodAction,
GoInsureDialog,
CpsProcessDetail,
CpsRate,
RecordLayer,
PlanTip,
InsurePersonForm,
AutoDeduct,
ProtocolRead,
NavTab
},
data() {
return {
...Detail,
popupShow: false,
currentPupopIndex: null,
formData: {
insured: "1",
payway: "1",
medical: "1",
auto: false,
pact: false
},
goInsureState: false,
showLayer: false
};
},
computed: {
pupopData() {
const { popupArray, currentPupopIndex } = this;
return popupArray[currentPupopIndex] || {};
},
personFormOptions() {
const { insuredOptions, paywayOptions, medicalOptions } = this;
return {
insuredOptions,
paywayOptions,
medicalOptions
};
}
},
methods: {
openIframePupop(index) {
if (index === 4) {
this.$router.push("/goods/plan");
return;
}
this.currentPupopIndex = index;
this.popupShow = true;
}
}
};
</script>
<style lang="less" src="./index.less" scoped></style>
src/views/Goods/Detail/index.less
View file @ 73c2a98f
...@@ -28,3 +28,74 @@ ...@@ -28,3 +28,74 @@
margin-bottom: 0; margin-bottom: 0;
} }
} }
.li-header {
text-align: left;
.plan-tip {
justify-content: space-between;
font-size: @font-size-14;
padding-bottom: 4px;
}
.svg-icon {
height: 14px;
width: 14px;
}
h5 {
font-size: @font-size-18;
color: @orange-dark;
font-weight: @font-weight-bold;
margin-bottom: 16px;
}
p {
font-size: @font-size-14;
color: @black;
line-height: @line-height-lg;
}
}
.cal-footer {
display: flex;
justify-content: space-between;
align-items: center;
padding: 12px 0 20px;
&-num {
h4 {
color: @red;
font-weight: @font-weight-bold;
font-size: @font-size-20;
line-height: @line-height-md;
}
small {
margin-left: 4px;
color: @gray-4;
line-height: @line-height-sm;
font-size: @font-size-12;
}
}
.cr-button {
border-radius: @border-radius-sm !important;
font-size: @font-size-12;
height: @button-default-height !important;
line-height: @button-default-line-height !important;
width: 110px;
}
}
.important-intro {
padding-top: 16px;
&-title {
font-weight: @font-weight-bold;
font-size: @font-size-14;
color: @black;
line-height: @line-height-lg;
margin-bottom: 8px;
}
&-list {
padding-left: 14px;
}
&-item {
list-style-type: decimal;
padding-left: 8px;
font-size: @font-size-12;
line-height: @line-height-sm + 2;
color: @gray-5;
margin-bottom: 12px;
}
}
\ No newline at end of file
src/views/Goods/Detail/index.vue
View file @ 73c2a98f
<template> <template>
<div class="container"> <div>
<nav-tab :nav-list="navBarOptions" /> <cii-detail v-if="detailType === 'cii'" />
<detail-header @click="goInsureState = true" :det="headerInfo" /> <mi-detail v-if="detailType === 'mi'" />
<div class="det-body"> <ai-detail v-if="detailType === 'ai'" />
<card title="保险计划" :option="['查看详情']" @option-click="openIframePupop(4)"> <li-detail v-if="detailType === 'li'" />
<cr-radio-btn v-model="formData.planValue" :radio-data="planOptions" />
<compactCellGroup :cell-data="planCellData" :text-bold="true" />
<plan-tip :tip-list="planTipOptions" />
</card>
<div id="det_insure">
<insure-person-form v-model="formData" :radio-options="personFormOptions" />
<auto-deduct
v-model="formData.auto"
:cell-data="autoCellInfo"
@cell-click="openIframePupop"
/>
<protocol-read
v-model="formData.pact"
:cell-data="noticeCellData"
@cell-click="openIframePupop"
/>
</div>
<card class="intro" id="det_intro">
<cr-image
:src="item"
v-for="(item, index) in introImg"
:key="index"
width="100%"
height="auto"
/>
</card>
<cps-case :case-data="caseInfo" />
<div id="det_process">
<cps-process :process-data="processDetail" @click="openIframePupop(5)" />
</div>
<cps-qa :qa-data="qaInfo" />
</div>
<detail-footer :company-info="companyInfo" />
<copyright />
<good-action @click="goInsureState = true" @leftClick="modalShow = true" />
<popup-with-iframe
v-model="popupShow"
:title="pupopData.title"
:content="pupopData.content"
:url="pupopData.url"
>
<cps-process-detail v-if="currentPupopIndex === 5" :process-data="processDetail" />
<cps-rate v-if="currentPupopIndex === 6" />
</popup-with-iframe>
<record-layer v-model="showLayer" desc="敬请期待" />
<go-insure-dialog v-model="goInsureState" />
</div> </div>
</template> </template>
<script> <script>
import CrRadioBtn from "@/components/CrRadioBtn"; import ciiDetail from "./CIIDetail";
import Card from "@/components/Card"; import miDetail from "./MIDetail";
import Copyright from "@/components/Copyright"; import liDetail from "./LIDetail";
import GoodAction from "@/components/GoodAction"; import aiDetail from "./AIDetail";
import RecordLayer from "@/components/RecordLayer";
import Collapse from "@/components/Collapse";
import DetailHeader from "./modules/DetailHeader";
import DetailFooter from "./modules/DetailFooter";
import CompactCellGroup from "@/components/CompactCellGroup";
import CpsCase from "./modules/CpsCase";
import CpsProcess from "./modules/CpsProcess";
import CpsQa from "./modules/CpsQA";
import PopupWithIframe from "@/components/PopupWithIframe";
import GoInsureDialog from "./modules/GoInsureDialog";
import CpsProcessDetail from "./modules/CpsProcessDetail";
import CpsRate from "./modules/CpsRate";
import PlanTip from "./modules/PlanTip";
import InsurePersonForm from "./modules/InsurePersonForm";
import AutoDeduct from "./modules/AutoDeduct";
import ProtocolRead from "./modules/ProtocolRead";
import NavTab from "./modules/NavTab";
import Detail from "@/api/detail.huataizhongjixian";
export default { export default {
name: "GoodsDetail", name: "GoodsDetail",
components: { components: {
DetailHeader, ciiDetail,
DetailFooter, miDetail,
CompactCellGroup, aiDetail,
CrRadioBtn, liDetail
Card,
// eslint-disable-next-line
Collapse,
CpsCase,
CpsProcess,
CpsQa,
Copyright,
PopupWithIframe,
GoodAction,
GoInsureDialog,
CpsProcessDetail,
CpsRate,
RecordLayer,
PlanTip,
InsurePersonForm,
AutoDeduct,
ProtocolRead,
NavTab
}, },
data() { data() {
return { return {
...Detail, detailType: "li"
popupShow: false,
currentPupopIndex: null,
formData: {
planValue: "3",
insured: "1",
payway: "1",
auto: false,
pact: false
},
goInsureState: false,
showLayer: false
}; };
}, },
computed: { mounted() {
pupopData() { // this.detailType = this.$route.query.type;
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天~50周岁" },
{ title: "保险期限", value: "1年" }
];
switch (planValue) {
case "3":
_data = [
{ title: "100种重大疾病医疗保险金", value: "30万" },
{ title: "40种轻症保险金", value: "6万" },
{ title: "投保年龄", value: "30天~50周岁" },
{ 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天~60周岁" },
{ title: "保险期限", value: "1年" }
];
break;
default:
break;
}
return _data;
},
noticeCellData() {
const { planValue } = this.formData;
return [
{ title: "投保年龄", value: `30~${planValue === "3" ? 5 : 6}0周岁` },
{ title: "保障期限", value: "1年（可续保至99周岁）" },
{ title: "等待期", value: "90天" },
{
title: "保费",
value: {
needSlot: true,
tpl: "保费与保额、被保人年龄有关<br />首月3元，次月5.6元/月起",
longTxt: true
}
}
];
},
personFormOptions() {
const { insuredOptions, paywayOptions } = this;
return {
insuredOptions,
paywayOptions
};
}
},
methods: {
openIframePupop(index) {
if (index === 4) {
this.$router.push("/goods/plan");
return;
}
this.currentPupopIndex = index;
this.popupShow = true;
}
} }
}; };
</script> </script>
<style lang="less" src="./index.less" scoped></style>
src/views/Goods/Detail/modules/CpsRate.vue
View file @ 73c2a98f
...@@ -31,7 +31,7 @@ ...@@ -31,7 +31,7 @@
<script> <script>
import crRadioBtn from "@/components/CrRadioBtn"; import crRadioBtn from "@/components/CrRadioBtn";
import detail from "@/api/detail.huataizhongjixian"; import detail from "@/api/detail.huatai.zhongjixian";
const { rateInfo } = detail; const { rateInfo } = detail;
export default { export default {
name: "GoodsDetail", name: "GoodsDetail",
...@@ -57,7 +57,7 @@ export default { ...@@ -57,7 +57,7 @@ export default {
amountOptions() { amountOptions() {
const { rateInfo, titleIndex } = this; const { rateInfo, titleIndex } = this;
const _length = rateInfo[titleIndex].list.length; const _length = rateInfo[titleIndex].list.length;
return detail[titleIndex].list.map((item, index) => `${_length - index}0万保额`); return rateInfo[titleIndex].list.map((item, index) => `${_length - index}0万保额`);
}, },
listOptions() { listOptions() {
const { rateInfo, titleIndex, amountIndex } = this; const { rateInfo, titleIndex, amountIndex } = this;
......
src/views/Goods/Detail/modules/DetailHeader.vue
View file @ 73c2a98f
...@@ -8,24 +8,27 @@ ...@@ -8,24 +8,27 @@
<div class="det-hd-recommend"> <div class="det-hd-recommend">
<h2 class="det-hd-recommend-h2">智能产品官-小果</h2> <h2 class="det-hd-recommend-h2">智能产品官-小果</h2>
<h1 class="det-hd-recommend-h1">为您优选推荐</h1> <h1 class="det-hd-recommend-h1">为您优选推荐</h1>
<cr-tag> <cr-tag v-if="props.det.company">
由 由
<strong>{{ props.det.company }}</strong> <strong>{{ props.det.company }}</strong>
承保 承保
</cr-tag> </cr-tag>
<div class="tag-placeholder" v-else></div>
</div> </div>
<div class="det-hd-insured" :class="{ stamp: props.det.stamp }"> <div class="det-hd-insured" :class="{ stamp: props.det.stamp }">
<h1 class="det-hd-insured-title">{{ props.det.title }}</h1> <h1 class="det-hd-insured-title">{{ props.det.title }}</h1>
<small class="det-hd-insured-sub"> <slot>
<slot>{{ props.det.sub }}</slot> <small class="det-hd-insured-sub">
</small> {{ props.det.sub }}
<h5 class="det-hd-insured-price" v-html="props.det.price"></h5> </small>
<cr-button type="warning" block @click="listeners.click">立即开启保障</cr-button> <h5 class="det-hd-insured-price" v-html="props.det.price"></h5>
<div class="det-hd-insured-people"> <cr-button type="warning" block @click="listeners.click">立即开启保障</cr-button>
已有 <div class="det-hd-insured-people">
<em>{{ props.det.insuredNum }}</em> 已有
位用户投保 <em>{{ props.det.insuredNum }}</em>
</div> 位用户投保
</div>
</slot>
</div> </div>
</div> </div>
</template> </template>
...@@ -154,4 +157,30 @@ export default { ...@@ -154,4 +157,30 @@ export default {
} }
} }
} }
.tag-placeholder {
height: 30px;
}
.taikang {
.det-hd {
&-recommend {
color: @black;
.cr-tag {
color: @white;
background: linear-gradient(178deg, rgba(114, 114, 114, 1) 0%, rgba(0, 0, 0, 1) 100%);
strong {
color: @orange-light;
}
}
}
}
}
.zhongan {
.det-hd {
&-recommend {
.cr-tag {
background: linear-gradient(180deg, rgba(122, 127, 255, 1) 0%, rgba(74, 78, 182, 1) 100%);
}
}
}
}
</style> </style>
src/views/Goods/Detail/modules/InsurePersonForm.vue
View file @ 73c2a98f
...@@ -4,6 +4,10 @@ ...@@ -4,6 +4,10 @@
<cr-cell-group class="insure-form"> <cr-cell-group class="insure-form">
<cr-field v-model="formData.selfName" placeholder="请输入投保人姓名" label="姓名" /> <cr-field v-model="formData.selfName" placeholder="请输入投保人姓名" label="姓名" />
<cr-field v-model="formData.selfIdNo" placeholder="信息保密，仅用于投保" label="身份证号" /> <cr-field v-model="formData.selfIdNo" placeholder="信息保密，仅用于投保" label="身份证号" />
<cr-field v-model="formData.selfIdNo" placeholder="请输入您的手机号码" label="手机号码" />
<cr-field v-model="formData.selfIdNo" placeholder="请输入短信验证码" label="验证码">
<a href="javascript:;" slot="button">获取验证码</a>
</cr-field>
</cr-cell-group> </cr-cell-group>
<h6 class="insure-form-title">为谁投保</h6> <h6 class="insure-form-title">为谁投保</h6>
<cr-radio-btn v-model="formData.insured" :radio-data="radioOptions.insuredOptions" /> <cr-radio-btn v-model="formData.insured" :radio-data="radioOptions.insuredOptions" />
...@@ -14,6 +18,13 @@ ...@@ -14,6 +18,13 @@
placeholder="信息保密，仅用于投保" placeholder="信息保密，仅用于投保"
label="身份证号" label="身份证号"
/> />
<cr-cell class="insure-form-item_nobg" v-if="radioOptions.medicalOptions">
<template slot="title">
<span>有无医保</span>
<cr-icon type="question-o" color="#ccc" />
</template>
<cr-radio-btn v-model="formData.medical" :radio-data="radioOptions.medicalOptions" />
</cr-cell>
<cr-cell title="缴费方式" class="insure-form-item_nobg"> <cr-cell title="缴费方式" class="insure-form-item_nobg">
<cr-radio-btn v-model="formData.payway" :radio-data="radioOptions.paywayOptions" /> <cr-radio-btn v-model="formData.payway" :radio-data="radioOptions.paywayOptions" />
</cr-cell> </cr-cell>
......
src/views/Goods/Detail/modules/NavTab.vue
View file @ 73c2a98f
...@@ -77,8 +77,8 @@ export default { ...@@ -77,8 +77,8 @@ export default {
const _val = this.navList[index].value; const _val = this.navList[index].value;
// 获取目标的 offsetTop // 获取目标的 offsetTop
const targetOffsetTop = document.querySelector(`#det_${_val}`).offsetTop; const targetOffsetTop = document.querySelector(`#det_${_val}`).offsetTop;
document.body.scrollTop = targetOffsetTop; document.body.scrollTop = targetOffsetTop - 60;
document.documentElement.scrollTop = targetOffsetTop; document.documentElement.scrollTop = targetOffsetTop - 60;
} }
} }
}; };
......
src/views/Goods/Detail/modules/ProtocolRead.vue
View file @ 73c2a98f
<template> <template>
<card title="投保须知" :option="['查看完整费率表']" footer="协议" @option-click="openIframe(6)"> <card :title="title" :option="options" footer="协议" @option-click="openIframe(6)">
<compactCellGroup :cell-data="cellData" /> <compactCellGroup :cell-data="cellData" />
<slot></slot>
<div class="insure-form-pact" slot="footer"> <div class="insure-form-pact" slot="footer">
<cr-checkbox shape="round" icon-size="13px" v-model="pact" checked-color="#FFC842"> <cr-checkbox shape="round" icon-size="13px" v-model="pact" checked-color="#FFC842">
投保前请阅读 投保前请阅读
...@@ -30,6 +31,18 @@ export default { ...@@ -30,6 +31,18 @@ export default {
Card Card
}, },
props: { props: {
title: {
type: String,
default() {
return "投保须知";
}
},
options: {
type: Array,
default() {
return ["查看完整费率表"];
}
},
value: null, value: null,
cellData: { cellData: {
type: Array, type: Array,
......
src/views/Goods/Plan/index.vue
View file @ 73c2a98f
...@@ -18,7 +18,7 @@ ...@@ -18,7 +18,7 @@
<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.huataizhongjixian"; import detail from "@/api/detail.huatai.zhongjixian";
const { planInfo } = detail; const { planInfo } = detail;
export default { export default {
name: "GoodsDetail", name: "GoodsDetail",
......
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