jsh_erp_app/pages/login/forget-password.vue

<template>
	<s-layout title="忘记密码" :bgStyle="{color:'#fff'}">
		<view class="content-block">
			<uni-forms ref="resetPasswordRef" v-model="state.model" :rules="state.rules" validateTrigger="bind" labelWidth="140"
				labelAlign="left" labelPosition="top">
				<uni-forms-item name="mobile" label="手机号">
					<view class="input-line">
						<uni-easyinput placeholder="请输入手机号" v-model="state.model.mobile" type="number" :inputBorder="false">
						</uni-easyinput>
					</view>
				</uni-forms-item>
				<uni-forms-item name="password" label="密码">
					<view class="input-line">
						<uni-easyinput type="password" placeholder="请输入密码" v-model="state.model.password" :inputBorder="false">
						</uni-easyinput>
					</view>
				</uni-forms-item>
				<uni-forms-item name="code" label="验证码">
					<view class="ss-flex ss-row-between">
						<view class="input-line w-370">
							<uni-easyinput placeholder="请输入验证码" v-model="state.model.code" :inputBorder="false" type="number"
								maxlength="6">
							</uni-easyinput>
						</view>
						<button class="ss-reset-button code-btn code-btn-start" :disabled="getSmsTimer('resetPassword') != '获取验证码'"
							:class="{ 'code-btn-end': getSmsTimer('resetPassword') != '获取验证码' }"
							@tap="getSmsCode('resetPassword', state.model.mobile)">
							{{ getSmsTimer('resetPassword') }}
						</button>
					</view>
				</uni-forms-item>
			
			
			</uni-forms>
			
			<button class="ss-reset-button toLoginBtn" @tap="resetPasswordSubmit">
				确认
			</button>
		</view>
	</s-layout>
</template>

<script setup>
	import {
		computed,
		watch,
		ref,
		reactive,
		unref
	} from 'vue';
	import sheep from '@/sheep';
	import {
		code,
		mobile,
		password
	} from '@/sheep/validate/form';
	import {
		getSmsCode,
		getSmsTimer
	} from '@/sheep/hooks/useModal';
	import {Base64} from 'js-base64'

	const resetPasswordRef = ref(null);
	const isLogin = computed(() => sheep.$store('user').isLogin);

	// 数据
	const state = reactive({
		isMobileEnd: false, // 手机号输入完毕
		model: {
			mobile: '', //手机号
			code: '', //验证码
			password: '', //密码
		},
		rules: {
			code,
			mobile,
			password,
		},
	});

	// 4.重置密码
	const resetPasswordSubmit = async () => {
		const validate = await unref(resetPasswordRef)
			.validate()
			.catch((error) => {
				console.log('error: ', error);
			});
		if (!validate) return;
		state.model.uuid = sheep.$store('user').getUUID('resetPassword')
		console.log(state.model,'model')
		const data = Base64.encode(JSON.stringify(state.model))
		sheep.$api.user.forgotPassword(data)
		.then((res) => {
			if (res.code == 200) {
				sheep.$helper.toast('修改成功！')
				setTimeout(()=>{
					uni.navigateBack()
				},1500)
				// sheep.$store('user').getInfo();
			}
		})
	};
</script>

<style lang="scss" scoped>
	@import '@/sheep/components/s-auth-modal/index.scss';
	.content-block {
		padding: 0 30rpx;
	}
	.input-line {
		background-color: #F5F7FB;
		border-radius: 16rpx;
		padding-left: 30rpx;
		height: 88rpx;
		box-sizing: border-box;
	}
	.toLoginBtn {
		height: 88rpx;
		background: #F39801;
		border-radius: 16rpx;
		color: #fff;
		margin-bottom: 32rpx;
		margin-top: 30rpx;
	}
	.w-370 {
		width: 370rpx;
	}
</style>