381 lines
10 KiB
Vue
381 lines
10 KiB
Vue
<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>
|