202 lines
4.8 KiB
Vue
202 lines
4.8 KiB
Vue
<template>
|
||
<view class="forget">
|
||
<view class="phone">
|
||
手机号： {{phoneFilter(userInfo.user_name)}}
|
||
</view>
|
||
<view class="codeBox">
|
||
<jl-input type="number" v-model="code" placeholder="请输入验证码"></jl-input>
|
||
<view v-if="action === 'can'" class="code" @click="getCode">
|
||
获取验证码
|
||
</view>
|
||
<view v-else-if="action === 'wait'" class="code">
|
||
获取验证码({{codeint}}s)
|
||
</view>
|
||
<view v-else-if="action === 'sending'" class="code">
|
||
发送中...
|
||
</view>
|
||
</view>
|
||
<jl-input type="number" :maxlength="maxlength" v-model="password" placeholder="请输入六位数字密码" @confirm="regPassword" showPassword clearable></jl-input>
|
||
<jl-input type="number" :maxlength="maxlength" v-model="newPassword" placeholder="请再次输入六位数字密码" @confirm="regNewPassword" showPassword clearable></jl-input>
|
||
<view v-if="error" class="error">两次密码输入不一致，请重新输入</view>
|
||
<view class="btn">
|
||
<view v-if="loading" class="bottombtn nocheck">提交中</view>
|
||
<view v-else-if="!validate" class="bottombtn nocheck">确认</view>
|
||
<view v-else @click="submit" class="bottombtn">确认</view>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import {mapGetters} from 'vuex'
|
||
import {
|
||
phoneFilter
|
||
} from '@/untils/format.js'
|
||
import jlInput from '@/components/jl-input/main.vue'
|
||
import {sendValidate, resetPass} from '@/api/auth.js'
|
||
import {
|
||
forgetPW,
|
||
accountsendValidate,
|
||
getCaptcha,
|
||
validateCode
|
||
} from '@/api/forgetPW.js'
|
||
const resendTime = 120
|
||
export default{
|
||
data () {
|
||
return {
|
||
code: '',
|
||
password: '',
|
||
newPassword: '',
|
||
action: 'can',
|
||
maxlength: 6,
|
||
codeint: resendTime,
|
||
loading: false,
|
||
error: false,
|
||
defCount:5,//默认发送短信次数
|
||
}
|
||
},
|
||
onLoad(options) {
|
||
if (options.forget) {
|
||
uni.setNavigationBarTitle({
|
||
title:'忘记密码'
|
||
})
|
||
}
|
||
},
|
||
components:{jlInput},
|
||
methods: {
|
||
phoneFilter,
|
||
setTimer() {
|
||
var sendCode = setInterval(() => {
|
||
this.codeint -= 1;
|
||
if (this.codeint <= 0) {
|
||
this.action = 'can'
|
||
this.codeint = resendTime;
|
||
clearInterval(sendCode);
|
||
return;
|
||
}
|
||
}, 1000)
|
||
},
|
||
getCode: function() {
|
||
if (this.action !== 'can') {
|
||
return;
|
||
}
|
||
this.action = 'sending';
|
||
sendValidate(this.userInfo.user_name).then((res) => {
|
||
if(res.data.code==200){
|
||
let count=res.data.data;
|
||
let diffCount=this.defCount-count;//剩余获取短信次数
|
||
if(count>1 && count<=5){
|
||
uni.showToast({
|
||
title:`今日验证码已获取${count}次，还有${diffCount}次获取机会`,
|
||
icon:'none',
|
||
duration:3000
|
||
})
|
||
}
|
||
this.action = 'wait'
|
||
this.setTimer()
|
||
}
|
||
this.loading = false
|
||
}).catch(() => {
|
||
this.action='can'
|
||
this.loading = false
|
||
this.$refs.code.refushCode()
|
||
})
|
||
},
|
||
submit(){
|
||
if (this.password !== this.newPassword){
|
||
this.error = true
|
||
return
|
||
}
|
||
this.loading = true
|
||
resetPass(this.userInfo.user_name, this.code, this.password).then(()=>{
|
||
this.loading = false
|
||
uni.showToast({
|
||
title: '重置密码成功',
|
||
icon: false
|
||
})
|
||
setTimeout(() => {
|
||
uni.navigateBack()
|
||
}, 1000)
|
||
}).catch(()=>{
|
||
this.loading = false
|
||
})
|
||
},
|
||
regPassword(){
|
||
if(this.password.length !== 6) {
|
||
uni.showToast({
|
||
title: '请设置长度6位的密码',
|
||
icon: 'none'
|
||
});
|
||
}
|
||
},
|
||
regNewPassword(){
|
||
if(this.newPassword.length !== 6) {
|
||
uni.showToast({
|
||
title: '请设置长度6位的密码',
|
||
icon: 'none'
|
||
});
|
||
} else if (this.password !== this.newPassword) {
|
||
this.error = true
|
||
}
|
||
}
|
||
},
|
||
computed: {
|
||
...mapGetters(['realName', 'userInfo']),
|
||
validate() {
|
||
return this.password.length ===6 && this.newPassword.length === 6 && this.code
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss">
|
||
.error {
|
||
font-family: PingFangSC-Regular;
|
||
font-size: 32rpx;
|
||
color: red;
|
||
}
|
||
.forget{
|
||
padding: 90rpx 80rpx 0 80rpx;
|
||
.phone{
|
||
height: 50rpx;
|
||
font-size: 36rpx;
|
||
font-weight: 400;
|
||
color: #000000;
|
||
line-height: 50rpx;margin-bottom: 90rpx;
|
||
}
|
||
}
|
||
.codeBox{
|
||
position: relative;
|
||
.code{
|
||
z-index: 999;
|
||
position: absolute;
|
||
top: 20px;
|
||
right:14px;
|
||
height: 60rpx;
|
||
line-height: 60rpx;
|
||
font-size: 28rpx;
|
||
font-weight: 400;
|
||
color: #1B66FF;
|
||
line-height: 38rpx;
|
||
|
||
}
|
||
}
|
||
.nocheck {
|
||
opacity: 0.3;
|
||
}
|
||
.bottombtn {
|
||
background-color: #1B66FF;
|
||
color: #fff;
|
||
text-align: center;
|
||
border-radius: 10rpx;
|
||
font-family: PingFangSC-Medium;
|
||
font-size: 32rpx;
|
||
height: 90rpx;
|
||
line-height: 90rpx;
|
||
}
|
||
|
||
.btn {
|
||
background-color: #fefefe;
|
||
padding: 70rpx 80rpx;
|
||
}
|
||
</style>
|