优化手机登录时图形验证码校验问题
This commit is contained in:
BianLzhaoMin
parent
4a1b0e8c54
commit
8290727283
|
|
@ -115,8 +115,8 @@
|
|||
</el-input>
|
||||
</el-form-item>
|
||||
|
||||
<!-- 5.27 新增发送短信验证时 增加图形验证码校验 -->
|
||||
<el-form-item
|
||||
<!-- 5.27 新增发送短信验证时 增加图形验证码校验 暂时注释 因为放在表单内显得暧昧 先模仿南网注册页面使用弹框提示图形验证码 -->
|
||||
<!-- <el-form-item
|
||||
prop="code"
|
||||
v-if="captchaEnabled"
|
||||
class="code-container"
|
||||
|
|
@ -142,7 +142,7 @@
|
|||
style="width: 100%"
|
||||
/>
|
||||
</div>
|
||||
</el-form-item>
|
||||
</el-form-item> -->
|
||||
<el-form-item prop="textCode" class="code-container">
|
||||
<el-input
|
||||
v-model="phoneLoginParams.textCode"
|
||||
|
|
@ -212,17 +212,43 @@
|
|||
|
||||
<!-- 图形验证码弹框 -->
|
||||
<el-dialog
|
||||
title="提示"
|
||||
:visible.sync="dialogVisible"
|
||||
title="请输入图形验证码"
|
||||
:visible.sync="dialogCodeVisible"
|
||||
v-if="dialogCodeVisible"
|
||||
width="30%"
|
||||
:before-close="handleClose"
|
||||
>
|
||||
<span>这是一段信息</span>
|
||||
<el-form
|
||||
ref="phoneLoginCodeFormRef"
|
||||
:model="phoneLoginParams"
|
||||
:rules="phoneLoginCodeRules"
|
||||
>
|
||||
<el-form-item prop="code" v-if="captchaEnabled" class="code-container">
|
||||
<el-input
|
||||
v-model="phoneLoginParams.code"
|
||||
auto-complete="off"
|
||||
placeholder="图形验证码"
|
||||
@keyup.enter.native="textLogin"
|
||||
style="width: 70%"
|
||||
>
|
||||
<svg-icon
|
||||
slot="prefix"
|
||||
icon-class="validCode"
|
||||
class="el-input__icon input-icon"
|
||||
/>
|
||||
</el-input>
|
||||
<div class="login-code">
|
||||
<img
|
||||
:src="phoneCodeUrl"
|
||||
@click="getCode(2)"
|
||||
class="login-code-img"
|
||||
style="width: 100%"
|
||||
/>
|
||||
</div>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<span slot="footer" class="dialog-footer">
|
||||
<el-button @click="dialogVisible = false">取 消</el-button>
|
||||
<el-button type="primary" @click="dialogVisible = false"
|
||||
>确 定</el-button
|
||||
>
|
||||
<el-button type="primary" @click="submitSendCode()">确 定</el-button>
|
||||
</span>
|
||||
</el-dialog>
|
||||
</div>
|
||||
|
|
@ -299,6 +325,8 @@ export default {
|
|||
message: '请输入短信验证码',
|
||||
},
|
||||
],
|
||||
},
|
||||
phoneLoginCodeRules: {
|
||||
code: [
|
||||
{
|
||||
required: true,
|
||||
|
|
@ -318,20 +346,19 @@ export default {
|
|||
show: 1,
|
||||
count: '',
|
||||
timer: null,
|
||||
dialogCodeVisible: false, // 图形验证码弹框
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
/* 账户，手机号登录切换时，清空表单的校验 5.27 删除之前南网跳转的监听 */
|
||||
activeName: {
|
||||
handler(newVal) {
|
||||
this.$refs['loginForm'].clearValidate()
|
||||
this.$refs['phoneLoginFormRef'].clearValidate()
|
||||
|
||||
// this.$refs['loginForm'].clearValidate()
|
||||
this.resetForm('loginForm')
|
||||
this.resetForm('phoneLoginFormRef')
|
||||
// 切换登录方式时 根据切换方式 自动获取新的图形验证码
|
||||
if (newVal === 'account') {
|
||||
this.getCode(1)
|
||||
} else {
|
||||
this.getCode(2)
|
||||
}
|
||||
},
|
||||
deep: true,
|
||||
|
|
@ -364,24 +391,28 @@ export default {
|
|||
},
|
||||
//获取短信验证码
|
||||
getTextCode() {
|
||||
this.$refs.phoneLoginFormRef.validateField(
|
||||
['phone', 'code'],
|
||||
async (valid) => {
|
||||
if (!valid) {
|
||||
const sendParams = {
|
||||
phone: this.phoneLoginParams.phone,
|
||||
code: this.phoneLoginParams.code,
|
||||
uuid: this.phoneLoginParams.uuid,
|
||||
}
|
||||
this.$refs.phoneLoginFormRef.validateField('phone', (valid) => {
|
||||
if (!valid) {
|
||||
this.getCode(2)
|
||||
this.dialogCodeVisible = true
|
||||
}
|
||||
})
|
||||
},
|
||||
|
||||
const res = await sendCode(sendParams)
|
||||
|
||||
if (res.code == 200) {
|
||||
this.$modal.msgSuccess('发送成功')
|
||||
const TIME_COUNT = 60
|
||||
if (!this.timer) {
|
||||
this.count = TIME_COUNT
|
||||
this.show = 2
|
||||
/* 图形验证码弹框中确定按钮 */
|
||||
submitSendCode() {
|
||||
this.$refs.phoneLoginCodeFormRef.validate((valid) => {
|
||||
if (valid) {
|
||||
const sendParams = {
|
||||
phone: this.phoneLoginParams.phone,
|
||||
code: this.phoneLoginParams.code,
|
||||
uuid: this.phoneLoginParams.uuid,
|
||||
}
|
||||
sendCode(sendParams)
|
||||
.then((res) => {
|
||||
if (res.code == 200) {
|
||||
this.$modal.msgSuccess('发送成功')
|
||||
const TIME_COUNT = 60
|
||||
this.timer = setInterval(() => {
|
||||
if (this.count > 0 && this.count <= TIME_COUNT) {
|
||||
this.count--
|
||||
|
|
@ -392,35 +423,21 @@ export default {
|
|||
}
|
||||
}, 1000)
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
)
|
||||
// if (regExp.test(this.loginForm.phone)) {
|
||||
// sendCode({ phone: this.loginForm.phone }).then((res) => {
|
||||
// if (res.code == 200) {
|
||||
// this.$modal.msgSuccess('发送成功')
|
||||
// const TIME_COUNT = 60
|
||||
// if (!this.timer) {
|
||||
// this.count = TIME_COUNT
|
||||
// this.show = 2
|
||||
// this.timer = setInterval(() => {
|
||||
// if (this.count > 0 && this.count <= TIME_COUNT) {
|
||||
// this.count--
|
||||
// } else {
|
||||
// this.show = 3
|
||||
// clearInterval(this.timer)
|
||||
// this.timer = null
|
||||
// }
|
||||
// }, 1000)
|
||||
// }
|
||||
// }
|
||||
// })
|
||||
// } else {
|
||||
// this.$modal.msgError('请输入正确手机号')
|
||||
// }
|
||||
})
|
||||
.finally(() => {
|
||||
this.dialogCodeVisible = false
|
||||
this.phoneLoginParams.code = ''
|
||||
})
|
||||
}
|
||||
})
|
||||
},
|
||||
/* 图形验证码弹框关闭按钮 */
|
||||
handleClose() {
|
||||
this.dialogCodeVisible = false
|
||||
this.$refs['phoneLoginFormRef'].clearValidate()
|
||||
this.$refs['phoneLoginCodeFormRef'].clearValidate()
|
||||
this.phoneLoginParams.code = ''
|
||||
},
|
||||
|
||||
getCookie() {
|
||||
const username = Cookies.get('username')
|
||||
const password = Cookies.get('password')
|
||||
|
|
@ -604,4 +621,8 @@ export default {
|
|||
.code-container .el-form-item__content {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.el-dialog__body {
|
||||
padding: 30px 20px 0 20px;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
Loading…
Reference in New Issue