去掉验证码验证,实现传参带入用户名密码

This commit is contained in:
471615499@qq.com 2024-10-20 20:13:33 +08:00
parent d58fc800fc
commit d5ca9fa6df
2 changed files with 115 additions and 101 deletions

View File

@ -2,7 +2,7 @@
Overview
## 前端文档地址:
https://1x.antdv.com/components/
https://1x.antdv.com/docs/vue/introduce-cn/
----
项目下载和运行

View File

@ -1,92 +1,93 @@
<template>
<div class="main">
<div class='main'>
<a-form
id="formLogin"
class="user-layout-login"
ref="formLogin"
:form="form"
@submit="handleSubmit"
id='formLogin'
class='user-layout-login'
ref='formLogin'
:form='form'
@submit='handleSubmit'
>
<a-alert
v-if="isLoginError"
type="error"
v-if='isLoginError'
type='error'
showIcon
style="margin-bottom: 24px"
:message="errorMsg"
style='margin-bottom: 24px'
:message='errorMsg'
/>
<a-form-item style='margin-top: 25px'>
<a-input
size="large"
type="text"
placeholder="账户"
size='large'
type='text'
placeholder='账户'
v-decorator="['username', {rules: [{ required: true, message: '请输入帐户名或邮箱地址' }, { validator: handleUsernameOrEmail }], validateTrigger: 'change'}]">
<a-icon slot="prefix" type="user" :style="{ color: 'rgba(0,0,0,.25)' }" />
<a-icon slot='prefix' type='user' :style="{ color: 'rgba(0,0,0,.25)' }" />
</a-input>
</a-form-item>
<a-form-item>
<a-input-password
size="large"
placeholder="密码"
size='large'
placeholder='密码'
v-decorator="['password', { rules: [{ required: true, message: '请输入密码' }], validateTrigger: 'blur'}]">
<a-icon slot="prefix" type="lock" :style="{ color: 'rgba(0,0,0,.25)' }" />
<a-icon slot='prefix' type='lock' :style="{ color: 'rgba(0,0,0,.25)' }" />
</a-input-password>
</a-form-item>
<!-- <a-tabs :activeKey="customActiveKey" :tabBarStyle="{ textAlign: 'center', borderBottom: 'unset' }" @change="handleTabClick">-->
<!-- <a-tab-pane key="tab1" tab="帐号密码登录" v-if='false'>-->
<!-- <a-tabs :activeKey="customActiveKey" :tabBarStyle="{ textAlign: 'center', borderBottom: 'unset' }" @change="handleTabClick">-->
<!-- <a-tab-pane key="tab1" tab="帐号密码登录" v-if='false'>-->
<!-- </a-tab-pane>-->
<!-- <a-tab-pane key="tab2" tab="手机号登录" v-if='false'>-->
<!-- <a-form-item>-->
<!-- <a-input-->
<!-- size="large"-->
<!-- type="text"-->
<!-- placeholder="手机号"-->
<!-- v-decorator="['mobile', {rules: [{ required: true, pattern: /^1[34578]\d{9}$/, message: '请输入正确的手机号' }], validateTrigger: 'change'}]">-->
<!-- <a-icon slot="prefix" type="mobile" :style="{ color: 'rgba(0,0,0,.25)' }" />-->
<!-- </a-input>-->
<!-- </a-form-item>-->
<!-- </a-tab-pane>-->
<!-- <a-tab-pane key="tab2" tab="手机号登录" v-if='false'>-->
<!-- <a-form-item>-->
<!-- <a-input-->
<!-- size="large"-->
<!-- type="text"-->
<!-- placeholder="手机号"-->
<!-- v-decorator="['mobile', {rules: [{ required: true, pattern: /^1[34578]\d{9}$/, message: '请输入正确的手机号' }], validateTrigger: 'change'}]">-->
<!-- <a-icon slot="prefix" type="mobile" :style="{ color: 'rgba(0,0,0,.25)' }" />-->
<!-- </a-input>-->
<!-- </a-form-item>-->
<!-- <a-row :gutter="16">-->
<!-- <a-col class="gutter-row" :span="16">-->
<!-- <a-form-item>-->
<!-- <a-input-->
<!-- size="large"-->
<!-- type="text"-->
<!-- placeholder="验证码"-->
<!-- v-decorator="['captcha', {rules: [{ required: true, message: '请输入验证码' }], validateTrigger: 'blur'}]"-->
<!-- >-->
<!-- <a-icon slot="prefix" type="mail" :style="{ color: 'rgba(0,0,0,.25)' }" />-->
<!-- </a-input>-->
<!-- </a-form-item>-->
<!-- </a-col>-->
<!-- <a-col class="gutter-row" :span="8">-->
<!-- <a-button-->
<!-- class="getCaptcha"-->
<!-- tabindex="-1"-->
<!-- :disabled="state.smsSendBtn"-->
<!-- @click.stop.prevent="getCaptcha"-->
<!-- v-text="!state.smsSendBtn && '获取验证码' || (state.time+' s')"-->
<!-- ></a-button>-->
<!-- </a-col>-->
<!-- </a-row>-->
<!-- </a-tab-pane>-->
<!-- </a-tabs>-->
<!-- <a-row :gutter="16">-->
<!-- <a-col class="gutter-row" :span="16">-->
<!-- <a-form-item>-->
<!-- <a-input-->
<!-- size="large"-->
<!-- type="text"-->
<!-- placeholder="验证码"-->
<!-- v-decorator="['captcha', {rules: [{ required: true, message: '请输入验证码' }], validateTrigger: 'blur'}]"-->
<!-- >-->
<!-- <a-icon slot="prefix" type="mail" :style="{ color: 'rgba(0,0,0,.25)' }" />-->
<!-- </a-input>-->
<!-- </a-form-item>-->
<!-- </a-col>-->
<!-- <a-col class="gutter-row" :span="8">-->
<!-- <a-button-->
<!-- class="getCaptcha"-->
<!-- tabindex="-1"-->
<!-- :disabled="state.smsSendBtn"-->
<!-- @click.stop.prevent="getCaptcha"-->
<!-- v-text="!state.smsSendBtn && '获取验证码' || (state.time+' s')"-->
<!-- ></a-button>-->
<!-- </a-col>-->
<!-- </a-row>-->
<!-- </a-tab-pane>-->
<!-- </a-tabs>-->
<a-form-item>
<a-checkbox v-decorator="['rememberMe', { valuePropName: 'checked' }]">自动登录</a-checkbox>
<!-- <router-link class="register" style="float: right;" :to="{ name: 'register' }">注册账户</router-link>-->
<!-- <router-link class="register" style="float: right;" :to="{ name: 'register' }">注册账户</router-link>-->
</a-form-item>
<a-form-item style="margin-top:24px">
<a-form-item style='margin-top:24px'>
<a-button
size="large"
type="primary"
htmlType="submit"
class="login-button"
:loading="state.loginBtn"
:disabled="state.loginBtn"
>确定</a-button>
size='large'
type='primary'
htmlType='submit'
class='login-button'
:loading='state.loginBtn'
:disabled='state.loginBtn'
>确定
</a-button>
</a-form-item>
<!-- <div class="user-login-other">-->
@ -105,17 +106,17 @@
</a-form>
<two-step-captcha
v-if="requiredTwoStepCaptcha"
:visible="stepCaptchaVisible"
@success="stepCaptchaSuccess"
@cancel="stepCaptchaCancel"
v-if='requiredTwoStepCaptcha'
:visible='stepCaptchaVisible'
@success='stepCaptchaSuccess'
@cancel='stepCaptchaCancel'
></two-step-captcha>
<Verify
@success="capctchaCheckSucc"
@success='capctchaCheckSucc'
:mode="'pop'"
:captchaType="'blockPuzzle'"
:imgSize="{ width: '330px', height: '155px' }"
ref="verify"
ref='verify'
></Verify>
</div>
</template>
@ -135,7 +136,7 @@ export default {
TwoStepCaptcha,
Verify
},
data () {
data() {
return {
capctchaCheck: false,
verify: '',
@ -157,12 +158,24 @@ export default {
}
}
},
created () {
created() {
},
mounted() {
let username = this.$route.query.username
let pwd = this.$route.query.pwd
if (username && username != '' && pwd && pwd != '') {
this.form.setFieldsValue({
'username': username,
'password': pwd
})
this.loginForm()
}
},
methods: {
...mapActions(['Login', 'Logout']),
// handler
handleUsernameOrEmail (rule, value, callback) {
handleUsernameOrEmail(rule, value, callback) {
const { state } = this
const regex = /^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+((\.[a-zA-Z0-9_-]{2,3}){1,2})$/
if (regex.test(value)) {
@ -172,24 +185,25 @@ export default {
}
callback()
},
handleTabClick (key) {
handleTabClick(key) {
this.customActiveKey = key
// this.form.resetFields()
},
capctchaCheckSucc (data) {
capctchaCheckSucc(data) {
this.capctchaCheck = true
this.verify = data.captchaVerification
this.loginForm()
},
handleSubmit (e) {
handleSubmit(e) {
e.preventDefault()
this.loginForm()
},
loginForm () {
if (!this.capctchaCheck) {
this.$refs.verify.show()
return false
}
loginForm() {
//
// if (!this.capctchaCheck) {
// this.$refs.verify.show()
// return false
// }
const {
form: { validateFields },
state,
@ -224,7 +238,7 @@ export default {
}
})
},
getCaptcha (e) {
getCaptcha(e) {
e.preventDefault()
const {
form: { validateFields },
@ -267,16 +281,16 @@ export default {
}
})
},
stepCaptchaSuccess () {
stepCaptchaSuccess() {
this.loginSuccess()
},
stepCaptchaCancel () {
stepCaptchaCancel() {
this.Logout().then(() => {
this.loginBtn = false
this.stepCaptchaVisible = false
})
},
loginSuccess (res) {
loginSuccess(res) {
if (res.code === 0) {
this.$router.push({ name: 'repairStatistics' }, () => { //
this.$notification.success({
@ -290,7 +304,7 @@ export default {
this.requestFailed(res)
}
},
requestFailed (err) {
requestFailed(err) {
this.isLoginError = true
this.errorMsg = ((err.response || {}).data || {}).msg || err.msg || '请求出现错误,请稍后再试'
this.$notification['error']({
@ -303,7 +317,7 @@ export default {
}
</script>
<style lang="less" scoped>
<style lang='less' scoped>
.user-layout-login {
label {
font-size: 14px;