426 lines
11 KiB
Vue
426 lines
11 KiB
Vue
<template>
|
||
<view class="flex-col page">
|
||
<!-- <image src="/static/common/img/16530269846087107196.png" class="image"/> -->
|
||
<u-navbar title="重置密码"></u-navbar>
|
||
<view class="flex-col group" v-if="state === 1">
|
||
<text class="text">重置密码</text>
|
||
<view class="flex-col group_7">
|
||
<view class="flex-col">
|
||
<!-- <text class="text_1">手机号</text> -->
|
||
<view class="text-wrapper flex-row view">
|
||
<u-input
|
||
v-model="phone"
|
||
:disabled="disabled"
|
||
placeholder="请输入手机号"
|
||
type="text"
|
||
/>
|
||
</view>
|
||
</view>
|
||
<view class="flex-col group_6">
|
||
<!-- <text class="text_1">短信验证码</text> -->
|
||
<view class="text-wrapper flex-row view" style="padding: 0">
|
||
<u-input
|
||
v-model="code"
|
||
placeholder="请输入短信验证码"
|
||
type="text"
|
||
/>
|
||
<u-button
|
||
:disabled="!(send == '发送验证码')"
|
||
class="custom-style"
|
||
style="background: transparent"
|
||
@click="sendCode"
|
||
>{{ send }}
|
||
</u-button>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<!-- <navigator class="text_6" url="/pages/login/login/login">登录</navigator> -->
|
||
<u-button
|
||
class="flex-col items-center text-wrapper_1"
|
||
shape="circle"
|
||
type="primary"
|
||
@click="login"
|
||
>
|
||
<text class="text_7">重置密码</text>
|
||
</u-button>
|
||
</view>
|
||
<view class="flex-col group" v-if="state === 2">
|
||
<text class="text">遇见身边的校友</text>
|
||
<view class="flex-col group_7">
|
||
<view class="flex-col">
|
||
<u-input
|
||
v-model="passWord"
|
||
class="view text-wrapper"
|
||
placeholder="请输入新密码"
|
||
type="password"
|
||
/>
|
||
</view>
|
||
<view class="flex-col group_6">
|
||
<u-input
|
||
v-model="passWordTwo"
|
||
class="view text-wrapper"
|
||
placeholder="请确认新密码"
|
||
type="password"
|
||
/>
|
||
</view>
|
||
</view>
|
||
<view class="tips">
|
||
<image src="/static/common/img/infoCircle.png"></image>
|
||
提示：密码长度应该大于5，必须包含字母、数字、特殊字符，且不能包含中文!
|
||
</view>
|
||
<u-button
|
||
class="flex-col items-center text-wrapper_1"
|
||
shape="circle"
|
||
throttle-time="1000"
|
||
type="primary"
|
||
@click="login"
|
||
>
|
||
<text class="text_7">立即重置</text>
|
||
</u-button>
|
||
<u-button
|
||
class="flex-col items-center text-wrapper_1"
|
||
shape="circle"
|
||
style=" margin-top: 10px"
|
||
type="primary"
|
||
@click="state = 1"
|
||
>
|
||
<text class="text_7">返回</text>
|
||
</u-button>
|
||
</view>
|
||
<u-top-tips ref="uTips" :navbar-height="0"></u-top-tips>
|
||
<u-toast ref="uToast"/>
|
||
</view>
|
||
</template>
|
||
<script>
|
||
import md5 from "js-md5";
|
||
import {aesEncrypt} from "@/utils/encrypt.js";
|
||
|
||
export default {
|
||
data() {
|
||
return {
|
||
show: false,
|
||
phone: "",
|
||
passWord: "",
|
||
code: "",
|
||
passWordTwo: "",
|
||
agreement: false,
|
||
disabled: false,
|
||
send: "发送验证码",
|
||
state: 1,
|
||
};
|
||
},
|
||
onLoad(e) {
|
||
},
|
||
methods: {
|
||
// 提示
|
||
tips(title, type, time) {
|
||
this.$refs.uToast.show({
|
||
title: title ? title : "",
|
||
type: type ? type : "success",
|
||
duration: time ? time + "" : "1500",
|
||
});
|
||
},
|
||
// 发送验证码
|
||
sendCode() {
|
||
var reg = new RegExp("^[1][3,4,5,6,7,8,9][0-9]{9}$", "g"); //手机号
|
||
if (this.phone === "" || !reg.test(this.phone)) {
|
||
// this.$tips("请输入正确的手机号码", "error");
|
||
this.$refs.uToast.show({
|
||
title: '请输入正确的手机号码',
|
||
type: 'error',
|
||
})
|
||
return;
|
||
}
|
||
|
||
const timestamp = Date.now();
|
||
const base64Key = btoa('xiaoyout!#@12345');
|
||
const signStr = this.phone + timestamp + base64Key;
|
||
const sign = md5(signStr);
|
||
|
||
this.$u.apiList
|
||
.GetAppValidateCode({
|
||
phone: this.phone,
|
||
t: timestamp.toString(),
|
||
sign: sign,
|
||
type: 2,
|
||
})
|
||
.then((res) => {
|
||
//中间数字加密
|
||
// let result =this.userName.replace(this.userName.substring(3,7),"****")
|
||
// this.userName = result
|
||
this.disabled = true;
|
||
// this.$tips("发送成功");
|
||
this.$refs.uToast.show({
|
||
title: '发送成功',
|
||
type: 'success',
|
||
})
|
||
var second = 60;
|
||
this.send = second + "秒后重试";
|
||
var time = setInterval(() => {
|
||
this.send = second + "秒后重试";
|
||
second--;
|
||
if (second <= 0) {
|
||
this.disabled = false;
|
||
this.send = "发送验证码";
|
||
clearInterval(time);
|
||
}
|
||
}, 1000);
|
||
})
|
||
.catch((err) => {
|
||
// this.$tips(err.error, "error");
|
||
this.$refs.uToast.show({
|
||
title: err.error,
|
||
type: 'error',
|
||
})
|
||
});
|
||
},
|
||
login() {
|
||
if (this.state == 1) {
|
||
if (this.phone === "") {
|
||
return this.tips("请输入手机号", "error");
|
||
}
|
||
if (this.code === "") {
|
||
return this.tips("请输入验证码", "error");
|
||
}
|
||
this.$u.apiList.ForgotPasswordValidate({
|
||
phone: this.phone,
|
||
code: this.code,
|
||
}).then((res) => {
|
||
console.info("🚀 ~ file:ForgetPassword method: line:189 -----", res)
|
||
this.state = 2;
|
||
}).catch((err) => {
|
||
this.tips(err.error, "error");
|
||
});
|
||
|
||
return
|
||
}
|
||
if (this.state == 2) {
|
||
if (this.passWord === "") {
|
||
return this.tips("请输入新密码", "error");
|
||
}
|
||
let reg = /^(?=.*[a-zA-Z])(?=.*\d)(?=.*[\W_]).{5,}$/;
|
||
if (!reg.test(this.passWord)) {
|
||
/* return this.$tips(
|
||
"密码必须包含字母、数字、特殊字符，且不能包含中文!",
|
||
"error"
|
||
); */
|
||
return this.$refs.uToast.show({
|
||
title: "密码必须包含字母、数字、特殊字符，且不能包含中文!",
|
||
type: 'error',
|
||
})
|
||
}
|
||
if (this.passWordTwo === "") {
|
||
return this.tips("请确认新密码", "error");
|
||
}
|
||
if (this.passWord != this.passWordTwo) {
|
||
return this.tips("请检查两次密码是否一致", "error");
|
||
}
|
||
}
|
||
const req = {
|
||
phone: this.phone,
|
||
code: this.code,
|
||
newPassWord: aesEncrypt(this.passWord),
|
||
};
|
||
console.log(req, "res-");
|
||
// return
|
||
this.$u.apiList
|
||
.ForgotPassword(req)
|
||
.then((res) => {
|
||
console.log(res, "res---");
|
||
uni.showToast({
|
||
title: "重置成功",
|
||
duration: 2000,
|
||
});
|
||
setTimeout(() => {
|
||
uni.navigateTo({
|
||
url: "/",
|
||
});
|
||
}, 2000);
|
||
})
|
||
.catch((err) => {
|
||
console.log(err, "err---");
|
||
// this.$tips(err.error, "error");
|
||
this.$refs.uToast.show({
|
||
title: err.error,
|
||
type: 'error',
|
||
})
|
||
});
|
||
},
|
||
},
|
||
};
|
||
</script>
|
||
|
||
<style scoped lang="scss">
|
||
.custom-style {
|
||
color: #3cb5fb !important;
|
||
padding: 0 !important;
|
||
height: 70rpx !important;
|
||
line-height: 60rpx !important;
|
||
}
|
||
|
||
.custom-style::after {
|
||
border: none;
|
||
}
|
||
|
||
.page {
|
||
padding-bottom: 0.015rem;
|
||
background-color: rgb(255, 255, 255);
|
||
overflow-y: auto;
|
||
width: 100%;
|
||
overflow-x: hidden;
|
||
height: 100%;
|
||
|
||
.image {
|
||
flex-shrink: 0;
|
||
align-self: flex-start;
|
||
width: 102%;
|
||
}
|
||
|
||
.group {
|
||
padding: 1.0rem 0.29rem;
|
||
|
||
.text {
|
||
align-self: left;
|
||
// color: rgb(46, 155, 255);
|
||
color: #000;
|
||
font-size: 0.22rem;
|
||
font-family: PingFang;
|
||
line-height: 0.17rem;
|
||
font-weight: 600;
|
||
}
|
||
|
||
.group_7 {
|
||
margin-top: 0.29rem;
|
||
|
||
.text-wrapper {
|
||
border: solid 2rpx #dcdfe6;
|
||
border-radius: 100rpx;
|
||
background: #f6f8fa;
|
||
}
|
||
|
||
.group_6 {
|
||
margin-top: 0.2rem;
|
||
}
|
||
|
||
.text_1 {
|
||
margin-left: 0.01rem;
|
||
align-self: flex-start;
|
||
color: rgb(51, 51, 51);
|
||
font-size: 0.15rem;
|
||
font-family: PingFang;
|
||
line-height: 0.14rem;
|
||
}
|
||
|
||
.view {
|
||
display: flex;
|
||
align-items: center;
|
||
margin-top: 20rpx;
|
||
padding: 20rpx 50rpx !important;
|
||
}
|
||
}
|
||
|
||
.text_6 {
|
||
width: 100%;
|
||
text-align: right;
|
||
margin-left: 0.01rem;
|
||
margin-top: 0.2rem;
|
||
align-self: flex-start;
|
||
color: #1F2232;
|
||
font-size: 0.13rem;
|
||
font-family: PingFang;
|
||
line-height: 0.13rem;
|
||
}
|
||
|
||
.text-wrapper_1 {
|
||
margin: 50rpx 0rpx 40rpx;
|
||
padding: 50rpx 0 50rpx;
|
||
// background-image: linear-gradient(90deg, rgb(135, 230, 254) 0%, rgb(91, 192, 254) 52%, rgb(46, 155, 255) 100%);
|
||
background: #3cb4fb;
|
||
box-shadow: 0px 6rpx 9rpx rgba(38, 122, 199, 0.34);
|
||
border-radius: 100rpx;
|
||
|
||
.text_7 {
|
||
color: rgb(255, 255, 255);
|
||
font-size: 32rpx;
|
||
font-family: PingFang;
|
||
line-height: 32rpx;
|
||
}
|
||
}
|
||
|
||
.group_1 {
|
||
margin-top: 0.12rem;
|
||
|
||
.text_8 {
|
||
color: rgb(102, 102, 102);
|
||
font-size: 24rpx;
|
||
font-family: PingFang;
|
||
line-height: 0.13rem;
|
||
}
|
||
|
||
.text_9 {
|
||
margin-left: 0.035rem;
|
||
color: rgb(25, 140, 255);
|
||
font-size: 0.14rem;
|
||
font-family: PingFang;
|
||
line-height: 0.13rem;
|
||
}
|
||
}
|
||
|
||
.group_2 {
|
||
margin-top: 0.36rem;
|
||
justify-content: center;
|
||
|
||
.section_1 {
|
||
flex-shrink: 0;
|
||
width: 0.17rem;
|
||
}
|
||
|
||
.group_3 {
|
||
margin-left: 0.11rem;
|
||
height: 0.18rem;
|
||
line-height: 0.18rem;
|
||
font-size: 0;
|
||
|
||
.text_10 {
|
||
color: rgb(153, 153, 153);
|
||
font-size: 0.11rem;
|
||
font-family: PingFang;
|
||
}
|
||
|
||
.text_11 {
|
||
color: rgb(25, 140, 255);
|
||
font-size: 0.11rem;
|
||
font-family: PingFang;
|
||
}
|
||
|
||
.text_12 {
|
||
color: rgb(102, 102, 102);
|
||
font-size: 0.11rem;
|
||
font-family: PingFang;
|
||
}
|
||
|
||
.text_13 {
|
||
color: rgb(25, 140, 255);
|
||
font-size: 0.11rem;
|
||
font-family: PingFang;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.tips {
|
||
font-size: 24rpx;
|
||
color: #EF3920;
|
||
display: flex;
|
||
margin-top: 20rpx;
|
||
|
||
image {
|
||
width: 32rpx;
|
||
height: 32rpx;
|
||
margin-right: 10rpx;
|
||
margin-top: 5rpx;
|
||
}
|
||
}
|
||
</style>
|