boyue2025/dbd-meeting-html
3
0
Fork 0
mirror of https://gitee.com/elegant_wings/dbd-meeting-html.git synced 2025-06-21 05:39:36 +08:00
Code Issues Packages Projects Releases Wiki Activity

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

Browse Source
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
README.md
View File

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

214
src/views/user/Login.vue
View File

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