363 lines
8.0 KiB
Vue
363 lines
8.0 KiB
Vue
<template>
|
|
<view class="container">
|
|
<navseat :opacity='false' title="忘记密码" :titleshow='true' :namecolor='"#fff"' iconcolor='#fff'></navseat>
|
|
<view class="top_box">
|
|
<view class="top_box_one">
|
|
<text class="top_box_one_text">手机号码</text>
|
|
<input type="number" v-model="form.account" placeholder="请输入手机号码" />
|
|
</view>
|
|
<view class="top_box_one">
|
|
<text class="top_box_one_text">密码</text>
|
|
<input type="text" v-model="form.password" placeholder="请输入密码" :password="!showPassword" />
|
|
<view class="repeat" @click="display">
|
|
<u-icon name="eye" v-if="showPassword"></u-icon>
|
|
<u-icon v-else name="eye-off"></u-icon>
|
|
</view>
|
|
</view>
|
|
<view class="top_box_one">
|
|
<text class="top_box_one_text">确认密码</text>
|
|
<input type="text" v-model="form.payPassword" placeholder="请再次输入密码" :password="!showPassword" />
|
|
<view class="repeat" @click="display">
|
|
<u-icon name="eye" v-if="showPassword"></u-icon>
|
|
<u-icon v-else name="eye-off"></u-icon>
|
|
</view>
|
|
</view>
|
|
<view class="top_box_one">
|
|
<text class="top_box_one_text">验证码</text>
|
|
<input type="number" v-model="form.captcha" placeholder="请输入短信验证码" maxlength="6" />
|
|
<view class="repeats">
|
|
<view v-if="showText == true"
|
|
style="padding: 8rpx 16rpx 6rpx 16rpx;background: #288EFB; border-radius: 15rpx;"
|
|
@click="CodeRegister">{{ Recapture }}</view>
|
|
<view v-else
|
|
style="color: #ccc; background-color: #f9f9f9; padding: 8rpx 16rpx 6rpx 16rpx; border-radius: 15rpx;">
|
|
{{ second }}s重新发送
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="forgetPassword" @click="forgetPassword">重置密码</view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import navseat from '@/components/navseat.vue'
|
|
export default {
|
|
components: {
|
|
navseat
|
|
},
|
|
data() {
|
|
return {
|
|
radioChangeItem: false, //单选框
|
|
h: null,
|
|
showPassword: false,
|
|
// 注册定时器 初始值
|
|
second: 60,
|
|
showText: true,
|
|
Recapture: '发送验证码',
|
|
form: {
|
|
account: '',
|
|
password: '',
|
|
payPassword: '',
|
|
captcha: '',
|
|
source: 'promoter'
|
|
}
|
|
};
|
|
},
|
|
mounted() {},
|
|
onLoad() {},
|
|
methods: {
|
|
async CodeRegister() {
|
|
if (this.form.password == null || this.form.password == '') {
|
|
uni.showToast({
|
|
title: '请输入密码',
|
|
icon: 'none'
|
|
});
|
|
return false;
|
|
}
|
|
if (this.form.payPassword == null || this.form.payPassword == '') {
|
|
uni.showToast({
|
|
title: '请输入确认密码',
|
|
icon: 'none'
|
|
});
|
|
return false;
|
|
}
|
|
if (!uni.$u.test.rangeLength(this.form.password, [6, 24])) {
|
|
uni.showToast({
|
|
title: "请输入密码长度为6-24",
|
|
icon: "none"
|
|
})
|
|
return false;
|
|
}
|
|
if (this.form.payPassword != this.form.password) {
|
|
uni.showToast({
|
|
title: '密码和确认密码不一致',
|
|
icon: 'none'
|
|
});
|
|
return false;
|
|
}
|
|
//发起验证码
|
|
const res = await this.api.smssend({
|
|
mobile: this.form.account,
|
|
event: 'forgetpwd'
|
|
});
|
|
if (res.code == 1) {
|
|
uni.showToast({
|
|
title: '验证码获取成功',
|
|
icon: 'none'
|
|
});
|
|
// 定时器
|
|
this.showText = false;
|
|
this.Recapture = '重新获取';
|
|
var interval = setInterval(() => {
|
|
let times = --this.second;
|
|
this.second = times < 10 ? '0' + times : times; //小于10秒补 0
|
|
}, 1000);
|
|
setTimeout(() => {
|
|
clearInterval(interval);
|
|
this.second = 60;
|
|
this.showText = true;
|
|
}, 60000);
|
|
}
|
|
},
|
|
radioChange(n) {
|
|
//是否同意
|
|
console.log(n);
|
|
this.radioChangeItem = n;
|
|
},
|
|
display() {
|
|
// 切换图片显示隐藏
|
|
this.showPassword = !this.showPassword;
|
|
},
|
|
Privacy(e) {
|
|
if (e == 1) {
|
|
//用户协议
|
|
uni.navigateTo({
|
|
url: '../login/Privacy'
|
|
});
|
|
} else {
|
|
uni.navigateTo({
|
|
//隐私政策
|
|
url: '../login/Privacy'
|
|
});
|
|
}
|
|
},
|
|
|
|
async forgetPassword() {
|
|
if (this.form.account.length != 11) {
|
|
uni.showToast({
|
|
title: '手机号必须是11位',
|
|
icon: 'none'
|
|
});
|
|
return false;
|
|
}
|
|
if (this.form.password == null || this.form.password == '') {
|
|
uni.showToast({
|
|
title: '请输入密码',
|
|
icon: 'none'
|
|
});
|
|
return false;
|
|
}
|
|
if (this.form.payPassword == null || this.form.payPassword == '') {
|
|
uni.showToast({
|
|
title: '请输入确认密码',
|
|
icon: 'none'
|
|
});
|
|
return false;
|
|
}
|
|
if (!uni.$u.test.rangeLength(this.form.password, [6, 24])) {
|
|
uni.showToast({
|
|
title: "请输入密码长度为6-24",
|
|
icon: "none"
|
|
})
|
|
return false;
|
|
}
|
|
if (this.form.payPassword != this.form.password) {
|
|
uni.showToast({
|
|
title: '密码和确认密码不一致',
|
|
icon: 'none'
|
|
});
|
|
return false;
|
|
}
|
|
if (!uni.$u.test.rangeLength(this.form.password, [6, 24])) {
|
|
uni.showToast({
|
|
title: "请输入密码长度为6-24",
|
|
icon: "none"
|
|
})
|
|
return false;
|
|
}
|
|
if (this.form.captcha == null || this.form.captcha == '') {
|
|
uni.showToast({
|
|
title: '请输入验证码',
|
|
icon: 'none'
|
|
});
|
|
return false;
|
|
}
|
|
let res = await this.api.userforgetpwd({
|
|
account: this.form.account,
|
|
password: this.form.password,
|
|
captcha: this.form.captcha
|
|
});
|
|
if (res.code == 1) {
|
|
uni.showToast({
|
|
title: '修改成功',
|
|
icon: 'none',
|
|
success: () => {
|
|
setTimeout(() => {
|
|
uni.navigateBack()
|
|
}, 1500);
|
|
}
|
|
});
|
|
}
|
|
|
|
}
|
|
}
|
|
};
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
page {
|
|
width: 100%;
|
|
height: 100%;
|
|
background: linear-gradient(104deg, #4679ff 0%, #2868e8 47%, #2a94fc 100%);
|
|
}
|
|
|
|
.container {
|
|
padding: 0 34rpx;
|
|
position: relative;
|
|
|
|
.top {
|
|
position: absolute;
|
|
left: 64rpx;
|
|
|
|
.u-navbar--fixed {
|
|
top: 88rpx;
|
|
}
|
|
}
|
|
|
|
.box {
|
|
padding-left: 64rpx;
|
|
padding-bottom: 144rpx;
|
|
box-sizing: border-box;
|
|
|
|
text {
|
|
font-size: 40rpx;
|
|
font-family: Source Han Sans CN-Medium, Source Han Sans CN;
|
|
font-weight: 500;
|
|
color: #ffffff;
|
|
}
|
|
}
|
|
|
|
.top_box::after {
|
|
content: '';
|
|
position: absolute;
|
|
display: inline-block;
|
|
width: 100%;
|
|
height: 50rpx;
|
|
z-index: 1;
|
|
bottom: -20rpx;
|
|
background: #9ec9fb;
|
|
border-radius: 0 0 40rpx 40rpx;
|
|
}
|
|
|
|
.top_box::before {
|
|
content: '';
|
|
position: absolute;
|
|
display: inline-block;
|
|
width: 100%;
|
|
height: 50rpx;
|
|
bottom: 0rpx;
|
|
z-index: 2;
|
|
background: #fff;
|
|
border-radius: 0 0 40rpx 40rpx;
|
|
}
|
|
|
|
.top_box {
|
|
position: relative;
|
|
z-index: 99;
|
|
top: 120rpx;
|
|
box-sizing: border-box;
|
|
padding: 0 64rpx;
|
|
width: 100%;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
background: #ffffff;
|
|
border-radius: 40rpx;
|
|
padding-bottom: 108rpx;
|
|
|
|
.top_box_one {
|
|
position: relative;
|
|
width: 100%;
|
|
margin-top: 64rpx;
|
|
border-bottom: 6rpx solid #e5e5e5;
|
|
|
|
.top_box_one_text {
|
|
font-size: 36rpx;
|
|
font-family: Source Han Sans CN-Medium, Source Han Sans CN;
|
|
font-weight: 500;
|
|
color: #333333;
|
|
}
|
|
|
|
input {
|
|
padding: 18rpx 0 20rpx 0;
|
|
}
|
|
|
|
.repeat {
|
|
position: absolute;
|
|
z-index: 99;
|
|
bottom: 26rpx;
|
|
right: 0;
|
|
width: 25rpx;
|
|
height: 17rpx;
|
|
}
|
|
|
|
.repeats {
|
|
z-index: 99;
|
|
position: absolute;
|
|
bottom: 26rpx;
|
|
right: 0;
|
|
font-size: 24rpx;
|
|
font-weight: 400;
|
|
color: #ffffff;
|
|
border-radius: 12rpx;
|
|
}
|
|
}
|
|
|
|
.top_box_tow {
|
|
width: 100%;
|
|
|
|
text {
|
|
margin-top: 34rpx;
|
|
font-size: 24rpx;
|
|
font-weight: 400;
|
|
color: #666666;
|
|
}
|
|
}
|
|
|
|
.forgetPassword {
|
|
width: 75%;
|
|
margin-top: 120rpx;
|
|
padding: 10rpx 0;
|
|
text-align: center;
|
|
background: #288efb;
|
|
border-radius: 40rpx 40rpx 40rpx 40rpx;
|
|
font-size: 36rpx;
|
|
font-weight: 400;
|
|
color: #ffffff;
|
|
}
|
|
|
|
.agreement {
|
|
margin-top: 14rpx;
|
|
font-size: 20rpx;
|
|
font-family: Source Han Sans CN-Medium, Source Han Sans CN;
|
|
font-weight: 500;
|
|
color: #7c8e97;
|
|
|
|
.agreement-Item {
|
|
color: #4ca1fc;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</style> |