Skip to content

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

feature: 完善缴费记录

parent 9a3cc7ef
Hide whitespace changes
Inline Side-by-side
Showing with 880 additions and 560 deletions
src/api/goodsList.mock.js
View file @ b7078912
...@@ -28,7 +28,7 @@ export default [ ...@@ -28,7 +28,7 @@ export default [
icon: medical, icon: medical,
guarantee_title: "医疗保障", guarantee_title: "医疗保障",
guarantee_sub: "看病报销医药费,最高600万", guarantee_sub: "看病报销医药费,最高600万",
compony: "泰康在线" company: "泰康在线"
}, },
{ {
id: "HTDQZJX001", id: "HTDQZJX001",
...@@ -46,7 +46,7 @@ export default [ ...@@ -46,7 +46,7 @@ export default [
icon: illness, icon: illness,
guarantee_title: "重疾保障", guarantee_title: "重疾保障",
guarantee_sub: "100种重症+40种轻症", guarantee_sub: "100种重症+40种轻症",
compony: "华泰财险" company: "华泰财险"
}, },
{ {
id: "BNZJX001", id: "BNZJX001",
...@@ -65,7 +65,7 @@ export default [ ...@@ -65,7 +65,7 @@ export default [
icon: illness, icon: illness,
guarantee_title: "重疾保障", guarantee_title: "重疾保障",
guarantee_sub: "100种重症+40种轻症", guarantee_sub: "100种重症+40种轻症",
compony: "华泰财险" company: "华泰财险"
}, },
{ {
id: "ZAYWX001", id: "ZAYWX001",
...@@ -83,7 +83,7 @@ export default [ ...@@ -83,7 +83,7 @@ export default [
icon: casualty, icon: casualty,
guarantee_title: "意外保障", guarantee_title: "意外保障",
guarantee_sub: "意外风险覆盖全,最高100万保额", guarantee_sub: "意外风险覆盖全,最高100万保额",
compony: "众安保险" company: "众安保险"
}, },
{ {
id: "HGSX001", id: "HGSX001",
...@@ -101,6 +101,6 @@ export default [ ...@@ -101,6 +101,6 @@ export default [
icon: life, icon: life,
guarantee_title: "人寿保障", guarantee_title: "人寿保障",
guarantee_sub: "最高350万保额,顶梁柱必备", guarantee_sub: "最高350万保额,顶梁柱必备",
compony: "华泰财险" company: "华泰财险"
} }
]; ];
src/api/policy.js
View file @ b7078912
...@@ -9,3 +9,18 @@ export const getPolicyList = () => { ...@@ -9,3 +9,18 @@ export const getPolicyList = () => {
export const getPolicyDetail = orderNo => { export const getPolicyDetail = orderNo => {
return req.get(`/policy_order/detail?orderNo=${orderNo}`); return req.get(`/policy_order/detail?orderNo=${orderNo}`);
}; };
// 查询订单详情(购买成功页面使用)
export const getGenPolicyDetail = orderNo => {
return req.get(`/policy_order/general?orderNo=${orderNo}`);
};
// 查询缴费记录
export const getPayRecord = policySecId => {
return req.get(`/policy/pay_record?policySecId=${policySecId}`);
};
// 保单自动续保状态管理
export const updateRenewal = (policySecId, status) => {
return req.post(`/auto_renew_policy/${policySecId}/${status}`);
};
src/api/user.js
View file @ b7078912
...@@ -27,7 +27,7 @@ export const getCaptchaImg = param => { ...@@ -27,7 +27,7 @@ export const getCaptchaImg = param => {
// 获取用户信息 // 获取用户信息
export const getUserInfo = () => { export const getUserInfo = () => {
return req.get("user/me"); return req.get("/user/info/me");
}; };
// 查询家人列表 // 查询家人列表
......
src/router/routes.js
View file @ b7078912
...@@ -90,7 +90,7 @@ export default [ ...@@ -90,7 +90,7 @@ export default [
component: () => import("../views/Policy/VirtualDetail/index.vue") component: () => import("../views/Policy/VirtualDetail/index.vue")
}, },
{ {
path: "/policy/success", path: "/policy/success/:orderNo",
name: "Sucess", name: "Sucess",
component: () => import("../views/Policy/Success/index.vue") component: () => import("../views/Policy/Success/index.vue")
}, },
...@@ -100,15 +100,20 @@ export default [ ...@@ -100,15 +100,20 @@ export default [
component: () => import("../views/Policy/Add/index.vue") component: () => import("../views/Policy/Add/index.vue")
}, },
{ {
path: "/policy/payment-record", path: "/policy/payment-record/:orderNo/:status",
name: "PaymentRecord", name: "PaymentRecord",
component: () => import("../views/Policy/PaymentRecord/index.vue") component: () => import("../views/Policy/PaymentRecord/index.vue")
}, },
{ {
path: "/policy/renewal", path: "/policy/renewal/:orderNo/:policySecId",
name: "Renewal", name: "Renewal",
component: () => import("../views/Policy/Renewal/index.vue") component: () => import("../views/Policy/Renewal/index.vue")
}, },
{
path: "/policy/pay-record/:policySecId/:status",
name: "Renewal",
component: () => import("../views/Policy/PaymentRecord/index.vue")
},
{ {
path: "/introduction", path: "/introduction",
name: "Introduction", name: "Introduction",
......
src/views/Policy/Detail/Types/Guarantee.vue
View file @ b7078912
<template> <template>
<div> <div>
<status-desc <status-desc :cardConfig="data.cardConfig" :policySecId="data.policySecId"></status-desc>
:firstTitle="data.cardConfig.detailText"
:secondTitle="data.cardConfig.statusText"
:recordText="data.cardConfig.recordText"
></status-desc>
<pay-cost <pay-cost
v-if="showPayCost" v-if="showPayCost"
:statusKey="data.cardConfig.key" :statusKey="data.cardConfig.key"
:payCostConfig="data.cardConfig.payCostConfig" :payCostConfig="data.cardConfig.payCostConfig"
:day="data.payInfo && data.payInfo.expiredDay"
></pay-cost> ></pay-cost>
<insurance-card <insurance-card
:productNo="data.productNo" :productNo="data.productNo"
:policySecId="data.policySecId"
:autoRenewPremium="data.autoRenewPremium" :autoRenewPremium="data.autoRenewPremium"
:policyNo="data.policyNo" :policyNo="data.policyNo"
:orderNo="data.orderNo"
></insurance-card> ></insurance-card>
<security-content :data="data" :detail="planDetail"></security-content> <security-content :data="data" :detail="planDetail"></security-content>
<insurance-service :detail="qaDetail"></insurance-service> <insurance-service :detail="qaDetail"></insurance-service>
......
src/views/Policy/Detail/Types/Refund.vue
View file @ b7078912
<template> <template>
<div> <div>
<status-desc <status-desc :cardConfig="data.cardConfig" :policySecId="data.policySecId"></status-desc>
:firstTitle="data.cardConfig.detailText"
:secondTitle="data.cardConfig.statusText"
:recordText="data.cardConfig.recordText"
></status-desc>
<pay-cost <pay-cost
v-if="showPayCost" v-if="showPayCost"
:statusKey="data.cardConfig.key" :statusKey="data.cardConfig.key"
...@@ -15,6 +11,7 @@ ...@@ -15,6 +11,7 @@
:refundConfig="data.cardConfig.refundConfig" :refundConfig="data.cardConfig.refundConfig"
:amount="amount" :amount="amount"
:payTime="payTime" :payTime="payTime"
:payTimeText="payTimeText"
></refund> ></refund>
<Phone></Phone> <Phone></Phone>
</div> </div>
...@@ -24,7 +21,7 @@ import StatusDesc from "../modules/StatusDesc"; ...@@ -24,7 +21,7 @@ import StatusDesc from "../modules/StatusDesc";
import Phone from "../modules/Phone"; import Phone from "../modules/Phone";
import Refund from "../modules/Refund"; import Refund from "../modules/Refund";
import PayCost from "../modules/PayCost"; import PayCost from "../modules/PayCost";
import { parseTime } from "@/service/utils"; // import { parseTime } from "@/service/utils";
export default { export default {
name: "Guarantee", name: "Guarantee",
...@@ -45,10 +42,16 @@ export default { ...@@ -45,10 +42,16 @@ export default {
}, },
computed: { computed: {
amount() { amount() {
return this.data.cardConfig?.amount || 0; console.log(this.data);
return this.data.refundInfo?.amount || 0;
}, },
payTime() { payTime() {
return parseTime(this.data.cardConfig?.payTime, "{y}-{m}-{d}") || 0; return this.data.cardConfig.key === "8"
? this.data.refundInfo?.refundTime || "-"
: this.data.refundInfo?.payTime || "-";
},
payTimeText() {
return this.data.cardConfig.key === "8" ? "到账时间" : "支付时间";
}, },
showPayCost() { showPayCost() {
return ["4", "14", "13"].includes(this.data?.cardConfig?.key); return ["4", "14", "13"].includes(this.data?.cardConfig?.key);
......
src/views/Policy/Detail/index.less
View file @ b7078912
.button() { .button() {
height: 28px; height: 28px;
border-radius: 8px !important; border-radius: 8px !important;
border: 1px solid #787EFF !important; border: 1px solid #787EFF !important;
font-size: 14px; font-size: 14px;
font-weight: 400; font-weight: 400;
color: #787EFF !important; color: #787EFF !important;
line-height: 16px; line-height: 16px;
background-color: #fff !important; background-color: #fff !important;
&:first-child { &:first-child {
margin-right: 8px; margin-right: 8px;
} }
} }
.card-container() { .card-container() {
margin: 0 16px 10px; margin: 0 16px 10px;
padding: 20px; padding: 20px;
background: #FFFFFF; background: #FFFFFF;
box-shadow: 0px 5px 25px 0px rgba(0,0,0,0.07); box-shadow: 0px 5px 25px 0px rgba(0, 0, 0, 0.07);
border-radius: 14px; border-radius: 14px;
} }
.card-title(@marginBottom) { .card-title(@marginBottom) {
margin-bottom: @marginBottom; margin-bottom: @marginBottom;
font-size: 18px; font-size: 18px;
...@@ -25,6 +28,7 @@ ...@@ -25,6 +28,7 @@
color: #242629; color: #242629;
line-height: 24px; line-height: 24px;
} }
.card-desc(@marginBottom, @lineHeight: 16px) { .card-desc(@marginBottom, @lineHeight: 16px) {
margin-bottom: @marginBottom; margin-bottom: @marginBottom;
font-size: 12px; font-size: 12px;
...@@ -32,328 +36,402 @@ ...@@ -32,328 +36,402 @@
color: #999999; color: #999999;
line-height: @lineHeight; line-height: @lineHeight;
} }
.card-head() { .card-head() {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
margin-bottom: 16px; margin-bottom: 16px;
span:first-child { span:first-child {
font-size: 18px; font-size: 18px;
font-weight: 600; font-weight: 600;
color: #242629; color: #242629;
line-height: 24px; line-height: 24px;
} }
span:last-child { span:last-child {
font-size: 12px; font-size: 12px;
font-weight: 400; font-weight: 400;
color: #787EFF; color: #787EFF;
line-height: 24px; line-height: 24px;
} }
.svg-icon { .svg-icon {
padding: 4px 0; padding: 4px 0;
width: 16px; width: 16px;
height: 16px; height: 16px;
} }
} }
.card-body(@marginBottom: 0) { .card-body(@marginBottom: 0) {
margin-bottom: @marginBottom; margin-bottom: @marginBottom;
div { div {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
span:first-child {
font-size: 12px; span:first-child {
font-weight: 400; font-size: 12px;
color: #666666; font-weight: 400;
line-height: 24px; color: #666666;
} line-height: 24px;
span:last-child { }
font-size: 12px;
font-weight: 600; span:last-child {
color: #333333; font-size: 12px;
line-height: 24px; font-weight: 600;
} color: #333333;
line-height: 24px;
}
} }
} }
.policy-detail { .policy-detail {
position: relative; position: relative;
background: #F6F6F6; background: #F6F6F6;
&:before { &:before {
position: absolute; position: absolute;
width: 375px; width: 375px;
height: 269px; height: 269px;
border: 0; border: 0;
content: ''; content: '';
background: linear-gradient(360deg,rgba(244,244,244,1) 0%,rgba(255,200,66,1) 100%); background: linear-gradient(360deg, rgba(244, 244, 244, 1) 0%, rgba(255, 200, 66, 1) 100%);
} }
&:after { &:after {
position: absolute; position: absolute;
top: 38px; top: 38px;
right: 0; right: 0;
width: 36px; width: 36px;
height: 19px; height: 19px;
content: ''; content: '';
background: url('../../../assets/images/policy/detail/point@2x.png') no-repeat 0 0 /cover; background: url('../../../assets/images/policy/detail/point@2x.png') no-repeat 0 0 /cover;
} }
&-body { &-body {
position: absolute; position: absolute;
left: 0; left: 0;
right: 0; right: 0;
// padding-bottom: 49px;
.Pdb-status { // padding-bottom: 49px;
margin: 0 0 5px 20px; .Pdb-status {
font-size: 28px; margin: 0 0 5px 20px;
font-weight: 600; font-size: 28px;
color: #333333; font-weight: 600;
line-height: 40px; color: #333333;
&:first-child { line-height: 40px;
margin: 32px 0 0 20px;
} &:first-child {
} margin: 32px 0 0 20px;
.Pdb-tips { }
display: inline-flex; }
align-items: center;
justify-content: center; .Pdb-tips {
margin: 0 0 24px 20px; display: inline-flex;
padding: 0 4px; align-items: center;
width: auto; justify-content: center;
height: 20px; margin: 0 0 24px 20px;
background: #000000; padding: 0 4px;
border-radius: 8px; width: auto;
opacity: 0.2; height: 20px;
&-text { background: #000000;
margin-right: 1px; border-radius: 8px;
font-size: 12px; opacity: 0.2;
font-weight: 400;
color: #FFFFFF; &-text {
line-height: 12px; margin-right: 1px;
} font-size: 12px;
&-svg { font-weight: 400;
width: 12px; color: #FFFFFF;
height: 12px; line-height: 12px;
} }
}
.Pdb-refund { &-svg {
.card-container(); width: 12px;
margin: 27px 16px 10px; height: 12px;
&-title { }
.card-title(8px); }
}
&-desc { .Pdb-refund {
.card-desc(24px); .card-container();
} margin: 27px 16px 10px;
&-content {
.Pdbr-content-item { &-title {
display: flex; .card-title(8px);
align-items: center; }
justify-content: space-between;
padding: 0 16px; &-desc {
height: 50px; .card-desc(24px);
background: #F6F7FA; }
border-radius: 8px;
&-note {
&:first-child { .card-desc(16px);
margin-bottom: 12px; margin-top: 16px;
} }
span:first-child {
font-size: 14px; &-operation {
font-weight: 400; display: flex;
color: #666666; align-items: center;
line-height: 24px; justify-content: space-between;
} width: 100%;
span:last-child {
font-size: 14px; .Pdbi-operation-button {
font-weight: 500; padding: 0 !important;
color: #333333; width: 146px;
line-height: 24px; height: 40px;
} border-radius: 8px !important;
} border: 1px solid #787EFF !important;
} background-color: #fff !important;
} font-size: 14px;
.Pdb-payment { font-weight: 400;
.card-container(); color: #787EFF !important;
&-title { line-height: 16px;
.card-title(16px);
&_tips { &_paid {
font-size: 14px; border: 0 !important;
font-weight: 400; background: #F4F5FF !important;
color: #999999; color: #787EFF !important;
line-height: 16px; }
} }
} }
&-content {
margin-bottom: 17px; &-content {
.Pdbp-content-item { .Pdbr-content-item {
display: flex; display: flex;
align-items: center; align-items: center;
.Pdbpc-item-svg { justify-content: space-between;
margin-right: 8px; padding: 0 16px;
width: 12px; height: 50px;
height: 12px; background: #F6F7FA;
border-radius: 50%; border-radius: 8px;
background: #FFC842;
} &:first-child {
.Pdbpc-item-text { margin-bottom: 12px;
.card-desc(0, 24px); }
}
} span:first-child {
} font-size: 14px;
&-button { font-weight: 400;
width: 100%; color: #666666;
height: 52px; line-height: 24px;
background: #FFC842 !important; }
border-radius: 14px !important;
font-size: 16px; span:last-child {
font-weight: 600; font-size: 14px;
color: #333333; font-weight: 500;
line-height: 22px; color: #333333;
} line-height: 24px;
} }
.Pdb-insurance { }
.card-container(); }
&-name { }
.card-title(12px);
} .Pdb-payment {
&-no { .card-container();
.card-desc(16px);
} &-title {
&-operation { .card-title(16px);
.Pdbi-operation-button { .button }
} &_tips {
} font-size: 14px;
.Pdb-content { font-weight: 400;
.card-container(); color: #999999;
&-head { line-height: 16px;
.card-head }
} }
&-body {
.card-body(8px); &-content {
} margin-bottom: 17px;
&-operation {
.Pdbc-button { .button } .Pdbp-content-item {
} display: flex;
&-user { align-items: center;
margin-top: 24px;
.Pdbc-user-who { .Pdbpc-item-svg {
.card-title(16px); margin-right: 8px;
} width: 12px;
.Pdbc-user-info { height: 12px;
display: flex; border-radius: 50%;
justify-content: space-around; background: #FFC842;
align-items: center; }
width: 100%;
height: 50px; .Pdbpc-item-text {
background: #F6F7FA; .card-desc(0, 24px);
border-radius: 14px; }
span:first-child { }
font-size: 14px;
font-weight: 500;
color: #333333;
line-height: 24px;
}
span:last-child {
font-size: 14px;
font-weight: 400;
color: #666666;
line-height: 24px;
}
}
}
}
.Pdb-service {
.card-container();
margin: 0 16px 16px;
padding: 20px 20px 11px;
&-head {
.card-head();
} }
&-body {
.card-body(); &-button {
} width: 100%;
&-question { height: 52px;
// margin-top: 24px; background: #FFC842 !important;
.card-head(); border-radius: 14px !important;
} font-size: 16px;
&-divider { font-weight: 600;
margin: 0 0 12px 0; color: #333333;
&:before { line-height: 22px;
height: 1px; }
border-color: #EBEBEB; }
}
} .Pdb-insurance {
&-agreement { .card-container();
display: flex;
padding-top: 3px; &-name {
align-items: center; .card-title(12px);
flex-wrap: wrap; }
a {
font-size: 12px; &-no {
color: #333; .card-desc(16px);
&::after { }
display: inline-block;
content: " "; &-operation {
width: 0; .Pdbi-operation-button {
height: 12px; .button
border-right: 1px #333 solid; }
margin: 0 5px; }
vertical-align: -2px; }
}
&:last-child::after { .Pdb-content {
display: none; .card-container();
}
} &-head {
} .card-head
} }
.Pdb-operation {
display: flex; &-body {
justify-content: space-around; .card-body(8px);
margin-bottom: 14px; }
&-item {
display: flex; &-operation {
justify-content: space-between; .Pdbc-button {
align-items: center; .button
width: 84px; }
.Pdbo-item-svg { }
width: 16px;
height: 16px; &-user {
} margin-top: 24px;
.Pdbo-item-text {
font-size: 14px; .Pdbc-user-who {
font-weight: 400; .card-title(16px);
color: #999999; }
line-height: 20px;
} .Pdbc-user-info {
} display: flex;
} justify-content: space-around;
.Pdb-footer { align-items: center;
display: flex; width: 100%;
flex-direction: column; height: 50px;
align-items: center; background: #F6F7FA;
margin: 231px 0 20px; border-radius: 14px;
span:first-child {
margin-bottom: 2px; span:first-child {
font-size: 11px; font-size: 14px;
font-weight: 400; font-weight: 500;
color: #999999; color: #333333;
line-height: 16px; line-height: 24px;
} }
span:last-child {
font-size: 20px; span:last-child {
font-weight: 600; font-size: 14px;
color: #666666; font-weight: 400;
line-height: 28px; color: #666666;
} line-height: 24px;
} }
.Pdb-recommend { }
margin-bottom: 49px; }
} }
.Pdb-service {
.card-container();
margin: 0 16px 16px;
padding: 20px 20px 11px;
&-head {
.card-head();
}
&-body {
.card-body();
}
&-question {
margin-top: 24px;
.card-head();
}
&-divider {
margin: 0 0 12px 0;
&:before {
height: 1px;
border-color: #EBEBEB;
}
}
&-agreement {
display: flex;
justify-content: space-between;
font-size: 0;
span {
font-size: 12px;
font-weight: 400;
color: #333333;
line-height: 24px;
}
}
}
.Pdb-operation {
display: flex;
justify-content: space-around;
margin-bottom: 14px;
&-item {
display: flex;
justify-content: space-between;
align-items: center;
width: 84px;
.Pdbo-item-svg {
width: 16px;
height: 16px;
}
.Pdbo-item-text {
font-size: 14px;
font-weight: 400;
color: #999999;
line-height: 20px;
}
}
}
.Pdb-footer {
display: flex;
flex-direction: column;
align-items: center;
margin: 231px 0 20px;
span:first-child {
margin-bottom: 2px;
font-size: 11px;
font-weight: 400;
color: #999999;
line-height: 16px;
}
span:last-child {
font-size: 20px;
font-weight: 600;
color: #666666;
line-height: 28px;
}
}
.Pdb-recommend {
margin-bottom: 49px;
}
} }
}
.Pdbc-body-item {
&.inline span:first-child {
color: #999999 !important;
}
.cr-divider {
width: 100%;
margin: 11px 0;
}
} }
\ No newline at end of file
src/views/Policy/Detail/index.vue
View file @ b7078912
...@@ -28,10 +28,8 @@ export default { ...@@ -28,10 +28,8 @@ export default {
}; };
}, },
async created() { async created() {
console.log(this.$route.params.orderNo);
const detail = await getPolicyDetail(this.$route.params.orderNo); const detail = await getPolicyDetail(this.$route.params.orderNo);
this.policy = this.getData(detail); this.policy = this.getData(detail);
// if (true) {}
} }
}; };
</script> </script>
......
src/views/Policy/Detail/modules/InsuranceCard.vue
View file @ b7078912
<template> <template>
<div class="Pdb-insurance"> <div class="Pdb-insurance">
<p class="Pdb-insurance-name">{{ product.title }}</p> <p class="Pdb-insurance-name">{{ productTitle }}</p>
<p class="Pdb-insurance-no">NO.{{ policyNo }}<br />由{{ product.compony }}承保</p> <p class="Pdb-insurance-no">NO.{{ policyNo }}<br />由{{ productCompany }}承保</p>
<div class="Pdb-insurance-operation"> <div class="Pdb-insurance-operation">
<cr-button class="Pdbi-operation-button" @click="goNext">{{ buttonText }}</cr-button> <cr-button class="Pdbi-operation-button" @click="goNext">{{ buttonText }}</cr-button>
<cr-button class="Pdbi-operation-button">申请理赔</cr-button> <cr-button class="Pdbi-operation-button">申请理赔</cr-button>
...@@ -25,21 +25,34 @@ export default { ...@@ -25,21 +25,34 @@ export default {
policyNo: { policyNo: {
type: String, type: String,
default: "" default: ""
},
orderNo: {
type: String,
default: ""
},
policySecId: {
type: String,
default: ""
} }
}, },
data() { data() {
return {}; return {};
}, },
computed: { computed: {
product() { productTitle() {
return GOODS_LIST.find(v => v.id === +this.productNo); return GOODS_LIST.find(v => v.id === this.productNo)?.title || "";
},
productCompany() {
return GOODS_LIST.find(v => v.id === this.productNo)?.company || "";
}, },
buttonText() { buttonText() {
return this.autoRenewPremium ? "已开通次年续保" : "已关闭次年续保"; return this.autoRenewPremium ? "已开通次年续保" : "已关闭次年续保";
} }
}, },
methods: { methods: {
goNext() {} goNext() {
this.$router.push(`/policy/renewal/${this.orderNo}/${this.policySecId}`);
}
} }
}; };
</script> </script>
......
src/views/Policy/Detail/modules/PayCost.vue
View file @ b7078912
...@@ -4,7 +4,7 @@ ...@@ -4,7 +4,7 @@
{{ payCostConfig.title }} {{ payCostConfig.title }}
</p> </p>
<div v-else> <div v-else>
<p class="Pdb-payment-title">保障将在XX天后失效，请立即缴费</p> <p class="Pdb-payment-title">{{ expiredDayText }}</p>
<div class="Pdb-payment-content"> <div class="Pdb-payment-content">
<div class="Pdbp-content-item"> <div class="Pdbp-content-item">
<svg-icon class-name="Pdbpc-item-svg" icon-class="check-circle" /> <svg-icon class-name="Pdbpc-item-svg" icon-class="check-circle" />
...@@ -37,11 +37,18 @@ export default { ...@@ -37,11 +37,18 @@ export default {
title: "", title: "",
button: "立即缴费" button: "立即缴费"
}) })
},
day: {
type: String,
default: ""
} }
}, },
computed: { computed: {
showTips() { showTips() {
return ["4", "14", "13"].includes(this.statusKey); return ["4", "14", "13"].includes(this.statusKey);
},
expiredDayText() {
return this.statusKey === "2" ? `保障将在${this.day}天后失效，请立即缴费` : "";
} }
} }
}; };
......
src/views/Policy/Detail/modules/Refund.vue
View file @ b7078912
...@@ -8,7 +8,7 @@ ...@@ -8,7 +8,7 @@
<span>{{ amount }}元</span> <span>{{ amount }}元</span>
</div> </div>
<div class="Pdbr-content-item"> <div class="Pdbr-content-item">
<span>支付时间</span> <span>{{ payTimeText }}</span>
<span>{{ payTime }}</span> <span>{{ payTime }}</span>
</div> </div>
</div> </div>
...@@ -32,6 +32,10 @@ export default { ...@@ -32,6 +32,10 @@ export default {
payTime: { payTime: {
type: String, type: String,
default: "-" default: "-"
},
payTimeText: {
type: String,
default: "支付时间"
} }
}, },
data() { data() {
......
src/views/Policy/Detail/modules/SecurityContent.vue
View file @ b7078912
...@@ -2,24 +2,40 @@ ...@@ -2,24 +2,40 @@
<div class="Pdb-content"> <div class="Pdb-content">
<div class="Pdb-content-head"> <div class="Pdb-content-head">
<span class="Pdbc-head-name">保障内容</span> <span class="Pdbc-head-name">保障内容</span>
<router-link <span class="Pdbc-head-status">查看详情</span>
tag="span"
:to="{ name: 'GoodsPlan', query: { type: detail.type } }"
class="Pdbc-head-status"
>
查看详情
</router-link>
</div> </div>
<div class="Pdb-content-body"> <div class="Pdb-content-body">
<div <div class="Pdbc-body-item">
class="Pdbc-body-item" <span>100种重大疾病医疗保险金（0免赔额）</span>
v-for="(item, index) in content" <span>600万</span>
:key="index" </div>
:class="{ inline: item.inline }" <div class="Pdbc-body-item">
> <span>一般医疗保险金（1万免赔额）</span>
<span>{{ item.title }}</span> <span>300万</span>
<span>{{ item.value }}</span> </div>
<cr-divider v-if="item.divider" /> <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> </div>
<div class="Pdb-content-operation"> <div class="Pdb-content-operation">
...@@ -43,20 +59,13 @@ ...@@ -43,20 +59,13 @@
</template> </template>
<script> <script>
import { parseTime } from "@/service/utils"; import { parseTime } from "@/service/utils";
export default { export default {
name: "SecurityContent", name: "SecurityContent",
props: { props: {
data: { data: {
type: Object, type: Object,
default() { default: () => ({})
return {};
}
},
detail: {
type: Object,
default() {
return {};
}
} }
}, },
data() { data() {
...@@ -68,16 +77,6 @@ export default { ...@@ -68,16 +77,6 @@ export default {
}, },
EndDate() { EndDate() {
return parseTime(this.data.policyEndDate, "{y}-{m}-{d}"); return parseTime(this.data.policyEndDate, "{y}-{m}-{d}");
},
content() {
const planCellInfo = this.detail.planCellInfo
? JSON.parse(JSON.stringify(this.detail.planCellInfo))
: [];
planCellInfo.push(
{ title: "生效日期", value: this.EffectiveDate },
{ title: "终止日期", value: this.EndDate }
);
return planCellInfo;
} }
}, },
methods: { methods: {
......
src/views/Policy/Detail/modules/StatusDesc.vue
View file @ b7078912
<template> <template>
<div> <div>
<p class="Pdb-status" v-if="firstTitle">{{ firstTitle }}</p> <p class="Pdb-status" v-if="cardConfig.detailText">{{ cardConfig.detailText }}</p>
<p class="Pdb-status">{{ secondTitleText }}</p> <p class="Pdb-status">{{ cardConfig.statusText }}</p>
<div class="Pdb-tips" v-if="recordText"> <div class="Pdb-tips" v-if="cardConfig.recordText" @click="goNext">
<span class="Pdb-tips-text">{{ recordText }}</span> <span class="Pdb-tips-text">{{ cardConfig.recordText }}</span>
<svg-icon class-name="Pdb-tips-svg" icon-class="payment-record" /> <svg-icon class-name="Pdb-tips-svg" icon-class="payment-record" />
</div> </div>
</div> </div>
...@@ -12,16 +12,17 @@ ...@@ -12,16 +12,17 @@
export default { export default {
name: "StatusDesc", name: "StatusDesc",
props: { props: {
firstTitle: { cardConfig: {
type: String, type: Object,
default: "" default: () => ({
}, detailText: "",
secondTitle: { statusText: "",
type: String, recordText: "",
default: "" status: ""
})
}, },
recordText: { policySecId: {
type: String, type: [String, Number],
default: "" default: ""
} }
}, },
...@@ -30,7 +31,19 @@ export default { ...@@ -30,7 +31,19 @@ export default {
}, },
computed: { computed: {
secondTitleText() { secondTitleText() {
return this.firstTitle ? `${this.secondTitle}...` : this.secondTitle; return this.cardConfig.detailText
? `${this.cardConfig.statusText}...`
: this.cardConfig.statusText;
}
},
methods: {
goNext() {
console.log(this.cardConfig?.status);
const arr = ["6.2-3", "6.1-3", "6.3", "8", "9-5", "9-6", "10"];
if (arr.includes(this.cardConfig?.status)) {
console.log(`/policy/pay-record/${this.policySecId}/${this.cardConfig.status}`);
this.$router.push(`/policy/pay-record/${this.policySecId}/${this.cardConfig.status}`);
}
} }
} }
}; };
......
src/views/Policy/PaymentRecord/index.vue
View file @ b7078912
<template> <template>
<div class="payment-record"> <div class="payment-record">
<p class="payment-record-status">持续缴费中</p> <p class="payment-record-status">{{ termStatistics.titelText }}</p>
<p class="payment-record-desc payment-record-desc_owe">预计下次扣费时间 2020.5.11</p> <p
<!-- <div class="payment-record-term"> :class="[
{ 'payment-record-desc_owe': $route.params.status === '6.3' },
'payment-record-desc'
]"
>
{{ termStatistics.refundTimeText }}
</p>
<div class="payment-record-term" v-if="isShowCard">
<div class="Pr-term-item"> <div class="Pr-term-item">
<span>800元</span> <span>{{ termStatistics.amount }}</span>
<span>下期应缴金额</span> <span>{{ termStatistics.amountText }}</span>
</div> </div>
<div class="Pr-term-item"> <div class="Pr-term-item">
<span>6/12期</span> <span>{{ termStatistics.termText }}</span>
<span>已缴/总期数</span> <span>已缴/总期数</span>
</div> </div>
<div class="Pr-term-item"> <div class="Pr-term-item">
<span>0期</span> <span>{{ termStatistics.delayTerm }}</span>
<span>已欠缴期数</span> <span>已欠缴期数</span>
</div> </div>
</div> --> </div>
<div class="payment-record-detail"> <div class="payment-record-detail">
<div class="Pr-detail-title Pr-detail-title_year"> <div class="Pr-detail-title Pr-detail-title_year">
<span>缴费明细</span> <span>缴费明细</span>
<span>按月缴费</span> <span>{{ payPeriodText }}</span>
</div>
<div class="Pr-detail-content">
<div class="Prd-content-amount">
<span>第2期保费</span>
<span>100.0元</span>
</div>
<div class="Prd-content-time">
<span>2020.05.11 17:45</span>
<span>缴费成功</span>
</div>
</div>
<div class="Pr-detail-content">
<div class="Prd-content-amount">
<span>第2期保费</span>
<span>100.0元</span>
</div>
<div class="Prd-content-time">
<span>2020.05.11 17:45</span>
<span>缴费成功</span>
</div>
</div>
<div class="Pr-detail-content">
<div class="Prd-content-amount">
<span>第2期保费</span>
<span>100.0元</span>
</div>
<div class="Prd-content-time">
<span>2020.05.11 17:45</span>
<span>缴费成功</span>
</div>
</div>
<div class="Pr-detail-content">
<div class="Prd-content-amount">
<span>第2期保费</span>
<span>100.0元</span>
</div>
<div class="Prd-content-time">
<span>2020.05.11 17:45</span>
<span>缴费成功</span>
</div>
</div> </div>
<div class="Pr-detail-content"> <div class="Pr-detail-content" v-for="(item, index) in termList" :key="index">
<div class="Prd-content-amount"> <div class="Prd-content-amount">
<span>第2期保费</span> <span>{{ item.termNoText }}</span>
<span>100.0元</span> <span>{{ item.amountText }}</span>
</div> </div>
<div class="Prd-content-time"> <div class="Prd-content-time">
<span>2020.05.11 17:45</span> <span>{{ item.recordDate }}</span>
<span>缴费成功</span> <span>{{ item.payStatusText }}</span>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</template> </template>
<script></script> <script>
import { getPayRecord } from "@/api/policy";
export default {
name: "paymentRecord",
data() {
return {
record: {},
termStatistics: {},
termList: [],
List: [],
title: "",
desc: "",
clauseStatistics: {
amount: 0,
paidTerm: "",
delayTerm: "",
totalTerm: ""
}
};
},
async created() {
this.record = await getPayRecord(this.$route.params.policySecId);
this.getTermStatistics();
this.getTermList();
},
computed: {
payPeriodText() {
return this.record.payPeriod === 1 ? "按月缴费" : "按年缴费";
},
isShowCard() {
console.log(this.record?.payPeriod === 1);
return this.record?.payPeriod === 1 && !["8", "10"].includes(this.$route.params.status);
}
},
methods: {
getTermStatistics() {
const status = this.$route.params.status;
const isMonthPay = this.record?.payPeriod === 1;
let result = {
titelText: "",
refundTimeText: "",
amount: "",
amountText: "",
termText: "",
delayTerm: ""
};
// 不同状态对应的缴费记录
if (["6.2-3", "6.1-3", "6.3"].includes(status)) {
result = {
titelText: isMonthPay ? "持续缴费中" : "缴费成功",
refundTimeText: isMonthPay
? `预计下次扣费时间 ${this.record.nextPayDate}`
: `下次缴费时间 ${this.record.nextPayDate}`,
amount: `${this.record?.nextTermAmount || 0}元`,
amountText: "下期应缴金额",
termText: `${this.record.paidTerm}/${this.record.totalTerm}期`,
delayTerm: `${this.record.delayTerm}期`
};
if (status === "6.3") {
result.refundTimeText = `保单已欠费，欠缴${this.record?.delayAmount}元`;
}
} else if (["8", "9-5", "9-6", "10"].includes(status)) {
result = {
titelText: `共缴纳${this.record.totalAmount}元`,
refundTimeText: "保障已终止",
amount: `${this.record?.nextTermAmount || 0}元`,
amountText: "应退金额",
termText: `${this.record.paidTerm}/${this.record.totalTerm}期`,
delayTerm: `${this.record.delayTerm}期`
};
}
this.termStatistics = result;
},
getTermList() {
const status = this.$route.params.status;
const list =
this.record?.recordTerm?.map(v => ({
termNoText: this.record?.payPeriod === 1 ? `第${v.termNo}期保费` : "1年保费",
recordDate: v.recordDate,
amountText: `${v.amount}元`,
payStatusText: "缴费成功"
})) || [];
if (["9-5", "9-6"].includes(status)) {
list.unshift({
termNoText: "退款中",
recordDate: this.record?.refundRecord?.payTime || "-",
amountText: `${this.record?.refundRecord?.amount}元`,
payStatusText: "应退金额"
});
}
this.termList = list;
}
}
};
</script>
<style lang="less" src="./index.less" scoped></style> <style lang="less" src="./index.less" scoped></style>
src/views/Policy/Renewal/index.less
View file @ b7078912
...@@ -3,116 +3,136 @@ ...@@ -3,116 +3,136 @@
.renewal { .renewal {
overflow: hidden; overflow: hidden;
height: 100%; height: 100%;
&:after { &:after {
position: absolute; position: absolute;
top: 38px; top: 38px;
right: 0; right: 0;
width: 36px; width: 36px;
height: 19px; height: 19px;
content: ''; content: '';
background: url('../../../assets/images/policy/detail/point@2x.png') no-repeat 0 0 /cover; background: url('../../../assets/images/policy/detail/point@2x.png') no-repeat 0 0 /cover;
} }
&_open { &_open {
background: #FFC842; background: #FFC842;
} }
&_closed { &_closed {
background: #F65D5D; background: #F65D5D;
} }
&-status { &-status {
margin: 64px 0 0 20px; margin: 64px 0 0 20px;
font-size: 28px; font-size: 28px;
font-weight: 600; font-weight: 600;
color: #333333; color: #333333;
line-height: 40px; line-height: 40px;
} }
&-desc { &-desc {
margin: 0 0 49px 20px; margin: 0 0 49px 20px;
font-size: 28px; font-size: 28px;
font-weight: 400; font-weight: 400;
color: #333333; color: #333333;
line-height: 40px; line-height: 40px;
} }
&-container { &-container {
position: absolute; position: absolute;
left: 0; left: 0;
right: 0; right: 0;
bottom: 0; bottom: 0;
padding: 28px 20px 34px; padding: 28px 20px 34px;
background: #FFFFFF; background: #FFFFFF;
border-radius: 32px 32px 0 0; border-radius: 32px 32px 0 0;
&-title { &-title {
margin-bottom: 16px; margin-bottom: 16px;
font-size: 18px; font-size: 18px;
font-weight: 600; font-weight: 600;
color: #242629; color: #242629;
line-height: 24px; line-height: 24px;
} }
&-content { &-content {
margin-bottom: 4px; margin-bottom: 4px;
.Rc-content-item {
display: flex; .Rc-content-item {
align-items: center; display: flex;
.Rcc-item-svg { align-items: center;
margin-right: 8px;
width: 12px; .Rcc-item-svg {
height: 12px; margin-right: 8px;
border-radius: 50%; width: 12px;
background: #FFC842; height: 12px;
} border-radius: 50%;
.Rcc-item-text { background: #FFC842;
font-size: 14px; }
font-weight: 400;
color: #333333; .Rcc-item-text {
line-height: 24px; font-size: 14px;
} font-weight: 400;
} color: #333333;
line-height: 24px;
}
}
} }
&-read { &-read {
margin-bottom: 16px; margin-bottom: 16px;
font-size: 12px; font-size: 12px;
font-weight: 400; font-weight: 400;
color: rgba(153,153,153,1); color: rgba(153, 153, 153, 1);
line-height: 24px; line-height: 24px;
span {
color: #787EFF; span {
} color: #787EFF;
}
} }
&-detail { &-detail {
margin-bottom: 76px; margin-bottom: 76px;
height: 130px;
.Rc-detail-item { .Rc-detail-item {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
padding: 0 20px; padding: 0 20px;
height: 60px; height: 60px;
background: #F6F7FA; background: #F6F7FA;
border-radius: 14px; border-radius: 14px;
&:first-child {
margin-bottom: 10px; &:first-child {
} margin-bottom: 10px;
span:first-child { }
font-size: 14px;
font-weight: 400; span:first-child {
color: #666666; font-size: 14px;
line-height: 24px; font-weight: 400;
} color: #666666;
span:last-child { line-height: 24px;
font-size: 14px; }
font-weight: 600;
color: #242629; span:last-child {
line-height: 24px; font-size: 14px;
} font-weight: 600;
color: #242629;
line-height: 24px;
}
} }
} }
&-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 !important;
line-height: 22px; line-height: 22px;
} }
} }
} }
\ No newline at end of file
src/views/Policy/Renewal/index.vue
View file @ b7078912
<template> <template>
<div class="renewal renewal_open"> <div class="renewal " :class="isOpened ? 'renewal_open' : 'renewal_closed'">
<p class="renewal-status">该保单已开通</p> <p class="renewal-status">{{ statusText }}</p>
<p class="renewal-desc">次年自动续保</p> <p class="renewal-desc">次年自动续保</p>
<div class="renewal-container"> <div class="renewal-container">
<p class="renewal-container-title">现在已享受</p> <p class="renewal-container-title">{{ enjoyText }}</p>
<div class="renewal-container-content"> <div class="renewal-container-content">
<div class="Rc-content-item"> <div class="Rc-content-item">
<svg-icon class-name="Rcc-item-svg" icon-class="check-circle" /> <svg-icon class-name="Rcc-item-svg" icon-class="check-circle" />
...@@ -19,19 +19,56 @@ ...@@ -19,19 +19,56 @@
</div> </div>
</div> </div>
<p class="renewal-container-read">阅读并同意《<span>次年自动续保服务协议</span>》</p> <p class="renewal-container-read">阅读并同意《<span>次年自动续保服务协议</span>》</p>
<div class="renewal-container-detail"> <div class="renewal-container-detail" v-if="!isOpened"></div>
<div class="renewal-container-detail" v-if="isOpened">
<div class="Rc-detail-item"> <div class="Rc-detail-item">
<span>次年保但生效时间</span> <span>次年保但生效时间</span>
<span>2020.05.31</span> <span>{{ nextYear }}</span>
</div> </div>
<div class="Rc-detail-item"> <div class="Rc-detail-item">
<span>扣款方式</span> <span>扣款方式</span>
<span>安微信默认顺序依次扣款</span> <span>按微信默认顺序依次扣款</span>
</div> </div>
</div> </div>
<cr-button class="renewal-container-button">取消续保</cr-button> <cr-button class="renewal-container-button" @click="submit">{{ buttonText }}</cr-button>
</div> </div>
</div> </div>
</template> </template>
<script></script> <script>
import { getPolicyDetail, updateRenewal } from "@/api/policy";
export default {
name: "Renewal",
data() {
return {
isOpened: false,
nextYear: "-"
};
},
async created() {
const detail = await getPolicyDetail(this.$route.params.orderNo);
if (detail.autoRenewPremium) {
this.isOpened = true;
}
this.nextYear = detail.nextYearEffectiveDate || "-";
},
computed: {
statusText() {
return this.isOpened ? "该保单已开通" : "该保单未开通";
},
enjoyText() {
return this.isOpened ? "现在已享受" : "开通后享受";
},
buttonText() {
return this.isOpened ? "取消续保" : "免费开通次年自动续保";
}
},
methods: {
async submit() {
await updateRenewal(this.$route.params.policySecId, !this.isOpened);
this.$router.go(-1);
}
}
};
</script>
<style lang="less" src="./index.less" scoped></style> <style lang="less" src="./index.less" scoped></style>
src/views/Policy/Success/index.vue
View file @ b7078912
<template> <template>
<div class="policy-detail"> <div class="policy-detail">
<div class="policy-detail-body"> <div class="policy-detail-body">
<status-desc secondTitle="购买成功"></status-desc> <status-desc :cardConfig="cardConfig"></status-desc>
<Refund></Refund> <pay-info></pay-info>
<ActBanner></ActBanner> <ActBanner></ActBanner>
<RecGood></RecGood> <insurance-recommend class="Pdb-recommend" />
</div> </div>
</div> </div>
</template> </template>
<script> <script>
import ActBanner from "./modules/ActBanner"; import ActBanner from "./modules/ActBanner";
import PayInfo from "./modules/PayInfo";
import StatusDesc from "../Detail/modules/StatusDesc"; import StatusDesc from "../Detail/modules/StatusDesc";
import Refund from "../Detail/modules/Refund"; import InsuranceRecommend from "../modules/InsuranceRecommend";
import RecGood from "./modules/RecGood"; import { getGenPolicyDetail } from "@/api/policy";
import policyStatusMixin from "../mixin/policyStatus.mixin";
export default { export default {
name: "Sucess", name: "Sucess",
mixins: [policyStatusMixin],
components: { components: {
StatusDesc, StatusDesc,
Refund, PayInfo,
ActBanner, ActBanner,
RecGood InsuranceRecommend
}, },
data() { data() {
return {}; return {
policy: {},
cardConfig: {
detailText: "购买成功"
}
};
}, },
computed: { async created() {
showPayCost() { const detail = await getGenPolicyDetail(this.$route.params.orderNo);
return ["2", "4"].includes(this.data?.cardConfig?.key); this.policy = this.getData(detail);
}
} }
}; };
</script> </script>
......
src/views/Policy/Success/modules/PayInfo.vue 0 → 100644
View file @ b7078912
<template>
<div class="Pdb-refund">
<div class="Pdb-refund-content">
<div class="Pdbr-content-item">
<span>保障期限</span>
<span>2020.6.5 至 2021.6.4</span>
</div>
<div class="Pdbr-content-item">
<span>次月保费</span>
<span>首月保费1元，次月起xxx.x元/月</span>
</div>
</div>
<p class="Pdb-refund-note">
注:微信将会在每月5日在您的账户内扣除该保费。（您可以随时取消自动扣费）
</p>
<div class="Pdb-refund-operation">
<cr-button class="Pdbi-operation-button Pdbi-operation-button_paid" @click="goNext()"
>为家人投保</cr-button
>
<cr-button class="Pdbi-operation-button" @click="goNext()">查看保单</cr-button>
</div>
</div>
</template>
<script>
export default {
name: "PayInfo",
props: {
policy: {
type: Object,
default: () => ({})
}
},
data() {
return {};
},
computed: {
payInfo() {
return {
guaranteePeriodName: "保障期限",
guaranteePeriodText: `${this.policy.policyEffectiveDate}至${this.policy.policyEndDate}`,
permiumName: "保费",
permium: "xxx元",
note: "注:微信将会在每月5日在您的账户内扣除该保费。（您可以随时取消自动扣费）",
isShowNote: true
};
}
},
methods: {
goNext() {
this.$router.push();
}
}
};
</script>
<style lang="less" src="../../Detail/index.less" scoped></style>
src/views/Policy/mixin/policyStatus.mixin.js
View file @ b7078912
...@@ -22,6 +22,8 @@ export default { ...@@ -22,6 +22,8 @@ export default {
"${start}", "${start}",
parseTime(policy?.refundInfo?.payTime, "{y}-{m}-{d}") parseTime(policy?.refundInfo?.payTime, "{y}-{m}-{d}")
); );
} else if (key === "2") {
value.recordText = value.recordText.replace("${money}", policy?.payInfo?.amount || "-");
} else { } else {
value.title = value.title.replace("${title}", policy?.insuredUserName || "-"); value.title = value.title.replace("${title}", policy?.insuredUserName || "-");
value.contend = value.contend value.contend = value.contend
...@@ -32,15 +34,14 @@ export default { ...@@ -32,15 +34,14 @@ export default {
// 校验是否支付成功 // 校验是否支付成功
const status = this.getStatus(policy); const status = this.getStatus(policy);
console.log(1, this.isFromPay, status);
if (["6.2-3", "6.1-3"].includes(status) && this.isFromPay) { if (["6.2-3", "6.1-3"].includes(status) && this.isFromPay) {
this.$router.replace("/policy/success"); this.$router.replace(`/policy/success/${this.$route.params.orderNo}`);
} }
return { return {
...policy, ...policy,
..._.find(GOODS_LIST, { id: +policy?.productNo }), ..._.find(GOODS_LIST, { id: policy?.productNo }),
cardConfig: { ...value, key } cardConfig: { ...value, key, status: this.getStatus(policy) }
}; };
}, },
findKey(policy) { findKey(policy) {
...@@ -58,7 +59,6 @@ export default { ...@@ -58,7 +59,6 @@ export default {
const prePath = ["/goods/inform", "/goods/detail", "/policy/add"]; const prePath = ["/goods/inform", "/goods/detail", "/policy/add"];
if (prePath.includes(from.path)) { if (prePath.includes(from.path)) {
vm.isFromPay = true; vm.isFromPay = true;
console.log(2, vm.isFromPay);
} }
}); });
} }
......
src/views/Policy/modules/InsuranceRecommend.vue
View file @ b7078912
<template> <template>
<div class="policy-recommend"> <div class="policy-recommend">
<div class="policy-recommend-content"> <div class="policy-recommend-content">
<cr-image class="Prc-left" width="" height="" :src="recommendContent" /> <cr-image class="Prc-left" width="" height="" src="@/assets/images/goods/goods-01.png" />
<div class="Prc-right"> <div class="Prc-right">
<p class="Prc-right-title"> <p class="Prc-right-title">
<span>50万</span> <span>600万</span>
<span>重疾保障</span> <span>医疗保障</span>
</p> </p>
<p class="Prc-right-desc">优势介绍 优势介绍 优势介绍</p> <p class="Prc-right-desc">看病报销医药费,最高600万</p>
</div> </div>
</div> </div>
<cr-button class="policy-recommend-button" @click="goNext()">点此投保</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="@/assets/images/policy/recommend-angle@2x.png"
/>
</div> </div>
</template> </template>
<script> <script>
import recommendAngle from "@/assets/images/policy/recommend-angle@2x.png";
import recommendContent from "@/assets/images/policy/recommend-content@2x.png";
export default { export default {
name: "InsuranceRecommend", name: "InsuranceRecommend",
data() {
return {
recommendAngle,
recommendContent
};
},
methods: { methods: {
goNext() { goNext() {
// todo 跳转医疗险详情页 this.$router.push({
path: "/goods/detail",
query: { id: "TKYLX001", type: "mi" }
});
} }
} }
}; };
......
src/views/Policy/modules/PolicyItem.vue
View file @ b7078912
...@@ -34,7 +34,7 @@ ...@@ -34,7 +34,7 @@
]" ]"
v-for="button in item.cardConfig.buttons" v-for="button in item.cardConfig.buttons"
:key="button" :key="button"
@click="goNext(button, item)" @click.stop="goNext(button, item)"
>{{ button }}</cr-button >{{ button }}</cr-button
> >
<p <p
...@@ -112,7 +112,7 @@ export default { ...@@ -112,7 +112,7 @@ export default {
this.list = list this.list = list
.filter( .filter(
v => v =>
_.some(GOODS_LIST, { id: +v.productNo }) && _.some(GOODS_LIST, { id: v.productNo }) &&
(type === 0 ? true : v.insuredRelation === relations[type]) && (type === 0 ? true : v.insuredRelation === relations[type]) &&
this.findKey(v) this.findKey(v)
) )
...@@ -121,15 +121,18 @@ export default { ...@@ -121,15 +121,18 @@ export default {
showStatusText(text) { showStatusText(text) {
return text === "保障中"; return text === "保障中";
}, },
// goNext(text, item) { goNext(text, item) {
goNext() { console.log(item);
// if (text === "为家人投保") { if (["为家人投保", "重新投保"].includes(text)) {
// } else if (text === "电子保单") { this.$router.push({
// } else if (text === "开通自动续费") { path: "/goods/detail",
// } else if (text === "去支付") { query: { id: item.id, type: item.itype }
// } else if (text === "重新投保") { });
// } else if (text === "联系客服") { } else if (text === "电子保单") {
// } } else if (text === "开通自动续费") {
} else if (text === "去支付") {
} else if (text === "联系客服") {
}
}, },
goDetail(orderNo) { goDetail(orderNo) {
const policy = this.list.find(v => v.orderNo === orderNo); const policy = this.list.find(v => v.orderNo === orderNo);
......
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