Skip to content

dev / pingan-life-index-pro

Go to a project
Toggle navigation
Toggle navigation pinning
08eea576 by joe
Options

完成大部分功能

1 parent 8dc0ea2c
Inline Side-by-side
Showing 24 changed files with 1063 additions and 356 deletions
......@@ -42,6 +42,14 @@ module.exports = {
// 保存預約服務
saveReservation: "/pingan_hklife_webapi/customService/reservation/save",
// 保存投訴建議
saveComplain: "/pingan_hklife_webapi/customService/complain/save"
saveComplain: "/pingan_hklife_webapi/customService/complain/save",
// 保单接口
policyList : "/pingan_hklife_webapi/policy/list",
// 保单接口
policyDetail : "/pingan_hklife_webapi/policy/detail",
// 保单聯系方式變更
updatePolicyContanct : "/pingan_hklife_webapi/policy/updateContacts",
// 保单客戶資料變更
updatePolicyInfo : "/pingan_hklife_webapi/policy/updateInfo",
}
\ No newline at end of file
......
......@@ -617,20 +617,20 @@ module.exports = {
checkTips: "I do not agree to receive promotional information",
submit: "Save",
errorTips: {
e1: "請填寫正確的聯繫電話",
e1: "Please enter the collect mobile no",
e2: "請填寫聯繫地址",
e3: "請填寫正確的E-Mail地址"
}
e3: "Please enter the collect E-mail"
},
success : "Success",
},
policyChangeInformation: {
title: "Change of Customer Information",
hkClient: "HK Customer",
yes: "是",
no: "否",
owner: "Policy Owner",
insured: "Insured",
obj: "Select for change",
name: "Name",
sex: "Sex",
birth: "出生日期",
birth: "Date of Birth",
type: "Type of Identification Document",
NO: "ID No.",
validityPeriod: "ID Validation Date",
......@@ -639,8 +639,9 @@ module.exports = {
maritalStatus: "Marital Status",
submit: "Save",
upload: "Upload Attachment",
modifyTips1: "如需修改請",
modifyTips2: "聯繫客服",
modifyTips1: "If you need to modify please",
modifyTips2: " contact customer service",
success : "Success",
},
contactUs: {
service: {
......@@ -683,6 +684,8 @@ module.exports = {
menu7: "Complaints",
menu8: "Useful Forms",
insuranceQuery: {
modify: "modify",
InsurantNumber: "Policy Number",
Insurant: "Insured",
InsurantName: "Policy Type",
......@@ -690,42 +693,51 @@ module.exports = {
effectiveDate: "Premium Due Date",
period: "Protection Duration",
t2Title: "Guarantee information",
t2InsurantClassify: "Name of insurance",
t2InsurantAmount: "Insured amount",
t3Title: "Customer information",
t3InsurantNameCn: "Name of applicant (Cn)",
t3InsurantNameEn: "Name of applicant (En)",
t3InsurantIdNumber: "ID Number",
t3InsurantContactAddress: "Contact address",
t3InsurantAddress: "Address",
t3InsurantMobile: "mobile",
t3InsurantEmail: "email",
t3InsuredNameCn: "Name of insured (Cn)",
t3InsuredNameEn: "Name of insured (En)",
t3InsuredBirthday: "Birthday",
t3InsuredIdNumber: "ID Number",
t2Title: "Policy Information",
t2n1: "Policy Type",
t2n2: "Sum Insured",
t2n3: "Effective Date",
t2n4: "Protection Duration",
t2n5: "Name of Insured（Chinese）",
t2n6: "Name of Insured (English) ",
t2n7: "Date of Birth",
t2n8: "ID No",
t3Title: "Customer Information",
t3n1: "Name of Policy Owner（Chinese）",
t3n2: "Name of Policy Owner（English）",
t3n3: "Date of Birth",
t3n4: "ID No",
t3n5: "Postal Address",
t3n6: "Residential Address",
t3n7: "Mobile No.",
t3n8: "Email",
t4Title: "Beneficiary information",
t4NameCn: "Name (Cn)",
t4NameEn: "Name (En)",
t4Relation: "與受保人關係",
t4NameCn: "Name（Chinese）",
t4NameEn: "Name (English)",
t4Relation: "Relationship with Insured",
t4Allocation: "Distribution ratio",
t5Title: "Payment information",
t5PaymentPeriod: "Payment period",
t5PaymentMethod: "Payment method",
t5PaymentCurrency: "Payment currency",
t5PaymentMethod: "Mode of Payment",
t5PaymentCurrency: "Currency",
t5CurrentPremium: "Current premium",
t5PaymentBank: "Payment bank",
t5PaymentAccount: "Payment account",
t5PaymentBank: "Bank",
t5PaymentAccount: "Payment Account",
t6Title: "Payment History",
t6PaymentPeriod: "Installment",
t6PaymentMethod: "Mode of Payment",
t6ClosingDate: "Received Date",
t6PaymentAmount: "Amount",
t6Title: "Payment record",
t6PaymentPeriod: "Payment period",
t6PaymentMethod: "Payment method",
t6ClosingDate: "Closing date",
t6PaymentAmount: "Payment amount",
showMore: "Show All Policies",
noPolicy: "You haven't bought any policy, if you have any questions please",
customService: " contact customer service",
},
reservation: {
submitBtn: '確認',
......@@ -741,8 +753,8 @@ module.exports = {
or: "or",
login: " login",
register: " register",
baseInfoTip : "Your complete information can help us to provide you with complete services",
infoBtn : " Go to perfection"
baseInfoTip: "Your complete information can help us to provide you with complete services",
infoBtn: " Go to perfection"
}
}
}
......
......@@ -620,13 +620,13 @@ module.exports = {
e1: "請填寫正確的聯繫電話",
e2: "請填寫聯繫地址",
e3: "請填寫正確的E-Mail地址"
}
},
success : "更新成功",
},
policyChangeInformation: {
title : "客戶資料變更",
hkClient: "是否平安香港客戶",
yes: "是",
no: "否",
owner: "投保人",
insured: "受保人",
obj: "變更對象",
name: "姓名",
sex: "性别",
......@@ -641,6 +641,7 @@ module.exports = {
upload: "附件上傳",
modifyTips1: "如需修改請",
modifyTips2: "聯繫客服",
success : "更新成功",
},
contactUs: {
service: {
......@@ -683,6 +684,8 @@ module.exports = {
menu7: "投訴受理",
menu8: "常用表格",
insuranceQuery: {
modify : "修改",
InsurantNumber: "保單號碼",
Insurant: "受保人",
InsurantName: "險種名稱",
......@@ -690,22 +693,26 @@ module.exports = {
effectiveDate: "保費到期日",
period: "保障年期",
t2Title: "保障內容",
t2InsurantClassify: "險種名稱",
t2InsurantAmount: "保額",
t2Title: "保單信息",
t2n1: "險種名稱",
t2n2: "保額",
t2n3: "生效日期",
t2n4: "保障年期",
t2n5: "受保人姓名（中文）",
t2n6: "受保人姓名（英文）",
t2n7: "出生日期",
t2n8: "證件號碼",
t3Title: "客戶資料",
t3InsurantNameCn: "投保人姓名（中文）",
t3InsurantNameEn: "投保人姓名（英文）",
t3InsurantIdNumber: "證件號碼",
t3InsurantContactAddress: "聯繫地址",
t3InsurantAddress: "居住地址",
t3InsurantMobile: "手提電話",
t3InsurantEmail: "電子郵箱",
t3InsuredNameCn: "受保人姓名（中文）",
t3InsuredNameEn: "受保人姓名（英文）",
t3InsuredBirthday: "出生日期",
t3InsuredIdNumber: "證件號碼",
t3n1: "投保人姓名（中文）",
t3n2: "投保人姓名（英文）",
t3n3: "出生日期",
t3n4: "證件號碼",
t3n5: "聯繫地址",
t3n6: "居住地址",
t3n7: "手提電話",
t3n8: "電子郵箱",
t4Title: "受益人資料", // t4BeneficiaryInformation
t4NameCn: "姓名（中文）",
......@@ -726,6 +733,10 @@ module.exports = {
t6PaymentMethod: "繳費方式",
t6ClosingDate: "實收日期",
t6PaymentAmount: "繳費金額",
showMore : "顯示所有保單",
noPolicy: "您還未購買保單，如有疑問請",
customService : "聯繫客服",
},
reservation: {
submitBtn: '確認',
......
......@@ -621,13 +621,13 @@ module.exports = {
e1: "請填寫正確的聯繫電話",
e2: "請填寫聯繫地址",
e3: "請填寫正確的E-Mail地址"
}
},
success : "更新成功",
},
policyChangeInformation: {
title: "客户资料变更",
hkClient: "是否平安香港客戶",
yes: "是",
no: "否",
owner: "投保人",
insured: "受保人",
obj: "变更对象",
name: "姓名",
sex: "性别",
......@@ -642,6 +642,7 @@ module.exports = {
upload: "附件上传",
modifyTips1: "如需修改请",
modifyTips2: "联系客服",
success : "更新成功",
},
contactUs: {
service: {
......@@ -691,22 +692,26 @@ module.exports = {
effectiveDate: "保费到期日",
period: "保障年期",
t2Title: "保障内容",
t2InsurantClassify: "险种名称",
t2InsurantAmount: "保额",
t2Title: "保單信息",
t2n1: "险种名称",
t2n2: "保额",
t2n3: "生效日期",
t2n4: "保障年期",
t2n5: "受保人姓名（中文）",
t2n6: "受保人姓名（英文）",
t2n7: "出生日期",
t2n8: "证件号码",
t3Title: "客户资料",
t3InsurantNameCn: "投保人姓名（中文）",
t3InsurantNameEn: "投保人姓名（英文）",
t3InsurantIdNumber: "证件号码",
t3InsurantContactAddress: "联系地址",
t3InsurantAddress: "居住地址",
t3InsurantMobile: "手提电话",
t3InsurantEmail: "电子邮箱",
t3InsuredNameCn: "受保人姓名（中文）",
t3InsuredNameEn: "受保人姓名（英文）",
t3InsuredBirthday: "出生日期",
t3InsuredIdNumber: "证件号码",
t3n1: "投保人姓名（中文）",
t3n2: "投保人姓名（英文）",
t3n3: "出生日期",
t3n4: "证件号码",
t3n5: "联系地址",
t3n6: "居住地址",
t3n7: "手提电话",
t3n8: "电子邮箱",
t4Title: "受益人资料", // t4BeneficiaryInformation
t4NameCn: "姓名（中文）",
......@@ -727,6 +732,10 @@ module.exports = {
t6PaymentMethod: "缴费方式",
t6ClosingDate: "实收日期",
t6PaymentAmount: "缴费金额",
showMore : "显示所有保单",
noPolicy: "您还未购买保单，如有疑问请",
customService : "联系客服",
},
reservation: {
submitBtn: '确认',
......
......@@ -24,7 +24,7 @@ export default {
i18n() {
return this.$i18n.messages && this.$i18n.locale ? this.$i18n.messages[this.$i18n.locale] : {};
},
showPanel(){
showPanel() {
return this.showProfileInfo || this.showUnAuth;
}
},
......@@ -50,16 +50,28 @@ export default {
},
logoutAction() {
this.showUnAuth = true;
this.showProfileInfo = false;
this.$emit("onLogout", {});
},
gotoLoginPage() {
this.$router.push({ path: "/login" });
let callback = this.$route.path;
let separator = "?";
for (let key in this.$route.query) {
callback += separator + key + "=" + this.$route.query[key];
separator = "&";
}
this.$router.push({ path: "/login?callback=" + callback });
},
gotoRegisterPage() {
this.$router.push({ path: "/register" });
},
gotoInformationPage(){
gotoInformationPage() {
this.$router.push({ path: "/infomation/improve" });
},
noAuth() {
this.$store.commit("SET_USER_INFO", null);
this.initData();
this.$emit("onLogout", {});
}
},
mounted() {
......
......@@ -19,10 +19,21 @@ export default {
type: Boolean,
default: false
},
// 过滤类型，含这些模型
// history : 历史不可选择
// future : 未来不可选择
// weekend : 周末不可选择
// today : 当日不可选择
filtModel: {
type: Array,
default() {
return ["history", "weekend", "today"]
}
},
// 需要过滤的日期列表 格式 ["yyyy-MM-dd","yyyy-MM-dd"]
filterDates: {
type: Array,
default () {
default() {
return [] // ["2019-11-26", "2019-11-28"]
}
},
......@@ -95,6 +106,10 @@ export default {
}
},
methods: {
activity(item) {
let ymd = item.year + "-" + (item.month > 9 ? item.month : "0" + item.month) + "-" + (item.date > 9 ? item.date : "0" + item.date);
return ymd == this.dateValue;
},
/**
* 画月历图
* 所需数据
......@@ -122,10 +137,28 @@ export default {
let curData = {}
curData.standards = 0;
let date = index + 1;
let day = Date.parse(`${year}.${month}.${date}`).getDay();
let buildDate = Date.parse(`${year}.${month}.${date}`);
let nowDate = new Date();
let day = buildDate.getDay();
let isWeekend = day == 0 || day == 6;
let disable = false; // 判断是否不可选
disable = isWeekend && !this.weekend; // 判断周末不可选
if (this.filtModel.indexOf("weekend") >= 0) {
disable = isWeekend;
}
if (!disable && this.filtModel.indexOf("future") >= 0) {
buildDate.setHours(23, 59, 59, 999);
disable = buildDate.getTime() > nowDate.getTime()
}
if (!disable && this.filtModel.indexOf("history") >= 0) {
buildDate.setHours(0, 0, 0, 0);
disable = buildDate.getTime() < nowDate.getTime()
}
if (!disable && this.filtModel.indexOf("today") >= 0) {
buildDate.setHours(0, 0, 0, 0);
nowDate.setHours(0, 0, 0, 0);
disable = buildDate.getTime() == nowDate.getTime();
}
// disable = isWeekend && !this.weekend; // 判断周末不可选
let filterDates = this.filterDates;
filterDates.forEach(element => {
let curDate = `${year}-${month}-${date}`;
......@@ -243,7 +276,7 @@ export default {
disable: index == 0 || index == 11
});
}
this.yearRange = `${yearPage * 10 + 0 }-${yearPage * 10 + 9 }`
this.yearRange = `${yearPage * 10 + 0}-${yearPage * 10 + 9}`
this.yearList = yearList;
},
// 显示日历
......@@ -289,7 +322,6 @@ export default {
}
},
onNextHandler() {
console.log("this.dateType:", this.dateType);
if (this.dateType == 1) {
this.nextMonth();
return;
......@@ -313,20 +345,60 @@ export default {
}
this.dateValue = `${year}-${month}-${date}`;
},
initData() {}
},
mounted() {},
created() {
initData() {
// 设置今天日期
let isInit = false;
if (this.value) {
let ymd = this.value.split("-");
if (ymd.length == 3) {
try {
this.year = Number(ymd[0]);
this.month = Number(ymd[1]);
this.date = Number(ymd[2]);
isInit = true;
} catch (e) {
}
}
}
if (!isInit) {
let today = Date.today();
try {
if (this.filtModel.indexOf("today") >= 0) {
if (this.filtModel.indexOf("future") >= 0) {
today.setDate(today.getDate() - 1);
if (this.filtModel.indexOf("weekend") >= 0) {
let day = today.getDay();
let m = day == 0 ? -2 : day == 6 ? -1 : 0;
today.setDate(today.getDate() + m);
}
} else if (this.filtModel.indexOf("history") >= 0) {
today.setDate(today.getDate() + 1);
if (this.filtModel.indexOf("weekend") >= 0) {
let day = today.getDay();
let m = day == 0 ? 1 : day == 6 ? 2 : 0;
today.setDate(today.getDate() + m);
}
}
}
} catch (e) {
console.error(e);
}
this.year = today.getFullYear();
this.month = today.getMonth() + 1;
this.date = today.getDate();
}
this.formatDate();
}
},
mounted() {
},
created() {
this.initData();
},
watch: {
value(val) {
this.dateValue = val;
this.initData();
},
dateValue(val) {
this.$emit('input', val)
......
......@@ -47,7 +47,7 @@
<!-- 日历主体 -->
<div class="tr">
<div class="td" v-for="(item,index) in fortmatMonthData" :key="index">
<div @click="selectDay(item.disable ? null : item)" v-if="item && item.date" class="pointer point" :class="{'sel':item && item.date && item.date == date,'disable':item.disable}">
<div @click="selectDay(item.disable ? null : item)" v-if="item && item.date" class="pointer point" :class="{'sel':item && activity(item),'disable':item.disable}">
<div>{{item && item.date || ""}}</div>
</div>
</div>
......
......@@ -5,52 +5,70 @@ import {
} from '@/api/fetch-api.js'
import Auth from '@components/auth/auth.vue';
import PolicyHeadList from "./policy-head-list.vue";
export default {
name: "InsuranceQuery",
data() {
return {
showForm: false,
dataForm: {
},
dataForm: null,
insuranceForm: {
f1: true,
f2: true,
f3: true,
f4: true,
f5: true,
}
},
policy: null,
}
},
methods: {
test() {
let i18n = this.$i18n.locale;
let data = {};
if (i18n == 'zh') {
data.v1 = "分红重疾";
data.v2 = "终身";
data.v3 = "深圳市益田路5033号";
data.v4 = "张三";
data.v4_2 = "父母";
data.v4_3 = "子女";
data.v5 = "银行转账";
data.v6 = "港币";
data.v7 = "平安银行";
data.v8 = "现金";
handlePolicySelect(data) {
let submitData = {
policyId: data[0].id,
policyCode: data[0].code
}
this.policy = submitData;
this.dataForm = null;
httpPost({ url: api.policyDetail, sid: true, data: submitData }).then(res => {
this.dataForm = res;
}).catch(err => {
if (err.code == 404) {
this.$refs.auth.noAuth();
}
});
// console.log(data);
},
toMoneyCode(moneyCode) {
switch (moneyCode) {
case "USD":
return "$";
default:
return "HK$";
}
},
toMoneyCodeName(moneyCode) {
switch (moneyCode) {
case "USD":
return "美元";
default:
return "港币";
}
},
toModifyPage(type) {
// 1=受保人；2=投保人
if (!this.policy || !this.dataForm) {
return;
}
let data = encodeURIComponent(JSON.stringify({ id: this.policy.policyId, code: this.policy.policyCode }));
sessionStorage.setItem("_hklife_policy", data);
if (type == 1) {
this.$router.push({ path: "/custom/service", query: { q: "m43", u: 1 } });
} else {
data.v1 = "分紅重疾";
data.v2 = "終身";
data.v3 = "深圳市益田路5033號";
data.v4 = "張三";
data.v4_2 = "父母";
data.v4_3 = "子女";
data.v5 = "銀行轉帳";
data.v6 = "港幣";
data.v7 = "平安銀行";
data.v8 = "現金";
this.$router.push({ path: "/custom/service", query: { q: "m43", u: 2 } });
}
this.$set(this, 'dataForm', data);
},
userLogout() {
this.showForm = false;
......@@ -60,9 +78,9 @@ export default {
}
},
components: {
Auth
Auth,
PolicyHeadList
},
mounted() {
this.test();
},
}
......
......@@ -96,6 +96,15 @@
display: flex;
justify-content: space-between;
margin: auto;
div:first-child{
text-align: left;
min-width: 6.666667rem !important;
}
}
.cell1:nth-child(1){
text-align: right !important;
}
.separator-v {
......@@ -106,6 +115,7 @@
}
}
.label span {
color: #f05a23;
margin-left: .583333rem;
......
<template>
<div class="container">
<auth @onLogin="userLogin" @onLogout="userLogout" :checkProfile="true"></auth>
<auth @onLogin="userLogin" @onLogout="userLogout" :checkProfile="true" ref="auth"></auth>
<div v-if="showForm">
<div class="cell-group">
<div class="table-header orange">
<div class="normal-header">
<div class="td w1">{{$t('customService.insuranceQuery.InsurantNumber')}}</div>
<div class="td w2">{{$t('customService.insuranceQuery.Insurant')}}</div>
<div class="td w2">{{$t('customService.insuranceQuery.InsurantName')}}</div>
<div class="td w2">{{$t('customService.insuranceQuery.InsurantAmount')}}</div>
<div class="td w2">{{$t('customService.insuranceQuery.effectiveDate')}}</div>
<div class="td w2">{{$t('customService.insuranceQuery.period')}}</div>
</div>
</div>
<div class="table-content">
<div class="data-line">
<!-- 勾选checkbox样式 -->
<!-- <div class="td w1">
<img v-if="1>10" class="icon-check pointer" src="@/assets/images/insurance-query/un-check.png">
<img v-else class="icon-check pointer" src="@/assets/images/insurance-query/check.png"> P3**********0772
</div> -->
<!-- 下载样式 -->
<div class="td w1">P3**********0772<img class="icon-download" src="@/assets/images/insurance-query/icon-down-load.png" alt=""></div>
<div class="td w2">平安</div>
<div class="td w2">{{dataForm.v1}}</div>
<div class="td w2">HK$10,000</div>
<div class="td w2">2020-1-1</div>
<div class="td w2">{{dataForm.v2}}</div>
</div>
</div>
</div>
<policy-head-list :multiSelectable="false" @onSelect="handlePolicySelect"></policy-head-list>
<template v-if="dataForm">
<div class="cell-group">
<div class="table-header">
<div class="normal-header">
......@@ -41,142 +15,111 @@
<div class="table-content" :class="{hide : !insuranceForm.f1}">
<div class="data-line">
<div class="cell1">
<div class="label">{{$t('customService.insuranceQuery.t2InsurantClassify')}}</div>
<div class="label">{{dataForm.v1}}</div>
<div class="label">{{$t('customService.insuranceQuery.t2n1')}}</div>
<div class="label">{{dataForm.productName}}</div>
</div>
<div class="separator-v"></div>
<div class="cell1">
<div class="label">{{$t('customService.insuranceQuery.InsurantAmount')}}</div>
<div class="label">HK$10,000</div>
<div class="label">{{$t('customService.insuranceQuery.t2n2')}}</div>
<div class="label">{{toMoneyCode(dataForm.moneyCode)}}{{dataForm.amount}}</div>
</div>
</div>
<div class="separator-h"></div>
<div class="data-line">
<div class="cell1">
<div class="label">{{$t('customService.insuranceQuery.effectiveDate')}}</div>
<div class="label">2020-1-1</div>
<div class="label">{{$t('customService.insuranceQuery.t2n3')}}</div>
<div class="label">{{dataForm.activeDate}}</div>
</div>
<div class="separator-v"></div>
<div class="cell1">
<div class="label">{{$t('customService.insuranceQuery.period')}}</div>
<div class="label">{{dataForm.v2}}</div>
</div>
</div>
</div>
</div>
<div class="cell-group">
<div class="table-header">
<div class="normal-header">
<div class="title">{{$t('customService.insuranceQuery.t3Title')}}</div>
<div class="guide" :class="{rotate180 : !insuranceForm.f2}" @click="insuranceForm.f2 = !insuranceForm.f2"></div>
<div class="label">{{$t('customService.insuranceQuery.t2n4')}}</div>
<div class="label">{{dataForm.guaranteeAge}}</div>
</div>
</div>
<div class="table-content" :class="{hide : !insuranceForm.f2}">
<div class="separator-h"></div>
<div class="data-line">
<div class="cell1">
<div class="label">
{{$t('customService.insuranceQuery.t3InsurantNameCn')}}
<span>修改</span>
</div>
<div class="label">平安</div>
<div class="label">{{$t('customService.insuranceQuery.t2n5')}}<span @click="toModifyPage(1)">{{$t('customService.insuranceQuery.modify')}}</span></div>
<div class="label">{{dataForm.insuredNameCn}}</div>
</div>
<div class="separator-v"></div>
<div class="cell1">
<div class="label">
{{$t('customService.insuranceQuery.t3InsurantNameEn')}}
<span>修改</span>
</div>
<div class="label">Pingan</div>
<div class="label">{{$t('customService.insuranceQuery.t2n6')}}<span @click="toModifyPage(1)">{{$t('customService.insuranceQuery.modify')}}</span></div>
<div class="label">{{dataForm.insuredNameEn}}</div>
</div>
</div>
<div class="separator-h"></div>
<div class="data-line">
<div class="cell1">
<div class="label">{{$t('customService.insuranceQuery.effectiveDate')}}</div>
<div class="label">2020-1-1</div>
<div class="label">{{$t('customService.insuranceQuery.t2n7')}}</div>
<div class="label">{{dataForm.insuredBirthday}}</div>
</div>
<div class="separator-v"></div>
<div class="cell1">
<div class="label">
{{$t('customService.insuranceQuery.t3InsurantIdNumber')}}
<span>修改</span>
<div class="label">{{$t('customService.insuranceQuery.t2n8')}}<span @click="toModifyPage(1)">{{$t('customService.insuranceQuery.modify')}}</span></div>
<div class="label">{{dataForm.insuredIdNumber}}</div>
</div>
</div>
<div class="label">123*****567</div>
</div>
</div>
<div class="separator-h"></div>
<div class="cell-group">
<div class="table-header">
<div class="normal-header">
<div class="title">{{$t('customService.insuranceQuery.t3Title')}}</div>
<div class="guide" :class="{rotate180 : !insuranceForm.f2}" @click="insuranceForm.f2 = !insuranceForm.f2"></div>
</div>
</div>
<div class="table-content" :class="{hide : !insuranceForm.f2}">
<div class="data-line">
<div class="cell1">
<div class="label">
{{$t('customService.insuranceQuery.t3InsurantContactAddress')}}
<span>修改</span>
</div>
<div class="label">{{dataForm.v3}}</div>
<div class="label">{{$t('customService.insuranceQuery.t3n1')}}<span @click="toModifyPage(2)">{{$t('customService.insuranceQuery.modify')}}</span></div>
<div class="label">{{dataForm.clientNameCn}}</div>
</div>
<div class="separator-v"></div>
<div class="cell1">
<div class="label">
{{$t('customService.insuranceQuery.t3InsurantAddress')}}
<span>修改</span>
</div>
<div class="label">{{dataForm.v3}}</div>
<div class="label">{{$t('customService.insuranceQuery.t3n2')}}<span @click="toModifyPage(2)">{{$t('customService.insuranceQuery.modify')}}</span></div>
<div class="label">{{dataForm.clientNameEn}}</div>
</div>
</div>
<div class="separator-h"></div>
<div class="data-line">
<div class="cell1">
<div class="label">
{{$t('customService.insuranceQuery.t3InsurantMobile')}}
<span>修改</span>
</div>
<div class="label">（852）2888 8888</div>
<div class="label">{{$t('customService.insuranceQuery.t3n3')}}</div>
<div class="label">{{dataForm.clientBirthday}}</div>
</div>
<div class="separator-v"></div>
<div class="cell1">
<div class="label">
{{$t('customService.insuranceQuery.t3InsurantEmail')}}
<span>修改</span>
</div>
<div class="label">123@ping.com.cn</div>
<div class="label">{{$t('customService.insuranceQuery.t3n4')}}<span @click="toModifyPage(2)">{{$t('customService.insuranceQuery.modify')}}</span></div>
<div class="label">{{dataForm.clientIdNumber}}</div>
</div>
</div>
<div class="separator-h"></div>
<div class="data-line">
<div class="cell1">
<div class="label">
{{$t('customService.insuranceQuery.t3InsuredNameCn')}}
<span>修改</span>
</div>
<div class="label">平安</div>
<div class="label">{{$t('customService.insuranceQuery.t3n5')}}<span @click="toModifyPage(2)">{{$t('customService.insuranceQuery.modify')}}</span></div>
<div class="label">{{dataForm.clientLivingAddress}}</div>
</div>
<div class="separator-v"></div>
<div class="cell1">
<div class="label">
{{$t('customService.insuranceQuery.t3InsuredNameEn')}}
<span>修改</span>
</div>
<div class="label">Pingan</div>
<div class="label">{{$t('customService.insuranceQuery.t3n6')}}<span @click="toModifyPage(2)">{{$t('customService.insuranceQuery.modify')}}</span></div>
<div class="label">{{dataForm.clientContactAddress}}</div>
</div>
</div>
<div class="separator-h"></div>
<div class="data-line">
<div class="cell1">
<div class="label">{{$t('customService.insuranceQuery.t3InsuredBirthday')}}</div>
<div class="label">1999-1-1</div>
<div class="label">{{$t('customService.insuranceQuery.t3n7')}}<span @click="toModifyPage(2)">{{$t('customService.insuranceQuery.modify')}}</span></div>
<div class="label">{{dataForm.clientMobileNo}}</div>
</div>
<div class="separator-v"></div>
<div class="cell1">
<div class="label">
{{$t('customService.insuranceQuery.t3InsuredIdNumber')}}
<span>修改</span>
</div>
<div class="label">123*****567</div>
<div class="label">{{$t('customService.insuranceQuery.t3n8')}}<span @click="toModifyPage(2)">{{$t('customService.insuranceQuery.modify')}}</span></div>
<div class="label">{{dataForm.clientEmail}}</div>
</div>
</div>
</div>
</div>
......@@ -195,18 +138,15 @@
<div class="td w2">{{$t('customService.insuranceQuery.t4Allocation')}}</div>
</div>
<div class="separator-h"></div>
<div v-for="(item,index) in dataForm.benefitList" :key="index">
<div class="data-line">
<div class="td w2">{{dataForm.v4}}</div>
<div class="td w2">Zhangsan</div>
<div class="td w2">{{dataForm.v4_2}}</div>
<div class="td w2">50%</div>
<div class="td w2">{{item.name}}</div>
<div class="td w2">{{item.nameEn}}</div>
<div class="td w2">{{item.benefitType}}</div>
<div class="td w2">{{item.benefitRate}}</div>
</div>
<div class="separator-h"></div>
<div class="data-line">
<div class="td w2">李四</div>
<div class="td w2">Lisi</div>
<div class="td w2">{{dataForm.v4_3}}</div>
<div class="td w2">50%</div>
<div class="separator-h" v-if="index < dataForm.benefitList.length - 1"></div>
</div>
</div>
</div>
......@@ -222,12 +162,12 @@
<div class="data-line">
<div class="cell1">
<div class="label">{{$t('customService.insuranceQuery.t5PaymentPeriod')}}</div>
<div class="label">30年</div>
<div class="label">{{dataForm.insuredPeriod}}</div>
</div>
<div class="separator-v"></div>
<div class="cell1">
<div class="label">{{$t('customService.insuranceQuery.t5PaymentMethod')}}</div>
<div class="label">{{dataForm.v5}}</div>
<div class="label">{{dataForm.payType}}</div>
</div>
</div>
<div class="separator-h"></div>
......@@ -235,12 +175,12 @@
<div class="data-line">
<div class="cell1">
<div class="label">{{$t('customService.insuranceQuery.t5PaymentCurrency')}}</div>
<div class="label">{{dataForm.v6}}</div>
<div class="label">{{toMoneyCodeName(dataForm.moneyCode)}}</div>
</div>
<div class="separator-v"></div>
<div class="cell1">
<div class="label">{{$t('customService.insuranceQuery.t5CurrentPremium')}}</div>
<div class="label">HK$2,000</div>
<div class="label">{{toMoneyCode(dataForm.moneyCode)}}{{dataForm.premium}}</div>
</div>
</div>
<div class="separator-h"></div>
......@@ -248,12 +188,12 @@
<div class="data-line">
<div class="cell1">
<div class="label">{{$t('customService.insuranceQuery.t5PaymentBank')}}</div>
<div class="label">{{dataForm.v7}}</div>
<div class="label">{{dataForm.bankName}}</div>
</div>
<div class="separator-v"></div>
<div class="cell1">
<div class="label">{{$t('customService.insuranceQuery.t5PaymentAccount')}}</div>
<div class="label">1234******888</div>
<div class="label">{{dataForm.bankAccount}}</div>
</div>
</div>
<div class="separator-h"></div>
......@@ -275,21 +215,22 @@
<div class="td w2">{{$t('customService.insuranceQuery.t6PaymentAmount')}}</div>
</div>
<div class="separator-h"></div>
<div v-for="(item,index) in dataForm.pandupList" :key="index">
<div class="data-line">
<div class="td w2">第二期</div>
<div class="td w2">{{dataForm.v8}}</div>
<div class="td w2">2021-1-1</div>
<div class="td w2">HK$2,000</div>
<div class="td w2">{{item.paidPeriod}}</div>
<div class="td w2">{{item.payType}}</div>
<div class="td w2">{{item.receiptDate}}</div>
<div class="td w2">{{toMoneyCode(dataForm.moneyCode)}}{{item.totalPremium}}</div>
</div>
<div class="separator-h"></div>
<div class="data-line">
<div class="td w2">首期</div>
<div class="td w2">{{dataForm.v8}}</div>
<div class="td w2">2020-1-1</div>
<div class="td w2">HK$2,000</div>
<div class="separator-h" v-if="index < dataForm.pandupList.length - 1"></div>
</div>
</div>
</div>
</template>
<template v-else>
<div style="height:500px"></div>
</template>
</div>
</div>
</template>
......
......@@ -5,33 +5,43 @@ import {
} from '@/api/fetch-api.js'
import Auth from '@components/auth/auth.vue';
import modalComp from '@/components/modal-comp/modal-comp.vue';
import PolicyHeadList from "./policy-head-list.vue";
export default {
data() {
return {
loading: false,
showForm: false,
key: 'value',
checked1: false,
checked2: false,
checked3: false,
dataInit: false,
selectedPolicies: [],
data: {
mobileAreaCode: "",
mobile: "",
mobileAcceptMessage: 0,
email: "",
emailAcceptMessage: 0,
address: "",
addressAcceptMessage: 0
},
errorTips: {
e1: "",
e2: "",
e3: ""
},
modalSimpleVisiable: false,
modalVisiable: false,
targetPath: "",
modalIcon: "succ",
modalContent: "",
}
},
components: {
Auth
Auth,
PolicyHeadList,
modalComp
},
computed: {
locale() {
......@@ -39,50 +49,73 @@ export default {
},
i18n() {
return this.$i18n.messages && this.$i18n.locale ? this.$i18n.messages[this.$i18n.locale] : {};
},
submitBtnDisabled() {
let b1 = !this.selectedPolicies || this.selectedPolicies.length == 0;
let b2 = !this.data.address && !this.data.email && !this.data.mobile;
return b1 || b2;
}
},
methods: {
showModal(content, icon) {
icon = !icon || typeof icon === "undefined" ? "succ" : icon;
this.modalIcon = icon;
this.modalContent = content;
this.modalVisiable = true;
},
modalCallback() {
this.modalVisiable = false;
},
sessionLost() {
// let message = this.i18n.glbalTips.sessionLost;
// alert(message);
// let targetPath = "/login?callback=" + this.buildCallbackPath();
// this.$router.push({
// path: targetPath
// });
},
showSuccess() {
alert("更新成功")
this.showModal(this.i18n.policyChangeContact.success);
},
updateContactsHandler() {
if (this.submitBtnDisabled) {
return;
}
let b1 = this.checkMobile();
let b2 = this.checkEmail();
let b3 = this.checkAddress();
let b = b1 & b2 & b3;
if (b) {
this.data.mobileAcceptMessage = this.checked1 ? 1 : 0;
this.data.addressAcceptMessage = this.checked2 ? 1 : 0;
this.data.emailAcceptMessage = this.checked3 ? 1 : 0;
if (this.loading) {
return;
}
let policies = [];
this.selectedPolicies.forEach(element => {
policies.push({ policyId: element.id, policyCode: element.code });
});
let data = {
mobileNo: this.data.mobile,
address: this.data.address,
email: this.data.email,
mobileNoAcceptMsg: this.checked1 ? 1 : 0,
addressAcceptMsg: this.checked2 ? 1 : 0,
emailAcceptMsg: this.checked3 ? 1 : 0,
policies: policies
}
this.loading = true;
httpPost({
url: api.updateContacts,
data: this.data,
url: api.updatePolicyContanct,
data: data,
sid: true
}).then(() => {
this.loading = false;
this.showSuccess();
}).catch(() => {
this.sessionLost();
}).catch(err => {
this.loading = false;
if (err.code == 404) {
this.$refs.auth.noAuth();
}
})
}
},
checkMobile() {
if (!this.data.mobile) {
this.errorTips.e1 = this.i18n.policyChangeContact.errorTips.e1;
return false;
} else {
if (this.data.mobile.length != 8 && this.data.mobile.length != 11) {
if (this.data.mobile) {
let hkMobile = /^[5689]{1}\d{7}$/.test(this.data.mobile);
let zhMobile = /^((13[0-9])|(14[5,7,9])|(15([0-3]|[5-9]))|(166)|(17[0-9])|(18[0-9])|(19[0-9]))\d{8}$/.test(this.data.mobile);
if (!hkMobile && !zhMobile) {
this.errorTips.e1 = this.i18n.policyChangeContact.errorTips.e1;
return false;
}
......@@ -90,49 +123,53 @@ export default {
return true;
},
checkAddress() {
if (!this.data.address) {
this.errorTips.e2 = this.i18n.policyChangeContact.errorTips.e2;
return false;
}
return true;
},
checkEmail() {
if (!/^(\w-*\.*)+@(\w-?)+(\.\w{2,})+$/.test(this.data.email)) {
if (this.data.email && !/^(\w-*\.*)+@(\w-?)+(\.\w{2,})+$/.test(this.data.email)) {
this.errorTips.e3 = this.i18n.policyChangeContact.errorTips.e3;
return false;
}
return true;
},
initData() {
if (this.dataInit) {
return;
}
if (this.loading) {
return;
}
this.data = null;
this.loading = true;
let param = {
policyId: this.selectedPolicies[0].id,
policyCode: this.selectedPolicies[0].code
};
httpPost({
url: api.getContacts,
url: api.policyDetail,
data: param,
sid: true
}).then(response => {
this.data = {};
if (response) {
this.data.mobile = response.mobile;
this.data.mobileAcceptMessage = response.mobileAcceptMessage;
this.data.email = response.email;
this.data.emailAcceptMessage = response.emailAcceptMessage;
this.data.address = response.address;
this.data.addressAcceptMessage = response.addressAcceptMessage;
}
this.checked1 = this.data.mobileAcceptMessage == 1 ? true : false;
this.checked2 = this.data.addressAcceptMessage == 1 ? true : false;
this.checked3 = this.data.emailAcceptMessage == 1 ? true : false;
this.loading = false;
this.dataInit = true;
this.data.mobile = response.clientMobileNo;
this.checked1 = "1" == response.clientMobileAcceptMessage;
this.data.address = response.clientContactAddress;
this.checked2 = "1" == response.clientAddressAcceptMessage;
this.data.email = response.clientEmail;
this.checked3 = "1" == response.clientEmailAcceptMessage;
}
}).catch(res => {
if (res.code == "404") {
this.sessionLost();
this.$refs.auth.noAuth();
}
});
},
buildCallbackPath() {
let path = this.$route.path;
let sep = "?"
for (let key in this.$route.query) {
path += sep + key + "=" + this.$route.query[key];
sep = "&";
}
return path;
handlePolicySelect(data) {
this.selectedPolicies = data;
this.initData();
},
userLogout() {
this.showForm = false;
......@@ -153,7 +190,5 @@ export default {
}
},
mounted() {
this.initData();
},
created() {}
}
}
......
......@@ -52,7 +52,9 @@
flex: 1;
}
.agree {}
.agree {
cursor: pointer;
}
.name-ipt {
width: 13.666667rem;
......
<template>
<div>
<auth @onLogin="userLogin" @onLogout="userLogout" :checkProfile="true"></auth>
<div class="container border" v-if="showForm">
<auth @onLogin="userLogin" @onLogout="userLogout" :checkProfile="true" ref="auth"></auth>
<modal-comp :visible="modalVisiable" :show-confirm="false" :icon="modalIcon" :content="modalContent" :confirm="modalCallback" :overlay="modalCallback"></modal-comp>
<template v-if="showForm">
<policy-head-list :multiSelectable="true" @onSelect="handlePolicySelect"></policy-head-list>
<div class="container border" v-if="selectedPolicies.length > 0 && data">
<div class="form">
<div class="form-item">
<div class="label">
......@@ -55,10 +58,12 @@
</div>
</div>
</div>
<div class="submit-btn" @click="updateContactsHandler">
<div class="submit-btn" @click="updateContactsHandler" :class="{disabled: submitBtnDisabled}">
{{$t("policyChangeContact.submit")}}
</div>
</div>
<div v-else style="height:400px"></div>
</template>
</div>
</template>
......
......@@ -5,21 +5,39 @@ import {
} from '@/api/fetch-api.js'
import Auth from '@components/auth/auth.vue';
import PolicyHeadList from "./policy-head-list.vue";
import DatePicker from '@/components/date-picker/date-picker.vue'
import modalComp from '@/components/modal-comp/modal-comp.vue';
import modalUploadCardComp from '@/components/modal-upload-card-comp/modal-upload-card-comp.vue';
export default {
data() {
return {
loading: false,
showForm: false,
key: 'value',
isHkCus: true,
isOwner: true,
checked: false,
modalUploadCardVisiable: false,
selectedPolicies: [],
data: null,
// 保单信息
policy: null,
// 模态窗
modalSimpleVisiable: false,
modalVisiable: false,
targetPath: "",
modalIcon: "succ",
modalContent: "",
}
},
components: {
modalUploadCardComp,
Auth
PolicyHeadList,
Auth,
DatePicker,
modalComp
},
computed: {
locale() {
......@@ -27,10 +45,107 @@ export default {
},
i18n() {
return this.$i18n.messages && this.$i18n.locale ? this.$i18n.messages[this.$i18n.locale] : {};
}
},
sexCandidates() {
let i18n = this.$i18n.messages[this.$i18n.locale];
return i18n.infomationImprove.candidates.sex;
},
idTypeCandidates() {
let i18n = this.$i18n.messages[this.$i18n.locale];
return i18n.infomationImprove.candidates.idType;
},
},
methods: {
initData() {},
showModal(content, icon) {
icon = !icon || typeof icon === "undefined" ? "succ" : icon;
this.modalIcon = icon;
this.modalContent = content;
this.modalVisiable = true;
},
modalCallback() {
this.modalVisiable = false;
},
loadData() {
if (this.loading) {
return;
}
this.loading = true;
this.data = null;
let param = {
policyId: this.selectedPolicies[0].id,
policyCode: this.selectedPolicies[0].code
};
httpPost({
url: api.policyDetail,
data: param,
sid: true
}).then(response => {
this.loading = false;
if (response) {
this.policy = response;
this.initData();
}
}).catch(res => {
this.loading = false;
if (res.code == "404") {
this.$refs.auth.noAuth();
}
});
},
initData() {
let res = this.policy;
let name = "";
let isOwner = this.isOwner;
if (isOwner) {
name = res.clientNameCn ? res.clientNameCn : res.clientNameEn;
} else {
name = res.insuredNameCn ? res.insuredNameCn : res.insuredNameEn;
}
let data = {
name: name,
idType: isOwner ? res.clientIdType : res.insuredIdType,
idNumber: isOwner ? res.clientIdNumber : res.insuredIdNumber,
idExpireAt: isOwner ? res.clientExpireAt : res.insurantExpireAt,
nature: isOwner ? res.clientNationality : res.insurantNationality,
company: isOwner ? res.clientCompany : res.insurantCompany,
marriage: isOwner ? res.clientMarriage : res.insurantMarriage,
sex: isOwner ? res.clientSex : res.insuredSex,
birthday: isOwner ? res.clientBirthday : res.insuredBirthday
};
data.sex = data.sex ? data.sex : "M";
console.log("data ===", data);
this.$set(this, 'data', data);
},
handlePolicySelect(data) {
this.selectedPolicies = data;
this.loadData();
},
updatePolicyInfo() {
console.log(1, this.loading);
if (this.loading) {
return;
}
this.loading = true;
let param = JSON.parse(JSON.stringify(this.data));
delete param.birthday;
delete param.sex;
param.modifyObj = this.isOwner ? 1 : 2;
param.policyId = this.selectedPolicies[0].id;
param.policyCode = this.selectedPolicies[0].code;
console.log("2,", param);
httpPost({ url: api.updatePolicyInfo, data: param, sid: true }).then(res => {
console.log("3,", res);
this.loading = false;
this.showModal(this.i18n.policyChangeInformation.success);
}).catch(err => {
this.loading = false;
if (err.code == 404) {
this.$refs.auth.noAuth();
}
});
},
userLogout() {
this.showForm = false;
},
......@@ -38,6 +153,8 @@ export default {
this.showForm = true;
}
},
mounted() {},
created() {}
mounted() {
this.isOwner = this.$route.query.u == 1 ? true : false;
},
created() { }
}
......
<template>
<div>
<auth @onLogin="userLogin" @onLogout="userLogout" :checkProfile="true"></auth>
<modal-upload-card-comp :visible="modalUploadCardVisiable" :show-confirm="true" ></modal-upload-card-comp>
<div class="container border" v-if="showForm">
<div class="table">
<div class="table-header orange">
<div class="table-header-item">{{$t('policyChangeInformation.title')}}</div>
</div>
<div class="gird-g form">
<auth @onLogin="userLogin" @onLogout="userLogout" :checkProfile="true" ref="auth"></auth>
<template v-if="showForm">
<!-- 變更對象 checkbox -->
<div class="pure-u-1 form-item form-item2">
<div class="label">
{{$t('policyChangeInformation.hkClient')}}
{{$t('policyChangeInformation.obj')}}
</div>
<div class="cont">
<div class="boo-btn pointer" :class="{active:isHkCus}" @click="isHkCus=true">{{$t('policyChangeInformation.yes')}}</div>
<div class="boo-btn pointer" :class="{active:!isHkCus}" @click="isHkCus=false">{{$t('policyChangeInformation.no')}}</div>
<div class="boo-btn pointer" :class="{active:isOwner}" @click="isOwner=true">{{$t('policyChangeInformation.owner')}}</div>
<div class="boo-btn pointer" :class="{active:!isOwner}" @click="isOwner=false">{{$t('policyChangeInformation.insured')}}</div>
</div>
</div>
<!-- start -->
<policy-head-list :multiSelectable="false" @onSelect="handlePolicySelect" :model="'checkbox'"></policy-head-list>
<modal-upload-card-comp :visible="modalUploadCardVisiable" :show-confirm="true" ></modal-upload-card-comp>
<div class="container border" v-if="selectedPolicies.length > 0 && data">
<div class="table">
<div class="table-header orange">
<div class="table-header-item">{{$t('policyChangeInformation.title')}}</div>
</div>
<div class="gird-g form">
<!-- 1 -->
<div class="pure-u-1 pure-u-md-1-2 form-item">
<div class="label">
<div class="icon"><img src="@/assets/images/policy-change-information/icon-pci-info.png"></div> {{$t('policyChangeInformation.obj')}}
<div class="icon"><img src="@/assets/images/policy-change-information/icon-pci-info.png"></div> {{$t('policyChangeInformation.name')}}
</div>
<div class="ipt-wrap">
<input class="ipt" type="text">
<input class="ipt" type="text" v-model="data.name">
</div>
</div>
......@@ -46,9 +46,11 @@
</div>
<div class="ipt-wrap">
<div class="down-arrow"></div>
<select disabled class="ipt disable">
<option v-if="locale !='zh'">男</option>
<option v-else>男</option>
<select disabled class="ipt disable" v-model="data.sex">
<template v-if="sexCandidates">
<option v-for="(item,index) in sexCandidates" :key="index" :value="item.value">{{item.name}}</option>
</template>
</select>
</div>
</div>
......@@ -66,7 +68,7 @@
</div>
</div>
<div class="ipt-wrap">
<input disabled placeholder="1999-1-1" class="ipt disable" type="text">
<input disabled class="ipt disable" type="text" v-model="data.birthday">
</div>
</div>
......@@ -77,12 +79,9 @@
</div>
<div class="ipt-wrap">
<div class="down-arrow"></div>
<select class="ipt">
<template v-if="locale =='zh'">
<option>身份证</option>
</template>
<template v-else>
<option>身份證</option>
<select class="ipt" v-model="data.idType">
<template v-if="idTypeCandidates">
<option v-for="(item,index) in idTypeCandidates" :key="index" :value="item.value">{{item.name}}</option>
</template>
</select>
</div>
......@@ -97,7 +96,7 @@
<div class="eye"></div>
<!-- -->
<!-- <div class="eye eye-act"></div> -->
<input class="ipt" type="text">
<input class="ipt" type="text" v-model="data.idNumber">
</div>
</div>
......@@ -107,7 +106,7 @@
<div class="icon"><img src="@/assets/images/policy-change-information/icon-pci-card.png"></div> {{$t('policyChangeInformation.validityPeriod')}}
</div>
<div class="ipt-wrap">
<input class="ipt" type="text">
<date-picker class="date" v-model="data.idExpireAt" :filtModel="['history', 'today']"></date-picker>
</div>
</div>
......@@ -117,7 +116,7 @@
<div class="icon"><img src="@/assets/images/policy-change-information/icon-pci-earth.png"></div> {{$t('policyChangeInformation.nationality')}}
</div>
<div class="ipt-wrap">
<input class="ipt" type="text">
<input class="ipt" type="text" v-model="data.nature">
</div>
</div>
......@@ -127,7 +126,7 @@
<div class="icon"><img src="@/assets/images/policy-change-information/icon-pci-build.png"></div> {{$t('policyChangeInformation.employer')}}
</div>
<div class="ipt-wrap">
<input class="ipt" type="text">
<input class="ipt" type="text" v-model="data.company">
</div>
</div>
......@@ -137,7 +136,7 @@
<div class="icon"><img src="@/assets/images/policy-change-information/icon-pci-love.png"></div> {{$t('policyChangeInformation.maritalStatus')}}
</div>
<div class="ipt-wrap">
<input class="ipt" type="text">
<input class="ipt" type="text" v-model="data.marriage">
</div>
</div>
......@@ -145,11 +144,13 @@
</div>
<div class="submit-btn">
<div class="submit-btn" @click="updatePolicyInfo">
{{$t("policyChangeInformation.submit")}}
</div>
</div>
</div>
<div v-else style="height:400px"></div>
</template>
</div>
</template>
......
import api from '@/api/api';
import {
httpPost
} from '@/api/fetch-api.js';
import {
mapState
} from 'vuex';
export default {
props: {
multiSelectable: {
type: Boolean,
default: false
},
model: {
type: String,
// checkbox
default: "download"
}
},
name: "InsuranceQuery",
data() {
return {
myPolicyList: [],
maxShow: 2,
selectPolicyCode: "",
selectPolicyCodes: {},
}
},
computed: {
...mapState({
policyList: state => state.policyList
}),
},
methods: {
queryList() {
if (this.policyList && this.policyList.length > 0) {
this.myPolicyList = this.policyList;
this.myPolicyList.forEach(element => {
element.activity = false;
})
this.initSelected();
} else {
httpPost({ url: api.policyList, sid: true }).then(res => {
if (!res || res.length == 0) {
this.myPolicyList = null;
} else {
res.forEach(element => {
element.activity = false;
// let len = element.policyCode.length;
// element.policyCodeStr = element.policyCode && len > 5 ?
// element.policyCode.substring(0, 2) + "**********"
// + element.policyCode.substring(len - 4, len) : element.policyCode;
});
this.$store.commit("CACHE_POLICY_LIST", res);
this.myPolicyList = res;
}
this.initSelected();
}).catch(e => {
this.myPolicyList = null;
switch (e.code) {
case "2002":
// 不是客户，没有购买保单
break;
}
})
}
},
initSelected() {
let selectPolicy = null;
try {
let data = sessionStorage.getItem("_hklife_policy");
if (data) {
sessionStorage.removeItem("_hklife_policy");
selectPolicy = JSON.parse(decodeURIComponent(data));
if (selectPolicy) {
if (this.multiSelectable) {
this.selectPolicyCodes[selectPolicy.code] = selectPolicy;
} else {
this.selectPolicyCode = selectPolicy.code;
}
this.$emit("onSelect", [selectPolicy]);
// 判断最大显示
let index = -1;
for (let i = 0; i < this.myPolicyList.length; i++) {
if (selectPolicy.code == this.myPolicyList[i].policyCode) {
this.myPolicyList[i].activity = true;
index = i;
}
}
this.$set(this, "myPolicyList", this.myPolicyList);
if (index > 2) {
this.maxShow = this.myPolicyList.length;
}
}
}
} catch (e) {
}
},
handlePolicySelect(item, index) {
let code = item.policyCode;
if (this.multiSelectable) {
let c = this.selectPolicyCodes[code];
if (!c || typeof c == "undefined") {
item.activity = true;
this.selectPolicyCodes[code] = { code: code, id: item.policyId };
} else {
item.activity = false;
delete this.selectPolicyCodes[code];
}
// this.$set(this, 'myPolicyList', this.myPolicyList);
let data = [];
for (let key in this.selectPolicyCodes) {
data.push(this.selectPolicyCodes[key]);
}
this.$emit("onSelect", data);
} else {
if (code != this.selectPolicyCode) {
this.selectPolicyCode = code;
this.$emit("onSelect", [{ code: code, id: item.policyId }]);
}
}
},
isPolicySelect(item, index) {
let code = item.policyCode;
if (this.multiSelectable) {
let c = this.selectPolicyCodes[code];
if (!c || typeof c == "undefined") {
return false;
} else {
return true;
}
}
return false;
}
},
components: {
},
mounted() {
this.queryList();
},
}
@import '@/styles/_support';
.container {
overflow-x: scroll;
}
.cell-group {
margin-bottom: 1rem;
&:last-child {
margin-bottom: 0;
}
div {
color: #4c4948;
}
.w1 {
// width: 10rem;
width: 20rem;
text-align: center;
}
.w2 {
// width: 6.25rem;
width: 12.5rem;
text-align: center;
}
.table-header {
// width: 64.166667rem;
height: 3.25rem;
border-top-left-radius: .666667rem;
border-top-right-radius: .666667rem;
background-color: #f2f2f2;
display: flex;
align-items: center;
.normal-header {
// width: 58.833333rem;
@extend .bb;
padding: 0 2.75rem;
width: 100%;
margin: auto;
display: flex;
justify-content: space-between;
align-items: center;
.title {
font-weight: bold;
color: #575453;
}
.guide {
transition: all 0.5s;
cursor: pointer;
width: 1rem;
height: .666667rem;
background: url("~@/assets/images/insurance-query/triangle-down.png") no-repeat center center;
background-size: 100% 100%;
}
.rotate180 {
transform: rotate(180deg);
transition: all 0.5s;
}
}
}
.table-content {
// width: 64.166667rem;
height: auto;
// display: inline-block;
border-bottom-left-radius: .666667rem;
border-bottom-right-radius: .666667rem;
border-left: solid .083333rem #f2f2f2;
border-right: solid .083333rem #f2f2f2;
border-bottom: solid .083333rem #f2f2f2;
padding: 0 2.75rem;
// max-height: 41.666667rem;
// transition: max-height ease-out 0.3s !important;
overflow: hidden;
.data-line {
// padding: 0 2.75rem;
height: 4.416667rem;
margin: auto;
display: flex;
justify-content: space-between;
align-items: center;
.td {
display: flex;
justify-content: center;
align-items: center;
}
.cell1 {
width: 98%;
display: flex;
justify-content: space-between;
margin: auto;
}
.separator-v {
height: 2.5rem;
width: .166667rem;
background-color: #f2f2f2;
margin: 0 .916667rem;
}
}
.label span {
color: #f05a23;
margin-left: .583333rem;
cursor: pointer;
text-decoration: underline;
}
.separator-h {
width: 100%;
height: 1px;
background-color: #f2f2f2;
}
}
.orange {
background-color: #f05a23 !important;
div {
color: #ffffff;
}
}
.hide {
max-height: 0;
border-bottom: none;
}
.sp {
text-decoration :underline;
padding: 0 .4rem;
}
.ac {
color: #f05a23 !important;
}
}
.show-more-btn {
width: 100%;
color: #f05a23 !important;
text-decoration :underline;
cursor: pointer;
justify-content: center !important;
}
.pointer {
cursor: pointer;
}
.activity {
background-color: #f05a23 !important;
opacity: .5;
div{
color: #FFFFFF !important;
}
}
.empty{
height: 41.666667rem;
display: flex;
align-items: center;
justify-content: center;
.tips {
display: flex;
.icon {
margin-right: 5px;
display: inline-block;
}
.btn {
color: #f05a23;
}
}
}
\ No newline at end of file
<template>
<div class="container">
<div class="cell-group">
<div class="table-header orange">
<div class="normal-header">
<div class="td w1">{{$t('customService.insuranceQuery.InsurantNumber')}}</div>
<div class="td w2">{{$t('customService.insuranceQuery.Insurant')}}</div>
<div class="td w1">{{$t('customService.insuranceQuery.InsurantName')}}</div>
<div class="td w2">{{$t('customService.insuranceQuery.InsurantAmount')}}</div>
<div class="td w2">{{$t('customService.insuranceQuery.effectiveDate')}}</div>
<div class="td w2">{{$t('customService.insuranceQuery.period')}}</div>
</div>
</div>
<div class="table-content">
<template v-if="myPolicyList">
<div v-for="(item,index) in myPolicyList" :key="index">
<template v-if="index < maxShow">
<div class="data-line" @click="handlePolicySelect(item,index)">
<div class="td w1 pointer">
<template v-if="multiSelectable">
<img v-if="item.activity" class="icon-check pointer" src="@/assets/images/insurance-query/check.png">
<img v-else class="icon-check pointer" src="@/assets/images/insurance-query/un-check.png">
<span class="sp" :class="{ac: item.activity}">{{item.policyCode}}</span>
</template>
<template v-else>
<template v-if="model != 'download'">
<img v-if="selectPolicyCode == item.policyCode" class="icon-check pointer" src="@/assets/images/insurance-query/check.png">
<img v-else class="icon-check pointer" src="@/assets/images/insurance-query/un-check.png">
</template>
<span class="sp" :class="{ac: selectPolicyCode == item.policyCode}">{{item.policyCode}}</span>
<template v-if="model == 'download'">
<img class="icon-download" src="@/assets/images/insurance-query/icon-down-load.png" alt="">
</template>
</template>
</div>
<div class="td w2">{{item.insuredName}}</div>
<div class="td w1">{{item.productName}}</div>
<div class="td w2">{{item.moneyCode}}{{item.amount}}</div>
<div class="td w2">{{item.expireAt}}</div>
<div class="td w2">{{item.guaranteeAge}}</div>
</div>
<div class="separator-h" v-if="index < myPolicyList.length - 1 && index < maxShow - 1"></div>
</template>
</div>
<template v-if="!policyList || maxShow < policyList.length">
<div class="separator-h"></div>
<div class="data-line show-more-btn" @click="maxShow = policyList.length">{{$t('customService.insuranceQuery.showMore')}}</div>
</template>
</template>
<template v-else>
<div class="empty">
<div class="tips">
<img class="icon" src="@/assets/images/common/icon-alert-i.png" alt="">
<div class="txt">
{{$t('customService.insuranceQuery.noPolicy')}}
<span class="pointer btn">{{$t('customService.insuranceQuery.customService')}}</span>
</div>
</div>
</div>
</template>
</div>
</div>
</div>
</template>
<script src="./policy-head-list.js"></script>
<style lang="scss" scoped>
@import "./policy-head-list.scss";
</style>
\ No newline at end of file
......@@ -3,6 +3,10 @@ import {
httpGet,
httpPost
} from '@/api/fetch-api.js'
import {
mapState
} from 'vuex';
import Auth from '@components/auth/auth.vue';
import modalComp from '@/components/modal-comp/modal-comp.vue';
......@@ -12,6 +16,7 @@ import DatePicker from '@/components/date-picker/date-picker.vue'
export default {
data() {
return {
loading: false,
showForm: false,
key: 'value',
values: {
......@@ -53,6 +58,9 @@ export default {
modalSimpleComp
},
computed: {
...mapState({
userInfo: state => state.userInfo
}),
locale() {
return this.$i18n.locale || 'tc';
},
......@@ -116,11 +124,17 @@ export default {
// let day = y + "-" + (m < 10 ? "0" + m : m) + "-" + (d < 10 ? "0" + d : d);
this.information.birthDate = this.birthDate;
this.loadIdentify().then(() => {
if (this.loading) {
return;
}
this.loading = true;
httpPost({
url: api.updateInformation,
data: this.information,
sid: true
}).then(response => {
this.loading = false;
let message = "";
switch (response.returnCode) {
case "GS_MODIFYFIVEKEYS_ERROR_IDNOERROR":
......@@ -136,8 +150,12 @@ export default {
this.showModal(message, "succ");
let path = this.$route.query.callback || "/";
this.targetPath = path;
this.userInfo.hadFullInfo = 1;
this.$store.commit("SET_USER_INFO", this.userInfo);
break;
}
}).catch(err => {
this.loading = false;
});
});
}
......
......@@ -63,7 +63,7 @@
</div>
<div class="ipt-wrap">
<!-- <input class="ipt" type="date" :class="{err : errorTips.e3.length > 0}" v-model="birthDate"> -->
<date-picker class="date" v-model="information.birthDate"></date-picker>
<date-picker class="date" v-model="information.birthDate" :filtModel="['future','today']"></date-picker>
</div>
<div class="validator" v-if="errorTips.e3.length > 0 ">
<img src="@/assets/images/common/icon-notice.png" alt=""> {{errorTips.e3}}
......
......@@ -22,6 +22,7 @@ import {
export default {
data() {
return {
loading: false,
key: 'value',
type: 1, // 1:帐密登陆 2:OTP登陆,
values: {
......@@ -41,10 +42,10 @@ export default {
tip: "" // 显示的文字
},
loginForm: {
// userId: "18334783910",
// password: "qweqwe123",
userId: "18145729463",
password: "ccc123!@#",
userId: "18334783910",
password: "qweqwe123",
// userId: "18145729463",
// password: "ccc123!@#",
// userId: "",
// password: "",
......@@ -199,6 +200,11 @@ export default {
this._showEmptyPasswordTips();
return;
}
if (this.loading) {
return;
}
this.loading = true;
this.handlerIsShowImageVcode().then(() => {
httpPost({
url: api.gsLogin,
......@@ -208,6 +214,7 @@ export default {
loginPwd: passwordEncrypt(this.loginForm.password)
}
}).then(response => {
this.loading = false;
this._handlerLoginResponse(response);
})
});
......@@ -273,10 +280,16 @@ export default {
otp: this.loginForm.otp,
deviceId: this.refreshDeviceId()
};
if (this.loading) {
return;
}
this.loading = true;
httpPost({
url: api.otpLogin,
data: data
}).then(response => {
this.loading = false;
this._handlerLoginResponse(response);
});
});
......
......@@ -11,6 +11,7 @@ import { passwordEncrypt } from '@/utils/encrypt.js';
export default {
data() {
return {
loading: false,
key: 'value',
type: 1, // 1:输入用户信息 2:找回密码 3:核对信息 4.重置密码
values: {
......@@ -117,6 +118,10 @@ export default {
if (this.times.remain > 0) {
return;
}
if (this.loading) {
return;
}
this.loading = true;
// 定位用户
httpPost({
url: api.sendOtp,
......@@ -124,6 +129,7 @@ export default {
cid: this.values.cid
}
}).then(response => {
this.loading = false;
if (this.responseHandler(response)) {
switch (response.returnCode) {
case "COMMON_ERROR_E3":
......@@ -134,6 +140,8 @@ export default {
return;
}
}
}).catch(err => {
this.loading = false;
})
},
checkOtp() {
......@@ -180,7 +188,10 @@ export default {
return;
}
let pwd = passwordEncrypt(this.step4.pwd);
// 定位用户
if (this.loading) {
return;
}
this.loading = true;
httpPost({
url: api.resetPwd,
data: {
......@@ -188,6 +199,7 @@ export default {
password: pwd
}
}).then(response => {
this.loading = false;
if (this.responseHandler(response)) {
let message = this.i18n().passwordCheck.success;
this.step4.success = true;
......@@ -201,6 +213,8 @@ export default {
break;
}
}
}).catch(err => {
this.loading = false;
})
},
checkPassword(password) {
......
......@@ -20,5 +20,10 @@ export function SET_USER_INFO(state, val) {
} else {
setCookie("_user_profile", "", 1);
state.userInfo = null;
state.policyList = null;
}
}
export function CACHE_POLICY_LIST(state, val) {
state.policyList = val;
}
\ No newline at end of file
......
......@@ -3,9 +3,10 @@ export default {
isMobile: false, //是否手机访问
isSmallScreen: false, // 是否小屏幕 (PC时，小屏幕机导航栏会改变))
userInfo : {
sid : "",
name : "",
hadFullInfo: ""
}
userInfo: {
sid: "",
name: "",
hadFullInfo: "",
},
policyList: []
}
......