Skip to content

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

feat: 顾问开发

parent 31c1d729
Show whitespace changes
Inline Side-by-side
Showing with 764 additions and 1 deletion
src/assets/icons/svg/flag-black.svg 0 → 100644
View file @ 70487d7e
<?xml version="1.0" encoding="UTF-8"?>
<svg width="28px" height="28px" viewBox="0 0 28 28" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<!-- Generator: Sketch 52.2 (67145) - http://www.bohemiancoding.com/sketch -->
<title>Group</title>
<desc>Created with Sketch.</desc>
<g id="顾问" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="聘请成功" transform="translate(-286.000000, -292.000000)">
<g id="Group-4" transform="translate(16.000000, 165.000000)">
<g id="Group" transform="translate(31.000000, 127.000000)">
<g id="编组-2备份" transform="translate(239.000000, 0.000000)">
<rect id="矩形" opacity="0.174107143" x="0" y="0" width="28" height="28"></rect>
<g id="编组" transform="translate(5.000000, 3.000000)" stroke-width="1.5">
<path d="M4,0.75 C2.20507456,0.75 0.75,2.20507456 0.75,4 L0.75,18.0840321 C0.75,18.7778162 0.972016476,19.4533941 1.38356853,20.011929 C2.44831657,21.4569442 4.48288167,21.7652116 5.92789687,20.7004636 L9.5,18.0683876 L13.0721031,20.7004636 C13.6306381,21.1120156 14.3062159,21.3340321 15,21.3340321 C16.7949254,21.3340321 18.25,19.8789576 18.25,18.0840321 L18.25,4 C18.25,2.20507456 16.7949254,0.75 15,0.75 L4,0.75 Z" id="矩形" stroke="#333333"></path>
<path d="M12.6184679,7.34507194 C11.7610968,6.5756448 10.3708384,6.54861094 9.47608795,7.28585366 L8.99915858,7.67882658 L8.52222828,7.28585479 C7.62724078,6.54842034 6.23532693,6.57632431 5.37856187,7.34622509 C4.54846489,8.09479872 4.53952596,9.28445061 5.3540918,10.0387327 L5.38207236,10.0642878 L5.45136557,10.1366355 L8.84131833,14.1948452 C8.91400195,14.2625649 9.05338824,14.2683195 9.13354047,14.2139584 L12.5470789,10.1387093 L12.6203403,10.0628009 C13.4511847,9.31513493 13.4609153,8.12481993 12.6466299,7.37079539 L12.6184679,7.34507194 Z" id="路径" stroke="#333333"></path>
</g>
</g>
</g>
</g>
</g>
</g>
</svg>
\ No newline at end of file
src/router/index.js
View file @ 70487d7e
......@@ -39,6 +39,21 @@ const routes = [
name: "Consultant",
component: () => import("../views/Consultant/index.vue")
},
{
path: "/consultant/success",
name: "ConsultantSuccess",
component: () => import("../views/Consultant/Success/index.vue")
},
{
path: "/consultant/question",
name: "ConsultantQuestion",
component: () => import("../views/Consultant/Question/index.vue")
},
{
path: "/consultant/exclusive",
name: "ConsultantExclusive",
component: () => import("../views/Consultant/Exclusive/index.vue")
},
{
path: "/user",
name: "User",
......
src/views/Consultant/Exclusive/index.less 0 → 100644
View file @ 70487d7e
@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/avator-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/Exclusive/index.vue 0 → 100644
View file @ 70487d7e
<template>
<div class="container">
<div class="cul-hd">
<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 @click="$router.push('/consultant/success')">
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: "ConsultantExclusive",
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/Question/index.less 0 → 100644
View file @ 70487d7e
@import "../Success/index.less";
.cul-hd {
background: url("../../../assets/images/consultant/dotted-bg.png") top no-repeat;
background-size: contain;
&-pr {
padding: 50px 46px 60px;
}
&-card {
&-title {
display: flex;
justify-content: space-between;
}
&-footer {
text-align: center;
a {
.sub-text-mixins();
}
}
}
.card {
@{deep} &-header {
flex-wrap: wrap;
}
}
.radio-btn {
width: 100%;
justify-content: space-between;
flex-wrap: wrap;
@{deep} .cr-radio {
box-shadow: none;
height: 48px;
line-height: 48px;
flex: none;
width: 145px;
padding: 0;
margin-bottom: 12px;
margin-right: 0;
background-color: @gray-1;
&__label {
font-size: @font-size-16;
}
&.checked {
background-color: @orange-light;
}
}
}
}
.step {
font-size: @font-size-18;
font-weight: @font-weight-bold;
color: @black;
line-height:@line-height-lg + 4;
em {
font-style: normal;
font-size: @font-size-18;
font-weight: @font-weight-bold;
color: #E4D82B;
}
}
.cul-tip {
margin-top: 8px;
color: @gray-4;
}
src/views/Consultant/Question/index.vue 0 → 100644
View file @ 70487d7e
<template>
<div class="container">
<div class="cul-hd">
<div class="cul-hd-pr">
<div class="cul-process">
<div
class="cul-process-item"
v-for="(item, index) in processList"
:key="index"
:class="{ active: item.active }"
>
<svg-icon :icon-class="item.icon" />
<p>{{ item.sub }}</p>
</div>
</div>
</div>
<card title="1" footer="1">
<template slot="header">
<h5 class="cul-hd-card-title">您准备为谁买保险？</h5>
<span class="step"><em>1</em>/8</span>
<div class="cul-tip">
想为多人买保险的情况，请在和保险顾问沟通时说明信息，保险顾问会为每一位家人量身定制方案哦~=
</div>
</template>
<div class="cul-hd-card-body">
<cr-radio-btn v-model="formData.planValue" :radio-data="insuredOptions" />
</div>
<div slot="footer" class="cul-hd-card-footer">
<cr-button
type="warning"
size="large"
block
@click="$router.push('/consultant/exclusive')"
>
下一步
</cr-button>
<a href="javascsript:;">返回上一步</a>
</div>
</card>
</div>
</div>
</template>
<script>
import CrRadioBtn from "@/components/CrRadioBtn";
import Card from "@/components/Card";
export default {
name: "ConsultantQuestion",
components: {
Card,
CrRadioBtn
},
data() {
return {
formData: {},
insuredOptions: [
{ label: "本人", value: "1" },
{ label: "配偶", value: "2" },
{ label: "父母", value: "3" },
{ label: "子女", value: "4" }
],
processList: [
{ icon: "package-active", sub: "聘请成功", active: true },
{ icon: "page-active", sub: "完成问卷", active: true },
{ icon: "flag-black", sub: "顾问服务" }
]
};
},
mounted() {}
};
</script>
<style lang="less" src="./index.less" scoped></style>
src/views/Consultant/Success/index.less 0 → 100644
View file @ 70487d7e
@import "../../../style/var.less";
@import "../../../style/mixins.less";
.item-show-mixin {
text-align: center;
.svg-icon {
height: 28px;
width: 28px;
margin-bottom: 11px;
}
p {
display: block;
.sub-text-mixins();
color: @black;
&.active {
font-weight: @font-weight-bold;
}
}
}
.container {
overflow: hidden;
background-color: @background-color;
&::after {
content: " ";
display: block;
height: 60px;
}
}
.cul-hd {
background: url("../../../assets/images/consultant/avator-bg.png") top no-repeat;
background-size: contain;
padding: 10px 16px;
&-rec {
margin: 53px 0 42px;
&-title {
display: block;
font-size: @font-size-14 * 2;
font-weight: @font-weight-bold;
line-height: 40px;
color: @black;
margin-bottom: 8px;
}
&-sub {
display: block;
font-size: @font-size-12;
font-weight: @font-weight-bold;
color: @black;
line-height: 12px;
}
}
.card {
border-radius: @border-radius-md;
}
&-card {
&-title {
font-size: @font-size-18;
font-weight: @font-weight-bold;
color: @black;
line-height:@line-height-lg + 4;
}
&-body {
.cul-process {
background-color: @gray-1;
border-radius: @border-radius-md;
padding: 24px 10px;
}
}
}
}
.cul-process {
display: flex;
justify-content: space-between;
&-item {
.item-show-mixin();
.svg-icon {
margin-bottom: 8px;
}
position: relative;
&::after {
content: " ";
display: block;
position: absolute;
top: 15px;
left: -60px;
width: 120%;
height: 0;
border-top: 1px dashed @black;
}
&:first-child::after {
display: none;
}
&.active::after {
border-top: 1px solid @black;
}
}
}
.cul-tip {
.sub-text-mixins();
color: @gray-5;
margin-top: 24px;
}
src/views/Consultant/Success/index.vue 0 → 100644
View file @ 70487d7e
<template>
<div class="container">
<div class="cul-hd">
<div class="cul-hd-rec">
<h4 class="cul-hd-rec-title">聘请成功</h4>
<small class="cul-hd-rec-sub">立刻开始填写问卷吧</small>
</div>
<card title="1" footer="1">
<h5 class="cul-hd-card-title" slot="header">
仅需一步
<br />
开启顾问服务，定制保险方案
</h5>
<div class="cul-hd-card-body">
<div class="cul-process">
<div class="cul-process-item" v-for="(item, index) in processList" :key="index">
<svg-icon :icon-class="item.icon" />
<p>{{ item.sub }}</p>
</div>
</div>
<div class="cul-tip">
为了给您提供更精准的保险定制服务，请花1分钟填写问卷，让顾问更了解您。
</div>
</div>
<cr-button
type="warning"
size="large"
block
slot="footer"
@click="$router.push('/consultant/question')"
>
开始填写问卷
</cr-button>
</card>
</div>
<tabbar />
</div>
</template>
<script>
import Tabbar from "@/components/Tabbar";
import Card from "@/components/Card";
export default {
name: "ConsultantSuccess",
components: {
Tabbar,
Card
},
data() {
return {
processList: [
{ icon: "package-active", sub: "聘请成功", active: true },
{ icon: "page", sub: "完成问卷" },
{ icon: "flag", sub: "顾问服务" }
]
};
},
mounted() {}
};
</script>
<style lang="less" src="./index.less" scoped></style>
src/views/Consultant/index.vue
View file @ 70487d7e
......@@ -31,7 +31,9 @@
</div>
</div>
<div class="cul-hd-card-foot">
<cr-button type="warning" block>0.99元聘请</cr-button>
<cr-button type="warning" block @click="$router.push('/consultant/success')">
0.99元聘请
</cr-button>
<cr-tag class="cul-hd-discount" shape="round">
<strong>限时优惠</strong>
<del>
......
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