273 lines
6.3 KiB
Vue
273 lines
6.3 KiB
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> |