Skip to content

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

feat: 顾问

parent 9cf5120b
Expand all Hide whitespace changes
Inline Side-by-side
Showing with 650 additions and 230 deletions
src/assets/icons/svg/arrow-right.svg 0 → 100644
View file @ 4bbdd430
<?xml version="1.0" encoding="utf-8"?>
<svg width="13px" height="21px" viewBox="0 0 13 21" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg">
<desc>Created with Lunacy</desc>
<g id="Group-6" transform="translate(1.5 1.5)">
<path d="M0 0L10 9L0 18" id="Path-3" fill="none" stroke="#FFFFFF" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" />
</g>
</svg>
\ No newline at end of file
src/assets/icons/svg/order.svg 0 → 100644
View file @ 4bbdd430
This diff is collapsed.
src/router/index.js
View file @ 4bbdd430
...@@ -54,6 +54,11 @@ const routes = [ ...@@ -54,6 +54,11 @@ const routes = [
name: "ConsultantExclusive", name: "ConsultantExclusive",
component: () => import("../views/Consultant/Exclusive/index.vue") component: () => import("../views/Consultant/Exclusive/index.vue")
}, },
{
path: "/consultant/plan",
name: "ConsultantPlan",
component: () => import("../views/Consultant/Plan/index.vue")
},
{ {
path: "/user", path: "/user",
name: "User", name: "User",
......
src/style/index.less
View file @ 4bbdd430
...@@ -88,4 +88,43 @@ a { ...@@ -88,4 +88,43 @@ a {
} }
.cr-notify { .cr-notify {
font-size: @font-size-14; font-size: @font-size-14;
}
.table {
margin: 0;
width: 100%;
thead {
th {
color: @gray-5;
font-size: @font-size-12;
font-weight: @font-weight-bold;
padding: 12px 0 12px 18px;
text-align: left;
background-color: @gray-1;
&:first-child {
border-top-left-radius: @border-radius-lg;
border-bottom-left-radius: @border-radius-lg;
}
&: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: 12px 9px 12px 18px;
text-align: left;
border-bottom: 1px solid #ECE9E9;
}
td {
color: @black;
font-size: @font-size-12;
padding: @padding-sm + 2 @padding-md + 2;
border-bottom: 1px solid #ECE9E9;
text-align: left;
}
}
} }
\ No newline at end of file
src/views/Consultant/Exclusive/index.less
View file @ 4bbdd430
@import "../../../style/var.less"; @import "../index.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 { .container {
overflow: hidden; background-color: @white;
background-color: @background-color;
&::after {
content: " ";
display: block;
height: 60px;
}
} }
.cul-hd { .cul-hd {
background: url("../../../assets/images/consultant/avator-bg.png") top no-repeat; background: #fff url("../../../assets/images/consultant/culstor-bg.png") top no-repeat;
background-size: contain; background-size: contain;
padding: 10px 16px; display: flex;
position: relative; justify-content: center;
&-logo { align-items: flex-end;
position: absolute; padding: 0;
left: -5px; height: 249px;
top: 26px; &-info {
width: 100px; padding: 66px 0 40px 30px;
height: 32px; word-break: break-all;
} small {
&-rec {
text-align: center;
margin: 128px 0 109px;
&-title {
display: block; display: block;
font-size: @font-size-14; .sub-text-mixins();
font-size: @font-size-11;
color: @black;
}
h1 {
font-weight: @font-weight-bold; font-weight: @font-weight-bold;
line-height: 18px; font-size: @font-size-32;
color: #000; line-height: 45px;
margin-top: 7px;
} }
&-sub { .cr-tag {
display: block; display: block;
font-size: @font-size-11; margin: 4px 0 11px;
color: #000; width: 75px;
line-height: 18px; font-size: @font-size-12;
background: linear-gradient(
178deg,
rgba(114, 114, 114, 1) 0%,
rgba(0, 0, 0, 1) 100%
);
border-radius: 7px 3px 7px 3px;
} }
} }
}
.cul {
&-card { &-card {
box-shadow: 0px 5px 25px 0px rgba(0, 0, 0, 0.07); padding-bottom: 0 !important;
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 { &-contact {
padding: 12px 17px 40px;
}
&-service {
display: flex; display: flex;
justify-content: space-around; justify-content: space-between;
padding: 20px 0; &-qrcode {
&-item { background: @white;
.item-show-mixin(); border-radius: @border-radius-md;
box-shadow: 0px 10px 25px 0px rgba(0, 0, 0, 0.09);
padding: 4px 6px 9px;
p {
text-align: center;
font-size: @font-size-11;
color: @gray-5;
line-height: @line-height-sm;
}
} }
} }
&-stock { &-rate {
&-title { flex: 1;
.sub-text-mixins(); padding-left: 22px;
&-item {
background:@gray-1;
border-radius: @border-radius-md;
padding: @padding-md;
text-align: center; text-align: center;
strong { &:first-child {
color: @black; margin-bottom: 11px;
}
h2 {
font-size: @font-size-20;
font-weight: @font-weight-bold; font-weight: @font-weight-bold;
line-height: 28px;
color: @black;
}
p {
.sub-text-mixins();
color: @gray-5;
} }
} }
} }
} &-tel {
.cul-det { padding: 8px 17px;
.card { margin: 20px 0 24px;
padding: 20px 16px; background-color: @gray-1;
@{deep} &-body { border-radius: @border-radius-max;
margin-bottom: 0; display: flex;
justify-content: space-between;
align-items: center;
a {
color: @black;
font-weight: @font-weight-bold;
font-size: @font-size-16;
line-height: @line-height-md;
padding-right: 25px;
border-right: 1px solid #e9e9e9;
}
.svg-icon {
width: 19px;
height: 19px;
vertical-align: -4px;
margin-right: 2px;
} }
} }
@{deep} .collapse-item-content { &-time {
font-size: @font-size-12; .sub-text-mixins();
} }
} &-slogan {
.cul-odds { text-align: center;
&-sign { p {
display: flex; font-size: @font-size-14;
justify-content: space-around; color: @gray-5;
padding: 10px 0 20px; line-height: @line-height-lg;
&-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 { &-entry {
&-item { background: url("../../../assets/images/consultant/card-bg.png") center no-repeat;
margin-bottom: 5px; background-size: contain;
} height: 117px;
display: flex;
justify-content: space-between;
align-items: center;
padding: 0 28px 0 26px;
&-title { &-title {
display: flex; color: @white;
color: @black; position: relative;
font-weight: @font-weight-bold; h3 {
padding: @padding-sm 0; font-size: 24px;
&-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-weight: @font-weight-bold;
font-size: @font-size-14; line-height: 33px;
line-height: @line-height-lg; margin-bottom: 4px;
}
}
&-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 { small {
font-weight: @font-weight-bold; display: block;
font-size: 11px;
line-height: 11px;
letter-spacing: 4px;
} }
&-txt { .cr-tag {
margin-left: 8px; border-radius: 7px 3px !important;
width: 216px; background-color: rgba(0, 0, 0, 0.2) !important;
font-size: 12px !important;
position: absolute;
top: -3px;
right: -37px;
} }
} }
.svg-icon {
width: 22px;
height: 22px;
}
} }
} }
\ No newline at end of file
src/views/Consultant/Exclusive/index.vue
View file @ 4bbdd430
<template> <template>
<div class="container"> <div class="container">
<div class="cul-hd"></div> <div class="cul-hd">
<div class="cul-hd-info">
<small>“保险从业多年，口碑极佳”</small>
<h1>李玉婷</h1>
<cr-tag><svg-icon icon-class="medal" />金牌保险顾问</cr-tag>
<small>执业保险销售资质：</small>
<small>201920000000800<br />02020003828</small>
</div>
<cr-image
class="cul-hd-img"
src="@/assets/images/consultant/culstor-demo.png"
width="215px"
height="230px"
/>
</div>
<div class="cul-det"> <div class="cul-det">
<card title="" class="cul-card">
<div class="cul-contact">
<div class="cul-contact-qrcode">
<cr-image
src="@/assets/images/consultant/qrcode-demo.png"
width="130px"
height="130px"
/>
<p>长安识别二维码加好友</p>
</div>
<div class="cul-rate">
<div class="cul-rate-item">
<h2>38100</h2>
<p>已服务用户人</p>
</div>
<div class="cul-rate-item">
<h2>99.8%</h2>
<p>满意度</p>
</div>
</div>
</div>
<router-link tag="div" class="cul-entry" to="/consultant/plan">
<div class="cul-entry-title">
<h3>您的专属保险方案</h3>
<small>CAPTIVE INSURANC</small>
<cr-tag>自己</cr-tag>
</div>
<svg-icon icon-class="arrow-right" />
</router-link>
<div class="cul-tel">
<a class="cul-tel-num" href="tel:13888888888">
<svg-icon icon-class="call" />138 8888 8888
</a>
<div class="cul-time">服务时间 9:00 ~ 21:00</div>
</div>
<div class="cul-slogan">
<p>“我们的价值：让客户少花钱买好保险”</p>
<p>“我们的愿景：让每个家庭都有备无患”</p>
</div>
<cr-divider :style="{ marginBottom: 0 }" />
</card>
<card title="芒果保险·1对1保险顾问来帮您?"> <card title="芒果保险·1对1保险顾问来帮您?">
<div class="cul-odds-list"> <div class="cul-odds-list">
<div class="cul-odds-list-item" v-for="(item, index) in oddsInsureList" :key="index"> <div class="cul-odds-list-item" v-for="(item, index) in oddsInsureList" :key="index">
......
src/views/Consultant/Plan/index.less 0 → 100644
View file @ 4bbdd430
@import "../Success/index.less";
.container {
background-color: @white;
}
.cul-hd {
background: url("../../../assets/images/consultant/linear-bg.png") top no-repeat;
background-size: contain;
padding: 10px 16px;
&-rec {
margin: 30px 0 33px;
&-title {
display: block;
font-size: @font-size-20;
font-weight: @font-weight-bold;
line-height: 24px;
color: @black;
margin-bottom: 8px;
}
&-sub {
display: block;
font-size: @font-size-14;
color: @black;
line-height: 24px;
}
}
.card {
border-radius: @border-radius-md;
box-shadow: 0px 5px 25px 0px rgba(0, 0, 0, 0.07);
@{deep} &-body {
margin-bottom: 0;
}
}
&-card {
&-title {
font-size: @font-size-16;
font-weight: @font-weight-bold;
color: @black;
line-height: @line-height-lg;
strong {
color: @red;
font-weight: @font-weight-bold;
}
}
&-content {
.sub-text-mixins();
}
}
}
.cul {
&-det {
margin-top: 15px;
.card {
padding: 0 16px 20px;
@{deep} &-body {
margin-bottom: 0;
}
}
}
&-dist {
background-color: @orange-light;
border-radius: 16px 3px;
display: flex;
justify-content: space-around;
padding: 20px 14px;
&-item {
text-align: center;
h3 {
font-size: @font-size-20;
font-weight: @font-weight-bold;
color: @black;
line-height: 28px;
}
p {
.sub-text-mixins();
color: #333;
}
}
}
}
.good {
&-item {
background: @white;
box-shadow: 0px 5px 25px 0px rgba(0, 0, 0, 0.07);
border-radius: @border-radius-md;
margin-bottom: 10px;
padding: @padding-lg;
}
&-title {
font-size: @font-size-20;
font-weight: @font-weight-bold;
color: @black;
line-height: 28px;
.cr-tag {
margin-left: 4px;
vertical-align: 5px;
}
}
&-date {
.sub-text-mixins();
&-item {
margin-right: 16px;
strong {
font-weight: @font-weight-bold;
}
}
}
&-price {
display: flex;
justify-content: space-between;
align-items: center;
padding: 16px 0;
&-item {
font-size: @font-size-16;
color: @black;
font-weight: @font-weight-bold;
strong {
font-weight: @font-weight-bold;
font-size: @font-size-16;
color: @red;
}
}
.cr-button {
width: 96px;
height: 36px;
line-height: 36px;
border-radius: @border-radius-sm !important;
}
}
&-reason {
display: flex;
background-color: @gray-1;
padding: 7px 12px;
border-radius: 8px;
position: relative;
&::after{
position: absolute;
top: -12px;
left: 18px;
content: ' ';
border-top: 6px transparent dashed;
border-left: 6px transparent dashed;
border-bottom: 6px @gray-1 dashed;
border-right: 6px transparent solid;
}
&-avator {
width: 28px;
margin-right: 8px;
}
&-content {
.sub-text-mixins();
}
}
}
src/views/Consultant/Plan/index.vue 0 → 100644
View file @ 4bbdd430
<template>
<div class="container">
<div class="cul-hd">
<div class="cul-hd-rec">
<small class="cul-hd-rec-sub">
HI,{{ baseInfo.userName }}{{ baseInfo.sex === 1 ? "先生" : "女士" }}
</small>
<h4 class="cul-hd-rec-title">以下是您本人的专属保险方案</h4>
</div>
<card title="1">
<h5 class="cul-hd-card-title" slot="header">
总保费：
<strong>{{ baseInfo.amount }}</strong>
{{ baseInfo.unit }}
</h5>
<p class="cul-hd-card-content">
推荐理由：
{{ baseInfo.reason }}
</p>
</card>
</div>
<div class="cul-det">
<card title="保障分布">
<div class="cul-dist">
<div class="cul-dist-item" v-for="(item, index) in distList" :key="index">
<h3>{{ item.price }}</h3>
<p>{{ item.title }}</p>
</div>
</div>
</card>
<card title="保障总览">
<table class="table">
<thead>
<tr>
<th style="width: 19%">险种</th>
<th style="width: 20%">保额</th>
<th style="width: 23%">保障期限</th>
<th style="width: 17%">缴费期</th>
<th style="width: 20%">保费</th>
</tr>
</thead>
<tbody>
<tr v-for="(item, index) in overviewList" :key="index">
<th>{{ item.title }}</th>
<th>{{ item.amount }}</th>
<th>{{ item.range }}</th>
<th>{{ item.way }}</th>
<th>{{ item.price }}</th>
</tr>
</tbody>
</table>
</card>
<card title="保障产品">
<div class="good-item" v-for="(item, index) in overviewList" :key="index">
<div class="good-title">
{{ item.goods }}
<cr-tag :type="tagFilter(item.type)">{{ item.title }}</cr-tag>
</div>
<div class="good-date">
<span class="good-date-item">
保额 | <strong>{{ item.amount }}</strong>
</span>
<span class="good-date-item">
缴费期 | <strong>{{ item.way }}</strong>
</span>
<span class="good-date-item">
保障期限 | <strong>{{ item.range }}</strong>
</span>
</div>
<div class="good-price">
<div class="good-price-item">
<strong>{{ item.goodsPirce }}</strong>
{{ item.goodsUnit }}
</div>
<cr-button type="warning" @click="goDetail(item.id, item.type)">去投保</cr-button>
</div>
<div class="good-reason">
<div class="good-reason-avator">
<cr-image :src="avator" width="28px" height="28px" />
</div>
<div class="good-reason-content">
推荐理由：
{{ item.reason }}
</div>
</div>
</div>
</card>
</div>
</div>
</template>
<script>
import Card from "@/components/Card";
import avator from "@/assets/images/consultant/avator.png";
export default {
name: "ConsultantSuccess",
components: {
Card
},
data() {
return {
avator,
baseInfo: {
userName: "王斌",
sex: 1,
amount: 10425,
unit: "元/年",
reason: "推荐理由推荐理由推荐理由推荐理由推荐理由推荐理由推荐理由"
},
distList: [
{ title: "医疗险", price: "500万" },
{ title: "重疾险", price: "50万" },
{ title: "意外险", price: "60万" },
{ title: "寿险", price: "350万" }
],
overviewList: [
{
id: 1,
goods: "国民保·百万医疗险",
type: "mi",
title: "医疗险",
amount: "600万",
range: "1年",
way: "趸交",
price: "350元",
goodsPirce: "3000",
goodsUnit: "元/每年",
reason: "推荐理由推荐理由推荐理由推荐理由推荐理由推荐理由推荐理由"
},
{
id: 2,
goods: "康惠保2020终身重疾险",
type: "cii",
title: "重疾险",
amount: "50万",
range: "终身",
way: "20年",
price: "6000元",
goodsPirce: "6000",
goodsUnit: "元/每年",
reason: "推荐理由推荐理由推荐理由推荐理由推荐理由推荐理由推荐理由"
},
{
id: 3,
goods: "国民保·百万意外险",
type: "ai",
title: "意外险",
amount: "50万",
range: "1年",
way: "趸交",
price: "350元",
goodsPirce: "3000",
goodsUnit: "元/每年",
reason: "推荐理由推荐理由推荐理由推荐理由推荐理由推荐理由推荐理由"
},
{
id: 4,
goods: "国民保·百万寿险",
type: "li",
title: "寿险",
amount: "350万",
range: "保至70岁",
way: "20年",
price: "3725元",
goodsPirce: "3000",
goodsUnit: "元/每年",
reason: "推荐理由推荐理由推荐理由推荐理由推荐理由推荐理由推荐理由"
}
]
};
},
mounted() {},
methods: {
tagFilter(type) {
let _type = "";
switch (type) {
case "mi":
_type = "warning";
break;
case "cii":
_type = "danger";
break;
case "ai":
_type = "primary";
break;
case "li":
_type = "light";
break;
default:
_type = "light";
break;
}
return _type;
},
goDetail(id, type) {
this.$router.push({ url: "/goods/detail", query: { id, type } });
}
}
};
</script>
<style lang="less" src="./index.less" scoped></style>
src/views/Consultant/Question/index.vue
View file @ 4bbdd430
...@@ -53,11 +53,26 @@ export default { ...@@ -53,11 +53,26 @@ export default {
data() { data() {
return { return {
formData: {}, formData: {},
insuredOptions: [ insuredOptions: [
{ label: "本人", value: "1" }, { label: "本人", value: "1" },
{ label: "配偶", value: "2" }, { label: "配偶", value: "2" },
{ label: "父母", value: "3" }, { label: "儿子", value: "3" },
{ label: "子女", value: "4" } { label: "女儿", value: "4" },
{ label: "父亲", value: "5" },
{ label: "母亲", value: "6" }
],
hasSocialOptions: [
{ label: "有", value: "1" },
{ label: "无", value: "2" }
],
incomeOptions: ["10万", "20万", "25万", "30万"],
loanOptions: ["无房贷", "1000元", "2000元", "3000元", "4000元"],
solveOptions: [
{ label: "之前从没买过保险，打算配置保险", value: "1" },
{ label: "已配置部分保险，打算再补充一些", value: "2" },
{ label: "不配置保险，就想咨询些保险疑惑", value: "3" },
{ label: "无", value: "4" }
], ],
processList: [ processList: [
{ icon: "package-active", sub: "聘请成功", active: true }, { icon: "package-active", sub: "聘请成功", active: true },
......
src/views/Goods/Detail/modules/CpsRate.vue
View file @ 4bbdd430
...@@ -9,7 +9,7 @@ ...@@ -9,7 +9,7 @@
</cr-tabbar> </cr-tabbar>
</cr-sticky> </cr-sticky>
<div class="rate-body"> <div class="rate-body">
<table class="rate-table"> <table class="table rate-table">
<thead> <thead>
<tr> <tr>
<th style="width: 40%">投保年龄</th> <th style="width: 40%">投保年龄</th>
...@@ -122,38 +122,15 @@ export default { ...@@ -122,38 +122,15 @@ export default {
width: 100%; width: 100%;
thead { thead {
th { 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 { &:first-child {
border-top-left-radius: @border-radius-lg;
border-bottom-left-radius: @border-radius-lg;
padding-left: 30px; padding-left: 30px;
} }
&:last-child {
border-top-right-radius: @border-radius-lg;
border-bottom-right-radius: @border-radius-lg;
}
} }
} }
tbody { tbody {
th { 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; padding-left: 30px;
} }
td {
color: @black;
font-size: @font-size-12;
padding: @padding-sm + 2 @padding-md + 2;
text-align: left;
}
} }
} }
</style> </style>
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment