294 lines
6.4 KiB
Vue
294 lines
6.4 KiB
Vue
<template>
|
|
<view class="registered-content">
|
|
<view class="title">{{type == 'userSet' ? '修改' : '找回'}}账户登录密码</view>
|
|
<view class="submit-title">请填写账号信息</view>
|
|
<view class="from">
|
|
<view class="from-inpus from-input-phoen">
|
|
<label>+86</label>
|
|
<input type="number" v-model="username" placeholder="输入手机号码">
|
|
</view>
|
|
<view class="from-inpus">
|
|
<label>新密码</label>
|
|
<input type="safe-password" password v-model="password" placeholder="设置新的登录密码">
|
|
</view>
|
|
<view class="from-inpus">
|
|
<label>确认密码</label>
|
|
<input type="safe-password" password v-model="confirmation" placeholder="请确认登录密码">
|
|
</view>
|
|
<view class="from-inpus from-input-code">
|
|
<label>验证码</label>
|
|
<input type="number" v-model="code" maxlength="4" placeholder="短信验证码">
|
|
<button :disabled="username.length < 11 || getSms" @click="getCode">{{sendCode}}</button>
|
|
</view>
|
|
</view>
|
|
<view class="button">
|
|
<button @click="onRegistered()">重置</button>
|
|
</view>
|
|
<!-- 显示图形验证码 -->
|
|
<u-popup :show="captchaShow" mode="center" :round="10" closeable @close="captchaShow = false, captcha = ''">
|
|
<view class="captcha-lay">
|
|
<view class="captcha-title">图形验证</view>
|
|
<view class="captcha-img">
|
|
<image :src="captchaImg" mode="widthFix" @click="getCode()"></image>
|
|
</view>
|
|
<view class="captcha-input">
|
|
<input type="text" placeholder="请输入验证码" v-model="captcha" maxlength="10">
|
|
</view>
|
|
<button class="captcha-btn" @click="getPhoneCode">验证</button>
|
|
</view>
|
|
</u-popup>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
var outTime;
|
|
import { resetPassword, captcha, verifyCaptcha } from '@/apis/interfaces/auth.js'
|
|
export default {
|
|
data() {
|
|
return {
|
|
type : '',
|
|
username : '',
|
|
password : '',
|
|
confirmation: '',
|
|
code : '',
|
|
getSms : false,
|
|
sendCode : '获取验证码',
|
|
captcha : '',
|
|
captchaImg : '',
|
|
captchaKey : '',
|
|
captchaShow : false
|
|
};
|
|
},
|
|
created() {
|
|
if(this.$Route.query.type == 'userSet'){
|
|
uni.setNavigationBarTitle({
|
|
title: '修改密码'
|
|
})
|
|
this.type = this.$Route.query.type
|
|
}
|
|
},
|
|
methods: {
|
|
// 提交修改信息
|
|
onRegistered(){
|
|
uni.showLoading({
|
|
title: '提交中...',
|
|
mask : true
|
|
})
|
|
resetPassword({
|
|
username : this.username,
|
|
password : this.password,
|
|
password_confirmation : this.confirmation,
|
|
code : this.code,
|
|
}).then(res => {
|
|
// 重置验证码与计时器
|
|
this.getSms = false;
|
|
this.sendCode = '获取验证码';
|
|
clearInterval(outTime);
|
|
uni.showModal({
|
|
title : "提示",
|
|
content : "登录密码已变更",
|
|
showCancel : false,
|
|
confirmColor: "#446EFE",
|
|
success : modalRes => {
|
|
this.$Router.back()
|
|
}
|
|
})
|
|
}).catch(err => {
|
|
uni.showToast({
|
|
title: err.message,
|
|
icon : 'none'
|
|
})
|
|
})
|
|
},
|
|
// 弹出图形验证码
|
|
getCode(){
|
|
uni.showLoading({
|
|
title: '加载中...',
|
|
mask : true
|
|
})
|
|
captcha().then(res => {
|
|
let { img, key } = res
|
|
this.captchaImg = img
|
|
this.captchaKey = key
|
|
this.captchaShow = true
|
|
}).catch(err => {
|
|
uni.showToast({
|
|
title: err.message,
|
|
icon : 'none'
|
|
})
|
|
})
|
|
},
|
|
// 获取验证码
|
|
getPhoneCode() {
|
|
uni.showLoading({
|
|
title : '加载中...',
|
|
mask :true
|
|
})
|
|
let smsTime = 60;
|
|
verifyCaptcha({
|
|
mobileNo : this.username,
|
|
captcha : this.captcha,
|
|
captcha_key : this.captchaKey
|
|
}).then(res => {
|
|
uni.showToast({
|
|
title: res.message,
|
|
icon: "none",
|
|
});
|
|
this.captchaShow = false;
|
|
this.captcha = '';
|
|
this.getSms = true;
|
|
this.sendCode = smsTime + 's后重新获取';
|
|
outTime = setInterval(() => {
|
|
if (smsTime <= 1) {
|
|
this.getSms = false;
|
|
this.sendCode = '重新获取';
|
|
clearInterval(outTime);
|
|
return
|
|
}
|
|
this.sendCode = smsTime + 's后重新获取';
|
|
smsTime -= 1;
|
|
}, 1000);
|
|
}).catch((err) => {
|
|
uni.showToast({
|
|
title: err.message,
|
|
icon: "none",
|
|
});
|
|
});
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
// 图形验证码
|
|
.captcha-lay{
|
|
padding: 30rpx;
|
|
width: 70vw;
|
|
box-sizing: border-box;
|
|
.captcha-title{
|
|
text-align: center;
|
|
font-size: 35rpx;
|
|
font-weight: bold;
|
|
line-height: 90rpx;
|
|
}
|
|
.captcha-img{
|
|
text-align: center;
|
|
padding-bottom: 30rpx;
|
|
image{
|
|
width: 300rpx;
|
|
}
|
|
}
|
|
.captcha-input{
|
|
input{
|
|
height: 100rpx;
|
|
border:solid 1rpx #ddd;
|
|
text-align: center;
|
|
line-height: 98rpx;
|
|
font-size: 34rpx;
|
|
padding: 0 30rpx;
|
|
box-sizing: border-box;
|
|
border-radius: $radius-lg;
|
|
background: transparent;
|
|
}
|
|
}
|
|
.captcha-btn{
|
|
margin-top: 30rpx;
|
|
background: $main-color;
|
|
color: white;
|
|
font-weight: normal;
|
|
font-size: 34rpx;
|
|
border-radius: $radius-lg;
|
|
height: 90rpx;
|
|
line-height: 90rpx;
|
|
&::after{
|
|
border: none;
|
|
}
|
|
}
|
|
}
|
|
// 注册
|
|
.registered-content{
|
|
padding: 50rpx;
|
|
.title{
|
|
padding-top: 3vh;
|
|
padding-bottom: 10rpx;
|
|
font-weight: bold;
|
|
font-size: 44rpx;
|
|
}
|
|
.submit-title{
|
|
font-size: 30rpx;
|
|
color: gray;
|
|
line-height: 40rpx;
|
|
}
|
|
// 注册单
|
|
.from{
|
|
margin-top: 80rpx;
|
|
}
|
|
.from-inpus{
|
|
@extend .border-solid;
|
|
display: flex;
|
|
align-items: center;
|
|
margin-bottom: 20rpx;
|
|
justify-content: space-between;
|
|
label{
|
|
width: 170rpx;
|
|
line-height: 100rpx;
|
|
font-size: 32rpx;
|
|
}
|
|
input{
|
|
width: calc(100% - 200rpx);
|
|
height: 100rpx;
|
|
line-height: 100rpx;
|
|
font-size: 32rpx;
|
|
}
|
|
}
|
|
.from-input-phoen{
|
|
label{
|
|
line-height: 60rpx;
|
|
height: 60rpx;
|
|
border-right: solid 1rpx $border-color;
|
|
}
|
|
}
|
|
.from-input-code{
|
|
button{
|
|
font-size: 32rpx;
|
|
width: 230rpx;
|
|
padding: 0;
|
|
height: 80rpx;
|
|
line-height: 80rpx;
|
|
border-radius: 0;
|
|
margin: 0;
|
|
border: none;
|
|
background: transparent;
|
|
color: $main-color;
|
|
&::after{
|
|
display: none;
|
|
}
|
|
&[disabled]{
|
|
opacity: .5;
|
|
}
|
|
}
|
|
input{
|
|
width: calc(100% - 460rpx);
|
|
}
|
|
}
|
|
// 按钮
|
|
.button{
|
|
padding-top: 50rpx;
|
|
button{
|
|
background: $main-color;
|
|
border-radius: $radius-lg;
|
|
height: 100rpx;
|
|
line-height: 100rpx;
|
|
color: white;
|
|
font-size: 38rpx;
|
|
&::after{
|
|
display: none;
|
|
}
|
|
&[disabled]{
|
|
opacity: .5;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</style>
|