237 lines
6.1 KiB
Vue
237 lines
6.1 KiB
Vue
<template>
|
||
<view id="forget-password">
|
||
<nav-bar :is-back="true" :background="'#fff'" :color="'#222'" :borderBottom="false" title="忘记密码" style="color: #222;"></nav-bar>
|
||
<view class="list-box">
|
||
<u-form :model="form" ref="uForm" label-position="top">
|
||
<u-form-item :rightIconStyle="{color: '#888', fontSize: '32rpx'}" label="手机号" prop="phone" label-width="150">
|
||
<u-input placeholder="请输入手机号" v-model="form.phone" type="number"></u-input>
|
||
</u-form-item>
|
||
<u-form-item label="验证码" prop="code" label-width="150">
|
||
<u-input placeholder="请输入手机验证码" v-model="form.code" type="text"></u-input>
|
||
<u-button class="codeBtn" slot="right" @click="getCode">{{codeTips}}</u-button>
|
||
</u-form-item>
|
||
<u-form-item label="新密码" prop="password">
|
||
<u-input :password-icon="false" type="password" v-model="form.password" placeholder="请输入新密码"></u-input>
|
||
</u-form-item>
|
||
<u-form-item label="确认密码" label-width="150" prop="rePassword">
|
||
<u-input :password-icon="false" type="password" v-model="form.rePassword" placeholder="请再次输入密码"></u-input>
|
||
</u-form-item>
|
||
</u-form>
|
||
</view>
|
||
<view class="btn">
|
||
<button type="default" @click="submit">确认提交</button>
|
||
</view>
|
||
<u-verification-code seconds="30" ref="uCode" @change="codeChange"></u-verification-code>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import NavBar from '@/common/components/navbar/NavBar.vue'
|
||
export default {
|
||
data() {
|
||
return {
|
||
codeTips: '',
|
||
form: {
|
||
phone: '',
|
||
code: '',
|
||
password: '',
|
||
rePassword: '',
|
||
},
|
||
rules: {
|
||
phone: [
|
||
{
|
||
required: true,
|
||
message: '请输入手机号',
|
||
trigger: ['change','blur'],
|
||
},
|
||
{
|
||
validator: (rule, value, callback) => {
|
||
// 调用uView自带的js验证规则，详见：https://www.uviewui.com/js/test.html
|
||
return this.$u.test.mobile(value);
|
||
},
|
||
message: '手机号码不正确',
|
||
// 触发器可以同时用blur和change，二者之间用英文逗号隔开
|
||
trigger: ['change','blur'],
|
||
}
|
||
],
|
||
code: [
|
||
{
|
||
required: true,
|
||
message: '请输入验证码',
|
||
trigger: ['change','blur'],
|
||
},
|
||
{
|
||
type: 'number',
|
||
message: '验证码只能为数字',
|
||
trigger: ['change','blur'],
|
||
}
|
||
],
|
||
password: [
|
||
{
|
||
required: true,
|
||
message: '请输入密码',
|
||
trigger: ['change','blur'],
|
||
},
|
||
// {
|
||
// // 正则不能含有两边的引号
|
||
// pattern: /^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]+\S{5,12}$/,
|
||
// message: '需同时含有字母和数字，长度在6-12之间',
|
||
// trigger: ['change','blur'],
|
||
// }
|
||
],
|
||
rePassword: [
|
||
{
|
||
required: true,
|
||
message: '请重新输入密码',
|
||
trigger: ['change','blur'],
|
||
},
|
||
{
|
||
validator: (rule, value, callback) => {
|
||
return value === this.form.password;
|
||
},
|
||
message: '两次输入的密码不相等',
|
||
trigger: ['change','blur'],
|
||
}
|
||
],
|
||
}
|
||
}
|
||
},
|
||
components: {
|
||
NavBar
|
||
},
|
||
// 必须要在onReady生命周期，因为onLoad生命周期组件可能尚未创建完毕
|
||
onReady() {
|
||
this.$refs.uForm.setRules(this.rules);
|
||
},
|
||
onLoad() {
|
||
|
||
},
|
||
onShow() {
|
||
|
||
},
|
||
methods: {
|
||
codeChange(text) {
|
||
this.codeTips = text;
|
||
},
|
||
// 获取验证码
|
||
getCode(){
|
||
if(this.$u.test.mobile(this.form.phone)){
|
||
if(this.$refs.uCode.canGetCode) {
|
||
// 模拟向后端请求验证码
|
||
uni.showLoading({
|
||
title: '正在获取验证码',
|
||
mask: true
|
||
})
|
||
let opt = {
|
||
url: '192.168.18.139'+'/prod-api/system/sms/send-message?phoneNumber=' + this.form.phone+'&sendMessageType='+'CHANGE_PWD_CODE'+'&expirationTime='+'300',
|
||
method: "POST",
|
||
}
|
||
this.$request.basicRequest(opt,{}).then(res => {
|
||
// console.log("获取验证码",res);
|
||
|
||
if(res.code==200){
|
||
uni.hideLoading();
|
||
// 这里此提示会被this.start()方法中的提示覆盖
|
||
this.$u.toast('验证码已发送');
|
||
// 通知验证码组件内部开始倒计时
|
||
this.$refs.uCode.start();
|
||
}else{
|
||
this.$u.toast(res.msg);
|
||
}
|
||
}, error => {
|
||
this.$u.toast('服务器开小差了呢，请您稍后再试')
|
||
})
|
||
} else {
|
||
this.$u.toast('倒计时结束后再发送');
|
||
}
|
||
} else {
|
||
this.$u.toast('手机号码不正确');
|
||
}
|
||
|
||
},
|
||
submit() {
|
||
this.$refs.uForm.validate(valid => {
|
||
if (valid) {
|
||
// console.log('验证通过');
|
||
let opt = {
|
||
url: '192.168.18.139'+ '/prod-api/system/user/profile/reset-password',
|
||
method: "PUT",
|
||
}
|
||
let params = {
|
||
phoneNumber: this.form.phone,
|
||
captcha: this.form.code,
|
||
newPassword: this.form.password,
|
||
}
|
||
this.$request.basicRequest(opt,params).then(res => {
|
||
// console.log("提交成功",res);
|
||
if(res.code==200){
|
||
this.$u.toast(res.msg);
|
||
}else{
|
||
this.$u.toast(res.msg);
|
||
}
|
||
}, error => {
|
||
this.$u.toast('服务器开小差了呢，请您稍后再试')
|
||
})
|
||
} else {
|
||
console.log('验证失败');
|
||
}
|
||
});
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style scoped lang="less">
|
||
#forget-password{
|
||
}
|
||
.list-box{
|
||
padding: 0 60rpx;
|
||
/deep/.u-form-item{
|
||
font-size: 32rpx;
|
||
font-family: Source Han Sans CN;
|
||
.u-form-item--left__content__label{
|
||
color: #010101;
|
||
}
|
||
.uni-input-wrapper{
|
||
font-size: 32rpx;
|
||
}
|
||
}
|
||
}
|
||
.codeBtn{
|
||
background: #fff;
|
||
padding: 0;
|
||
height: 30rpx;
|
||
font-size: 32rpx;
|
||
font-family: Source Han Sans CN;
|
||
color: #0092FF;
|
||
line-height: 36rpx;
|
||
&::after{ border: none;}
|
||
&.u-default-hover{
|
||
// font-weight: bold;
|
||
background: #fff !important;
|
||
color: #666 !important;
|
||
border-color: #fff !important;
|
||
}
|
||
}
|
||
.btn{
|
||
display: flex;
|
||
justify-content: center;
|
||
height: 142rpx;
|
||
position: fixed;
|
||
left: 0;
|
||
right: 0;
|
||
bottom: 0;
|
||
button{
|
||
width: 590rpx;
|
||
height: 85rpx;
|
||
background: #3683FD;
|
||
border-radius: 43rpx;
|
||
font-size: 32rpx;
|
||
color: #FFFFFF;
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
}
|
||
}
|
||
</style>
|