mirror of
https://gitee.com/elegant_wings/dbd-meeting-html.git
synced 2025-06-21 05:39:36 +08:00
去掉验证码验证，实现传参带入用户名密码
This commit is contained in:
471615499@qq.com
parent
d58fc800fc
commit
d5ca9fa6df
@ -2,7 +2,7 @@
|
||||
|
||||
Overview
|
||||
## 前端文档地址：
|
||||
https://1x.antdv.com/components/
|
||||
https://1x.antdv.com/docs/vue/introduce-cn/
|
||||
|
||||
----
|
||||
项目下载和运行
|
||||
|
||||
@ -1,121 +1,122 @@
|
||||
<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">-->
|
||||
<!-- <span>其他登录方式</span>-->
|
||||
<!-- <a>-->
|
||||
<!-- <a-icon class="item-icon" type="alipay-circle"></a-icon>-->
|
||||
<!-- </a>-->
|
||||
<!-- <a>-->
|
||||
<!-- <a-icon class="item-icon" type="taobao-circle"></a-icon>-->
|
||||
<!-- </a>-->
|
||||
<!-- <a>-->
|
||||
<!-- <a-icon class="item-icon" type="weibo-circle"></a-icon>-->
|
||||
<!-- </a>-->
|
||||
<!-- <router-link class="register" :to="{ name: 'register' }">注册账户</router-link>-->
|
||||
<!-- </div>-->
|
||||
<!-- <div class="user-login-other">-->
|
||||
<!-- <span>其他登录方式</span>-->
|
||||
<!-- <a>-->
|
||||
<!-- <a-icon class="item-icon" type="alipay-circle"></a-icon>-->
|
||||
<!-- </a>-->
|
||||
<!-- <a>-->
|
||||
<!-- <a-icon class="item-icon" type="taobao-circle"></a-icon>-->
|
||||
<!-- </a>-->
|
||||
<!-- <a>-->
|
||||
<!-- <a-icon class="item-icon" type="weibo-circle"></a-icon>-->
|
||||
<!-- </a>-->
|
||||
<!-- <router-link class="register" :to="{ name: 'register' }">注册账户</router-link>-->
|
||||
<!-- </div>-->
|
||||
</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;
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user