Skip to content

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

Merge branch 'feature/run_process' into 'master' 

Feature/run process

See merge request !36
parents 9a3cc7ef a4bfd397
Expand all Hide whitespace changes
Inline Side-by-side
Showing with 1329 additions and 662 deletions
package-lock.json
View file @ e9d11fea
This diff is collapsed.
src/App.vue
View file @ e9d11fea
<template> <template>
<div id="app"> <div id="app">
<router-view /> <router-view />
<div class="loading-container" v-show="isLoading"> <div class="loading-container" v-if="isLoading">
<cr-loading class="loading" size="24px">加载中...</cr-loading> <cr-loading class="loading" size="24px">加载中...</cr-loading>
</div> </div>
<login-modal /> <login-modal />
...@@ -30,6 +30,7 @@ export default { ...@@ -30,6 +30,7 @@ export default {
</script> </script>
<style lang="less" scoped> <style lang="less" scoped>
@import "./style/index.less"; @import "./style/index.less";
.loading-container { .loading-container {
position: fixed; position: fixed;
left: 0; left: 0;
......
src/api/goodsList.mock.js
View file @ e9d11fea
...@@ -28,7 +28,12 @@ export default [ ...@@ -28,7 +28,12 @@ export default [
icon: medical, icon: medical,
guarantee_title: "医疗保障", guarantee_title: "医疗保障",
guarantee_sub: "看病报销医药费,最高600万", guarantee_sub: "看病报销医药费,最高600万",
compony: "泰康在线" company: "泰康在线",
payType: [
{ label: "月缴", value: "1" },
{ label: "一次交清", value: "2" }
],
policyPeriod: []
}, },
{ {
id: "HTDQZJX001", id: "HTDQZJX001",
...@@ -46,7 +51,12 @@ export default [ ...@@ -46,7 +51,12 @@ export default [
icon: illness, icon: illness,
guarantee_title: "重疾保障", guarantee_title: "重疾保障",
guarantee_sub: "100种重症+40种轻症", guarantee_sub: "100种重症+40种轻症",
compony: "华泰财险" company: "华泰财险",
payType: [
{ label: "月缴", value: "1" },
{ label: "一次交清", value: "2" }
],
policyPeriod: []
}, },
{ {
id: "BNZJX001", id: "BNZJX001",
...@@ -65,7 +75,12 @@ export default [ ...@@ -65,7 +75,12 @@ export default [
icon: illness, icon: illness,
guarantee_title: "重疾保障", guarantee_title: "重疾保障",
guarantee_sub: "100种重症+40种轻症", guarantee_sub: "100种重症+40种轻症",
compony: "华泰财险" company: "华泰财险",
payType: [{ label: "年缴", value: "1" }],
policyPeriod: [
{ label: "保至70周岁", value: "1" },
{ label: "保至终身", value: "2" }
]
}, },
{ {
id: "ZAYWX001", id: "ZAYWX001",
...@@ -83,7 +98,9 @@ export default [ ...@@ -83,7 +98,9 @@ export default [
icon: casualty, icon: casualty,
guarantee_title: "意外保障", guarantee_title: "意外保障",
guarantee_sub: "意外风险覆盖全,最高100万保额", guarantee_sub: "意外风险覆盖全,最高100万保额",
compony: "众安保险" company: "众安保险",
payType: [],
policyPeriod: []
}, },
{ {
id: "HGSX001", id: "HGSX001",
...@@ -101,6 +118,15 @@ export default [ ...@@ -101,6 +118,15 @@ export default [
icon: life, icon: life,
guarantee_title: "人寿保障", guarantee_title: "人寿保障",
guarantee_sub: "最高350万保额,顶梁柱必备", guarantee_sub: "最高350万保额,顶梁柱必备",
compony: "华泰财险" company: "华泰财险",
payType: [{ label: "年缴", value: "1" }],
policyPeriod: [
{ label: "10年", value: "1" },
{ label: "20年", value: "2" },
{ label: "30年", value: "3" },
{ label: "保至60周岁", value: "4" },
{ label: "保至65周岁", value: "5" },
{ label: "保至70周岁", value: "6" }
]
} }
]; ];
src/api/policy.js
View file @ e9d11fea
...@@ -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 @ e9d11fea
...@@ -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/components/LoginModal.vue
View file @ e9d11fea
...@@ -90,7 +90,7 @@ export default { ...@@ -90,7 +90,7 @@ export default {
this.formData.openId = localStorage.getItem("openId") || null; this.formData.openId = localStorage.getItem("openId") || null;
const res = await loginByPhone(this.formData); const res = await loginByPhone(this.formData);
if (res) { if (res) {
this.$notify("登录成功"); this.$notify({ type: "success", message: "登录成功" });
this.setIsShowLogin(false); this.setIsShowLogin(false);
// localStorage.setItem("mongoToken", res.token); // localStorage.setItem("mongoToken", res.token);
// TODO 开发目前使用这个token // TODO 开发目前使用这个token
......
src/mixins/formValidate.mixin.js
View file @ e9d11fea
import cherry from "@qg/cherry-ui";
const { Notify } = cherry;
export default { export default {
methods: { methods: {
onFailed(errorInfo) { onFailed(errorInfo) {
Notify(errorInfo?.errors?.[0]?.message || "校验失败"); this.$notify({ type: "warning", message: errorInfo?.errors?.[0]?.message || "校验失败" });
} }
} }
}; };
src/router/routes.js
View file @ e9d11fea
...@@ -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,14 +100,14 @@ export default [ ...@@ -100,14 +100,14 @@ export default [
component: () => import("../views/Policy/Add/index.vue") component: () => import("../views/Policy/Add/index.vue")
}, },
{ {
path: "/policy/payment-record", path: "/policy/renewal/:orderNo/:policySecId",
name: "PaymentRecord", name: "Renewal",
component: () => import("../views/Policy/PaymentRecord/index.vue") component: () => import("../views/Policy/Renewal/index.vue")
}, },
{ {
path: "/policy/renewal", path: "/policy/payment-record/:policySecId/:status",
name: "Renewal", name: "Renewal",
component: () => import("../views/Policy/Renewal/index.vue") component: () => import("../views/Policy/PaymentRecord/index.vue")
}, },
{ {
path: "/introduction", path: "/introduction",
......
src/store/modules/user.js
View file @ e9d11fea
import GOODS_LIST from "@/api/goodsList.mock"; import GOODS_LIST from "@/api/goodsList.mock";
import { getUserInfo, getFamilyList } from "@/api/user"; import { getUserInfo, getFamilyList } from "@/api/user";
import { getPolicyList } from "@/api/policy"; import { getPolicyList } from "@/api/policy";
import man from "@/assets/images/user/man@2x.png";
import woman from "@/assets/images/user/woman@2x.png";
import avatar from "@/assets/images/user/avatar@2x.png";
import _ from "lodash"; import _ from "lodash";
const CONSTANT = { const CONSTANT = {
avatar: { avatar: {
man: "../../../assets/images/user/man@2x.png", man,
woman: "../../../assets/images/user/woman@2x.png" woman
}, },
relation: ["本人", "父母", "配偶", "子女"] relation: ["本人", "父母", "配偶", "子女"]
}; };
// 0: man; 1: woman
function getReletion(relation, gender) { function getReletion(relation, gender) {
let result = ""; let result = "";
if ([1, 3].includes(+relation)) { if ([1, 3].includes(+relation)) {
if (+relation === 1) { if (+relation === 1) {
result = +gender ? "父亲" : "母亲"; result = +gender ? "母亲" : "父亲";
} else { } else {
result = +gender ? "儿子" : "女儿"; result = +gender ? "女儿" : "儿子";
} }
} else { } else {
result = CONSTANT.relation[+relation]; result = CONSTANT.relation[+relation];
...@@ -33,7 +37,7 @@ export default { ...@@ -33,7 +37,7 @@ export default {
userInfo: { userInfo: {
name: "未登录", name: "未登录",
phoneNoMask: "点击登录", phoneNoMask: "点击登录",
avatar: "../../assets/images/user/avatar@2x.png", avatar,
auth: false auth: false
} }
}, },
...@@ -63,10 +67,11 @@ export default { ...@@ -63,10 +67,11 @@ export default {
const policyListFilted = policyList const policyListFilted = policyList
.filter( .filter(
policy => policy =>
_.some(goodsList, { id: +policy.productNo }) && _.some(goodsList, { id: policy.productNo }) &&
+family.userInfoSecId === +policy.insuredUserSecId +family.userInfoSecId === +policy.insuredUserSecId &&
["6.1", "6.2", "6.3"].includes(policy.policyState)
) )
.map(policy => ({ ...policy, ..._.find(goodsList, { id: +policy.productNo }) })) .map(policy => ({ ...policy, ..._.find(goodsList, { id: policy.productNo }) }))
.sort((a, b) => a.termType > b.termType); .sort((a, b) => a.termType > b.termType);
return policyListFilted?.[0] || goodsList[0]; return policyListFilted?.[0] || goodsList[0];
......
src/views/Goods/Inform/index.vue
View file @ e9d11fea
...@@ -39,8 +39,9 @@ export default { ...@@ -39,8 +39,9 @@ export default {
}, },
methods: { methods: {
conform() { conform() {
this.generateFormData(); this.$router.push(`/policy/detail/123`);
this.generateOrder(); // this.generateFormData();
// this.generateOrder();
}, },
generateFormData() { generateFormData() {
const { const {
......
src/views/Home/Activity/index.less
View file @ e9d11fea
...@@ -66,6 +66,7 @@ ...@@ -66,6 +66,7 @@
&-prize { &-prize {
margin: 20px 7px; margin: 20px 7px;
width: 362px;
height: 362px; height: 362px;
background: url('../../../assets/images/home/zhuanpan.png') no-repeat 0 0 /contain; background: url('../../../assets/images/home/zhuanpan.png') no-repeat 0 0 /contain;
...@@ -177,7 +178,7 @@ ...@@ -177,7 +178,7 @@
flex-direction: column; flex-direction: column;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
margin: 0 10px 24px; margin: 0 20px 24px;
height: 139px; height: 139px;
background: url('../../../assets/images/home/jiangpin.png') no-repeat 0 0 /contain; background: url('../../../assets/images/home/jiangpin.png') no-repeat 0 0 /contain;
......
src/views/Home/Activity/index.vue
View file @ e9d11fea
...@@ -97,6 +97,7 @@ ...@@ -97,6 +97,7 @@
</template> </template>
<script> <script>
import Modal from "../modules/Modal"; import Modal from "../modules/Modal";
import localStorage from "@/service/localStorage";
export default { export default {
name: "Activity", name: "Activity",
...@@ -106,6 +107,7 @@ export default { ...@@ -106,6 +107,7 @@ export default {
data() { data() {
return { return {
isGoing: false, isGoing: false,
isLogin: localStorage.get("mongoToken"),
modal: { modal: {
winning: false, winning: false,
guide: false, guide: false,
...@@ -114,7 +116,16 @@ export default { ...@@ -114,7 +116,16 @@ export default {
} }
}; };
}, },
computed: {}, computed: {
voteButtonText() {
if (!this.isLogin) {
return "去投票";
}
}
},
created() {
},
methods: { methods: {
gameStart() { gameStart() {
this.$nextTick(() => { this.$nextTick(() => {
...@@ -125,7 +136,7 @@ export default { ...@@ -125,7 +136,7 @@ export default {
const pointer = document.querySelector(".activity-prize-pointer"); const pointer = document.querySelector(".activity-prize-pointer");
// 1. 计算旋转角度 // 1. 计算旋转角度
let rotateItemDeg = (3 * 360) / 6; // 每个item旋转角度, 第一个不用旋转 let rotateItemDeg = (3 * 360) / 6; // 每个item旋转角度, 第一个不用旋转
let rotate = rotateItemDeg + 5 * 360; let rotate = rotateItemDeg + 4 * 360;
let rotateSpeed = ((rotateItemDeg / 360) * 1 + 5).toFixed(2); let rotateSpeed = ((rotateItemDeg / 360) * 1 + 5).toFixed(2);
// 2. 重置转盘样式 // 2. 重置转盘样式
turntable.removeAttribute("style"); turntable.removeAttribute("style");
......
src/views/Home/index.less
View file @ e9d11fea
...@@ -174,14 +174,13 @@ ...@@ -174,14 +174,13 @@
height: 30px; height: 30px;
background: #FFFFFF; background: #FFFFFF;
&.active { &.active {
opacity: 0.4; background:rgba(255,255,255,.4);
} }
&:nth-child(3) { &:nth-child(3) {
border-radius: 20px 0 0 20px; border-radius: 20px 0 0 20px;
} }
&:nth-child(4) { &:nth-child(4) {
// opacity: 0.4;
border-radius: 0 20px 20px 0; border-radius: 0 20px 20px 0;
} }
......
src/views/Policy/Detail/Types/Guarantee.vue
View file @ e9d11fea
<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"
:payInfo="payInfo"
></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>
...@@ -29,6 +29,7 @@ import InsuranceService from "../modules/InsuranceService"; ...@@ -29,6 +29,7 @@ import InsuranceService from "../modules/InsuranceService";
import PayCost from "../modules/PayCost"; import PayCost from "../modules/PayCost";
import StatusDesc from "../modules/StatusDesc"; import StatusDesc from "../modules/StatusDesc";
import CustomerService from "../modules/CustomerService"; import CustomerService from "../modules/CustomerService";
import detailPayMixin from "@/views/Policy/mixin/orderInfo.mixin";
import ciiDetail from "@/api/detail.huatai.zhongjixian"; import ciiDetail from "@/api/detail.huatai.zhongjixian";
import liDetail from "@/api/detail.huagui.shouxian"; import liDetail from "@/api/detail.huagui.shouxian";
...@@ -37,6 +38,7 @@ import aiDetail from "@/api/detail.zhongan.yiwai"; ...@@ -37,6 +38,7 @@ import aiDetail from "@/api/detail.zhongan.yiwai";
export default { export default {
name: "Guarantee", name: "Guarantee",
mixins: [detailPayMixin],
components: { components: {
InsuranceRecommend, InsuranceRecommend,
InsuranceCard, InsuranceCard,
...@@ -59,6 +61,7 @@ export default { ...@@ -59,6 +61,7 @@ export default {
}, },
watch: { watch: {
data: { data: {
immediate: true,
deep: true, deep: true,
handler() { handler() {
this.setProductInfoByNo(); this.setProductInfoByNo();
......
src/views/Policy/Detail/Types/Refund.vue
View file @ e9d11fea
<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"
:payInfo="payInfo"
></pay-cost> ></pay-cost>
<refund <refund
v-else v-else
: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,10 +22,12 @@ import StatusDesc from "../modules/StatusDesc"; ...@@ -24,10 +22,12 @@ 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 detailPayMixin from "@/views/Policy/mixin/orderInfo.mixin";
// import { parseTime } from "@/service/utils";
export default { export default {
name: "Guarantee", name: "Guarantee",
mixins: [detailPayMixin],
components: { components: {
StatusDesc, StatusDesc,
Phone, Phone,
...@@ -45,10 +45,16 @@ export default { ...@@ -45,10 +45,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 @ e9d11fea
This diff is collapsed.
src/views/Policy/Detail/index.vue
View file @ e9d11fea
...@@ -14,6 +14,11 @@ import { getPolicyDetail } from "@/api/policy"; ...@@ -14,6 +14,11 @@ import { getPolicyDetail } from "@/api/policy";
export default { export default {
name: "PolicyList", name: "PolicyList",
mixins: [policyStatusMixin], mixins: [policyStatusMixin],
provide() {
return {
getPolicy: this.getPolicy
};
},
components: { components: {
Guarantee, Guarantee,
Refund Refund
...@@ -22,16 +27,19 @@ export default { ...@@ -22,16 +27,19 @@ export default {
return { return {
policy: { policy: {
cardConfig: { cardConfig: {
component: "Guarantee" component: ""
} }
} }
}; };
}, },
async created() { created() {
console.log(this.$route.params.orderNo); this.getPolicy();
const detail = await getPolicyDetail(this.$route.params.orderNo); },
this.policy = this.getData(detail); methods: {
// if (true) {} async getPolicy() {
const detail = await getPolicyDetail(this.$route.params.orderNo);
this.policy = this.getData(detail);
}
} }
}; };
</script> </script>
......
src/views/Policy/Detail/modules/InsuranceCard.vue
View file @ e9d11fea
<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 @ e9d11fea
...@@ -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" />
...@@ -20,12 +20,17 @@ ...@@ -20,12 +20,17 @@
</div> </div>
</div> </div>
</div> </div>
<cr-button class="Pdb-payment-button">{{ payCostConfig.button }}</cr-button> <cr-button class="Pdb-payment-button" @click="goNext()">{{ payCostConfig.button }}</cr-button>
</div> </div>
</template> </template>
<script> <script>
import detailPayMixin from "@/views/Goods/Detail/modules/detailPay.mixin";
let timer = null;
export default { export default {
name: "PayCost", name: "PayCost",
mixins: [detailPayMixin],
inject: ["getPolicy"],
props: { props: {
statusKey: { statusKey: {
type: String, type: String,
...@@ -37,11 +42,49 @@ export default { ...@@ -37,11 +42,49 @@ export default {
title: "", title: "",
button: "立即缴费" button: "立即缴费"
}) })
},
payInfo: {
type: Object,
default: () => ({
payOrderNo: "",
payType: "",
orderNo: ""
})
},
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}天后失效，请立即缴费` : "";
}
},
watch: {
statusKey: {
immediate: true,
handler(val) {
if (["14", "13"].includes(val)) {
timer = setInterval(this.getPolicy, 3000);
}
}
}
},
beforeDestroy() {
clearTimeout(timer);
},
methods: {
goNext() {
if (this.payCostConfig.button === "立即缴费") {
this.orderInfo = this.payInfo;
this.goPay();
} else {
this.getPolicy();
}
} }
} }
}; };
......
src/views/Policy/Detail/modules/Refund.vue
View file @ e9d11fea
...@@ -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/StatusDesc.vue
View file @ e9d11fea
<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,17 @@ export default { ...@@ -30,7 +31,17 @@ 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() {
const arr = ["6.2-3", "6.1-3", "6.3", "8", "9-5", "9-6", "10"];
if (arr.includes(this.cardConfig?.status)) {
this.$router.push(`/policy/payment-record/${this.policySecId}/${this.cardConfig.status}`);
}
} }
} }
}; };
......
src/views/Policy/PaymentRecord/index.vue
View file @ e9d11fea
<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:
v.currentPayState === "1" ? "已欠费" : v.currentPayState === "3" ? "缴费成功" : "-"
})) || [];
if (["9-5", "9-6"].includes(status)) {
list.unshift({
termNoText:
this.record?.refundRecord?.currentState === "2"
? "退款中"
: this.record?.refundRecord?.currentState === "3"
? "退款成功"
: "-",
recordDate: this.record?.refundRecord?.payTime || "-",
amountText: `${this.record?.refundRecord?.amount}元`,
payStatusText:
this.record?.refundRecord?.currentState === "2"
? "应退金额"
: this.record?.refundRecord?.currentState === "3"
? "已退金额"
: "-"
});
}
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 @ e9d11fea
...@@ -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 @ e9d11fea
<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 @ e9d11fea
<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 :policy="policy"></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.getGoodsInfo(detail);
}
} }
}; };
</script> </script>
......
src/views/Policy/Success/modules/ActBanner.vue
View file @ e9d11fea
<template functional> <template functional>
<div class="activity-banner"> <div class="activity-banner">
<div class="activity-banner-item" @click="parent.$router.push('/draw')"> <div class="activity-banner-item" @click="parent.$router.push('/home/activity')">
<cr-image src="@/assets/images/policy/draw.png" width="343px" height="60px" /> <cr-image src="@/assets/images/policy/draw.png" width="343px" height="60px" />
</div> </div>
</div> </div>
......
src/views/Policy/Success/modules/PayInfo.vue 0 → 100644
View file @ e9d11fea
<template>
<div class="Pdb-refund">
<div class="Pdb-refund-content">
<div class="Pdbr-content-item">
<span>保障期限</span>
<span>{{ payInfo.guaranteePeriodText }}</span>
</div>
<div class="Pdbr-content-item">
<span>保费</span>
<span>{{ payInfo.permium }}</span>
</div>
</div>
<p class="Pdb-refund-note" v-if="payInfo.isShowNote">
{{ payInfo.note }}
</p>
<div class="Pdb-refund-operation">
<cr-button class="Pdbi-operation-button Pdbi-operation-button_paid" @click="goNext('product')"
>为家人投保</cr-button
>
<cr-button class="Pdbi-operation-button" @click="goNext('policy')">查看保单</cr-button>
</div>
</div>
</template>
<script>
export default {
name: "PayInfo",
props: {
policy: {
type: Object,
default: () => ({})
}
},
data() {
return {};
},
computed: {
payInfo() {
let result = {
guaranteePeriodText: `${this.policy?.policyEffectiveDate || "-"}至${this.policy
?.policyEndDate || "-"}`,
permium: "",
note: "",
isShowNote: true
};
const payType = this.policy?.payType?.find(
v => v.value === this.policy?.productItem?.payType
);
// 根据月缴或年缴区分缴费卡片内容
if (payType?.label === "月缴") {
result = {
...result,
permium: `首月保费${this.policy?.downPayPrice || 0}元，次月起${this.policy
?.regularPrice || 0}元`,
note: `注:微信将会在每月${this.policy.nextPayInfo.day}日在您的账户内扣除该保费。（您可以随时取消自动扣费）`
};
} else {
result = {
...result,
permium: `${this.policy?.downPayPrice || 0}元/年`,
note: `合同终止前，每年${this.policy?.nextPayInfo?.day || "-"}月${this.policy?.nextPayInfo
?.day || "-"}日${this.policy?.company || "-"}保险公司将在您预留尾号为${this.policy
?.bankCardNoLast4 || "-"}的银行卡内扣除次年保费，请保证余额充足哦。`
};
// 缴费方式为“一次结清”时不显示扣费提醒
if (!payType || payType === "一次交清") {
result.isShowNote = false;
}
}
// 根据产品是否存在保障期限确定保障期限文案
if (this.policy?.policyPeriod?.length) {
const policyPeriod = this.policy.policyPeriod.find(
v => v.value === this.policy?.productItem?.policyPeriod
);
result.guaranteePeriodText = policyPeriod.label || "";
}
return result;
}
},
methods: {
goNext(type) {
if (type === "product") {
this.$router.push({
path: "/goods/detail",
query: { id: this.policy.id, type: this.policy.itype }
});
} else if (type === "policy") {
this.$router.push(`/policy/detail/${this.policy.orderNo}`);
}
}
}
};
</script>
<style lang="less" src="../../Detail/index.less" scoped></style>
src/views/Policy/constants.js
View file @ e9d11fea
...@@ -14,7 +14,7 @@ const statusMap = { ...@@ -14,7 +14,7 @@ const statusMap = {
title: "被保人：${title}", title: "被保人：${title}",
contend: "保障期限：${start} 至 ${end}", contend: "保障期限：${start} 至 ${end}",
statusText: "保障中", statusText: "保障中",
buttons: ["开通自动续费", "电子保单"], buttons: ["去支付", "电子保单"],
detailText: "", detailText: "",
recordText: "保单已欠费，欠缴${money}元", recordText: "保单已欠费，欠缴${money}元",
component: "Guarantee" component: "Guarantee"
......
src/views/Policy/mixin/orderInfo.mixin.js 0 → 100644
View file @ e9d11fea
export default {
computed: {
payInfo() {
return {
payOrderNo: this.data?.payInfo?.payOrderNo,
payOrderType: this.data?.payInfo?.payOrderType,
orderNo: this.data?.orderNo
};
}
}
};
src/views/Policy/mixin/policyStatus.mixin.js
View file @ e9d11fea
...@@ -14,8 +14,6 @@ export default { ...@@ -14,8 +14,6 @@ export default {
const key = this.findKey(policy); const key = this.findKey(policy);
const value = _.cloneDeep(STATUS_MAP[key]); const value = _.cloneDeep(STATUS_MAP[key]);
// console.log(status, key, value);
if (["6", "7", "8", "9"].includes(key)) { if (["6", "7", "8", "9"].includes(key)) {
value.title = value.title.replace("${title}", policy?.refundInfo?.amount || "-"); value.title = value.title.replace("${title}", policy?.refundInfo?.amount || "-");
value.contend = value.contend.replace( value.contend = value.contend.replace(
...@@ -28,19 +26,22 @@ export default { ...@@ -28,19 +26,22 @@ export default {
.replace("${start}", parseTime(policy?.policyEffectiveDate, "{y}-{m}-{d}")) .replace("${start}", parseTime(policy?.policyEffectiveDate, "{y}-{m}-{d}"))
.replace("${end}", parseTime(policy?.policyEndDate, "{y}-{m}-{d}")) .replace("${end}", parseTime(policy?.policyEndDate, "{y}-{m}-{d}"))
.replace("${money}", policy?.payInfo?.amount || "-"); .replace("${money}", policy?.payInfo?.amount || "-");
if (key === "2") {
value.recordText = value.recordText.replace("${money}", policy?.payInfo?.amount || "-");
}
} }
// 校验是否支付成功 // 校验是否支付成功
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) {
...@@ -51,6 +52,12 @@ export default { ...@@ -51,6 +52,12 @@ export default {
return policy?.payState return policy?.payState
? `${policy?.policyState}-${policy?.payState}` ? `${policy?.policyState}-${policy?.payState}`
: String(policy?.policyState); : String(policy?.policyState);
},
getGoodsInfo(policy) {
return {
...policy,
..._.find(GOODS_LIST, { id: policy?.productNo })
};
} }
}, },
beforeRouteEnter(to, from, next) { beforeRouteEnter(to, from, next) {
...@@ -58,7 +65,6 @@ export default { ...@@ -58,7 +65,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 @ e9d11fea
<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="goods.img" />
<div class="Prc-right"> <div class="Prc-right">
<p class="Prc-right-title"> <p class="Prc-right-title">
<span>50万</span> <span>30万</span>
<span>重疾保障</span> <span>{{ goods.guarantee_title }}</span>
</p> </p>
<p class="Prc-right-desc">优势介绍 优势介绍 优势介绍</p> <p class="Prc-right-desc">{{ goods.guarantee_sub }}</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 GOODS_LIST from "@/api/goodsList.mock";
import recommendContent from "@/assets/images/policy/recommend-content@2x.png";
const goods = GOODS_LIST.find(v => v.id === "HTDQZJX001");
export default { export default {
name: "InsuranceRecommend", name: "InsuranceRecommend",
data() { data() {
return { return {
recommendAngle, goods
recommendContent
}; };
}, },
methods: { methods: {
goNext() { goNext() {
// todo 跳转医疗险详情页 this.$router.push({
path: "/goods/detail",
query: { id: this.goods.id, type: this.goods.itype }
});
} }
} }
}; };
......
src/views/Policy/modules/PolicyItem.vue
View file @ e9d11fea
...@@ -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
...@@ -77,6 +77,7 @@ import _ from "lodash"; ...@@ -77,6 +77,7 @@ 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"; import policyStatusMixin from "../mixin/policyStatus.mixin";
import detailPayMixin from "@/views/Goods/Detail/modules/detailPay.mixin";
// SELF(0, "本人"), // SELF(0, "本人"),
// PARENT(1, "父母"), // PARENT(1, "父母"),
...@@ -86,7 +87,7 @@ const relations = [-1, 0, 1, 2, 3]; ...@@ -86,7 +87,7 @@ const relations = [-1, 0, 1, 2, 3];
export default { export default {
name: "InsuranceRecommend", name: "InsuranceRecommend",
mixins: [policyStatusMixin], mixins: [policyStatusMixin, detailPayMixin],
props: { props: {
type: { type: {
type: Number, type: Number,
...@@ -112,7 +113,7 @@ export default { ...@@ -112,7 +113,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 +122,23 @@ export default { ...@@ -121,15 +122,23 @@ export default {
showStatusText(text) { showStatusText(text) {
return text === "保障中"; return text === "保障中";
}, },
// goNext(text, item) { goNext(text, item) {
goNext() { if (["为家人投保", "重新投保"].includes(text)) {
// 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 === "联系客服") { this.$router.push({ path: "/policy/virtual-detail", query: { url: item.policyUrl } });
// } } else if (text === "去支付") {
this.orderInfo = {
payOrderNo: item?.payInfo?.payOrderNo,
payType: item?.payInfo?.payType,
orderNo: item?.orderNo
};
this.goPay();
} 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);
......
src/views/User/Family/index.less
View file @ e9d11fea
...@@ -66,9 +66,14 @@ ...@@ -66,9 +66,14 @@
line-height: 16px; line-height: 16px;
} }
&_overlay { &_overlay_2 {
border-radius: 17px; border-radius: 17px;
margin-top: 35px; margin-top: 10px;
box-shadow: 0px -5px 25px 0px rgba(0,0,0,0.07), 0px -20px 0 -10px #FFFFFF;
}
&_overlay_3 {
border-radius: 17px;
margin-top: 15px;
box-shadow: 0px -5px 25px 0px rgba(0,0,0,0.07), 0px -20px 0 -10px #FFFFFF, 0px -25px 25px 0px rgba(0,0,0,0.07), 0px -33px 0 -14px #FFFFFF; box-shadow: 0px -5px 25px 0px rgba(0,0,0,0.07), 0px -20px 0 -10px #FFFFFF, 0px -25px 25px 0px rgba(0,0,0,0.07), 0px -33px 0 -14px #FFFFFF;
} }
} }
......
src/views/User/Family/index.vue
View file @ e9d11fea
...@@ -19,7 +19,11 @@ ...@@ -19,7 +19,11 @@
</div> </div>
<div class="family-list" v-else> <div class="family-list" v-else>
<div <div
class="family-list-item_overlay family-list-item" :class="[
{ 'family-list-item_overlay_2': familyList.length === 2 },
{ 'family-list-item_overlay_3': familyList.length >= 3 },
'family-list-item'
]"
@click="go(`/user/family/detail/${familyList[0].userInfoSecId}`)" @click="go(`/user/family/detail/${familyList[0].userInfoSecId}`)"
> >
<div class="Fl-item-left"> <div class="Fl-item-left">
...@@ -30,7 +34,7 @@ ...@@ -30,7 +34,7 @@
<p class="Fl-item-right" v-if="familyList[0].auth">已认证</p> <p class="Fl-item-right" v-if="familyList[0].auth">已认证</p>
</div> </div>
</div> </div>
<div class="family-collapse" @click="isCollapse = !isCollapse"> <div class="family-collapse" v-if="familyList.length !== 1" @click="isCollapse = !isCollapse">
<span class="family-collapse-text">{{ collapseText }}</span> <span class="family-collapse-text">{{ collapseText }}</span>
<svg-icon <svg-icon
icon-class="triangle-down" icon-class="triangle-down"
......
src/views/User/Family/modules/FamilyForm.vue
View file @ e9d11fea
...@@ -84,7 +84,7 @@ ...@@ -84,7 +84,7 @@
<span>与您关系:</span> <span>与您关系:</span>
<span>{{ formData.relation }}</span> <span>{{ formData.relation }}</span>
</div> </div>
<div class="Fc-modal-item"> <div class="Fc-modal-item" v-if="formData.socialSecurity">
<span>有无社保:</span> <span>有无社保:</span>
<span>{{ formData.socialSecurity === "true" ? "有社保" : "无社保" }}</span> <span>{{ formData.socialSecurity === "true" ? "有社保" : "无社保" }}</span>
</div> </div>
...@@ -204,16 +204,23 @@ export default { ...@@ -204,16 +204,23 @@ export default {
this.modal.confirm = false; this.modal.confirm = false;
// 组件不支持boolean,需转换 // 组件不支持boolean,需转换
const params = { const params = {
...this.formData, name: this.formData?.nameMask,
socialSecurity: this.formData?.socialSecurity === "true" ? true : false idNo: this.formData?.idNoMask,
relation: this.getReletion(this.formData?.relation)
}; };
// 转换参数类型
if (this.formData?.socialSecurity !== "") {
params.socialSecurity = this.formData?.socialSecurity === "true" ? true : false;
}
if (this.type === "add") { if (this.type === "add") {
await addFamily(params); await addFamily(params);
await this.setFamilyList();
this.formData = _.cloneDeep(defaultFormData);
} else { } else {
params.userInfoSecId = this.information?.userInfoSecId;
await updateFamily(params); await updateFamily(params);
this.$router.push("/user/family");
} }
await this.setFamilyList();
this.formData = _.cloneDeep(defaultFormData);
}, },
onConfirm(picker, res) { onConfirm(picker, res) {
this.formData.relation = res[0]; this.formData.relation = res[0];
...@@ -228,9 +235,25 @@ export default { ...@@ -228,9 +235,25 @@ export default {
} }
}, },
async delFamily() { async delFamily() {
console.log(this.information);
this.modal.delete = false; this.modal.delete = false;
await delFamily(); await delFamily({ userInfoSecId: this.information?.userInfoSecId });
this.$router.push("/user/family"); this.$router.push("/user/family");
},
getReletion(relation) {
let result = -1;
if (["父亲", "母亲"].includes(relation)) {
result = 1;
} else if (["女儿", "儿子"].includes(relation)) {
result = 3;
} else if (relation === "本人") {
result = 0;
} else if (relation === "配偶") {
result = 2;
}
return result;
} }
} }
}; };
......
src/views/User/HelpCenter/index.less
View file @ e9d11fea
...@@ -39,6 +39,7 @@ ...@@ -39,6 +39,7 @@
left: 0; left: 0;
right: 0; right: 0;
bottom: 0; bottom: 0;
overflow-y: scroll;
padding: 15px 20px 0; padding: 15px 20px 0;
background: #FFFFFF; background: #FFFFFF;
border-radius: 32px 32px 0 0; border-radius: 32px 32px 0 0;
......
src/views/User/index.less
View file @ e9d11fea
...@@ -187,6 +187,22 @@ ...@@ -187,6 +187,22 @@
font-size: 11px; font-size: 11px;
font-weight: 400; font-weight: 400;
color: @tag-warning-light-color; color: @tag-warning-light-color;
&_illness {
background: #FFD8BF;
color: #FF6702;
}
&_life {
background: #F3F2F1;
color: #DDB984;
}
&_casualty {
background: #F6E8FF;
color: #858AFF;
}
&_medical {
background: #FFEAB7;
color: #EAAD1A;
}
} }
} }
.Ufii-middle-footer { .Ufii-middle-footer {
......
src/views/User/index.vue
View file @ e9d11fea
<template> <template>
<div class="user"> <div class="user">
<div class="user-info"> <div class="user-info">
<div class="user-info-account" @click="go('', true)"> <div class="user-info-account" @click="go()">
<span>{{ userInfo.name }}</span> <span>{{ userInfo.name }}</span>
<span>{{ userInfo.phoneNoMask }}</span> <span>{{ userInfo.phoneNoMask }}</span>
</div> </div>
<div class="user-info-image" @click="go('', true)"> <div class="user-info-image" @click="go()">
<cr-image <cr-image
class="user-info-image-avatar" class="user-info-image-avatar"
width="" width=""
...@@ -30,7 +30,7 @@ ...@@ -30,7 +30,7 @@
<span class="user-insurance-list-title">全部保单</span> <span class="user-insurance-list-title">全部保单</span>
</div> </div>
<div class="user-insurance-divider"></div> <div class="user-insurance-divider"></div>
<div class="user-insurance-list" @click="go('', true)"> <div class="user-insurance-list" @click="go()">
<div class="user-insurance-list-icon"> <div class="user-insurance-list-icon">
<svg-icon icon-class="claims-apply" class-name="user-insurance-list-icon-svg" /> <svg-icon icon-class="claims-apply" class-name="user-insurance-list-icon-svg" />
<!-- <div class="user-insurance-list-icon-dot"></div> --> <!-- <div class="user-insurance-list-icon-dot"></div> -->
...@@ -41,20 +41,29 @@ ...@@ -41,20 +41,29 @@
<user-family @go="go"></user-family> <user-family @go="go"></user-family>
<div class="user-service"> <div class="user-service">
<p class="user-service-title">我的服务</p> <p class="user-service-title">我的服务</p>
<div class="user-service-main" @click="go('', true)"> <div class="user-service-main">
<cr-cell title="帮助中心" :icon="help" class="user-service-main-item"> <cr-cell
title="帮助中心"
:icon="help"
class="user-service-main-item"
@click="go('/user/help-center', false)"
>
<svg-icon slot="right-icon" icon-class="arrow" class-name="user-service-main-item-svg" /> <svg-icon slot="right-icon" icon-class="arrow" class-name="user-service-main-item-svg" />
</cr-cell> </cr-cell>
<cr-cell title="客服电话" :icon="customerService" class="user-service-main-item"> <cr-cell
title="客服电话"
:icon="customerService"
class="user-service-main-item"
@click="go()"
>
<svg-icon slot="right-icon" icon-class="arrow" class-name="user-service-main-item-svg" /> <svg-icon slot="right-icon" icon-class="arrow" class-name="user-service-main-item-svg" />
</cr-cell> </cr-cell>
</div> </div>
</div> </div>
<div class="user-logo"> <div class="user-logo">
<svg-icon icon-class="logo" class-name="user-logo-svg" /> <svg-icon icon-class="logo" class-name="user-logo-svg" />
<p class="user-logo-desc" @click="go('/introduction')">了解芒果保险</p> <p class="user-logo-desc" @click="go('/introduction', false)">了解芒果保险</p>
</div> </div>
<record-layer v-model="showLayer" desc="敬请期待"></record-layer>
<tabbar></tabbar> <tabbar></tabbar>
</div> </div>
</template> </template>
...@@ -64,15 +73,14 @@ import customerService from "@/assets/images/user/customer-service@2x.png"; ...@@ -64,15 +73,14 @@ 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 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 { getPolicyList } from "@/api/policy"; import { getPolicyList } from "@/api/policy";
import localStorage from "@/service/localStorage";
export default { export default {
name: "User", name: "User",
components: { components: {
UserFamily, UserFamily,
Tabbar, Tabbar
RecordLayer
}, },
data() { data() {
return { return {
...@@ -84,22 +92,36 @@ export default { ...@@ -84,22 +92,36 @@ export default {
}; };
}, },
computed: { computed: {
...mapState("user", ["familyList", "userInfo"]) ...mapState("user", ["familyList", "userInfo"]),
...mapState(["isShowLogin"])
}, },
async created() { created() {
this.setUserInfo(); if (localStorage.get("mongoToken")) {
const policyList = await getPolicyList(); this.getUserInfo();
await this.setFamilyList(policyList); }
this.showDot = policyList.some(policy => policy.policyState === "6.3"); },
watch: {
isShowLogin(val) {
if (!val && localStorage.get("mongoToken")) {
this.getUserInfo();
}
}
}, },
methods: { methods: {
...mapActions("user", ["setFamilyList", "setUserInfo"]), ...mapActions("user", ["setFamilyList", "setUserInfo"]),
go(path, isOverlay = false) { ...mapActions(["setIsShowLogin"]),
if (isOverlay) { go(path, isNeedLogin = true) {
this.showLayer = true; if (isNeedLogin && !localStorage.get("mongoToken")) {
} else { this.setIsShowLogin(true);
this.$router.push(path); return;
} }
if (path) this.$router.push(path);
},
async getUserInfo() {
this.setUserInfo();
const policyList = await getPolicyList();
await this.setFamilyList(policyList);
this.showDot = policyList.some(policy => policy.policyState === "6.3");
} }
} }
}; };
......
src/views/User/modules/UserFamily.vue
View file @ e9d11fea
...@@ -22,8 +22,12 @@ ...@@ -22,8 +22,12 @@
</div> </div>
</div> </div>
<div class="user-family-insurance"> <div class="user-family-insurance">
<!-- user-family-insurance-item-middle_enable 保障中 --> <div
<div class="user-family-insurance-item" v-for="(item, index) in policyList" :key="index"> class="user-family-insurance-item"
@click="go('/policy/detail', item)"
v-for="(item, index) in policyList"
:key="index"
>
<cr-image <cr-image
round round
width="" width=""
...@@ -31,59 +35,43 @@ ...@@ -31,59 +35,43 @@
class="user-family-insurance-item-left" class="user-family-insurance-item-left"
:src="item.productNo ? item.icon : item.icon_closed" :src="item.productNo ? item.icon : item.icon_closed"
/> />
<div class="user-family-insurance-item-middle"> <div
:class="[
{ 'user-family-insurance-item-middle_enable': item.productNo },
'user-family-insurance-item-middle'
]"
>
<div class="Ufii-middle-main"> <div class="Ufii-middle-main">
<span class="Ufii-middle-main-title">{{ item.guarantee_title }}</span> <span class="Ufii-middle-main-title">{{ item.guarantee_title }}</span>
<span class="Ufii-middle-main-status" v-if="item.productNo">保障中</span> <span
:class="[
{ 'Ufii-middle-main-status_medical': item.itype === 'mi' },
{ 'Ufii-middle-main-status_illness': item.itype === 'cii' },
{ 'Ufii-middle-main-status_casualty': item.itype === 'ai' },
{ 'Ufii-middle-main-status_life': item.itype === 'li' },
'Ufii-middle-main-status'
]"
v-if="item.productNo"
>保障中</span
>
</div> </div>
<div class="Ufii-middle-footer">{{ item.guarantee_sub }}</div> <div class="Ufii-middle-footer">{{ item.guarantee_sub }}</div>
</div> </div>
<p class="user-family-insurance-item-right" v-if="!item.productNo">开启保障</p> <p
</div> class="user-family-insurance-item-right"
<!-- <div class="user-family-insurance-item"> v-if="!item.productNo"
<cr-image round width="" height="" class="user-family-insurance-item-left" :src="illness" /> @click.stop="go('/goods/detail', item)"
<div class="user-family-insurance-item-middle"> >
<div class="Ufii-middle-main"> 开启保障
<span class="Ufii-middle-main-title">重疾保障</span> </p>
<span class="status">保障中</span>
</div>
<div class="Ufii-middle-footer">100种重症+40种轻症</div>
</div>
<p class="user-family-insurance-item-right">开启保障</p>
</div>
<div class="user-family-insurance-item">
<cr-image
round
width=""
height=""
class="user-family-insurance-item-left"
:src="casualty"
/>
<div class="user-family-insurance-item-middle">
<div class="Ufii-middle-main">
<span class="Ufii-middle-main-title">意外保障</span>
<span class="Ufii-middle-main-status">保障中</span>
</div>
<div class="Ufii-middle-footer">意外风险覆盖全,最高100万保额</div>
</div>
<p class="user-family-insurance-item-right">开启保障</p>
</div> </div>
<div class="user-family-insurance-item">
<cr-image round width="" height="" class="user-family-insurance-item-left" :src="illness" />
<div class="user-family-insurance-item-middle">
<div class="Ufii-middle-main">
<span class="Ufii-middle-main-title">人寿保障</span>
<span class="status">保障中</span>
</div>
<div class="Ufii-middle-footer">最高350万保额,顶梁柱必备</div>
</div>
<p class="user-family-insurance-item-right">开启保障</p>
</div> -->
</div> </div>
</div> </div>
</template> </template>
<script> <script>
import { mapState } from "vuex"; import { mapState } from "vuex";
import localStorage from "@/service/localStorage";
import GOODS_LIST from "@/api/goodsList.mock";
export default { export default {
name: "UserFamily", name: "UserFamily",
...@@ -96,22 +84,33 @@ export default { ...@@ -96,22 +84,33 @@ export default {
computed: { computed: {
...mapState("user", ["familyList"]), ...mapState("user", ["familyList"]),
policyList() { policyList() {
if (!localStorage.get("mongoToken")) {
// 未登录时返回默认徽章墙
const policyList = GOODS_LIST.filter(v => v.id !== "BNZJX001");
return policyList;
}
return this.familyList[this.activeIndex]?.policyList; return this.familyList[this.activeIndex]?.policyList;
} }
}, },
watch: { watch: {
familyList() { familyList() {
this.$nextTick(() => { this.$nextTick(() => {
console.log(this.familyList.length);
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);
}); });
} }
}, },
methods: { methods: {
go(path) { go(path, params) {
if (path === "/goods/detail" && params) {
path = {
path,
query: { id: params.id, type: params.itype }
};
} else if (path === "/policy/detail" && params.orderNo) {
path = `${path}/${params.orderNo}`;
}
this.$emit("go", path); this.$emit("go", path);
} }
} }
......
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