Skip to content

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

Merge branch 'feature/goods-all' into 'master' 

Feature/goods all

See merge request !21
parents cc6292d6 a57a1808
Hide whitespace changes
Inline Side-by-side
Showing with 1348 additions and 488 deletions
src/api/detail.huataizhongjixian.js 0 → 100644
View file @ 5f848301
/* 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 @ cc6292d6
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 @ cc6292d6
/* 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/components/Card.vue
View file @ 5f848301
......@@ -29,6 +29,11 @@
</template>
<script>
/**
* @description: 面板组件
* @param {type}
* @return:
*/
const OPTION_CLICK_EVENT = "option-click";
export default {
name: "Card",
......
src/components/Collapse.vue
View file @ 5f848301
<template>
<div>
<ul>
<li v-for="(item, index) in list" :key="index">
<p @click="changeContent(index)">{{ item.title }}</p>
<div class="box" v-show="item.showContent">11111</div>
</li>
</ul>
<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="javascript:;" @click="showMore">
<span>查看更多</span>
<span>隐藏</span>
<svg-icon icon-class="arrow-down" />
</a>
</div>
</div>
</template>
......@@ -13,21 +36,141 @@
export default {
name: "Collapse",
props: {
list: {
collapseData: {
type: Array,
required: true,
default() {
return [];
}
},
moreBtn: {
type: Boolean,
default: true
}
},
watch: {
collapseData: {
immediate: true,
deep: true,
handler(val) {
this.list = val.map(item => {
item.showItem = false;
return item;
});
}
}
},
data() {
return {
list: [],
more: false
};
},
methods: {
changeContent(index) {
//通过index拿到当前值
this.list[index].showContent = !this.list[index].showContent;
itemClick(index) {
let _item = this.list[index];
_item.show = !_item.show;
this.$set(this.list, index, _item);
},
showMore() {
this.more = !this.more;
}
}
};
</script>
<style></style>
<style lang="less" scoped>
@import "../style/var.less";
.collapse {
&-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/CompactCellGroup.vue → src/components/CompactCellGroup.vue
View file @ 5f848301
......@@ -25,6 +25,11 @@
</template>
<script>
/**
* @description: cr-cell样式调整版，缩小了间距
* @param {type}
* @return:
*/
const CELL_CLICK_EVENT = "click";
export default {
name: "CompactCellGroup",
......@@ -54,7 +59,7 @@ export default {
};
</script>
<style lang="less" scoped>
@import "../../../style/var.less";
@import "../style/var.less";
.sub-text-mixins {
font-size: @font-size-12;
color: @gray-4;
......
src/components/CrRadioBtn.vue
View file @ 5f848301
......@@ -11,6 +11,11 @@
</cr-radio-group>
</template>
<script>
/**
* @description: 针对cr-radio组件的样式调整
* @param {type}
* @return:
*/
const CHANGE_EVENT = "input";
export default {
name: "CrRadioBtn",
......
src/components/GoodAction.vue
View file @ 5f848301
......@@ -17,6 +17,11 @@
</template>
<script>
/**
* @description: 底部购买
* @param {type}
* @return:
*/
const LEFT_BTN_CLICK_EVENT = "leftClick";
const RIGHT_BTN_CLICK_EVENT = "click";
export default {
......
src/components/GoodList/index.vue
View file @ 5f848301
......@@ -67,6 +67,11 @@
</div>
</template>
<script>
/**
* @description: 商品列表，可以实现一级、二级嵌套显示
* @param {type}
* @return:
*/
export default {
name: "GoodsList",
props: {
......
src/views/Goods/modules/ProtocolIframe.vue → src/components/PopupWithIframe.vue
View file @ 5f848301
......@@ -11,14 +11,17 @@
<div class="protocol-title">{{ title }}</div>
<cr-divider :hairline="false" :style="{ color: '#F4F4F4', margin: 0 }" />
</div>
<!-- content -->
<div
class="protocol-content"
v-if="content && scrollRefresh && !$slots.default"
v-html="content"
></div>
<!-- iframe -->
<div class="protocol-frame-wrap" v-if="url && scrollRefresh">
<iframe class="protocol-frame" :src="url" frameborder="0" height="100%"></iframe>
</div>
<!-- slot -->
<div class="protocol-wrap" v-if="!content && scrollRefresh && $slots.default">
<slot></slot>
</div>
......@@ -26,9 +29,14 @@
</template>
<script>
/**
* @description: 弹框，基于cr-pupop，针对iframe等业务场景进行简单封装
* @param {type}
* @return:
*/
const CHANGE_EVENT = "input";
export default {
name: "SvgIcon",
name: "PopupWithIframe",
props: {
value: null,
title: {
......@@ -70,7 +78,7 @@ export default {
</script>
<style lang="less" scoped>
@import "../../../style/var.less";
@import "../style/var.less";
.body-wrap-mixin {
overflow-x: hidden;
overflow-y: auto;
......
src/router/index.js
View file @ 5f848301
......@@ -12,22 +12,22 @@ const routes = [
{
path: "/goods",
name: "Goods",
component: () => import(/* webpackChunkName: "goods" */ "../views/Goods/index.vue")
component: () => import("../views/Goods/index.vue")
},
{
path: "/goods/detail",
name: "GoodsDetail",
component: () => import(/* webpackChunkName: "goodsDetail" */ "../views/Goods/detail.vue")
component: () => import("../views/Goods/Detail/index.vue")
},
{
path: "/goods/plan",
name: "GoodsPlan",
component: () => import(/* webpackChunkName: "GoodsPlan" */ "../views/Goods/plan.vue")
component: () => import("../views/Goods/Plan/index.vue")
},
{
path: "/goods/inform",
name: "GoodsInform",
component: () => import(/* webpackChunkName: "GoodsInform" */ "../views/Goods/inform.vue")
component: () => import("../views/Goods/Inform/index.vue")
},
{
path: "/user",
......
src/service/cherry-ui.js
View file @ 5f848301
......@@ -35,7 +35,7 @@ const {
// Stepper,
// DatePicker,
// SwipeCell,
// Form,
Form,
Tabbar,
TabbarItem,
// Navbar,
......@@ -61,6 +61,7 @@ Vue.use(Radio);
Vue.use(RadioGroup);
Vue.use(Switch);
Vue.use(Tag);
Vue.use(Form);
Vue.use(Tabbar);
Vue.use(TabbarItem);
Vue.use(Icon);
......
src/views/Goods/Detail/index.less 0 → 100644
View file @ 5f848301
@import "../../../style/var.less";
.sub-text-mixins {
font-size: @font-size-12;
color: @gray-4;
line-height: @line-height-sm;
}
.container {
background-color: @background-color;
overflow: hidden;
&::after {
content: " ";
display: block;
height: 60px;
}
}
.intro {
margin: 10px 0;;
padding: 0;
.card-body {
margin-bottom: 0;
}
}
.det-body {
.card {
padding-bottom: 0;
}
@{deep} .card-body {
margin-bottom: 0;
}
}
src/views/Goods/detail.vue → src/views/Goods/Detail/index.vue
View file @ 5f848301
<template>
<div class="container">
<detail-header @click="goInsureState = true" />
<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" />
<div class="plan-tip">
<svg-icon icon-class="check-circle" />
<span class="plan-tip_offset">轻症赔付后，重疾保障继续有效</span>
<svg-icon icon-class="check-circle" />
<span>可逐年续保至99岁</span>
</div>
<plan-tip :tip-list="planTipOptions" />
</card>
<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="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="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"
checked-color="#FFC842"
>
投保前请阅读
</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>
</card>
<card class="intro">
<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"
......@@ -85,125 +30,86 @@
height="auto"
/>
</card>
<cps-demo />
<cps-process @click="openIframePupop" />
<cps-qa />
<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 />
<detail-footer :company-info="companyInfo" />
<copyright />
<good-action @click="goInsureState = true" @leftClick="showLayer = true" />
<protocol-iframe
<popup-with-iframe
v-model="popupShow"
:title="pupopData.title"
:content="pupopData.content"
:url="pupopData.url"
>
<cps-process-detail v-if="currentPupopIndex === 5" />
<cps-process-detail v-if="currentPupopIndex === 5" :process-data="processDetail" />
<cps-rate v-if="currentPupopIndex === 6" />
</protocol-iframe>
</popup-with-iframe>
<record-layer v-model="showLayer" desc="敬请期待" />
<go-insure-dialog v-model="goInsureState" />
</div>
</template>
<script>
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";
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";
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.huataizhongjixian";
export default {
name: "GoodsDetail",
components: {
detailHeader,
detailFooter,
compactCellGroup,
crRadioBtn,
card,
cpsDemo,
cpsProcess,
cpsQa,
copyright,
goInsureDialog,
goodAction,
protocolIframe,
cpsProcessDetail,
cpsRate,
RecordLayer
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 {
introImg: [intro01, intro02, intro03, intro04],
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" }
],
...Detail,
popupShow: false,
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: {
planValue: "3",
insured: "1",
......@@ -273,6 +179,13 @@ export default {
}
}
];
},
personFormOptions() {
const { insuredOptions, paywayOptions } = this;
return {
insuredOptions,
paywayOptions
};
}
},
methods: {
......@@ -287,4 +200,4 @@ export default {
}
};
</script>
<style lang="less" src="./detail.less" scoped></style>
<style lang="less" src="./index.less" scoped></style>
src/views/Goods/Detail/modules/AutoDeduct.vue 0 → 100644
View file @ 5f848301
<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/modules/CpsDemo.vue → src/views/Goods/Detail/modules/CpsCase.vue
View file @ 5f848301
<template>
<template functional>
<card class="cps-demo-title_np" title="理赔案例">
<div class="cps-demo">
<div class="cps-demo-header">
......@@ -7,33 +7,13 @@
</div>
<div class="cps-demo-body">
<div class="cps-demo-person">
<span>吴先生</span>
<span>46岁 北京 有社保</span>
<span>{{ props.caseData.name }}</span>
<span>{{ props.caseData.info }}</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 class="cps-demo-list-item" v-for="(item, index) in props.caseData.list" :key="index">
<div class="cps-demo-list-item-title">{{ item.title }}</div>
<div class="cps-demo-list-item-content">{{ item.event }}</div>
</div>
</div>
</div>
......@@ -42,23 +22,25 @@
</template>
<script>
import card from "@/components/Card";
export default {
name: "CpsDemo",
components: {
card
},
name: "CpsCase",
props: {
demoData: {
caseData: {
type: Object,
default() {}
default() {
return {
name: "",
info: "",
list: []
};
}
}
}
};
</script>
<style lang="less" scoped>
@import "../../../style/var.less";
@import "../../../../style/var.less";
.cps-demo {
&-title_np {
.card-header {
......@@ -66,7 +48,7 @@ export default {
}
}
&-header {
background: url(../../../assets/goods/detail/assistant-card.png) top no-repeat;
background: url(../../../../assets/goods/detail/assistant-card.png) top no-repeat;
background-size: contain;
padding: 24px 24px 21.5px;
h4 {
......
src/views/Goods/modules/CpsProcess.vue → src/views/Goods/Detail/modules/CpsProcess.vue
View file @ 5f848301
<template>
<card title="理赔流程" :option="['了解更多理赔信息']" @option-click="optionClick">
<template functional>
<card title="理赔流程" :option="['了解更多理赔信息']" @option-click="listeners.click">
<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" v-for="(item, index) in props.processData" :key="index">
<div class="cps-process-list-item-title">{{ index + 1 }}</div>
<div class="cps-process-list-item-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>
<h6>{{ item.title }}</h6>
<small v-html="item.desc"></small>
</div>
</div>
</div>
......@@ -29,28 +13,21 @@
</template>
<script>
import card from "@/components/Card";
export default {
name: "CpsProcess",
components: {
card
},
props: {
processData: {
type: Object,
default() {}
}
},
methods: {
optionClick() {
this.$emit("click", 5);
type: Array,
default() {
return [];
}
}
}
};
</script>
<style lang="less" scoped>
@import "../../../style/var.less";
@import "../../../../style/var.less";
.cps-process {
&-list {
position: relative;
......
src/views/Goods/process.less → src/views/Goods/Detail/modules/CpsProcessDetail.vue
View file @ 5f848301
@import "../../style/var.less";
@import "../../style/mixins.less";
<template functional>
<div class="cps-process-list">
<div class="cps-process-list-item" v-for="(item, index) in props.processData" :key="index">
<div class="cps-process-list-item-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>
export default {
name: "CpsProcessDetail",
processData: {
type: Array,
default() {
return [];
}
}
};
</script>
<style lang="less" scoped>
@import "../../../../style/var.less";
@import "../../../../style/mixins.less";
.cps-process {
&-list {
margin-bottom: 50px;
......@@ -58,3 +83,4 @@
}
}
}
</style>
src/views/Goods/Detail/modules/CpsQA.vue 0 → 100644
View file @ 5f848301
<template functional>
<card title="常见问题" class="qa-header">
<collapse :collapse-data="props.qaData" :more-btn="true" />
</card>
</template>
<script>
export default {
name: "CpsQA"
};
</script>
<style lang="less" scoped>
@import "../../../../style/var.less";
.qa {
&-header {
.card-header {
padding-bottom: 4px;
}
}
}
</style>
src/views/Goods/rate.vue → src/views/Goods/Detail/modules/CpsRate.vue
View file @ 5f848301
......@@ -69,4 +69,90 @@ export default {
methods: {}
};
</script>
<style lang="less" src="./rate.less" scoped></style>
<style lang="less" scoped>
@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;
}
}
}
</style>
src/views/Goods/modules/DetailFooter.vue → src/views/Goods/Detail/modules/DetailFooter.vue
View file @ 5f848301
<template>
<template functional>
<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>
<p class="det-footer-logo"><img src="../../../../assets/logo-foot.png" alt="logo" /></p>
<p
v-for="(item, index) in props.companyInfo"
:key="index"
:class="{ 'det-footer-offset': item.offset }"
>
{{ item.content }}
</p>
</div>
</template>
<script>
export default {
name: "DetailFooter",
data() {
return {};
props: {
companyInfo: {
type: Array,
default() {
return [];
}
}
}
};
</script>
<style lang="less" scoped>
@import "../../../style/var.less";
<style lang="less">
@import "../../../../style/var.less";
.det-footer {
padding: 25px 36px;
background-color: #fff;
......
src/views/Goods/modules/DetailHeader.vue → src/views/Goods/Detail/modules/DetailHeader.vue
View file @ 5f848301
<template>
<div class="det-hd">
<img src="../../../assets/logo-top.png" alt="logo" class="det-hd-logo" />
<template functional>
<div
class="det-hd"
:class="props.det.type"
:style="{ backgroundImage: 'url(' + props.det.bgSrc + ')' }"
>
<img src="../../../../assets/logo-top.png" alt="logo" class="det-hd-logo" />
<div class="det-hd-recommend">
<h2 class="det-hd-recommend-h2">智能产品官-小果</h2>
<h1 class="det-hd-recommend-h1">为您优选推荐</h1>
<cr-tag>
由
<strong>华泰财险</strong>承保
<strong>{{ props.det.company }}</strong>
承保
</cr-tag>
</div>
<div class="det-hd-insured">
<h1 class="det-hd-insured-title">30万重疾轻症保障</h1>
<small class="det-hd-insured-sub">100种重症+40种轻症确诊即赔</small>
<h5 class="det-hd-insured-price">
首月
<strong>3</strong>元
<small>次月5.6元/月起</small>
</h5>
<cr-button type="warning" block @click="btnClick">立即开启保障</cr-button>
<div class="det-hd-insured" :class="{ stamp: props.det.stamp }">
<h1 class="det-hd-insured-title">{{ props.det.title }}</h1>
<small class="det-hd-insured-sub">
<slot>{{ props.det.sub }}</slot>
</small>
<h5 class="det-hd-insured-price" v-html="props.det.price"></h5>
<cr-button type="warning" block @click="listeners.click">立即开启保障</cr-button>
<div class="det-hd-insured-people">
已有
<em>0</em>位用户投保
<em>{{ props.det.insuredNum }}</em>
位用户投保
</div>
</div>
</div>
</template>
<script>
const BTN_CLICK_EVENT = "click";
export default {
name: "DetailHeader",
data() {
return {};
},
methods: {
btnClick() {
this.$emit(BTN_CLICK_EVENT, 1);
props: {
det: {
type: Object,
default() {
return {
bgSrc: "",
type: "",
company: "",
title: "",
sub: "",
price: "",
insuredNum: 0
};
}
}
}
};
</script>
<style lang="less" scoped>
@import "../../../style/var.less";
<style lang="less">
@import "../../../../style/var.less";
.sub-text-mixins {
font-size: @font-size-12;
color: @gray-4;
line-height: @line-height-sm;
}
.det-hd {
background: url("../../../assets/goods/detail/bg-zhongjixian.png") top no-repeat;
background-color: transparent;
background-position: top;
background-repeat: no-repeat;
background-size: contain;
padding: 10px 16px;
&-logo {
......@@ -88,10 +101,13 @@ export default {
border-radius: @border-radius-md;
padding: 30px 32px;
text-align: center;
background: url(../../../assets/goods/detail/stamp.png) no-repeat;
background-repeat: no-repeat;
background-color: #fff;
background-position: bottom right;
background-size: 19%;
&.stamp {
background-image: url(../../../../assets/goods/detail/stamp.png);
}
&-title {
font-size: 32px;
font-weight: @font-weight-bold;
......
src/views/Goods/modules/GoInsureDialog.vue → src/views/Goods/Detail/modules/GoInsureDialog.vue
View file @ 5f848301
......@@ -36,12 +36,12 @@
</template>
<script>
import compactCellGroup from "./CompactCellGroup";
import CompactCellGroup from "@/components/CompactCellGroup";
const DIALOG_CHANGE_EVENT = "input";
export default {
name: "GoInsureDialog",
components: {
compactCellGroup
CompactCellGroup
},
props: {
value: null
......@@ -81,7 +81,7 @@ export default {
</script>
<style lang="less" scoped>
@import "../../../style/var.less";
@import "../../../../style/var.less";
.panel {
background-color: @white;
border-radius: @border-radius-md;
......@@ -99,7 +99,7 @@ export default {
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: url("../../../../assets/dialog-header-bg.png") right no-repeat;
background-size: 34px 25px;
background-position: right center;
h4 {
......
src/views/Goods/detail.less → src/views/Goods/Detail/modules/InsurePersonForm.vue
View file @ 5f848301
@import "../../style/var.less";
.sub-text-mixins {
font-size: @font-size-12;
color: @gray-4;
line-height: @line-height-sm;
}
.container {
background-color: @background-color;
overflow: hidden;
&::after {
content: " ";
display: block;
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 {
margin: 10px 0;;
padding: 0;
.card-body {
margin-bottom: 0;
}
}
.det-body {
.card {
padding-bottom: 0;
}
@{deep} .card-body {
margin-bottom: 0;
}
}
<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 @ 5f848301
<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 @ 5f848301
<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 @ 5f848301
<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>
src/views/Goods/inform.less → src/views/Goods/Inform/index.less
View file @ 5f848301
@import "../../style/var.less";
@import "../../../style/var.less";
.inform-container {
background-color: @white;
padding-top: 15px;
......
src/views/Goods/inform.vue → src/views/Goods/Inform/index.vue
View file @ 5f848301
......@@ -57,4 +57,4 @@ export default {
}
};
</script>
<style lang="less" src="./inform.less" scoped></style>
<style lang="less" src="./index.less" scoped></style>
src/views/Goods/plan.less → src/views/Goods/Plan/index.less
View file @ 5f848301
@import "../../style/var.less";
@import "../../../style/var.less";
.plan-container {
background-color: @white;
padding-bottom: 20px;
......
src/views/Goods/plan.vue → src/views/Goods/Plan/index.vue
View file @ 5f848301
......@@ -12,11 +12,11 @@
{{ item.url }}
</a>
</card>
<protocol-iframe v-model="popupShow" :title="pupopData.title" :url="pupopData.path" />
<popup-with-iframe v-model="popupShow" :title="pupopData.title" :url="pupopData.path" />
</div>
</template>
<script>
import protocolIframe from "./modules/ProtocolIframe";
import PopupWithIframe from "@/components/PopupWithIframe";
import card from "@/components/Card";
import detail from "@/api/detail.plan.mock";
......@@ -24,7 +24,7 @@ export default {
name: "GoodsDetail",
components: {
card,
protocolIframe
PopupWithIframe
},
data() {
return {
......@@ -51,4 +51,4 @@ export default {
}
};
</script>
<style lang="less" src="./plan.less" scoped></style>
<style lang="less" src="./index.less" scoped></style>
src/views/Goods/index.vue
View file @ 5f848301
<template>
<div class="container">
<!-- <cr-sticky class="goods-head">
<cr-sticky class="goods-head">
<cr-tabbar v-model="active" active-color="#333" inactive-color="#666">
<cr-tabbar-item>全部</cr-tabbar-item>
<cr-tabbar-item>成人</cr-tabbar-item>
<cr-tabbar-item>老年</cr-tabbar-item>
<cr-tabbar-item>少儿</cr-tabbar-item>
</cr-tabbar>
</cr-sticky> -->
</cr-sticky>
<good-list :list="goodsList" />
<record-layer v-model="showLayer" desc="敬请期待"></record-layer>
<!-- <ai-test-tip @click.native="showLayer = true" /> -->
<ai-test-tip @click.native="showLayer = true" />
<copyright :logo="true" />
<tabbar></tabbar>
</div>
</template>
<script>
// import AiTestTip from "./modules/AiTestTip";
import goodsList from "@/api/goodsList.mock";
import AiTestTip from "./modules/AiTestTip";
import GoodList from "@/components/GoodList/index";
import Tabbar from "@/components/Tabbar";
import goodsList from "@/api/goodsList.mock";
import copyright from "@/components/Copyright";
import RecordLayer from "@/components/RecordLayer";
export default {
name: "GoodsList",
components: {
// AiTestTip,
AiTestTip,
GoodList,
Tabbar,
copyright,
......
src/views/Goods/modules/AiTestTip.vue
View file @ 5f848301
<template>
<template functional>
<div class="ai-test">
<div class="ai-test-tip">
<h5>不知道怎么买保险</h5>
......@@ -6,7 +6,7 @@
</div>
<cr-row class="ai-test-cell" type="flex" align="center">
<cr-col span="5" class="ai-test-cell-image">
<cr-image width="60px" height="68px" :src="aiImg" />
<cr-image width="60px" height="68px" src="@/assets/goods/ai-mongo.png" />
</cr-col>
<div class="ai-test-cell-title">
<h5>智能<span>风险测评</span></h5>
......@@ -20,14 +20,8 @@
</template>
<script>
import aiImg from "@/assets/goods/ai-mongo.png";
export default {
name: "AiTestTip",
data() {
return {
aiImg
};
}
name: "AiTestTip"
};
</script>
<style lang="less" scoped>
......@@ -35,7 +29,6 @@ export default {
@import "../../../style/mixins.less";
.ai-test {
margin-bottom: 49px;
padding: 20px 16px 25.5px;
&-tip {
text-align: center;
......
src/views/Goods/modules/CpsQA.vue deleted 100644 → 0
View file @ cc6292d6
<template>
<card title="常见问题" class="collapse-header">
<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="javascript:;" @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" scoped>
@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/process.vue deleted 100644 → 0
View file @ cc6292d6
<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 deleted 100644 → 0
View file @ cc6292d6
@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
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