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 [
icon: medical,
guarantee_title: "医疗保障",
guarantee_sub: "看病报销医药费,最高600万",
compony: "泰康在线"
company: "泰康在线"
},
{
id: "HTDQZJX001",
......@@ -46,7 +46,7 @@ export default [
icon: illness,
guarantee_title: "重疾保障",
guarantee_sub: "100种重症+40种轻症",
compony: "华泰财险"
company: "华泰财险"
},
{
id: "BNZJX001",
......@@ -65,7 +65,7 @@ export default [
icon: illness,
guarantee_title: "重疾保障",
guarantee_sub: "100种重症+40种轻症",
compony: "华泰财险"
company: "华泰财险"
},
{
id: "ZAYWX001",
......@@ -83,7 +83,7 @@ export default [
icon: casualty,
guarantee_title: "意外保障",
guarantee_sub: "意外风险覆盖全,最高100万保额",
compony: "众安保险"
company: "众安保险"
},
{
id: "HGSX001",
......@@ -101,6 +101,6 @@ export default [
icon: life,
guarantee_title: "人寿保障",
guarantee_sub: "最高350万保额,顶梁柱必备",
compony: "华泰财险"
company: "华泰财险"
}
];
src/api/policy.js
View file @ b7078912
......@@ -9,3 +9,18 @@ export const getPolicyList = () => {
export const getPolicyDetail = 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 => {
// 获取用户信息
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 [
component: () => import("../views/Policy/VirtualDetail/index.vue")
},
{
path: "/policy/success",
path: "/policy/success/:orderNo",
name: "Sucess",
component: () => import("../views/Policy/Success/index.vue")
},
......@@ -100,15 +100,20 @@ export default [
component: () => import("../views/Policy/Add/index.vue")
},
{
path: "/policy/payment-record",
path: "/policy/payment-record/:orderNo/:status",
name: "PaymentRecord",
component: () => import("../views/Policy/PaymentRecord/index.vue")
},
{
path: "/policy/renewal",
path: "/policy/renewal/:orderNo/:policySecId",
name: "Renewal",
component: () => import("../views/Policy/Renewal/index.vue")
},
{
path: "/policy/pay-record/:policySecId/:status",
name: "Renewal",
component: () => import("../views/Policy/PaymentRecord/index.vue")
},
{
path: "/introduction",
name: "Introduction",
......
src/views/Policy/Detail/Types/Guarantee.vue
View file @ b7078912
<template>
<div>
<status-desc
:firstTitle="data.cardConfig.detailText"
:secondTitle="data.cardConfig.statusText"
:recordText="data.cardConfig.recordText"
></status-desc>
<status-desc :cardConfig="data.cardConfig" :policySecId="data.policySecId"></status-desc>
<pay-cost
v-if="showPayCost"
:statusKey="data.cardConfig.key"
:payCostConfig="data.cardConfig.payCostConfig"
:day="data.payInfo && data.payInfo.expiredDay"
></pay-cost>
<insurance-card
:productNo="data.productNo"
:policySecId="data.policySecId"
:autoRenewPremium="data.autoRenewPremium"
:policyNo="data.policyNo"
:orderNo="data.orderNo"
></insurance-card>
<security-content :data="data" :detail="planDetail"></security-content>
<insurance-service :detail="qaDetail"></insurance-service>
......
src/views/Policy/Detail/Types/Refund.vue
View file @ b7078912
<template>
<div>
<status-desc
:firstTitle="data.cardConfig.detailText"
:secondTitle="data.cardConfig.statusText"
:recordText="data.cardConfig.recordText"
></status-desc>
<status-desc :cardConfig="data.cardConfig" :policySecId="data.policySecId"></status-desc>
<pay-cost
v-if="showPayCost"
:statusKey="data.cardConfig.key"
......@@ -15,6 +11,7 @@
:refundConfig="data.cardConfig.refundConfig"
:amount="amount"
:payTime="payTime"
:payTimeText="payTimeText"
></refund>
<Phone></Phone>
</div>
......@@ -24,7 +21,7 @@ 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";
// import { parseTime } from "@/service/utils";
export default {
name: "Guarantee",
......@@ -45,10 +42,16 @@ export default {
},
computed: {
amount() {
return this.data.cardConfig?.amount || 0;
console.log(this.data);
return this.data.refundInfo?.amount || 0;
},
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() {
return ["4", "14", "13"].includes(this.data?.cardConfig?.key);
......
src/views/Policy/Detail/index.less
View file @ b7078912
.button() {
height: 28px;
border-radius: 8px !important;
border: 1px solid #787EFF !important;
border-radius: 8px !important;
border: 1px solid #787EFF !important;
font-size: 14px;
font-weight: 400;
color: #787EFF !important;
line-height: 16px;
background-color: #fff !important;
&:first-child {
margin-right: 8px;
margin-right: 8px;
}
}
.card-container() {
margin: 0 16px 10px;
padding: 20px;
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;
}
.card-title(@marginBottom) {
margin-bottom: @marginBottom;
font-size: 18px;
......@@ -25,6 +28,7 @@
color: #242629;
line-height: 24px;
}
.card-desc(@marginBottom, @lineHeight: 16px) {
margin-bottom: @marginBottom;
font-size: 12px;
......@@ -32,328 +36,402 @@
color: #999999;
line-height: @lineHeight;
}
.card-head() {
display: flex;
justify-content: space-between;
margin-bottom: 16px;
span:first-child {
font-size: 18px;
font-weight: 600;
color: #242629;
line-height: 24px;
font-size: 18px;
font-weight: 600;
color: #242629;
line-height: 24px;
}
span:last-child {
font-size: 12px;
font-size: 12px;
font-weight: 400;
color: #787EFF;
line-height: 24px;
}
.svg-icon {
padding: 4px 0;
width: 16px;
height: 16px;
padding: 4px 0;
width: 16px;
height: 16px;
}
}
.card-body(@marginBottom: 0) {
margin-bottom: @marginBottom;
div {
display: flex;
justify-content: space-between;
span:first-child {
font-size: 12px;
font-weight: 400;
color: #666666;
line-height: 24px;
}
span:last-child {
font-size: 12px;
font-weight: 600;
color: #333333;
line-height: 24px;
}
span:first-child {
font-size: 12px;
font-weight: 400;
color: #666666;
line-height: 24px;
}
span:last-child {
font-size: 12px;
font-weight: 600;
color: #333333;
line-height: 24px;
}
}
}
.policy-detail {
position: relative;
background: #F6F6F6;
&:before {
position: absolute;
width: 375px;
position: absolute;
width: 375px;
height: 269px;
border: 0;
content: '';
background: linear-gradient(360deg,rgba(244,244,244,1) 0%,rgba(255,200,66,1) 100%);
content: '';
background: linear-gradient(360deg, rgba(244, 244, 244, 1) 0%, rgba(255, 200, 66, 1) 100%);
}
&:after {
position: absolute;
top: 38px;
right: 0;
width: 36px;
height: 19px;
content: '';
background: url('../../../assets/images/policy/detail/point@2x.png') no-repeat 0 0 /cover;
position: absolute;
top: 38px;
right: 0;
width: 36px;
height: 19px;
content: '';
background: url('../../../assets/images/policy/detail/point@2x.png') no-repeat 0 0 /cover;
}
&-body {
position: absolute;
left: 0;
right: 0;
// padding-bottom: 49px;
.Pdb-status {
margin: 0 0 5px 20px;
font-size: 28px;
font-weight: 600;
color: #333333;
line-height: 40px;
&:first-child {
margin: 32px 0 0 20px;
}
}
.Pdb-tips {
display: inline-flex;
align-items: center;
justify-content: center;
margin: 0 0 24px 20px;
padding: 0 4px;
width: auto;
height: 20px;
background: #000000;
border-radius: 8px;
opacity: 0.2;
&-text {
margin-right: 1px;
font-size: 12px;
font-weight: 400;
color: #FFFFFF;
line-height: 12px;
}
&-svg {
width: 12px;
height: 12px;
}
}
.Pdb-refund {
.card-container();
margin: 27px 16px 10px;
&-title {
.card-title(8px);
}
&-desc {
.card-desc(24px);
}
&-content {
.Pdbr-content-item {
display: flex;
align-items: center;
justify-content: space-between;
padding: 0 16px;
height: 50px;
background: #F6F7FA;
border-radius: 8px;
&:first-child {
margin-bottom: 12px;
}
span:first-child {
font-size: 14px;
font-weight: 400;
color: #666666;
line-height: 24px;
}
span:last-child {
font-size: 14px;
font-weight: 500;
color: #333333;
line-height: 24px;
}
}
}
}
.Pdb-payment {
.card-container();
&-title {
.card-title(16px);
&_tips {
font-size: 14px;
font-weight: 400;
color: #999999;
line-height: 16px;
}
}
&-content {
margin-bottom: 17px;
.Pdbp-content-item {
display: flex;
align-items: center;
.Pdbpc-item-svg {
margin-right: 8px;
width: 12px;
height: 12px;
border-radius: 50%;
background: #FFC842;
}
.Pdbpc-item-text {
.card-desc(0, 24px);
}
}
}
&-button {
width: 100%;
height: 52px;
background: #FFC842 !important;
border-radius: 14px !important;
font-size: 16px;
font-weight: 600;
color: #333333;
line-height: 22px;
}
}
.Pdb-insurance {
.card-container();
&-name {
.card-title(12px);
}
&-no {
.card-desc(16px);
}
&-operation {
.Pdbi-operation-button { .button }
}
}
.Pdb-content {
.card-container();
&-head {
.card-head
}
&-body {
.card-body(8px);
}
&-operation {
.Pdbc-button { .button }
}
&-user {
margin-top: 24px;
.Pdbc-user-who {
.card-title(16px);
}
.Pdbc-user-info {
display: flex;
justify-content: space-around;
align-items: center;
width: 100%;
height: 50px;
background: #F6F7FA;
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();
position: absolute;
left: 0;
right: 0;
// padding-bottom: 49px;
.Pdb-status {
margin: 0 0 5px 20px;
font-size: 28px;
font-weight: 600;
color: #333333;
line-height: 40px;
&:first-child {
margin: 32px 0 0 20px;
}
}
.Pdb-tips {
display: inline-flex;
align-items: center;
justify-content: center;
margin: 0 0 24px 20px;
padding: 0 4px;
width: auto;
height: 20px;
background: #000000;
border-radius: 8px;
opacity: 0.2;
&-text {
margin-right: 1px;
font-size: 12px;
font-weight: 400;
color: #FFFFFF;
line-height: 12px;
}
&-svg {
width: 12px;
height: 12px;
}
}
.Pdb-refund {
.card-container();
margin: 27px 16px 10px;
&-title {
.card-title(8px);
}
&-desc {
.card-desc(24px);
}
&-note {
.card-desc(16px);
margin-top: 16px;
}
&-operation {
display: flex;
align-items: center;
justify-content: space-between;
width: 100%;
.Pdbi-operation-button {
padding: 0 !important;
width: 146px;
height: 40px;
border-radius: 8px !important;
border: 1px solid #787EFF !important;
background-color: #fff !important;
font-size: 14px;
font-weight: 400;
color: #787EFF !important;
line-height: 16px;
&_paid {
border: 0 !important;
background: #F4F5FF !important;
color: #787EFF !important;
}
}
}
&-content {
.Pdbr-content-item {
display: flex;
align-items: center;
justify-content: space-between;
padding: 0 16px;
height: 50px;
background: #F6F7FA;
border-radius: 8px;
&:first-child {
margin-bottom: 12px;
}
span:first-child {
font-size: 14px;
font-weight: 400;
color: #666666;
line-height: 24px;
}
span:last-child {
font-size: 14px;
font-weight: 500;
color: #333333;
line-height: 24px;
}
}
}
}
.Pdb-payment {
.card-container();
&-title {
.card-title(16px);
&_tips {
font-size: 14px;
font-weight: 400;
color: #999999;
line-height: 16px;
}
}
&-content {
margin-bottom: 17px;
.Pdbp-content-item {
display: flex;
align-items: center;
.Pdbpc-item-svg {
margin-right: 8px;
width: 12px;
height: 12px;
border-radius: 50%;
background: #FFC842;
}
.Pdbpc-item-text {
.card-desc(0, 24px);
}
}
}
&-body {
.card-body();
}
&-question {
// margin-top: 24px;
.card-head();
}
&-divider {
margin: 0 0 12px 0;
&:before {
height: 1px;
border-color: #EBEBEB;
}
}
&-agreement {
display: flex;
padding-top: 3px;
align-items: center;
flex-wrap: wrap;
a {
font-size: 12px;
color: #333;
&::after {
display: inline-block;
content: " ";
width: 0;
height: 12px;
border-right: 1px #333 solid;
margin: 0 5px;
vertical-align: -2px;
}
&:last-child::after {
display: none;
}
}
}
}
.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;
}
&-button {
width: 100%;
height: 52px;
background: #FFC842 !important;
border-radius: 14px !important;
font-size: 16px;
font-weight: 600;
color: #333333;
line-height: 22px;
}
}
.Pdb-insurance {
.card-container();
&-name {
.card-title(12px);
}
&-no {
.card-desc(16px);
}
&-operation {
.Pdbi-operation-button {
.button
}
}
}
.Pdb-content {
.card-container();
&-head {
.card-head
}
&-body {
.card-body(8px);
}
&-operation {
.Pdbc-button {
.button
}
}
&-user {
margin-top: 24px;
.Pdbc-user-who {
.card-title(16px);
}
.Pdbc-user-info {
display: flex;
justify-content: space-around;
align-items: center;
width: 100%;
height: 50px;
background: #F6F7FA;
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();
}
&-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 {
};
},
async created() {
console.log(this.$route.params.orderNo);
const detail = await getPolicyDetail(this.$route.params.orderNo);
this.policy = this.getData(detail);
// if (true) {}
}
};
</script>
......
src/views/Policy/Detail/modules/InsuranceCard.vue
View file @ b7078912
<template>
<div class="Pdb-insurance">
<p class="Pdb-insurance-name">{{ product.title }}</p>
<p class="Pdb-insurance-no">NO.{{ policyNo }}<br />由{{ product.compony }}承保</p>
<p class="Pdb-insurance-name">{{ productTitle }}</p>
<p class="Pdb-insurance-no">NO.{{ policyNo }}<br />由{{ productCompany }}承保</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>
......@@ -25,21 +25,34 @@ export default {
policyNo: {
type: String,
default: ""
},
orderNo: {
type: String,
default: ""
},
policySecId: {
type: String,
default: ""
}
},
data() {
return {};
},
computed: {
product() {
return GOODS_LIST.find(v => v.id === +this.productNo);
productTitle() {
return GOODS_LIST.find(v => v.id === this.productNo)?.title || "";
},
productCompany() {
return GOODS_LIST.find(v => v.id === this.productNo)?.company || "";
},
buttonText() {
return this.autoRenewPremium ? "已开通次年续保" : "已关闭次年续保";
}
},
methods: {
goNext() {}
goNext() {
this.$router.push(`/policy/renewal/${this.orderNo}/${this.policySecId}`);
}
}
};
</script>
......
src/views/Policy/Detail/modules/PayCost.vue
View file @ b7078912
......@@ -4,7 +4,7 @@
{{ payCostConfig.title }}
</p>
<div v-else>
<p class="Pdb-payment-title">保障将在XX天后失效，请立即缴费</p>
<p class="Pdb-payment-title">{{ expiredDayText }}</p>
<div class="Pdb-payment-content">
<div class="Pdbp-content-item">
<svg-icon class-name="Pdbpc-item-svg" icon-class="check-circle" />
......@@ -37,11 +37,18 @@ export default {
title: "",
button: "立即缴费"
})
},
day: {
type: String,
default: ""
}
},
computed: {
showTips() {
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 @@
<span>{{ amount }}元</span>
</div>
<div class="Pdbr-content-item">
<span>支付时间</span>
<span>{{ payTimeText }}</span>
<span>{{ payTime }}</span>
</div>
</div>
......@@ -32,6 +32,10 @@ export default {
payTime: {
type: String,
default: "-"
},
payTimeText: {
type: String,
default: "支付时间"
}
},
data() {
......
src/views/Policy/Detail/modules/SecurityContent.vue
View file @ b7078912
......@@ -2,24 +2,40 @@
<div class="Pdb-content">
<div class="Pdb-content-head">
<span class="Pdbc-head-name">保障内容</span>
<router-link
tag="span"
:to="{ name: 'GoodsPlan', query: { type: detail.type } }"
class="Pdbc-head-status"
>
查看详情
</router-link>
<span class="Pdbc-head-status">查看详情</span>
</div>
<div class="Pdb-content-body">
<div
class="Pdbc-body-item"
v-for="(item, index) in content"
:key="index"
:class="{ inline: item.inline }"
>
<span>{{ item.title }}</span>
<span>{{ item.value }}</span>
<cr-divider v-if="item.divider" />
<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">
......@@ -43,20 +59,13 @@
</template>
<script>
import { parseTime } from "@/service/utils";
export default {
name: "SecurityContent",
props: {
data: {
type: Object,
default() {
return {};
}
},
detail: {
type: Object,
default() {
return {};
}
default: () => ({})
}
},
data() {
......@@ -68,16 +77,6 @@ export default {
},
EndDate() {
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: {
......
src/views/Policy/Detail/modules/StatusDesc.vue
View file @ b7078912
<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>
<p class="Pdb-status" v-if="cardConfig.detailText">{{ cardConfig.detailText }}</p>
<p class="Pdb-status">{{ cardConfig.statusText }}</p>
<div class="Pdb-tips" v-if="cardConfig.recordText" @click="goNext">
<span class="Pdb-tips-text">{{ cardConfig.recordText }}</span>
<svg-icon class-name="Pdb-tips-svg" icon-class="payment-record" />
</div>
</div>
......@@ -12,16 +12,17 @@
export default {
name: "StatusDesc",
props: {
firstTitle: {
type: String,
default: ""
},
secondTitle: {
type: String,
default: ""
cardConfig: {
type: Object,
default: () => ({
detailText: "",
statusText: "",
recordText: "",
status: ""
})
},
recordText: {
type: String,
policySecId: {
type: [String, Number],
default: ""
}
},
......@@ -30,7 +31,19 @@ export default {
},
computed: {
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>
<div class="payment-record">
<p class="payment-record-status">持续缴费中</p>
<p class="payment-record-desc payment-record-desc_owe">预计下次扣费时间 2020.5.11</p>
<!-- <div class="payment-record-term">
<p class="payment-record-status">{{ termStatistics.titelText }}</p>
<p
: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">
<span>800元</span>
<span>下期应缴金额</span>
<span>{{ termStatistics.amount }}</span>
<span>{{ termStatistics.amountText }}</span>
</div>
<div class="Pr-term-item">
<span>6/12期</span>
<span>{{ termStatistics.termText }}</span>
<span>已缴/总期数</span>
</div>
<div class="Pr-term-item">
<span>0期</span>
<span>{{ termStatistics.delayTerm }}</span>
<span>已欠缴期数</span>
</div>
</div> -->
</div>
<div class="payment-record-detail">
<div class="Pr-detail-title Pr-detail-title_year">
<span>缴费明细</span>
<span>按月缴费</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>
<span>{{ payPeriodText }}</span>
</div>
<div class="Pr-detail-content">
<div class="Pr-detail-content" v-for="(item, index) in termList" :key="index">
<div class="Prd-content-amount">
<span>第2期保费</span>
<span>100.0元</span>
<span>{{ item.termNoText }}</span>
<span>{{ item.amountText }}</span>
</div>
<div class="Prd-content-time">
<span>2020.05.11 17:45</span>
<span>缴费成功</span>
<span>{{ item.recordDate }}</span>
<span>{{ item.payStatusText }}</span>
</div>
</div>
</div>
</div>
</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>
src/views/Policy/Renewal/index.less
View file @ b7078912
......@@ -3,116 +3,136 @@
.renewal {
overflow: hidden;
height: 100%;
&:after {
position: absolute;
top: 38px;
right: 0;
width: 36px;
height: 19px;
content: '';
background: url('../../../assets/images/policy/detail/point@2x.png') no-repeat 0 0 /cover;
position: absolute;
top: 38px;
right: 0;
width: 36px;
height: 19px;
content: '';
background: url('../../../assets/images/policy/detail/point@2x.png') no-repeat 0 0 /cover;
}
&_open {
background: #FFC842;
background: #FFC842;
}
&_closed {
background: #F65D5D;
background: #F65D5D;
}
&-status {
margin: 64px 0 0 20px;
font-size: 28px;
font-weight: 600;
color: #333333;
line-height: 40px;
margin: 64px 0 0 20px;
font-size: 28px;
font-weight: 600;
color: #333333;
line-height: 40px;
}
&-desc {
margin: 0 0 49px 20px;
font-size: 28px;
font-weight: 400;
color: #333333;
line-height: 40px;
margin: 0 0 49px 20px;
font-size: 28px;
font-weight: 400;
color: #333333;
line-height: 40px;
}
&-container {
position: absolute;
left: 0;
right: 0;
bottom: 0;
padding: 28px 20px 34px;
background: #FFFFFF;
position: absolute;
left: 0;
right: 0;
bottom: 0;
padding: 28px 20px 34px;
background: #FFFFFF;
border-radius: 32px 32px 0 0;
&-title {
margin-bottom: 16px;
font-size: 18px;
font-weight: 600;
color: #242629;
line-height: 24px;
font-weight: 600;
color: #242629;
line-height: 24px;
}
&-content {
margin-bottom: 4px;
.Rc-content-item {
display: flex;
align-items: center;
.Rcc-item-svg {
margin-right: 8px;
width: 12px;
height: 12px;
border-radius: 50%;
background: #FFC842;
}
.Rcc-item-text {
font-size: 14px;
font-weight: 400;
color: #333333;
line-height: 24px;
}
}
.Rc-content-item {
display: flex;
align-items: center;
.Rcc-item-svg {
margin-right: 8px;
width: 12px;
height: 12px;
border-radius: 50%;
background: #FFC842;
}
.Rcc-item-text {
font-size: 14px;
font-weight: 400;
color: #333333;
line-height: 24px;
}
}
}
&-read {
margin-bottom: 16px;
font-size: 12px;
font-weight: 400;
color: rgba(153,153,153,1);
line-height: 24px;
span {
color: #787EFF;
}
font-weight: 400;
color: rgba(153, 153, 153, 1);
line-height: 24px;
span {
color: #787EFF;
}
}
&-detail {
margin-bottom: 76px;
height: 130px;
.Rc-detail-item {
display: flex;
justify-content: space-between;
align-items: center;
padding: 0 20px;
height: 60px;
background: #F6F7FA;
border-radius: 14px;
&:first-child {
margin-bottom: 10px;
}
span:first-child {
font-size: 14px;
font-weight: 400;
color: #666666;
line-height: 24px;
}
span:last-child {
font-size: 14px;
font-weight: 600;
color: #242629;
line-height: 24px;
}
display: flex;
justify-content: space-between;
align-items: center;
padding: 0 20px;
height: 60px;
background: #F6F7FA;
border-radius: 14px;
&:first-child {
margin-bottom: 10px;
}
span:first-child {
font-size: 14px;
font-weight: 400;
color: #666666;
line-height: 24px;
}
span:last-child {
font-size: 14px;
font-weight: 600;
color: #242629;
line-height: 24px;
}
}
}
&-button {
width: 100%;
height: 52px;
background: #FFC842;
border-radius: 14px;
font-size: 16px;
font-weight: 600;
color: #333333;
line-height: 22px;
height: 52px;
background: #FFC842 !important;
border-radius: 14px !important;
font-size: 16px;
font-weight: 600;
color: #333333 !important;
line-height: 22px;
}
}
}
\ No newline at end of file
src/views/Policy/Renewal/index.vue
View file @ b7078912
<template>
<div class="renewal renewal_open">
<p class="renewal-status">该保单已开通</p>
<div class="renewal " :class="isOpened ? 'renewal_open' : 'renewal_closed'">
<p class="renewal-status">{{ statusText }}</p>
<p class="renewal-desc">次年自动续保</p>
<div class="renewal-container">
<p class="renewal-container-title">现在已享受</p>
<p class="renewal-container-title">{{ enjoyText }}</p>
<div class="renewal-container-content">
<div class="Rc-content-item">
<svg-icon class-name="Rcc-item-svg" icon-class="check-circle" />
......@@ -19,19 +19,56 @@
</div>
</div>
<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">
<span>次年保但生效时间</span>
<span>2020.05.31</span>
<span>{{ nextYear }}</span>
</div>
<div class="Rc-detail-item">
<span>扣款方式</span>
<span>安微信默认顺序依次扣款</span>
<span>按微信默认顺序依次扣款</span>
</div>
</div>
<cr-button class="renewal-container-button">取消续保</cr-button>
<cr-button class="renewal-container-button" @click="submit">{{ buttonText }}</cr-button>
</div>
</div>
</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>
src/views/Policy/Success/index.vue
View file @ b7078912
<template>
<div class="policy-detail">
<div class="policy-detail-body">
<status-desc secondTitle="购买成功"></status-desc>
<Refund></Refund>
<status-desc :cardConfig="cardConfig"></status-desc>
<pay-info></pay-info>
<ActBanner></ActBanner>
<RecGood></RecGood>
<insurance-recommend class="Pdb-recommend" />
</div>
</div>
</template>
<script>
import ActBanner from "./modules/ActBanner";
import PayInfo from "./modules/PayInfo";
import StatusDesc from "../Detail/modules/StatusDesc";
import Refund from "../Detail/modules/Refund";
import RecGood from "./modules/RecGood";
import InsuranceRecommend from "../modules/InsuranceRecommend";
import { getGenPolicyDetail } from "@/api/policy";
import policyStatusMixin from "../mixin/policyStatus.mixin";
export default {
name: "Sucess",
mixins: [policyStatusMixin],
components: {
StatusDesc,
Refund,
PayInfo,
ActBanner,
RecGood
InsuranceRecommend
},
data() {
return {};
return {
policy: {},
cardConfig: {
detailText: "购买成功"
}
};
},
computed: {
showPayCost() {
return ["2", "4"].includes(this.data?.cardConfig?.key);
}
async created() {
const detail = await getGenPolicyDetail(this.$route.params.orderNo);
this.policy = this.getData(detail);
}
};
</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 {
"${start}",
parseTime(policy?.refundInfo?.payTime, "{y}-{m}-{d}")
);
} else if (key === "2") {
value.recordText = value.recordText.replace("${money}", policy?.payInfo?.amount || "-");
} else {
value.title = value.title.replace("${title}", policy?.insuredUserName || "-");
value.contend = value.contend
......@@ -32,15 +34,14 @@ export default {
// 校验是否支付成功
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");
this.$router.replace(`/policy/success/${this.$route.params.orderNo}`);
}
return {
...policy,
..._.find(GOODS_LIST, { id: +policy?.productNo }),
cardConfig: { ...value, key }
..._.find(GOODS_LIST, { id: policy?.productNo }),
cardConfig: { ...value, key, status: this.getStatus(policy) }
};
},
findKey(policy) {
......@@ -58,7 +59,6 @@ export default {
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 @ b7078912
<template>
<div class="policy-recommend">
<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">
<p class="Prc-right-title">
<span>50万</span>
<span>重疾保障</span>
<span>600万</span>
<span>医疗保障</span>
</p>
<p class="Prc-right-desc">优势介绍 优势介绍 优势介绍</p>
<p class="Prc-right-desc">看病报销医药费,最高600万</p>
</div>
</div>
<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>
</template>
<script>
import recommendAngle from "@/assets/images/policy/recommend-angle@2x.png";
import recommendContent from "@/assets/images/policy/recommend-content@2x.png";
export default {
name: "InsuranceRecommend",
data() {
return {
recommendAngle,
recommendContent
};
},
methods: {
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 @@
]"
v-for="button in item.cardConfig.buttons"
:key="button"
@click="goNext(button, item)"
@click.stop="goNext(button, item)"
>{{ button }}</cr-button
>
<p
......@@ -112,7 +112,7 @@ export default {
this.list = list
.filter(
v =>
_.some(GOODS_LIST, { id: +v.productNo }) &&
_.some(GOODS_LIST, { id: v.productNo }) &&
(type === 0 ? true : v.insuredRelation === relations[type]) &&
this.findKey(v)
)
......@@ -121,15 +121,18 @@ export default {
showStatusText(text) {
return text === "保障中";
},
// goNext(text, item) {
goNext() {
// if (text === "为家人投保") {
// } else if (text === "电子保单") {
// } else if (text === "开通自动续费") {
// } else if (text === "去支付") {
// } else if (text === "重新投保") {
// } else if (text === "联系客服") {
// }
goNext(text, item) {
console.log(item);
if (["为家人投保", "重新投保"].includes(text)) {
this.$router.push({
path: "/goods/detail",
query: { id: item.id, type: item.itype }
});
} else if (text === "电子保单") {
} else if (text === "开通自动续费") {
} else if (text === "去支付") {
} else if (text === "联系客服") {
}
},
goDetail(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