shortPlay-mini/pages/login/forgetPwd/forgetPwd.vue

<template>
	<view>
		<view class="img-a">
			<image src="../../../static/head.png" mode="aspectFill"></image>
			<view class="t-b">
				您好，
				<br />
				欢迎使用 种草短剧
			</view>
		</view>
		<view class="login-view" style="">
			<view class="p-30">
				<u--form :model="form" :rules="rules" ref="uForm">
					<u-form-item  prop="phone">
						<u-input v-model="form.phone" :readonly="initHasPhone" placeholder="请输入手机号" clearable />
					</u-form-item>
					<u-form-item  prop="code" borderBottom>
						<u-input v-model="form.code" placeholder="请填写验证码" clearable>
							<template slot="suffix">
								<u-code ref="uCode" @change="codeChange" seconds="60" @start="disabled1 = true"
									@end="disabled1 = false"></u-code>
								<u-button @tap="getCode" :text="tips" type="primary" size="mini"
									:disabled="disabled1"></u-button>
							</template>
						</u-input>
					</u-form-item>
					<u-form-item  prop="password">
						<u-input v-model="form.password" password type="password" clearable placeholder="请输入密码" />
					</u-form-item>
					<u-form-item  prop="rePassword">
						<u-input v-model="form.rePassword" password type="password" clearable placeholder="请再次输入密码" />
					</u-form-item>
				</u--form>
			</view>
			<view class="t-login">
				<form class="cl">
					<button @tap="submit()">保存</button>
					<view class="reg" @tap="navigateBack()" v-if="!initHasPhone">返回登录</view>
				</form>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		updateUserById,
		sendSmsCode,
		updatePasswordByCode
	} from '@/api/index.js'
	import {
		mapState
	} from 'vuex'
	export default {
		data() {
			return {
				disabled1: false,
				tips: '',
				initHasPhone: false,
				form: {
					phone: '',
					code: '',
					password: '',
					rePassword: ''
				},
				rules: {
					// 字段名称
					phone: [{
							required: true,
							message: '请输入手机号',
							trigger: ['change', 'blur'],
						},
						{
							// 自定义验证函数，见上说明
							validator: (rule, value, callback) => {
								// uni.$u.test.mobile()就是返回true或者false的
								return uni.$u.test.mobile(value);
							},
							message: '手机号码不正确',
							trigger: ['change', 'blur'],
						}
					],
					code: {
						type: 'string',
						required: true,
						len: 6,
						message: '请填写6位验证码',
						trigger: ['blur']
					},
					password: [{
						required: true,
						message: '请输入密码',
						trigger: ['blur', 'change']
					}],
					rePassword: [{
						required: true,
						message: '请再次输入密码',
						trigger: ['blur', 'change']
					}],
				}
			}
		},
		onLoad(option) {
			if(option.phone) {
				this.initHasPhone = true
				this.form.phone = option.phone
			}
		},
		onReady() {
			//如果需要兼容微信小程序，并且校验规则中含有方法等，只能通过setRules方法设置规则。
			this.$refs.uForm.setRules(this.rules)
		},
		methods: {
			submit() {
				this.$refs.uForm.validate().then(async res => {
					if (this.form.password !== this.form.rePassword) {
						return uni.$u.toast('两次密码不一致，请重新输入')
					}
					const res1 = await updatePasswordByCode(this.form)
					if (!res1.success) return
					uni.showToast({
						title: '操作成功，即将返回上一页',
						icon: 'success',
						duration: 1500,
						success() {
							setTimeout(() => {
								uni.navigateBack()
							}, 3000)
						}
					})
				}).catch(errors => {
					// uni.$u.toast('校验失败')
				})
			},
			codeChange(text) {
				this.tips = text;
			},
			async getCode() {
				if (this.$refs.uCode.canGetCode) {
					if (!/^[1][3,4,5,7,8,9][0-9]{9}$/.test(this.form.phone)) {
						uni.$u.toast('请输入正确手机号')
						return;
					}
					const res = await sendSmsCode({phone: this.form.phone})
					if(!res.success) return
					// 这里此提示会被this.start()方法中的提示覆盖
					uni.$u.toast('验证码已发送');
					// 通知验证码组件内部开始倒计时
					this.$refs.uCode.start();
				} else {
					console.info('倒计时结束后再发送');
				}
			}
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #ffffff;
	}

	.txt {
		font-size: 32rpx;
		font-weight: bold;
		color: #333333;
	}

	.img-a {
		width: 100%;
		height: 550rpx;
		overflow: hidden;
		position: relative;
	}

	.img-a image {
		width: 100%;
		height: 550rpx;
	}

	.reg {
		font-size: 35rpx;
		color: #fff;
		height: 90rpx;
		line-height: 90rpx;
		border-radius: 50rpx;
		background: #f5f6fa;
		color: #000000;
		text-align: center;
		margin-top: 40rpx;
	}

	.login-view {
		width: 100%;
		position: relative;
		margin-top: -120rpx;
		background-color: #ffffff;
		border-radius: 40rpx 40rpx 0 0;
	}

	.t-login {
		width: 85vw;
		margin: 0 auto;
		font-size: 28rpx;
		padding-top: 30rpx;
	}

	.t-login button {
		font-size: 35rpx;
		background: #2796f2;
		color: #fff;
		height: 90rpx;
		line-height: 90rpx;
		border-radius: 50rpx;
	}

	.t-b {
		text-align: left;
		font-size: 42rpx;
		color: #ffffff;
		padding: 130rpx 0 0 70rpx;
		font-weight: bold;
		line-height: 70rpx;
		position: absolute;
		top: 0;
		left: 0;
	}
</style>