313 lines
7.1 KiB
Vue
313 lines
7.1 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" maxlength="11" placeholder="输入手机号码">
|
||
</view>
|
||
<view class="from-inpus from-password">
|
||
<label>新密码</label>
|
||
<input type="safe-password" :password="eyesShow[0]" v-model="password" placeholder="须包含大小写，最少8位">
|
||
<image class="from-password-eyes" mode="widthFix" :src="require(eyesShow[0] ? '@/static/icons/eyes_hide.png': '@/static/icons/eyes_open.png')" @click="onEyes(0)"></image>
|
||
</view>
|
||
<view class="from-inpus from-password">
|
||
<label>确认密码</label>
|
||
<input type="safe-password" :password="eyesShow[1]" v-model="confirmation" placeholder="须包含大小写，最少8位">
|
||
<image class="from-password-eyes" mode="widthFix" :src="require(eyesShow[1] ? '@/static/icons/eyes_hide.png': '@/static/icons/eyes_open.png')" @click="onEyes(1)"></image>
|
||
</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,
|
||
eyesShow : [ true, true ]
|
||
};
|
||
},
|
||
created() {
|
||
if(this.$Route.query.type == 'userSet'){
|
||
uni.setNavigationBarTitle({
|
||
title: '修改密码'
|
||
})
|
||
this.type = this.$Route.query.type
|
||
}
|
||
},
|
||
methods: {
|
||
// 密码显示隐藏
|
||
onEyes(index){
|
||
this.$set(this.eyesShow, index, !this.eyesShow[index])
|
||
},
|
||
// 提交修改信息
|
||
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-password{
|
||
.from-password-eyes{
|
||
width: 38rpx;
|
||
height: 38rpx;
|
||
}
|
||
input{
|
||
width: calc(100% - 260rpx);
|
||
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>
|