Skip to content

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

feat: 顾问首页

parent 04b0a228
Hide whitespace changes
Inline Side-by-side
Showing with 547 additions and 19 deletions
src/components/Collapse.vue
View file @ 31c1d729
......@@ -17,7 +17,7 @@
</div>
<div class="collapse-item-content">
<i class="collapse-item-content-icon">A:</i>
<div class="collapse-item-content-txt">{{ item.a }}</div>
<div class="collapse-item-content-txt" v-html="item.a"></div>
</div>
<cr-divider :hairline="false" :style="{ color: '#ebebeb', margin: 0 }" />
</div>
......
src/components/Tabbar.vue
View file @ 31c1d729
......@@ -37,6 +37,12 @@ const tabbarData = [
icon: "product",
activeIcon: "product-active"
},
{
name: "顾问",
path: "/consultant",
icon: "counselor",
activeIcon: "counselor-active"
},
{
name: "我的",
path: "/user",
......
src/router/index.js
View file @ 31c1d729
......@@ -34,6 +34,11 @@ const routes = [
name: "GoodsInform",
component: () => import("../views/Goods/Inform/index.vue")
},
{
path: "/consultant",
name: "Consultant",
component: () => import("../views/Consultant/index.vue")
},
{
path: "/user",
name: "User",
......
src/service/cherry-ui.js
View file @ 31c1d729
......@@ -39,7 +39,7 @@ const {
Tabbar,
TabbarItem,
// Navbar,
// Progress,
Progress,
// Skeleton,
Sticky
// Swipe,
......@@ -70,6 +70,7 @@ Vue.use(Form);
Vue.use(Tabbar);
Vue.use(TabbarItem);
Vue.use(Icon);
Vue.use(Progress);
Vue.use(Sticky);
Vue.use(Overlay);
Vue.use(Form);
......
src/style/mixins.less
View file @ 31c1d729
.cell-title-mixin {
h5 {
color: @black;
margin: 0 0 4px;
font-size: @font-size-16;
font-weight: bold;
line-height: @line-height-lg;
}
small {
display: block;
color: @gray-4;
font-size: @font-size-12;
line-height: @line-height-md;
}
}
\ No newline at end of file
.cell-title-mixin {
h5 {
color: @black;
margin: 0 0 4px;
font-size: @font-size-16;
font-weight: bold;
line-height: @line-height-lg;
}
small {
display: block;
color: @gray-4;
font-size: @font-size-12;
line-height: @line-height-md;
}
}
.sub-text-mixins {
font-size: @font-size-12;
color: @gray-4;
line-height: @line-height-sm;
}
\ No newline at end of file
src/views/Consultant/index.less 0 → 100644
View file @ 31c1d729
@import "../../style/var.less";
@import "../../style/mixins.less";
.item-show-mixin {
text-align: center;
.svg-icon {
height: 48px;
width: 48px;
}
h5 {
display: block;
margin: 10px 0 4px;
font-size: @font-size-14;
font-weight: @font-weight-bold;
line-height: @line-height-sm;
color: @black;
}
p {
display: block;
.sub-text-mixins();
color: @black;
}
}
.container {
overflow: hidden;
background-color: @background-color;
&::after {
content: " ";
display: block;
height: 60px;
}
}
.cul-hd {
background: url("../../assets/images/consultant/bg.png") top no-repeat;
background-size: contain;
padding: 10px 16px;
position: relative;
&-logo {
position: absolute;
left: -5px;
top: 26px;
width: 100px;
height: 32px;
}
&-rec {
text-align: center;
margin: 128px 0 109px;
&-title {
display: block;
font-size: @font-size-14;
font-weight: @font-weight-bold;
line-height: 18px;
color: #000;
}
&-sub {
display: block;
font-size: @font-size-11;
color: #000;
line-height: 18px;
}
}
&-card {
box-shadow: 0px 5px 25px 0px rgba(0, 0, 0, 0.07);
border-radius: 44px 14px 14px 14px;
padding: 20px 20px 32px;
background-color: #fff;
&-title {
.sub-text-mixins();
}
.cr-button {
height: @button-large-height + 2;
line-height: @button-large-line-height + 2;
font-size: @font-size-16;
}
&-foot {
position: relative;
}
}
&-discount {
position: absolute;
right: 0;
top: -19px;
background: linear-gradient(
180deg,
rgba(253, 132, 132, 1) 0%,
rgba(249, 76, 76, 1) 100%
);
border-bottom-left-radius: 4px !important;
font-size: 11px !important;
strong {
font-weight: 600;
margin-right: 3px;
}
del {
color: @red;
}
span {
color: @white;
}
em {
font-style: normal;
color: #FFC600;
}
}
&-progress {
padding: 12px 17px 40px;
}
&-service {
display: flex;
justify-content: space-around;
padding: 20px 0;
&-item {
.item-show-mixin();
}
}
&-stock {
&-title {
.sub-text-mixins();
text-align: center;
strong {
color: @black;
font-weight: @font-weight-bold;
}
}
}
}
.cul-det {
.card {
padding: 20px 16px;
@{deep} &-body {
margin-bottom: 0;
}
}
@{deep} .collapse-item-content {
font-size: @font-size-12;
}
}
.cul-odds {
&-sign {
display: flex;
justify-content: space-around;
padding: 10px 0 20px;
&-item {
&:nth-child(2) {
position: relative;
&::before,
&::after {
content: " ";
display: block;
position: absolute;
top: 10px;
width: 1px;
height: 111px;
background-color: #F6F6F6;
}
&::after {
right: -27px;
}
&::before {
left: -27px;
}
}
.item-show-mixin();
.svg-icon {
width: 56px;
height: 56px;
}
h5 {
font-size: @font-size-16;
}
p:last-child {
font-weight: @font-weight-bold;
}
}
}
&-list {
&-item {
margin-bottom: 5px;
}
&-title {
display: flex;
color: @black;
font-weight: @font-weight-bold;
padding: @padding-sm 0;
&-icon {
font-size: @font-size-12;
font-weight: @font-weight-bold;
font-style: normal;
line-height: @line-height-md - 2;
height: 20px;
text-align: center;
width: 20px;
margin-top: 2px;
border-radius: @border-radius-sm / 4 @border-radius-md / 2;
background-color: @orange-light;
box-shadow: 0px 6px 25px 0px rgba(255, 200, 66, 0.2);
}
&-txt {
margin-left: 10px;
font-weight: @font-weight-bold;
font-size: @font-size-14;
line-height: @line-height-lg;
}
}
&-content {
color: @gray-5;
font-size: @font-size-12;
background-color: @gray-1;
border-radius: @border-radius-md;
padding: 16px;
line-height: @line-height-sm + 2;
.svg-icon {
height: 13px;
width: 13px;
margin-right: 2px;
}
&-item {
display: flex;
justify-content: space-between;
margin-bottom: 8px;
&:last-child {
margin-bottom: 0;
}
}
&-title {
font-weight: @font-weight-bold;
}
&-txt {
margin-left: 8px;
width: 216px;
}
}
}
}
\ No newline at end of file
src/views/Consultant/index.vue 0 → 100644
View file @ 31c1d729
<template>
<div class="container">
<div class="cul-hd">
<img src="../../assets/logo-top.png" alt="logo" class="cul-hd-logo" />
<div class="cul-hd-rec">
<h4 class="cul-hd-rec-title">最高节省50%保费</h4>
<small class="cul-hd-rec-sub">帮你量身选保险</small>
</div>
<div class="cul-hd-card">
<div class="cul-hd-card-title">您将获得的服务</div>
<div class="cul-hd-service">
<div class="cul-hd-service-item" v-for="(item, index) in serviceList" :key="index">
<svg-icon :icon-class="item.icon" />
<h5>{{ item.title }}</h5>
<p>{{ item.sub }}</p>
</div>
</div>
<div class="cul-hd-stock">
<h4 class="cul-hd-stock-title">
还剩
<strong>126</strong>份
</h4>
<div class="cul-hd-progress">
<cr-progress
:show-pivot="false"
stroke-width="6"
color="#FFC842"
track-color="#F9F3F3"
:percentage="25"
/>
</div>
</div>
<div class="cul-hd-card-foot">
<cr-button type="warning" block>0.99元聘请</cr-button>
<cr-tag class="cul-hd-discount" shape="round">
<strong>限时优惠</strong>
<del>
<span>原价</span>
<em>199</em>
<span>元</span>
</del>
</cr-tag>
</div>
</div>
</div>
<div class="cul-det">
<card title="想买保险，你是不是也有这些疑问?">
<cr-image src="@/assets/images/consultant/intro.png" width="100%" height="auto" />
</card>
<card title="芒果保险·1对1保险顾问来帮您?">
<div class="cul-odds-sign">
<div class="cul-odds-sign-item" v-for="(item, index) in oddsList" :key="index">
<svg-icon :icon-class="item.icon" />
<h5>{{ item.title }}</h5>
<p v-for="(it, index) in item.sub" :key="index">{{ it }}</p>
</div>
</div>
<div class="cul-odds-list">
<div class="cul-odds-list-item" v-for="(item, index) in oddsInsureList" :key="index">
<div class="cul-odds-list-title">
<i class="cul-odds-list-title-icon">{{ index + 1 }}</i>
<span class="cul-odds-list-title-txt">{{ item.title }}</span>
</div>
<div class="cul-odds-list-content">
<div class="cul-odds-list-content-item" v-for="(it, idx) in item.children" :key="idx">
<div class="cul-odds-list-content-title">
<svg-icon icon-class="check-circle" />
{{ it[0] }}
</div>
<div class="cul-odds-list-content-txt">{{ it[1] }}</div>
</div>
</div>
</div>
</div>
</card>
<cps-qa :qa-data="qaInfo" :more="false" />
</div>
<tabbar />
</div>
</template>
<script>
import Tabbar from "@/components/Tabbar";
import Card from "@/components/Card";
import Collapse from "@/components/Collapse";
import CpsQa from "../Goods/Detail/modules/CpsQA";
export default {
name: "Consultant",
components: {
Tabbar,
Card,
CpsQa,
// eslint-disable-next-line
Collapse
},
data() {
return {
serviceList: [
{ icon: "team", title: "资深", sub: "保险精算团队" },
{ icon: "card", title: "专属", sub: "保险顾问" },
{ icon: "computer", title: "全程", sub: "一站式服务" }
],
oddsList: [
{ icon: "ticket-shadow", title: "省钱", sub: ["最高节省", "50%保费"] },
{ icon: "shield-shadow", title: "放心", sub: ["中立客观", "量身定制"] },
{
icon: "ok-shadow",
title: "专业",
sub: ["条款解读", "有效投保", "协助理赔"]
}
],
oddsInsureList: [
{
title: "投保前",
children: [
["全方位评估:", "360°筛查、识别、评估您的家庭风险"],
[
"量身筛选:",
"根据您的自身情况，分析对比几百款产品，选出最适合的保障方案，最高节省50%保费"
],
["保单诊断:", "全面评估已有保单，中立、客观的给您提供针对性的意见 "]
]
},
{
title: "投保中",
children: [
["条款解读:", "为您解释复杂难懂的条款"],
["有效投保:", "为您做好健康告知，做到有效投保"]
]
},
{
title: "省钱",
children: [["协助理赔:", "申请理赔时，理赔专家全程协助"]]
}
],
qaInfo: [
{
q: "有了社保，还需要买保险吗？",
a: `<p style="margin-bottom: 5px;">需要的。社保是基础保障，优势是覆盖范围广，劣势是抵御风险能力有限，社保报销外的自付部分，可以用商业保险来保障。</p>
<p style="margin-bottom: 5px;">比如【百万医疗险】的作用是补充社保，报销因大病造成的高额医疗负担；</p>
<p style="margin-bottom: 5px;">比如【重大疾病险】的作用是弥补因病造成的收入损失、维持家庭正常运转的成本；</p>
<p style="margin-bottom: 5px;">比如【意外险】的作用是保障意外风险，弥补家庭劳动力确实造成的收入损失。</p>
<p style="margin-bottom: 5px;">比如【寿险】的作用是身故赔付，是对家庭责任的延续。</p>
`
},
{
q: "我是小白，买保险应该怎么买？",
a: `<p style="margin-bottom: 5px;">健康类保险最基本的分为【医疗险】【重疾险】【意外险】【定期寿险】四类。</p>
<p style="margin-bottom: 5px;">【医疗险】通常需要提供“医疗票据”实报实销，赔付的保险金保障了因“疾病”、“意外”产生的医疗费用。</p>
<p style="margin-bottom: 5px;">【重疾险】通常需要提供“确诊证明”一次性获得赔付的保险金，前提是罹患的重大疾病在合同约定内。</p>
<p style="margin-bottom: 5px;">【意外险】通常需要提供“身故证明”或“致残证明”获得赔付的保险金，前提是“身故”、“致残”是因意外事件导致。</p>
<p style="margin-bottom: 5px;">【定期寿险】通常需要提供“身故证明”一次性赔付，赔付的保险金在一定程度上，缓解了家庭因被保人身故导致的经济压力。</p>
`
},
{
q: "百万医疗险和重大疾病险有什么区别？",
a: `<p style="margin-bottom: 5px;">【医疗险】和【重疾险】的区别主要有2种。</p>
<p style="margin-bottom: 5px;">一、【医疗险】是报销型，合理医疗费花多少报多少。<br />
【重疾险】是给付型，确诊后即可获得赔付，买多少保额赔多少钱。</p>
<p style="margin-bottom: 5px;"> 二、【医疗险】的本质是应对医疗支出。<br />
【重疾险】的本质是弥补因病导致的收入损失。</p>
`
},
{
q: "我是中低收入，应该怎么买保险？",
a: `<p style="margin-bottom: 5px;">对于大部分家庭来讲，每年比较合理的保费支出占可支配收入的5%~10%。</p>
<p style="margin-bottom: 5px;">低收入家庭：建议配置【医疗险】+【意外险】</p>
<p style="margin-bottom: 5px;">中收入家庭：建议酌情配置【医疗险】+【重疾险】+【意外险】</p>
<p style="margin-bottom: 5px;">有条件的家庭：可以配置【高端医疗险】+【重疾险】+【意外险】+【寿险】</p>`
},
{
q: "“消费型保险”和“返还型保险”是什么意思？",
a: `<p style="margin-bottom: 5px;">简单讲，“消费型保险”在合同到期后不返还保费，“返还型保险”在合同到期后返还保费。</p>
<p style="margin-bottom: 5px;">【消费型保险】重点在“保障”，合同期内发生风险，保险公司赔偿保险金，合同期外发生风险，保险公司不赔偿也不退回保费。</p>
<p style="margin-bottom: 5px;">【返还型保险】重点在“返还”，合同期内发生风险，保险公司赔偿保险金，合同到期未赔偿，保险公司退回保费。</p>
<p style="margin-bottom: 5px;">两种类型的保险各有优势，而且“返回型保险”种类繁多，建议投保人咨询“闪电保险1对1保险顾问”进行详细了解。</p>
`
},
{
q: "医疗险可以重复购买吗?",
a: `<p style="margin-bottom: 5px;">不建议重复购买。</p>
<p style="margin-bottom: 5px;">医疗险属于报销型，原则上报销后的医疗费不得高于已支付的医疗费。</p>
<p style="margin-bottom: 5px;">医疗险在报销时，通常由一家保险公司报销，如果达到报销额度上限还未报销完，且购买其他医疗险，可由第二家保险公司接着报销。</p>
<p style="margin-bottom: 5px;">现在常见的【百万医疗险】保额可达600万，基本上可以覆盖所有的医疗费用。</p>`
}
]
};
},
mounted() {}
};
</script>
<style lang="less" src="./index.less" scoped></style>
src/views/Consultant/modules/AiTestTip.vue 0 → 100644
View file @ 31c1d729
<template functional>
<div class="ai-test">
<div class="ai-test-tip">
<h5>不知道怎么买保险</h5>
<small>试一试智能风险评测，推荐最适合你的保险</small>
</div>
<cr-row class="ai-test-cell" type="flex" align="center">
<cr-col span="5" class="ai-test-cell-image">
<cr-image width="60px" height="68px" src="@/assets/images/goods/ai-mongo.png" />
</cr-col>
<div class="ai-test-cell-title">
<h5>智能<span>风险测评</span></h5>
<small>AI小果：为您提供30s快速测评</small>
</div>
<div class="ai-test-cell-btn">
<cr-button type="warning">开始测评</cr-button>
</div>
</cr-row>
</div>
</template>
<script>
export default {
name: "AiTestTip"
};
</script>
<style lang="less" scoped>
@import "../../../style/var.less";
@import "../../../style/mixins.less";
.ai-test {
padding: 20px 16px 25.5px;
&-tip {
text-align: center;
.cell-title-mixin();
margin-bottom: @padding-md;
}
&-cell {
background-color: @white;
border-radius: @border-radius-md;
padding: 0 0 0 @padding-xs;
height: 72px;
&-image {
align-self: flex-end;
.cr-image {
display: block;
margin: 0 auto;
}
}
&-title {
padding: 8px 10px 0 5px;
.cell-title-mixin();
h5 {
margin: 0;
}
span {
color: @orange-dark;
font-weight: bold;
}
}
&-btn {
width: 76px;
.cr-button {
font-size: @button-default-font-size !important;
height: @button-default-height !important;
line-height: @button-default-line-height !important;
border-radius: @border-radius-sm !important;
}
}
}
}
</style>
src/views/Goods/Detail/modules/CpsQA.vue
View file @ 31c1d729
<template functional>
<card title="常见问题" class="qa-header">
<collapse :collapse-data="props.qaData" :more-btn="true" />
<collapse :collapse-data="props.qaData" :more-btn="props.more" />
</card>
</template>
<script>
export default {
name: "CpsQA"
name: "CpsQA",
props: {
qaData: {
type: Array,
default() {
return [];
}
},
more: {
type: Boolean,
default: true
}
}
};
</script>
......
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