密码找回
Showing
17 changed files
with
931 additions
and
132 deletions
| 1 | module.exports = { | 1 | module.exports = { |
| 2 | logout : "/pingan_hklife_webapi/logout", | 2 | logout : "/pingan_hklife_webapi/user/logout", |
| 3 | // 是否显示图形验证码接口 | 3 | // 是否显示图形验证码接口 |
| 4 | stdIsShowImageVcode : "/pingan_hklife_webapi/auth/stdIsShowImageVcode", | 4 | stdIsShowImageVcode : "/pingan_hklife_webapi/auth/stdIsShowImageVcode", |
| 5 | // 刷新图形验证码接口 | 5 | // 刷新图形验证码接口 |
| ... | @@ -14,13 +14,16 @@ module.exports = { | ... | @@ -14,13 +14,16 @@ module.exports = { |
| 14 | gsLogin : "/pingan_hklife_webapi/auth/gsLogin", | 14 | gsLogin : "/pingan_hklife_webapi/auth/gsLogin", |
| 15 | // 注册接口 | 15 | // 注册接口 |
| 16 | stdRegister : "/pingan_hklife_webapi/auth/stdRegister", | 16 | stdRegister : "/pingan_hklife_webapi/auth/stdRegister", |
| 17 | // 找回密码定位用户信息 | 17 | // 修改密码 |
| 18 | gsLocateUserV2 : "/pingan_hklife_webapi/auth/gsLocateUserV2", | 18 | changePassword : "/pingan_hklife_webapi/password/change", |
| 19 | // 账户整合忘记密码重置用户密码 | ||
| 20 | gsResetPwd : "/pingan_hklife_webapi/auth/gsResetPwd", | ||
| 21 | // 账户整合修改密码接口 | ||
| 22 | gsModifyPwd : "/pingan_hklife_webapi/auth/gsModifyPwd", | ||
| 23 | // 短信验证码登录 | 19 | // 短信验证码登录 |
| 24 | otpLogin : "/pingan_hklife_webapi/otpLogin", | 20 | otpLogin : "/pingan_hklife_webapi/otpLogin", |
| 25 | 21 | // 找回密码:定位用户信息 | |
| 22 | locateUserInfo : "/pingan_hklife_webapi/reset/locateUserInfo", | ||
| 23 | // 找回密码:发送验证码 | ||
| 24 | sendOtp : "/pingan_hklife_webapi/reset/sendOtp", | ||
| 25 | // 找回密码:校验验证码 | ||
| 26 | checkOtp : "/pingan_hklife_webapi/reset/checkOtp", | ||
| 27 | // 找回密码:重置密码 | ||
| 28 | resetPwd : "/pingan_hklife_webapi/reset/resetPwd", | ||
| 26 | } | 29 | } |
| ... | \ No newline at end of file | ... | \ No newline at end of file | ... | ... |
| 1 | import axiosIns from 'axios'; | 1 | import axiosIns from 'axios'; |
| 2 | import state from '@/store/state.js'; | ||
| 2 | // import { | 3 | // import { |
| 3 | // Toast | 4 | // Toast |
| 4 | // } from 'vant'; | 5 | // } from 'vant'; |
| ... | @@ -15,7 +16,8 @@ function Toast(msg) { | ... | @@ -15,7 +16,8 @@ function Toast(msg) { |
| 15 | // let base = COM.baseUrl; | 16 | // let base = COM.baseUrl; |
| 16 | let base = ""; | 17 | let base = ""; |
| 17 | const axios = axiosIns.create({ | 18 | const axios = axiosIns.create({ |
| 18 | baseURL: process.env.VUE_APP_BASE_URL || "http://localhost:9101", | 19 | // baseURL: process.env.VUE_APP_BASE_URL || "http://localhost:9101", |
| 20 | baseURL: "http://localhost:9101", | ||
| 19 | timeout: 5000 | 21 | timeout: 5000 |
| 20 | }) | 22 | }) |
| 21 | 23 | ||
| ... | @@ -119,11 +121,20 @@ let formDataHeaders = { | ... | @@ -119,11 +121,20 @@ let formDataHeaders = { |
| 119 | export const httpGet = params => { | 121 | export const httpGet = params => { |
| 120 | let { | 122 | let { |
| 121 | url, | 123 | url, |
| 122 | data | 124 | data, |
| 125 | sid | ||
| 123 | } = params; | 126 | } = params; |
| 127 | let headers = {}; | ||
| 128 | if (sid) { | ||
| 129 | headers = { | ||
| 130 | headers : { | ||
| 131 | sid : state.userInfo.sid | ||
| 132 | } | ||
| 133 | } | ||
| 134 | } | ||
| 124 | return axios.get(`${base}${url}`, { | 135 | return axios.get(`${base}${url}`, { |
| 125 | params: data | 136 | params: data |
| 126 | }).then(res => res.data.content); | 137 | }, headers).then(res => res.data.content); |
| 127 | } | 138 | } |
| 128 | 139 | ||
| 129 | /** | 140 | /** |
| ... | @@ -133,9 +144,18 @@ export const httpGet = params => { | ... | @@ -133,9 +144,18 @@ export const httpGet = params => { |
| 133 | export const httpPost = params => { | 144 | export const httpPost = params => { |
| 134 | let { | 145 | let { |
| 135 | url, | 146 | url, |
| 136 | data | 147 | data, |
| 148 | sid | ||
| 137 | } = params; | 149 | } = params; |
| 138 | return axios.post(`${base}${url}`, data).then(res => res.data.content); | 150 | let headers = {}; |
| 151 | if (sid) { | ||
| 152 | headers = { | ||
| 153 | headers : { | ||
| 154 | sid : state.userInfo.sid | ||
| 155 | } | ||
| 156 | } | ||
| 157 | } | ||
| 158 | return axios.post(`${base}${url}`, data, headers).then(res => res.data.content); | ||
| 139 | } | 159 | } |
| 140 | 160 | ||
| 141 | 161 | ... | ... |
src/assets/images/common/icon-info.png
0 → 100644
8.38 KB
| ... | @@ -25,7 +25,7 @@ module.exports = { | ... | @@ -25,7 +25,7 @@ module.exports = { |
| 25 | }, | 25 | }, |
| 26 | { | 26 | { |
| 27 | name: "modify password", | 27 | name: "modify password", |
| 28 | path: "", | 28 | path: "/password/reset", |
| 29 | type: "auth", | 29 | type: "auth", |
| 30 | value: "" | 30 | value: "" |
| 31 | }, | 31 | }, |
| ... | @@ -136,6 +136,9 @@ module.exports = { | ... | @@ -136,6 +136,9 @@ module.exports = { |
| 136 | verifyCodePlaceholder: "驗證碼", | 136 | verifyCodePlaceholder: "驗證碼", |
| 137 | verifyCodeGet: "獲取驗證碼", | 137 | verifyCodeGet: "獲取驗證碼", |
| 138 | }, | 138 | }, |
| 139 | session: { | ||
| 140 | sidExpire: "長時間未操作,為了您賬戶的安全,請登錄後再操作", | ||
| 141 | }, | ||
| 139 | register: { | 142 | register: { |
| 140 | mobileOptions: [{ | 143 | mobileOptions: [{ |
| 141 | type: "hk", | 144 | type: "hk", |
| ... | @@ -163,18 +166,33 @@ module.exports = { | ... | @@ -163,18 +166,33 @@ module.exports = { |
| 163 | newPasswordSurePlaceholder: "輸入登錄密碼", | 166 | newPasswordSurePlaceholder: "輸入登錄密碼", |
| 164 | sure: "確認", | 167 | sure: "確認", |
| 165 | }, | 168 | }, |
| 169 | passwordCheck: { | ||
| 170 | error1: "密碼長度不少於8位", | ||
| 171 | error2: "密碼中必須包含數字、字符以及特殊號碼", | ||
| 172 | error3: "两次密码不一致,请确认后重新输入", | ||
| 173 | error4: "密碼修改失敗,請稍後再試,或拨打客服电话95511解决", | ||
| 174 | error5: "舊密碼不正確,請重新輸入", | ||
| 175 | success: "密码修改成功" | ||
| 176 | }, | ||
| 166 | passwordReset: { | 177 | passwordReset: { |
| 178 | oldPwd: "旧密码", | ||
| 179 | oldPwdPlaceholde: "請輸入舊密碼", | ||
| 180 | cidExpire: "長時間未操作,為了您賬戶的安全,請重新開始", | ||
| 167 | type1: { | 181 | type1: { |
| 168 | title: "密碼找回", | 182 | title: "密碼找回", |
| 169 | t1: "用戶輸入信息", | 183 | t1: "用戶輸入信息", |
| 170 | t1Placeholder: "手機號/一賬通用戶名", | 184 | t1Placeholder: "手機號/一賬通用戶名", |
| 171 | submit: "確認", | 185 | submit: "確認", |
| 186 | error: "您的手機號或證件號輸入錯誤,請核對后重新輸入", | ||
| 172 | }, | 187 | }, |
| 173 | type2: { | 188 | type2: { |
| 174 | title: "密碼找回", | 189 | title: "密碼找回", |
| 175 | t1: "手機短信驗證碼", | 190 | t1: "手機短信驗證碼", |
| 176 | t1Placeholder: "請輸入驗證碼", | 191 | t1Placeholder: "請輸入驗證碼", |
| 177 | submit: "確認", | 192 | submit: "確認", |
| 193 | error1: "短信驗證碼輸入錯誤,請核對後重新輸入", | ||
| 194 | error2: "短信驗證碼已經過期,請重新獲取驗證碼", | ||
| 195 | error3: "短信验证码发放时间少于1分钟,请稍后再试", | ||
| 178 | }, | 196 | }, |
| 179 | type3: { | 197 | type3: { |
| 180 | title: "密碼找回", | 198 | title: "密碼找回", |
| ... | @@ -189,6 +207,8 @@ module.exports = { | ... | @@ -189,6 +207,8 @@ module.exports = { |
| 189 | t2: "確認密碼", | 207 | t2: "確認密碼", |
| 190 | t2Placeholder: "請重新輸入新密碼", | 208 | t2Placeholder: "請重新輸入新密碼", |
| 191 | submit: "確認", | 209 | submit: "確認", |
| 210 | error1: "密碼長度不少於8位", | ||
| 211 | error2: "密碼中必須包含數字、字符以及特殊號碼", | ||
| 192 | } | 212 | } |
| 193 | }, | 213 | }, |
| 194 | infomationImprove: { | 214 | infomationImprove: { |
| ... | @@ -203,8 +223,8 @@ module.exports = { | ... | @@ -203,8 +223,8 @@ module.exports = { |
| 203 | t4Placeholder: "", | 223 | t4Placeholder: "", |
| 204 | t5: "證件號碼", | 224 | t5: "證件號碼", |
| 205 | t5Placeholder: "", | 225 | t5Placeholder: "", |
| 206 | submit:"確認", | 226 | submit: "確認", |
| 207 | cancel:"跳過", | 227 | cancel: "跳過", |
| 208 | }, | 228 | }, |
| 209 | index: { | 229 | index: { |
| 210 | news: "新聞資訊", | 230 | news: "新聞資訊", | ... | ... |
| ... | @@ -25,7 +25,7 @@ module.exports = { | ... | @@ -25,7 +25,7 @@ module.exports = { |
| 25 | }, | 25 | }, |
| 26 | { | 26 | { |
| 27 | name: "修改密碼", | 27 | name: "修改密碼", |
| 28 | path: "", | 28 | path: "/password/reset", |
| 29 | type: "auth", | 29 | type: "auth", |
| 30 | value: "" | 30 | value: "" |
| 31 | }, | 31 | }, |
| ... | @@ -163,18 +163,36 @@ module.exports = { | ... | @@ -163,18 +163,36 @@ module.exports = { |
| 163 | newPasswordSurePlaceholder: "輸入登錄密碼", | 163 | newPasswordSurePlaceholder: "輸入登錄密碼", |
| 164 | sure: "確認", | 164 | sure: "確認", |
| 165 | }, | 165 | }, |
| 166 | session: { | ||
| 167 | sidExpire: "長時間未操作,為了您賬戶的安全,請登錄後再操作", | ||
| 168 | }, | ||
| 169 | passwordCheck: { | ||
| 170 | error1: "密碼長度不少於8位", | ||
| 171 | error2: "密碼中必須包含數字、字符以及特殊號碼", | ||
| 172 | error3: "兩次密碼不一致,請確認後重新輸入", | ||
| 173 | error4 : "密碼修改失敗,請稍後再試,或撥打客服電話95511解決", | ||
| 174 | error5 : "舊密碼不正確,請重新輸入", | ||
| 175 | success: "密碼修改成功" | ||
| 176 | }, | ||
| 166 | passwordReset: { | 177 | passwordReset: { |
| 178 | oldPwd : "舊密碼", | ||
| 179 | oldPwdPlaceholde : "請輸入舊密碼", | ||
| 180 | cidExpire: "長時間未操作,為了您賬戶的安全,請重新開始", | ||
| 167 | type1: { | 181 | type1: { |
| 168 | title: "密碼找回", | 182 | title: "密碼找回", |
| 169 | t1: "用戶輸入信息", | 183 | t1: "用戶輸入信息", |
| 170 | t1Placeholder: "手機號/一賬通用戶名", | 184 | t1Placeholder: "手機號/證件號", |
| 171 | submit: "確認", | 185 | submit: "確認", |
| 186 | error: "您的手機號或證件號輸入錯誤,請核對后重新輸入", | ||
| 172 | }, | 187 | }, |
| 173 | type2: { | 188 | type2: { |
| 174 | title: "密碼找回", | 189 | title: "密碼找回", |
| 175 | t1: "手機短信驗證碼", | 190 | t1: "手機短信驗證碼", |
| 176 | t1Placeholder: "請輸入驗證碼", | 191 | t1Placeholder: "請輸入驗證碼", |
| 177 | submit: "確認", | 192 | submit: "確認", |
| 193 | error1: "短信驗證碼輸入錯誤,請核對後重新輸入", | ||
| 194 | error2: "短信驗證碼已經過期,請重新獲取驗證碼", | ||
| 195 | error3: "短信驗證碼發放時間少於1分鐘,請稍後再試", | ||
| 178 | }, | 196 | }, |
| 179 | type3: { | 197 | type3: { |
| 180 | title: "密碼找回", | 198 | title: "密碼找回", |
| ... | @@ -203,8 +221,8 @@ module.exports = { | ... | @@ -203,8 +221,8 @@ module.exports = { |
| 203 | t4Placeholder: "", | 221 | t4Placeholder: "", |
| 204 | t5: "證件號碼", | 222 | t5: "證件號碼", |
| 205 | t5Placeholder: "", | 223 | t5Placeholder: "", |
| 206 | submit:"確認", | 224 | submit: "確認", |
| 207 | cancel:"跳過", | 225 | cancel: "跳過", |
| 208 | }, | 226 | }, |
| 209 | index: { | 227 | index: { |
| 210 | news: "新聞資訊", | 228 | news: "新聞資訊", | ... | ... |
| ... | @@ -25,7 +25,7 @@ module.exports = { | ... | @@ -25,7 +25,7 @@ module.exports = { |
| 25 | }, | 25 | }, |
| 26 | { | 26 | { |
| 27 | name: "修改密码", | 27 | name: "修改密码", |
| 28 | path: "", | 28 | path: "/password/reset", |
| 29 | type: "auth", | 29 | type: "auth", |
| 30 | value: "" | 30 | value: "" |
| 31 | }, | 31 | }, |
| ... | @@ -136,6 +136,9 @@ module.exports = { | ... | @@ -136,6 +136,9 @@ module.exports = { |
| 136 | verifyCodePlaceholder: "验证码", | 136 | verifyCodePlaceholder: "验证码", |
| 137 | verifyCodeGet: "获取验证码", | 137 | verifyCodeGet: "获取验证码", |
| 138 | }, | 138 | }, |
| 139 | session: { | ||
| 140 | sidExpire: "长时间未操作,为了您的账户安全,请登录后再操作", | ||
| 141 | }, | ||
| 139 | register: { | 142 | register: { |
| 140 | mobileOptions: [{ | 143 | mobileOptions: [{ |
| 141 | type: "hk", | 144 | type: "hk", |
| ... | @@ -163,18 +166,33 @@ module.exports = { | ... | @@ -163,18 +166,33 @@ module.exports = { |
| 163 | newPasswordSurePlaceholder: "输入登录密码", | 166 | newPasswordSurePlaceholder: "输入登录密码", |
| 164 | sure: "确认", | 167 | sure: "确认", |
| 165 | }, | 168 | }, |
| 169 | passwordCheck: { | ||
| 170 | error1: "密码长度不少于8位", | ||
| 171 | error2: "密码中必须包含数字、字符以及特殊号码", | ||
| 172 | error3: "两次密码不一致,请确认后重新输入", | ||
| 173 | error4: "密码修改失败,请稍后再试,或拨打客服电话95511解决", | ||
| 174 | error5 : "旧密码不正确,请重新输入", | ||
| 175 | success: "密码修改成功" | ||
| 176 | }, | ||
| 166 | passwordReset: { | 177 | passwordReset: { |
| 178 | oldPwd : "旧密码", | ||
| 179 | oldPwdPlaceholde : "请输入旧密码", | ||
| 180 | cidExpire: "长时间未操作,为了您的账户安全,请重新开始", | ||
| 167 | type1: { | 181 | type1: { |
| 168 | title: "密码找回", | 182 | title: "密码找回", |
| 169 | t1: "用户输入信息", | 183 | t1: "用户输入信息", |
| 170 | t1Placeholder: "手机号/一账通用户名", | 184 | t1Placeholder: "手机号/证件号", |
| 171 | submit: "确认", | 185 | submit: "确认", |
| 186 | error: "您的手机号或证件号输入错误,请核对后重新输入", | ||
| 172 | }, | 187 | }, |
| 173 | type2: { | 188 | type2: { |
| 174 | title: "密码找回", | 189 | title: "密码找回", |
| 175 | t1: "手机短信验证码", | 190 | t1: "手机短信验证码", |
| 176 | t1Placeholder: "请输入验证码", | 191 | t1Placeholder: "请输入验证码", |
| 177 | submit: "确认", | 192 | submit: "确认", |
| 193 | error1: "短信验证码输入错误,请核对后重新输入", | ||
| 194 | error2: "短信验证码已经过期,请重新获取验证码", | ||
| 195 | error3: "短信验证码发放时间少于1分钟,请稍后再试", | ||
| 178 | }, | 196 | }, |
| 179 | type3: { | 197 | type3: { |
| 180 | title: "密码找回", | 198 | title: "密码找回", |
| ... | @@ -203,8 +221,8 @@ module.exports = { | ... | @@ -203,8 +221,8 @@ module.exports = { |
| 203 | t4Placeholder: "", | 221 | t4Placeholder: "", |
| 204 | t5: "证件号码", | 222 | t5: "证件号码", |
| 205 | t5Placeholder: "", | 223 | t5Placeholder: "", |
| 206 | submit:"确认", | 224 | submit: "确认", |
| 207 | cancel:"跳过", | 225 | cancel: "跳过", |
| 208 | }, | 226 | }, |
| 209 | index: { | 227 | index: { |
| 210 | news: "新闻资讯", | 228 | news: "新闻资讯", | ... | ... |
| ... | @@ -7,8 +7,9 @@ import { | ... | @@ -7,8 +7,9 @@ import { |
| 7 | httpPost | 7 | httpPost |
| 8 | } from '@/api/fetch-api.js' | 8 | } from '@/api/fetch-api.js' |
| 9 | 9 | ||
| 10 | let PK = 'B5FE03847F02046C47292AF0FF2DE88977241483DD40C123046EB39CBE4C48167B120096CFF12CD16559322884A3C56FA92B07B89AB51FC8C91A75127622151DDD730DFF1F993D5A290CEAC0BBA7FC88285D8994ACBAFF50101EDE9A0925AD5DFFAFE96D53C370E9C5B37DF2F871F81C4D7CA6B7EC37FF459C07975AD9A74A95'; | 10 | |
| 11 | let E = '10001'; | 11 | import { passwordEncrypt } from '@/utils/encrypt.js'; |
| 12 | |||
| 12 | 13 | ||
| 13 | export default { | 14 | export default { |
| 14 | data() { | 15 | data() { |
| ... | @@ -45,8 +46,6 @@ export default { | ... | @@ -45,8 +46,6 @@ export default { |
| 45 | showImageCode: false, | 46 | showImageCode: false, |
| 46 | agreeProtocol: false | 47 | agreeProtocol: false |
| 47 | }, | 48 | }, |
| 48 | PK: process.env.VUE_APP_RSA_PUBLIC_KEY || PK, | ||
| 49 | E: process.env.VUE_APP_RSA_KEY_INDEX || E, | ||
| 50 | } | 49 | } |
| 51 | }, | 50 | }, |
| 52 | components: {}, | 51 | components: {}, |
| ... | @@ -76,10 +75,12 @@ export default { | ... | @@ -76,10 +75,12 @@ export default { |
| 76 | onRegisterHandler() { | 75 | onRegisterHandler() { |
| 77 | this.$router.push({ | 76 | this.$router.push({ |
| 78 | path: "/register" | 77 | path: "/register" |
| 79 | }) | 78 | }); |
| 80 | }, | 79 | }, |
| 81 | onForgetHandler() { | 80 | onForgetHandler() { |
| 82 | 81 | this.$router.push({ | |
| 82 | path: "/password/find" | ||
| 83 | }); | ||
| 83 | }, | 84 | }, |
| 84 | onLoginTypeHandler(val) { | 85 | onLoginTypeHandler(val) { |
| 85 | this.type = val; | 86 | this.type = val; |
| ... | @@ -131,7 +132,7 @@ export default { | ... | @@ -131,7 +132,7 @@ export default { |
| 131 | data: { | 132 | data: { |
| 132 | deviceId: this.values.deviceId, | 133 | deviceId: this.values.deviceId, |
| 133 | loginName: this.loginForm.userId, | 134 | loginName: this.loginForm.userId, |
| 134 | loginPwd: this._passwordEncrypt(this.loginForm.password) | 135 | loginPwd: passwordEncrypt(this.loginForm.password) |
| 135 | } | 136 | } |
| 136 | }).then(response => { | 137 | }).then(response => { |
| 137 | this._handlerLoginResponse(response); | 138 | this._handlerLoginResponse(response); |
| ... | @@ -316,13 +317,6 @@ export default { | ... | @@ -316,13 +317,6 @@ export default { |
| 316 | } | 317 | } |
| 317 | return this.values.deviceId | 318 | return this.values.deviceId |
| 318 | }, | 319 | }, |
| 319 | _passwordEncrypt(rawPwd) { | ||
| 320 | let rsa = new RSAKey(); | ||
| 321 | rsa.setPublic(this.PK, this.E); | ||
| 322 | let res = rsa.encrypt(rawPwd); | ||
| 323 | if (res == null) return rawPwd; | ||
| 324 | return res; | ||
| 325 | } | ||
| 326 | }, | 320 | }, |
| 327 | watch: { | 321 | watch: { |
| 328 | type() { | 322 | type() { | ... | ... |
src/pages/password-find/password-find.js
0 → 100644
| 1 | import api from '@/api/api' | ||
| 2 | import { | ||
| 3 | httpGet, | ||
| 4 | httpPost | ||
| 5 | } from '@/api/fetch-api.js' | ||
| 6 | |||
| 7 | import modalComp from '@/components/modal-comp/modal-comp.vue'; | ||
| 8 | import { passwordEncrypt } from '@/utils/encrypt.js'; | ||
| 9 | |||
| 10 | export default { | ||
| 11 | data() { | ||
| 12 | return { | ||
| 13 | key: 'value', | ||
| 14 | type: 1, // 1:输入用户信息 2:找回密码 3:核对信息 4.重置密码 | ||
| 15 | values: { | ||
| 16 | cid: "", | ||
| 17 | }, | ||
| 18 | times: { | ||
| 19 | interval: 0, // 索引 | ||
| 20 | remain: 0, // 剩余时间 | ||
| 21 | tip: "" // 显示的文字 | ||
| 22 | }, | ||
| 23 | modalVisiable: false, | ||
| 24 | modal: { | ||
| 25 | icon: "succ", | ||
| 26 | content: "", | ||
| 27 | }, | ||
| 28 | step1: { | ||
| 29 | userId: "", | ||
| 30 | error: "" | ||
| 31 | }, | ||
| 32 | step2: { | ||
| 33 | idNo: "" | ||
| 34 | }, | ||
| 35 | step3: { | ||
| 36 | otp: "", | ||
| 37 | error: "" | ||
| 38 | }, | ||
| 39 | step4: { | ||
| 40 | pwd: "", | ||
| 41 | error1: "", | ||
| 42 | pwdRepeat: "", | ||
| 43 | error2: "", | ||
| 44 | success: false | ||
| 45 | } | ||
| 46 | } | ||
| 47 | }, | ||
| 48 | components: {}, | ||
| 49 | methods: { | ||
| 50 | initData() { }, | ||
| 51 | i18n() { | ||
| 52 | let i18n = this.$i18n.messages[this.$i18n.locale] || {}; | ||
| 53 | return i18n; | ||
| 54 | }, | ||
| 55 | showModal(content, icon) { | ||
| 56 | icon = !icon || typeof icon === "undefined" ? "succ" : "succ"; | ||
| 57 | this.modalIcon = icon; | ||
| 58 | this.modalContent = content; | ||
| 59 | this.modalVisiable = true; | ||
| 60 | }, | ||
| 61 | locateUserInfo() { | ||
| 62 | // 定位用户信息 | ||
| 63 | if (!this.step1.userId) { | ||
| 64 | this.step1.error = this.i18n().passwordReset.type1.error; | ||
| 65 | return; | ||
| 66 | } | ||
| 67 | httpPost({ | ||
| 68 | url: api.locateUserInfo, | ||
| 69 | data: { | ||
| 70 | uid: this.step1.userId | ||
| 71 | } | ||
| 72 | }).then(response => { | ||
| 73 | if (response.resultCode !== "0") { | ||
| 74 | this.step1.error = this.i18n().passwordReset.type1.error; | ||
| 75 | } else { | ||
| 76 | this.values.cid = response.data.cid; | ||
| 77 | this.step2.idNo = response.data.idNo; | ||
| 78 | if (typeof this.step2.idNo == "undefined") { | ||
| 79 | this.type = 3; | ||
| 80 | } else { | ||
| 81 | this.type = 2; | ||
| 82 | } | ||
| 83 | } | ||
| 84 | }); | ||
| 85 | }, | ||
| 86 | sureIdNo() { | ||
| 87 | this.type = 3; | ||
| 88 | }, | ||
| 89 | sendOtp() { | ||
| 90 | if (this.times.remain > 0) { | ||
| 91 | return; | ||
| 92 | } | ||
| 93 | // 定位用户 | ||
| 94 | httpPost({ | ||
| 95 | url: api.sendOtp, | ||
| 96 | data: { | ||
| 97 | cid: this.values.cid | ||
| 98 | } | ||
| 99 | }).then(response => { | ||
| 100 | if (this.responseHandler(response)) { | ||
| 101 | switch (response.resultCode) { | ||
| 102 | case "COMMON_ERROR_E3": | ||
| 103 | this.step2.error = this.i18n().passwordReset.type2.error3; | ||
| 104 | return; | ||
| 105 | default: | ||
| 106 | this.startTimeClick(); | ||
| 107 | return; | ||
| 108 | } | ||
| 109 | } | ||
| 110 | }) | ||
| 111 | }, | ||
| 112 | checkOtp() { | ||
| 113 | // 发送验证码 | ||
| 114 | if (!this.step3.otp) { | ||
| 115 | this.step3.error = this.i18n().passwordReset.type2.error1; | ||
| 116 | return; | ||
| 117 | } | ||
| 118 | // 定位用户 | ||
| 119 | httpPost({ | ||
| 120 | url: api.checkOtp, | ||
| 121 | data: { | ||
| 122 | cid: this.values.cid, | ||
| 123 | otp: this.step3.otp | ||
| 124 | } | ||
| 125 | }).then(response => { | ||
| 126 | if (this.responseHandler(response)) { | ||
| 127 | switch (response.resultCode) { | ||
| 128 | case "0": | ||
| 129 | this.type = 4; | ||
| 130 | return; | ||
| 131 | default: | ||
| 132 | // 提示驗證碼錯誤 | ||
| 133 | this.step3.error = this.i18n().passwordReset.type2.error1; | ||
| 134 | return; | ||
| 135 | } | ||
| 136 | } | ||
| 137 | }) | ||
| 138 | }, | ||
| 139 | resetPwd() { | ||
| 140 | let c1 = this.checkPassword(this.step4.pwd); | ||
| 141 | if (c1) { | ||
| 142 | this.$set(this.step, 'error1', c1); | ||
| 143 | return; | ||
| 144 | } | ||
| 145 | if (this.step4.pwdRepeat != this.step4.pwd) { | ||
| 146 | this.step4.error2 = this.i18n().passwordCheck.error3; | ||
| 147 | return; | ||
| 148 | } | ||
| 149 | let pwd = passwordEncrypt(this.step4.pwd); | ||
| 150 | // 定位用户 | ||
| 151 | httpPost({ | ||
| 152 | url: api.resetPwd, | ||
| 153 | data: { | ||
| 154 | cid: this.values.cid, | ||
| 155 | password: pwd | ||
| 156 | } | ||
| 157 | }).then(response => { | ||
| 158 | if (this.responseHandler(response)) { | ||
| 159 | let message = this.i18n().passwordCheck.success; | ||
| 160 | this.step4.success = true; | ||
| 161 | switch (response.resultCode) { | ||
| 162 | case "0": | ||
| 163 | this.showModal(message, "succ"); | ||
| 164 | break | ||
| 165 | default: | ||
| 166 | message = this.i18n().passwordCheck.error4; | ||
| 167 | this.showModal(message, "succ"); | ||
| 168 | break; | ||
| 169 | } | ||
| 170 | } | ||
| 171 | }) | ||
| 172 | }, | ||
| 173 | checkPassword(password) { | ||
| 174 | if (password.length < 8) { | ||
| 175 | return this.i18n().passwordCheck.error1; | ||
| 176 | } | ||
| 177 | // 匹配字母 | ||
| 178 | let m1 = /([a-z])+/.test(password); | ||
| 179 | let m2 = /([A-Z])+/.test(password); | ||
| 180 | // 匹配数字 | ||
| 181 | let m3 = /([0-9])+/.test(password); | ||
| 182 | // 匹配特殊字符 | ||
| 183 | let m4 = /[^a-zA-Z0-9]+/.test(password); | ||
| 184 | console.log(m1, m2, m3, m4) | ||
| 185 | if ((m1 | m2) & m3 & m4) { | ||
| 186 | return ""; | ||
| 187 | } else { | ||
| 188 | return this.i18n().passwordCheck.error2 | ||
| 189 | } | ||
| 190 | }, | ||
| 191 | startTimeClick() { | ||
| 192 | // 開始倒計時 | ||
| 193 | this.times.remain = 120; | ||
| 194 | let _this = this; | ||
| 195 | let i18n = this.$i18n.messages[this.$i18n.locale] || {}; | ||
| 196 | let msg = i18n.register.coutTips; | ||
| 197 | _this.times.tip = msg.replace("{second}", _this.times.remain); | ||
| 198 | this.times.interval = setInterval(function () { | ||
| 199 | if (_this.times.remain <= 0) { | ||
| 200 | clearInterval(_this.times.interval); | ||
| 201 | _this.times.interval = 0; | ||
| 202 | _this.times.remain = 0; | ||
| 203 | return; | ||
| 204 | } | ||
| 205 | _this.times.remain--; | ||
| 206 | _this.times.tip = msg.replace("{second}", _this.times.remain); | ||
| 207 | _this.$set(_this, 'times', _this.times); | ||
| 208 | }, 1000); | ||
| 209 | }, | ||
| 210 | responseHandler(response) { | ||
| 211 | switch (response.resultCode) { | ||
| 212 | case "COMMON_ERROR_E2": | ||
| 213 | // 身份过期了,请重新登录 | ||
| 214 | this.values.cid = ""; | ||
| 215 | this.showModal(this.i18n().passwordReset.cidExpire); | ||
| 216 | this.step2.idNo = ""; | ||
| 217 | this.step3.otp = ""; | ||
| 218 | this.step3.error = ""; | ||
| 219 | this.step4.pwd = ""; | ||
| 220 | this.step4.pwdRepeat = ""; | ||
| 221 | this.step4.error1 = ""; | ||
| 222 | this.step4.error2 = ""; | ||
| 223 | this.step4.success = false; | ||
| 224 | this.type = 1; | ||
| 225 | return false; | ||
| 226 | default: | ||
| 227 | return true; | ||
| 228 | } | ||
| 229 | }, | ||
| 230 | modalCallback() { | ||
| 231 | this.modalVisiable = false; | ||
| 232 | if (this.step4.success) { | ||
| 233 | this.$router.push({ | ||
| 234 | path: "/login" | ||
| 235 | }) | ||
| 236 | } else { | ||
| 237 | |||
| 238 | } | ||
| 239 | } | ||
| 240 | }, | ||
| 241 | watch: { | ||
| 242 | 'step1.userId': function () { | ||
| 243 | this.step1.error = ""; | ||
| 244 | }, | ||
| 245 | 'step3.otp': function () { | ||
| 246 | this.step3.error = ""; | ||
| 247 | }, | ||
| 248 | 'step4.pwd': function () { | ||
| 249 | console.log(this.checkPassword(this.step4.pwd)); | ||
| 250 | this.$set(this.step4, 'error1', this.checkPassword(this.step4.pwd)); | ||
| 251 | }, | ||
| 252 | 'step4.pwdRepeat': function () { | ||
| 253 | if (this.step4.pwdRepeat != this.step4.pwd) { | ||
| 254 | this.$set(this.step4, 'error2', this.i18n().passwordCheck.error3); | ||
| 255 | } else { | ||
| 256 | this.$set(this.step4, 'error2', ''); | ||
| 257 | } | ||
| 258 | }, | ||
| 259 | }, | ||
| 260 | mounted() { }, | ||
| 261 | created() { }, | ||
| 262 | components: { | ||
| 263 | modalComp | ||
| 264 | } | ||
| 265 | } |
src/pages/password-find/password-find.scss
0 → 100644
| 1 | @import '@/styles/_support'; | ||
| 2 | |||
| 3 | .content { | ||
| 4 | position: relative; | ||
| 5 | padding-bottom: 2.25rem; | ||
| 6 | } | ||
| 7 | |||
| 8 | .top-space { | ||
| 9 | height: 2.25rem; | ||
| 10 | } | ||
| 11 | |||
| 12 | .box { | ||
| 13 | position: relative; | ||
| 14 | } | ||
| 15 | |||
| 16 | .ebg { | ||
| 17 | position: absolute; | ||
| 18 | bottom: 0; | ||
| 19 | left: 0; | ||
| 20 | right: 0; | ||
| 21 | |||
| 22 | img { | ||
| 23 | max-width: 100%; | ||
| 24 | } | ||
| 25 | } | ||
| 26 | |||
| 27 | .step { | ||
| 28 | @extend .fcc; | ||
| 29 | margin-bottom: 3rem; | ||
| 30 | } | ||
| 31 | |||
| 32 | .login { | ||
| 33 | color: #4c4948; | ||
| 34 | @extend .bb; | ||
| 35 | padding: 1.416667rem 5rem 0; | ||
| 36 | border-bottom: solid .666667rem #006441; | ||
| 37 | |||
| 38 | margin: auto; | ||
| 39 | max-width: 40.25rem; | ||
| 40 | height: 31rem; | ||
| 41 | |||
| 42 | border-radius: .75rem; | ||
| 43 | box-shadow: 0 0 1.5rem 0 rgba(255, 87, 0, 0.15); | ||
| 44 | background-color: #ffffff; | ||
| 45 | |||
| 46 | &-tit { | ||
| 47 | color: #f05a23; | ||
| 48 | text-align: center; | ||
| 49 | font-size: 18px; | ||
| 50 | font-weight: bold; | ||
| 51 | letter-spacing: .2rem; | ||
| 52 | text-shadow: 3px 5.2px 9px rgba(236, 100, 41, 0.27); | ||
| 53 | } | ||
| 54 | |||
| 55 | &-tit-space-1 { | ||
| 56 | height: 5.25rem; | ||
| 57 | } | ||
| 58 | |||
| 59 | &-tit-space-4 { | ||
| 60 | height: 3rem; | ||
| 61 | } | ||
| 62 | |||
| 63 | &-nav { | ||
| 64 | margin: 2.25rem 0 auto; | ||
| 65 | display: flex; | ||
| 66 | justify-content: center; | ||
| 67 | align-items: center; | ||
| 68 | |||
| 69 | &-v-line { | ||
| 70 | width: .2rem; | ||
| 71 | height: 1.25rem; | ||
| 72 | background-color: #4c4948; | ||
| 73 | margin: 0 2.25rem; | ||
| 74 | } | ||
| 75 | |||
| 76 | &-tit { | ||
| 77 | flex: 1; | ||
| 78 | font-size: 18px; | ||
| 79 | font-weight: bold; | ||
| 80 | color: #4c4948; | ||
| 81 | } | ||
| 82 | |||
| 83 | .active { | ||
| 84 | color: #f05a23; | ||
| 85 | text-shadow: 3px 5.2px 9px rgba(236, 100, 41, 0.27); | ||
| 86 | } | ||
| 87 | } | ||
| 88 | |||
| 89 | &-protocol { | ||
| 90 | margin: 2.5rem auto 0; | ||
| 91 | display: flex; | ||
| 92 | align-items: center; | ||
| 93 | padding-left: 1rem; | ||
| 94 | |||
| 95 | .check { | ||
| 96 | height: 1rem; | ||
| 97 | margin-right: .6rem; | ||
| 98 | } | ||
| 99 | |||
| 100 | .protocol { | ||
| 101 | color: #f05a23; | ||
| 102 | } | ||
| 103 | } | ||
| 104 | |||
| 105 | &-submit { | ||
| 106 | @include btc2(13.5rem, 4rem, 16px); | ||
| 107 | margin: 4.166667rem auto 0; | ||
| 108 | letter-spacing: 1.6px; | ||
| 109 | position: absolute; | ||
| 110 | left: 0; | ||
| 111 | right: 0; | ||
| 112 | margin: 0 auto; | ||
| 113 | bottom: 2.25rem; | ||
| 114 | } | ||
| 115 | |||
| 116 | &-func { | ||
| 117 | margin: 1.5rem auto 0; | ||
| 118 | display: flex; | ||
| 119 | justify-content: center; | ||
| 120 | |||
| 121 | &-btn { | ||
| 122 | margin: 0 1.25rem; | ||
| 123 | text-decoration: underline; | ||
| 124 | } | ||
| 125 | } | ||
| 126 | } | ||
| 127 | |||
| 128 | .form { | ||
| 129 | display: flex; | ||
| 130 | justify-content: space-between; | ||
| 131 | flex-wrap: wrap; | ||
| 132 | |||
| 133 | .vcode { | ||
| 134 | background-color: transparent !important; | ||
| 135 | padding: 0 !important; | ||
| 136 | overflow: hidden; | ||
| 137 | |||
| 138 | img { | ||
| 139 | width: 100%; | ||
| 140 | height: 100%; | ||
| 141 | } | ||
| 142 | } | ||
| 143 | |||
| 144 | input { | ||
| 145 | font-size: 1.166667rem; | ||
| 146 | letter-spacing: .1rem; | ||
| 147 | } | ||
| 148 | |||
| 149 | &-item { | ||
| 150 | position: relative; | ||
| 151 | margin-bottom: 2.25rem; | ||
| 152 | |||
| 153 | .label { | ||
| 154 | font-size: 18px; | ||
| 155 | font-weight: bold; | ||
| 156 | color: #f05a23; | ||
| 157 | display: flex; | ||
| 158 | align-items: center; | ||
| 159 | margin-bottom: 1.25rem; | ||
| 160 | |||
| 161 | img { | ||
| 162 | height: 1.5rem; | ||
| 163 | margin-right: .8rem; | ||
| 164 | } | ||
| 165 | } | ||
| 166 | |||
| 167 | .ipt-wrap { | ||
| 168 | position: relative; | ||
| 169 | display: flex; | ||
| 170 | justify-content: space-between; | ||
| 171 | |||
| 172 | // input和下拉 | ||
| 173 | .ipt { | ||
| 174 | @extend .bb; | ||
| 175 | width: 100%; | ||
| 176 | height: 3.5rem; | ||
| 177 | border: solid 1px #dcdddd; | ||
| 178 | background-color: #ffffff; | ||
| 179 | border-radius: 3.5rem; | ||
| 180 | padding: 0 1.75rem; | ||
| 181 | flex: 1; | ||
| 182 | } | ||
| 183 | |||
| 184 | // 长文本 | ||
| 185 | .textarea { | ||
| 186 | min-height: 8.75rem; | ||
| 187 | border-radius: 1rem; | ||
| 188 | } | ||
| 189 | |||
| 190 | .down-arrow { | ||
| 191 | position: absolute; | ||
| 192 | top: 1.6rem; | ||
| 193 | right: 2rem; | ||
| 194 | } | ||
| 195 | |||
| 196 | |||
| 197 | .verify-btn { | ||
| 198 | @extend .fcc; | ||
| 199 | // font-family: Arial; | ||
| 200 | font-size: 18px; | ||
| 201 | width: 8.5rem; | ||
| 202 | border: solid 1px #dcdddd; | ||
| 203 | background-color: #f2f2f2; | ||
| 204 | flex: none; | ||
| 205 | margin-left: 1.5rem; | ||
| 206 | color: #4c4948; | ||
| 207 | } | ||
| 208 | |||
| 209 | // 框内按钮 | ||
| 210 | .ipt2 { | ||
| 211 | display: flex; | ||
| 212 | justify-content: space-between; | ||
| 213 | align-items: center; | ||
| 214 | |||
| 215 | .ipt-tel { | ||
| 216 | flex: 1; | ||
| 217 | padding-left: 1.75rem; | ||
| 218 | } | ||
| 219 | |||
| 220 | .ipt-code { | ||
| 221 | flex: 1; | ||
| 222 | padding-right: 1.75rem; | ||
| 223 | } | ||
| 224 | |||
| 225 | .region-tel {} | ||
| 226 | |||
| 227 | .veri-btn { | ||
| 228 | color: #f05a23; | ||
| 229 | text-decoration: underline; | ||
| 230 | } | ||
| 231 | |||
| 232 | .veri-btn-default { | ||
| 233 | color: #aaaaaa; | ||
| 234 | } | ||
| 235 | } | ||
| 236 | |||
| 237 | } | ||
| 238 | |||
| 239 | .validator { | ||
| 240 | color: $cOrange; | ||
| 241 | margin-top: 0.5rem; | ||
| 242 | position: absolute; | ||
| 243 | right: .5rem; | ||
| 244 | display: flex; | ||
| 245 | align-items: center; | ||
| 246 | |||
| 247 | img { | ||
| 248 | display: inline-block; | ||
| 249 | margin-right: 0.4rem; | ||
| 250 | } | ||
| 251 | } | ||
| 252 | } | ||
| 253 | } | ||
| 254 | |||
| 255 | @media (max-width: 950px) { | ||
| 256 | .box { | ||
| 257 | width: 96%; | ||
| 258 | } | ||
| 259 | |||
| 260 | .login { | ||
| 261 | padding: 2rem 1rem 3.5rem; | ||
| 262 | } | ||
| 263 | } | ||
| 264 | |||
| 265 | .disable { | ||
| 266 | background-color: #dcdddd !important; | ||
| 267 | // color: $cFontGray; | ||
| 268 | color: #4c4948; | ||
| 269 | } |
src/pages/password-find/password-find.vue
0 → 100644
| 1 | |||
| 2 | <template> | ||
| 3 | <div class="content"> | ||
| 4 | <modal-comp :visible="modalVisiable" :show-confirm="false" :icon="modalIcon" :content="modalContent" :confirm="modalCallback" :overlay="modalCallback"></modal-comp> | ||
| 5 | <div class="ebg"> | ||
| 6 | <img src="@/assets/images/password-reset/password-reset-bg.png"> | ||
| 7 | </div> | ||
| 8 | <div class="top-space"></div> | ||
| 9 | <div class="box"> | ||
| 10 | |||
| 11 | <!-- 输入用户信息 --> | ||
| 12 | <div v-if="type == 1" class="login"> | ||
| 13 | <div class="login-tit">{{$t('passwordReset.type1.title')}}</div> | ||
| 14 | <div class="login-tit-space-1"></div> | ||
| 15 | <div class="gird-g form"> | ||
| 16 | <div class="pure-u-1 form-item"> | ||
| 17 | <div class="label"> | ||
| 18 | <img src="@/assets/images/register/icon-register-phone.png"> {{$t('passwordReset.type1.t1')}} | ||
| 19 | </div> | ||
| 20 | <div class="ipt-wrap"> | ||
| 21 | <input :placeholder="$t('passwordReset.type1.t1Placeholder')" class="ipt" type="text" v-model="step1.userId"> | ||
| 22 | </div> | ||
| 23 | <div class="validator" v-if="step1.error.length > 0 "> | ||
| 24 | <img src="@/assets/images/common/icon-notice.png" alt=""> {{step1.error}} | ||
| 25 | </div> | ||
| 26 | </div> | ||
| 27 | </div> | ||
| 28 | <div @click="locateUserInfo()" class="login-submit pointer">{{$t('passwordReset.type1.submit')}}</div> | ||
| 29 | </div> | ||
| 30 | |||
| 31 | |||
| 32 | <!-- 核对信息 --> | ||
| 33 | <div v-if="type == 2" class="login"> | ||
| 34 | <div class="login-tit">{{$t('passwordReset.type3.title')}}</div> | ||
| 35 | <div class="login-tit-space-1"></div> | ||
| 36 | <div class="gird-g form"> | ||
| 37 | <div class="pure-u-1 form-item"> | ||
| 38 | <div class="label"> | ||
| 39 | <img src="@/assets/images/register/icon-register-phone.png"> {{$t('passwordReset.type3.t1')}} | ||
| 40 | </div> | ||
| 41 | <div class="ipt-wrap"> | ||
| 42 | <input class="ipt disable" type="text" v-model="step2.idNo"> | ||
| 43 | </div> | ||
| 44 | </div> | ||
| 45 | </div> | ||
| 46 | <div @click="sureIdNo()" class="login-submit pointer">{{$t('passwordReset.type3.submit')}}</div> | ||
| 47 | </div> | ||
| 48 | |||
| 49 | <!-- 找回密码 --> | ||
| 50 | <div v-if="type == 3" class="login"> | ||
| 51 | <div class="login-tit">{{$t('passwordReset.type2.title')}}</div> | ||
| 52 | <div class="login-tit-space-1"></div> | ||
| 53 | <div class="gird-g form"> | ||
| 54 | <div class="pure-u-1 form-item"> | ||
| 55 | <div class="label"> | ||
| 56 | <img src="@/assets/images/register/icon-register-phone.png"> {{$t('passwordReset.type2.t1Placeholder')}} | ||
| 57 | </div> | ||
| 58 | <div class="ipt-wrap"> | ||
| 59 | <div class="ipt ipt2"> | ||
| 60 | <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> | ||
| 62 | <div v-else class="veri-btn-default">{{times.tip}}</div> | ||
| 63 | </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> | ||
| 68 | </div> | ||
| 69 | </div> | ||
| 70 | <div @click="checkOtp()" class="login-submit pointer">{{$t('passwordReset.type2.submit')}}</div> | ||
| 71 | </div> | ||
| 72 | |||
| 73 | <!-- 重置密码 --> | ||
| 74 | <div v-if="type == 4" class="login"> | ||
| 75 | <div class="login-tit">{{$t('passwordReset.type4.title')}}</div> | ||
| 76 | <div class="login-tit-space-4"></div> | ||
| 77 | <div class="gird-g form"> | ||
| 78 | <div class="pure-u-1 form-item"> | ||
| 79 | <div class="label"> | ||
| 80 | <img src="@/assets/images/register/icon-register-lock.png"> {{$t('passwordReset.type4.t1')}} | ||
| 81 | </div> | ||
| 82 | <div class="ipt-wrap"> | ||
| 83 | <input :placeholder="$t('passwordReset.type4.t1Placeholder')" class="ipt" type="password" v-model="step4.pwd"> | ||
| 84 | </div> | ||
| 85 | <div class="validator" v-if="step4.error1.length > 0 "> | ||
| 86 | <img src="@/assets/images/common/icon-notice.png" alt=""> {{step4.error1}} | ||
| 87 | </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> | ||
| 96 | <div class="validator" v-if="step4.error2.length > 0 "> | ||
| 97 | <img src="@/assets/images/common/icon-notice.png" alt=""> {{step4.error2}} | ||
| 98 | </div> | ||
| 99 | </div> | ||
| 100 | </div> | ||
| 101 | <div @click="resetPwd()" class="login-submit pointer">{{$t('passwordReset.type4.submit')}}</div> | ||
| 102 | </div> | ||
| 103 | </div> | ||
| 104 | </div> | ||
| 105 | </template> | ||
| 106 | |||
| 107 | <script src="./password-find.js"></script> | ||
| 108 | <style lang="scss" scoped> | ||
| 109 | @import "./password-find.scss"; | ||
| 110 | </style> |
| 1 | |||
| 2 | import { mapGetters, mapActions, mapState } from "vuex"; | ||
| 3 | |||
| 1 | import api from '@/api/api' | 4 | import api from '@/api/api' |
| 2 | import { | 5 | import { |
| 3 | httpGet, | 6 | httpGet, |
| 4 | httpPost | 7 | httpPost |
| 5 | } from '@/api/fetch-api.js' | 8 | } from '@/api/fetch-api.js' |
| 6 | 9 | ||
| 10 | import modalComp from '@/components/modal-comp/modal-comp.vue'; | ||
| 11 | import { passwordEncrypt } from '@/utils/encrypt.js'; | ||
| 12 | |||
| 7 | export default { | 13 | export default { |
| 8 | data() { | 14 | data() { |
| 9 | return { | 15 | return { |
| 10 | key: 'value', | 16 | key: 'value', |
| 11 | type: 4, // 1:输入用户信息 2:找回密码 3:核对信息 4.重置密码 | 17 | type: 4, // 1:输入用户信息 2:找回密码 3:核对信息 4.重置密码 |
| 12 | values: { | 18 | values: { |
| 13 | // 返回的token,串连整个流程,后台安全校验使用 | 19 | cid: "", |
| 14 | vcodeuuid: "", | 20 | oldPwd: "", |
| 15 | token: "", | 21 | pwd: "", |
| 16 | deviceId: "", | 22 | pwdRepeat: "" |
| 17 | imageBase64: "", | ||
| 18 | password: "", | ||
| 19 | passwordRepeat: "" | ||
| 20 | }, | 23 | }, |
| 21 | } | 24 | step: { |
| 25 | error0: "", | ||
| 26 | error1: "", | ||
| 27 | error2: "", | ||
| 22 | }, | 28 | }, |
| 23 | components: {}, | 29 | times: { |
| 24 | computed: { | 30 | interval: 0, // 索引 |
| 25 | locale() { | 31 | remain: 0, // 剩余时间 |
| 26 | return this.$i18n.locale || 'tc'; | 32 | tip: "" // 显示的文字 |
| 27 | }, | 33 | }, |
| 28 | i18n() { | 34 | modalVisiable: false, |
| 29 | return this.$i18n.messages && this.$i18n.locale ? this.$i18n.messages[this.$i18n.locale] : {}; | 35 | targetPath: "", |
| 36 | modalIcon: "succ", | ||
| 37 | modalContent: "" | ||
| 30 | } | 38 | } |
| 31 | }, | 39 | }, |
| 32 | methods: { | 40 | methods: { |
| 33 | initData() {} | 41 | initData() { }, |
| 42 | i18n() { | ||
| 43 | let i18n = this.$i18n.messages[this.$i18n.locale] || {}; | ||
| 44 | return i18n; | ||
| 45 | }, | ||
| 46 | showModal(content, icon) { | ||
| 47 | icon = !icon || typeof icon === "undefined" ? "succ" : "succ"; | ||
| 48 | this.modalIcon = icon; | ||
| 49 | this.modalContent = content; | ||
| 50 | this.modalVisiable = true; | ||
| 51 | }, | ||
| 52 | resetPwd() { | ||
| 53 | if (!this.values.oldPwd) { | ||
| 54 | this.step.error0 = this.i18n().passwordReset.oldPwdPlaceholde; | ||
| 55 | return; | ||
| 56 | } | ||
| 57 | let c1 = this.checkPassword(this.values.pwd); | ||
| 58 | if (c1) { | ||
| 59 | this.$set(this.step, 'error1', c1); | ||
| 60 | return; | ||
| 61 | } | ||
| 62 | if (this.values.pwdRepeat != this.values.pwd) { | ||
| 63 | this.step.error2 = this.i18n().passwordCheck.error3; | ||
| 64 | return; | ||
| 65 | } | ||
| 66 | let newPwd = passwordEncrypt(this.values.pwd); | ||
| 67 | let oldPwd = passwordEncrypt(this.values.oldPwd); | ||
| 68 | |||
| 69 | httpPost({ | ||
| 70 | url: api.changePassword, | ||
| 71 | data: { | ||
| 72 | oldPwd: oldPwd, | ||
| 73 | newPwd: newPwd | ||
| 74 | }, | ||
| 75 | sid: true | ||
| 76 | }).then(response => { | ||
| 77 | this.targetPath = ""; | ||
| 78 | let message = this.i18n().passwordCheck.success; | ||
| 79 | switch (response.resultCode) { | ||
| 80 | case "0": | ||
| 81 | this.targetPath = ""; | ||
| 82 | this.showModal(message, "succ"); | ||
| 83 | break | ||
| 84 | case "COMMON_ERROR_E0": | ||
| 85 | message = this.i18n().session.sidExpire; | ||
| 86 | this.targetPath = "/login?callback=/password/reset"; | ||
| 87 | this.showModal(message, "info"); | ||
| 88 | break; | ||
| 89 | default: | ||
| 90 | this.step.error0 = this.i18n().passwordCheck.error5; | ||
| 91 | break; | ||
| 92 | } | ||
| 93 | |||
| 94 | }).catch(err => { | ||
| 95 | let message = this.i18n().session.sidExpire; | ||
| 96 | this.targetPath = "/login?callback=/password/reset"; | ||
| 97 | this.showModal(message, "info"); | ||
| 98 | }); | ||
| 99 | }, | ||
| 100 | |||
| 101 | checkPassword(password) { | ||
| 102 | if (password.length < 8) { | ||
| 103 | return this.i18n().passwordCheck.error1; | ||
| 104 | } | ||
| 105 | // 匹配字母 | ||
| 106 | let m1 = /([a-z])+/.test(password); | ||
| 107 | let m2 = /([A-Z])+/.test(password); | ||
| 108 | // 匹配数字 | ||
| 109 | let m3 = /([0-9])+/.test(password); | ||
| 110 | // 匹配特殊字符 | ||
| 111 | let m4 = /[^a-zA-Z0-9]+/.test(password); | ||
| 112 | if ((m1 | m2) & m3 & m4) { | ||
| 113 | return ""; | ||
| 114 | } else { | ||
| 115 | return this.i18n().passwordCheck.error2 | ||
| 116 | } | ||
| 117 | }, | ||
| 118 | modalCallback() { | ||
| 119 | this.modalVisiable = false; | ||
| 120 | if (this.targetPath) { | ||
| 121 | this.$router.push({ | ||
| 122 | "path": this.targetPath | ||
| 123 | }); | ||
| 124 | } | ||
| 125 | } | ||
| 126 | }, | ||
| 127 | watch: { | ||
| 128 | 'values.oldPwd': function () { | ||
| 129 | this.$set(this.step, 'error0', ''); | ||
| 34 | }, | 130 | }, |
| 35 | mounted() {}, | 131 | 'values.pwd': function () { |
| 36 | created() {} | 132 | this.$set(this.step, 'error1', this.checkPassword(this.values.pwd)); |
| 133 | }, | ||
| 134 | 'values.pwdRepeat': function () { | ||
| 135 | if (this.values.pwdRepeat != this.values.pwd) { | ||
| 136 | this.$set(this.step, 'error2', this.i18n().passwordCheck.error3); | ||
| 137 | } else { | ||
| 138 | this.$set(this.step, 'error2', ''); | ||
| 139 | } | ||
| 140 | }, | ||
| 141 | }, | ||
| 142 | mounted() { }, | ||
| 143 | created() { }, | ||
| 144 | components: { | ||
| 145 | modalComp | ||
| 146 | } | ||
| 37 | } | 147 | } | ... | ... |
| ... | @@ -37,7 +37,7 @@ | ... | @@ -37,7 +37,7 @@ |
| 37 | 37 | ||
| 38 | margin: auto; | 38 | margin: auto; |
| 39 | max-width: 40.25rem; | 39 | max-width: 40.25rem; |
| 40 | height: 31rem; | 40 | height: 41rem; |
| 41 | 41 | ||
| 42 | border-radius: .75rem; | 42 | border-radius: .75rem; |
| 43 | box-shadow: 0 0 1.5rem 0 rgba(255, 87, 0, 0.15); | 43 | box-shadow: 0 0 1.5rem 0 rgba(255, 87, 0, 0.15); | ... | ... |
| 1 | 1 | ||
| 2 | <template> | 2 | <template> |
| 3 | <div class="content"> | 3 | <div class="content"> |
| 4 | <modal-comp :visible="modalVisiable" :show-confirm="false" :icon="modalIcon" :content="modalContent" :confirm="modalCallback" :overlay="modalCallback"></modal-comp> | ||
| 4 | <div class="ebg"> | 5 | <div class="ebg"> |
| 5 | <img src="@/assets/images/password-reset/password-reset-bg.png"> | 6 | <img src="@/assets/images/password-reset/password-reset-bg.png"> |
| 6 | </div> | 7 | </div> |
| 7 | <div class="top-space"></div> | 8 | <div class="top-space"></div> |
| 8 | <div class="box"> | 9 | <div class="box"> |
| 9 | 10 | <div class="login"> | |
| 10 | <!-- 输入用户信息 --> | 11 | <div class="login-tit">{{$t('passwordReset.type4.title')}}</div> |
| 11 | <div v-if="type == 1" class="login"> | 12 | <div class="login-tit-space-4"></div> |
| 12 | <div class="login-tit">{{$t('passwordReset.type1.title')}}</div> | ||
| 13 | <div class="login-tit-space-1"></div> | ||
| 14 | <div class="gird-g form"> | ||
| 15 | <div class="pure-u-1 form-item"> | ||
| 16 | <div class="label"> | ||
| 17 | <img src="@/assets/images/register/icon-register-phone.png"> {{$t('passwordReset.type1.t1')}} | ||
| 18 | </div> | ||
| 19 | <div class="ipt-wrap"> | ||
| 20 | <input :placeholder="$t('passwordReset.type1.t1Placeholder')" class="ipt" type="password" v-model="values.password"> | ||
| 21 | </div> | ||
| 22 | <div class="validator"> | ||
| 23 | <img src="@/assets/images/common/icon-notice.png" alt=""> 验证提示 | ||
| 24 | </div> | ||
| 25 | </div> | ||
| 26 | </div> | ||
| 27 | <div @click="onRegisterHandler()" class="login-submit pointer">{{$t('passwordReset.type1.submit')}}</div> | ||
| 28 | </div> | ||
| 29 | |||
| 30 | <!-- 找回密码 --> | ||
| 31 | <div v-if="type == 2" class="login"> | ||
| 32 | <div class="login-tit">{{$t('passwordReset.type2.title')}}</div> | ||
| 33 | <div class="login-tit-space-1"></div> | ||
| 34 | <div class="gird-g form"> | ||
| 35 | <div class="pure-u-1 form-item"> | ||
| 36 | <div class="label"> | ||
| 37 | <img src="@/assets/images/register/icon-register-phone.png"> {{$t('passwordReset.type2.t1Placeholder')}} | ||
| 38 | </div> | ||
| 39 | <div class="ipt-wrap"> | ||
| 40 | <input :placeholder="$t('passwordReset.type2.t1Placeholder')" class="ipt" type="password" v-model="values.password"> | ||
| 41 | </div> | ||
| 42 | <div class="validator"> | ||
| 43 | <img src="@/assets/images/common/icon-notice.png" alt=""> 验证提示 | ||
| 44 | </div> | ||
| 45 | </div> | ||
| 46 | </div> | ||
| 47 | <div @click="onRegisterHandler()" class="login-submit pointer">{{$t('passwordReset.type2.submit')}}</div> | ||
| 48 | </div> | ||
| 49 | |||
| 50 | <!-- 核对信息 --> | ||
| 51 | <div v-if="type == 3" class="login"> | ||
| 52 | <div class="login-tit">{{$t('passwordReset.type3.title')}}</div> | ||
| 53 | <div class="login-tit-space-1"></div> | ||
| 54 | <div class="gird-g form"> | 13 | <div class="gird-g form"> |
| 55 | <div class="pure-u-1 form-item"> | 14 | <div class="pure-u-1 form-item"> |
| 56 | <div class="label"> | 15 | <div class="label"> |
| 57 | <img src="@/assets/images/register/icon-register-phone.png"> {{$t('passwordReset.type3.t1')}} | 16 | <img src="@/assets/images/register/icon-register-lock.png"> {{$t('passwordReset.oldPwd')}} |
| 58 | </div> | 17 | </div> |
| 59 | <div class="ipt-wrap"> | 18 | <div class="ipt-wrap"> |
| 60 | <input class="ipt disable" type="password" v-model="values.password"> | 19 | <input :placeholder="$t('passwordReset.oldPwdPlaceholde')" class="ipt" type="password" v-model="values.oldPwd"> |
| 61 | </div> | 20 | </div> |
| 21 | <div class="validator" v-if="step.error0.length > 0 "> | ||
| 22 | <img src="@/assets/images/common/icon-notice.png" alt=""> {{step.error0}} | ||
| 62 | </div> | 23 | </div> |
| 63 | </div> | 24 | </div> |
| 64 | <div @click="onRegisterHandler()" class="login-submit pointer">{{$t('passwordReset.type3.submit')}}</div> | ||
| 65 | </div> | ||
| 66 | |||
| 67 | <!-- 重置密码 --> | ||
| 68 | <div v-if="type == 4" class="login"> | ||
| 69 | <div class="login-tit">{{$t('passwordReset.type4.title')}}</div> | ||
| 70 | <div class="login-tit-space-4"></div> | ||
| 71 | <div class="gird-g form"> | ||
| 72 | <div class="pure-u-1 form-item"> | 25 | <div class="pure-u-1 form-item"> |
| 73 | <div class="label"> | 26 | <div class="label"> |
| 74 | <img src="@/assets/images/register/icon-register-lock.png"> {{$t('passwordReset.type4.t1')}} | 27 | <img src="@/assets/images/register/icon-register-lock.png"> {{$t('passwordReset.type4.t1')}} |
| 75 | </div> | 28 | </div> |
| 76 | <div class="ipt-wrap"> | 29 | <div class="ipt-wrap"> |
| 77 | <input :placeholder="$t('passwordReset.type4.t1Placeholder')" class="ipt" type="password" v-model="values.password"> | 30 | <input :placeholder="$t('passwordReset.type4.t1Placeholder')" class="ipt" type="password" v-model="values.pwd"> |
| 78 | </div> | 31 | </div> |
| 79 | <div class="validator"> | 32 | <div class="validator" v-if="step.error1.length > 0 "> |
| 80 | <img src="@/assets/images/common/icon-notice.png" alt=""> 验证提示 | 33 | <img src="@/assets/images/common/icon-notice.png" alt=""> {{step.error1}} |
| 81 | </div> | 34 | </div> |
| 82 | </div> | 35 | </div> |
| 83 | <div class="pure-u-1 form-item"> | 36 | <div class="pure-u-1 form-item"> |
| ... | @@ -85,14 +38,14 @@ | ... | @@ -85,14 +38,14 @@ |
| 85 | <img src="@/assets/images/register/icon-register-lock.png"> {{$t('passwordReset.type4.t2')}} | 38 | <img src="@/assets/images/register/icon-register-lock.png"> {{$t('passwordReset.type4.t2')}} |
| 86 | </div> | 39 | </div> |
| 87 | <div class="ipt-wrap"> | 40 | <div class="ipt-wrap"> |
| 88 | <input :placeholder="$t('passwordReset.type4.t2Placeholder')" class="ipt" type="password" v-model="values.passwordRepeat"> | 41 | <input :placeholder="$t('passwordReset.type4.t2Placeholder')" class="ipt" type="password" v-model="values.pwdRepeat"> |
| 89 | </div> | 42 | </div> |
| 90 | <div class="validator"> | 43 | <div class="validator" v-if="step.error2.length > 0 "> |
| 91 | <img src="@/assets/images/common/icon-notice.png" alt=""> 验证提示 | 44 | <img src="@/assets/images/common/icon-notice.png" alt=""> {{step.error2}} |
| 92 | </div> | 45 | </div> |
| 93 | </div> | 46 | </div> |
| 94 | </div> | 47 | </div> |
| 95 | <div @click="onRegisterHandler()" class="login-submit pointer">{{$t('passwordReset.type4.submit')}}</div> | 48 | <div @click="resetPwd()" class="login-submit pointer">{{$t('passwordReset.type4.submit')}}</div> |
| 96 | </div> | 49 | </div> |
| 97 | </div> | 50 | </div> |
| 98 | </div> | 51 | </div> | ... | ... |
| ... | @@ -4,14 +4,13 @@ import { | ... | @@ -4,14 +4,13 @@ import { |
| 4 | httpPost | 4 | httpPost |
| 5 | } from '@/api/fetch-api.js' | 5 | } from '@/api/fetch-api.js' |
| 6 | 6 | ||
| 7 | let PK = 'B5FE03847F02046C47292AF0FF2DE88977241483DD40C123046EB39CBE4C48167B120096CFF12CD16559322884A3C56FA92B07B89AB51FC8C91A75127622151DDD730DFF1F993D5A290CEAC0BBA7FC88285D8994ACBAFF50101EDE9A0925AD5DFFAFE96D53C370E9C5B37DF2F871F81C4D7CA6B7EC37FF459C07975AD9A74A95'; | 7 | import { passwordEncrypt } from '@/utils/encrypt.js'; |
| 8 | let E = '10001'; | ||
| 9 | 8 | ||
| 10 | export default { | 9 | export default { |
| 11 | data() { | 10 | data() { |
| 12 | return { | 11 | return { |
| 13 | key: 'value', | 12 | key: 'value', |
| 14 | type: 2, // 1:手机验证 2:输入密码 | 13 | type: 1, // 1:手机验证 2:输入密码 |
| 15 | mobileNoType: "hk",// 选择的手机好类型 | 14 | mobileNoType: "hk",// 选择的手机好类型 |
| 16 | mobileTip: {}, | 15 | mobileTip: {}, |
| 17 | mobileOptions: [], | 16 | mobileOptions: [], |
| ... | @@ -39,8 +38,6 @@ export default { | ... | @@ -39,8 +38,6 @@ export default { |
| 39 | remain: 0, // 剩余时间 | 38 | remain: 0, // 剩余时间 |
| 40 | tip: "" // 显示的文字 | 39 | tip: "" // 显示的文字 |
| 41 | }, | 40 | }, |
| 42 | PK: process.env.VUE_APP_RSA_PUBLIC_KEY || PK, | ||
| 43 | E: process.env.VUE_APP_RSA_KEY_INDEX || E, | ||
| 44 | } | 41 | } |
| 45 | }, | 42 | }, |
| 46 | components: {}, | 43 | components: {}, |
| ... | @@ -271,7 +268,7 @@ export default { | ... | @@ -271,7 +268,7 @@ export default { |
| 271 | let data = { | 268 | let data = { |
| 272 | token: this.values.token, | 269 | token: this.values.token, |
| 273 | mobileNo: this.registerForm.mobileNo, | 270 | mobileNo: this.registerForm.mobileNo, |
| 274 | loginPwd: this._passwordEncrypt(this.values.password) | 271 | loginPwd: passwordEncrypt(this.values.password) |
| 275 | }; | 272 | }; |
| 276 | httpPost({ | 273 | httpPost({ |
| 277 | url: api.stdRegister, | 274 | url: api.stdRegister, |
| ... | @@ -378,13 +375,6 @@ export default { | ... | @@ -378,13 +375,6 @@ export default { |
| 378 | onLoginTypeHandler(val) { | 375 | onLoginTypeHandler(val) { |
| 379 | 376 | ||
| 380 | }, | 377 | }, |
| 381 | _passwordEncrypt(rawPwd) { | ||
| 382 | let rsa = new RSAKey(); | ||
| 383 | rsa.setPublic(this.PK, this.E); | ||
| 384 | let res = rsa.encrypt(rawPwd); | ||
| 385 | if (res == null) return rawPwd; | ||
| 386 | return res; | ||
| 387 | }, | ||
| 388 | initData() { | 378 | initData() { |
| 389 | let i18n = this.$i18n.messages[this.$i18n.locale] || {}; | 379 | let i18n = this.$i18n.messages[this.$i18n.locale] || {}; |
| 390 | let mobileOptions = JSON.parse(JSON.stringify(i18n.register.mobileOptions)); | 380 | let mobileOptions = JSON.parse(JSON.stringify(i18n.register.mobileOptions)); | ... | ... |
| ... | @@ -39,6 +39,14 @@ const routes = [ | ... | @@ -39,6 +39,14 @@ const routes = [ |
| 39 | } | 39 | } |
| 40 | }, | 40 | }, |
| 41 | { | 41 | { |
| 42 | path: '/password/find', | ||
| 43 | name: 'passwordFind', | ||
| 44 | component: () => import('./pages/password-find/password-find.vue'), | ||
| 45 | meta: { | ||
| 46 | title: '' | ||
| 47 | } | ||
| 48 | }, | ||
| 49 | { | ||
| 42 | path: '/password/reset', | 50 | path: '/password/reset', |
| 43 | name: 'passwordReset', | 51 | name: 'passwordReset', |
| 44 | component: () => import('./pages/password-reset/password-reset.vue'), | 52 | component: () => import('./pages/password-reset/password-reset.vue'), | ... | ... |
src/utils/encrypt.js
0 → 100644
| 1 | |||
| 2 | |||
| 3 | |||
| 4 | let PK = 'B5FE03847F02046C47292AF0FF2DE88977241483DD40C123046EB39CBE4C48167B120096CFF12CD16559322884A3C56FA92B07B89AB51FC8C91A75127622151DDD730DFF1F993D5A290CEAC0BBA7FC88285D8994ACBAFF50101EDE9A0925AD5DFFAFE96D53C370E9C5B37DF2F871F81C4D7CA6B7EC37FF459C07975AD9A74A95'; | ||
| 5 | let E = '10001'; | ||
| 6 | PK = process.env.VUE_APP_RSA_PUBLIC_KEY || PK; | ||
| 7 | E = process.env.VUE_APP_RSA_KEY_INDEX || E; | ||
| 8 | |||
| 9 | function passwordEncrypt(rawPwd) { | ||
| 10 | let rsa = new RSAKey(); | ||
| 11 | // console.log("rsa === ", rsa); | ||
| 12 | rsa.setPublic(PK, E); | ||
| 13 | let res = rsa.encrypt(rawPwd); | ||
| 14 | // console.log("res === ", res); | ||
| 15 | if (res == null) return rawPwd; | ||
| 16 | return res; | ||
| 17 | } | ||
| 18 | |||
| 19 | module.exports = { | ||
| 20 | passwordEncrypt: passwordEncrypt | ||
| 21 | } | ||
| ... | \ No newline at end of file | ... | \ No newline at end of file |
-
Please register or sign in to post a comment