部分交互修改
Showing
15 changed files
with
408 additions
and
253 deletions
1 | <template> | 1 | <template> |
2 | <div id="app"> | 2 | <div id="app"> |
3 | <v-header class="header"></v-header> | 3 | <v-header class="header"></v-header> |
4 | <main ref="container" class="main-container"> | 4 | <main ref="container" class="main-container"> |
5 | <router-view /> | 5 | <router-view /> |
6 | </main> | 6 | </main> |
7 | <v-footer></v-footer> | 7 | <v-footer></v-footer> |
8 | </div> | 8 | </div> |
9 | </template> | 9 | </template> |
10 | 10 | ||
11 | 11 | ||
... | @@ -14,6 +14,10 @@ import { mapGetters, mapActions, mapState } from "vuex"; | ... | @@ -14,6 +14,10 @@ import { mapGetters, mapActions, mapState } from "vuex"; |
14 | import { getCookie } from "@utils/utils.js"; | 14 | import { getCookie } from "@utils/utils.js"; |
15 | import VHeader from "@components/home/header/header.vue"; | 15 | import VHeader from "@components/home/header/header.vue"; |
16 | import VFooter from "@components/home/footer/footer.vue"; | 16 | import VFooter from "@components/home/footer/footer.vue"; |
17 | |||
18 | import api from "@/api/api"; | ||
19 | import { httpGet, httpPost } from "@/api/fetch-api.js"; | ||
20 | |||
17 | var UA = require("ua-device"); | 21 | var UA = require("ua-device"); |
18 | 22 | ||
19 | export default { | 23 | export default { |
... | @@ -35,6 +39,24 @@ export default { | ... | @@ -35,6 +39,24 @@ export default { |
35 | let deviceType = output.device.type; | 39 | let deviceType = output.device.type; |
36 | let isMobile = deviceType == "mobile"; | 40 | let isMobile = deviceType == "mobile"; |
37 | this.$store.commit("IS_MOBILE", isMobile); | 41 | this.$store.commit("IS_MOBILE", isMobile); |
42 | }, | ||
43 | refreshProfile() { | ||
44 | let userInfoStr = decodeURIComponent(getCookie("_user_profile")); | ||
45 | if (userInfoStr) { | ||
46 | try { | ||
47 | let userInfo = JSON.parse(decodeURIComponent(userInfoStr)); | ||
48 | this.$store.commit("SET_USER_INFO", userInfo); | ||
49 | if (userInfo && userInfo.sid) { | ||
50 | httpPost({ url: api.profile, sidStr: userInfo.sid }).then(res => { | ||
51 | if (res) { | ||
52 | this.$store.commit("SET_USER_INFO", userInfo); | ||
53 | } else { | ||
54 | this.$store.commit("SET_USER_INFO", null); | ||
55 | } | ||
56 | }); | ||
57 | } | ||
58 | } catch (e) {} | ||
59 | } | ||
38 | } | 60 | } |
39 | }, | 61 | }, |
40 | created() { | 62 | created() { |
... | @@ -43,13 +65,7 @@ export default { | ... | @@ -43,13 +65,7 @@ export default { |
43 | // }; | 65 | // }; |
44 | this.refreshUA(); | 66 | this.refreshUA(); |
45 | // | 67 | // |
46 | let userInfoStr = decodeURIComponent(getCookie("_user_profile")); | 68 | this.refreshProfile(); |
47 | if (userInfoStr) { | ||
48 | try { | ||
49 | let userInfo = JSON.parse(decodeURIComponent(userInfoStr)); | ||
50 | this.$store.commit("SET_USER_INFO", userInfo); | ||
51 | } catch (e) {} | ||
52 | } | ||
53 | } | 69 | } |
54 | }; | 70 | }; |
55 | </script> | 71 | </script> | ... | ... |
1 | module.exports = { | 1 | module.exports = { |
2 | load: "/pingan_hklife_webapi/user/load", | 2 | load: "/pingan_hklife_webapi/user/load", |
3 | logout: "/pingan_hklife_webapi/user/logout", | 3 | logout: "/pingan_hklife_webapi/user/logout", |
4 | // 用户身份信息 | ||
5 | profile: "/pingan_hklife_webapi/user/profile", | ||
4 | // 是否显示图形验证码接口 | 6 | // 是否显示图形验证码接口 |
5 | stdIsShowImageVcode: "/pingan_hklife_webapi/auth/stdIsShowImageVcode", | 7 | stdIsShowImageVcode: "/pingan_hklife_webapi/auth/stdIsShowImageVcode", |
6 | // 刷新图形验证码接口 | 8 | // 刷新图形验证码接口 | ... | ... |
... | @@ -14,7 +14,7 @@ function Toast(msg) { | ... | @@ -14,7 +14,7 @@ function Toast(msg) { |
14 | // 服务器地址 | 14 | // 服务器地址 |
15 | // let base = process.env.REQUEST_DOMAIN || "http://localhost:9101"; | 15 | // let base = process.env.REQUEST_DOMAIN || "http://localhost:9101"; |
16 | // let base = COM.baseUrl; | 16 | // let base = COM.baseUrl; |
17 | console.log(process.env); | 17 | // console.log(process.env); |
18 | let base = ""; | 18 | let base = ""; |
19 | const axios = axiosIns.create({ | 19 | const axios = axiosIns.create({ |
20 | baseURL: process.env.VUE_APP_BASE_URL, | 20 | baseURL: process.env.VUE_APP_BASE_URL, |
... | @@ -146,7 +146,8 @@ export const httpPost = params => { | ... | @@ -146,7 +146,8 @@ export const httpPost = params => { |
146 | let { | 146 | let { |
147 | url, | 147 | url, |
148 | data, | 148 | data, |
149 | sid | 149 | sid, |
150 | sidStr | ||
150 | } = params; | 151 | } = params; |
151 | let headers = {}; | 152 | let headers = {}; |
152 | if (sid) { | 153 | if (sid) { |
... | @@ -157,6 +158,13 @@ export const httpPost = params => { | ... | @@ -157,6 +158,13 @@ export const httpPost = params => { |
157 | } | 158 | } |
158 | } | 159 | } |
159 | } | 160 | } |
161 | if (sidStr) { | ||
162 | headers = { | ||
163 | headers: { | ||
164 | sid: sidStr | ||
165 | } | ||
166 | } | ||
167 | } | ||
160 | return axios.post(`${base}${url}`, data, headers).then(res => res.data.content); | 168 | return axios.post(`${base}${url}`, data, headers).then(res => res.data.content); |
161 | } | 169 | } |
162 | 170 | ... | ... |
... | @@ -44,6 +44,10 @@ export default { | ... | @@ -44,6 +44,10 @@ export default { |
44 | }, | 44 | }, |
45 | }, | 45 | }, |
46 | computed: { | 46 | computed: { |
47 | ...mapState({ | ||
48 | isSmallScreen: state => state.isSmallScreen, | ||
49 | userInfo: state => state.userInfo | ||
50 | }), | ||
47 | locale() { | 51 | locale() { |
48 | return this.$i18n.locale || 'tc'; | 52 | return this.$i18n.locale || 'tc'; |
49 | }, | 53 | }, |
... | @@ -108,7 +112,7 @@ export default { | ... | @@ -108,7 +112,7 @@ export default { |
108 | } | 112 | } |
109 | // menuData.list = list; | 113 | // menuData.list = list; |
110 | navList = list; | 114 | navList = list; |
111 | console.log("navList:", navList); | 115 | // console.log("navList:", navList); |
112 | } | 116 | } |
113 | this.navList = navList; | 117 | this.navList = navList; |
114 | 118 | ||
... | @@ -122,6 +126,9 @@ export default { | ... | @@ -122,6 +126,9 @@ export default { |
122 | this.$nextTick(() => { | 126 | this.$nextTick(() => { |
123 | this.$refs.panel.scrollTop = 0; | 127 | this.$refs.panel.scrollTop = 0; |
124 | }); | 128 | }); |
129 | }, | ||
130 | userInfo(val) { | ||
131 | this.initData(); | ||
125 | } | 132 | } |
126 | }, | 133 | }, |
127 | }; | 134 | }; | ... | ... |
... | @@ -104,7 +104,7 @@ export default { | ... | @@ -104,7 +104,7 @@ export default { |
104 | case "0": | 104 | case "0": |
105 | message = this.i18n.infomationImprove.successMsg; | 105 | message = this.i18n.infomationImprove.successMsg; |
106 | this.showModal(message, "succ"); | 106 | this.showModal(message, "succ"); |
107 | let path = this.$route.query.callback || "/index"; | 107 | let path = this.$route.query.callback || "/"; |
108 | this.targetPath = path; | 108 | this.targetPath = path; |
109 | break; | 109 | break; |
110 | } | 110 | } |
... | @@ -169,9 +169,9 @@ export default { | ... | @@ -169,9 +169,9 @@ export default { |
169 | message = this.i18n.infomationImprove.errorTips.e6; | 169 | message = this.i18n.infomationImprove.errorTips.e6; |
170 | let idNo = this.information.idNo + ""; | 170 | let idNo = this.information.idNo + ""; |
171 | switch (this.information.idType) { | 171 | switch (this.information.idType) { |
172 | case "1": // 身份證 | 172 | // case "1": // 身份證 |
173 | message = idNo.length == 18 ? "" : message; | 173 | // message = idNo.length == 18 ? "" : message; |
174 | break; | 174 | // break; |
175 | case "2": // 護照 | 175 | case "2": // 護照 |
176 | message = idNo.length > 3 && idNo.length < 50 ? "" : message; | 176 | message = idNo.length > 3 && idNo.length < 50 ? "" : message; |
177 | break; | 177 | break; | ... | ... |
... | @@ -43,8 +43,8 @@ export default { | ... | @@ -43,8 +43,8 @@ export default { |
43 | loginForm: { | 43 | loginForm: { |
44 | // userId: "18334783910", | 44 | // userId: "18334783910", |
45 | // password: "qweqwe123" | 45 | // password: "qweqwe123" |
46 | userId: "", | 46 | userId: "18145729463", |
47 | password: "", | 47 | password: "ccc123!@#", |
48 | 48 | ||
49 | imageValue: "", | 49 | imageValue: "", |
50 | mobileNo: "", | 50 | mobileNo: "", |
... | @@ -90,14 +90,36 @@ export default { | ... | @@ -90,14 +90,36 @@ export default { |
90 | }, | 90 | }, |
91 | i18n() { | 91 | i18n() { |
92 | return this.$i18n.messages && this.$i18n.locale ? this.$i18n.messages[this.$i18n.locale] : {}; | 92 | return this.$i18n.messages && this.$i18n.locale ? this.$i18n.messages[this.$i18n.locale] : {}; |
93 | }, | ||
94 | pwdLoginDisabled() { | ||
95 | let b1 = !this.loginCheck.agreeProtocol; | ||
96 | let b2 = !this.loginForm.userId; | ||
97 | let b3 = !this.loginForm.password; | ||
98 | return b1 || b2 || b3; | ||
99 | }, | ||
100 | otpLoginDisabled() { | ||
101 | let b1 = !this.loginCheck.agreeProtocol; | ||
102 | let b2 = !this.loginForm.mobileNo; | ||
103 | let b3 = !this.loginForm.otp; | ||
104 | let b4 = !this.values.token; | ||
105 | let b5 = this.values.vcodeuuid && !this.loginForm.imageValue; | ||
106 | return b1 || b2 || b3 || b4 || b5; | ||
93 | } | 107 | } |
94 | }, | 108 | }, |
95 | methods: { | 109 | methods: { |
96 | showModal(content, icon) { | 110 | showModal(content, icon) { |
97 | icon = !icon || typeof icon === "undefined" ? "succ" : "succ"; | 111 | icon = !icon || typeof icon === "undefined" ? "succ" : icon; |
98 | this.modalIcon = icon; | 112 | this.modalIcon = icon; |
99 | this.modalContent = content; | 113 | this.modalContent = content; |
100 | this.modalVisiable = true; | 114 | if (icon == "succ") { |
115 | this.modalVisiable = true; | ||
116 | } else { | ||
117 | this.modalSimpleVisiable = true; | ||
118 | } | ||
119 | }, | ||
120 | closeModal() { | ||
121 | this.modalVisiable = false; | ||
122 | this.modalSimpleVisiable = false; | ||
101 | }, | 123 | }, |
102 | onCheckHandler() { | 124 | onCheckHandler() { |
103 | 125 | ||
... | @@ -123,7 +145,7 @@ export default { | ... | @@ -123,7 +145,7 @@ export default { |
123 | onLoginTypeHandler(val) { | 145 | onLoginTypeHandler(val) { |
124 | this.type = val; | 146 | this.type = val; |
125 | }, | 147 | }, |
126 | initData() {}, | 148 | initData() { }, |
127 | handlerIsShowImageVcode() { | 149 | handlerIsShowImageVcode() { |
128 | return new Promise((resolve, reject) => { | 150 | return new Promise((resolve, reject) => { |
129 | httpPost({ | 151 | httpPost({ |
... | @@ -151,6 +173,9 @@ export default { | ... | @@ -151,6 +173,9 @@ export default { |
151 | // 刷新图形二维码 | 173 | // 刷新图形二维码 |
152 | }, | 174 | }, |
153 | handlerLogin() { | 175 | handlerLogin() { |
176 | if ((this.type == 1 && this.pwdLoginDisabled) || (this.type == 2 && this.otpLoginDisabled)) { | ||
177 | return; | ||
178 | } | ||
154 | this.refreshDeviceId(); | 179 | this.refreshDeviceId(); |
155 | if (!this.loginCheck.agreeProtocol) { | 180 | if (!this.loginCheck.agreeProtocol) { |
156 | this._showAgreeProtocalTips(); | 181 | this._showAgreeProtocalTips(); |
... | @@ -233,7 +258,7 @@ export default { | ... | @@ -233,7 +258,7 @@ export default { |
233 | } | 258 | } |
234 | }, | 259 | }, |
235 | _redirectTo() { | 260 | _redirectTo() { |
236 | let path = this.$route.query.callback || "/index"; | 261 | let path = this.$route.query.callback || "/"; |
237 | this.$router.push({ | 262 | this.$router.push({ |
238 | path: path | 263 | path: path |
239 | }); | 264 | }); |
... | @@ -331,7 +356,9 @@ export default { | ... | @@ -331,7 +356,9 @@ export default { |
331 | // 检测手机号是否正确 | 356 | // 检测手机号是否正确 |
332 | return new Promise((resolve, reject) => { | 357 | return new Promise((resolve, reject) => { |
333 | let mobile = this.loginForm.mobileNo; | 358 | let mobile = this.loginForm.mobileNo; |
334 | if (mobile.length != 8 && mobile.length != 11) { | 359 | let hkMobile = mobile.length == 8 && /^[5689]{1}\d{7}$/.test(mobile); |
360 | let zhMobile = mobile.length == 11 && /^((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(mobile); | ||
361 | if (!hkMobile && !zhMobile) { | ||
335 | this._showMobileNoIllegalTip() | 362 | this._showMobileNoIllegalTip() |
336 | return; | 363 | return; |
337 | } | 364 | } |
... | @@ -492,5 +519,5 @@ export default { | ... | @@ -492,5 +519,5 @@ export default { |
492 | // console.log("PK === ", this.PK) | 519 | // console.log("PK === ", this.PK) |
493 | // console.log("E === ", this.E) | 520 | // console.log("E === ", this.E) |
494 | }, | 521 | }, |
495 | created() {} | 522 | created() { } |
496 | } | 523 | } | ... | ... |
... | @@ -2,7 +2,7 @@ | ... | @@ -2,7 +2,7 @@ |
2 | <template> | 2 | <template> |
3 | <div> | 3 | <div> |
4 | <modal-comp :visible="modalVisiable" :show-confirm="false" :icon="modalIcon" :content="modalContent" :confirm="modalCallback" :overlay="modalCallback"></modal-comp> | 4 | <modal-comp :visible="modalVisiable" :show-confirm="false" :icon="modalIcon" :content="modalContent" :confirm="modalCallback" :overlay="modalCallback"></modal-comp> |
5 | <modal-simple-comp :visible="modalSimpleVisiable" :show-confirm="false" :icon="modalIcon" :content="modalContent" :confirm="modalCallback" :overlay="modalCallback" :close="closeCallback"></modal-simple-comp> | 5 | <modal-simple-comp :visible="modalSimpleVisiable" :show-confirm="false" :icon="modalIcon" :content="modalContent" :confirm="closeModal" :overlay="closeModal" :close="closeModal"></modal-simple-comp> |
6 | <modal-upload-card-comp :visible="modalUploadCardVisiable" :show-confirm="true" :content="modalContent" :confirm="modalCallback" :overlay="modalCallback" :close="closeCallback"></modal-upload-card-comp> | 6 | <modal-upload-card-comp :visible="modalUploadCardVisiable" :show-confirm="true" :content="modalContent" :confirm="modalCallback" :overlay="modalCallback" :close="closeCallback"></modal-upload-card-comp> |
7 | <div class="content"> | 7 | <div class="content"> |
8 | <div class="ebg"> | 8 | <div class="ebg"> |
... | @@ -62,7 +62,7 @@ | ... | @@ -62,7 +62,7 @@ |
62 | <img v-if="loginCheck.agreeProtocol" class="check" src="@/assets/images/login/check.png"> {{$t('login.agree')}} | 62 | <img v-if="loginCheck.agreeProtocol" class="check" src="@/assets/images/login/check.png"> {{$t('login.agree')}} |
63 | <span @click="onProtocolHandler()" class="protocol pointer">{{$t('login.protocol')}}</span> | 63 | <span @click="onProtocolHandler()" class="protocol pointer">{{$t('login.protocol')}}</span> |
64 | </div> | 64 | </div> |
65 | <div @click="handlerLogin()" class="login-submit pointer">{{$t('login.login')}}</div> | 65 | <div @click="handlerLogin()" class="login-submit pointer" :class="{disabled: pwdLoginDisabled}">{{$t('login.login')}}</div> |
66 | <div class="login-func"> | 66 | <div class="login-func"> |
67 | <div @click="onRegisterHandler()" class="login-func-btn pointer">{{$t('login.register')}}</div> | 67 | <div @click="onRegisterHandler()" class="login-func-btn pointer">{{$t('login.register')}}</div> |
68 | <div @click="onForgetHandler()" class="login-func-btn pointer">{{$t('login.forget')}}</div> | 68 | <div @click="onForgetHandler()" class="login-func-btn pointer">{{$t('login.forget')}}</div> |
... | @@ -125,7 +125,7 @@ | ... | @@ -125,7 +125,7 @@ |
125 | <img v-if="loginCheck.agreeProtocol" class="check" src="@/assets/images/login/check.png"> {{$t('login.agree')}} | 125 | <img v-if="loginCheck.agreeProtocol" class="check" src="@/assets/images/login/check.png"> {{$t('login.agree')}} |
126 | <span @click="onProtocolHandler()" class="protocol pointer">{{$t('login.protocol')}}</span> | 126 | <span @click="onProtocolHandler()" class="protocol pointer">{{$t('login.protocol')}}</span> |
127 | </div> | 127 | </div> |
128 | <div @click="handlerLogin()" class="login-submit pointer">{{$t('login.login')}}</div> | 128 | <div @click="handlerLogin()" class="login-submit pointer" :class="{disabled: otpLoginDisabled}">{{$t('login.login')}}</div> |
129 | <div class="login-func"> | 129 | <div class="login-func"> |
130 | <div @click="toRegisterPage()" class="login-func-btn pointer">{{$t('login.register')}}</div> | 130 | <div @click="toRegisterPage()" class="login-func-btn pointer">{{$t('login.register')}}</div> |
131 | <div @click="onForgetHandler()" class="login-func-btn pointer">{{$t('login.forget')}}</div> | 131 | <div @click="onForgetHandler()" class="login-func-btn pointer">{{$t('login.forget')}}</div> | ... | ... |
... | @@ -5,6 +5,7 @@ import { | ... | @@ -5,6 +5,7 @@ import { |
5 | } from '@/api/fetch-api.js' | 5 | } from '@/api/fetch-api.js' |
6 | 6 | ||
7 | import modalComp from '@/components/modal-comp/modal-comp.vue'; | 7 | import modalComp from '@/components/modal-comp/modal-comp.vue'; |
8 | import modalSimpleComp from '@/components/modal-simple-comp/modal-simple-comp.vue'; | ||
8 | import { passwordEncrypt } from '@/utils/encrypt.js'; | 9 | import { passwordEncrypt } from '@/utils/encrypt.js'; |
9 | 10 | ||
10 | export default { | 11 | export default { |
... | @@ -20,6 +21,7 @@ export default { | ... | @@ -20,6 +21,7 @@ export default { |
20 | remain: 0, // 剩余时间 | 21 | remain: 0, // 剩余时间 |
21 | tip: "" // 显示的文字 | 22 | tip: "" // 显示的文字 |
22 | }, | 23 | }, |
24 | modalSimpleVisiable: false, | ||
23 | modalVisiable: false, | 25 | modalVisiable: false, |
24 | targetPath: "", | 26 | targetPath: "", |
25 | modalIcon: "succ", | 27 | modalIcon: "succ", |
... | @@ -45,6 +47,21 @@ export default { | ... | @@ -45,6 +47,21 @@ export default { |
45 | } | 47 | } |
46 | }, | 48 | }, |
47 | components: {}, | 49 | components: {}, |
50 | computed: { | ||
51 | s1BtnDisabled() { | ||
52 | let b1 = !this.step1.userId ? true : false; | ||
53 | return b1; | ||
54 | }, | ||
55 | s3BtnDisabled() { | ||
56 | let b1 = !this.step3.otp ? true : false; | ||
57 | return b1; | ||
58 | }, | ||
59 | s4BtnDisabled() { | ||
60 | let b1 = !this.step4.pwd ? true : false; | ||
61 | let b2 = !this.step4.pwdRepeat ? true : false; | ||
62 | return b1 || b2; | ||
63 | } | ||
64 | }, | ||
48 | methods: { | 65 | methods: { |
49 | initData() { }, | 66 | initData() { }, |
50 | i18n() { | 67 | i18n() { |
... | @@ -52,12 +69,23 @@ export default { | ... | @@ -52,12 +69,23 @@ export default { |
52 | return i18n; | 69 | return i18n; |
53 | }, | 70 | }, |
54 | showModal(content, icon) { | 71 | showModal(content, icon) { |
55 | icon = !icon || typeof icon === "undefined" ? "succ" : "succ"; | 72 | icon = !icon || typeof icon === "undefined" ? "succ" : icon; |
56 | this.modalIcon = icon; | 73 | this.modalIcon = icon; |
57 | this.modalContent = content; | 74 | this.modalContent = content; |
58 | this.modalVisiable = true; | 75 | if (icon == "succ") { |
76 | this.modalVisiable = true; | ||
77 | } else { | ||
78 | this.modalSimpleVisiable = true; | ||
79 | } | ||
80 | }, | ||
81 | closeModal() { | ||
82 | this.modalVisiable = false; | ||
83 | this.modalSimpleVisiable = false; | ||
59 | }, | 84 | }, |
60 | locateUserInfo() { | 85 | locateUserInfo() { |
86 | if (this.s1BtnDisabled) { | ||
87 | return | ||
88 | } | ||
61 | // 定位用户信息 | 89 | // 定位用户信息 |
62 | if (!this.step1.userId) { | 90 | if (!this.step1.userId) { |
63 | this.step1.error = this.i18n().passwordReset.type1.error; | 91 | this.step1.error = this.i18n().passwordReset.type1.error; |
... | @@ -109,6 +137,9 @@ export default { | ... | @@ -109,6 +137,9 @@ export default { |
109 | }) | 137 | }) |
110 | }, | 138 | }, |
111 | checkOtp() { | 139 | checkOtp() { |
140 | if (this.s3BtnDisabled) { | ||
141 | return; | ||
142 | } | ||
112 | // 发送验证码 | 143 | // 发送验证码 |
113 | if (!this.step3.otp) { | 144 | if (!this.step3.otp) { |
114 | this.step3.error = this.i18n().passwordReset.type2.error1; | 145 | this.step3.error = this.i18n().passwordReset.type2.error1; |
... | @@ -136,6 +167,9 @@ export default { | ... | @@ -136,6 +167,9 @@ export default { |
136 | }) | 167 | }) |
137 | }, | 168 | }, |
138 | resetPwd() { | 169 | resetPwd() { |
170 | if (this.s4BtnDisabled) { | ||
171 | return; | ||
172 | } | ||
139 | let c1 = this.checkPassword(this.step4.pwd); | 173 | let c1 = this.checkPassword(this.step4.pwd); |
140 | if (c1) { | 174 | if (c1) { |
141 | this.$set(this.step, 'error1', c1); | 175 | this.$set(this.step, 'error1', c1); |
... | @@ -163,7 +197,7 @@ export default { | ... | @@ -163,7 +197,7 @@ export default { |
163 | break | 197 | break |
164 | default: | 198 | default: |
165 | message = this.i18n().passwordCheck.error4; | 199 | message = this.i18n().passwordCheck.error4; |
166 | this.showModal(message, "succ"); | 200 | this.showModal(message, "info"); |
167 | break; | 201 | break; |
168 | } | 202 | } |
169 | } | 203 | } |
... | @@ -211,7 +245,7 @@ export default { | ... | @@ -211,7 +245,7 @@ export default { |
211 | case "COMMON_ERROR_E2": | 245 | case "COMMON_ERROR_E2": |
212 | // 身份过期了,请重新登录 | 246 | // 身份过期了,请重新登录 |
213 | this.values.cid = ""; | 247 | this.values.cid = ""; |
214 | this.showModal(this.i18n().passwordReset.cidExpire); | 248 | this.showModal(this.i18n().passwordReset.cidExpire, "info"); |
215 | this.step2.idNo = ""; | 249 | this.step2.idNo = ""; |
216 | this.step3.otp = ""; | 250 | this.step3.otp = ""; |
217 | this.step3.error = ""; | 251 | this.step3.error = ""; |
... | @@ -259,6 +293,7 @@ export default { | ... | @@ -259,6 +293,7 @@ export default { |
259 | mounted() { }, | 293 | mounted() { }, |
260 | created() { }, | 294 | created() { }, |
261 | components: { | 295 | components: { |
262 | modalComp | 296 | modalComp, |
297 | modalSimpleComp | ||
263 | } | 298 | } |
264 | } | 299 | } | ... | ... |
1 | 1 | ||
2 | <template> | 2 | <template> |
3 | <div class="content"> | 3 | <div> |
4 | <modal-comp :visible="modalVisiable" :show-confirm="false" :icon="modalIcon" :content="modalContent" :confirm="modalCallback" :overlay="modalCallback"></modal-comp> | 4 | <modal-comp :visible="modalVisiable" :show-confirm="false" :icon="modalIcon" :content="modalContent" :confirm="modalCallback" :overlay="modalCallback"></modal-comp> |
5 | <div class="ebg"> | 5 | <modal-simple-comp :visible="modalSimpleVisiable" :show-confirm="false" :icon="modalIcon" :content="modalContent" :confirm="closeModal" :overlay="closeModal" :close="closeModal"></modal-simple-comp> |
6 | <img src="@/assets/images/common/login-bg.png"> | 6 | <div class="content"> |
7 | </div> | 7 | <div class="ebg"> |
8 | <div class="top-space"></div> | 8 | <img src="@/assets/images/common/login-bg.png"> |
9 | <div class="box"> | 9 | </div> |
10 | <div class="top-space"></div> | ||
11 | <div class="box"> | ||
10 | 12 | ||
11 | <!-- 输入用户信息 --> | 13 | <!-- 输入用户信息 --> |
12 | <div v-if="type == 1" class="login"> | 14 | <div v-if="type == 1" class="login"> |
13 | <div class="login-tit">{{$t('passwordReset.type1.title')}}</div> | 15 | <div class="login-tit">{{$t('passwordReset.type1.title')}}</div> |
14 | <div class="login-tit-space-1"></div> | 16 | <div class="login-tit-space-1"></div> |
15 | <div class="gird-g form"> | 17 | <div class="gird-g form"> |
16 | <div class="pure-u-1 form-item"> | 18 | <div class="pure-u-1 form-item"> |
17 | <div class="label"> | 19 | <div class="label"> |
18 | <img src="@/assets/images/register/icon-register-phone.png"> {{$t('passwordReset.type1.t1')}} | 20 | <img src="@/assets/images/register/icon-register-phone.png"> {{$t('passwordReset.type1.t1')}} |
19 | </div> | 21 | </div> |
20 | <div class="ipt-wrap"> | 22 | <div class="ipt-wrap"> |
21 | <input :placeholder="$t('passwordReset.type1.t1Placeholder')" class="ipt" type="text" v-model="step1.userId"> | 23 | <input :placeholder="$t('passwordReset.type1.t1Placeholder')" class="ipt" type="text" v-model="step1.userId"> |
22 | </div> | 24 | </div> |
23 | <div class="validator" v-if="step1.error.length > 0 "> | 25 | <div class="validator" v-if="step1.error.length > 0 "> |
24 | <img src="@/assets/images/common/icon-notice.png" alt=""> {{step1.error}} | 26 | <img src="@/assets/images/common/icon-notice.png" alt=""> {{step1.error}} |
27 | </div> | ||
25 | </div> | 28 | </div> |
26 | </div> | 29 | </div> |
30 | <div @click="locateUserInfo()" class="login-submit pointer" :class="{disabled: s1BtnDisabled}">{{$t('passwordReset.type1.submit')}}</div> | ||
27 | </div> | 31 | </div> |
28 | <div @click="locateUserInfo()" class="login-submit pointer">{{$t('passwordReset.type1.submit')}}</div> | ||
29 | </div> | ||
30 | 32 | ||
31 | 33 | ||
32 | <!-- 核对信息 --> | 34 | <!-- 核对信息 --> |
33 | <div v-if="type == 2" class="login"> | 35 | <div v-if="type == 2" class="login"> |
34 | <div class="login-tit">{{$t('passwordReset.type3.title')}}</div> | 36 | <div class="login-tit">{{$t('passwordReset.type3.title')}}</div> |
35 | <div class="login-tit-space-1"></div> | 37 | <div class="login-tit-space-1"></div> |
36 | <div class="gird-g form"> | 38 | <div class="gird-g form"> |
37 | <div class="pure-u-1 form-item"> | 39 | <div class="pure-u-1 form-item"> |
38 | <div class="label"> | 40 | <div class="label"> |
39 | <img src="@/assets/images/register/icon-register-phone.png"> {{$t('passwordReset.type3.t1')}} | 41 | <img src="@/assets/images/register/icon-register-phone.png"> {{$t('passwordReset.type3.t1')}} |
40 | </div> | 42 | </div> |
41 | <div class="ipt-wrap"> | 43 | <div class="ipt-wrap"> |
42 | <input class="ipt disable" type="text" v-model="step2.idNo"> | 44 | <input class="ipt disable" type="text" v-model="step2.idNo"> |
45 | </div> | ||
43 | </div> | 46 | </div> |
44 | </div> | 47 | </div> |
48 | <div @click="sureIdNo()" class="login-submit pointer">{{$t('passwordReset.type3.submit')}}</div> | ||
45 | </div> | 49 | </div> |
46 | <div @click="sureIdNo()" class="login-submit pointer">{{$t('passwordReset.type3.submit')}}</div> | ||
47 | </div> | ||
48 | 50 | ||
49 | <!-- 找回密码 --> | 51 | <!-- 找回密码 --> |
50 | <div v-if="type == 3" class="login"> | 52 | <div v-if="type == 3" class="login"> |
51 | <div class="login-tit">{{$t('passwordReset.type2.title')}}</div> | 53 | <div class="login-tit">{{$t('passwordReset.type2.title')}}</div> |
52 | <div class="login-tit-space-1"></div> | 54 | <div class="login-tit-space-1"></div> |
53 | <div class="gird-g form"> | 55 | <div class="gird-g form"> |
54 | <div class="pure-u-1 form-item"> | 56 | <div class="pure-u-1 form-item"> |
55 | <div class="label"> | 57 | <div class="label"> |
56 | <img src="@/assets/images/register/icon-register-phone.png"> {{$t('passwordReset.type2.t1Placeholder')}} | 58 | <img src="@/assets/images/register/icon-register-phone.png"> {{$t('passwordReset.type2.t1Placeholder')}} |
57 | </div> | 59 | </div> |
58 | <div class="ipt-wrap"> | 60 | <div class="ipt-wrap"> |
59 | <div class="ipt ipt2"> | 61 | <div class="ipt ipt2"> |
60 | <input :placeholder="$t('passwordReset.type2.t1Placeholder')" type="text" v-model="step3.otp"> | 62 | <input :placeholder="$t('passwordReset.type2.t1Placeholder')" type="text" v-model="step3.otp"> |
61 | <div v-if="times.remain == 0" class="veri-btn pointer" @click="sendOtp" >{{$t('register.verifyCodeGet')}}</div> | 63 | <div v-if="times.remain == 0" class="veri-btn pointer" @click="sendOtp" >{{$t('register.verifyCodeGet')}}</div> |
62 | <div v-else class="veri-btn-default">{{times.tip}}</div> | 64 | <div v-else class="veri-btn-default">{{times.tip}}</div> |
65 | </div> | ||
66 | </div> | ||
67 | <div class="validator" v-if="step3.error.length > 0 "> | ||
68 | <img src="@/assets/images/common/icon-notice.png" alt=""> {{step3.error}} | ||
63 | </div> | 69 | </div> |
64 | </div> | ||
65 | <div class="validator" v-if="step3.error.length > 0 "> | ||
66 | <img src="@/assets/images/common/icon-notice.png" alt=""> {{step3.error}} | ||
67 | </div> | 70 | </div> |
68 | </div> | 71 | </div> |
72 | <div @click="checkOtp()" class="login-submit pointer" :class="{disabled: s3BtnDisabled}">{{$t('passwordReset.type2.submit')}}</div> | ||
69 | </div> | 73 | </div> |
70 | <div @click="checkOtp()" class="login-submit pointer">{{$t('passwordReset.type2.submit')}}</div> | ||
71 | </div> | ||
72 | 74 | ||
73 | <!-- 重置密码 --> | 75 | <!-- 重置密码 --> |
74 | <div v-if="type == 4" class="login"> | 76 | <div v-if="type == 4" class="login"> |
75 | <div class="login-tit">{{$t('passwordReset.type4.title')}}</div> | 77 | <div class="login-tit">{{$t('passwordReset.type4.title')}}</div> |
76 | <div class="login-tit-space-4"></div> | 78 | <div class="login-tit-space-4"></div> |
77 | <div class="gird-g form"> | 79 | <div class="gird-g form"> |
78 | <div class="pure-u-1 form-item"> | 80 | <div class="pure-u-1 form-item"> |
79 | <div class="label"> | 81 | <div class="label"> |
80 | <img src="@/assets/images/register/icon-register-lock.png"> {{$t('passwordReset.type4.t1')}} | 82 | <img src="@/assets/images/register/icon-register-lock.png"> {{$t('passwordReset.type4.t1')}} |
81 | </div> | 83 | </div> |
82 | <div class="ipt-wrap"> | 84 | <div class="ipt-wrap"> |
83 | <input :placeholder="$t('passwordReset.type4.t1Placeholder')" class="ipt" type="password" v-model="step4.pwd"> | 85 | <input :placeholder="$t('passwordReset.type4.t1Placeholder')" class="ipt" type="password" v-model="step4.pwd"> |
84 | </div> | 86 | </div> |
85 | <div class="validator" v-if="step4.error1.length > 0 "> | 87 | <div class="validator" v-if="step4.error1.length > 0 "> |
86 | <img src="@/assets/images/common/icon-notice.png" alt=""> {{step4.error1}} | 88 | <img src="@/assets/images/common/icon-notice.png" alt=""> {{step4.error1}} |
87 | </div> | 89 | </div> |
88 | </div> | ||
89 | <div class="pure-u-1 form-item"> | ||
90 | <div class="label"> | ||
91 | <img src="@/assets/images/register/icon-register-lock.png"> {{$t('passwordReset.type4.t2')}} | ||
92 | </div> | ||
93 | <div class="ipt-wrap"> | ||
94 | <input :placeholder="$t('passwordReset.type4.t2Placeholder')" class="ipt" type="password" v-model="step4.pwdRepeat"> | ||
95 | </div> | 90 | </div> |
96 | <div class="validator" v-if="step4.error2.length > 0 "> | 91 | <div class="pure-u-1 form-item"> |
97 | <img src="@/assets/images/common/icon-notice.png" alt=""> {{step4.error2}} | 92 | <div class="label"> |
93 | <img src="@/assets/images/register/icon-register-lock.png"> {{$t('passwordReset.type4.t2')}} | ||
94 | </div> | ||
95 | <div class="ipt-wrap"> | ||
96 | <input :placeholder="$t('passwordReset.type4.t2Placeholder')" class="ipt" type="password" v-model="step4.pwdRepeat"> | ||
97 | </div> | ||
98 | <div class="validator" v-if="step4.error2.length > 0 "> | ||
99 | <img src="@/assets/images/common/icon-notice.png" alt=""> {{step4.error2}} | ||
100 | </div> | ||
98 | </div> | 101 | </div> |
99 | </div> | 102 | </div> |
103 | <div @click="resetPwd()" class="login-submit pointer" :class="{disabled: s4BtnDisabled}">{{$t('passwordReset.type4.submit')}}</div> | ||
100 | </div> | 104 | </div> |
101 | <div @click="resetPwd()" class="login-submit pointer">{{$t('passwordReset.type4.submit')}}</div> | ||
102 | </div> | 105 | </div> |
103 | </div> | 106 | </div> |
104 | </div> | 107 | </div> | ... | ... |
... | @@ -8,6 +8,7 @@ import { | ... | @@ -8,6 +8,7 @@ import { |
8 | } from '@/api/fetch-api.js' | 8 | } from '@/api/fetch-api.js' |
9 | 9 | ||
10 | import modalComp from '@/components/modal-comp/modal-comp.vue'; | 10 | import modalComp from '@/components/modal-comp/modal-comp.vue'; |
11 | import modalSimpleComp from '@/components/modal-simple-comp/modal-simple-comp.vue'; | ||
11 | import { passwordEncrypt } from '@/utils/encrypt.js'; | 12 | import { passwordEncrypt } from '@/utils/encrypt.js'; |
12 | 13 | ||
13 | export default { | 14 | export default { |
... | @@ -31,6 +32,7 @@ export default { | ... | @@ -31,6 +32,7 @@ export default { |
31 | remain: 0, // 剩余时间 | 32 | remain: 0, // 剩余时间 |
32 | tip: "" // 显示的文字 | 33 | tip: "" // 显示的文字 |
33 | }, | 34 | }, |
35 | modalSimpleVisiable: false, | ||
34 | modalVisiable: false, | 36 | modalVisiable: false, |
35 | targetPath: "", | 37 | targetPath: "", |
36 | modalIcon: "succ", | 38 | modalIcon: "succ", |
... | @@ -44,12 +46,23 @@ export default { | ... | @@ -44,12 +46,23 @@ export default { |
44 | return i18n; | 46 | return i18n; |
45 | }, | 47 | }, |
46 | showModal(content, icon) { | 48 | showModal(content, icon) { |
47 | icon = !icon || typeof icon === "undefined" ? "succ" : "succ"; | 49 | icon = !icon || typeof icon === "undefined" ? "succ" : icon; |
48 | this.modalIcon = icon; | 50 | this.modalIcon = icon; |
49 | this.modalContent = content; | 51 | this.modalContent = content; |
50 | this.modalVisiable = true; | 52 | if (icon == "succ") { |
53 | this.modalVisiable = true; | ||
54 | } else { | ||
55 | this.modalSimpleVisiable = true; | ||
56 | } | ||
57 | }, | ||
58 | closeModal() { | ||
59 | this.modalVisiable = false; | ||
60 | this.modalSimpleVisiable = false; | ||
51 | }, | 61 | }, |
52 | resetPwd() { | 62 | resetPwd() { |
63 | if (this.submitBtnDisabled) { | ||
64 | return; | ||
65 | } | ||
53 | if (!this.values.oldPwd) { | 66 | if (!this.values.oldPwd) { |
54 | this.step.error0 = this.i18n().passwordReset.oldPwdPlaceholde; | 67 | this.step.error0 = this.i18n().passwordReset.oldPwdPlaceholde; |
55 | return; | 68 | return; |
... | @@ -139,9 +152,18 @@ export default { | ... | @@ -139,9 +152,18 @@ export default { |
139 | } | 152 | } |
140 | }, | 153 | }, |
141 | }, | 154 | }, |
155 | computed: { | ||
156 | submitBtnDisabled() { | ||
157 | let b1 = !this.values.oldPwd ? true : false; | ||
158 | let b2 = !this.values.pwd ? true : false; | ||
159 | let b3 = !this.values.pwdRepeat ? true : false; | ||
160 | return b1 || b2 || b3; | ||
161 | } | ||
162 | }, | ||
142 | mounted() { }, | 163 | mounted() { }, |
143 | created() { }, | 164 | created() { }, |
144 | components: { | 165 | components: { |
145 | modalComp | 166 | modalComp, |
167 | modalSimpleComp | ||
146 | } | 168 | } |
147 | } | 169 | } | ... | ... |
1 | 1 | ||
2 | <template> | 2 | <template> |
3 | <div class="content"> | 3 | <div> |
4 | <modal-simple-comp :visible="modalSimpleVisiable" :show-confirm="false" :icon="modalIcon" :content="modalContent" :confirm="closeModal" :overlay="closeModal" :close="closeModal"></modal-simple-comp> | ||
4 | <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> |
5 | <div class="ebg"> | 6 | <div class="content"> |
6 | <img src="@/assets/images/common/login-bg.png"> | 7 | <div class="ebg"> |
7 | </div> | 8 | <img src="@/assets/images/common/login-bg.png"> |
8 | <div class="top-space"></div> | 9 | </div> |
9 | <div class="box"> | 10 | <div class="top-space"></div> |
10 | <div class="login"> | 11 | <div class="box"> |
11 | <div class="login-tit">{{$t('passwordReset.type4.title')}}</div> | 12 | <div class="login"> |
12 | <div class="login-tit-space-4"></div> | 13 | <div class="login-tit">{{$t('passwordReset.type4.title')}}</div> |
13 | <div class="gird-g form"> | 14 | <div class="login-tit-space-4"></div> |
14 | <div class="pure-u-1 form-item"> | 15 | <div class="gird-g form"> |
15 | <div class="label"> | 16 | <div class="pure-u-1 form-item"> |
16 | <img src="@/assets/images/register/icon-register-lock.png"> {{$t('passwordReset.oldPwd')}} | 17 | <div class="label"> |
17 | </div> | 18 | <img src="@/assets/images/register/icon-register-lock.png"> {{$t('passwordReset.oldPwd')}} |
18 | <div class="ipt-wrap"> | 19 | </div> |
19 | <input :placeholder="$t('passwordReset.oldPwdPlaceholde')" class="ipt" type="password" v-model="values.oldPwd"> | 20 | <div class="ipt-wrap"> |
20 | </div> | 21 | <input :placeholder="$t('passwordReset.oldPwdPlaceholde')" class="ipt" type="password" v-model="values.oldPwd"> |
21 | <div class="validator" v-if="step.error0.length > 0 "> | 22 | </div> |
22 | <img src="@/assets/images/common/icon-notice.png" alt=""> {{step.error0}} | 23 | <div class="validator" v-if="step.error0.length > 0 "> |
23 | </div> | 24 | <img src="@/assets/images/common/icon-notice.png" alt=""> {{step.error0}} |
24 | </div> | 25 | </div> |
25 | <div class="pure-u-1 form-item"> | 26 | </div> |
26 | <div class="label"> | 27 | <div class="pure-u-1 form-item"> |
27 | <img src="@/assets/images/register/icon-register-lock.png"> {{$t('passwordReset.type4.t1')}} | 28 | <div class="label"> |
28 | </div> | 29 | <img src="@/assets/images/register/icon-register-lock.png"> {{$t('passwordReset.type4.t1')}} |
29 | <div class="ipt-wrap"> | 30 | </div> |
30 | <input :placeholder="$t('passwordReset.type4.t1Placeholder')" class="ipt" type="password" v-model="values.pwd"> | 31 | <div class="ipt-wrap"> |
31 | </div> | 32 | <input :placeholder="$t('passwordReset.type4.t1Placeholder')" class="ipt" type="password" v-model="values.pwd"> |
32 | <div class="validator" v-if="step.error1.length > 0 "> | 33 | </div> |
33 | <img src="@/assets/images/common/icon-notice.png" alt=""> {{step.error1}} | 34 | <div class="validator" v-if="step.error1.length > 0 "> |
34 | </div> | 35 | <img src="@/assets/images/common/icon-notice.png" alt=""> {{step.error1}} |
35 | </div> | 36 | </div> |
36 | <div class="pure-u-1 form-item"> | 37 | </div> |
37 | <div class="label"> | 38 | <div class="pure-u-1 form-item"> |
38 | <img src="@/assets/images/register/icon-register-lock.png"> {{$t('passwordReset.type4.t2')}} | 39 | <div class="label"> |
39 | </div> | 40 | <img src="@/assets/images/register/icon-register-lock.png"> {{$t('passwordReset.type4.t2')}} |
40 | <div class="ipt-wrap"> | 41 | </div> |
41 | <input :placeholder="$t('passwordReset.type4.t2Placeholder')" class="ipt" type="password" v-model="values.pwdRepeat"> | 42 | <div class="ipt-wrap"> |
42 | </div> | 43 | <input :placeholder="$t('passwordReset.type4.t2Placeholder')" class="ipt" type="password" v-model="values.pwdRepeat"> |
43 | <div class="validator" v-if="step.error2.length > 0 "> | 44 | </div> |
44 | <img src="@/assets/images/common/icon-notice.png" alt=""> {{step.error2}} | 45 | <div class="validator" v-if="step.error2.length > 0 "> |
46 | <img src="@/assets/images/common/icon-notice.png" alt=""> {{step.error2}} | ||
47 | </div> | ||
45 | </div> | 48 | </div> |
46 | </div> | 49 | </div> |
50 | <div @click="resetPwd()" class="login-submit pointer" :class="{disabled: submitBtnDisabled}">{{$t('passwordReset.type4.submit')}}</div> | ||
47 | </div> | 51 | </div> |
48 | <div @click="resetPwd()" class="login-submit pointer">{{$t('passwordReset.type4.submit')}}</div> | ||
49 | </div> | 52 | </div> |
50 | </div> | 53 | </div> |
51 | </div> | 54 | </div> | ... | ... |
... | @@ -5,6 +5,7 @@ import { | ... | @@ -5,6 +5,7 @@ import { |
5 | } from '@/api/fetch-api.js' | 5 | } from '@/api/fetch-api.js' |
6 | 6 | ||
7 | import modalComp from '@/components/modal-comp/modal-comp.vue'; | 7 | import modalComp from '@/components/modal-comp/modal-comp.vue'; |
8 | import modalSimpleComp from '@/components/modal-simple-comp/modal-simple-comp.vue'; | ||
8 | import { passwordEncrypt } from '@/utils/encrypt.js'; | 9 | import { passwordEncrypt } from '@/utils/encrypt.js'; |
9 | 10 | ||
10 | export default { | 11 | export default { |
... | @@ -47,6 +48,7 @@ export default { | ... | @@ -47,6 +48,7 @@ export default { |
47 | p4: "",// 密碼 | 48 | p4: "",// 密碼 |
48 | p5: "",// 確認密碼 | 49 | p5: "",// 確認密碼 |
49 | }, | 50 | }, |
51 | modalSimpleVisiable: false, | ||
50 | modalVisiable: false, | 52 | modalVisiable: false, |
51 | targetPath: "", | 53 | targetPath: "", |
52 | modalIcon: "succ", | 54 | modalIcon: "succ", |
... | @@ -54,7 +56,8 @@ export default { | ... | @@ -54,7 +56,8 @@ export default { |
54 | } | 56 | } |
55 | }, | 57 | }, |
56 | components: { | 58 | components: { |
57 | modalComp | 59 | modalComp, |
60 | modalSimpleComp | ||
58 | }, | 61 | }, |
59 | computed: { | 62 | computed: { |
60 | locale() { | 63 | locale() { |
... | @@ -62,14 +65,34 @@ export default { | ... | @@ -62,14 +65,34 @@ export default { |
62 | }, | 65 | }, |
63 | i18n() { | 66 | i18n() { |
64 | return this.$i18n.messages && this.$i18n.locale ? this.$i18n.messages[this.$i18n.locale] : {}; | 67 | return this.$i18n.messages && this.$i18n.locale ? this.$i18n.messages[this.$i18n.locale] : {}; |
68 | }, | ||
69 | registerDisabled() { | ||
70 | let b1 = !this.registerCheck.agreeProtocol; | ||
71 | let b2 = !this.values.token; | ||
72 | let b3 = this.values.vcodeuuid && !this.registerForm.imageValue; | ||
73 | let b4 = !this.registerForm.opt; | ||
74 | return b1 || b2 || b3 || b4; | ||
75 | }, | ||
76 | submitDisabled() { | ||
77 | let b1 = !this.values.password ? true : false; | ||
78 | let b2 = !this.values.passwordRepeat ? true : false; | ||
79 | return b1 || b2; | ||
65 | } | 80 | } |
66 | }, | 81 | }, |
67 | methods: { | 82 | methods: { |
68 | showModal(content, icon) { | 83 | showModal(content, icon) { |
69 | icon = !icon || typeof icon === "undefined" ? "succ" : "succ"; | 84 | icon = !icon || typeof icon === "undefined" ? "succ" : icon; |
70 | this.modalIcon = icon; | 85 | this.modalIcon = icon; |
71 | this.modalContent = content; | 86 | this.modalContent = content; |
72 | this.modalVisiable = true; | 87 | if (icon == "succ") { |
88 | this.modalVisiable = true; | ||
89 | } else { | ||
90 | this.modalSimpleVisiable = true; | ||
91 | } | ||
92 | }, | ||
93 | closeModal() { | ||
94 | this.modalVisiable = false; | ||
95 | this.modalSimpleVisiable = false; | ||
73 | }, | 96 | }, |
74 | onProtocolHandler() { | 97 | onProtocolHandler() { |
75 | this.$router.push({ | 98 | this.$router.push({ |
... | @@ -97,12 +120,13 @@ export default { | ... | @@ -97,12 +120,13 @@ export default { |
97 | return new Promise((resolve, reject) => { | 120 | return new Promise((resolve, reject) => { |
98 | let mobile = this.registerForm.mobileNo; | 121 | let mobile = this.registerForm.mobileNo; |
99 | if (this.mobileNoType == "hk") { | 122 | if (this.mobileNoType == "hk") { |
100 | if (mobile.length != 8) { | 123 | if (mobile.length != 8 && !/^[5689]{1}\d{7}$/.test(mobile)) { |
101 | this._showMobileNoIllegalTip() | 124 | this._showMobileNoIllegalTip() |
102 | return; | 125 | return; |
103 | } | 126 | } |
104 | } else { | 127 | } else { |
105 | if (mobile.length != 11) { | 128 | if (mobile.length != 11 && |
129 | !/^((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(mobile)) { | ||
106 | this._showMobileNoIllegalTip() | 130 | this._showMobileNoIllegalTip() |
107 | return; | 131 | return; |
108 | } | 132 | } |
... | @@ -188,6 +212,9 @@ export default { | ... | @@ -188,6 +212,9 @@ export default { |
188 | }, | 212 | }, |
189 | onSubmitHandler() { | 213 | onSubmitHandler() { |
190 | // this.type = 2; | 214 | // this.type = 2; |
215 | if (this.registerDisabled) { | ||
216 | return; | ||
217 | } | ||
191 | this._checkParams().then(() => { | 218 | this._checkParams().then(() => { |
192 | this._regCheck().then(() => { | 219 | this._regCheck().then(() => { |
193 | // 验证短信验证码 | 220 | // 验证短信验证码 | ... | ... |
1 | 1 | ||
2 | <template> | 2 | <template> |
3 | <div class="content"> | 3 | <div> |
4 | <modal-simple-comp :visible="modalSimpleVisiable" :show-confirm="false" :icon="modalIcon" :content="modalContent" :confirm="modalCallback" :overlay="closeModal" :close="closeModal"></modal-simple-comp> | ||
4 | <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> |
5 | <div class="ebg"> | 6 | <div class="content"> |
6 | <img src="@/assets/images/common/login-bg.png"> | 7 | <div class="ebg"> |
7 | </div> | 8 | <img src="@/assets/images/common/login-bg.png"> |
8 | <div class="top-space"></div> | 9 | </div> |
9 | <div class="step"> | 10 | <div class="top-space"></div> |
10 | <img v-if="type == 1" src="@/assets/images/register/register-step-1.png"> | 11 | <div class="step"> |
11 | <img v-if="type == 2" src="@/assets/images/register/register-step-2.png"> | 12 | <img v-if="type == 1" src="@/assets/images/register/register-step-1.png"> |
12 | </div> | 13 | <img v-if="type == 2" src="@/assets/images/register/register-step-2.png"> |
13 | <div class="box"> | 14 | </div> |
14 | <!-- 手机验证 --> | 15 | <div class="box"> |
15 | <div v-if="type == 1" class="login"> | 16 | <!-- 手机验证 --> |
17 | <div v-if="type == 1" class="login"> | ||
16 | 18 | ||
17 | <div class="login-tit"> | 19 | <div class="login-tit"> |
18 | <img v-if="locale == 'zh'" src="@/assets/images/login/login-tit-zh.png"> | 20 | <img v-if="locale == 'zh'" src="@/assets/images/login/login-tit-zh.png"> |
19 | <img v-if="locale == 'tc'" src="@/assets/images/login/login-tit-tc.png"> | 21 | <img v-if="locale == 'tc'" src="@/assets/images/login/login-tit-tc.png"> |
20 | <img v-if="locale == 'en'" class="img-en" src="@/assets/images/login/login-tit-en.png"> | 22 | <img v-if="locale == 'en'" class="img-en" src="@/assets/images/login/login-tit-en.png"> |
21 | </div> | ||
22 | <div class="login-tit2">{{$t('register.title')}}</div> | ||
23 | <div class="gird-g form"> | ||
24 | <div class="pure-u-1 form-item"> | ||
25 | <div class="ipt-wrap"> | ||
26 | <img class="down-arrow" src="@/assets/images/reservation/re-down-arrow.png" alt=""> | ||
27 | <select class="ipt" v-model="mobileNoType"> | ||
28 | <option v-for="(item,index) in mobileOptions" :key="index" :value="item.type">{{item.name}}</option> | ||
29 | </select> | ||
30 | </div> | ||
31 | </div> | 23 | </div> |
32 | <div class="pure-u-1 form-item"> | 24 | <div class="login-tit2">{{$t('register.title')}}</div> |
33 | <div class="ipt-wrap"> | 25 | <div class="gird-g form"> |
34 | <div class="ipt ipt2" :class="{err : errorTips.p1.length > 0}"> | 26 | <div class="pure-u-1 form-item"> |
35 | <div class="region-tel">{{mobileTip.areaCode}}</div> | 27 | <div class="ipt-wrap"> |
36 | <input :placeholder="mobileTip.placeHolder" class="ipt-tel" type="text" v-model="registerForm.mobileNo"> | 28 | <img class="down-arrow" src="@/assets/images/reservation/re-down-arrow.png" alt=""> |
29 | <select class="ipt" v-model="mobileNoType"> | ||
30 | <option v-for="(item,index) in mobileOptions" :key="index" :value="item.type">{{item.name}}</option> | ||
31 | </select> | ||
37 | </div> | 32 | </div> |
38 | </div> | 33 | </div> |
39 | <div class="validator" v-if="errorTips.p1.length > 0 "> | 34 | <div class="pure-u-1 form-item"> |
40 | <img src="@/assets/images/common/icon-notice.png" alt="">{{errorTips.p1}} | 35 | <div class="ipt-wrap"> |
36 | <div class="ipt ipt2" :class="{err : errorTips.p1.length > 0}"> | ||
37 | <div class="region-tel">{{mobileTip.areaCode}}</div> | ||
38 | <input :placeholder="mobileTip.placeHolder" class="ipt-tel" type="text" v-model="registerForm.mobileNo"> | ||
39 | </div> | ||
40 | </div> | ||
41 | <div class="validator" v-if="errorTips.p1.length > 0 "> | ||
42 | <img src="@/assets/images/common/icon-notice.png" alt="">{{errorTips.p1}} | ||
43 | </div> | ||
41 | </div> | 44 | </div> |
42 | </div> | ||
43 | 45 | ||
44 | <div class="pure-u-1 form-item" v-if="registerCheck.showImageCode"> | 46 | <div class="pure-u-1 form-item" v-if="registerCheck.showImageCode"> |
45 | <div class="ipt-wrap"> | 47 | <div class="ipt-wrap"> |
46 | <input :placeholder="$t('login.verifyPlaceholder')" class="ipt ipt-verify" :class="{err : errorTips.p3.length > 0}" type="text" v-model="registerForm.imageValue"> | 48 | <input :placeholder="$t('login.verifyPlaceholder')" class="ipt ipt-verify" :class="{err : errorTips.p3.length > 0}" type="text" v-model="registerForm.imageValue"> |
47 | <div class="ipt verify-btn pointer vcode" @click="handlerRefreshImageVcode"> | 49 | <div class="ipt verify-btn pointer vcode" @click="handlerRefreshImageVcode"> |
48 | <img :src="values.imageBase64"> | 50 | <img :src="values.imageBase64"> |
51 | </div> | ||
49 | </div> | 52 | </div> |
50 | </div> | 53 | <div class="validator" v-if="errorTips.p3.length > 0 "> |
51 | <div class="validator" v-if="errorTips.p3.length > 0 "> | 54 | <img src="@/assets/images/common/icon-notice.png" alt="">{{errorTips.p3}} |
52 | <img src="@/assets/images/common/icon-notice.png" alt="">{{errorTips.p3}} | ||
53 | </div> | ||
54 | </div> | ||
55 | <div class="pure-u-1 form-item"> | ||
56 | <div class="ipt-wrap"> | ||
57 | <div class="ipt ipt2" :class="{err : errorTips.p2.length > 0}"> | ||
58 | <input :placeholder="$t('register.verifyCodePlaceholder')" class="ipt-code" type="text" v-model="registerForm.opt"> | ||
59 | <div v-if="times.remain == 0" class="veri-btn pointer" @click="handlerStdSendOTP">{{$t('register.verifyCodeGet')}}</div> | ||
60 | <div v-else class="veri-btn-default">{{times.tip}}</div> | ||
61 | </div> | 55 | </div> |
62 | </div> | 56 | </div> |
63 | <div class="validator" v-if="errorTips.p2.length > 0 "> | 57 | <div class="pure-u-1 form-item"> |
64 | <img src="@/assets/images/common/icon-notice.png" alt="">{{errorTips.p2}} | 58 | <div class="ipt-wrap"> |
59 | <div class="ipt ipt2" :class="{err : errorTips.p2.length > 0}"> | ||
60 | <input :placeholder="$t('register.verifyCodePlaceholder')" class="ipt-code" type="text" v-model="registerForm.opt"> | ||
61 | <div v-if="times.remain == 0" class="veri-btn pointer" @click="handlerStdSendOTP">{{$t('register.verifyCodeGet')}}</div> | ||
62 | <div v-else class="veri-btn-default">{{times.tip}}</div> | ||
63 | </div> | ||
64 | </div> | ||
65 | <div class="validator" v-if="errorTips.p2.length > 0 "> | ||
66 | <img src="@/assets/images/common/icon-notice.png" alt="">{{errorTips.p2}} | ||
67 | </div> | ||
65 | </div> | 68 | </div> |
66 | </div> | 69 | </div> |
67 | </div> | ||
68 | 70 | ||
69 | <div class="login-protocol pointer" @click="registerCheck.agreeProtocol = !registerCheck.agreeProtocol"> | 71 | <div class="login-protocol pointer" @click="registerCheck.agreeProtocol = !registerCheck.agreeProtocol"> |
70 | <img v-if="!registerCheck.agreeProtocol" class="check" src="@/assets/images/login/un-check.png"> | 72 | <img v-if="!registerCheck.agreeProtocol" class="check" src="@/assets/images/login/un-check.png"> |
71 | <img v-if="registerCheck.agreeProtocol" class="check" src="@/assets/images/login/check.png"> {{$t('login.agree')}} | 73 | <img v-if="registerCheck.agreeProtocol" class="check" src="@/assets/images/login/check.png"> {{$t('login.agree')}} |
72 | <span @click="onProtocolHandler()" class="protocol pointer">{{$t('login.protocol')}}</span> | 74 | <span @click="onProtocolHandler()" class="protocol pointer">{{$t('login.protocol')}}</span> |
73 | </div> | 75 | </div> |
74 | <div @click="onSubmitHandler()" class="login-submit pointer">{{$t('register.register')}}</div> | 76 | <div @click="onSubmitHandler()" class="login-submit pointer" :class="{disabled: registerDisabled}">{{$t('register.register')}}</div> |
75 | </div> | ||
76 | <!-- 输入密码 --> | ||
77 | <div v-if="type == 2" class="login"> | ||
78 | <div class="login-tit"> | ||
79 | <img v-if="locale == 'zh'" src="@/assets/images/login/login-tit-zh.png"> | ||
80 | <img v-if="locale == 'tc'" src="@/assets/images/login/login-tit-tc.png"> | ||
81 | <img v-if="locale == 'en'" class="img-en" src="@/assets/images/login/login-tit-en.png"> | ||
82 | </div> | 77 | </div> |
83 | <div class="login-tit2">{{$t('register.title2')}}</div> | 78 | <!-- 输入密码 --> |
84 | <div class="gird-g form"> | 79 | <div v-if="type == 2" class="login"> |
85 | <div class="pure-u-1 form-item"> | 80 | <div class="login-tit"> |
86 | <div class="label"> | 81 | <img v-if="locale == 'zh'" src="@/assets/images/login/login-tit-zh.png"> |
87 | <img src="@/assets/images/register/icon-register-lock.png"> {{$t('register.newPassword')}} | 82 | <img v-if="locale == 'tc'" src="@/assets/images/login/login-tit-tc.png"> |
88 | </div> | 83 | <img v-if="locale == 'en'" class="img-en" src="@/assets/images/login/login-tit-en.png"> |
89 | <div class="ipt-wrap"> | ||
90 | <input :placeholder="$t('register.newPasswordPlaceholder')" class="ipt" :class="{err : errorTips.p4.length > 0}" type="password" v-model="values.password"> | ||
91 | </div> | ||
92 | <div class="validator" v-if="errorTips.p4.length > 0 "> | ||
93 | <img src="@/assets/images/common/icon-notice.png" alt="">{{errorTips.p4}} | ||
94 | </div> | ||
95 | </div> | 84 | </div> |
96 | <div class="pure-u-1 form-item"> | 85 | <div class="login-tit2">{{$t('register.title2')}}</div> |
97 | <div class="label"> | 86 | <div class="gird-g form"> |
98 | <img src="@/assets/images/register/icon-register-lock.png"> {{$t('register.newPasswordSure')}} | 87 | <div class="pure-u-1 form-item"> |
99 | </div> | 88 | <div class="label"> |
100 | <div class="ipt-wrap"> | 89 | <img src="@/assets/images/register/icon-register-lock.png"> {{$t('register.newPassword')}} |
101 | <input :placeholder="$t('register.newPasswordSurePlaceholder')" class="ipt" :class="{err : errorTips.p5.length > 0}" type="password" v-model="values.passwordRepeat"> | 90 | </div> |
91 | <div class="ipt-wrap"> | ||
92 | <input :placeholder="$t('register.newPasswordPlaceholder')" class="ipt" :class="{err : errorTips.p4.length > 0}" type="password" v-model="values.password"> | ||
93 | </div> | ||
94 | <div class="validator" v-if="errorTips.p4.length > 0 "> | ||
95 | <img src="@/assets/images/common/icon-notice.png" alt="">{{errorTips.p4}} | ||
96 | </div> | ||
102 | </div> | 97 | </div> |
103 | <div class="validator" v-if="errorTips.p5.length > 0 "> | 98 | <div class="pure-u-1 form-item"> |
104 | <img src="@/assets/images/common/icon-notice.png" alt="">{{errorTips.p5}} | 99 | <div class="label"> |
100 | <img src="@/assets/images/register/icon-register-lock.png"> {{$t('register.newPasswordSure')}} | ||
101 | </div> | ||
102 | <div class="ipt-wrap"> | ||
103 | <input :placeholder="$t('register.newPasswordSurePlaceholder')" class="ipt" :class="{err : errorTips.p5.length > 0}" type="password" v-model="values.passwordRepeat"> | ||
104 | </div> | ||
105 | <div class="validator" v-if="errorTips.p5.length > 0 "> | ||
106 | <img src="@/assets/images/common/icon-notice.png" alt="">{{errorTips.p5}} | ||
107 | </div> | ||
105 | </div> | 108 | </div> |
106 | </div> | 109 | </div> |
110 | <div @click="onRegisterHandler()" class="login-submit pointer" :class="{disabled: submitDisabled}">{{$t('register.sure')}}</div> | ||
107 | </div> | 111 | </div> |
108 | <div @click="onRegisterHandler()" class="login-submit pointer">{{$t('register.sure')}}</div> | ||
109 | </div> | 112 | </div> |
110 | </div> | 113 | </div> |
111 | </div> | 114 | </div> | ... | ... |
... | @@ -67,6 +67,7 @@ | ... | @@ -67,6 +67,7 @@ |
67 | } | 67 | } |
68 | 68 | ||
69 | .disabled { | 69 | .disabled { |
70 | cursor: default !important; | ||
70 | color: $cFontGray !important; | 71 | color: $cFontGray !important; |
71 | background-color: #dcdddd !important; | 72 | background-color: #dcdddd !important; |
72 | background-image: none !important; | 73 | background-image: none !important; | ... | ... |
-
Please register or sign in to post a comment