DigitalScholl/Learun.Framework.Ultimate V7/LearunApp-2.2.0/pages/forgotPassword.vue

<template>
	<view class="page">
		<view class="content" v-if="type == 'sendCode'">
			<l-input v-model="phone" placeholder="请输入用户绑定的手机号" left>
				<l-icon slot="title" type="phone" />
			</l-input>
			<view class="btn" @click="sendCode">发送验证码</view>
		</view>
		<view class="content" v-if="type == 'checkCode'">
			<l-input v-model="phone" placeholder="请输入用户绑定的手机号" left disabled>
				<l-icon slot="title" type="phone" />
			</l-input>
			<l-input v-model="verifycode" placeholder="请输入验证码" left password>
				<l-icon slot="title" type="lock" />
			</l-input>
			<view style="margin-top: 4px;color: color: #606266;">
				未收到验证码？<text :style="{color:time==0?'#409EFF':'#999'}" @click="()=>{if(time==0)type='sendCode'}">重新发送</text>
				{{time?'( '+time+ 's'+' )' :''}}
			</view>
			<view class="btn" @click="checkverifycode">下一步</view>
		</view>
		<view class="content" v-if="type == 'setPassword'">
			<l-input v-model="phone" placeholder="请输入用户绑定的手机号" left disabled>
				<l-icon slot="title" type="phone" />
			</l-input>
			<l-input v-model="form.newpassword" placeholder="请输入新密码" left password>
				<l-icon slot="title" type="lock" />
			</l-input>
			<l-input v-model="form.newpassword1" placeholder="请再次输入新密码" left password>
				<l-icon slot="title" type="lock" />
			</l-input>
			<view class="btn" @click="setPassword">确认修改</view>
		</view>
	</view>
</template>

<script>
// import moment from 'moment';
export default{
	data() {
		return {
			type:'sendCode',
			phone:'',
			verifycode:'',
			time: 0,
			timeT: '',
			
			form:{
				newpassword:'',
				newpassword1:'',
			},
			codeType:'forgetpwd',
		}
	},
	destroyed() {
		this.timeT && clearInterval(this.timeT)
	},
	methods:{
		// 发送验证码
		sendCode(){
			if(!this.phone){
				this.TOAST('请输入手机号！')
				return
			}else if(!/^1[0-9]{10}$/.test(this.phone)){
				this.TOAST('手机号格式不正确！')
				return
			}
			this.LOADING()
			this.HTTP_POST('learun/adms/usernologin/sendcode',{username:this.phone,codeType:this.codeType}).then(res=>{
				this.HIDE_LOADING()
				if(!res){
					return
				}
				this.type = 'checkCode'
				
				this.time = 60
				this.timeT = setInterval(() => {
					this.time--
					if (this.time == 0) {
						clearInterval(this.timeT)
						this.timeT = ''
						return
					}
				}, 1000);
			})
		},
		// 验证码校验
		async checkverifycode() {
			if (!this.verifycode) {
				this.TOAST('请输入验证码');
				return
			}
			this.LOADING('正在校验...')
			let codeResult = await this.HTTP_POST('learun/adms/usernologin/logincodeverify', {
				mobile: this.phone,
				verifycode: this.verifycode,
				codeType: this.codeType
			})
			this.HIDE_LOADING()
			if(!codeResult)return
			this.type = 'setPassword'
		},
		// 设置密码
		async setPassword(){
			if(!this.form.newpassword){
				this.TOAST('请输入新密码');
				return
			}
			if(!/^(?=.*[0-9])(?=.*[A-Z])(?=.*[a-z])(?=.*[!@#$%^&*,\.])[0-9a-zA-Z!@#$%^&*,\.]{8,20}$/.test(this.form.newpassword)){
				this.TOAST('您的密码不满足强度要求，请重新输入');
				return
			}
			if(!this.form.newpassword1){
				this.TOAST('请再次输入新密码');
				return
			}
			if(this.form.newpassword != this.form.newpassword1){
				this.TOAST('两次密码输入不一致');
				return
			}
			this.LOADING()
			let res = await this.HTTP_POST('learun/adms/usernologin/forgetpass', {
				newpassword:this.MD5(this.form.newpassword),
				// this.MD5()
				phone:this.phone
			})
			this.HIDE_LOADING()
			if(!res)return
			this.TOAST('修改成功')
			setTimeout(()=>{
				this.NAV_TO('/pages/login')
			},500)
		}
	},
}
</script>

<style scoped>
	.page {
	    height: 100vh;
	    width: 100%;
	    display: flex;
	    justify-content: center;
	    align-items: center;
	}
	.content{
		width: 80%;
		padding-bottom: 60px;
	}
</style>