null/pages/login/forget-删除.vue

<template>
	<view class="page">
		<view class="p-header flex-col justify-center">
			<view class="mtitle">忘记密码</view>
			<view class="stitle">请按照要求重新设置密码</view>
		</view>
		
		<view class="p-form">
			<view class="c-item align-center">
				<image src="/static/log_tel.png" mode="widthFix" class="i-ic"></image>
				<view class="i-inpt">
					<input type="number" class="inpt" placeholder="请输入手机号" v-model="mobile"/>
				</view>
			</view>
			
			<view class="c-item align-center">
				<image src="/static/log_yan.png" mode="widthFix" class="i-ic"></image>
				<view class="i-inpt">
					<input type="text" class="inpt" placeholder="请输入验证码" v-model="captcha"/>
				</view>
				<view class="code-wrap" @tap="chgeCode">
					<phoneCode ref="codeRef" :mobile="mobile" event="resetpwd" />
				</view>
			</view>
			
			<view class="c-item align-center">
				<image src="/static/log_mima.png" mode="widthFix" class="i-ic"></image>
				<view class="i-inpt">
					<input type="password" class="inpt" placeholder="请设置新密码" v-model="newpassword"/>
				</view>
			</view>
			<view class="c-item align-center">
				<image src="/static/log_mima.png" mode="widthFix" class="i-ic"></image>
				<view class="i-inpt">
					<input type="password" class="inpt" placeholder="请再次确认新密码" v-model="repassword"/>
				</view>
			</view>
			
		</view>
		<submit-btn @submit="submit" ref="submitRef">
			<template v-slot:btns="{isSubmitted}">
				<view class="p-btn" :class="{'disabled':isSubmitted}">
					完成
				</view>
			</template>
		</submit-btn>
	</view>
</template>

<script>
	import phoneCode from './components/phoneCode.vue'
	export default {
		components:{
			phoneCode
		},
		data() {
			return {
				mobile:'',
				captcha:'',
				newpassword:'',
				repassword:'',
				// phone:'',
				// password:'',
				// code:'',
			};
		},
		onLoad(opt) {
			// this.openid = this.$Route.query.openid;
			// this.accessToken = this.$Route.query.accessToken;
		},
		methods:{
			chgeCode(){
				this.$refs.codeRef.getCode();
			},
			async submit(){
				if(! this.$tools.match(this.mobile,'mobile')){
					return;
				}else if(!this.$tools.match(this.captcha,'code') ){
					return;
				}else if(!this.$tools.match(this.newpassword,'pwd') ){
					return;
				}else if(!this.repassword){
					this.$tools.msg('请输入确认密码')
					return;
				}else if( this.repassword !== this.newpassword){
					this.$tools.msg('两次密码不一致')
					return;
				}
				let sendData={
					mobile:this.mobile,
					captcha:this.captcha,
					newpassword: this.newpassword,
					repassword: this.repassword,
				}
				let res=await this.$request('user.resetpwd',sendData);
				this.$tools.msg(res.msg);
				this.$refs.submitRef.chgeStatus();
				setTimeout(()=>{
					this.goBack();
				},800)
			},
		},
	}
</script>

<style lang="scss">
	page{
		background-color: #fff;
	}
	.page{
		min-height: 100vh;
		width: 100%;
		padding-bottom: 100rpx;
	}
	.p-header{
		width: 750rpx;
		height: 240rpx;
		position: relative;
		width: 630rpx;
		margin: 0 auto;
		.mtitle{
			font-size: 48rpx;
			font-family: PingFang SC;
			font-weight: bold;
			color: #333333;
		}
		.stitle{
			margin-top: 22rpx;
			font-size: 24rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #999999;
		}
	}
	.p-form{
		width: 630rpx;
		margin: 0 auto;
		.c-pwd{
			height: 63rpx;
			line-height: 63rpx;
			width: 100%;
			text-align: right;
			font-size: 24rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #333333;
		}
		.c-item{
			width: 100%;
			height: 84rpx;
			background-color: #F1F1F1;
			padding: 0 26rpx;
			margin-bottom: 30rpx;
			border-radius: 40rpx;
		}
		.i-ic{
			width: 30rpx;
			height: 30rpx;
			margin-right: 17rpx;
		}
		.i-inpt{
			flex:1;
			.inpt{
				width: 100%;
				height: 84rpx;
				line-height: 84rpx;
				color:#333;
				font-size: 30rpx;
			}
			.code-inpt{
				flex:1;
				margin-right: 20rpx;
				height: 103rpx;
				line-height: 103rpx;
				color:#333;
				font-size: 26rpx;
			}
			.phone-code{
				width: 200rpx;
				height: 60rpx;
				background: #0D91FF;
				box-shadow: 0rpx 6rpx 10rpx 0rpx rgba(13, 145, 255, 0.28);
				border-radius: 30rpx;
				line-height: 60rpx;
				text-align: center;
				font-size: 26rpx;
				color: #FFFFFF;
			}
		}
		// .i-code{
		// 	width: 180rpx;
		// 	height: 70rpx;
		// }
	
	}
	.p-btn{
		margin: 180rpx auto 0;
		width: 630rpx;
		height: 84rpx;
		border-radius: 40rpx;
		line-height: 84rpx;
		text-align: center;
		font-size: 34rpx;
		font-family: PingFang SC;
		font-weight: 500;
		background-color: $base-color;
		color:#fff;
		&.disabled{
			background-color: #eee;
			box-shadow: none;
			border: none;
		}
	}
    .p-reg{
		margin-top: 30rpx;
		font-size: 28rpx;
		font-family: PingFang SC;
		font-weight: 500;
		text-align: center;
		width: 100%;
		.stxt{
			color: #999999;
		}
		.mtxt{
			color: #333;
		}
	}
	.p-tips{
		position: absolute;
		z-index: 2;
		bottom: 30rpx;
		left: 0;
		width: 100%;
		.ic{
			width: 30rpx;
			height: 30rpx;
			margin-right: 22rpx;
		}
		.txt{
			color:#999999;
			font-size: 24rpx;
			font-family: PingFang SC;
			font-weight: 500;
		}
		.link{
			color:#333333;
			font-size: 24rpx;
			font-family: PingFang SC;
			font-weight: 500;
		}
	}
</style>