Skip to content

dev / pingan-life-index-pro

Go to a project
Toggle navigation
Toggle navigation pinning
605fa8d5 by joe
Options

客户挂宝流程

1 parent 484771bc
Inline Side-by-side
Showing 23 changed files with 946 additions and 84 deletions
......@@ -11,7 +11,7 @@
<!--[if gt IE 6]>
<![endif]-->
<title>平安人寿保险官网</title>
<title>平安人寿香港</title>
</head>
<body>
......
......@@ -402,7 +402,8 @@ textarea {
.flex-center {
display: flex;
justify-content: center
justify-content: center;
align-items: center;
}
@media (max-width: 1200px) {
......
......@@ -44,6 +44,8 @@ module.exports = {
// 保存投訴建議
saveComplain: "/pingan_hklife_webapi/customService/complain/save",
// 身份认证
customerAuth :"/pingan_hklife_webapi/policy/auth",
// 保单接口
policyList : "/pingan_hklife_webapi/policy/list",
// 保单接口
......
......@@ -32,9 +32,9 @@ module.exports = {
value: ""
}, {
name: "login",
path: "/login",
path: "",
type: "noAuth",
value: ""
value: "login"
},
{
name: "modify password",
......@@ -753,12 +753,32 @@ module.exports = {
customService: " contact customer service",
},
unauth: {
m1: {
tit: "If you need to check the policy, please ask the policyholder",
or: "/",
tail: "ping an all in one account account"
},
m2: {
tit: "If you need to change the policy, please ask the policyholder",
or: "/",
tail: "ping an all in one account account"
},
m3: {
tit: "If you have a ping an all in one account account, it can help us provide better services for you",
or: "/",
tail: ""
},
tips: "If you have a ping an all in one account account, it can help us provide better services for you",
or: "or",
login: " login",
register: " register",
baseInfoTip: "Your complete information can help us to provide you with complete services",
infoBtn: " Go to perfection"
},
auth : {
defaultTip : "You have not verified the customer information, please fill in the customer information provided at the time of insurance",
customService: " contact customer service",
notMatch : "The information is not match. Please check it. If you have any questions, you can",
}
},
pagination: {
......
......@@ -9,7 +9,7 @@ module.exports = {
en: 'English'
},
glbalTips: {
sessionLost: "為了更好的體驗，需要您登錄後再進行此操作"
sessionLost: "為了更好的體驗，需要您登入後再進行此操作"
},
form: {
datePicker: {
......@@ -32,9 +32,9 @@ module.exports = {
value: ""
}, {
name: "登入",
path: "/login",
path: "",
type: "noAuth",
value: ""
value: "login"
},
{
name: "修改密碼",
......@@ -170,12 +170,12 @@ module.exports = {
},
login: {
title: "平安一賬通",
loginType1: "賬密登錄",
loginType2: "動態密碼登录",
loginType1: "賬密登入",
loginType2: "動態密碼登入",
account: "賬號",
accountPlaceholder: "請輸入證件號/一賬通用戶名/手機號",
password: "密碼",
passwordPlaceholder: "輸入登錄密碼",
passwordPlaceholder: "輸入登入密碼",
verifyPlaceholder: "請輸入驗證碼",
agree: "同意",
protocol: "《平安一賬通會員服務協議》",
......@@ -231,7 +231,7 @@ module.exports = {
e2: "請同意《平安一賬通會員服務協議》",
e3: "短信驗證碼不正確",
e4: "請先獲取短信驗證碼",
e5: "手機號已經被註冊，請使用其他手機號註冊或直接登錄",
e5: "手機號已經被註冊，請使用其他手機號註冊或直接登入",
e6: "請輸入圖片驗證碼",
e7: "密碼長度不能少於8位",
e8: "密碼中必須包含數字、字符以及特殊號碼",
......@@ -242,7 +242,7 @@ module.exports = {
}
},
session: {
sidExpire: "長時間未操作，為了您賬戶的安全，請登錄後再操作",
sidExpire: "長時間未操作，為了您賬戶的安全，請登入後再操作",
},
passwordCheck: {
error1: "密碼長度不少於8位",
......@@ -752,12 +752,32 @@ module.exports = {
customService: "聯繫客服",
},
unauth: {
m1: {
tit: "如需查詢保單請投保人",
or: "/",
tail: "平安一賬通賬戶"
},
m2: {
tit: "如需變更保單請投保人",
or: "/",
tail: "平安一賬通賬戶"
},
m3: {
tit: "如您有平安一賬通賬戶，可幫助我們更好地為您提供服務",
or: "/",
tail: ""
},
tips: "如您有平安一賬通賬戶，可幫助我們更好地為您提供服務",
or: "或",
login: "登錄",
login: "登入",
register: "註冊",
baseInfoTip: "您的完整信息可幫助我們為你提供完整服務",
infoBtn: "前往完善"
},
auth : {
defaultTip : "您尚未驗證客戶資料，請填寫投保時提供的客戶資料",
customService: " 聯繫客服",
notMatch : "您填寫的信息與公司留存信息不一致，請核對，如有疑問可",
}
},
pagination: {
......
module.exports = {
message: {
login: '登录',
login: '登陆',
Username: '用户名',
Password: '密码',
Captcha: '验证码',
......@@ -9,7 +9,7 @@ module.exports = {
en: '英文'
},
glbalTips: {
sessionLost: "为了更好的体验，需要您登录后再进行此操作"
sessionLost: "为了更好的体验，需要您登陆后再进行此操作"
},
form: {
datePicker: {
......@@ -32,9 +32,9 @@ module.exports = {
value: ""
}, {
name: "登陆",
path: "/login",
path: "",
type: "noAuth",
value: ""
value: "login"
},
{
name: "修改密码",
......@@ -169,12 +169,12 @@ module.exports = {
},
login: {
title: "平安一账通",
loginType1: "账密登录",
loginType2: "动态密码登录",
loginType1: "账密登陆",
loginType2: "动态密码登陆",
account: "账号",
accountPlaceholder: "请输入证件号/一账通用户名/手机号",
password: "密码",
passwordPlaceholder: "输入登录密码",
passwordPlaceholder: "输入登陆密码",
verifyPlaceholder: "请输入验证码",
agree: "同意",
protocol: "《平安一账通会员服务协议》",
......@@ -200,7 +200,7 @@ module.exports = {
}
},
session: {
sidExpire: "长时间未操作，为了您的账户安全，请登录后再操作",
sidExpire: "长时间未操作，为了您的账户安全，请登陆后再操作",
},
register: {
mobileOptions: [{
......@@ -233,7 +233,7 @@ module.exports = {
e2: "请同意《平安一账通会员服务协议》",
e3: "短信验证码不正确",
e4: "请先获取短信验证码",
e5: "手机号已经被注册，请使用其他手机号注册或直接登录",
e5: "手机号已经被注册，请使用其他手机号注册或直接登陆",
e6: "请输入图片验证码",
e7: "密码长度不能少于8位",
e8: "密码必须同时包含数字、字母、特殊字符",
......@@ -752,7 +752,6 @@ module.exports = {
customService: "联系客服",
},
unauth: {
m1: {
tit: "如需查询保单请投保人",
or: "/",
......@@ -771,10 +770,15 @@ module.exports = {
tips: "如您有平安一账通账户，可帮助我们更好地为您提供服务",
or: "或",
login: "登录",
login: "登陆",
register: "注册",
baseInfoTip: "您的完整信息可帮助我们为您提供完整服务",
infoBtn: "前往完善"
},
auth : {
defaultTip : "您尚未验证客户资料，请填写投保时提供的客户资料",
customService: "联系客服",
notMatch : "您填写的信息与公司留存信息不一致，请核对，如有疑问可",
}
},
pagination: {
......
......@@ -13,13 +13,21 @@ export default {
type: Boolean,
default: false
},
// m1 、m2、m3
tipModel : {
type : String,
default : "m3"
}
},
data() {
return {
key: 'value',
showProfileInfo: false,
showUnAuth: false,
showSuggest: true
showSuggest: true,
tips : {
}
}
},
components: {},
......@@ -41,6 +49,7 @@ export default {
},
methods: {
initData() {
this.tips = this.i18n.customService.unauth[this.tipModel];
if (this.userInfo && this.userInfo.name) {
this.loginAction();
} else {
......
......@@ -4,9 +4,11 @@
<div class="alert">
<img class="icon" src="@/assets/images/common/icon-alert-i.png" alt="">
<div class="txt">
{{$t('customService.unauth.tips')}}
<span class="pointer btn" @click="gotoLoginPage">{{$t('customService.unauth.login')}}</span> {{$t('customService.unauth.or')}}
{{tips.tit}}
<span class="pointer btn" @click="gotoLoginPage">{{$t('customService.unauth.login')}}</span>
{{tips.or}}
<span class="pointer btn" @click="gotoRegisterPage">{{$t('customService.unauth.register')}}</span>
{{tips.tail}}
</div>
<img v-if="model=='suggest'" class="pointer close" src="@/assets/images/common/icon-alert-close.png" alt="" @click="showSuggest = false">
......
......@@ -94,7 +94,6 @@ export default {
// path: curData.path
// })
// }
console.log(curData);
let item = curData;
let path = item && item.path || "";
if (path) {
......@@ -105,8 +104,11 @@ export default {
let value = item && item.value || null;
if (value) {
switch (value) {
case "login":
this.onLoginHandler();
break;
case "logout":
this.loginHandler();
this.logoutHandler();
break;
case "gotoVHIS":
gotoVHIS(this.$i18n.locale);
......@@ -116,7 +118,17 @@ export default {
}
}
},
loginHandler() {
onLoginHandler() {
if (this.$route.name == "login") {
return;
} else if (this.$route.name == "register") {
this.$router.push({ path: "/login" });
} else {
let callback = this.$route.fullPath;
this.$router.push({ path: "/login?callback=" + callback });
}
},
logoutHandler() {
httpPost({
url: api.logout
}).then(() => {
......
......@@ -3,7 +3,7 @@
<div class="drop-list" :class="{'login':type=='login'}" @mouseover="onOverHandler($event)" @mouseout="onOutHandler($event)">
<!-- 登陆下拉样式 -->
<template v-if="type=='login'">
<div class="user">
<div class="user" @click="onLoginHandler()">
<img class="icon-img" src="@/assets/images/home/icon-user.png">
<span>{{dataObj.name}}</span>
</div>
......
......@@ -70,8 +70,11 @@ export default {
let value = item && item.value || null;
if (value) {
switch (value) {
case "login":
this.onLoginHandler();
break;
case "logout":
this.loginHandler();
this.logoutHandler();
break;
case "gotoVHIS":
gotoVHIS(this.$i18n.locale);
......@@ -80,7 +83,17 @@ export default {
}
}
},
loginHandler() {
onLoginHandler() {
if (this.$route.name == "login") {
return;
} else if (this.$route.name == "register") {
this.$router.push({ path: "/login" });
} else {
let callback = this.$route.fullPath;
this.$router.push({ path: "/login?callback=" + callback });
}
},
logoutHandler() {
httpPost({
url: api.logout
}).then(() => {
......
<template>
<div class="container">
<auth @onLogin="userLogin" @onLogout="userLogout" :checkProfile="true" ref="auth"></auth>
<auth @onLogin="userLogin" @onLogout="userLogout" :checkProfile="true" :tipModel="'m1'" ref="auth"></auth>
<div v-if="showForm">
<policy-head-list :multiSelectable="false" @onSelect="handlePolicySelect"></policy-head-list>
......
<template>
<div>
<auth @onLogin="userLogin" @onLogout="userLogout" :checkProfile="true" ref="auth"></auth>
<auth @onLogin="userLogin" @onLogout="userLogout" :checkProfile="true" ref="auth" :tipModel="'m2'"></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>
......
......@@ -4,6 +4,7 @@ import {
httpPost
} from '@/api/fetch-api.js'
import PolicyHeadList from "./policy-head-list.vue";
import Auth from '@components/auth/auth.vue';
export default {
......@@ -14,6 +15,7 @@ export default {
}
},
components: {
PolicyHeadList,
Auth
},
computed: {
......
<template>
<div>
<auth @onLogin="userLogin" @onLogout="userLogout" :checkProfile="true"></auth>
<auth @onLogin="userLogin" @onLogout="userLogout" :checkProfile="true" :tipModel="'m2'"></auth>
<policy-head-list :model="'checkbox'" style="display:none"></policy-head-list>
<div class="container policy-change-guide-container" v-if="showForm">
<div class="table">
<div class="table-header orange">
......
<template>
<div>
<auth @onLogin="userLogin" @onLogout="userLogout" :checkProfile="true" ref="auth"></auth>
<auth @onLogin="userLogin" @onLogout="userLogout" :checkProfile="true" ref="auth" :tipModel="'m2'"></auth>
<modal-upload-card-comp :visible="modalUploadCardVisiable" :show-confirm="true" @close="modalUploadCardVisiable=false" @onSubmit="handleUpdatePolicyWithFile" ></modal-upload-card-comp>
<modal-comp :visible="modalVisiable" :show-confirm="false" :icon="modalIcon" :content="modalContent" :confirm="modalCallback" :overlay="modalCallback"></modal-comp>
<template v-if="showForm">
......
......@@ -6,6 +6,7 @@ import {
import {
mapState
} from 'vuex';
import { resolve } from '_any-promise@1.3.0@any-promise';
export default {
props: {
......@@ -42,29 +43,32 @@ export default {
})
this.initSelected();
} else {
httpPost({ url: api.policyList, sid: true }).then(res => {
if (!res || res.length == 0) {
this.checkCustomer().then(() => {
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;
} 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;
}
})
switch (e.code) {
case "2002":
// 不是客户，没有购买保单
break;
}
});
});
}
},
initSelected() {
......@@ -146,6 +150,28 @@ export default {
}
}
return false;
},
checkCustomer() {
return new Promise(resolve => {
httpPost({ url: api.profile, sid: true }).then(res => {
if (res.isCustomer == 1) {
resolve();
} else {
this.gotoCustomerAuthPage();
}
}).catch(res => {
});
});
},
gotoCustomerAuthPage() {
let c = this.$route.fullPath;
this.$router.push({
name: "customerAuth",
query: {
c: c
}
});
}
},
components: {
......
......@@ -111,7 +111,7 @@
}
.label span {
color: #f05a23;
color: $cOrange;
margin-left: .583333rem;
cursor: pointer;
text-decoration: underline;
......@@ -125,7 +125,7 @@
}
.orange {
background-color: #f05a23 !important;
background-color: $cOrange !important;
div {
color: #ffffff;
......@@ -143,13 +143,13 @@
}
.ac {
color: #f05a23 !important;
color: $cOrange !important;
}
}
.show-more-btn {
width: 100%;
color: #f05a23 !important;
color: $cOrange !important;
text-decoration :underline;
cursor: pointer;
justify-content: center !important;
......@@ -160,7 +160,7 @@
}
.activity {
background-color: #f05a23 !important;
background-color: $cOrange !important;
opacity: .5;
div{
color: #FFFFFF !important;
......@@ -174,6 +174,7 @@
justify-content: center;
.tips {
align-items: center;
display: flex;
.icon {
......@@ -182,7 +183,7 @@
}
.btn {
color: #f05a23;
color: $cOrange;
}
}
}
\ No newline at end of file
......
import api from '@/api/api'
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';
import modalSimpleComp from '@/components/modal-simple-comp/modal-simple-comp.vue';
import DatePicker from '@/components/date-picker/date-picker.vue'
import Vue from 'vue';
import { Loading } from 'vant';
Vue.use(Loading);
export default {
data() {
return {
loading: false,
showForm: false,
key: 'value',
values: {
// 返回的token，串连整个流程，后台安全校验使用
vcodeuuid: "",
token: "",
deviceId: "",
imageBase64: "",
password: "",
passwordRepeat: ""
},
birthDate: "",
information: {
firstName: "",
lastName: "",
sex: "",
birthDate: "",
idNo: "",
idType: ""
},
errorTips: {
e1: "",
e2: "",
e3: "",
e4: "",
e5: "",
// 生日
e6: "",
},
modalSimpleVisiable: false,
modalVisiable: false,
targetPath: "",
modalIcon: "succ",
modalContent: "",
errorModel : 1
}
},
components: {
modalComp,
DatePicker,
Auth,
modalSimpleComp
},
computed: {
...mapState({
userInfo: state => state.userInfo
}),
locale() {
return this.$i18n.locale || 'tc';
},
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;
},
submitBtnDisabled() {
let b1 = !this.information.firstName ? true : false;
let b2 = !this.information.lastName ? true : false;
let b3 = !this.information.sex ? true : false;
let b4 = !this.information.birthDate ? true : false;
let b5 = !this.information.idNo ? true : false;
let b6 = !this.information.idType ? true : false;
return b1 || b2 || b3 || b4 || b5 || b6;
}
},
methods: {
showModal(content, icon) {
icon = !icon || typeof icon === "undefined" ? "succ" : icon;
this.modalIcon = icon;
this.modalContent = content;
if (icon == "succ") {
this.modalVisiable = true;
} else {
this.modalSimpleVisiable = true;
}
},
closeModal() {
this.modalVisiable = false;
this.modalSimpleVisiable = false;
},
initData() {
},
onUpdateHandler() {
if (this.submitBtnDisabled) {
return;
}
let b1 = this.checkCnName();
let b2 = this.checkIdNo();
let b3 = this.checkBirthday();
let b4 = this.checkSex();
let b5 = this.checkIdType();
let b = b1 & b2 & b3 & b4 & b5;
if (b) {
this.information.birthDate = this.birthDate;
this.loadIdentify().then(() => {
if (this.loading) {
return;
}
this.loading = true;
httpPost({
url: api.customerAuth,
data: this.information,
sid: true
}).then(response => {
this.loading = false;
this.backTargetPath();
}).catch(err => {
this.loading = false;
this.showErrorTips();
this.errorModel = 2;
});
});
}
},
loadIdentify() {
return new Promise((resolve, reject) => {
resolve();
});
},
checkCnName() {
if (!this.information.firstName || !this.information.lastName) {
let message = this.i18n.infomationImprove.errorTips.e1;
this.errorTips.e1 = message;
return false;
}
return true;
},
checkSex() {
if (!this.information.sex) {
let message = this.i18n.infomationImprove.errorTips.e2;
this.errorTips.e2 = message;
return false;
}
return true;
},
backTargetPath(){
let path = this.$route.query.c;
if(!path){
path = "/custom/service?q=m3";
}
this.$router.push({
path: path
});
},
checkBirthday() {
if (!this.birthDate) {
let message = this.i18n.infomationImprove.errorTips.e3;
this.errorTips.e3 = message;
return false;
}
return true;
},
checkIdType() {
if (!this.information.idType) {
let message = this.i18n.infomationImprove.errorTips.e4;
this.errorTips.e4 = message;
return false;
}
return true;
},
checkIdNo() {
let message = this.i18n.infomationImprove.errorTips.e5;
if (!this.information.idNo) {
this.errorTips.e5 = message;
return false;
}
if (!this.information.idType) {
return true;
}
message = this.i18n.infomationImprove.errorTips.e6;
let idNo = this.information.idNo + "";
switch (this.information.idType) {
// case "1": // 身份證
// message = idNo.length == 18 ? "" : message;
// break;
case "2": // 護照
message = idNo.length > 3 && idNo.length < 50 ? "" : message;
break;
case "3": // 軍官證或士兵證
message = idNo.length > 6 && idNo.length < 50 ? "" : message;
break;
case "6": // 港澳通行證/回鄉證或台胞證
if (idNo.indexOf("81") == 0 || idNo.indexOf("82") == 0) {
if ((/\\d{15}/.test(idNo) || /\\d{17}/.test(idNo))) {
message = "";
}
}
break;
case "V": // 港澳居民居住證
if (idNo.indexOf("81") == 0 || idNo.indexOf("82") == 0) {
if ((/\\d{15}/.test(idNo) || /\\d{17}/.test(idNo))) {
message = "";
}
}
break;
case "W": //台灣居民居住證
if (idNo.indexOf("83") == 0 || idNo.indexOf("82") == 0) {
if ((/\\d{15}/.test(idNo) || /\\d{17}/.test(idNo))) {
message = "";
}
}
break;
default:
message = "";
break;
}
return true;
},
modalCallback() {
this.modalVisiable = false;
if (this.targetPath) {
this.$router.push({
"path": this.targetPath
});
}
},
showErrorTips(content){
this.errorTips.e1 = "1";
this.errorTips.e2 = "1";
this.errorTips.e3 = "1";
this.errorTips.e4 = "1";
this.errorTips.e5 = "1";
this.errorTips.e6 = "1";
},
userLogout() {
this.$router.push({
path : "/"
});
},
userLogin(data) {
this.showForm = true;
}
},
mounted() {
this.initData();
},
watch: {
'information.cnName': function () {
this.errorTips.e1 = "";
},
'information.sex': function () {
this.errorTips.e2 = "";
},
'birthDate': function () {
this.errorTips.e3 = "";
this.information.birthDate = this.birthDate;
},
'information.idNo': function () {
this.errorTips.e4 = "";
},
'information.idType': function () {
this.errorTips.e5 = "";
}
},
created() { }
}
@import '@/styles/_support';
.content {
position: relative;
min-height: 50rem;
padding-bottom: $marginMedium;
color: $cFontGray;
font-size: $fontSize;
}
.validator {
.icon {
margin-right: .833333rem;
}
}
.contact {
color: $cOrange;
}
.top-space {
height: $marginMedium;
}
.box {
position: relative;
}
.ebg {
position: absolute;
bottom: 0;
width: 100%;
overflow: hidden;
img {
width: 1920px;
margin-left: -360px;
}
}
.step {
@extend .fcc;
margin-bottom: 3rem;
}
.login {
color: $cFontGray;
@extend .bb;
padding: 2.75rem 6.25rem 3.75rem;
border-bottom: solid 0.9rem $cGreen;
margin: auto;
max-width: 51rem;
border-radius: $borderRadius;
@extend .box-shadow;
background-color: #ffffff;
&-tit {
color: $cOrange;
text-align: center;
font-size: 18px;
font-weight: bold;
letter-spacing: .2rem;
text-shadow: 3px 5.2px 9px rgba(236, 100, 41, 0.27);
}
&-tit-space-1 {
height: 2rem;
}
&-nav {
margin: 2.25rem 0 auto;
display: flex;
justify-content: center;
align-items: center;
&-v-line {
width: .2rem;
height: 1.25rem;
background-color: #4c4948;
margin: 0 2.25rem;
}
&-tit {
flex: 1;
font-size: 18px;
font-weight: bold;
color: #4c4948;
}
.active {
color: $cOrange;
text-shadow: 3px 5.2px 9px rgba(236, 100, 41, 0.27);
}
}
&-protocol {
margin: 2.5rem auto 0;
display: flex;
align-items: center;
padding-left: 1rem;
.check {
height: 1rem;
margin-right: .6rem;
}
.protocol {
color: $cOrange;
}
}
&-btn-wrap {
display: flex;
// justify-content: space-between;
justify-content: center;
margin-top: 2rem;
}
&-submit {
@include btc2(17.25rem, 5.25rem, 16px);
letter-spacing: 1.6px;
}
&-func {
margin: 1.5rem auto 0;
display: flex;
justify-content: center;
&-btn {
margin: 0 1.25rem;
text-decoration: underline;
}
}
}
.form {
display: flex;
justify-content: space-between;
flex-wrap: wrap;
.vcode {
background-color: transparent !important;
padding: 0 !important;
overflow: hidden;
img {
width: 100%;
height: 100%;
}
}
input {
font-size: 1.166667rem;
letter-spacing: .1rem;
}
&-item {
position: relative;
margin-bottom: 1.75rem;
padding: 0 $marginSmall;
.label {
color: $cOrange;
display: flex;
align-items: center;
margin-bottom: 1.25rem;
img {
height: 1rem;
margin-right: 1rem;
}
}
.ipt-wrap {
position: relative;
display: flex;
justify-content: space-between;
// input和下拉
.ipt {
flex: 1;
letter-spacing: .1rem;
}
.date {
width: 100%;
}
// 长文本
.textarea {
min-height: 8.75rem;
border-radius: 1rem;
}
.down-arrow {
position: absolute;
top: 2.2rem;
right: 2rem;
}
.verify-btn {
@extend .fcc;
// font-family: Arial;
font-size: 18px;
width: 8.5rem;
border: solid 1px #dcdddd;
background-color: #f2f2f2;
flex: none;
margin-left: 1.5rem;
color: $cFontGray;
}
// 框内按钮
.ipt2 {
display: flex;
justify-content: space-between;
align-items: center;
.ipt-code {
flex: 1;
padding-right: 1.75rem;
}
.veri-btn {
color: $cOrange;
text-decoration: underline;
}
.veri-btn-default {
color: #aaaaaa;
}
}
}
.validator {
color: $cOrange;
margin-top: 0.5rem;
position: absolute;
right: .5rem;
display: flex;
align-items: center;
img {
display: inline-block;
margin-right: 0.4rem;
}
}
}
}
@media (max-width: 1200px) {
.content {
@include content-percent();
min-height: 0;
// padding-bottom: $marginMedium-M;
}
.top-space {
height: 0;
}
.login {
padding: 1rem 1rem 3.5rem;
border-bottom: none;
min-height: 42rem;
&-tit-space-1 {
// height: 5.25rem;
}
&-tit-space-4 {
height: 1rem;
}
&-nav {
margin: 1.75rem auto 1rem;
}
.form {
&-item {
margin: 2rem auto 0;
}
}
&-protocol {
margin: $marginSmall-M auto 0;
}
&-submit {
margin: 0 auto 0;
width: 17.25rem;
height: 3.25rem;
line-height: 3.25rem;
}
}
.box-shadow {
box-shadow: none;
}
.ebg {
display: none;
}
}
.disable {
background-color: #dcdddd !important;
// color: $cFontGray;
color: #4c4948;
}
.box-shadow {
box-shadow: 0 0 1.5rem 0 rgba(255, 87, 0, 0.15);
}
@media (max-width: 1200px) {
.content {
@include content-percent();
min-height: 0;
padding-bottom: 0;
}
.top-space {
height: 0;
}
.box-shadow {
box-shadow: none;
}
.ebg {
display: none;
}
}
<template>
<div>
<modal-simple-comp :visible="modalSimpleVisiable" :show-confirm="false" :icon="modalIcon" :content="modalContent" :confirm="closeModal" :overlay="closeModal" :close="closeModal"></modal-simple-comp>
<modal-comp :visible="modalVisiable" :show-confirm="false" :icon="modalIcon" :content="modalContent" :confirm="modalCallback" :overlay="modalCallback"></modal-comp>
<div class="content">
<div class="ebg">
<img src="@/assets/images/common/login-bg.png">
</div>
<div class="top-space"></div>
<div class="box">
<div class="login">
<auth @onLogin="userLogin" @onLogout="userLogout"></auth>
<template v-if="showForm">
<div class="login-tit">{{$t('infomationImprove.title')}}</div>
<div class="login-tit-space-1"></div>
<div class="gird-g form">
<div class="pure-u-1 pure-u-md-1-2 form-item">
<div class="label">
<img src="@/assets/images/improve-infomation/icon-improve-infomation-user.png"> {{$t('infomationImprove.t1c1')}}
</div>
<div class="ipt-wrap">
<input class="ipt" :class="{err : errorTips.e1.length > 0}" type="text" v-model="information.lastName">
</div>
</div>
<div class="pure-u-1 pure-u-md-1-2 form-item">
<div class="label">
<img src="@/assets/images/improve-infomation/icon-improve-infomation-user.png"> {{$t('infomationImprove.t1c2')}}
</div>
<div class="ipt-wrap">
<input class="ipt" :class="{err : errorTips.e1.length > 0}" type="text" v-model="information.firstName">
</div>
</div>
<div class="pure-u-1 form-item">
<div class="label">
<img src="@/assets/images/improve-infomation/icon-improve-infomation-sex.png"> {{$t('infomationImprove.t2')}}
</div>
<div class="ipt-wrap">
<div class="down-arrow"></div>
<select class="ipt" :class="{err : errorTips.e2.length > 0}" v-model="information.sex">
<template v-if="sexCandidates">
<option v-for="(item,index) in sexCandidates" :key="index" :value="item.value">{{item.name}}</option>
</template>
</select>
</div>
</div>
<div class="pure-u-1 form-item">
<div class="label">
<img src="@/assets/images/improve-infomation/icon-improve-infomation-date.png"> {{$t('infomationImprove.t3')}}
</div>
<div class="ipt-wrap">
<!-- <input class="ipt" type="date" :class="{err : errorTips.e3.length > 0}" v-model="birthDate"> -->
<date-picker :class="{err : errorTips.e6.length > 0}" class="date" v-model="birthDate" :filtModel="['future','today']"></date-picker>
</div>
</div>
<div class="pure-u-1 form-item">
<div class="label">
<img src="@/assets/images/improve-infomation/icon-improve-infomation-card.png"> {{$t('infomationImprove.t4')}}
</div>
<div class="ipt-wrap">
<div class="down-arrow"></div>
<select class="ipt" :class="{err : errorTips.e4.length > 0}" v-model="information.idType">
<template v-if="idTypeCandidates">
<option v-for="(item,index) in idTypeCandidates" :key="index" :value="item.value">{{item.name}}</option>
</template>
</select>
</div>
</div>
<div class="pure-u-1 form-item">
<div class="label">
<img src="@/assets/images/improve-infomation/icon-improve-infomation-card.png"> {{$t('infomationImprove.t5')}}
</div>
<div class="ipt-wrap">
<input class="ipt" type="text" :class="{err : errorTips.e5.length > 0}" v-model="information.idNo">
</div>
</div>
</div>
<div class="flex-center validator" v-if="errorModel == 1">
<div class="icon"><img src="@/assets/images/common/icon-notice.png" alt=""></div>
<div>{{$t('customService.auth.defaultTip')}}</div>
</div>
<div class="flex-center validator" v-else>
<div class="icon"><img src="@/assets/images/common/icon-notice.png" alt=""></div>
<div>{{$t('customService.auth.notMatch')}}</div> &nbsp;
<div class="contact">{{$t('customService.auth.customService')}}</div>
</div>
<div class="login-btn-wrap">
<div @click="onUpdateHandler()" class="login-submit pointer flex-center" :class="{disabled: submitBtnDisabled}">
<van-loading v-if="loading" />
<span>{{$t('infomationImprove.submit')}}</span>
</div>
</div>
</template>
</div>
</div>
</div>
</div>
</template>
<script src="./customer-auth.js"></script>
<style lang="scss" scoped>
@import "./customer-auth.scss";
</style>
......@@ -23,7 +23,7 @@ const routes = [
name: 'index',
component: Index,
meta: {
title: '平安人寿保险官网'
title: '平安人寿香港'
}
},
{
......@@ -31,7 +31,7 @@ const routes = [
name: 'login',
component: () => import('./pages/login/login.vue'),
meta: {
title: '平安人寿保险官网'
title: '平安人寿香港'
}
},
{
......@@ -39,7 +39,7 @@ const routes = [
name: 'register',
component: () => import('./pages/register/register.vue'),
meta: {
title: '平安人寿保险官网'
title: '平安人寿香港'
}
},
{
......@@ -47,7 +47,7 @@ const routes = [
name: 'passwordFind',
component: () => import('./pages/password-find/password-find.vue'),
meta: {
title: '平安人寿保险官网'
title: '平安人寿香港'
}
},
{
......@@ -55,7 +55,7 @@ const routes = [
name: 'passwordReset',
component: () => import('./pages/password-reset/password-reset.vue'),
meta: {
title: '平安人寿保险官网'
title: '平安人寿香港'
}
},
{
......@@ -63,7 +63,15 @@ const routes = [
name: 'infomationImprove',
component: () => import('./pages/infomation-improve/infomation-improve.vue'),
meta: {
title: '平安人寿保险官网'
title: '平安人寿香港'
}
},
{
path: '/customer/auth',
name: 'customerAuth',
component: () => import('./pages/customer-auth/customer-auth.vue'),
meta: {
title: '平安人寿香港'
}
},
{
......@@ -71,7 +79,7 @@ const routes = [
name: 'profile',
component: () => import('./pages/profile/profile.vue'),
meta: {
title: '平安人寿保险官网'
title: '平安人寿香港'
}
},
{
......@@ -79,7 +87,7 @@ const routes = [
name: 'terms',
component: () => import('./pages/terms/terms.vue'),
meta: {
title: '平安人寿保险官网'
title: '平安人寿香港'
}
},
{
......@@ -87,7 +95,7 @@ const routes = [
name: 'privacy',
component: () => import('./pages/privacy/privacy.vue'),
meta: {
title: '平安人寿保险官网'
title: '平安人寿香港'
}
},
{
......@@ -95,7 +103,7 @@ const routes = [
name: 'personalDataCollection',
component: () => import('./pages/personal-data-collection/personal-data-collection.vue'),
meta: {
title: '平安人寿保险官网'
title: '平安人寿香港'
}
},
{
......@@ -103,7 +111,7 @@ const routes = [
name: 'protocol',
component: () => import('./pages/protocol/protocol.vue'),
meta: {
title: '平安人寿保险官网'
title: '平安人寿香港'
}
},
{
......@@ -111,7 +119,7 @@ const routes = [
name: 'newsList',
component: () => import('./pages/news-list/news-list.vue'),
meta: {
title: '平安人寿保险官网'
title: '平安人寿香港'
}
},
{
......@@ -119,7 +127,7 @@ const routes = [
name: 'newsDetail',
component: () => import('./pages/news-detail/news-detail.vue'),
meta: {
title: '平安人寿保险官网'
title: '平安人寿香港'
}
},
......@@ -128,7 +136,7 @@ const routes = [
name: 'product',
component: () => import('./pages/product/product.vue'),
meta: {
title: '平安人寿保险官网'
title: '平安人寿香港'
}
},
{
......@@ -136,7 +144,7 @@ const routes = [
name: 'customService',
component: () => import('./pages/custom-service/custom-service.vue'),
meta: {
title: '平安人寿保险官网'
title: '平安人寿香港'
}
},
{
......@@ -144,7 +152,7 @@ const routes = [
name: 'customProduct',
component: () => import('./pages/custom-product/custom-product.vue'),
meta: {
title: '平安人寿保险官网'
title: '平安人寿香港'
}
},
......@@ -153,7 +161,7 @@ const routes = [
name: 'demo',
component: () => import('./pages/demo/index.vue'),
meta: {
title: '平安人寿保险官网'
title: '平安人寿香港'
}
},
{
......@@ -161,7 +169,7 @@ const routes = [
name: 'about',
component: () => import('./pages/About.vue'),
meta: {
title: '平安人寿保险官网'
title: '平安人寿香港'
}
},
{
......@@ -169,7 +177,7 @@ const routes = [
name: 'empty',
component: () => import('./pages/empty/empty.vue'),
meta: {
title: '平安人寿保险官网'
title: '平安人寿香港'
}
},
// 404页面
......
......@@ -93,6 +93,12 @@
border-color: $cOrange !important;
}
.err {
.ipt{
border-color: $cOrange !important;
}
}
// 轮播
.swiper-pagination-bullet {
......