Skip to content

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

feature: 添加保单列表

parent 9b841f1b
Show whitespace changes
Inline Side-by-side
Showing with 1048 additions and 540 deletions
src/App.vue
View file @ d65b2027
...@@ -22,9 +22,6 @@ export default { ...@@ -22,9 +22,6 @@ export default {
}, },
methods: { methods: {
...mapActions(["setIsLoading"]) ...mapActions(["setIsLoading"])
},
mounted() {
console.log(this.isLoading);
} }
}; };
</script> </script>
......
src/api/goodsList.mock.js
View file @ d65b2027
...@@ -27,7 +27,8 @@ export default [ ...@@ -27,7 +27,8 @@ export default [
icon_closed: medical_closed, icon_closed: medical_closed,
icon: medical, icon: medical,
guarantee_title: "医疗保障", guarantee_title: "医疗保障",
guarantee_sub: "看病报销医药费,最高600万" guarantee_sub: "看病报销医药费,最高600万",
compony: "泰康在线"
}, },
{ {
id: "HTDQZJX001", id: "HTDQZJX001",
...@@ -44,7 +45,8 @@ export default [ ...@@ -44,7 +45,8 @@ export default [
icon_closed: illness_closed, icon_closed: illness_closed,
icon: illness, icon: illness,
guarantee_title: "重疾保障", guarantee_title: "重疾保障",
guarantee_sub: "100种重症+40种轻症" guarantee_sub: "100种重症+40种轻症",
compony: "华泰财险"
}, },
{ {
id: "BNZJX001", id: "BNZJX001",
...@@ -62,7 +64,8 @@ export default [ ...@@ -62,7 +64,8 @@ export default [
icon_closed: illness_closed, icon_closed: illness_closed,
icon: illness, icon: illness,
guarantee_title: "重疾保障", guarantee_title: "重疾保障",
guarantee_sub: "100种重症+40种轻症" guarantee_sub: "100种重症+40种轻症",
compony: "华泰财险"
}, },
{ {
id: "ZAYWX001", id: "ZAYWX001",
...@@ -79,7 +82,8 @@ export default [ ...@@ -79,7 +82,8 @@ export default [
icon_closed: casualty_closed, icon_closed: casualty_closed,
icon: casualty, icon: casualty,
guarantee_title: "意外保障", guarantee_title: "意外保障",
guarantee_sub: "意外风险覆盖全,最高100万保额" guarantee_sub: "意外风险覆盖全,最高100万保额",
compony: "众安保险"
}, },
{ {
id: "HGSX001", id: "HGSX001",
...@@ -96,6 +100,7 @@ export default [ ...@@ -96,6 +100,7 @@ export default [
icon_closed: life_closed, icon_closed: life_closed,
icon: life, icon: life,
guarantee_title: "人寿保障", guarantee_title: "人寿保障",
guarantee_sub: "最高350万保额,顶梁柱必备" guarantee_sub: "最高350万保额,顶梁柱必备",
compony: "华泰财险"
} }
]; ];
src/api/policy.js
View file @ d65b2027
...@@ -6,6 +6,6 @@ export const getPolicyList = () => { ...@@ -6,6 +6,6 @@ export const getPolicyList = () => {
}; };
// 查询订单详情 // 查询订单详情
export const addPolicyDetail = param => { export const getPolicyDetail = orderNo => {
return req.post("user/info", param); return req.get(`/policy_order/detail?orderNo=${orderNo}`);
}; };
src/router/index.js
View file @ d65b2027
...@@ -8,138 +8,6 @@ import { authByxyqb, getwxOpenId } from "@/api/user"; ...@@ -8,138 +8,6 @@ import { authByxyqb, getwxOpenId } from "@/api/user";
import localStorage from "@/service/localStorage"; import localStorage from "@/service/localStorage";
Vue.use(VueRouter); Vue.use(VueRouter);
const routes = [
{
path: "/",
name: "Default",
redirect: "/goods"
},
{
path: "/home",
name: "Home",
component: () => import("../views/Home/index.vue")
},
{
path: "/home/smart-measure",
name: "SmartMeasure",
component: () => import("../views/Home/SmartMeasure/index.vue")
},
{
path: "/home/smart-measure/report",
name: "Report",
component: () => import("../views/Home/SmartMeasure/Report/index.vue")
},
{
path: "/home/activity",
name: "Activity",
component: () => import("../views/Home/Activity/index.vue")
},
{
path: "/goods",
name: "Goods",
component: () => import("../views/Goods/index.vue")
},
{
path: "/goods/detail",
name: "GoodsDetail",
component: () => import("../views/Goods/Detail/index.vue")
},
{
path: "/goods/plan",
name: "GoodsPlan",
component: () => import("../views/Goods/Plan/index.vue")
},
{
path: "/goods/inform",
name: "GoodsInform",
component: () => import("../views/Goods/Inform/index.vue")
},
{
path: "/consultant",
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: "/consultant/plan",
name: "ConsultantPlan",
component: () => import("../views/Consultant/Plan/index.vue")
},
{
path: "/user",
name: "User",
component: () => import("../views/User/index.vue")
},
{
path: "/user/family",
name: "Family",
component: () => import("../views/User/Family/index.vue")
},
{
path: "/user/family/detail/:id",
name: "Family",
component: () => import("../views/User/Family/Detail/index.vue")
},
{
path: "/user/help-center",
name: "Family",
component: () => import("../views/User/HelpCenter/index.vue")
},
{
path: "/policy",
name: "Policy",
component: () => import("../views/Policy/index.vue")
},
{
path: "/policy/detail",
name: "Detail",
component: () => import("../views/Policy/Detail/index.vue")
},
{
path: "/policy/add",
name: "AddPolicy",
component: () => import("../views/Policy/Add/index.vue")
},
{
path: "/policy/payment-record",
name: "PaymentRecord",
component: () => import("../views/Policy/PaymentRecord/index.vue")
},
{
path: "/policy/renewal",
name: "Renewal",
component: () => import("../views/Policy/Renewal/index.vue")
},
{
path: "/introduction",
name: "Introduction",
component: () => import("../views/Introduction/index.vue")
},
{
path: "/paytest",
name: "Introduction",
component: () => import("../views/paytest")
},
{
path: "*",
redirect: "/goods"
}
];
const originalPush = VueRouter.prototype.push; const originalPush = VueRouter.prototype.push;
VueRouter.prototype.push = function push(location) { VueRouter.prototype.push = function push(location) {
return originalPush.call(this, location).catch(err => err); return originalPush.call(this, location).catch(err => err);
......
src/router/routes.js
View file @ d65b2027
...@@ -14,6 +14,16 @@ export default [ ...@@ -14,6 +14,16 @@ export default [
name: "SmartMeasure", name: "SmartMeasure",
component: () => import("../views/Home/SmartMeasure/index.vue") component: () => import("../views/Home/SmartMeasure/index.vue")
}, },
{
path: "/home/smart-measure/report",
name: "Report",
component: () => import("../views/Home/SmartMeasure/Report/index.vue")
},
{
path: "/home/activity",
name: "Activity",
component: () => import("../views/Home/Activity/index.vue")
},
{ {
path: "/goods", path: "/goods",
name: "Goods", name: "Goods",
...@@ -70,10 +80,15 @@ export default [ ...@@ -70,10 +80,15 @@ export default [
component: () => import("../views/Policy/index.vue") component: () => import("../views/Policy/index.vue")
}, },
{ {
path: "/policy/detail", path: "/policy/detail/:orderNo",
name: "Detail", name: "Detail",
component: () => import("../views/Policy/Detail/index.vue") component: () => import("../views/Policy/Detail/index.vue")
}, },
{
path: "/policy/success",
name: "Sucess",
component: () => import("../views/Policy/Success/index.vue")
},
{ {
path: "/policy/add", path: "/policy/add",
name: "AddPolicy", name: "AddPolicy",
......
src/service/utils.js
View file @ d65b2027
...@@ -128,3 +128,53 @@ export function parseSearch(searchString) { ...@@ -128,3 +128,53 @@ export function parseSearch(searchString) {
return result; return result;
}, {}); }, {});
} }
/**
* 时间转换
* @param {String} time 需要转换的时间
* @param {String} cFormat 格式 {y}-{m}-{d} {h}:{i}:{s}
* @return: {String} timeStr 转换完成的时间
*/
export function parseTime(time, cFormat) {
if (arguments.length === 0) {
return "-";
}
if (time == null) {
return "-";
}
const format = cFormat || "{y}-{m}-{d} {h}:{i}:{s}";
let date;
if (time == "") {
date = new Date();
} else if (typeof time === "object") {
date = time;
} else {
if (("" + time).length === 10) time = parseInt(time) * 1000;
if (String(time).indexOf("T") > -1) {
time = time.replace(/T/g, " ").replace(/\..*/g, "");
}
if (String(time).indexOf("-") > -1 && String(time).indexOf("T") == -1) {
time = time.replace(/-/g, "/");
}
date = new Date(time);
}
const formatObj = {
y: date.getFullYear(),
m: date.getMonth() + 1,
d: date.getDate(),
h: date.getHours(),
i: date.getMinutes(),
s: date.getSeconds(),
a: date.getDay()
};
const timeStr = format.replace(/{(y|m|d|h|i|s|a)+}/g, (result, key) => {
let value = formatObj[key];
if (key === "a") {
return ["日", "一", "二", "三", "四", "五", "六"][value];
}
if (result.length > 0 && value < 10) {
value = "0" + value;
}
return value || 0;
});
return timeStr;
}
src/views/Policy/Detail/Types/Guarantee.vue 0 → 100644
View file @ d65b2027
<template>
<div>
<status-desc
:firstTitle="data.cardConfig.detailText"
:secondTitle="data.cardConfig.statusText"
:recordText="data.cardConfig.recordText"
></status-desc>
<pay-cost
v-if="showPayCost"
:statusKey="data.cardConfig.key"
:payCostConfig="data.cardConfig.payCostConfig"
></pay-cost>
<insurance-card
:productNo="data.productNo"
:autoRenewPremium="data.autoRenewPremium"
:policyNo="data.policyNo"
></insurance-card>
<security-content :data="data"></security-content>
<insurance-service></insurance-service>
<customer-service></customer-service>
<insurance-recommend class="Pdb-recommend" />
</div>
</template>
<script>
import InsuranceRecommend from "../../modules/InsuranceRecommend";
import InsuranceCard from "../modules/InsuranceCard";
import SecurityContent from "../modules/SecurityContent";
import InsuranceService from "../modules/InsuranceService";
import PayCost from "../modules/PayCost";
import StatusDesc from "../modules/StatusDesc";
import CustomerService from "../modules/CustomerService";
export default {
name: "Guarantee",
components: {
InsuranceRecommend,
InsuranceCard,
SecurityContent,
InsuranceService,
PayCost,
StatusDesc,
CustomerService
},
props: {
data: {
type: Object,
default: () => ({})
}
},
data() {
return {};
},
computed: {
showPayCost() {
return ["2", "4"].includes(this.data?.cardConfig?.key);
}
}
};
</script>
<style lang="less" src="../index.less" scoped></style>
src/views/Policy/Detail/Types/Refund.vue 0 → 100644
View file @ d65b2027
<template>
<div>
<status-desc
:firstTitle="data.cardConfig.detailText"
:secondTitle="data.cardConfig.statusText"
:recordText="data.cardConfig.recordText"
></status-desc>
<pay-cost
v-if="showPayCost"
:statusKey="data.cardConfig.key"
:payCostConfig="data.cardConfig.payCostConfig"
></pay-cost>
<refund
v-else
:refundConfig="data.cardConfig.refundConfig"
:amount="amount"
:payTime="payTime"
></refund>
<Phone></Phone>
</div>
</template>
<script>
import StatusDesc from "../modules/StatusDesc";
import Phone from "../modules/Phone";
import Refund from "../modules/Refund";
import PayCost from "../modules/PayCost";
import { parseTime } from "@/service/utils";
export default {
name: "Guarantee",
components: {
StatusDesc,
Phone,
Refund,
PayCost
},
props: {
data: {
type: Object,
default: () => ({})
}
},
data() {
return {};
},
computed: {
amount() {
return this.data.cardConfig?.amount || 0;
},
payTime() {
return parseTime(this.data.cardConfig?.payTime, "{y}-{m}-{d}") || 0;
},
showPayCost() {
return ["4", "14", "13"].includes(this.data?.cardConfig?.key);
}
}
};
</script>
<style lang="less" src="../index.less" scoped></style>
src/views/Policy/Detail/index.less
View file @ d65b2027
.button() { .button() {
height: 28px; height: 28px;
border-radius: 8px; border-radius: 8px !important;
border: 1px solid #787EFF; border: 1px solid #787EFF !important;
font-size: 14px; font-size: 14px;
font-weight: 400; font-weight: 400;
color: #787EFF; color: #787EFF !important;
line-height: 16px; line-height: 16px;
background-color: #fff !important;
&:first-child { &:first-child {
margin-right: 8px; margin-right: 8px;
} }
...@@ -109,12 +110,12 @@ ...@@ -109,12 +110,12 @@
} }
} }
.Pdb-tips { .Pdb-tips {
display: flex; display: inline-flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
margin: 0 0 24px 20px; margin: 0 0 24px 20px;
padding-left: 4px; padding: 0 4px;
width: 73px; width: auto;
height: 20px; height: 20px;
background: #000000; background: #000000;
border-radius: 8px; border-radius: 8px;
...@@ -171,6 +172,12 @@ ...@@ -171,6 +172,12 @@
.card-container(); .card-container();
&-title { &-title {
.card-title(16px); .card-title(16px);
&_tips {
font-size: 14px;
font-weight: 400;
color: #999999;
line-height: 16px;
}
} }
&-content { &-content {
margin-bottom: 17px; margin-bottom: 17px;
...@@ -192,8 +199,8 @@ ...@@ -192,8 +199,8 @@
&-button { &-button {
width: 100%; width: 100%;
height: 52px; height: 52px;
background: #FFC842; background: #FFC842 !important;
border-radius: 14px; border-radius: 14px !important;
font-size: 16px; font-size: 16px;
font-weight: 600; font-weight: 600;
color: #333333; color: #333333;
......
src/views/Policy/Detail/index.vue
View file @ d65b2027
<template> <template>
<div class="policy-detail"> <div class="policy-detail">
<div class="policy-detail-body"> <div class="policy-detail-body">
<p class="Pdb-status">投保失败</p> <Component :is="policy.cardConfig.component" :data="policy"></Component>
<p class="Pdb-status">退款中...</p>
<!-- <div class="Pdb-tips">
<span class="Pdb-tips-text">缴费记录</span>
<svg-icon class-name="Pdb-tips-svg" icon-class="payment-record" />
</div> -->
<div class="Pdb-refund">
<p class="Pdb-refund-title">很抱歉，您未通过保险公司的核保</p>
<p class="Pdb-refund-desc">不能投保此产品，正在原路给您退款，请注意查收…</p>
<div class="Pdb-refund-content">
<div class="Pdbr-content-item">
<span>退款金额</span>
<span>800.00元</span>
</div>
<div class="Pdbr-content-item">
<span>支付时间</span>
<span>2020.5.31 18:21:12</span>
</div>
</div>
</div>
<div class="Pdb-payment">
<p class="Pdb-payment-title">保障将在XX天后失效，请立即缴费</p>
<div class="Pdb-payment-content">
<div class="Pdbp-content-item">
<svg-icon class-name="Pdbpc-item-svg" icon-class="check-circle" />
<span class="Pdbpc-item-text">无需次年自己手动操作续保</span>
</div>
<div class="Pdbp-content-item">
<svg-icon class-name="Pdbpc-item-svg" icon-class="check-circle" />
<span class="Pdbpc-item-text">本功能无额外费用，可随时取消</span>
</div>
<div class="Pdbp-content-item">
<svg-icon class-name="Pdbpc-item-svg" icon-class="check-circle" />
<span class="Pdbpc-item-text">续保保费按照续保应交保费，自动扣款</span>
</div>
</div>
<cr-button class="Pdb-payment-button">立即缴费</cr-button>
</div>
<div class="Pdb-insurance">
<p class="Pdb-insurance-name">国民保·百万医疗险</p>
<p class="Pdb-insurance-no">NO.XXXXXXXXXXXXXXXXXXXXXXXX<br />由XXXXXXXXX承保</p>
<div class="Pdb-insurance-operation">
<cr-button class="Pdbi-operation-button">已开通次年续保</cr-button>
<cr-button class="Pdbi-operation-button">申请理赔</cr-button>
</div>
</div>
<div class="Pdb-content">
<div class="Pdb-content-head">
<span class="Pdbc-head-name">保障内容</span>
<span class="Pdbc-head-status">查看详情</span>
</div>
<div class="Pdb-content-body">
<div class="Pdbc-body-item">
<span>100种重大疾病医疗保险金（0免赔额）</span>
<span>600万</span>
</div>
<div class="Pdbc-body-item">
<span>一般医疗保险金（1万免赔额）</span>
<span>300万</span>
</div>
<div class="Pdbc-body-item">
<span>质子重离子医疗保险金（60%赔付）</span>
<span>600万</span>
</div>
<div class="Pdbc-body-item">
<span>意外身故</span>
<span>1万</span>
</div>
<div class="Pdbc-body-item">
<span>意外伤残</span>
<span>1万</span>
</div>
<div class="Pdbc-body-item">
<span>意外住院津贴</span>
<span>100元/天</span>
</div>
<div class="Pdbc-body-item">
<span>生效日期</span>
<span>2020.5.31</span>
</div>
<div class="Pdbc-body-item">
<span>终止日期</span>
<span>2021.5.31</span>
</div>
</div>
<div class="Pdb-content-operation">
<cr-button class="Pdbc-button">电子保单</cr-button>
</div>
<div class="Pdb-content-user">
<p class="Pdbc-user-who">投保人</p>
<div class="Pdbc-user-info">
<span>王*闹</span>
<span>身份证号 1333**********3445</span>
</div>
</div>
<div class="Pdb-content-user">
<p class="Pdbc-user-who">被保人</p>
<div class="Pdbc-user-info">
<span>王*闹</span>
<span>身份证号 1333**********3445</span>
</div>
</div>
</div>
<div class="Pdb-service">
<div class="Pdb-service-head">
<span>增值服务</span>
<span>查看详情</span>
</div>
<div class="Pdb-service-body">
<div>
<span>重疾快速就医</span>
<span></span>
</div>
<div>
<span>住院押金垫付</span>
<span></span>
</div>
</div>
<div class="Pdb-service-question">
<span>常见问题</span>
<svg-icon icon-class="arrow" />
</div>
<cr-divider class="Pdb-service-divider" :hairline="false" />
<div class="Pdb-service-agreement">
<span>保险条款</span>
<span>|</span>
<span>健康告知</span>
<span>|</span>
<span>投保须知与声明</span>
<span>|</span>
<span>服务协议</span>
</div>
</div>
<div class="Pdb-operation">
<div class="Pdb-operation-item">
<svg-icon class-name="Pdbo-item-svg" icon-class="customer-service-concat" />
<span class="Pdbo-item-text">联系客服</span>
</div>
<div class="Pdb-operation-item">
<svg-icon class-name="Pdbo-item-svg" icon-class="go-home" />
<span class="Pdbo-item-text">返回首页</span>
</div>
</div>
<div class="Pdb-footer">
<span>如遇问题请拨打客服电话</span>
<span>00000000000</span>
</div>
<act-banner />
<rec-good />
<insurance-recommend class="Pdb-recommend" />
</div> </div>
</div> </div>
</template> </template>
<script> <script>
import point from "@/assets/images/policy/detail/point@2x.png"; import Guarantee from "./Types/Guarantee";
import InsuranceRecommend from "../modules/InsuranceRecommend"; import Refund from "./Types/Refund";
import ActBanner from "../modules/ActBanner"; import policyStatusMixin from "../mixin/policyStatus.mixin";
import RecGood from "../modules/RecGood"; import { getPolicyDetail } from "@/api/policy";
export default { export default {
name: "PolicyList", name: "PolicyList",
mixins: [policyStatusMixin],
components: { components: {
InsuranceRecommend, Guarantee,
ActBanner, Refund
RecGood
}, },
data() { data() {
return { return {
point policy: {
cardConfig: {
component: "Guarantee"
}
}
}; };
},
async created() {
console.log(this.$route.params.orderNo);
const detail = await getPolicyDetail(this.$route.params.orderNo);
this.policy = this.getData(detail);
// if (true) {}
} }
}; };
</script> </script>
......
src/views/Policy/Detail/modules/CustomerService.vue 0 → 100644
View file @ d65b2027
<template>
<div class="Pdb-operation">
<div class="Pdb-operation-item" @click="goNext('phone')">
<svg-icon class-name="Pdbo-item-svg" icon-class="customer-service-concat" />
<span class="Pdbo-item-text">联系客服</span>
</div>
<div class="Pdb-operation-item" @click="goNext('home')">
<svg-icon class-name="Pdbo-item-svg" icon-class="go-home" />
<span class="Pdbo-item-text">返回首页</span>
</div>
</div>
</template>
<script>
export default {
name: "CustomerService",
data() {
return {};
},
methods: {
goNext(type) {
if (type === 'home') {
this.$router.push('/home')
}
}
}
};
</script>
<style lang="less" src="../index.less" scoped></style>
src/views/Policy/Detail/modules/InsuranceCard.vue 0 → 100644
View file @ d65b2027
<template>
<div class="Pdb-insurance">
<p class="Pdb-insurance-name">{{ product.title }}</p>
<p class="Pdb-insurance-no">NO.{{ policyNo }}<br />由{{ product.compony }}承保</p>
<div class="Pdb-insurance-operation">
<cr-button class="Pdbi-operation-button" @click="goNext">{{ buttonText }}</cr-button>
<cr-button class="Pdbi-operation-button">申请理赔</cr-button>
</div>
</div>
</template>
<script>
import GOODS_LIST from "@/api/goodsList.mock";
export default {
name: "InsuranceCard",
props: {
productNo: {
type: [Number, String],
default: 1
},
autoRenewPremium: {
type: Boolean,
default: false
},
policyNo: {
type: String,
default: ""
}
},
data() {
return {};
},
computed: {
product() {
return GOODS_LIST.find(v => v.id === +this.productNo);
},
buttonText() {
return this.autoRenewPremium ? "已开通次年续保" : "已关闭次年续保";
}
},
methods: {
goNext() {}
}
};
</script>
<style lang="less" src="../index.less" scoped></style>
src/views/Policy/Detail/modules/InsuranceService.vue 0 → 100644
View file @ d65b2027
<template>
<div class="Pdb-service">
<div class="Pdb-service-head">
<span>增值服务</span>
<span>查看详情</span>
</div>
<div class="Pdb-service-body">
<div>
<span>重疾快速就医</span>
<span></span>
</div>
<div>
<span>住院押金垫付</span>
<span></span>
</div>
</div>
<div class="Pdb-service-question">
<span>常见问题</span>
<svg-icon icon-class="arrow" />
</div>
<cr-divider class="Pdb-service-divider" :hairline="false" />
<div class="Pdb-service-agreement">
<span>保险条款</span>
<span>|</span>
<span>健康告知</span>
<span>|</span>
<span>投保须知与声明</span>
<span>|</span>
<span>服务协议</span>
</div>
</div>
</template>
<script>
export default {
name: "InsuranceService",
data() {
return {};
}
};
</script>
<style lang="less" src="../index.less" scoped></style>
src/views/Policy/Detail/modules/PayCost.vue 0 → 100644
View file @ d65b2027
<template>
<div class="Pdb-payment">
<p v-if="showTips" class="Pdb-payment-title Pdb-payment-title_tips">{{payCostConfig.title}}</p>
<div v-else>
<p class="Pdb-payment-title">保障将在XX天后失效，请立即缴费</p>
<div class="Pdb-payment-content">
<div class="Pdbp-content-item">
<svg-icon class-name="Pdbpc-item-svg" icon-class="check-circle" />
<span class="Pdbpc-item-text">无需次年自己手动操作续保</span>
</div>
<div class="Pdbp-content-item">
<svg-icon class-name="Pdbpc-item-svg" icon-class="check-circle" />
<span class="Pdbpc-item-text">本功能无额外费用，可随时取消</span>
</div>
<div class="Pdbp-content-item">
<svg-icon class-name="Pdbpc-item-svg" icon-class="check-circle" />
<span class="Pdbpc-item-text">续保保费按照续保应交保费，自动扣款</span>
</div>
</div>
</div>
<cr-button class="Pdb-payment-button">{{payCostConfig.button}}</cr-button>
</div>
</template>
<script>
export default {
name: "PayCost",
props: {
statusKey: {
type: String,
default: '2'
},
payCostConfig: {
type: Object,
default: () => ({
title: "",
button: "立即缴费"
})
}
},
computed: {
showTips() {
return ["4", "14", "13"].includes(this.statusKey);
}
}
};
</script>
<style lang="less" src="../index.less" scoped></style>
src/views/Policy/Detail/modules/Phone.vue 0 → 100644
View file @ d65b2027
<template>
<div class="Pdb-footer">
<span>如遇问题请拨打客服电话</span>
<span>00000000000</span>
</div>
</template>
<script>
export default {
name: "Phone",
data() {
return {};
}
};
</script>
<style lang="less" src="../index.less" scoped></style>
src/views/Policy/Detail/modules/Refund.vue 0 → 100644
View file @ d65b2027
<template>
<div class="Pdb-refund">
<p class="Pdb-refund-title">{{ refundConfig.title }}</p>
<p class="Pdb-refund-desc">{{ refundConfig.desc }}</p>
<div class="Pdb-refund-content">
<div class="Pdbr-content-item">
<span>退款金额</span>
<span>{{ amount }}元</span>
</div>
<div class="Pdbr-content-item">
<span>支付时间</span>
<span>{{ payTime }}</span>
</div>
</div>
</div>
</template>
<script>
export default {
name: "Refund",
props: {
refundConfig: {
type: Object,
default: () => ({
title: "",
desc: ""
})
},
amount: {
type: Number,
default: 0
},
payTime: {
type: String,
default: "-"
}
},
data() {
return {};
}
};
</script>
<style lang="less" src="../index.less" scoped></style>
src/views/Policy/Detail/modules/SecurityContent.vue 0 → 100644
View file @ d65b2027
<template>
<div class="Pdb-content">
<div class="Pdb-content-head">
<span class="Pdbc-head-name">保障内容</span>
<span class="Pdbc-head-status">查看详情</span>
</div>
<div class="Pdb-content-body">
<div class="Pdbc-body-item">
<span>100种重大疾病医疗保险金（0免赔额）</span>
<span>600万</span>
</div>
<div class="Pdbc-body-item">
<span>一般医疗保险金（1万免赔额）</span>
<span>300万</span>
</div>
<div class="Pdbc-body-item">
<span>质子重离子医疗保险金（60%赔付）</span>
<span>600万</span>
</div>
<div class="Pdbc-body-item">
<span>意外身故</span>
<span>1万</span>
</div>
<div class="Pdbc-body-item">
<span>意外伤残</span>
<span>1万</span>
</div>
<div class="Pdbc-body-item">
<span>意外住院津贴</span>
<span>100元/天</span>
</div>
<div class="Pdbc-body-item">
<span>生效日期</span>
<span>{{EffectiveDate}}</span>
</div>
<div class="Pdbc-body-item">
<span>终止日期</span>
<span>{{EndDate}}</span>
</div>
</div>
<div class="Pdb-content-operation">
<cr-button class="Pdbc-button" @click="showPdf">电子保单</cr-button>
</div>
<div class="Pdb-content-user">
<p class="Pdbc-user-who">投保人</p>
<div class="Pdbc-user-info">
<span>{{data.holderUserNameMask}}</span>
<span>身份证号 {{data.holderIdNoMask}}</span>
</div>
</div>
<div class="Pdb-content-user">
<p class="Pdbc-user-who">被保人</p>
<div class="Pdbc-user-info">
<span>{{data.insuredUserNameMask}}</span>
<span>身份证号 {{data.insuredIdNoMask}}</span>
</div>
</div>
</div>
</template>
<script>
import { parseTime } from "@/service/utils";
export default {
name: "SecurityContent",
props: {
data: {
type: Object,
default: ({})
}
},
data() {
return {};
},
computed: {
EffectiveDate() {
return parseTime(this.data.policyEffectiveDate, "{y}-{m}-{d}")
},
EndDate() {
return parseTime(this.data.policyEndDate, "{y}-{m}-{d}")
}
},
methods: {
showPdf() {
}
}
};
</script>
<style lang="less" src="../index.less" scoped></style>
src/views/Policy/Detail/modules/StatusDesc.vue 0 → 100644
View file @ d65b2027
<template>
<div>
<p class="Pdb-status" v-if="firstTitle">{{ firstTitle }}</p>
<p class="Pdb-status">{{ secondTitleText }}</p>
<div class="Pdb-tips" v-if="recordText">
<span class="Pdb-tips-text">{{ recordText }}</span>
<svg-icon class-name="Pdb-tips-svg" icon-class="payment-record" />
</div>
</div>
</template>
<script>
export default {
name: "StatusDesc",
props: {
firstTitle: {
type: String,
default: ''
},
secondTitle: {
type: String,
default: ''
},
recordText: {
type: String,
default: ''
}
},
data() {
return {};
},
computed: {
secondTitleText() {
return this.firstTitle ? `${this.secondTitle}...` : this.secondTitle
}
}
};
</script>
<style lang="less" src="../index.less" scoped></style>
src/views/Policy/Success/index.vue 0 → 100644
View file @ d65b2027
<template>
<div class="policy-detail">
<div class="policy-detail-body">
<status-desc secondTitle="购买成功"></status-desc>
<Refund></Refund>
<ActBanner></ActBanner>
<RecGood></RecGood>
</div>
</div>
</template>
<script>
import ActBanner from "./modules/ActBanner";
import StatusDesc from "../Detail/modules/StatusDesc";
import Refund from "../Detail/modules/Refund";
import RecGood from "./modules/RecGood";
export default {
name: "Sucess",
components: {
StatusDesc,
Refund,
ActBanner,
RecGood
},
data() {
return {};
},
computed: {
showPayCost() {
return ["2", "4"].includes(this.data?.cardConfig?.key);
}
}
};
</script>
<style lang="less" src="../Detail/index.less" scoped></style>
src/views/Policy/Success/modules/ActBanner.vue 0 → 100644
View file @ d65b2027
<template functional>
<div class="activity-banner">
<div class="activity-banner-item" @click="parent.$router.push('/draw')">
<cr-image src="@/assets/images/policy/draw.png" width="343px" height="60px" />
</div>
</div>
</template>
<script>
export default {
name: "ActBanner",
data() {
return {};
}
};
</script>
<style lang="less" scoped>
.activity-banner {
width: 343px;
margin: 24px auto;
}
</style>
src/views/Policy/modules/RecGood.vue → src/views/Policy/Success/modules/RecGood.vue
View file @ d65b2027
...@@ -74,8 +74,8 @@ export default { ...@@ -74,8 +74,8 @@ export default {
}; };
</script> </script>
<style lang="less" scoped> <style lang="less" scoped>
@import "../../../style/var.less"; @import "../../../../style/var.less";
@import "../../../style/mixins.less"; @import "../../../../style/mixins.less";
.rec { .rec {
&-container { &-container {
width: 343px; width: 343px;
......
src/views/Policy/constants.js 0 → 100644
View file @ d65b2027
const statusMap = {
"1": {
status: ["6.2-3"],
title: "被保人：${title}",
contend: "保障期限：${start} 至 ${end}",
statusText: "保障中",
buttons: ["为家人投保", "电子保单"],
detailText: "",
recordText: "缴费记录",
component: "Guarantee"
},
"2": {
status: ["6.3"],
title: "被保人：${title}",
contend: "保障期限：${start} 至 ${end}",
statusText: "保障中",
buttons: ["开通自动续费", "电子保单"],
detailText: "",
recordText: "保单已欠费，欠缴${money}元",
component: "Guarantee"
},
"3": {
status: ["6.1-3"],
title: "被保人：${title}",
contend: "保障期限：${start} 至 ${end}",
statusText: "待生效",
buttons: ["为家人投保", "电子保单"],
detailText: "",
recordText: "缴费记录",
component: "Guarantee"
},
"4": {
status: ["1-1", "4-1", "5-1"],
title: "被保人：${title}",
contend: "需付保费：${money}元",
statusText: "待支付",
buttons: ["去支付"],
detailText: "",
recordText: "请尽快支付",
component: "Guarantee",
payCostConfig: {
title: "订单将在今天23:59:59关闭",
button: "立即缴费"
}
},
"5": {
status: ["9-5"],
title: "被保人：${title}",
contend: "保障期限：${start} 至 ${end}",
statusText: "退款中",
buttons: ["联系客服"],
detailText: "退保终止",
recordText: "缴费记录",
component: "Guarantee"
},
"6": {
status: ["7-5"],
title: "退款金额：${title}",
contend: "支付时间：${start}",
statusText: "退款中",
buttons: ["联系客服"],
detailText: "投保失败",
recordText: "",
component: "Refund",
refundConfig: {
title: "很抱歉，您未通过保险公司的核保",
desc: "不能投保此产品，正在原路给您退款，请注意查收…"
}
},
"7": {
status: ["4-5", "5-5"],
title: "退款金额：${title}",
contend: "支付时间：${start}",
statusText: "退款中",
buttons: ["联系客服"],
detailText: "投保失败",
recordText: "",
component: "Refund",
refundConfig: {
title: "很抱歉，您未通过保险公司的核保",
desc: "不能投保此产品，正在原路给您退款，请注意查收…"
}
},
"8": {
status: ["4-6", "5-6", "7-6"],
title: "退款金额：${title}",
contend: "支付时间：${start}",
statusText: "退款成功",
buttons: ["联系客服"],
detailText: "投保失败",
recordText: "",
component: "Refund",
refundConfig: {
title: "原路退还给您的保费已到账",
desc: "请查收并查验金额。"
}
},
"9": {
status: ["4-4", "5-4", "7-4", "9-4"],
title: "退款金额：${title}",
contend: "支付时间：${start}",
statusText: "退款失败",
buttons: ["联系客服"]
},
"10": {
status: ["8"],
title: "被保人：${title}",
contend: "保障期限：${start} 至 ${end}",
statusText: "已终止",
buttons: ["重新投保"],
detailText: "",
recordText: "缴费记录",
component: "Guarantee"
},
"11": {
status: ["9-6"],
title: "被保人：${title}",
contend: "保障期限：${start} 至 ${end}",
statusText: "已终止",
buttons: ["联系客服"],
detailText: "退保终止，退款成功",
recordText: "缴费记录",
component: "Guarantee"
},
"12": {
status: ["10"],
title: "被保人：${title}",
contend: "保障期限：${start} 至 ${end}",
statusText: "已终止",
buttons: ["联系客服"],
detailText: "",
recordText: "缴费记录",
component: "Guarantee"
},
"13": {
status: ["2-3", "3-3"],
title: "被保人：${title}",
contend: "保障期限：${start} 至 ${end}",
statusText: "出单中",
buttons: [],
detailText: "",
recordText: "正在为您加速出单中",
component: "refund",
payCostConfig: {
title: "请耐心等待",
button: "点击刷新，查看出单结果"
}
},
"14": {
status: ["1-3"],
title: "被保人：${title}",
contend: "保障期限：${start} 至 ${end}",
statusText: "核保中",
buttons: [],
detailText: "",
recordText: "正在为您加速核保中",
component: "refund",
payCostConfig: {
title: "请耐心等待",
button: "点击刷新，查看核保结果"
}
},
"15": {
status: ["4", "5", "7-3"],
title: "被保人：${title}",
contend: "保障期限：${start} 至 ${end}",
statusText: "投保失败",
buttons: []
}
};
export default statusMap;
src/views/Policy/index.less
View file @ d65b2027
...@@ -54,7 +54,7 @@ ...@@ -54,7 +54,7 @@
color: #242629; color: #242629;
} }
&-type{ &-type{
padding: 3px 0 1px 0; padding: 3px 0 2px 0;
width: 52px; width: 52px;
border-radius: 8px 2px 8px 2px; border-radius: 8px 2px 8px 2px;
text-align: center; text-align: center;
...@@ -102,23 +102,23 @@ ...@@ -102,23 +102,23 @@
width: 100%; width: 100%;
&-button { &-button {
margin: 9px 8px 0 0; margin: 9px 8px 0 0;
// margin: 9px 8px 11px 0;
padding: 0 !important; padding: 0 !important;
width: 102px; width: 102px;
height: 28px; height: 28px;
border-radius: 8px; border-radius: 8px !important;
border: 1px solid #787EFF; border: 1px solid #787EFF !important;
background-color: #fff !important;
font-size: 14px; font-size: 14px;
font-weight: 400; font-weight: 400;
color: #787EFF; color: #787EFF !important;
line-height: 16px; line-height: 16px;
&:last-child { &:last-child {
margin-right: 12px; margin-right: 12px;
} }
&_paid { &_paid {
border: 0; border: 0 !important;
background: #F4F5FF; background: #F4F5FF !important;
color: #787EFF; color: #787EFF !important;
} }
} }
&-image { &-image {
......
src/views/Policy/index.vue
View file @ d65b2027
...@@ -9,14 +9,9 @@ ...@@ -9,14 +9,9 @@
<cr-tabbar-item>子女</cr-tabbar-item> <cr-tabbar-item>子女</cr-tabbar-item>
</cr-tabbar> </cr-tabbar>
</cr-sticky> </cr-sticky>
<policy-item></policy-item> <policy-item :type="active"></policy-item>
<cr-divider class="policy-divider">我是有底线的</cr-divider> <cr-divider class="policy-divider">我是有底线的</cr-divider>
<insurance-recommend></insurance-recommend> <insurance-recommend></insurance-recommend>
<!-- <div class="policy-none">
<cr-image class="policy-none-image" round width="" height="" :src="policyDefault" />
<p class="policy-none-title">暂无保单</p>
<p class="policy-none-desc">赶紧去看看有哪些精品保险吧</p>
</div> -->
</div> </div>
</template> </template>
<script> <script>
......
src/views/Policy/mixin/policyStatus.mixin.js 0 → 100644
View file @ d65b2027
import _ from "lodash";
import STATUS_MAP from "../constants";
import { parseTime } from "@/service/utils";
import GOODS_LIST from "@/api/goodsList.mock";
export default {
data() {
return {
isFromPay: false
};
},
methods: {
getData(policy) {
const key = this.findKey(policy);
const value = _.cloneDeep(STATUS_MAP[key]);
// console.log(status, key, value);
if (["6", "7", "8", "9"].includes(key)) {
value.title = value.title.replace("${title}", policy?.refundInfo?.amount || "-");
value.contend = value.contend.replace(
"${start}",
parseTime(policy?.refundInfo?.payTime, "{y}-{m}-{d}")
);
} else {
value.title = value.title.replace("${title}", policy?.insuredUserName || "-");
value.contend = value.contend
.replace("${start}", parseTime(policy?.policyEffectiveDate, "{y}-{m}-{d}"))
.replace("${end}", parseTime(policy?.policyEndDate, "{y}-{m}-{d}"))
.replace("${money}", policy?.payInfo?.amount || "-");
}
// 校验是否支付成功
const status = this.getStatus(policy);
console.log(1, this.isFromPay, status);
if (["6.2-3", "6.1-3"].includes(status) && this.isFromPay) {
this.$router.replace("/policy/success");
}
return {
...policy,
..._.find(GOODS_LIST, { id: +policy?.productNo }),
cardConfig: { ...value, key }
};
},
findKey(policy) {
const status = this.getStatus(policy);
return _.findKey(STATUS_MAP, v => v.status.includes(status));
},
getStatus(policy) {
return policy?.payState
? `${policy?.policyState}-${policy?.payState}`
: String(policy?.policyState);
}
},
beforeRouteEnter(to, from, next) {
next(vm => {
const prePath = ["/goods/inform", "/goods/detail", "/policy/add"];
if (prePath.includes(from.path)) {
vm.isFromPay = true;
console.log(2, vm.isFromPay)
}
});
}
};
src/views/Policy/modules/InsuranceRecommend.vue
View file @ d65b2027
...@@ -10,7 +10,7 @@ ...@@ -10,7 +10,7 @@
<p class="Prc-right-desc">优势介绍 优势介绍 优势介绍</p> <p class="Prc-right-desc">优势介绍 优势介绍 优势介绍</p>
</div> </div>
</div> </div>
<cr-button class="policy-recommend-button">点此投保</cr-button> <cr-button class="policy-recommend-button" @click="goNext()">点此投保</cr-button>
<cr-image class="policy-recommend-angle" width="" height="" :src="recommendAngle" /> <cr-image class="policy-recommend-angle" width="" height="" :src="recommendAngle" />
</div> </div>
</template> </template>
...@@ -25,6 +25,11 @@ export default { ...@@ -25,6 +25,11 @@ export default {
recommendAngle, recommendAngle,
recommendContent recommendContent
}; };
},
methods: {
goNext() {
// todo 跳转医疗险详情页
}
} }
}; };
</script> </script>
......
src/views/Policy/modules/PolicyItem.vue
View file @ d65b2027
<template> <template>
<div> <div>
<div class="policy-item" v-for="item in list" :key="item.orderNo"> <template v-if="list.length">
<div
class="policy-item"
v-for="(item, index) in list"
:key="index"
@click="goDetail(item.orderNo)"
>
<div class="policy-item-pro"> <div class="policy-item-pro">
<p class="policy-item-pro-name">国民保·百万医疗险</p> <p class="policy-item-pro-name">{{ item.title }}</p>
<p class="policy-item-pro-type policy-item-pro-type_medical">医疗保障</p> <p
:class="[
{ 'policy-item-pro-type_medical': item.itype === 'mi' },
{ 'policy-item-pro-type_illness': item.itype === 'cii' },
{ 'policy-item-pro-type_casualty': item.itype === 'ai' },
{ 'policy-item-pro-type_life': item.itype === 'li' },
'policy-item-pro-type'
]"
>
{{ item.guarantee_title }}
</p>
<p class="policy-item-pro-status" v-if="!showStatusText(item.cardConfig.statusText)">
{{ item.cardConfig.statusText }}
</p>
</div> </div>
<p class="policy-item-recognizee">被保人：王*闹</p> <p class="policy-item-recognizee">{{ item.cardConfig.title }}</p>
<p class="policy-item-time">保障期限：2020.5.31至2021.5.30</p> <p class="policy-item-time">{{ item.cardConfig.contend }}</p>
<div class="policy-item-operation"> <div class="policy-item-operation">
<cr-button class="policy-item-operation-button">为家人投保</cr-button> <cr-button
<cr-button class="policy-item-operation-button">电子保单</cr-button> :class="[
{ 'policy-item-operation-button_paid': ['去支付', '开通自动续费'].includes(button) },
'policy-item-operation-button'
]"
v-for="button in item.cardConfig.buttons"
:key="button"
@click="goNext(button, item)"
>{{ button }}</cr-button
>
<p
class="policy-item-operation-desc"
:class="
['13', '14'].includes(item.cardConfig.key)
? 'policy-item-operation-desc_wait'
: 'policy-item-operation-desc_result'
"
v-if="item.stateDesc"
>
{{ item.stateDesc }}
</p>
</div> </div>
<cr-image <cr-image
class="policy-item-operation-image" class="policy-item-operation-image"
...@@ -17,122 +55,86 @@ ...@@ -17,122 +55,86 @@
height="" height=""
fit="cover" fit="cover"
src="@/assets/images/policy/guarantee@2x.png" src="@/assets/images/policy/guarantee@2x.png"
v-if="showStatusText(item.cardConfig.statusText)"
/> />
</div> </div>
<div class="policy-item"> </template>
<div class="policy-item-pro"> <div class="policy-none" v-else>
<p class="policy-item-pro-name">国民保·百万意外险</p>
<p class="policy-item-pro-type policy-item-pro-type_casualty">意外保障</p>
</div>
<p class="policy-item-recognizee">被保人：王*闹</p>
<p class="policy-item-time">保障期限：2020.5.31至2021.5.30</p>
<div class="policy-item-operation">
<cr-button class="policy-item-operation-button policy-item-operation-button_paid"
>开启自动续费</cr-button
>
<cr-button class="policy-item-operation-button">电子保单</cr-button>
<p class="policy-item-operation-desc policy-item-operation-desc_result">
有XX.X元扣费失败，请立即开通自动续费
</p>
</div>
<cr-image <cr-image
class="policy-item-operation-image" class="policy-none-image"
round
width="" width=""
height="" height=""
fit="cover" src="@/assets/images/policy/policy-default@2x.png"
src="@/assets/images/policy/guarantee@2x.png"
/> />
</div> <p class="policy-none-title">暂无保单</p>
<div class="policy-item"> <p class="policy-none-desc">赶紧去看看有哪些精品保险吧</p>
<div class="policy-item-pro">
<p class="policy-item-pro-name">国民保·百万医疗险</p>
<p class="policy-item-pro-type policy-item-pro-type_medical">医疗保障</p>
<p class="policy-item-pro-status">待生效</p>
</div>
<p class="policy-item-recognizee">被保人：王*闹</p>
<p class="policy-item-time">保障期限：2020.5.31至2021.5.30</p>
<div class="policy-item-operation">
<cr-button class="policy-item-operation-button">为家人投保</cr-button>
<cr-button class="policy-item-operation-button">电子保单</cr-button>
</div>
</div>
<div class="policy-item">
<div class="policy-item-pro">
<p class="policy-item-pro-name">国民保·百万医疗险</p>
<p class="policy-item-pro-type policy-item-pro-type_illness">重疾保障</p>
<p class="policy-item-pro-status">待支付</p>
</div>
<p class="policy-item-recognizee">被保人：王*闹</p>
<p class="policy-item-time">保障期限：2020.5.31至2021.5.30</p>
<div class="policy-item-operation">
<cr-button class="policy-item-operation-button policy-item-operation-button_paid"
>去支付</cr-button
>
</div>
</div>
<div class="policy-item">
<div class="policy-item-pro">
<p class="policy-item-pro-name">国民保·百万医疗险</p>
<p class="policy-item-pro-type policy-item-pro-type_life">寿险保障</p>
<p class="policy-item-pro-status">退款中</p>
</div>
<p class="policy-item-recognizee">被保人：王*闹</p>
<p class="policy-item-time">保障期限：2020.5.31至2021.5.30</p>
<div class="policy-item-operation">
<cr-button class="policy-item-operation-button">联系客服</cr-button>
<p class="policy-item-operation-desc policy-item-operation-desc_result">
退保退款中，请注意查收
</p>
</div>
</div>
<div class="policy-item">
<div class="policy-item-pro">
<p class="policy-item-pro-name">国民保·百万医疗险</p>
<p class="policy-item-pro-type policy-item-pro-type_life">寿险保障</p>
<p class="policy-item-pro-status">出单中</p>
</div>
<p class="policy-item-recognizee">被保人：王*闹</p>
<p class="policy-item-time">保障期限：2020.5.31至2021.5.30</p>
<div class="policy-item-operation">
<cr-button class="policy-item-operation-button">联系客服</cr-button>
<p class="policy-item-operation-desc policy-item-operation-desc_wait">
正在出单，请耐心等待…
</p>
</div>
</div>
<div class="policy-item">
<div class="policy-item-pro">
<p class="policy-item-pro-name">国民保·百万医疗险</p>
<p class="policy-item-pro-type policy-item-pro-type_life">寿险保障</p>
<p class="policy-item-pro-status">投保失败</p>
</div>
<p class="policy-item-recognizee">被保人：王*闹</p>
<p class="policy-item-time">保障期限：2020.5.31至2021.5.30</p>
<div class="policy-item-operation">
<p class="policy-item-operation-desc policy-item-operation-desc_result">
很抱歉，被保人的核保未通过
</p>
</div>
</div> </div>
</div> </div>
</template> </template>
<script> <script>
import _ from "lodash";
import GOODS_LIST from "@/api/goodsList.mock"; import GOODS_LIST from "@/api/goodsList.mock";
import { getPolicyList } from "@/api/policy"; import { getPolicyList } from "@/api/policy";
import policyStatusMixin from "../mixin/policyStatus.mixin";
// SELF(0, "本人"),
// PARENT(1, "父母"),
// SPOUSE(2, "配偶"),
// CHILDREN(3, "子女");
const relations = [-1, 0, 1, 2, 3];
export default { export default {
name: "InsuranceRecommend", name: "InsuranceRecommend",
mixins: [policyStatusMixin],
props: {
type: {
type: Number,
default: () => 0
}
},
data() { data() {
return { return {
list: [] list: []
}; };
}, },
async created() { created() {
const goodsList = GOODS_LIST.reduce((pre, next) => { this.getList(this.type);
return pre.concat(next.children); },
}, []); watch: {
type(val) {
this.getList(val);
}
},
methods: {
async getList(type) {
let list = await getPolicyList(); let list = await getPolicyList();
this.list = list.map(v => goodsList.find(goods => goods.id === +v.productNo)); this.list = list
.filter(
v =>
_.some(GOODS_LIST, { id: +v.productNo }) &&
(type === 0 ? true : v.insuredRelation === relations[type]) &&
this.findKey(v)
)
.map(this.getData);
},
showStatusText(text) {
return text === "保障中";
},
goNext(text, item) {
// if (text === "为家人投保") {
// } else if (text === "电子保单") {
// } else if (text === "开通自动续费") {
// } else if (text === "去支付") {
// } else if (text === "重新投保") {
// } else if (text === "联系客服") {
// }
},
goDetail(orderNo) {
const policy = this.list.find(v => v.orderNo === orderNo);
if (["9", "15"].includes(policy.cardConfig.key)) return;
this.$router.push(`/policy/detail/${orderNo}`);
}
} }
}; };
</script> </script>
......
src/views/User/Family/Detail/index.vue
View file @ d65b2027
...@@ -23,12 +23,14 @@ export default { ...@@ -23,12 +23,14 @@ export default {
} }
}; };
}, },
created() { async created() {
await this.setFamilyList();
const information = this.familyList.find( const information = this.familyList.find(
family => family.userInfoSecId === this.$route.params.id family => +family.userInfoSecId === +this.$route.params.id
); );
this.information = { this.information = {
...information, ...information,
relation: information.appellation,
socialSecurity: information.socialSecurity ? "true" : "false" socialSecurity: information.socialSecurity ? "true" : "false"
}; };
}, },
......
src/views/User/Family/index.less
View file @ d65b2027
...@@ -233,6 +233,7 @@ ...@@ -233,6 +233,7 @@
color: #333333; color: #333333;
line-height: 22px; line-height: 22px;
&_deleted { &_deleted {
width: 100%;
margin-top: 15px; margin-top: 15px;
background: #F6F7FA !important; background: #F6F7FA !important;
} }
......
src/views/User/Family/index.vue
View file @ d65b2027
...@@ -4,7 +4,7 @@ ...@@ -4,7 +4,7 @@
<p class="family-title">已添加家人</p> <p class="family-title">已添加家人</p>
<div class="family-list" v-if="!isCollapse"> <div class="family-list" v-if="!isCollapse">
<div <div
:class="[{ 'family-list-item_overlay': isCollapse && index === 0 }, 'family-list-item']" class="family-list-item"
v-for="(item, index) in familyList" v-for="(item, index) in familyList"
@click="go(`/user/family/detail/${item.userInfoSecId}`)" @click="go(`/user/family/detail/${item.userInfoSecId}`)"
:key="index" :key="index"
...@@ -12,7 +12,7 @@ ...@@ -12,7 +12,7 @@
<div class="Fl-item-left"> <div class="Fl-item-left">
<cr-image class="Fli-left-image" :src="item.avatar" width="" height="" /> <cr-image class="Fli-left-image" :src="item.avatar" width="" height="" />
<span class="Fli-left-name">{{ item.name }}</span> <span class="Fli-left-name">{{ item.name }}</span>
<span class="Fli-left-relation">{{ item.relation }}</span> <span class="Fli-left-relation">{{ item.appellation }}</span>
</div> </div>
<p class="Fl-item-right" v-if="item.auth">已认证</p> <p class="Fl-item-right" v-if="item.auth">已认证</p>
</div> </div>
...@@ -25,7 +25,7 @@ ...@@ -25,7 +25,7 @@
<div class="Fl-item-left"> <div class="Fl-item-left">
<cr-image class="Fli-left-image" :src="familyList[0].avatar" width="" height="" /> <cr-image class="Fli-left-image" :src="familyList[0].avatar" width="" height="" />
<span class="Fli-left-name">{{ familyList[0].name }}</span> <span class="Fli-left-name">{{ familyList[0].name }}</span>
<span class="Fli-left-relation">{{ familyList[0].relation }}</span> <span class="Fli-left-relation">{{ familyList[0].appellation }}</span>
</div> </div>
<p class="Fl-item-right" v-if="familyList[0].auth">已认证</p> <p class="Fl-item-right" v-if="familyList[0].auth">已认证</p>
</div> </div>
...@@ -39,61 +39,6 @@ ...@@ -39,61 +39,6 @@
</div> </div>
</div> </div>
<user-family-form type="add" title="为家人添加保障"></user-family-form> <user-family-form type="add" title="为家人添加保障"></user-family-form>
<!-- <p class="family-title">为家人添加保障</p>
<cr-form ref="form" class="family-form" @submit="onSubmit" @failed="onFailed">
<cr-field
class="family-form-item"
v-model="formData.name"
name="姓名"
label="姓名"
placeholder="请输入投保人姓名"
:rules="[{ required: true, message: '请填写用户名' }]"
/>
<cr-field
class="family-form-item"
v-model="formData.idNo"
type="password"
name="身份证号"
label="身份证号"
placeholder="请填写家人身份证号"
:rules="[{ required: true, message: '请填写身份证号' }]"
/>
<cr-field
@click.native="showPopups"
class="family-form-item"
v-model="formData.relation"
:readonly="true"
name="与本人的关系"
label="与本人的关系"
placeholder="请选择与本人的关系"
:rules="[{ required: true, message: '请选择与本人的关系' }]"
/>
<div class="family-form-radio">
<div class="Ff-radio-title">
<span class="Ffr-title-text">有无社保</span>
<svg-icon
icon-class="doubt"
@click.native="modal.delete = true"
class-name="Ffr-title-svg"
/>
</div>
<cr-field
class="Ff-radio-options"
name="社保"
:rules="[{ required: true, message: '请选择有无社保' }]"
>
<cr-radio-btn
class=""
slot="input"
v-model="formData.socialSecurity"
:radio-data="planOptions"
/>
</cr-field>
</div>
<cr-button class="family-form-button" native-type="submit">
生成保障方案
</cr-button>
</cr-form> -->
</div> </div>
</template> </template>
<script> <script>
...@@ -107,7 +52,7 @@ export default { ...@@ -107,7 +52,7 @@ export default {
}, },
data() { data() {
return { return {
isCollapse: true isCollapse: false
}; };
}, },
computed: { computed: {
...@@ -116,24 +61,13 @@ export default { ...@@ -116,24 +61,13 @@ export default {
return this.isCollapse ? "点击展开" : "点击收起"; return this.isCollapse ? "点击展开" : "点击收起";
} }
}, },
created() { async created() {
this.setFamilyList(); await this.setFamilyList();
this.isCollapse = this.familyList.length > 1;
}, },
methods: { methods: {
...mapActions("user", ["setFamilyList"]), ...mapActions("user", ["setFamilyList"]),
onConfirm(picker, res) {
this.formData.relation = res[0];
this.showPopup = false;
},
showPopups() {
this.showPopup = true;
if (!this.refreshed) {
this.$refs.picker.refreshColumns();
this.refreshed = true;
}
},
go(path) { go(path) {
console.log(path);
this.$router.push(path); this.$router.push(path);
} }
} }
......
src/views/User/Family/modules/FamilyForm.vue
View file @ d65b2027
...@@ -55,7 +55,7 @@ ...@@ -55,7 +55,7 @@
class="family-modal" class="family-modal"
v-model="modal.question" v-model="modal.question"
:closeable="false" :closeable="false"
@cancel="modal.question = false" @confirm="modal.question = false"
cancel-btn="" cancel-btn=""
title="我们常说的社保都包括哪些？" title="我们常说的社保都包括哪些？"
confirm-btn="我知道了" confirm-btn="我知道了"
...@@ -99,7 +99,9 @@ ...@@ -99,7 +99,9 @@
cancel-btn="确认删除" cancel-btn="确认删除"
confirm-btn="继续保留" confirm-btn="继续保留"
title="删除确认" title="删除确认"
>确认删除【王大闹】的个人信息吗？为提供全面的家庭保障，建议您保留家庭成员信息。 >确认删除【{{
information.nameMask
}}】的个人信息吗？为提供全面的家庭保障，建议您保留家庭成员信息。
</Modal> </Modal>
<cr-popup v-model="showPopup" position="bottom"> <cr-popup v-model="showPopup" position="bottom">
<cr-picker <cr-picker
...@@ -118,12 +120,20 @@ import formValidMixin from "@/mixins/formValidate.mixin"; ...@@ -118,12 +120,20 @@ import formValidMixin from "@/mixins/formValidate.mixin";
import { addFamily, updateFamily, delFamily } from "@/api/user"; import { addFamily, updateFamily, delFamily } from "@/api/user";
import CrRadioBtn from "@/components/CrRadioBtn"; import CrRadioBtn from "@/components/CrRadioBtn";
import Modal from "@/components/Modal"; import Modal from "@/components/Modal";
import _ from "lodash";
const relations = ["本人", "配偶", "父母", "子女"]; const relations = ["本人", "配偶", "父母", "子女"];
const planOptions = [ const planOptions = [
{ label: "有社保", value: "true" }, { label: "有社保", value: "true" },
{ label: "无社保", value: "false" } { label: "无社保", value: "false" }
]; ];
const defaultFormData = {
userInfoSecId: "",
nameMask: "",
idNoMask: "",
socialSecurity: "",
relation: ""
};
export default { export default {
name: "FamilyForm", name: "FamilyForm",
...@@ -143,7 +153,7 @@ export default { ...@@ -143,7 +153,7 @@ export default {
}, },
information: { information: {
type: Object, type: Object,
default: () => ({}) default: () => defaultFormData
} }
}, },
data() { data() {
...@@ -156,7 +166,7 @@ export default { ...@@ -156,7 +166,7 @@ export default {
confirm: false, confirm: false,
delete: false delete: false
}, },
formData: this.information, formData: _.cloneDeep(this.information),
isCollapse: true isCollapse: true
}; };
}, },
...@@ -183,8 +193,10 @@ export default { ...@@ -183,8 +193,10 @@ export default {
return this.type === "update" && this.formData.relation !== "本人" ? true : false; return this.type === "update" && this.formData.relation !== "本人" ? true : false;
} }
}, },
created() { watch: {
console.log(this.formData); information(value) {
this.formData = _.cloneDeep(value);
}
}, },
methods: { methods: {
...mapActions("user", ["setFamilyList"]), ...mapActions("user", ["setFamilyList"]),
...@@ -200,6 +212,8 @@ export default { ...@@ -200,6 +212,8 @@ export default {
} else { } else {
await updateFamily(params); await updateFamily(params);
} }
await this.setFamilyList();
this.formData = _.cloneDeep(defaultFormData);
}, },
onConfirm(picker, res) { onConfirm(picker, res) {
this.formData.relation = res[0]; this.formData.relation = res[0];
......
src/views/User/index.vue
View file @ d65b2027
...@@ -25,7 +25,7 @@ ...@@ -25,7 +25,7 @@
<div class="user-insurance-list" @click="go('/policy')"> <div class="user-insurance-list" @click="go('/policy')">
<div class="user-insurance-list-icon"> <div class="user-insurance-list-icon">
<svg-icon icon-class="all-insurance-policy" class-name="user-insurance-list-icon-svg" /> <svg-icon icon-class="all-insurance-policy" class-name="user-insurance-list-icon-svg" />
<div class="user-insurance-list-icon-dot"></div> <div class="user-insurance-list-icon-dot" v-if="showDot"></div>
</div> </div>
<span class="user-insurance-list-title">全部保单</span> <span class="user-insurance-list-title">全部保单</span>
</div> </div>
...@@ -62,10 +62,10 @@ ...@@ -62,10 +62,10 @@
import { mapState, mapActions } from "vuex"; import { mapState, mapActions } from "vuex";
import customerService from "@/assets/images/user/customer-service@2x.png"; import customerService from "@/assets/images/user/customer-service@2x.png";
import help from "@/assets/images/user/help@2x.png"; import help from "@/assets/images/user/help@2x.png";
import avatar from "@/assets/images/user/avatar@2x.png";
import UserFamily from "./modules/UserFamily"; import UserFamily from "./modules/UserFamily";
import Tabbar from "@/components/Tabbar"; import Tabbar from "@/components/Tabbar";
import RecordLayer from "@/components/RecordLayer"; import RecordLayer from "@/components/RecordLayer";
import { getPolicyList } from "@/api/policy";
export default { export default {
name: "User", name: "User",
...@@ -76,20 +76,21 @@ export default { ...@@ -76,20 +76,21 @@ export default {
}, },
data() { data() {
return { return {
avatar,
customerService, customerService,
help, help,
isFixed: false, isFixed: false,
showLayer: false showLayer: false,
showDot: false
}; };
}, },
computed: { computed: {
...mapState("user", ["familyList", "userInfo"]) ...mapState("user", ["familyList", "userInfo"])
}, },
async created() { async created() {
await this.setUserInfo(); this.setUserInfo();
await this.setFamilyList(); const policyList = await getPolicyList();
console.log(this.familyList, this.userInfo); await this.setFamilyList(policyList);
this.showDot = policyList.some(policy => policy.policyState === "6.3");
}, },
methods: { methods: {
...mapActions("user", ["setFamilyList", "setUserInfo"]), ...mapActions("user", ["setFamilyList", "setUserInfo"]),
......
src/views/User/modules/UserFamily.vue
View file @ d65b2027
...@@ -6,16 +6,10 @@ ...@@ -6,16 +6,10 @@
class="user-family-info-item" class="user-family-info-item"
@click="activeIndex = index" @click="activeIndex = index"
v-for="(item, index) in familyList" v-for="(item, index) in familyList"
:key="item.id" :key="index"
> >
<cr-image <cr-image round width="40px" height="40px" fit="cover" :src="item.avatar" />
round <span class="user-family-info-item-name">{{ item.nameMask }}</span>
width="40px"
height="40px"
fit="cover"
src="http://desk.fd.zol-img.com.cn/g5/M00/00/07/ChMkJ1ZqMb2IWITEAAbRDaofaNIAAGBHwO3hh0ABtEl380.jpg"
/>
<span class="user-family-info-item-name">王斌</span>
<div class="user-family-info-item-divider" v-show="index === activeIndex"></div> <div class="user-family-info-item-divider" v-show="index === activeIndex"></div>
</div> </div>
<div <div
...@@ -29,7 +23,7 @@ ...@@ -29,7 +23,7 @@
</div> </div>
<div class="user-family-insurance"> <div class="user-family-insurance">
<!-- user-family-insurance-item-middle_enable 保障中 --> <!-- user-family-insurance-item-middle_enable 保障中 -->
<div class="user-family-insurance-item" v-for="item in policyList" :key="item.id"> <div class="user-family-insurance-item" v-for="(item, index) in policyList" :key="index">
<cr-image <cr-image
round round
width="" width=""
...@@ -102,7 +96,6 @@ export default { ...@@ -102,7 +96,6 @@ export default {
computed: { computed: {
...mapState("user", ["familyList"]), ...mapState("user", ["familyList"]),
policyList() { policyList() {
// console.log(this.activeIndex, this.familyList[this.activeIndex]?.policyList);
return this.familyList[this.activeIndex]?.policyList; return this.familyList[this.activeIndex]?.policyList;
} }
}, },
...@@ -113,7 +106,7 @@ export default { ...@@ -113,7 +106,7 @@ export default {
const offsetWidth = document.querySelector(".user-family-info").offsetWidth; const offsetWidth = document.querySelector(".user-family-info").offsetWidth;
const scrollWidth = document.querySelector(".user-family-info").scrollWidth; const scrollWidth = document.querySelector(".user-family-info").scrollWidth;
this.isFixed = scrollWidth > offsetWidth; this.isFixed = scrollWidth > offsetWidth;
console.log(scrollWidth, offsetWidth, this.isFixed); // console.log(scrollWidth, offsetWidth, this.isFixed);
}); });
} }
}, },
......
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