Skip to content

dev / pingan-life-index-pro

Go to a project
Toggle navigation
Toggle navigation pinning
34259a6a by joe
Options

回执回销

1 parent b4da88d9
Expand all
Inline Side-by-side
Showing 13 changed files with 546 additions and 4 deletions
......@@ -5,6 +5,7 @@
<router-view />
</main>
<v-footer></v-footer>
<vhis-modal></vhis-modal>
</div>
</template>
......@@ -16,6 +17,7 @@ import { mapGetters, mapActions, mapState } from "vuex";
import { getCookie } from "@utils/utils.js";
import VHeader from "@components/home/header/header.vue";
import VFooter from "@components/home/footer/footer.vue";
import VhisModal from "@components/vhis-modal/vhis-modal.vue";
import api from "@/api/api";
import { httpGet, httpPost } from "@/api/fetch-api.js";
......@@ -26,7 +28,8 @@ export default {
name: "app",
components: {
VHeader,
VFooter
VFooter,
VhisModal
},
computed: {
...mapState({
......
......@@ -56,6 +56,8 @@ module.exports = {
updatePolicyInfo : "/pingan_hklife_webapi/policy/updateInfo",
// 证件上传
idPicUpload : "/pingan_hklife_webapi/policy/idPicUpload",
// 回销回执
policyReceipt : "/pingan_hklife_webapi/policy/policyReceipt",
// cms相关
......
......@@ -807,5 +807,29 @@ module.exports = {
publishAt: "Publish time",
readers: "Number of reader",
per: ""
},
vhis: {
title: "Policy confirmation",
desc1: "Thank you for purchasing Ping An Life insurance products.",
desc2: "The policy is covered and enclosed for your reference and preservation.",
desc3: "The policy is an important file. Please check the accuracy of the content immediately,",
desc4: "If you have any missing files or wrong information, please call the customer service hotline.",
desc5: "Please sign and issue a confirmation receipt for our records.",
label1: "Policy number",
label2: "Product name",
label3: "effective date",
label4: "Policyholder",
label5: "Insured",
btn1: "Download e-policy",
btn2: "Confirm immediately",
btn3: "Confirm later",
ymd1: "/",
ymd2: "/",
ymd3: "",
tip1: "I",
tip2: "hereby confirmed that",
tip3: "collection of the above policies",
tip4: "I would like to contact customer service"
}
}
......
......@@ -803,5 +803,28 @@ module.exports = {
publishAt: "發佈時間",
readers: "閱讀人數",
per: "人"
},
vhis: {
title: "保單確認書",
desc1: "多謝閣下投保平安人壽保險產品。",
desc2: "保單已經承保，內附于此供閣下參考及保存。",
desc3: "保單是重要檔，請即查閱其內容準確性，",
desc4: "如有任何遺漏檔或資料錯誤，請致電客戶服務熱線。",
desc5: "煩請簽署下發確認簽收書以作為本公司記錄之用。",
label1: "保單編號",
label2: "產品名稱",
label3: "生效日期",
label4: "保單持有人",
label5: "受保人",
btn1: "下載電子保單",
btn2: "立即確認",
btn3: "稍後確認",
ymd1: "年",
ymd2: "月",
ymd3: "日",
tip1: "本人",
tip2: "現確認於",
tip3: "收托上述保單",
tip4: "我想聯絡客服"
}
}
......
......@@ -805,5 +805,28 @@ module.exports = {
publishAt: "发布时间",
readers: "阅读人数",
per: "人"
},
vhis: {
title: "保单确认书",
desc1: "多谢阁下投保平安人寿保险产品。",
desc2: "保单已经承保，内附于此供阁下参考及保存。",
desc3: "保单是重要档，请即查阅其内容准确性，",
desc4: "如有任何遗漏档或资料错误，请致电客户服务热线。",
desc5: "烦请签署下发确认签收书以作为本公司记录只用。",
label1: "保单编号",
label2: "产品名称",
label3: "生效日期",
label4: "保单持有人",
label5: "受保人",
btn1: "下载电子保单",
btn2: "立即确认",
btn3: "稍后确认",
ymd1: "年",
ymd2: "月",
ymd3: "日",
tip1: "本人",
tip2: "现确认于",
tip3: "受托上述保单",
tip4: "我想联络客服"
}
}
......
import { mapState } from "vuex";
import api from '@/api/api'
import {
httpGet,
httpPost
} from '@/api/fetch-api.js'
export default {
data() {
return {
showPolicy: true,
key: 'value',
hadLoadPolicy: false,
ignorePolicyCodes: [],
// 显示
policyDetail: null
}
},
components: {},
computed: {
...mapState({
userInfo: state => state.userInfo,
policyList: state => state.policyList
})
},
methods: {
initData() {
if (this.isLogin() && !this.hadLoadPolicy) {
this.ignorePolicyCodes = [];
let temp = sessionStorage.getItem("ignorePolicyCodes");
if (temp) {
try {
JSON.parse(temp).forEach(element => {
this.ignorePolicyCodes.push(element);
});
} catch (e) {
}
}
httpPost({ url: api.policyList, sid: true }).then(res => {
this.hadLoadPolicy = true;
if (!res || res.length == 0) {
} else {
this.$store.commit("CACHE_POLICY_LIST", res);
this.checkIfShowPolicy();
}
}).catch(e => {
});
} else {
this.checkIfShowPolicy();
}
},
// 检查是否需要显示policyModal
checkIfShowPolicy() {
this.policyDetail = null;
if (this.policyList) {
for (let index = 0; index < this.policyList.length; index++) {
let policy = this.policyList[index];
if (policy.checkFlag == "Y") {
continue;
}
if (this.ignorePolicyCodes.indexOf(policy.policyCode) >= 0) {
continue;
}
this.initPolicyForShow(policy);
break;
}
}
},
initPolicyForShow(policy) {
let params = {
policyId: policy.policyId,
policyCode: policy.policyCode
};
httpPost({ url: api.policyDetail, sid: true, data: params }).then(res => {
this.policyDetail = res;
this.policyDetail.ymd1 = "";
this.policyDetail.ymd2 = "";
this.policyDetail.ymd3 = "";
let now = new Date();
let y = now.getFullYear();
let m = now.getMonth() + 1;
let d = now.getDate();
if (this.$i18n.locale == 'en') {
this.policyDetail.nowYmd1 = m > 10 ? m : "0" + m;
this.policyDetail.nowYmd2 = d > 10 ? d : "0" + d;
this.policyDetail.nowYmd3 = y;
} else {
this.policyDetail.nowYmd1 = y;
this.policyDetail.nowYmd2 = m > 10 ? m : "0" + m;
this.policyDetail.nowYmd3 = d > 10 ? d : "0" + d;
}
if (this.policyDetail.activeDate) {
let ymds = this.policyDetail.activeDate.split(" ")[0].split("-");
if (this.$i18n.locale == 'en') {
this.policyDetail.ymd1 = ymds[1];
this.policyDetail.ymd2 = ymds[2];
this.policyDetail.ymd3 = ymds[0];
} else {
this.policyDetail.ymd1 = ymds[0];
this.policyDetail.ymd2 = ymds[1];
this.policyDetail.ymd3 = ymds[2];
}
}
}).catch(err => {
});
},
// 确认保单按钮
handleConfirmPolicy() {
if (this.policyDetail) {
let policyCode = this.policyDetail.policyCode;
this.ignorePolicyCodes.push(policyCode);
sessionStorage.setItem("ignorePolicyCodes", JSON.stringify(this.ignorePolicyCodes));
this.checkIfShowPolicy();
let params = {
policyCode: policyCode
};
// 回销
httpPost({ url: api.policyReceipt, sid: true, data: params }).then(res => {
}).catch(e => {
});
}
},
// 忽略保单按钮
handleIgnorePolicy() {
console.log(this.policyDetail);
if (this.policyDetail) {
this.ignorePolicyCodes.push(this.policyDetail.policyCode);
sessionStorage.setItem("ignorePolicyCodes", JSON.stringify(this.ignorePolicyCodes));
this.checkIfShowPolicy();
}
},
onOverLayHandler() {
this.showPolicy = false;
},
toContact() {
this.showPolicy = false;
this.$router.push({
path: "/custom/service?q=m1"
});
},
loginAction() {
this.showPolicy = true;
this.initData();
},
logoutAction() {
this.showPolicy = false;
this.hadLoadPolicy = false;
this.policyDetail = null;
this.ignorePolicyCodes = [];
sessionStorage.removeItem("ignorePolicyCodes");
},
isLogin() {
return this.userInfo && this.userInfo.sid;
}
},
mounted() {
},
created() {
this.initData();
},
watch: {
userInfo(val) {
if (val && val.name) {
this.loginAction();
} else {
this.logoutAction();
}
}
},
}
@import '@/styles/_support';
.comp {
position: fixed;
top: 0;
left: 0;
z-index: 999;
width: 100%;
height: 100%;
@extend .fcc;
text-align: center;
}
.overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba($color: #000000, $alpha: 0.7);
}
.orange {
color: $cOrange;
}
.modal {
position: relative;
@extend .bb;
width: 63.333333rem;
// height: 28.5rem;
border-radius: .8333rem;
background-color: #ffffff;
padding: 4.5rem 3rem 2.5rem;
border: .083333rem solid $cOrange;
.title {
font-size: 1.5rem ;
color: $cOrange;
}
.content {
width: 70%;
margin: auto;
}
.desc {
text-align: left;
line-height: 2.2rem ;
min-width: 7.5rem ;
span {
margin: 0 .166667rem ;
}
}
.value {
text-align: left;
line-height: 2rem ;
}
hr {
border-top: 1px solid #e4e4e5;
width: 70%;
margin: auto;
}
.download-btn {
cursor: pointer;
border: 1px solid $cOrange;
border-radius: .416667rem;
padding: .5rem;
margin: 2rem auto;
width: 35rem;
img {
max-height: 2.083333rem;
}
.btn-name {
margin-left: 1.666667rem ;
}
}
.flex-center {
display: flex;
justify-items: center;
align-items: center;
}
.default-mt {
margin-top: 3.2rem;
}
.half-mt {
margin-top: 1rem;
}
.submit-btn {
background: url("~@assets/images/vhis/vhis-btn.png");
background-size: 100% 100%;
background-repeat: no-repeat;
width: 14rem;
height: 2rem;
line-height: 2rem;
color: white;
font-weight: 600;
cursor: pointer;
}
.btn-margin {
margin-left: 2rem !important;
}
}
.flex-left {
display: flex;
justify-content: flex-start;
align-items: flex-start;
}
.hide {
display: none;
}
@media (max-width: 1200px) {
.comp {
position: fixed;
}
.modal {
width: 70%;
position: absolute;
.content {
width: 80%;
margin: auto;
}
.download-btn{
width: 80%;
}
.default-mt {
margin-top: 2rem;
}
.half-mt {
margin-top: 1rem;
}
hr {
border-top: 1px solid #e4e4e5;
width: 80%;
margin: auto;
}
}
}
@media (max-width: 768px) {
.modal {
// height: 28.5rem;
padding: 3rem 1.5rem;
width: 80%;
height: auto;
.content {
width: 90%;
margin: auto;
}
.download-btn {
margin: 1rem auto;
width: 90%;
}
hr {
border-top: 1px solid #e4e4e5;
width: 90% ;
margin: auto;
}
.default-mt {
margin-top: 1.5rem ;
}
.download-btn{
width: 100%;
}
.submit-btn {
background-size: 100% 100% ;
width: 10rem ;
}
.btn-margin {
margin-left: 1.666667rem ;
}
}
}
@media (max-width: 400px) {
.modal {
// height: 28.5rem;
padding: 3rem 1.5rem;
width: 90%;
height: auto;
.content {
width: 100%;
margin: auto;
}
.download-btn {
margin: 1rem auto;
width: 100%;
}
hr {
border-top: 1px solid #e4e4e5;
width: 100% ;
margin: auto;
}
.default-mt {
margin-top: 1.5rem ;
}
.submit-btn {
background-size: 100% 100% ;
width: 10rem ;
}
.btn-margin {
margin-left: 1.666667rem ;
}
}
}
\ No newline at end of file
<template>
<div class="comp" v-if="policyDetail && showPolicy">
<div @click="onOverLayHandler()" class="overlay"></div>
<div class="modal">
<div class="title">{{$t('vhis.title')}}</div>
<div class="content default-mt">
<div class="desc orange">{{$t('vhis.desc1')}}</div>
<div class="desc">{{$t('vhis.desc2')}}</div>
<div class="desc">{{$t('vhis.desc3')}}</div>
<div class="desc">{{$t('vhis.desc4')}}</div>
<div class="desc">{{$t('vhis.desc5')}}</div>
</div>
<hr class="default-mt">
<div class="content default-mt">
<div class="flex-left"><div class="desc">{{$t('vhis.label1')}}：</div><div class="value orange">{{policyDetail.policyCode}}</div></div>
<div class="flex-left"><div class="desc">{{$t('vhis.label2')}}：</div><div class="value">{{policyDetail.productName}}</div></div>
<div class="flex-left"><div class="desc">{{$t('vhis.label3')}}：</div><div class="value"><span class="orange">{{policyDetail.ymd1}}</span>{{$t('vhis.ymd1')}}<span class="orange">{{policyDetail.ymd2}}</span>{{$t('vhis.ymd2')}}<span class="orange">{{policyDetail.ymd2}}</span>{{$t('vhis.ymd3')}}</div></div>
<div class="flex-left"><div class="desc">{{$t('vhis.label4')}}：</div><div class="value">{{policyDetail.clientNameCn}}</div></div>
<div class="flex-left"><div class="desc">{{$t('vhis.label5')}}：</div><div class="value">{{policyDetail.insuredNameCn}}</div></div>
<div class="download-btn flex-center"><img src="@/assets/images/vhis/vhis-download.png"><span class="btn-name">{{$t('vhis.btn1')}}</span></div>
</div>
<hr class="default-mt">
<div class="content default-mt">
<span class="desc">{{$t('vhis.tip1')}}<span class="orange">{{policyDetail.clientNameCn}}</span>{{$t('vhis.tip2')}}<span class="orange">{{policyDetail.nowYmd1}}</span>{{$t('vhis.ymd1')}}<span class="orange">{{policyDetail.nowYmd2}}</span>{{$t('vhis.ymd2')}}<span class="orange">{{policyDetail.nowYmd3}}</span>{{$t('vhis.ymd3')}}{{$t('vhis.tip3')}}</span>
<div class="flex-center half-mt">
<div class="submit-btn" @click="handleConfirmPolicy" >{{$t('vhis.btn2')}}</div>
<div class="submit-btn btn-margin" @click="handleIgnorePolicy" >{{$t('vhis.btn3')}}</div>
</div>
<div class="flex-center half-mt pointer" @click="toContact()"><span class="orange bold">{{$t('vhis.tip4')}}</span></div>
</div>
</div>
</div>
</template>
<script src="./vhis-modal.js"></script>
<style lang="scss" scoped>
@import "./vhis-modal.scss";
</style>
......@@ -70,13 +70,13 @@ export default {
return i18n.infomationImprove.candidates.idType;
},
nationList() {
return getNationsList();
return getNationsList(this.$i18n.locale);
},
marryList() {
return getMarryList();
},
policyIdTypeList() {
return getPolicyIdTypeList();
return getPolicyIdTypeList(this.$i18n.locale);
}
},
methods: {
......
......@@ -40,7 +40,7 @@
<div class="icon"><img src="@/assets/images/policy-change-information/icon-pci-info.png"></div>{{$t('policyChangeInformation.sex')}}
</div>
<div class="fla">
<div class="icon icon2"><img src="@/assets/images/policy-change-information/icon-pci-notice.png"></div>
<span class="icon icon2"><img src="@/assets/images/policy-change-information/icon-pci-notice.png"></span>
<span class="t1">{{$t('policyChangeInformation.modifyTips1')}}</span>&nbsp;
<span class="t2" @click="toContactUs()">{{$t('policyChangeInformation.modifyTips2')}}</span>
</div>
......