<template>
|
<view class="content">
|
<view class="step-row">
|
<el-steps :active="step" simple>
|
<el-step title="1.验证手机号码" icon="step-icon"></el-step>
|
<el-step title="2.设置新密码" icon="step-icon"></el-step>
|
</el-steps>
|
</view>
|
<view class="input-group" v-show="step == 1">
|
<view class="input-row">
|
<el-input placeholder="请输入手机号" prefix-icon="el-icon-mobile-phone" v-model="mobile"></el-input>
|
</view>
|
<view class="input-row">
|
<el-input placeholder="请输入短信验证码" prefix-icon="el-icon-message" v-model="smsCode">
|
<el-button slot="suffix" type="primary" size="mini" plain @click="sendSmsCode()">{{codeDuration ? codeDuration + 's' : '发送验证码' }}</el-button>
|
</el-input>
|
</view>
|
<view class="btn-row">
|
<button type="primary" class="primary" @tap="authMobile">下一步</button>
|
</view>
|
</view>
|
|
<view class="input-group" v-show="step == 2">
|
<view class="input-row">
|
<el-input placeholder="请设置6-20位新的登录密码" prefix-icon="el-icon-lock" v-model="password"></el-input>
|
</view>
|
<view class="input-row">
|
<el-input placeholder="请再次输入新的登录密码" prefix-icon="el-icon-lock" v-model="confirmPassword"></el-input>
|
</view>
|
<view class="btn-row">
|
<button type="primary" class="primary" @tap="resetPassword">提交</button>
|
</view>
|
</view>
|
</view>
|
</template>
|
|
<script>
|
import mInput from '../../components/m-input.vue';
|
import {
|
sendCode,
|
resetPwd,
|
accountLogin
|
} from '@/api/account.js'
|
|
export default {
|
components: {
|
mInput
|
},
|
data() {
|
return {
|
step: 1,
|
mobile: '',
|
smsCode: '',
|
codeDuration: 0,
|
password: '',
|
confirmPassword: ''
|
}
|
},
|
methods: {
|
authMobile() {
|
if (!this.mobile.length) {
|
uni.showToast({
|
icon: 'none',
|
title: '手机号码不能为空'
|
})
|
return
|
}
|
|
if (!/^1\d{10}$/.test(this.mobile)) {
|
uni.showToast({
|
icon: 'none',
|
title: '手机号码格式不正确'
|
})
|
return
|
}
|
|
if (!this.smsCode.length) {
|
uni.showToast({
|
icon: 'none',
|
title: '验证码不能为空'
|
});
|
return
|
}
|
|
let data = {
|
type: "sms",
|
mobile: this.mobile,
|
code: this.smsCode
|
}
|
accountLogin(data).then(rsp => {
|
if (rsp && rsp.success) {
|
uni.showToast({
|
icon: 'none',
|
title: '手机验证成功'
|
});
|
|
setTimeout(() => {
|
this.step = 2
|
}, 1000)
|
} else {
|
uni.showToast({
|
icon: 'none',
|
title: rsp.message
|
});
|
}
|
}).catch(errMsg => {
|
uni.showToast({
|
icon: 'none',
|
title: errMsg
|
});
|
})
|
},
|
sendSmsCode() {
|
if (this.codeDuration) {
|
uni.showToast({
|
title: `请在${this.codeDuration}秒后重试`,
|
icon: 'none'
|
})
|
return
|
}
|
if (!/^1\d{10}$/.test(this.mobile)) {
|
uni.showToast({
|
title: `手机号码格式不正确`,
|
icon: 'none'
|
})
|
return
|
}
|
|
let data = {
|
mobile: this.mobile,
|
type: 'findPwd'
|
}
|
|
sendCode(data).then(rsp => {
|
if (rsp && rsp.success) {
|
uni.showToast({
|
icon: 'none',
|
title: '验证码发送成功，请注意查收'
|
});
|
this.codeDuration = 60
|
this.codeInterVal = setInterval(() => {
|
this.codeDuration--
|
if (this.codeDuration === 0) {
|
if (this.codeInterVal) {
|
clearInterval(this.codeInterVal)
|
this.codeInterVal = null
|
}
|
}
|
}, 1000)
|
} else {
|
uni.showToast({
|
icon: 'none',
|
title: '验证码发送失败：' + rsp.message
|
});
|
}
|
}).catch(err => {
|
uni.showToast({
|
icon: 'none',
|
title: '验证码发送失败：'
|
})
|
})
|
},
|
resetPassword() {
|
if (!this.password.length || !this.confirmPassword.length) {
|
uni.showToast({
|
title: `新密码不能为空`,
|
icon: 'none'
|
})
|
return
|
}
|
if (this.password.length < 6 || this.confirmPassword.length < 6) {
|
uni.showToast({
|
title: `新密码格式不正确`,
|
icon: 'none'
|
})
|
return
|
}
|
if (this.password !== this.confirmPassword) {
|
uni.showToast({
|
title: `两次输入的密码不一致`,
|
icon: 'none'
|
})
|
return
|
}
|
|
let data = {
|
mobile: this.mobile,
|
code: this.smsCode,
|
password: this.password
|
}
|
|
resetPwd(data).then(rsp => {
|
if (rsp && rsp.success) {
|
uni.showToast({
|
title: `密码修改成功`,
|
icon: 'none'
|
})
|
|
setTimeout(() => {
|
uni.reLaunch({
|
url: '../login/login',
|
});
|
}, 2000)
|
} else {
|
uni.showToast({
|
title: `密码修改失败,` + rsp.message,
|
icon: 'none'
|
})
|
}
|
}).catch(errMsg => {
|
uni.showToast({
|
title: `密码修改失败,` + errMsg,
|
icon: 'none'
|
})
|
})
|
}
|
}
|
}
|
</script>
|
|
<style scoped>
|
.send-code-btn {
|
width: 120px;
|
text-align: center;
|
background-color: #0FAEFF;
|
color: #FFFFFF;
|
}
|
|
.step-icon {
|
display: none;
|
}
|
|
/deep/ .el-step.is-simple .el-step__title {
|
font-size: 13px;
|
}
|
</style>
|
