HuiSuo-QhdAnErRan/h5/pages/resetPwd.vue

<template>
	<view class="login-container">
		<!-- 登录卡片 -->
		<view class="login-card">
			<!-- 标题区域 -->
			<view class="title-area">
				<view class="title">忘记密码</view>
				<view class="subtitle">通过手机验证码重置密码</view>
			</view>

			<!-- 手机号输入框 -->
			<view class="input-item">
				<text class="label">手机号</text>
				<input class="input" type="number" placeholder="请输入手机号" v-model="form.tel" />
			</view>
			<view class="input-item">
				<text class="label">短信验证码</text>
				<view style="display: flex;">
					<input class="input_code" type="number" placeholder="请输入验证码" v-model="form.code" />
					<button style="width: 200rpx;height: 70rpx;line-height: 70rpx;margin-left: 10rpx;"  size="mini" @tap="sendVerifyCode('click')">
					{{ sending ? '发送中...' : '发送验证码' }}
					</button>
				</view>
				
			</view>

			<!-- 密码输入框 -->
			<view class="input-item">
				<text class="label">密码</text>
				<input class="input" type="password" placeholder="请输入新密码" v-model="form.password" />
			</view>
			<view class="input-item">
				<text class="label">密码</text>
				<input class="input" type="password" placeholder="再次输入新密码" v-model="form.repassword" />
			</view>
		 

			<!-- 登录按钮 -->
			<button class="login-btn" @tap="handleResetPwd('click')">重置密码</button>

			<!-- 注册入口 -->
			<view class="register-bar">
				<text>返回登录?</text>
				<text class="register-btn" @tap="handleLogin">立即登录</text>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		ref
	} from "vue"
	import {
		ResetPassword,SmsSendCode
	} from "@/api"
	import {
		onLoad
	} from "@dcloudio/uni-app"
	let form = ref({
		tel: '', 
		password: '' ,
		repassword: '' ,
		code: ''
	})
	 let sending = ref(false)
	const handleResetPwd = (logintype='') => {
		if(form.value.tel=='' || form.value.password=='' || form.value.repassword=='' || form.value.code==''){
			uni.showToast({
				title: '请填写全部信息',
				icon: 'none'
			});
			return false
		}
		if(form.value.password !==form.value.repassword){
			uni.showToast({
				title: '两次密码不一致',
				icon: 'none'
			});
			return false
		}
		ResetPassword({
			info: form.value
		}).then(res => {
			if (res.status) {
				uni.showToast({
					title: '重置密码成功',
					icon: 'none'
				});
				uni.navigateTo({
					url: '/pages/login'
				});
			}
		})
	}
 // 发送验证码
 const sendVerifyCode = () => {
 	if (!form.value.tel) {
 		uni.showToast({
 			title: '请输入手机号',
 			icon: 'none'
 		});
 		return;
 	}
 
 	sending.value = true;
 	// 模拟发送验证码
 	SmsSendCode({
 		tel: form.value.tel
 	}).then(res => {
 		 sending.value = false;
 		if (res.status) {
 		
 		 uni.showToast({
 		 	title: '验证码已发送',
 		 	icon: 'success'
 		 });
 		}
 	})
 	 
 }
	const handleForget = () => {
		// 忘记密码逻辑
		uni.navigateTo({
			url: '/pages/forget/forget'
		});
	}
	const handleLogin = () => {
		uni.navigateTo({
			url: '/pages/login'
		});
	}
	onLoad(()=>{
		 
	})
</script>

<style scoped>
	/* 页面容器 */
	.login-container {
		width: 100vw;
		height: 100vh;
		background-color: #f5f7fa;
		display: flex;
		justify-content: center;
		align-items: center;
		background: linear-gradient(135deg, #E1EBFB, #f0f9ff);

	}

	/* 登录卡片 */
	.login-card {
		width: 100%;
		max-width: 600rpx;
		background-color: #ffffff;
		border-radius: 20rpx;
		padding: 60rpx 40rpx;
		box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.05);
	}

	/* 标题区域 */
	.title-area {
		text-align: center;
		margin-bottom: 40rpx;
	}

	.title {
		font-size: 40rpx;
		font-weight: bold;
		color: #1a56db;
	}

	.subtitle {
		font-size: 24rpx;
		color: #999999;
		margin-top: 10rpx;
	}

	/* 输入项 */
	.input-item {
		margin-bottom: 30rpx;
	}

	.label {
		font-size: 28rpx;
		color: #333333;
		margin-bottom: 10rpx;
		display: block;
	}

	.input {
		width: 100%;
		height: 70rpx;
		border: 1px solid #e5e5e5;
		border-radius: 8rpx;
		padding: 0 20rpx;
		font-size: 28rpx;
		box-sizing: border-box;
	}
	.input_code{
		 
		height: 70rpx;
		border: 1px solid #e5e5e5;
		border-radius: 8rpx;
		padding: 0 20rpx;
		font-size: 28rpx;
		box-sizing: border-box;
	}

	/* 选项栏 */
	.option-bar {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin: 20rpx 0 40rpx;
		font-size: 26rpx;
	}

	.remember-label {
		display: flex;
		align-items: center;
		color: #333333;
	}

	.checkbox {
		transform: scale(0.8);
		margin-right: 10rpx;
	}

	.forget-btn {
		color: #1a56db;
	}

	/* 登录按钮 */
	.login-btn {
		width: 100%;
		height: 80rpx;
		background-color: #1a56db;
		color: #ffffff;
		font-size: 32rpx;
		border-radius: 8rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		margin-bottom: 30rpx;
	}

	.login-btn::after {
		border: none;
	}

	/* 注册栏 */
	.register-bar {
		text-align: center;
		font-size: 26rpx;
		color: #999999;
	}

	.register-btn {
		color: #1a56db;
		margin-left: 10rpx;
	}
</style>