warst/warst-h5/pages/user/retrievePwd/index.vue

<template>
	<!--找回密码-->
	<view class="retrieve-pwd">
		<u--form
			labelPosition="left"
			:model="formData"
			:rules="rules"
			ref="uForm"
			labelWidth="70"
		>
			<u-form-item label="手机号" prop="phoneNum">
				<c-input
					placeholder="请输入手机号"
					v-model="formData.phoneNum"
					type="number"
					border="none"
					maxlength="11"
				></c-input>
			</u-form-item>
		</u--form>

		<view class="footer" style="margin-top: 130rpx">
			<c-button
				@click="nextStep"
				:key="isPassed"
				type="primary"
				:disabled="!isPassed"
			>
				下一步
			</c-button>
		</view>
	</view>
</template>

<script>
import { isPhone } from 'api/user/login/retrievePwd.js';
export default {
	name: 'retrievePwd',
	data() {
		return {
			formData: {
				phoneNum: '',
			},
			rules: {
				phoneNum: [
					{
						type: 'string',
						required: true,
						message: '请输入手机号',
						trigger: ['change'],
					},
					{
						type: 'string',
						required: true,
						message: '手机号格式不正确',
						trigger: ['change'],
						pattern: /^(?:(?:\+|00)86)?1[3-9]\d{9}$/,
					},
				],
			},
		};
	},
	computed: {
		isPassed() {
			const reg = /^(?:(?:\+|00)86)?1[3-9]\d{9}$/;
			const phoneNum = this.formData.phoneNum;
			return phoneNum && reg.test(phoneNum);
		},
	},
	onLoad(params) {
		const phoneNum = params.phoneNum || '';
		this.formData.phoneNum = phoneNum.length === 11 ? phoneNum : ''; // 回显登录页的手机号
	},
	methods: {
		async nextStep() {
			try {
				this.$c.loading();
				const phoneNum = this.formData.phoneNum;
				await isPhone(phoneNum);
				uni.hideLoading();
				this.$u.route({
					url: '/pages/user/retrievePwd/checkCode',
					params: {
						phoneNum,
					},
				});
			} catch (e) {
				uni.hideLoading();
				console.error(e);
			}
		},
	},
};
</script>

<style scoped lang="scss">
.retrieve-pwd {
	padding: 28rpx;
	background-color: #f8f8f8;
	height: 100%;

	.u-form-item {
		background-color: #fff;
		padding: 20rpx 30rpx;
		border-radius: 6px;
	}
}
</style>