308 lines
7.2 KiB
Vue
308 lines
7.2 KiB
Vue
<template>
|
|
<view class="container">
|
|
<u-navbar class="top" title="忘记密码" @rightClick="leftClick" :autoBack="true" leftIconColor="#fff" :titleStyle="{color:'#FFF',}" bgColor="transparent"></u-navbar>
|
|
<view class="top_box_xx">
|
|
<view class="top_box">
|
|
<view class="top_box_one">
|
|
<text class="top_box_one_text">手机号码</text>
|
|
<input type="text" v-model="form.phone" placeholder="请输入手机号码" data-key="mobile" />
|
|
</view>
|
|
<view class="top_box_one">
|
|
<text class="top_box_one_text">密码</text>
|
|
<input type="mobile" v-model="form.password" placeholder="8-16位密码" maxlength="16" :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="mobile" v-model="form.confirmpassword" placeholder="请再次输入密码" maxlength="16" :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="mobile" v-model="form.checkCode" 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>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
data() {
|
|
return {
|
|
radioChangeItem: false, //单选框
|
|
h: null,
|
|
showPassword: false,
|
|
// 注册定时器 初始值
|
|
second: 60,
|
|
showText: true,
|
|
Recapture: '发送验证码',
|
|
form: {
|
|
phone: '',
|
|
password: '',
|
|
confirmpassword: '',
|
|
checkCode: '',
|
|
source: 'promoter'
|
|
}
|
|
};
|
|
},
|
|
mounted() {},
|
|
onLoad() {},
|
|
methods: {
|
|
leftClick() {
|
|
uni.navigateBack();
|
|
},
|
|
async CodeRegister() {
|
|
//发起验证码
|
|
if (this.form.phone == null || this.form.phone == '') {
|
|
uni.showToast({
|
|
title: '请输入电话号码',
|
|
icon: 'none'
|
|
});
|
|
return false;
|
|
}
|
|
const res = await this.api.verifyPhoneIsExist({// post 手机验证码
|
|
phone: this.form.phone,
|
|
});
|
|
if (res) {
|
|
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.phone == null || this.form.phone == '') {
|
|
uni.showToast({
|
|
title: '请输入电话号码',
|
|
icon: 'none'
|
|
});
|
|
return false;
|
|
}
|
|
if (this.form.password == null || this.form.password == "" || uni.$u.trim(this.form.password,'all') == ''){
|
|
uni.showToast({
|
|
title: "请输入密码或密码不能输入空格",
|
|
icon: "none"
|
|
})
|
|
return false;
|
|
}
|
|
if (this.form.confirmpassword == null || this.form.confirmpassword == '' || uni.$u.trim(this.form.confirmpassword,'all') == '') {
|
|
uni.showToast({
|
|
title: '请输入确认密码或确认密码不能输入空格',
|
|
icon: 'none'
|
|
});
|
|
return false;
|
|
}
|
|
if (this.form.checkCode == null || this.form.checkCode == '') {
|
|
uni.showToast({
|
|
title: '请输入验证码',
|
|
icon: 'none'
|
|
});
|
|
return false;
|
|
}
|
|
if (this.form.confirmpassword != this.form.password) {
|
|
uni.showToast({
|
|
title: '两次密码不一致',
|
|
icon: 'none'
|
|
});
|
|
return false;
|
|
}
|
|
let res = await this.api.forgetPassword({
|
|
phone: this.form.phone,
|
|
password: this.form.password,
|
|
checkCode: this.form.checkCode,
|
|
source: 'promoter'
|
|
});
|
|
if (res) {
|
|
uni.showToast({
|
|
title: '修改成功',
|
|
icon: 'none',
|
|
success: () => {
|
|
uni.navigateTo({
|
|
url: '../login/login'
|
|
});
|
|
}
|
|
});
|
|
}
|
|
}
|
|
}
|
|
};
|
|
</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_xx {
|
|
.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: 200rpx;
|
|
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;
|
|
bottom: 26rpx;
|
|
right: 0;
|
|
width: 25rpx;
|
|
height: 17rpx;
|
|
}
|
|
.repeats {
|
|
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>
|