客户挂宝流程
Showing
23 changed files
with
946 additions
and
84 deletions
... | @@ -402,7 +402,8 @@ textarea { | ... | @@ -402,7 +402,8 @@ textarea { |
402 | 402 | ||
403 | .flex-center { | 403 | .flex-center { |
404 | display: flex; | 404 | display: flex; |
405 | justify-content: center | 405 | justify-content: center; |
406 | align-items: center; | ||
406 | } | 407 | } |
407 | 408 | ||
408 | @media (max-width: 1200px) { | 409 | @media (max-width: 1200px) { | ... | ... |
... | @@ -44,6 +44,8 @@ module.exports = { | ... | @@ -44,6 +44,8 @@ module.exports = { |
44 | // 保存投訴建議 | 44 | // 保存投訴建議 |
45 | saveComplain: "/pingan_hklife_webapi/customService/complain/save", | 45 | saveComplain: "/pingan_hklife_webapi/customService/complain/save", |
46 | 46 | ||
47 | // 身份认证 | ||
48 | customerAuth :"/pingan_hklife_webapi/policy/auth", | ||
47 | // 保单接口 | 49 | // 保单接口 |
48 | policyList : "/pingan_hklife_webapi/policy/list", | 50 | policyList : "/pingan_hklife_webapi/policy/list", |
49 | // 保单接口 | 51 | // 保单接口 | ... | ... |
... | @@ -32,9 +32,9 @@ module.exports = { | ... | @@ -32,9 +32,9 @@ module.exports = { |
32 | value: "" | 32 | value: "" |
33 | }, { | 33 | }, { |
34 | name: "login", | 34 | name: "login", |
35 | path: "/login", | 35 | path: "", |
36 | type: "noAuth", | 36 | type: "noAuth", |
37 | value: "" | 37 | value: "login" |
38 | }, | 38 | }, |
39 | { | 39 | { |
40 | name: "modify password", | 40 | name: "modify password", |
... | @@ -753,12 +753,32 @@ module.exports = { | ... | @@ -753,12 +753,32 @@ module.exports = { |
753 | customService: " contact customer service", | 753 | customService: " contact customer service", |
754 | }, | 754 | }, |
755 | unauth: { | 755 | unauth: { |
756 | m1: { | ||
757 | tit: "If you need to check the policy, please ask the policyholder", | ||
758 | or: "/", | ||
759 | tail: "ping an all in one account account" | ||
760 | }, | ||
761 | m2: { | ||
762 | tit: "If you need to change the policy, please ask the policyholder", | ||
763 | or: "/", | ||
764 | tail: "ping an all in one account account" | ||
765 | }, | ||
766 | m3: { | ||
767 | tit: "If you have a ping an all in one account account, it can help us provide better services for you", | ||
768 | or: "/", | ||
769 | tail: "" | ||
770 | }, | ||
756 | tips: "If you have a ping an all in one account account, it can help us provide better services for you", | 771 | tips: "If you have a ping an all in one account account, it can help us provide better services for you", |
757 | or: "or", | 772 | or: "or", |
758 | login: " login", | 773 | login: " login", |
759 | register: " register", | 774 | register: " register", |
760 | baseInfoTip: "Your complete information can help us to provide you with complete services", | 775 | baseInfoTip: "Your complete information can help us to provide you with complete services", |
761 | infoBtn: " Go to perfection" | 776 | infoBtn: " Go to perfection" |
777 | }, | ||
778 | auth : { | ||
779 | defaultTip : "You have not verified the customer information, please fill in the customer information provided at the time of insurance", | ||
780 | customService: " contact customer service", | ||
781 | notMatch : "The information is not match. Please check it. If you have any questions, you can", | ||
762 | } | 782 | } |
763 | }, | 783 | }, |
764 | pagination: { | 784 | pagination: { | ... | ... |
... | @@ -9,7 +9,7 @@ module.exports = { | ... | @@ -9,7 +9,7 @@ module.exports = { |
9 | en: 'English' | 9 | en: 'English' |
10 | }, | 10 | }, |
11 | glbalTips: { | 11 | glbalTips: { |
12 | sessionLost: "為了更好的體驗,需要您登錄後再進行此操作" | 12 | sessionLost: "為了更好的體驗,需要您登入後再進行此操作" |
13 | }, | 13 | }, |
14 | form: { | 14 | form: { |
15 | datePicker: { | 15 | datePicker: { |
... | @@ -32,9 +32,9 @@ module.exports = { | ... | @@ -32,9 +32,9 @@ module.exports = { |
32 | value: "" | 32 | value: "" |
33 | }, { | 33 | }, { |
34 | name: "登入", | 34 | name: "登入", |
35 | path: "/login", | 35 | path: "", |
36 | type: "noAuth", | 36 | type: "noAuth", |
37 | value: "" | 37 | value: "login" |
38 | }, | 38 | }, |
39 | { | 39 | { |
40 | name: "修改密碼", | 40 | name: "修改密碼", |
... | @@ -170,12 +170,12 @@ module.exports = { | ... | @@ -170,12 +170,12 @@ module.exports = { |
170 | }, | 170 | }, |
171 | login: { | 171 | login: { |
172 | title: "平安一賬通", | 172 | title: "平安一賬通", |
173 | loginType1: "賬密登錄", | 173 | loginType1: "賬密登入", |
174 | loginType2: "動態密碼登录", | 174 | loginType2: "動態密碼登入", |
175 | account: "賬號", | 175 | account: "賬號", |
176 | accountPlaceholder: "請輸入證件號/一賬通用戶名/手機號", | 176 | accountPlaceholder: "請輸入證件號/一賬通用戶名/手機號", |
177 | password: "密碼", | 177 | password: "密碼", |
178 | passwordPlaceholder: "輸入登錄密碼", | 178 | passwordPlaceholder: "輸入登入密碼", |
179 | verifyPlaceholder: "請輸入驗證碼", | 179 | verifyPlaceholder: "請輸入驗證碼", |
180 | agree: "同意", | 180 | agree: "同意", |
181 | protocol: "《平安一賬通會員服務協議》", | 181 | protocol: "《平安一賬通會員服務協議》", |
... | @@ -231,7 +231,7 @@ module.exports = { | ... | @@ -231,7 +231,7 @@ module.exports = { |
231 | e2: "請同意《平安一賬通會員服務協議》", | 231 | e2: "請同意《平安一賬通會員服務協議》", |
232 | e3: "短信驗證碼不正確", | 232 | e3: "短信驗證碼不正確", |
233 | e4: "請先獲取短信驗證碼", | 233 | e4: "請先獲取短信驗證碼", |
234 | e5: "手機號已經被註冊,請使用其他手機號註冊或直接登錄", | 234 | e5: "手機號已經被註冊,請使用其他手機號註冊或直接登入", |
235 | e6: "請輸入圖片驗證碼", | 235 | e6: "請輸入圖片驗證碼", |
236 | e7: "密碼長度不能少於8位", | 236 | e7: "密碼長度不能少於8位", |
237 | e8: "密碼中必須包含數字、字符以及特殊號碼", | 237 | e8: "密碼中必須包含數字、字符以及特殊號碼", |
... | @@ -242,7 +242,7 @@ module.exports = { | ... | @@ -242,7 +242,7 @@ module.exports = { |
242 | } | 242 | } |
243 | }, | 243 | }, |
244 | session: { | 244 | session: { |
245 | sidExpire: "長時間未操作,為了您賬戶的安全,請登錄後再操作", | 245 | sidExpire: "長時間未操作,為了您賬戶的安全,請登入後再操作", |
246 | }, | 246 | }, |
247 | passwordCheck: { | 247 | passwordCheck: { |
248 | error1: "密碼長度不少於8位", | 248 | error1: "密碼長度不少於8位", |
... | @@ -752,12 +752,32 @@ module.exports = { | ... | @@ -752,12 +752,32 @@ module.exports = { |
752 | customService: "聯繫客服", | 752 | customService: "聯繫客服", |
753 | }, | 753 | }, |
754 | unauth: { | 754 | unauth: { |
755 | m1: { | ||
756 | tit: "如需查詢保單請投保人", | ||
757 | or: "/", | ||
758 | tail: "平安一賬通賬戶" | ||
759 | }, | ||
760 | m2: { | ||
761 | tit: "如需變更保單請投保人", | ||
762 | or: "/", | ||
763 | tail: "平安一賬通賬戶" | ||
764 | }, | ||
765 | m3: { | ||
766 | tit: "如您有平安一賬通賬戶,可幫助我們更好地為您提供服務", | ||
767 | or: "/", | ||
768 | tail: "" | ||
769 | }, | ||
755 | tips: "如您有平安一賬通賬戶,可幫助我們更好地為您提供服務", | 770 | tips: "如您有平安一賬通賬戶,可幫助我們更好地為您提供服務", |
756 | or: "或", | 771 | or: "或", |
757 | login: "登錄", | 772 | login: "登入", |
758 | register: "註冊", | 773 | register: "註冊", |
759 | baseInfoTip: "您的完整信息可幫助我們為你提供完整服務", | 774 | baseInfoTip: "您的完整信息可幫助我們為你提供完整服務", |
760 | infoBtn: "前往完善" | 775 | infoBtn: "前往完善" |
776 | }, | ||
777 | auth : { | ||
778 | defaultTip : "您尚未驗證客戶資料,請填寫投保時提供的客戶資料", | ||
779 | customService: " 聯繫客服", | ||
780 | notMatch : "您填寫的信息與公司留存信息不一致,請核對,如有疑問可", | ||
761 | } | 781 | } |
762 | }, | 782 | }, |
763 | pagination: { | 783 | pagination: { | ... | ... |
1 | module.exports = { | 1 | module.exports = { |
2 | message: { | 2 | message: { |
3 | login: '登录', | 3 | login: '登陆', |
4 | Username: '用户名', | 4 | Username: '用户名', |
5 | Password: '密码', | 5 | Password: '密码', |
6 | Captcha: '验证码', | 6 | Captcha: '验证码', |
... | @@ -9,7 +9,7 @@ module.exports = { | ... | @@ -9,7 +9,7 @@ module.exports = { |
9 | en: '英文' | 9 | en: '英文' |
10 | }, | 10 | }, |
11 | glbalTips: { | 11 | glbalTips: { |
12 | sessionLost: "为了更好的体验,需要您登录后再进行此操作" | 12 | sessionLost: "为了更好的体验,需要您登陆后再进行此操作" |
13 | }, | 13 | }, |
14 | form: { | 14 | form: { |
15 | datePicker: { | 15 | datePicker: { |
... | @@ -32,9 +32,9 @@ module.exports = { | ... | @@ -32,9 +32,9 @@ module.exports = { |
32 | value: "" | 32 | value: "" |
33 | }, { | 33 | }, { |
34 | name: "登陆", | 34 | name: "登陆", |
35 | path: "/login", | 35 | path: "", |
36 | type: "noAuth", | 36 | type: "noAuth", |
37 | value: "" | 37 | value: "login" |
38 | }, | 38 | }, |
39 | { | 39 | { |
40 | name: "修改密码", | 40 | name: "修改密码", |
... | @@ -169,12 +169,12 @@ module.exports = { | ... | @@ -169,12 +169,12 @@ module.exports = { |
169 | }, | 169 | }, |
170 | login: { | 170 | login: { |
171 | title: "平安一账通", | 171 | title: "平安一账通", |
172 | loginType1: "账密登录", | 172 | loginType1: "账密登陆", |
173 | loginType2: "动态密码登录", | 173 | loginType2: "动态密码登陆", |
174 | account: "账号", | 174 | account: "账号", |
175 | accountPlaceholder: "请输入证件号/一账通用户名/手机号", | 175 | accountPlaceholder: "请输入证件号/一账通用户名/手机号", |
176 | password: "密码", | 176 | password: "密码", |
177 | passwordPlaceholder: "输入登录密码", | 177 | passwordPlaceholder: "输入登陆密码", |
178 | verifyPlaceholder: "请输入验证码", | 178 | verifyPlaceholder: "请输入验证码", |
179 | agree: "同意", | 179 | agree: "同意", |
180 | protocol: "《平安一账通会员服务协议》", | 180 | protocol: "《平安一账通会员服务协议》", |
... | @@ -200,7 +200,7 @@ module.exports = { | ... | @@ -200,7 +200,7 @@ module.exports = { |
200 | } | 200 | } |
201 | }, | 201 | }, |
202 | session: { | 202 | session: { |
203 | sidExpire: "长时间未操作,为了您的账户安全,请登录后再操作", | 203 | sidExpire: "长时间未操作,为了您的账户安全,请登陆后再操作", |
204 | }, | 204 | }, |
205 | register: { | 205 | register: { |
206 | mobileOptions: [{ | 206 | mobileOptions: [{ |
... | @@ -233,7 +233,7 @@ module.exports = { | ... | @@ -233,7 +233,7 @@ module.exports = { |
233 | e2: "请同意《平安一账通会员服务协议》", | 233 | e2: "请同意《平安一账通会员服务协议》", |
234 | e3: "短信验证码不正确", | 234 | e3: "短信验证码不正确", |
235 | e4: "请先获取短信验证码", | 235 | e4: "请先获取短信验证码", |
236 | e5: "手机号已经被注册,请使用其他手机号注册或直接登录", | 236 | e5: "手机号已经被注册,请使用其他手机号注册或直接登陆", |
237 | e6: "请输入图片验证码", | 237 | e6: "请输入图片验证码", |
238 | e7: "密码长度不能少于8位", | 238 | e7: "密码长度不能少于8位", |
239 | e8: "密码必须同时包含数字、字母、特殊字符", | 239 | e8: "密码必须同时包含数字、字母、特殊字符", |
... | @@ -752,7 +752,6 @@ module.exports = { | ... | @@ -752,7 +752,6 @@ module.exports = { |
752 | customService: "联系客服", | 752 | customService: "联系客服", |
753 | }, | 753 | }, |
754 | unauth: { | 754 | unauth: { |
755 | |||
756 | m1: { | 755 | m1: { |
757 | tit: "如需查询保单请投保人", | 756 | tit: "如需查询保单请投保人", |
758 | or: "/", | 757 | or: "/", |
... | @@ -771,10 +770,15 @@ module.exports = { | ... | @@ -771,10 +770,15 @@ module.exports = { |
771 | 770 | ||
772 | tips: "如您有平安一账通账户,可帮助我们更好地为您提供服务", | 771 | tips: "如您有平安一账通账户,可帮助我们更好地为您提供服务", |
773 | or: "或", | 772 | or: "或", |
774 | login: "登录", | 773 | login: "登陆", |
775 | register: "注册", | 774 | register: "注册", |
776 | baseInfoTip: "您的完整信息可帮助我们为您提供完整服务", | 775 | baseInfoTip: "您的完整信息可帮助我们为您提供完整服务", |
777 | infoBtn: "前往完善" | 776 | infoBtn: "前往完善" |
777 | }, | ||
778 | auth : { | ||
779 | defaultTip : "您尚未验证客户资料,请填写投保时提供的客户资料", | ||
780 | customService: "联系客服", | ||
781 | notMatch : "您填写的信息与公司留存信息不一致,请核对,如有疑问可", | ||
778 | } | 782 | } |
779 | }, | 783 | }, |
780 | pagination: { | 784 | pagination: { | ... | ... |
... | @@ -13,13 +13,21 @@ export default { | ... | @@ -13,13 +13,21 @@ export default { |
13 | type: Boolean, | 13 | type: Boolean, |
14 | default: false | 14 | default: false |
15 | }, | 15 | }, |
16 | // m1 、m2、m3 | ||
17 | tipModel : { | ||
18 | type : String, | ||
19 | default : "m3" | ||
20 | } | ||
16 | }, | 21 | }, |
17 | data() { | 22 | data() { |
18 | return { | 23 | return { |
19 | key: 'value', | 24 | key: 'value', |
20 | showProfileInfo: false, | 25 | showProfileInfo: false, |
21 | showUnAuth: false, | 26 | showUnAuth: false, |
22 | showSuggest: true | 27 | showSuggest: true, |
28 | tips : { | ||
29 | |||
30 | } | ||
23 | } | 31 | } |
24 | }, | 32 | }, |
25 | components: {}, | 33 | components: {}, |
... | @@ -41,6 +49,7 @@ export default { | ... | @@ -41,6 +49,7 @@ export default { |
41 | }, | 49 | }, |
42 | methods: { | 50 | methods: { |
43 | initData() { | 51 | initData() { |
52 | this.tips = this.i18n.customService.unauth[this.tipModel]; | ||
44 | if (this.userInfo && this.userInfo.name) { | 53 | if (this.userInfo && this.userInfo.name) { |
45 | this.loginAction(); | 54 | this.loginAction(); |
46 | } else { | 55 | } else { | ... | ... |
... | @@ -4,9 +4,11 @@ | ... | @@ -4,9 +4,11 @@ |
4 | <div class="alert"> | 4 | <div class="alert"> |
5 | <img class="icon" src="@/assets/images/common/icon-alert-i.png" alt=""> | 5 | <img class="icon" src="@/assets/images/common/icon-alert-i.png" alt=""> |
6 | <div class="txt"> | 6 | <div class="txt"> |
7 | {{$t('customService.unauth.tips')}} | 7 | {{tips.tit}} |
8 | <span class="pointer btn" @click="gotoLoginPage">{{$t('customService.unauth.login')}}</span> {{$t('customService.unauth.or')}} | 8 | <span class="pointer btn" @click="gotoLoginPage">{{$t('customService.unauth.login')}}</span> |
9 | {{tips.or}} | ||
9 | <span class="pointer btn" @click="gotoRegisterPage">{{$t('customService.unauth.register')}}</span> | 10 | <span class="pointer btn" @click="gotoRegisterPage">{{$t('customService.unauth.register')}}</span> |
11 | {{tips.tail}} | ||
10 | </div> | 12 | </div> |
11 | 13 | ||
12 | <img v-if="model=='suggest'" class="pointer close" src="@/assets/images/common/icon-alert-close.png" alt="" @click="showSuggest = false"> | 14 | <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 { | ... | @@ -94,7 +94,6 @@ export default { |
94 | // path: curData.path | 94 | // path: curData.path |
95 | // }) | 95 | // }) |
96 | // } | 96 | // } |
97 | console.log(curData); | ||
98 | let item = curData; | 97 | let item = curData; |
99 | let path = item && item.path || ""; | 98 | let path = item && item.path || ""; |
100 | if (path) { | 99 | if (path) { |
... | @@ -105,8 +104,11 @@ export default { | ... | @@ -105,8 +104,11 @@ export default { |
105 | let value = item && item.value || null; | 104 | let value = item && item.value || null; |
106 | if (value) { | 105 | if (value) { |
107 | switch (value) { | 106 | switch (value) { |
107 | case "login": | ||
108 | this.onLoginHandler(); | ||
109 | break; | ||
108 | case "logout": | 110 | case "logout": |
109 | this.loginHandler(); | 111 | this.logoutHandler(); |
110 | break; | 112 | break; |
111 | case "gotoVHIS": | 113 | case "gotoVHIS": |
112 | gotoVHIS(this.$i18n.locale); | 114 | gotoVHIS(this.$i18n.locale); |
... | @@ -116,7 +118,17 @@ export default { | ... | @@ -116,7 +118,17 @@ export default { |
116 | } | 118 | } |
117 | } | 119 | } |
118 | }, | 120 | }, |
119 | loginHandler() { | 121 | onLoginHandler() { |
122 | if (this.$route.name == "login") { | ||
123 | return; | ||
124 | } else if (this.$route.name == "register") { | ||
125 | this.$router.push({ path: "/login" }); | ||
126 | } else { | ||
127 | let callback = this.$route.fullPath; | ||
128 | this.$router.push({ path: "/login?callback=" + callback }); | ||
129 | } | ||
130 | }, | ||
131 | logoutHandler() { | ||
120 | httpPost({ | 132 | httpPost({ |
121 | url: api.logout | 133 | url: api.logout |
122 | }).then(() => { | 134 | }).then(() => { | ... | ... |
... | @@ -3,7 +3,7 @@ | ... | @@ -3,7 +3,7 @@ |
3 | <div class="drop-list" :class="{'login':type=='login'}" @mouseover="onOverHandler($event)" @mouseout="onOutHandler($event)"> | 3 | <div class="drop-list" :class="{'login':type=='login'}" @mouseover="onOverHandler($event)" @mouseout="onOutHandler($event)"> |
4 | <!-- 登陆下拉样式 --> | 4 | <!-- 登陆下拉样式 --> |
5 | <template v-if="type=='login'"> | 5 | <template v-if="type=='login'"> |
6 | <div class="user"> | 6 | <div class="user" @click="onLoginHandler()"> |
7 | <img class="icon-img" src="@/assets/images/home/icon-user.png"> | 7 | <img class="icon-img" src="@/assets/images/home/icon-user.png"> |
8 | <span>{{dataObj.name}}</span> | 8 | <span>{{dataObj.name}}</span> |
9 | </div> | 9 | </div> | ... | ... |
... | @@ -70,8 +70,11 @@ export default { | ... | @@ -70,8 +70,11 @@ export default { |
70 | let value = item && item.value || null; | 70 | let value = item && item.value || null; |
71 | if (value) { | 71 | if (value) { |
72 | switch (value) { | 72 | switch (value) { |
73 | case "login": | ||
74 | this.onLoginHandler(); | ||
75 | break; | ||
73 | case "logout": | 76 | case "logout": |
74 | this.loginHandler(); | 77 | this.logoutHandler(); |
75 | break; | 78 | break; |
76 | case "gotoVHIS": | 79 | case "gotoVHIS": |
77 | gotoVHIS(this.$i18n.locale); | 80 | gotoVHIS(this.$i18n.locale); |
... | @@ -80,7 +83,17 @@ export default { | ... | @@ -80,7 +83,17 @@ export default { |
80 | } | 83 | } |
81 | } | 84 | } |
82 | }, | 85 | }, |
83 | loginHandler() { | 86 | onLoginHandler() { |
87 | if (this.$route.name == "login") { | ||
88 | return; | ||
89 | } else if (this.$route.name == "register") { | ||
90 | this.$router.push({ path: "/login" }); | ||
91 | } else { | ||
92 | let callback = this.$route.fullPath; | ||
93 | this.$router.push({ path: "/login?callback=" + callback }); | ||
94 | } | ||
95 | }, | ||
96 | logoutHandler() { | ||
84 | httpPost({ | 97 | httpPost({ |
85 | url: api.logout | 98 | url: api.logout |
86 | }).then(() => { | 99 | }).then(() => { | ... | ... |
1 | <template> | 1 | <template> |
2 | <div class="container"> | 2 | <div class="container"> |
3 | <auth @onLogin="userLogin" @onLogout="userLogout" :checkProfile="true" ref="auth"></auth> | 3 | <auth @onLogin="userLogin" @onLogout="userLogout" :checkProfile="true" :tipModel="'m1'" ref="auth"></auth> |
4 | <div v-if="showForm"> | 4 | <div v-if="showForm"> |
5 | <policy-head-list :multiSelectable="false" @onSelect="handlePolicySelect"></policy-head-list> | 5 | <policy-head-list :multiSelectable="false" @onSelect="handlePolicySelect"></policy-head-list> |
6 | 6 | ... | ... |
1 | 1 | ||
2 | <template> | 2 | <template> |
3 | <div> | 3 | <div> |
4 | <auth @onLogin="userLogin" @onLogout="userLogout" :checkProfile="true" ref="auth"></auth> | 4 | <auth @onLogin="userLogin" @onLogout="userLogout" :checkProfile="true" ref="auth" :tipModel="'m2'"></auth> |
5 | <modal-comp :visible="modalVisiable" :show-confirm="false" :icon="modalIcon" :content="modalContent" :confirm="modalCallback" :overlay="modalCallback"></modal-comp> | 5 | <modal-comp :visible="modalVisiable" :show-confirm="false" :icon="modalIcon" :content="modalContent" :confirm="modalCallback" :overlay="modalCallback"></modal-comp> |
6 | <template v-if="showForm"> | 6 | <template v-if="showForm"> |
7 | <policy-head-list :multiSelectable="true" @onSelect="handlePolicySelect"></policy-head-list> | 7 | <policy-head-list :multiSelectable="true" @onSelect="handlePolicySelect"></policy-head-list> | ... | ... |
... | @@ -4,6 +4,7 @@ import { | ... | @@ -4,6 +4,7 @@ import { |
4 | httpPost | 4 | httpPost |
5 | } from '@/api/fetch-api.js' | 5 | } from '@/api/fetch-api.js' |
6 | 6 | ||
7 | import PolicyHeadList from "./policy-head-list.vue"; | ||
7 | import Auth from '@components/auth/auth.vue'; | 8 | import Auth from '@components/auth/auth.vue'; |
8 | 9 | ||
9 | export default { | 10 | export default { |
... | @@ -14,6 +15,7 @@ export default { | ... | @@ -14,6 +15,7 @@ export default { |
14 | } | 15 | } |
15 | }, | 16 | }, |
16 | components: { | 17 | components: { |
18 | PolicyHeadList, | ||
17 | Auth | 19 | Auth |
18 | }, | 20 | }, |
19 | computed: { | 21 | computed: { | ... | ... |
1 | 1 | ||
2 | <template> | 2 | <template> |
3 | <div> | 3 | <div> |
4 | <auth @onLogin="userLogin" @onLogout="userLogout" :checkProfile="true"></auth> | 4 | <auth @onLogin="userLogin" @onLogout="userLogout" :checkProfile="true" :tipModel="'m2'"></auth> |
5 | <policy-head-list :model="'checkbox'" style="display:none"></policy-head-list> | ||
5 | <div class="container policy-change-guide-container" v-if="showForm"> | 6 | <div class="container policy-change-guide-container" v-if="showForm"> |
6 | <div class="table"> | 7 | <div class="table"> |
7 | <div class="table-header orange"> | 8 | <div class="table-header orange"> | ... | ... |
1 | 1 | ||
2 | <template> | 2 | <template> |
3 | <div> | 3 | <div> |
4 | <auth @onLogin="userLogin" @onLogout="userLogout" :checkProfile="true" ref="auth"></auth> | 4 | <auth @onLogin="userLogin" @onLogout="userLogout" :checkProfile="true" ref="auth" :tipModel="'m2'"></auth> |
5 | <modal-upload-card-comp :visible="modalUploadCardVisiable" :show-confirm="true" @close="modalUploadCardVisiable=false" @onSubmit="handleUpdatePolicyWithFile" ></modal-upload-card-comp> | 5 | <modal-upload-card-comp :visible="modalUploadCardVisiable" :show-confirm="true" @close="modalUploadCardVisiable=false" @onSubmit="handleUpdatePolicyWithFile" ></modal-upload-card-comp> |
6 | <modal-comp :visible="modalVisiable" :show-confirm="false" :icon="modalIcon" :content="modalContent" :confirm="modalCallback" :overlay="modalCallback"></modal-comp> | 6 | <modal-comp :visible="modalVisiable" :show-confirm="false" :icon="modalIcon" :content="modalContent" :confirm="modalCallback" :overlay="modalCallback"></modal-comp> |
7 | <template v-if="showForm"> | 7 | <template v-if="showForm"> | ... | ... |
... | @@ -6,6 +6,7 @@ import { | ... | @@ -6,6 +6,7 @@ import { |
6 | import { | 6 | import { |
7 | mapState | 7 | mapState |
8 | } from 'vuex'; | 8 | } from 'vuex'; |
9 | import { resolve } from '_any-promise@1.3.0@any-promise'; | ||
9 | 10 | ||
10 | export default { | 11 | export default { |
11 | props: { | 12 | props: { |
... | @@ -42,29 +43,32 @@ export default { | ... | @@ -42,29 +43,32 @@ export default { |
42 | }) | 43 | }) |
43 | this.initSelected(); | 44 | this.initSelected(); |
44 | } else { | 45 | } else { |
45 | httpPost({ url: api.policyList, sid: true }).then(res => { | 46 | this.checkCustomer().then(() => { |
46 | if (!res || res.length == 0) { | 47 | httpPost({ url: api.policyList, sid: true }).then(res => { |
48 | if (!res || res.length == 0) { | ||
49 | this.myPolicyList = null; | ||
50 | } else { | ||
51 | res.forEach(element => { | ||
52 | element.activity = false; | ||
53 | // let len = element.policyCode.length; | ||
54 | // element.policyCodeStr = element.policyCode && len > 5 ? | ||
55 | // element.policyCode.substring(0, 2) + "**********" | ||
56 | // + element.policyCode.substring(len - 4, len) : element.policyCode; | ||
57 | }); | ||
58 | this.$store.commit("CACHE_POLICY_LIST", res); | ||
59 | this.myPolicyList = res; | ||
60 | } | ||
61 | this.initSelected(); | ||
62 | }).catch(e => { | ||
47 | this.myPolicyList = null; | 63 | this.myPolicyList = null; |
48 | } else { | 64 | switch (e.code) { |
49 | res.forEach(element => { | 65 | case "2002": |
50 | element.activity = false; | 66 | // 不是客户,没有购买保单 |
51 | // let len = element.policyCode.length; | 67 | break; |
52 | // element.policyCodeStr = element.policyCode && len > 5 ? | 68 | } |
53 | // element.policyCode.substring(0, 2) + "**********" | 69 | }); |
54 | // + element.policyCode.substring(len - 4, len) : element.policyCode; | 70 | }); |
55 | }); | 71 | |
56 | this.$store.commit("CACHE_POLICY_LIST", res); | ||
57 | this.myPolicyList = res; | ||
58 | } | ||
59 | this.initSelected(); | ||
60 | }).catch(e => { | ||
61 | this.myPolicyList = null; | ||
62 | switch (e.code) { | ||
63 | case "2002": | ||
64 | // 不是客户,没有购买保单 | ||
65 | break; | ||
66 | } | ||
67 | }) | ||
68 | } | 72 | } |
69 | }, | 73 | }, |
70 | initSelected() { | 74 | initSelected() { |
... | @@ -146,6 +150,28 @@ export default { | ... | @@ -146,6 +150,28 @@ export default { |
146 | } | 150 | } |
147 | } | 151 | } |
148 | return false; | 152 | return false; |
153 | }, | ||
154 | checkCustomer() { | ||
155 | return new Promise(resolve => { | ||
156 | httpPost({ url: api.profile, sid: true }).then(res => { | ||
157 | if (res.isCustomer == 1) { | ||
158 | resolve(); | ||
159 | } else { | ||
160 | this.gotoCustomerAuthPage(); | ||
161 | } | ||
162 | }).catch(res => { | ||
163 | |||
164 | }); | ||
165 | }); | ||
166 | }, | ||
167 | gotoCustomerAuthPage() { | ||
168 | let c = this.$route.fullPath; | ||
169 | this.$router.push({ | ||
170 | name: "customerAuth", | ||
171 | query: { | ||
172 | c: c | ||
173 | } | ||
174 | }); | ||
149 | } | 175 | } |
150 | }, | 176 | }, |
151 | components: { | 177 | components: { | ... | ... |
... | @@ -111,7 +111,7 @@ | ... | @@ -111,7 +111,7 @@ |
111 | } | 111 | } |
112 | 112 | ||
113 | .label span { | 113 | .label span { |
114 | color: #f05a23; | 114 | color: $cOrange; |
115 | margin-left: .583333rem; | 115 | margin-left: .583333rem; |
116 | cursor: pointer; | 116 | cursor: pointer; |
117 | text-decoration: underline; | 117 | text-decoration: underline; |
... | @@ -125,7 +125,7 @@ | ... | @@ -125,7 +125,7 @@ |
125 | } | 125 | } |
126 | 126 | ||
127 | .orange { | 127 | .orange { |
128 | background-color: #f05a23 !important; | 128 | background-color: $cOrange !important; |
129 | 129 | ||
130 | div { | 130 | div { |
131 | color: #ffffff; | 131 | color: #ffffff; |
... | @@ -143,13 +143,13 @@ | ... | @@ -143,13 +143,13 @@ |
143 | } | 143 | } |
144 | 144 | ||
145 | .ac { | 145 | .ac { |
146 | color: #f05a23 !important; | 146 | color: $cOrange !important; |
147 | } | 147 | } |
148 | } | 148 | } |
149 | 149 | ||
150 | .show-more-btn { | 150 | .show-more-btn { |
151 | width: 100%; | 151 | width: 100%; |
152 | color: #f05a23 !important; | 152 | color: $cOrange !important; |
153 | text-decoration :underline; | 153 | text-decoration :underline; |
154 | cursor: pointer; | 154 | cursor: pointer; |
155 | justify-content: center !important; | 155 | justify-content: center !important; |
... | @@ -160,7 +160,7 @@ | ... | @@ -160,7 +160,7 @@ |
160 | } | 160 | } |
161 | 161 | ||
162 | .activity { | 162 | .activity { |
163 | background-color: #f05a23 !important; | 163 | background-color: $cOrange !important; |
164 | opacity: .5; | 164 | opacity: .5; |
165 | div{ | 165 | div{ |
166 | color: #FFFFFF !important; | 166 | color: #FFFFFF !important; |
... | @@ -174,6 +174,7 @@ | ... | @@ -174,6 +174,7 @@ |
174 | justify-content: center; | 174 | justify-content: center; |
175 | 175 | ||
176 | .tips { | 176 | .tips { |
177 | align-items: center; | ||
177 | display: flex; | 178 | display: flex; |
178 | 179 | ||
179 | .icon { | 180 | .icon { |
... | @@ -182,7 +183,7 @@ | ... | @@ -182,7 +183,7 @@ |
182 | } | 183 | } |
183 | 184 | ||
184 | .btn { | 185 | .btn { |
185 | color: #f05a23; | 186 | color: $cOrange; |
186 | } | 187 | } |
187 | } | 188 | } |
188 | } | 189 | } |
... | \ No newline at end of file | ... | \ No newline at end of file | ... | ... |
src/pages/customer-auth/customer-auth.js
0 → 100644
1 | import api from '@/api/api' | ||
2 | import { | ||
3 | httpGet, | ||
4 | httpPost | ||
5 | } from '@/api/fetch-api.js' | ||
6 | import { | ||
7 | mapState | ||
8 | } from 'vuex'; | ||
9 | |||
10 | |||
11 | import Auth from '@components/auth/auth.vue'; | ||
12 | import modalComp from '@/components/modal-comp/modal-comp.vue'; | ||
13 | import modalSimpleComp from '@/components/modal-simple-comp/modal-simple-comp.vue'; | ||
14 | import DatePicker from '@/components/date-picker/date-picker.vue' | ||
15 | import Vue from 'vue'; | ||
16 | import { Loading } from 'vant'; | ||
17 | Vue.use(Loading); | ||
18 | |||
19 | |||
20 | export default { | ||
21 | data() { | ||
22 | return { | ||
23 | loading: false, | ||
24 | showForm: false, | ||
25 | key: 'value', | ||
26 | values: { | ||
27 | // 返回的token,串连整个流程,后台安全校验使用 | ||
28 | vcodeuuid: "", | ||
29 | token: "", | ||
30 | deviceId: "", | ||
31 | imageBase64: "", | ||
32 | password: "", | ||
33 | passwordRepeat: "" | ||
34 | }, | ||
35 | birthDate: "", | ||
36 | information: { | ||
37 | firstName: "", | ||
38 | lastName: "", | ||
39 | sex: "", | ||
40 | birthDate: "", | ||
41 | idNo: "", | ||
42 | idType: "" | ||
43 | }, | ||
44 | errorTips: { | ||
45 | e1: "", | ||
46 | e2: "", | ||
47 | e3: "", | ||
48 | e4: "", | ||
49 | e5: "", | ||
50 | // 生日 | ||
51 | e6: "", | ||
52 | }, | ||
53 | modalSimpleVisiable: false, | ||
54 | modalVisiable: false, | ||
55 | targetPath: "", | ||
56 | modalIcon: "succ", | ||
57 | modalContent: "", | ||
58 | errorModel : 1 | ||
59 | } | ||
60 | }, | ||
61 | components: { | ||
62 | modalComp, | ||
63 | DatePicker, | ||
64 | Auth, | ||
65 | modalSimpleComp | ||
66 | }, | ||
67 | computed: { | ||
68 | ...mapState({ | ||
69 | userInfo: state => state.userInfo | ||
70 | }), | ||
71 | locale() { | ||
72 | return this.$i18n.locale || 'tc'; | ||
73 | }, | ||
74 | i18n() { | ||
75 | return this.$i18n.messages && this.$i18n.locale ? this.$i18n.messages[this.$i18n.locale] : {}; | ||
76 | }, | ||
77 | sexCandidates() { | ||
78 | let i18n = this.$i18n.messages[this.$i18n.locale]; | ||
79 | return i18n.infomationImprove.candidates.sex; | ||
80 | }, | ||
81 | idTypeCandidates() { | ||
82 | let i18n = this.$i18n.messages[this.$i18n.locale]; | ||
83 | return i18n.infomationImprove.candidates.idType; | ||
84 | }, | ||
85 | submitBtnDisabled() { | ||
86 | let b1 = !this.information.firstName ? true : false; | ||
87 | let b2 = !this.information.lastName ? true : false; | ||
88 | let b3 = !this.information.sex ? true : false; | ||
89 | let b4 = !this.information.birthDate ? true : false; | ||
90 | let b5 = !this.information.idNo ? true : false; | ||
91 | let b6 = !this.information.idType ? true : false; | ||
92 | return b1 || b2 || b3 || b4 || b5 || b6; | ||
93 | } | ||
94 | }, | ||
95 | methods: { | ||
96 | showModal(content, icon) { | ||
97 | icon = !icon || typeof icon === "undefined" ? "succ" : icon; | ||
98 | this.modalIcon = icon; | ||
99 | this.modalContent = content; | ||
100 | if (icon == "succ") { | ||
101 | this.modalVisiable = true; | ||
102 | } else { | ||
103 | this.modalSimpleVisiable = true; | ||
104 | } | ||
105 | }, | ||
106 | closeModal() { | ||
107 | this.modalVisiable = false; | ||
108 | this.modalSimpleVisiable = false; | ||
109 | }, | ||
110 | initData() { | ||
111 | }, | ||
112 | onUpdateHandler() { | ||
113 | if (this.submitBtnDisabled) { | ||
114 | return; | ||
115 | } | ||
116 | let b1 = this.checkCnName(); | ||
117 | let b2 = this.checkIdNo(); | ||
118 | let b3 = this.checkBirthday(); | ||
119 | let b4 = this.checkSex(); | ||
120 | let b5 = this.checkIdType(); | ||
121 | let b = b1 & b2 & b3 & b4 & b5; | ||
122 | |||
123 | if (b) { | ||
124 | this.information.birthDate = this.birthDate; | ||
125 | this.loadIdentify().then(() => { | ||
126 | if (this.loading) { | ||
127 | return; | ||
128 | } | ||
129 | this.loading = true; | ||
130 | httpPost({ | ||
131 | url: api.customerAuth, | ||
132 | data: this.information, | ||
133 | sid: true | ||
134 | }).then(response => { | ||
135 | this.loading = false; | ||
136 | this.backTargetPath(); | ||
137 | }).catch(err => { | ||
138 | this.loading = false; | ||
139 | this.showErrorTips(); | ||
140 | this.errorModel = 2; | ||
141 | }); | ||
142 | }); | ||
143 | } | ||
144 | }, | ||
145 | loadIdentify() { | ||
146 | return new Promise((resolve, reject) => { | ||
147 | resolve(); | ||
148 | }); | ||
149 | }, | ||
150 | checkCnName() { | ||
151 | if (!this.information.firstName || !this.information.lastName) { | ||
152 | let message = this.i18n.infomationImprove.errorTips.e1; | ||
153 | this.errorTips.e1 = message; | ||
154 | return false; | ||
155 | } | ||
156 | return true; | ||
157 | }, | ||
158 | checkSex() { | ||
159 | if (!this.information.sex) { | ||
160 | let message = this.i18n.infomationImprove.errorTips.e2; | ||
161 | this.errorTips.e2 = message; | ||
162 | return false; | ||
163 | } | ||
164 | return true; | ||
165 | }, | ||
166 | backTargetPath(){ | ||
167 | let path = this.$route.query.c; | ||
168 | if(!path){ | ||
169 | path = "/custom/service?q=m3"; | ||
170 | } | ||
171 | this.$router.push({ | ||
172 | path: path | ||
173 | }); | ||
174 | }, | ||
175 | checkBirthday() { | ||
176 | if (!this.birthDate) { | ||
177 | let message = this.i18n.infomationImprove.errorTips.e3; | ||
178 | this.errorTips.e3 = message; | ||
179 | return false; | ||
180 | } | ||
181 | return true; | ||
182 | }, | ||
183 | checkIdType() { | ||
184 | if (!this.information.idType) { | ||
185 | let message = this.i18n.infomationImprove.errorTips.e4; | ||
186 | this.errorTips.e4 = message; | ||
187 | return false; | ||
188 | } | ||
189 | return true; | ||
190 | }, | ||
191 | checkIdNo() { | ||
192 | let message = this.i18n.infomationImprove.errorTips.e5; | ||
193 | if (!this.information.idNo) { | ||
194 | this.errorTips.e5 = message; | ||
195 | return false; | ||
196 | } | ||
197 | if (!this.information.idType) { | ||
198 | return true; | ||
199 | } | ||
200 | message = this.i18n.infomationImprove.errorTips.e6; | ||
201 | let idNo = this.information.idNo + ""; | ||
202 | switch (this.information.idType) { | ||
203 | // case "1": // 身份證 | ||
204 | // message = idNo.length == 18 ? "" : message; | ||
205 | // break; | ||
206 | case "2": // 護照 | ||
207 | message = idNo.length > 3 && idNo.length < 50 ? "" : message; | ||
208 | break; | ||
209 | case "3": // 軍官證或士兵證 | ||
210 | message = idNo.length > 6 && idNo.length < 50 ? "" : message; | ||
211 | break; | ||
212 | case "6": // 港澳通行證/回鄉證或台胞證 | ||
213 | if (idNo.indexOf("81") == 0 || idNo.indexOf("82") == 0) { | ||
214 | if ((/\\d{15}/.test(idNo) || /\\d{17}/.test(idNo))) { | ||
215 | message = ""; | ||
216 | } | ||
217 | } | ||
218 | break; | ||
219 | case "V": // 港澳居民居住證 | ||
220 | if (idNo.indexOf("81") == 0 || idNo.indexOf("82") == 0) { | ||
221 | if ((/\\d{15}/.test(idNo) || /\\d{17}/.test(idNo))) { | ||
222 | message = ""; | ||
223 | } | ||
224 | } | ||
225 | break; | ||
226 | case "W": //台灣居民居住證 | ||
227 | if (idNo.indexOf("83") == 0 || idNo.indexOf("82") == 0) { | ||
228 | if ((/\\d{15}/.test(idNo) || /\\d{17}/.test(idNo))) { | ||
229 | message = ""; | ||
230 | } | ||
231 | } | ||
232 | break; | ||
233 | default: | ||
234 | message = ""; | ||
235 | break; | ||
236 | } | ||
237 | return true; | ||
238 | }, | ||
239 | modalCallback() { | ||
240 | this.modalVisiable = false; | ||
241 | if (this.targetPath) { | ||
242 | this.$router.push({ | ||
243 | "path": this.targetPath | ||
244 | }); | ||
245 | } | ||
246 | }, | ||
247 | showErrorTips(content){ | ||
248 | this.errorTips.e1 = "1"; | ||
249 | this.errorTips.e2 = "1"; | ||
250 | this.errorTips.e3 = "1"; | ||
251 | this.errorTips.e4 = "1"; | ||
252 | this.errorTips.e5 = "1"; | ||
253 | this.errorTips.e6 = "1"; | ||
254 | }, | ||
255 | userLogout() { | ||
256 | this.$router.push({ | ||
257 | path : "/" | ||
258 | }); | ||
259 | }, | ||
260 | userLogin(data) { | ||
261 | this.showForm = true; | ||
262 | } | ||
263 | }, | ||
264 | mounted() { | ||
265 | this.initData(); | ||
266 | }, | ||
267 | watch: { | ||
268 | 'information.cnName': function () { | ||
269 | this.errorTips.e1 = ""; | ||
270 | }, | ||
271 | 'information.sex': function () { | ||
272 | this.errorTips.e2 = ""; | ||
273 | }, | ||
274 | 'birthDate': function () { | ||
275 | this.errorTips.e3 = ""; | ||
276 | this.information.birthDate = this.birthDate; | ||
277 | }, | ||
278 | 'information.idNo': function () { | ||
279 | this.errorTips.e4 = ""; | ||
280 | }, | ||
281 | 'information.idType': function () { | ||
282 | this.errorTips.e5 = ""; | ||
283 | } | ||
284 | }, | ||
285 | created() { } | ||
286 | } |
src/pages/customer-auth/customer-auth.scss
0 → 100644
1 | @import '@/styles/_support'; | ||
2 | |||
3 | .content { | ||
4 | position: relative; | ||
5 | min-height: 50rem; | ||
6 | padding-bottom: $marginMedium; | ||
7 | color: $cFontGray; | ||
8 | font-size: $fontSize; | ||
9 | } | ||
10 | |||
11 | .validator { | ||
12 | .icon { | ||
13 | margin-right: .833333rem; | ||
14 | } | ||
15 | } | ||
16 | |||
17 | .contact { | ||
18 | color: $cOrange; | ||
19 | } | ||
20 | |||
21 | .top-space { | ||
22 | height: $marginMedium; | ||
23 | } | ||
24 | |||
25 | .box { | ||
26 | position: relative; | ||
27 | } | ||
28 | |||
29 | .ebg { | ||
30 | position: absolute; | ||
31 | bottom: 0; | ||
32 | width: 100%; | ||
33 | overflow: hidden; | ||
34 | |||
35 | img { | ||
36 | width: 1920px; | ||
37 | margin-left: -360px; | ||
38 | } | ||
39 | } | ||
40 | |||
41 | .step { | ||
42 | @extend .fcc; | ||
43 | margin-bottom: 3rem; | ||
44 | } | ||
45 | |||
46 | .login { | ||
47 | color: $cFontGray; | ||
48 | @extend .bb; | ||
49 | padding: 2.75rem 6.25rem 3.75rem; | ||
50 | border-bottom: solid 0.9rem $cGreen; | ||
51 | |||
52 | margin: auto; | ||
53 | max-width: 51rem; | ||
54 | border-radius: $borderRadius; | ||
55 | @extend .box-shadow; | ||
56 | background-color: #ffffff; | ||
57 | |||
58 | &-tit { | ||
59 | color: $cOrange; | ||
60 | text-align: center; | ||
61 | font-size: 18px; | ||
62 | font-weight: bold; | ||
63 | letter-spacing: .2rem; | ||
64 | text-shadow: 3px 5.2px 9px rgba(236, 100, 41, 0.27); | ||
65 | } | ||
66 | |||
67 | &-tit-space-1 { | ||
68 | height: 2rem; | ||
69 | } | ||
70 | |||
71 | &-nav { | ||
72 | margin: 2.25rem 0 auto; | ||
73 | display: flex; | ||
74 | justify-content: center; | ||
75 | align-items: center; | ||
76 | |||
77 | &-v-line { | ||
78 | width: .2rem; | ||
79 | height: 1.25rem; | ||
80 | background-color: #4c4948; | ||
81 | margin: 0 2.25rem; | ||
82 | } | ||
83 | |||
84 | &-tit { | ||
85 | flex: 1; | ||
86 | font-size: 18px; | ||
87 | font-weight: bold; | ||
88 | color: #4c4948; | ||
89 | } | ||
90 | |||
91 | .active { | ||
92 | color: $cOrange; | ||
93 | text-shadow: 3px 5.2px 9px rgba(236, 100, 41, 0.27); | ||
94 | } | ||
95 | } | ||
96 | |||
97 | &-protocol { | ||
98 | margin: 2.5rem auto 0; | ||
99 | display: flex; | ||
100 | align-items: center; | ||
101 | padding-left: 1rem; | ||
102 | |||
103 | .check { | ||
104 | height: 1rem; | ||
105 | margin-right: .6rem; | ||
106 | } | ||
107 | |||
108 | .protocol { | ||
109 | color: $cOrange; | ||
110 | } | ||
111 | } | ||
112 | |||
113 | &-btn-wrap { | ||
114 | display: flex; | ||
115 | // justify-content: space-between; | ||
116 | justify-content: center; | ||
117 | margin-top: 2rem; | ||
118 | } | ||
119 | |||
120 | &-submit { | ||
121 | @include btc2(17.25rem, 5.25rem, 16px); | ||
122 | letter-spacing: 1.6px; | ||
123 | } | ||
124 | |||
125 | &-func { | ||
126 | margin: 1.5rem auto 0; | ||
127 | display: flex; | ||
128 | justify-content: center; | ||
129 | |||
130 | &-btn { | ||
131 | margin: 0 1.25rem; | ||
132 | text-decoration: underline; | ||
133 | } | ||
134 | } | ||
135 | } | ||
136 | |||
137 | .form { | ||
138 | display: flex; | ||
139 | justify-content: space-between; | ||
140 | flex-wrap: wrap; | ||
141 | |||
142 | .vcode { | ||
143 | background-color: transparent !important; | ||
144 | padding: 0 !important; | ||
145 | overflow: hidden; | ||
146 | |||
147 | img { | ||
148 | width: 100%; | ||
149 | height: 100%; | ||
150 | } | ||
151 | } | ||
152 | |||
153 | input { | ||
154 | font-size: 1.166667rem; | ||
155 | letter-spacing: .1rem; | ||
156 | } | ||
157 | |||
158 | &-item { | ||
159 | position: relative; | ||
160 | margin-bottom: 1.75rem; | ||
161 | padding: 0 $marginSmall; | ||
162 | |||
163 | .label { | ||
164 | color: $cOrange; | ||
165 | display: flex; | ||
166 | align-items: center; | ||
167 | margin-bottom: 1.25rem; | ||
168 | |||
169 | img { | ||
170 | height: 1rem; | ||
171 | margin-right: 1rem; | ||
172 | } | ||
173 | } | ||
174 | |||
175 | .ipt-wrap { | ||
176 | position: relative; | ||
177 | display: flex; | ||
178 | justify-content: space-between; | ||
179 | |||
180 | // input和下拉 | ||
181 | .ipt { | ||
182 | flex: 1; | ||
183 | letter-spacing: .1rem; | ||
184 | } | ||
185 | |||
186 | .date { | ||
187 | width: 100%; | ||
188 | } | ||
189 | |||
190 | // 长文本 | ||
191 | .textarea { | ||
192 | min-height: 8.75rem; | ||
193 | border-radius: 1rem; | ||
194 | } | ||
195 | |||
196 | .down-arrow { | ||
197 | position: absolute; | ||
198 | top: 2.2rem; | ||
199 | right: 2rem; | ||
200 | } | ||
201 | |||
202 | |||
203 | .verify-btn { | ||
204 | @extend .fcc; | ||
205 | // font-family: Arial; | ||
206 | font-size: 18px; | ||
207 | width: 8.5rem; | ||
208 | border: solid 1px #dcdddd; | ||
209 | background-color: #f2f2f2; | ||
210 | flex: none; | ||
211 | margin-left: 1.5rem; | ||
212 | color: $cFontGray; | ||
213 | } | ||
214 | |||
215 | |||
216 | // 框内按钮 | ||
217 | .ipt2 { | ||
218 | display: flex; | ||
219 | justify-content: space-between; | ||
220 | align-items: center; | ||
221 | |||
222 | .ipt-code { | ||
223 | flex: 1; | ||
224 | padding-right: 1.75rem; | ||
225 | } | ||
226 | |||
227 | .veri-btn { | ||
228 | color: $cOrange; | ||
229 | text-decoration: underline; | ||
230 | } | ||
231 | |||
232 | .veri-btn-default { | ||
233 | color: #aaaaaa; | ||
234 | } | ||
235 | } | ||
236 | } | ||
237 | |||
238 | .validator { | ||
239 | color: $cOrange; | ||
240 | margin-top: 0.5rem; | ||
241 | position: absolute; | ||
242 | right: .5rem; | ||
243 | display: flex; | ||
244 | align-items: center; | ||
245 | |||
246 | img { | ||
247 | display: inline-block; | ||
248 | margin-right: 0.4rem; | ||
249 | } | ||
250 | } | ||
251 | } | ||
252 | } | ||
253 | |||
254 | @media (max-width: 1200px) { | ||
255 | .content { | ||
256 | @include content-percent(); | ||
257 | min-height: 0; | ||
258 | // padding-bottom: $marginMedium-M; | ||
259 | } | ||
260 | |||
261 | .top-space { | ||
262 | height: 0; | ||
263 | } | ||
264 | |||
265 | .login { | ||
266 | padding: 1rem 1rem 3.5rem; | ||
267 | border-bottom: none; | ||
268 | |||
269 | min-height: 42rem; | ||
270 | |||
271 | &-tit-space-1 { | ||
272 | // height: 5.25rem; | ||
273 | } | ||
274 | |||
275 | &-tit-space-4 { | ||
276 | height: 1rem; | ||
277 | } | ||
278 | |||
279 | |||
280 | &-nav { | ||
281 | margin: 1.75rem auto 1rem; | ||
282 | } | ||
283 | |||
284 | .form { | ||
285 | &-item { | ||
286 | margin: 2rem auto 0; | ||
287 | } | ||
288 | } | ||
289 | |||
290 | &-protocol { | ||
291 | margin: $marginSmall-M auto 0; | ||
292 | } | ||
293 | |||
294 | &-submit { | ||
295 | margin: 0 auto 0; | ||
296 | width: 17.25rem; | ||
297 | height: 3.25rem; | ||
298 | line-height: 3.25rem; | ||
299 | } | ||
300 | } | ||
301 | |||
302 | .box-shadow { | ||
303 | box-shadow: none; | ||
304 | } | ||
305 | |||
306 | .ebg { | ||
307 | display: none; | ||
308 | } | ||
309 | } | ||
310 | |||
311 | .disable { | ||
312 | background-color: #dcdddd !important; | ||
313 | // color: $cFontGray; | ||
314 | color: #4c4948; | ||
315 | } | ||
316 | |||
317 | .box-shadow { | ||
318 | box-shadow: 0 0 1.5rem 0 rgba(255, 87, 0, 0.15); | ||
319 | } | ||
320 | |||
321 | @media (max-width: 1200px) { | ||
322 | .content { | ||
323 | @include content-percent(); | ||
324 | min-height: 0; | ||
325 | padding-bottom: 0; | ||
326 | } | ||
327 | |||
328 | .top-space { | ||
329 | height: 0; | ||
330 | } | ||
331 | |||
332 | .box-shadow { | ||
333 | box-shadow: none; | ||
334 | } | ||
335 | |||
336 | .ebg { | ||
337 | display: none; | ||
338 | } | ||
339 | } |
src/pages/customer-auth/customer-auth.vue
0 → 100644
1 | |||
2 | |||
3 | <template> | ||
4 | <div> | ||
5 | <modal-simple-comp :visible="modalSimpleVisiable" :show-confirm="false" :icon="modalIcon" :content="modalContent" :confirm="closeModal" :overlay="closeModal" :close="closeModal"></modal-simple-comp> | ||
6 | <modal-comp :visible="modalVisiable" :show-confirm="false" :icon="modalIcon" :content="modalContent" :confirm="modalCallback" :overlay="modalCallback"></modal-comp> | ||
7 | <div class="content"> | ||
8 | <div class="ebg"> | ||
9 | <img src="@/assets/images/common/login-bg.png"> | ||
10 | </div> | ||
11 | <div class="top-space"></div> | ||
12 | <div class="box"> | ||
13 | <div class="login"> | ||
14 | <auth @onLogin="userLogin" @onLogout="userLogout"></auth> | ||
15 | <template v-if="showForm"> | ||
16 | <div class="login-tit">{{$t('infomationImprove.title')}}</div> | ||
17 | <div class="login-tit-space-1"></div> | ||
18 | <div class="gird-g form"> | ||
19 | <div class="pure-u-1 pure-u-md-1-2 form-item"> | ||
20 | <div class="label"> | ||
21 | <img src="@/assets/images/improve-infomation/icon-improve-infomation-user.png"> {{$t('infomationImprove.t1c1')}} | ||
22 | </div> | ||
23 | <div class="ipt-wrap"> | ||
24 | <input class="ipt" :class="{err : errorTips.e1.length > 0}" type="text" v-model="information.lastName"> | ||
25 | </div> | ||
26 | </div> | ||
27 | |||
28 | <div class="pure-u-1 pure-u-md-1-2 form-item"> | ||
29 | <div class="label"> | ||
30 | <img src="@/assets/images/improve-infomation/icon-improve-infomation-user.png"> {{$t('infomationImprove.t1c2')}} | ||
31 | </div> | ||
32 | <div class="ipt-wrap"> | ||
33 | <input class="ipt" :class="{err : errorTips.e1.length > 0}" type="text" v-model="information.firstName"> | ||
34 | </div> | ||
35 | </div> | ||
36 | |||
37 | <div class="pure-u-1 form-item"> | ||
38 | <div class="label"> | ||
39 | <img src="@/assets/images/improve-infomation/icon-improve-infomation-sex.png"> {{$t('infomationImprove.t2')}} | ||
40 | </div> | ||
41 | <div class="ipt-wrap"> | ||
42 | <div class="down-arrow"></div> | ||
43 | <select class="ipt" :class="{err : errorTips.e2.length > 0}" v-model="information.sex"> | ||
44 | <template v-if="sexCandidates"> | ||
45 | <option v-for="(item,index) in sexCandidates" :key="index" :value="item.value">{{item.name}}</option> | ||
46 | </template> | ||
47 | </select> | ||
48 | </div> | ||
49 | </div> | ||
50 | |||
51 | <div class="pure-u-1 form-item"> | ||
52 | <div class="label"> | ||
53 | <img src="@/assets/images/improve-infomation/icon-improve-infomation-date.png"> {{$t('infomationImprove.t3')}} | ||
54 | </div> | ||
55 | <div class="ipt-wrap"> | ||
56 | <!-- <input class="ipt" type="date" :class="{err : errorTips.e3.length > 0}" v-model="birthDate"> --> | ||
57 | <date-picker :class="{err : errorTips.e6.length > 0}" class="date" v-model="birthDate" :filtModel="['future','today']"></date-picker> | ||
58 | </div> | ||
59 | </div> | ||
60 | |||
61 | <div class="pure-u-1 form-item"> | ||
62 | <div class="label"> | ||
63 | <img src="@/assets/images/improve-infomation/icon-improve-infomation-card.png"> {{$t('infomationImprove.t4')}} | ||
64 | </div> | ||
65 | <div class="ipt-wrap"> | ||
66 | <div class="down-arrow"></div> | ||
67 | <select class="ipt" :class="{err : errorTips.e4.length > 0}" v-model="information.idType"> | ||
68 | <template v-if="idTypeCandidates"> | ||
69 | <option v-for="(item,index) in idTypeCandidates" :key="index" :value="item.value">{{item.name}}</option> | ||
70 | </template> | ||
71 | </select> | ||
72 | </div> | ||
73 | </div> | ||
74 | |||
75 | <div class="pure-u-1 form-item"> | ||
76 | <div class="label"> | ||
77 | <img src="@/assets/images/improve-infomation/icon-improve-infomation-card.png"> {{$t('infomationImprove.t5')}} | ||
78 | </div> | ||
79 | <div class="ipt-wrap"> | ||
80 | <input class="ipt" type="text" :class="{err : errorTips.e5.length > 0}" v-model="information.idNo"> | ||
81 | </div> | ||
82 | </div> | ||
83 | </div> | ||
84 | <div class="flex-center validator" v-if="errorModel == 1"> | ||
85 | <div class="icon"><img src="@/assets/images/common/icon-notice.png" alt=""></div> | ||
86 | <div>{{$t('customService.auth.defaultTip')}}</div> | ||
87 | </div> | ||
88 | <div class="flex-center validator" v-else> | ||
89 | <div class="icon"><img src="@/assets/images/common/icon-notice.png" alt=""></div> | ||
90 | <div>{{$t('customService.auth.notMatch')}}</div> | ||
91 | <div class="contact">{{$t('customService.auth.customService')}}</div> | ||
92 | </div> | ||
93 | <div class="login-btn-wrap"> | ||
94 | <div @click="onUpdateHandler()" class="login-submit pointer flex-center" :class="{disabled: submitBtnDisabled}"> | ||
95 | <van-loading v-if="loading" /> | ||
96 | <span>{{$t('infomationImprove.submit')}}</span> | ||
97 | </div> | ||
98 | </div> | ||
99 | </template> | ||
100 | </div> | ||
101 | |||
102 | </div> | ||
103 | </div> | ||
104 | </div> | ||
105 | </template> | ||
106 | |||
107 | <script src="./customer-auth.js"></script> | ||
108 | <style lang="scss" scoped> | ||
109 | @import "./customer-auth.scss"; | ||
110 | </style> |
... | @@ -23,7 +23,7 @@ const routes = [ | ... | @@ -23,7 +23,7 @@ const routes = [ |
23 | name: 'index', | 23 | name: 'index', |
24 | component: Index, | 24 | component: Index, |
25 | meta: { | 25 | meta: { |
26 | title: '平安人寿保险官网' | 26 | title: '平安人寿香港' |
27 | } | 27 | } |
28 | }, | 28 | }, |
29 | { | 29 | { |
... | @@ -31,7 +31,7 @@ const routes = [ | ... | @@ -31,7 +31,7 @@ const routes = [ |
31 | name: 'login', | 31 | name: 'login', |
32 | component: () => import('./pages/login/login.vue'), | 32 | component: () => import('./pages/login/login.vue'), |
33 | meta: { | 33 | meta: { |
34 | title: '平安人寿保险官网' | 34 | title: '平安人寿香港' |
35 | } | 35 | } |
36 | }, | 36 | }, |
37 | { | 37 | { |
... | @@ -39,7 +39,7 @@ const routes = [ | ... | @@ -39,7 +39,7 @@ const routes = [ |
39 | name: 'register', | 39 | name: 'register', |
40 | component: () => import('./pages/register/register.vue'), | 40 | component: () => import('./pages/register/register.vue'), |
41 | meta: { | 41 | meta: { |
42 | title: '平安人寿保险官网' | 42 | title: '平安人寿香港' |
43 | } | 43 | } |
44 | }, | 44 | }, |
45 | { | 45 | { |
... | @@ -47,7 +47,7 @@ const routes = [ | ... | @@ -47,7 +47,7 @@ const routes = [ |
47 | name: 'passwordFind', | 47 | name: 'passwordFind', |
48 | component: () => import('./pages/password-find/password-find.vue'), | 48 | component: () => import('./pages/password-find/password-find.vue'), |
49 | meta: { | 49 | meta: { |
50 | title: '平安人寿保险官网' | 50 | title: '平安人寿香港' |
51 | } | 51 | } |
52 | }, | 52 | }, |
53 | { | 53 | { |
... | @@ -55,7 +55,7 @@ const routes = [ | ... | @@ -55,7 +55,7 @@ const routes = [ |
55 | name: 'passwordReset', | 55 | name: 'passwordReset', |
56 | component: () => import('./pages/password-reset/password-reset.vue'), | 56 | component: () => import('./pages/password-reset/password-reset.vue'), |
57 | meta: { | 57 | meta: { |
58 | title: '平安人寿保险官网' | 58 | title: '平安人寿香港' |
59 | } | 59 | } |
60 | }, | 60 | }, |
61 | { | 61 | { |
... | @@ -63,7 +63,15 @@ const routes = [ | ... | @@ -63,7 +63,15 @@ const routes = [ |
63 | name: 'infomationImprove', | 63 | name: 'infomationImprove', |
64 | component: () => import('./pages/infomation-improve/infomation-improve.vue'), | 64 | component: () => import('./pages/infomation-improve/infomation-improve.vue'), |
65 | meta: { | 65 | meta: { |
66 | title: '平安人寿保险官网' | 66 | title: '平安人寿香港' |
67 | } | ||
68 | }, | ||
69 | { | ||
70 | path: '/customer/auth', | ||
71 | name: 'customerAuth', | ||
72 | component: () => import('./pages/customer-auth/customer-auth.vue'), | ||
73 | meta: { | ||
74 | title: '平安人寿香港' | ||
67 | } | 75 | } |
68 | }, | 76 | }, |
69 | { | 77 | { |
... | @@ -71,7 +79,7 @@ const routes = [ | ... | @@ -71,7 +79,7 @@ const routes = [ |
71 | name: 'profile', | 79 | name: 'profile', |
72 | component: () => import('./pages/profile/profile.vue'), | 80 | component: () => import('./pages/profile/profile.vue'), |
73 | meta: { | 81 | meta: { |
74 | title: '平安人寿保险官网' | 82 | title: '平安人寿香港' |
75 | } | 83 | } |
76 | }, | 84 | }, |
77 | { | 85 | { |
... | @@ -79,7 +87,7 @@ const routes = [ | ... | @@ -79,7 +87,7 @@ const routes = [ |
79 | name: 'terms', | 87 | name: 'terms', |
80 | component: () => import('./pages/terms/terms.vue'), | 88 | component: () => import('./pages/terms/terms.vue'), |
81 | meta: { | 89 | meta: { |
82 | title: '平安人寿保险官网' | 90 | title: '平安人寿香港' |
83 | } | 91 | } |
84 | }, | 92 | }, |
85 | { | 93 | { |
... | @@ -87,7 +95,7 @@ const routes = [ | ... | @@ -87,7 +95,7 @@ const routes = [ |
87 | name: 'privacy', | 95 | name: 'privacy', |
88 | component: () => import('./pages/privacy/privacy.vue'), | 96 | component: () => import('./pages/privacy/privacy.vue'), |
89 | meta: { | 97 | meta: { |
90 | title: '平安人寿保险官网' | 98 | title: '平安人寿香港' |
91 | } | 99 | } |
92 | }, | 100 | }, |
93 | { | 101 | { |
... | @@ -95,7 +103,7 @@ const routes = [ | ... | @@ -95,7 +103,7 @@ const routes = [ |
95 | name: 'personalDataCollection', | 103 | name: 'personalDataCollection', |
96 | component: () => import('./pages/personal-data-collection/personal-data-collection.vue'), | 104 | component: () => import('./pages/personal-data-collection/personal-data-collection.vue'), |
97 | meta: { | 105 | meta: { |
98 | title: '平安人寿保险官网' | 106 | title: '平安人寿香港' |
99 | } | 107 | } |
100 | }, | 108 | }, |
101 | { | 109 | { |
... | @@ -103,7 +111,7 @@ const routes = [ | ... | @@ -103,7 +111,7 @@ const routes = [ |
103 | name: 'protocol', | 111 | name: 'protocol', |
104 | component: () => import('./pages/protocol/protocol.vue'), | 112 | component: () => import('./pages/protocol/protocol.vue'), |
105 | meta: { | 113 | meta: { |
106 | title: '平安人寿保险官网' | 114 | title: '平安人寿香港' |
107 | } | 115 | } |
108 | }, | 116 | }, |
109 | { | 117 | { |
... | @@ -111,7 +119,7 @@ const routes = [ | ... | @@ -111,7 +119,7 @@ const routes = [ |
111 | name: 'newsList', | 119 | name: 'newsList', |
112 | component: () => import('./pages/news-list/news-list.vue'), | 120 | component: () => import('./pages/news-list/news-list.vue'), |
113 | meta: { | 121 | meta: { |
114 | title: '平安人寿保险官网' | 122 | title: '平安人寿香港' |
115 | } | 123 | } |
116 | }, | 124 | }, |
117 | { | 125 | { |
... | @@ -119,7 +127,7 @@ const routes = [ | ... | @@ -119,7 +127,7 @@ const routes = [ |
119 | name: 'newsDetail', | 127 | name: 'newsDetail', |
120 | component: () => import('./pages/news-detail/news-detail.vue'), | 128 | component: () => import('./pages/news-detail/news-detail.vue'), |
121 | meta: { | 129 | meta: { |
122 | title: '平安人寿保险官网' | 130 | title: '平安人寿香港' |
123 | } | 131 | } |
124 | }, | 132 | }, |
125 | 133 | ||
... | @@ -128,7 +136,7 @@ const routes = [ | ... | @@ -128,7 +136,7 @@ const routes = [ |
128 | name: 'product', | 136 | name: 'product', |
129 | component: () => import('./pages/product/product.vue'), | 137 | component: () => import('./pages/product/product.vue'), |
130 | meta: { | 138 | meta: { |
131 | title: '平安人寿保险官网' | 139 | title: '平安人寿香港' |
132 | } | 140 | } |
133 | }, | 141 | }, |
134 | { | 142 | { |
... | @@ -136,7 +144,7 @@ const routes = [ | ... | @@ -136,7 +144,7 @@ const routes = [ |
136 | name: 'customService', | 144 | name: 'customService', |
137 | component: () => import('./pages/custom-service/custom-service.vue'), | 145 | component: () => import('./pages/custom-service/custom-service.vue'), |
138 | meta: { | 146 | meta: { |
139 | title: '平安人寿保险官网' | 147 | title: '平安人寿香港' |
140 | } | 148 | } |
141 | }, | 149 | }, |
142 | { | 150 | { |
... | @@ -144,7 +152,7 @@ const routes = [ | ... | @@ -144,7 +152,7 @@ const routes = [ |
144 | name: 'customProduct', | 152 | name: 'customProduct', |
145 | component: () => import('./pages/custom-product/custom-product.vue'), | 153 | component: () => import('./pages/custom-product/custom-product.vue'), |
146 | meta: { | 154 | meta: { |
147 | title: '平安人寿保险官网' | 155 | title: '平安人寿香港' |
148 | } | 156 | } |
149 | }, | 157 | }, |
150 | 158 | ||
... | @@ -153,7 +161,7 @@ const routes = [ | ... | @@ -153,7 +161,7 @@ const routes = [ |
153 | name: 'demo', | 161 | name: 'demo', |
154 | component: () => import('./pages/demo/index.vue'), | 162 | component: () => import('./pages/demo/index.vue'), |
155 | meta: { | 163 | meta: { |
156 | title: '平安人寿保险官网' | 164 | title: '平安人寿香港' |
157 | } | 165 | } |
158 | }, | 166 | }, |
159 | { | 167 | { |
... | @@ -161,7 +169,7 @@ const routes = [ | ... | @@ -161,7 +169,7 @@ const routes = [ |
161 | name: 'about', | 169 | name: 'about', |
162 | component: () => import('./pages/About.vue'), | 170 | component: () => import('./pages/About.vue'), |
163 | meta: { | 171 | meta: { |
164 | title: '平安人寿保险官网' | 172 | title: '平安人寿香港' |
165 | } | 173 | } |
166 | }, | 174 | }, |
167 | { | 175 | { |
... | @@ -169,7 +177,7 @@ const routes = [ | ... | @@ -169,7 +177,7 @@ const routes = [ |
169 | name: 'empty', | 177 | name: 'empty', |
170 | component: () => import('./pages/empty/empty.vue'), | 178 | component: () => import('./pages/empty/empty.vue'), |
171 | meta: { | 179 | meta: { |
172 | title: '平安人寿保险官网' | 180 | title: '平安人寿香港' |
173 | } | 181 | } |
174 | }, | 182 | }, |
175 | // 404页面 | 183 | // 404页面 | ... | ... |
... | @@ -93,6 +93,12 @@ | ... | @@ -93,6 +93,12 @@ |
93 | border-color: $cOrange !important; | 93 | border-color: $cOrange !important; |
94 | } | 94 | } |
95 | 95 | ||
96 | .err { | ||
97 | .ipt{ | ||
98 | border-color: $cOrange !important; | ||
99 | } | ||
100 | } | ||
101 | |||
96 | 102 | ||
97 | // 轮播 | 103 | // 轮播 |
98 | .swiper-pagination-bullet { | 104 | .swiper-pagination-bullet { | ... | ... |
-
Please register or sign in to post a comment