调整
This commit is contained in:
liushiwei
380
src/view/login/Forget.vue
Normal file
380
src/view/login/Forget.vue
Normal file
@@ -0,0 +1,380 @@
|
||||
<template>
|
||||
<div class="login">
|
||||
<div class="body">
|
||||
<div class="middle">
|
||||
<div class="right">
|
||||
<div class="tab">
|
||||
<h2 class="active" @click="currIndex = 0">找回密码</h2>
|
||||
</div>
|
||||
<el-form :model="form" label-position="top" ref="form" label-width="100px" class="form">
|
||||
<el-form-item
|
||||
prop="phone"
|
||||
:rules="[{ required: true, message: '请输入手机号', trigger: 'blur' }, { validator: phoneReg, trigger: 'blur' }]">
|
||||
<el-input maxlength="11" placeholder="请输入手机号" v-model="form.phone"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item
|
||||
prop="password"
|
||||
:rules="[{ required: true, message: '请输入密码', trigger: 'blur' }]">
|
||||
<el-input placeholder="请输入密码" type="password" v-model="form.password"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item
|
||||
prop="repassword"
|
||||
:rules="[{ required: true, message: '请再次输入密码', trigger: 'blur' }]">
|
||||
<el-input placeholder="请再次输入密码" type="password" v-model="form.repassword"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="" prop="code" :rules="[{ required: true, message: '请输入验证码', trigger: 'blur' }]">
|
||||
<div class="code-item">
|
||||
<el-input style="width: 300px;" maxlength="4" placeholder="请输入验证码" v-model="form.code"></el-input>
|
||||
<span @click="getCode" :loading="btnLoading">{{ isStart ? time + ' S' : '发送验证码' }}</span>
|
||||
</div>
|
||||
</el-form-item>
|
||||
<el-button type="primary" style="width: 100%" @click="login" :loading="btnLoading">重置设置</el-button>
|
||||
</el-form>
|
||||
<div class="login-footer">
|
||||
<div class="left">
|
||||
<i class="hover" @click="$router.back()">返回登录</i>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import CryptoJS from 'crypto-js'
|
||||
export default {
|
||||
data () {
|
||||
return {
|
||||
form: {
|
||||
password: '',
|
||||
repassword: '',
|
||||
code: '',
|
||||
phone: ''
|
||||
},
|
||||
phoneReg: (rule, value, callback) => {
|
||||
if (/^1[0-9]{10,10}$/.test(value)) {
|
||||
return callback()
|
||||
}
|
||||
|
||||
callback(new Error('手机号格式错误'))
|
||||
},
|
||||
timer: null,
|
||||
time: 60,
|
||||
isSend: false,
|
||||
isStart: false,
|
||||
isLoading: false,
|
||||
currIndex: 0,
|
||||
btnLoading: false,
|
||||
loginType: '0'
|
||||
}
|
||||
},
|
||||
|
||||
mounted () {
|
||||
},
|
||||
|
||||
methods: {
|
||||
login () {
|
||||
this.$refs.form.validate((valid) => {
|
||||
if (valid) {
|
||||
if (this.form.password != this.form.repassword) {
|
||||
this.$message.success('两次密码输入不一致');
|
||||
return;
|
||||
}
|
||||
this.btnLoading = true
|
||||
this.$http.post(`/api/malluser/forget`, null, {
|
||||
params: {
|
||||
...this.form
|
||||
}
|
||||
}, {
|
||||
headers: {
|
||||
Authorization: 'Basic cGM6cGM='
|
||||
}
|
||||
}).then(res => {
|
||||
if (res.code === 0) {
|
||||
this.$message.success('注册成功')
|
||||
|
||||
setTimeout(() => {
|
||||
this.$router.replace('/login')
|
||||
}, 500)
|
||||
}
|
||||
|
||||
this.btnLoading = false
|
||||
}).catch(() => {
|
||||
this.btnLoading = false
|
||||
})
|
||||
} else {
|
||||
return false;
|
||||
}
|
||||
})
|
||||
},
|
||||
encryptPhone (phone) {
|
||||
const u = navigator.userAgent
|
||||
const isIos = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/)
|
||||
var key = 'thanks,temulll11'
|
||||
var iv = CryptoJS.enc.Latin1.parse(key)
|
||||
var encrypted = CryptoJS.AES.encrypt(phone, iv, {
|
||||
iv: iv,
|
||||
mode: CryptoJS.mode.CBC,
|
||||
padding: CryptoJS.pad.ZeroPadding
|
||||
})
|
||||
|
||||
if (isIos) {
|
||||
return encodeURIComponent(encrypted.toString())
|
||||
} else {
|
||||
return encrypted.toString()
|
||||
}
|
||||
},
|
||||
|
||||
getCode () {
|
||||
if (this.isSend) {
|
||||
return this.$message.error('验证码已发送')
|
||||
}
|
||||
|
||||
this.$refs.form.validateField('phone', e => {
|
||||
if (!e) {
|
||||
let phone = this.encryptPhone(this.form.phone)
|
||||
this.isSend = true
|
||||
this.btnLoading = true
|
||||
this.$http.post(`/api/sms/getRegSmsCodeNew?phone=${phone}`, {}, {
|
||||
withoutToken: true
|
||||
}).then(res => {
|
||||
if (res.code === 0) {
|
||||
this.$message.success('验证码发送成功')
|
||||
this.isStart = true
|
||||
this.timer = setInterval(() => {
|
||||
if (this.time === 0) {
|
||||
this.isSend = false
|
||||
this.isStart = false
|
||||
this.time = 60
|
||||
clearInterval(this.timer)
|
||||
|
||||
return false
|
||||
}
|
||||
|
||||
this.time = this.time - 1
|
||||
}, 1000)
|
||||
}
|
||||
|
||||
this.btnLoading = false
|
||||
this.isSend = false
|
||||
}).catch(() => {
|
||||
this.isSend = false
|
||||
this.btnLoading = false
|
||||
})
|
||||
}
|
||||
})
|
||||
},
|
||||
|
||||
onChange (e) {
|
||||
this.$emit('change', e)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.login {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100vh;
|
||||
|
||||
.body {
|
||||
position: relative;
|
||||
flex: 1;
|
||||
width: 100%;
|
||||
background-color: #cdc8c8;
|
||||
// background: url(../../assets/images/login/login.png) no-repeat;
|
||||
background-size: 100% 100%;
|
||||
|
||||
.middle {
|
||||
position: absolute;
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
z-index: 11;
|
||||
width: 1280px;
|
||||
transform: translate(-50%, -50%);
|
||||
|
||||
& > .left {
|
||||
padding-top: 42px;
|
||||
font-family: MicrosoftYaHei;
|
||||
|
||||
p {
|
||||
line-height: 24px;
|
||||
margin-top: 12px;
|
||||
margin-bottom: 13px;
|
||||
font-size: 18px;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
span {
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
|
||||
& > .right {
|
||||
width: 500px;
|
||||
padding: 63px 40px 42px;
|
||||
box-shadow: 0px 2px 12px 0px rgba(0, 0, 0, 0.06);
|
||||
background: #fff;
|
||||
border-radius: 16px;
|
||||
backdrop-filter: blur(6px);
|
||||
overflow: hidden;
|
||||
|
||||
.tab {
|
||||
display: flex;
|
||||
position: relative;
|
||||
align-items: center;
|
||||
margin-bottom: 36px;
|
||||
padding-bottom: 17px;
|
||||
border-bottom: 1px solid #DCDFE6;
|
||||
|
||||
&::after {
|
||||
position: absolute;
|
||||
bottom: -1px;
|
||||
left: 0;
|
||||
z-index: 1;
|
||||
width: 81px;
|
||||
height: 2px;
|
||||
background: #1FBAD6;
|
||||
content: ' ';
|
||||
transition: all ease-in-out 0.3s;
|
||||
}
|
||||
|
||||
&.tab-active:after {
|
||||
transform: translateX(138px);
|
||||
}
|
||||
|
||||
h2 {
|
||||
width: 81px;
|
||||
line-height: 24px;
|
||||
text-align: center;
|
||||
font-size: 20px;
|
||||
font-family: SJsuqian;
|
||||
color: #000000;
|
||||
cursor: pointer;
|
||||
user-select: none;
|
||||
transition: all ease 0.4s;
|
||||
|
||||
&.active, &:hover {
|
||||
color: #1FBAD6;
|
||||
}
|
||||
|
||||
&:first-child {
|
||||
margin-right: 58px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.login-type {
|
||||
font-size: 14px;
|
||||
font-family: SJsuqian;
|
||||
text-align: center;
|
||||
color: #54657D;
|
||||
cursor: pointer;
|
||||
transition: all ease-in-out 0.4s;
|
||||
|
||||
&:hover {
|
||||
color: #1FBAD6;
|
||||
}
|
||||
}
|
||||
|
||||
.login-footer {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin-top: 21px;
|
||||
margin-bottom: 38px;
|
||||
|
||||
div {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
span {
|
||||
font-family: SJsuqian;
|
||||
color: #54657D;
|
||||
}
|
||||
|
||||
i {
|
||||
font-family: SJsuqian;
|
||||
color: #1FBAD6;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
::v-deep .el-form {
|
||||
.el-input__inner {
|
||||
height: 48px;
|
||||
border-color: #DCDFE6;
|
||||
background-color: transparent;
|
||||
|
||||
&:focus, &:hover {
|
||||
border-color: #1FBAD6;
|
||||
}
|
||||
|
||||
&::placeholder {
|
||||
color: #666666;
|
||||
}
|
||||
}
|
||||
|
||||
.el-form-item.is-error .el-input__inner, .el-form-item.is-error .el-input__inner:focus, .el-form-item.is-error .el-textarea__inner, .el-form-item.is-error .el-textarea__inner:focus {
|
||||
border-color: #F56C6C;
|
||||
}
|
||||
|
||||
.el-form-item {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.el-button {
|
||||
height: 48px;
|
||||
margin-top: 28px;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.code-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
|
||||
|
||||
span {
|
||||
width: 110px;
|
||||
height: 48px;
|
||||
line-height: 48px;
|
||||
text-align: center;
|
||||
font-size: 14px;
|
||||
color: #333;
|
||||
cursor: pointer;
|
||||
user-select: none;
|
||||
border-radius: 4px;
|
||||
transition: all cubic-bezier(0.215, 0.61, 0.355, 1) 0.3s;
|
||||
border: 1px solid #DCDFE6;
|
||||
|
||||
&:hover {
|
||||
border-color: #1FBAD6;
|
||||
}
|
||||
}
|
||||
|
||||
.el-form-item {
|
||||
width: 300px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.copyright {
|
||||
position: fixed;
|
||||
bottom: 24px;
|
||||
left: 50%;
|
||||
font-size: 14px;
|
||||
font-weight: 400;
|
||||
color: #fff;
|
||||
letter-spacing: 1px;
|
||||
transform: translateX(-50%);
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user