elink-star
/
tduck-front
12
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

忘记密码

old
wangqing 5 years ago
parent
94aed2f95a
commit
ef718a98c3
2 changed files with 326 additions and 87 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 296
      src/views/account/ForgetPwd.vue
  2. 117
      src/views/account/login.vue

296
src/views/account/ForgetPwd.vue
View File

@ -1,91 +1,237 @@
<template>
<div class="app-container">
<div class="pwd-container">
<label>找回密码</label>
<el-tabs
v-model="retrieveType" class="login-form" style="width: 300px;"
>
<el-tab-pane label="手机号找回" name="phone">
<el-form ref="form" :model="retrieveAccountForm" label-width="0px">
<el-form-item label="">
<el-input v-model="retrieveAccountForm.username" placeholder="请输入手机号" autocomplete="off" />
</el-form-item>
<el-form-item label="">
<el-input v-model="retrieveAccountForm.password" show-password placeholder="请输入密码"
autocomplete="off"
/>
</el-form-item>
<el-form-item label="">
<el-input v-model="retrieveAccountForm.code" style="width: 150px;" placeholder="请输入验证码"
autocomplete="off"
/>
<el-button style="margin-left: 20px;" type="primary">发送验证码</el-button>
</el-form-item>
<el-form-item>
<el-button type="primary" style="width: 100%;">登录</el-button>
</el-form-item>
</el-form>
</el-tab-pane>
<el-tab-pane label="邮箱找回" name="email">
<el-form ref="emailRegForm" status-icon :rules="emailRetrieveRules" :model="retrieveAccountForm"
label-width="0px"
>
<el-form-item label="" prop="email">
<el-input v-model="retrieveAccountForm.email" placeholder="请输入邮箱" autocomplete="off" />
</el-form-item>
<el-form-item label="" prop="password">
<el-input v-model="retrieveAccountForm.password" show-password placeholder="请输入密码"
autocomplete="off"
/>
</el-form-item>
<el-form-item label="" prop="code">
<el-input v-model="retrieveAccountForm.code" oninput="value=value.replace(/[^\d]/g,'')"
style="width: 150px;" maxlength="4" placeholder="请输入验证码"
autocomplete="off"
/>
<el-button style="margin-left: 20px;" :disabled="validateCodeBtn" type="primary"
@click="sendEmailCodeHandle"
>
{{ validateCodeBtnText }}
</el-button>
</el-form-item>
<el-form-item>
<el-button type="primary" style="width: 100%;" @click="emailRegHandle">确定</el-button>
</el-form-item>
</el-form>
</el-tab-pane>
</el-tabs>
<div v-if="retrieveStep===1" class="pwd-container">
<div style="width: 350px;">
<h4 class="title">找回密码</h4>
<el-tabs
v-model="retrieveType" class="login-form"
>
<el-tab-pane label="手机找回" name="phone">
<el-form ref="phoneForm" :model="retrieveAccountForm" label-width="0px" :rules="phoneRules">
<el-form-item label="" prop="phoneNumber">
<el-input v-model="retrieveAccountForm.phoneNumber" placeholder="请输入手机号"
autocomplete="off"
/>
</el-form-item>
<el-form-item label="" prop="code">
<el-input v-model="retrieveAccountForm.code" style="width: 150px;" placeholder="请输入验证码"
autocomplete="off"
/>
<el-button style="margin-left: 20px;" type="primary" :disabled="emailValidateCodeBtn"
@click="sendPhoneValidateCodeHandle"
>
{{ emailValidateCodeBtnText }}
</el-button>
</el-form-item>
<el-form-item>
<el-button type="primary" style="width: 100%;" @click="phoneRetrievePassWordHandle">
找回密码
</el-button>
</el-form-item>
</el-form>
</el-tab-pane>
<el-tab-pane label="邮箱找回" name="email">
<el-form ref="emailForm" status-icon :model="retrieveAccountForm"
label-width="0px"
>
<el-form-item label="" prop="email">
<el-input v-model="retrieveAccountForm.email" placeholder="请输入邮箱" autocomplete="off" />
</el-form-item>
<el-form-item>
<el-button type="primary" style="width: 100%;" @click="sendEmailValidateHandle">
找回密码
</el-button>
</el-form-item>
</el-form>
</el-tab-pane>
</el-tabs>
</div>
</div>
<div v-if="retrieveStep===2" class="reset-pwd-view">
<div style="width: 350px;">
<h4 class="title">重置密码</h4>
<div class="rest-pwd-user-view">
<i class="el-icon-user" />
<span>{{ resetAccount }}</span>
</div>
<el-form ref="resetPwdForm" :model="resetPwdForm" label-width="0px" :rules="pwdRules">
<el-form-item label="" prop="password">
<el-input v-model="resetPwdForm.password" show-password placeholder="请输入密码"
autocomplete="off"
/>
</el-form-item>
<el-form-item label="" prop="rePassword">
<el-input v-model="resetPwdForm.rePassword" show-password placeholder="请再次输入密码"
autocomplete="off"
/>
</el-form-item>
<el-form-item>
<el-button type="primary" style="width: 100%;" @click="resetPasswordHandle">
提交
</el-button>
</el-form-item>
</el-form>
</div>
</div>
<Verify
ref="verify"
:mode="'pop'"
:captcha-type="'blockPuzzle'"
:img-size="{ width: '330px', height: '155px' }"
@success="verifySuccessHandle"
/>
</div>
</template>
<script>
// 引入组件
import Verify from '@/components/verifition/Verify'
export default {
name: 'RetrievePwd',
components: {
Verify
},
data() {
let validatePassword = (rule, value, callback) => {
if (value.length < 6) {
callback(new Error('密码最少为6位数'))
} else {
if (this.resetPwdForm.rePassword !== '') {
this.$refs.restPwdForm.validateField('rePassword')
}
callback()
}
}
let validateRePass = (rule, value, callback) => {
if (value === '') {
callback(new Error('请再次输入密码'))
} else if (value !== this.resetPwdForm.rePassword) {
callback(new Error('两次输入密码不一致!'))
} else {
callback()
}
}
return {
retrieveStep: 1,
retrieveType: 'phone',
emailValidateCodeBtn: false,
emailValidateCodeBtnText: '发送验证码',
retrieveAccountForm: {
phoneNumber: '',
email: '',
password: ''
},
emailRetrieveRules: {
email: [
{required: true, trigger: 'blur', message: '请输入邮箱'},
resetAccount: '',
resetPwdForm: {
code: '',
password: '',
rePassword: ''
},
phoneRules: {
phoneNumber: [
{required: true, trigger: 'blur', message: '请输入手机号'},
{
pattern: /^[a-zA-Z0-9_.-]+@[a-zA-Z0-9-]+(\.[a-zA-Z0-9-]+)*\.[a-zA-Z0-9]{2,6}$/,
message: '请输入正确的邮箱,多个使用;分隔'
pattern: /^(?:0|86|\+86)?1[3456789]\d{9}$/,
message: '请输入正确的手机号'
}
],
// password: [{required: true, trigger: 'blur', validator: validatePassword}],
code: {required: true, trigger: 'blur', message: '请输入验证码'}
},
pwdRules: {
password: [{required: true, trigger: 'blur', validator: validatePassword}],
rePassword: [{required: true, trigger: 'blur', validator: validateRePass}]
}
}
},
created() {
let code = this.$route.query.code
if (code) {
this.retrieveStep = 2
}
},
methods: {
sendPhoneValidateCodeHandle() {
this.$refs['phoneForm'].validateField('phoneNumber', err => {
if (!err) {
this.$refs.verify.show()
}
})
},
sendPhoneValidateCode() {
let slideCode = params.captchaVerification
this.$refs['phoneForm'].validateField('phoneNumber', err => {
if (!err) {
this.emailValidateCodeBtn = true
this.$api.get(`/retrieve/password/phone/code?phoneNumber=${this.retrieveAccountForm.phoneNumber}&slideCode=${slideCode}`).then(() => {
this.msgSuccess('验证码发送成功，5分钟内有效')
this.emailValidateCodeBtn = true
let count = 60
let timer = setInterval(() => {
count--
this.emailValidateCodeBtnText = count + 's后重新发送'
if (count == 0) {
this.emailValidateCodeBtnText = '发送验证码'
this.emailValidateCodeBtn = false
clearInterval(timer)
}
}, 1000)
})
}
})
},
phoneRetrievePassWordHandle() {
this.$refs['phoneForm'].validate(valid => {
if (valid) {
this.$api.post('/retrieve/password/check/phone-code', this.retrieveAccountForm).then(res => {
if (res.data) {
this.msgSuccess('验证成功')
this.resetPwdForm.code = res.data
this.resetAccount = this.retrieveAccountForm.phoneNumber
this.retrieveStep = 2
}
})
}
})
},
resetPasswordHandle() {
this.$refs['resetPwdForm'].validate(valid => {
if (valid) {
this.$api.post('/retrieve/password/reset', this.resetPwdForm).then(res => {
if (res.data) {
this.msgSuccess('密码重置成功，快去登录吧')
this.$router.push({path: '/login'})
}
})
}
})
},
sendEmailValidateHandle() {
this.$refs['emailForm'].validateField('email', err => {
if (!err) {
this.$refs.verify.show()
}
})
},
sendEmailValidate() {
this.$refs['emailForm'].validateField('email', err => {
if (!err) {
this.$refs.verify.show()
}
})
},
verifySuccessHandle(params) {
if (this.retrieveType == 'phone') {
this.sendPhoneValidateCode(params)
} else {
this.sendEmailValidate(params)
}
}
}
}
</script>
<style scoped>
<style lang="scss" scoped>
.app-container {
height: 100%;
width: 100%;
@ -93,9 +239,33 @@ export default {
justify-content: center;
align-content: center;
}
.title {
color: rgba(16, 16, 16, 100);
font-size: 28px;
text-align: center;
}
.pwd-container {
width: 20%;
height: 50%;
border: 1px red solid;
align-content: center;
}
.rest-pwd-user-view {
line-height: 80px;
height: 100px;
padding: 10px;
.el-icon-user {
display: inline-block;
width: 20%;
color: #717171;
text-align: left;
font-size: 50px;
}
span {
color: #4c4c4c;
display: inline-block;
text-align: center;
font-size: 19px;
width: 80%;
}
}
</style>

117
src/views/account/login.vue
View File

@ -44,7 +44,7 @@
<span @click="redirectUrl(qqLoginAuthorizeUrl)">
<svg-icon name="loginQQ" class="other-login-icon" />
</span>
<svg-icon name="loginWx" class="other-login-icon" />
<!-- <svg-icon name="loginWx" class="other-login-icon" />-->
</div>
</el-col>
</el-row>
@ -114,7 +114,13 @@
<span @click="redirectUrl(qqLoginAuthorizeUrl)">
<svg-icon name="loginQQ" class="other-login-icon" />
</span>
<svg-icon name="loginWx" class="other-login-icon" />
<svg-icon name="loginWx"
class="other-login-icon"
@click="()=>{
this.formType='login',
this.loginType='wx'
}"
/>
</div>
</el-col>
</el-row>
@ -127,23 +133,27 @@
@tab-click="registerHandleClick"
>
<el-tab-pane label="手机号注册" name="regPhone">
<el-form ref="form" :model="accountForm" label-width="0px">
<el-form-item label="">
<el-input v-model="accountForm.username" placeholder="请输入手机号" autocomplete="off" />
<el-form ref="phoneRegForm" :model="accountForm" :rules="phoneRegRules" label-width="0px">
<el-form-item label="" prop="phoneNumber">
<el-input v-model="accountForm.phoneNumber" placeholder="请输入手机号" autocomplete="off" />
</el-form-item>
<el-form-item label="">
<el-form-item label="" prop="password">
<el-input v-model="accountForm.password" show-password placeholder="请输入密码"
autocomplete="off"
/>
</el-form-item>
<el-form-item label="">
<el-form-item label="" prop="code">
<el-input v-model="accountForm.code" style="width: 150px;" placeholder="请输入验证码"
autocomplete="off"
/>
<el-button style="margin-left: 20px;" type="primary">发送验证码</el-button>
<el-button style="margin-left: 20px;" :disabled="phoneValidateCodeBtn" type="primary"
@click="sendPhoneCodeHandle"
>
{{ phoneValidateCodeBtnText }}
</el-button>
</el-form-item>
<el-form-item>
<el-button type="primary" style="width: 100%;">登录</el-button>
<el-button type="primary" style="width: 100%;" @click="phoneRegHandle">确定</el-button>
</el-form-item>
</el-form>
</el-tab-pane>
@ -164,10 +174,10 @@
style="width: 150px;" maxlength="4" placeholder="请输入验证码"
autocomplete="off"
/>
<el-button style="margin-left: 20px;" :disabled="validateCodeBtn" type="primary"
<el-button style="margin-left: 20px;" :disabled="emailValidateCodeBtn" type="primary"
@click="sendEmailCodeHandle"
>
{{ validateCodeBtnText }}
{{ emailValidateCodeBtnText }}
</el-button>
</el-form-item>
<el-form-item>
@ -182,7 +192,13 @@
<span @click="redirectUrl(qqLoginAuthorizeUrl)">
<svg-icon name="loginQQ" class="other-login-icon" />
</span>
<svg-icon name="loginWx" class="other-login-icon" />
<svg-icon name="loginWx"
class="other-login-icon"
@click="()=>{
this.formType='login',
this.loginType='wx'
}"
/>
</div>
</div>
</el-tabs>
@ -229,17 +245,30 @@ export default {
}
return {
loginType: 'wx',
validateCodeBtn: false,
validateCodeBtnText: '发送验证码',
emailValidateCodeBtn: false,
emailValidateCodeBtnText: '发送验证码',
phoneValidateCodeBtn: false,
phoneValidateCodeBtnText: '发送验证码',
formType: 'login',
regType: 'regPhone',
agreeProtocol: '',
phoneRegRules: {
phoneNumber: [
{required: true, trigger: 'blur', message: '请输入手机号'},
{
pattern: /^(?:0|86|\+86)?1[3456789]\d{9}$/,
message: '请输入正确的手机号'
}
],
password: [{required: true, trigger: 'blur', validator: validatePassword}],
code: {required: true, trigger: 'blur', message: '请输入验证码'}
},
emailRegRules: {
email: [
{required: true, trigger: 'blur', message: '请输入邮箱'},
{
pattern: /^[a-zA-Z0-9_.-]+@[a-zA-Z0-9-]+(\.[a-zA-Z0-9-]+)*\.[a-zA-Z0-9]{2,6}$/,
message: '请输入正确的邮箱,多个使用;分隔'
message: '请输入正确的邮箱'
}
],
password: [{required: true, trigger: 'blur', validator: validatePassword}],
@ -252,6 +281,7 @@ export default {
},
accountForm: {
email: '',
phoneNumber: '',
password: ''
},
wxQrCodeLoading: true,
@ -261,6 +291,9 @@ export default {
wxQrcodeResultTimer: null,
qqLoginAuthorizeUrl: ''
}
},
watch: {
},
created() {
this.getLoginWxQrCode()
@ -325,16 +358,17 @@ export default {
sendEmailCodeHandle() {
this.$refs['emailRegForm'].validateField('email', err => {
if (!err) {
this.validateCodeBtn = true
this.emailValidateCodeBtn = true
this.$api.get(`/register/email/code?email=${this.accountForm.email}`).then(() => {
this.msgSuccess('验证码发送成功，5分钟内有效')
this.validateCodeBtn = true
this.emailValidateCodeBtn = true
let count = 60
let timer = setInterval(() => {
count--
this.validateCodeBtnText = count + 's后重新发送'
this.emailValidateCodeBtnText = count + 's后重新发送'
if (count == 0) {
this.validateCodeBtnText = '发送验证码'
this.emailValidateCodeBtnText = '发送验证码'
this.emailValidateCodeBtn = false
clearInterval(timer)
}
}, 1000)
@ -342,21 +376,56 @@ export default {
}
})
},
sendPhoneCodeHandle() {
this.$refs['phoneRegForm'].validateField('phoneNumber', err => {
if (!err) {
this.phoneValidateCodeBtn = true
this.$api.get(`/register/phone/code?phoneNumber=${this.accountForm.phoneNumber}`).then(() => {
this.msgSuccess('验证码发送成功，5分钟内有效')
this.phoneValidateCodeBtn = true
let count = 60
let timer = setInterval(() => {
count--
this.phoneValidateCodeBtnText = count + 's后重新发送'
if (count == 0) {
this.phoneValidateCodeBtnText = '发送验证码'
this.phoneValidateCodeBtn = false
clearInterval(timer)
}
}, 1000)
})
}
})
},
phoneRegHandle() {
this.$refs['phoneRegForm'].validate(valid => {
if (valid) {
this.$api.post('/register/phone', this.accountForm).then(() => {
this.registerSuccessHandle()
})
} else {
return false
}
})
},
emailRegHandle() {
this.$refs['emailRegForm'].validate(valid => {
if (valid) {
this.$api.post('/register/email', this.accountForm).then(() => {
this.msgSuccess('注册成功，快去登录吧')
setTimeout(() => {
this.formType = 'login'
this.loginType = 'account'
}, 1000)
this.registerSuccessHandle()
})
} else {
return false
}
})
},
registerSuccessHandle() {
this.msgSuccess('注册成功，快去登录吧')
setTimeout(() => {
this.formType = 'login'
this.loginType = 'account'
}, 1000)
},
loginSuccessHandle(data) {
this.msgSuccess('登录成功')
this.$store.dispatch('user/login', data).then(() => {

Write Preview
Loading…
Cancel
Save