ruoyi-geek-App/pages_mine/pages/register/index.vue

<template>
	<view class="register-container">
		<!-- 背景图建议在 pages.json 中配置，这里作为备用 -->
		<view class="register-form-wrapper">
			<uni-forms ref="registerFormRef" :modelValue="registerForm" :rules="registerRules" label-width="0">

				<view class="title">天然气工具平台</view>

				<uni-forms-item name="username">
					<uni-easyinput v-model="registerForm.username" type="text" placeholder="账号" prefixIcon="person"
						@confirm="handleRegister" />
				</uni-forms-item>

				<uni-forms-item name="password">
					<uni-easyinput v-model="registerForm.password" type="password" placeholder="密码" prefixIcon="locked"
						@confirm="handleRegister" />
				</uni-forms-item>

				<uni-forms-item name="confirmPassword">
					<uni-easyinput v-model="registerForm.confirmPassword" type="password" placeholder="确认密码"
						prefixIcon="locked" @confirm="handleRegister" />
				</uni-forms-item>

				<uni-forms-item name="code" v-if="captchaEnabled">
					<view class="code-input-wrapper">
						<uni-easyinput v-model="registerForm.code" type="text" placeholder="验证码" prefixIcon="code"
							@confirm="handleRegister" />
						<view class="code-img-wrapper">
							<image :src="codeUrl" class="code-img" @tap="getCode"></image>
						</view>
					</view>
				</uni-forms-item>

				<uni-forms-item>
					<uni-button type="primary" size="default" :loading="loading" @click="handleRegister"
						class="register-btn">
						注册
					</uni-button>
					<view class="login-link">
						<text>已有账号？</text>
						<navigator url="/pages/login/login" class="link-text">立即登录</navigator>
					</view>
				</uni-forms-item>

			</uni-forms>
		</view>

		<view class="el-register-footer">
			<text>Copyright © 2018-2025 ruoyi.vip All Rights Reserved.</text>
		</view>
	</view>
</template>

<script setup>
	import {
		ref,
		onReady
	} from 'vue';
	import {
		getCodeImg,
		register
	} from '@/api/login'; // 假设 API 适配了 Uniapp

	// 表单引用
	const registerFormRef = ref(null);

	// 表单数据
	const registerForm = ref({
		username: "",
		password: "",
		confirmPassword: "",
		code: "",
		uuid: ""
	});

	// 校验规则
	const registerRules = {
		username: [{
				required: true,
				errorMessage: '请输入您的账号'
			},
			{
				minLength: 2,
				maxLength: 20,
				errorMessage: '用户账号长度必须介于 2 和 20 之间'
			}
		],
		password: [{
				required: true,
				errorMessage: '请输入您的密码'
			},
			{
				minLength: 5,
				maxLength: 20,
				errorMessage: '用户密码长度必须介于 5 和 20 之间'
			},
			{
				pattern: /^[^<>"'|\\]+$/,
				errorMessage: '不能包含非法字符：< > " \' \\ |'
			}
		],
		confirmPassword: [{
				required: true,
				errorMessage: '请再次输入您的密码'
			},
			{
				validator: (rule, value, callback, source, options) => {
					if (value !== registerForm.value.password) {
						callback(new Error('两次输入的密码不一致'));
					} else {
						callback();
					}
				},
				errorMessage: '两次输入的密码不一致'
			}
		],
		code: [{
			required: true,
			errorMessage: '请输入验证码'
		}]
	};

	// 状态变量
	const codeUrl = ref("");
	const loading = ref(false);
	const captchaEnabled = ref(true);

	// 获取验证码
	const getCode = () => {
		getCodeImg().then(res => {
			// 假设 res.data 结构为 { img: 'base64...', uuid: '...', captchaEnabled: true }
			captchaEnabled.value = res.data.captchaEnabled !== false;
			if (captchaEnabled.value) {
				codeUrl.value = res.data.img; // Uniapp 的 image 组件可以直接显示 base64
				registerForm.value.uuid = res.data.uuid;
			}
		}).catch(err => {
			console.error("获取验证码失败:", err);
			uni.showToast({
				title: '获取验证码失败',
				icon: 'none'
			});
		});
	};

	// 处理注册
	const handleRegister = () => {
		// 使用 uni-forms 的 validate 方法
		registerFormRef.value.validate().then(() => {
			loading.value = true;
			register(registerForm.value).then(res => {
				uni.showModal({
					title: '系统提示',
					content: `<font color='red'>恭喜你，您的账号 ${registerForm.value.username} 注册成功！</font>`,
					showCancel: false,
					success: () => {
						// 注册成功跳转到登录页，关闭当前页
						uni.redirectTo({
							url: '/pages/login/login'
						});
					}
				});
			}).catch(err => {
				// 错误处理，如用户名已存在等
				uni.showToast({
					title: err.message || '注册失败',
					icon: 'none'
				});
				if (captchaEnabled.value) {
					getCode(); // 刷新验证码
				}
			}).finally(() => {
				loading.value = false;
			});
		}).catch(errors => {
			// 表单校验失败，由 uni-forms 自动提示错误信息
			console.log('表单校验失败：', errors);
		});
	};

	// 页面加载时获取验证码
	onReady(() => {
		getCode();
	});
</script>

<style scoped>
	/* 页面整体背景，建议在 pages.json 中配置 "style": { "backgroundImage": "url('/static/login-background.jpg')" } */
	.register-container {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		min-height: 100vh;
		padding: 20rpx;
		box-sizing: border-box;
		background-color: #f5f5f5;
		/* 备用背景色 */
	}

	/* 表单外层容器 */
	.register-form-wrapper {
		width: 100%;
		max-width: 400rpx;
		padding: 40rpx 30rpx;
		background-color: #ffffff;
		border-radius: 16rpx;
		box-shadow: 0 8rpx 30rpx rgba(0, 0, 0, 0.1);
	}

	.title {
		text-align: center;
		font-size: 32rpx;
		font-weight: 500;
		color: #333;
		margin-bottom: 40rpx;
	}

	/* 验证码输入框和图片一行显示 */
	.code-input-wrapper {
		display: flex;
		align-items: center;
		gap: 16rpx;
	}

	.code-img-wrapper {
		flex-shrink: 0;
		width: 140rpx;
		height: 72rpx;
		/* 与输入框高度对齐 */
	}

	.code-img {
		width: 100%;
		height: 100%;
		border-radius: 8rpx;
	}

	/* 注册按钮 */
	.register-btn {
		width: 100%;
		height: 80rpx;
		line-height: 80rpx;
		font-size: 28rpx;
		border-radius: 40rpx;
		margin-bottom: 20rpx;
	}

	/* 登录链接 */
	.login-link {
		text-align: center;
		font-size: 24rpx;
		color: #999;
	}

	.link-text {
		color: #007aff;
		text-decoration: underline;
	}

	/* 页脚 */
	.el-register-footer {
		position: fixed;
		bottom: 0;
		width: 100%;
		height: 80rpx;
		line-height: 80rpx;
		text-align: center;
		font-size: 20rpx;
		color: #ccc;
		box-sizing: border-box;
	}
</style>