ldeyun/ruoyi-geek-App
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

添加注册

Browse Source
This commit is contained in:
廖德云 2025-11-25 20:43:09 +08:00
parent e4fe05035c
commit ad426e3660
5 changed files with 465 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

61
api/login.js
View File

@ -46,6 +46,7 @@ export function logout() {
})
}
// 获取验证码
export function getCodeImg() {
return request({
@ -57,3 +58,63 @@ export function getCodeImg() {
timeout: 20000
})
}
export function sendEmailCode(data, type = 'register') {
return request({
url: `/auth/mail/send/${type}`,
headers: {
isToken: false
},
method: 'post',
timeout: 20000,
data,
params: {
autoRegister: data.autoRegister
},
})
}
export function verifyEmailCode(data, type = 'register') {
return request({
url: `/auth/mail/verify/${type}`,
headers: {
isToken: false
},
method: 'post',
timeout: 20000,
data,
params: {
autoRegister: data.autoRegister
},
})
}
export function sendPhoneCode(data, type = 'register') {
return request({
url: `/auth/dySms/send/${type}`,
headers: {
isToken: false
},
method: 'post',
timeout: 20000,
data,
params: {
autoRegister: data.autoRegister
},
})
}
export function verifyPhoneCode(data, type = 'register') {
return request({
url: `/auth/dySms/verify/${type}`,
headers: {
isToken: false
},
method: 'post',
timeout: 20000,
data,
params: {
autoRegister: data.autoRegister
},
})
}

70
api/system/user.js
View File

@ -1,6 +1,50 @@
import upload from '@/utils/upload'
import request from '@/utils/request'
// 查询用户列表
export function listUser(query) {
return request({
url: '/system/user/list',
method: 'get',
params: query
})
}
// 查询用户详细
export function getUser(userId) {
return request({
url: '/system/user/' + parseStrEmpty(userId),
method: 'get'
})
}
// 新增用户
export function addUser(data) {
return request({
url: '/system/user',
method: 'post',
data: data
})
}
// 修改用户
export function updateUser(data) {
return request({
url: '/system/user',
method: 'put',
data: data
})
}
// 删除用户
export function delUser(userId) {
return request({
url: '/system/user/' + userId,
method: 'delete'
})
}
// 用户密码重置
export function updateUserPwd(oldPassword, newPassword) {
const data = {
@ -39,3 +83,29 @@ export function uploadAvatar(data) {
filePath: data.filePath
})
}
// 用户密码重置
export function resetUserPwd(userId, password) {
const data = {
userId,
password
}
return request({
url: '/system/user/resetPwd',
method: 'put',
data: data
})
}
// 用户状态修改
export function changeUserStatus(userId, status) {
const data = {
userId,
status
}
return request({
url: '/system/user/changeStatus',
method: 'put',
data: data
})
}

6
pages.json
View File

@ -59,6 +59,12 @@
{
"root": "pages_mine/pages",
"pages": [
{
"path": "register/index",
"style": {
"navigationBarTitleText": "注册账号"
}
},
{
"path": "avatar/index",
"style": {

51
pages/login.vue
View File

@ -23,7 +23,7 @@ const loginForm = ref({
});
function handleLoginByWx() {
getWxCode().then(res => {
getWxCode("__UNI__A6541FF").then(res => {
console.log(res);
wxLogin('miniapp', res).then(res => {
if (res.token != null) {
@ -102,7 +102,7 @@ getCode();
<view class="logo-content align-center justify-center flex">
<image style="width: 100rpx;height: 100rpx;" :src="globalConfig.appInfo.logo" mode="widthFix">
</image>
<text class="title">若依移动端登录</text>
<text class="title">登录</text>
</view>
<view class="login-form-content">
<view class="input-item flex align-center">
@ -127,6 +127,11 @@ getCode();
</view>
</view>
<view class="register-link" >
<text class="question-text">没有账号？</text>
<navigator class="link-type" url="/pages_mine/pages/register/index">立即注册</navigator>
</view>
<view class="xieyi text-center">
<text class="text-grey1">登录即代表同意</text>
<text @click="handleUserAgrement" class="text-blue">《用户协议》</text>
@ -216,4 +221,46 @@ page {
}
}
}
.register-link {
display: flex;
justify-content: center;
align-items: center;
margin-top: 5px;
margin-bottom: 15px;
.question-text {
color: #606266;
margin-right: 8px;
font-size: 14px;
}
.link-type {
color: #409EFF;
text-decoration: none;
font-weight: 500;
font-size: 14px;
position: relative;
transition: all 0.3s ease;
&::after {
content: '';
position: absolute;
bottom: -2px;
left: 0;
width: 0;
height: 2px;
background-color: #409EFF;
transition: width 0.3s ease;
}
&:hover {
color: #66b1ff;
&::after {
width: 100%;
}
}
}
}
</style>

277
pages_mine/pages/register/index.vue Normal file
View File

@ -0,0 +1,277 @@
<script setup lang="ts">
import { onMounted, ref } from "vue";
import { getCodeImg, sendEmailCode, sendPhoneCode } from "@/api/login";
import useUserStore from "@/store/modules/user";
// 定义 props
const props = defineProps<{
register: boolean;
captchaEnabled: boolean;
method: 'password' | 'phone' | 'email';
}>();
// 响应式数据
const registerForm = ref({
username: "",
password: "",
confirmPassword: "",
email: '',
phonenumber: '',
code: "",
uuid: "",
});
const codeUrl = ref("");
// 分开控制发送验证码和注册的 loading 状态
const sendCodeLoading = ref(false);
const registerLoading = ref(false);
const registerRef = ref<any>(null);
// 表单校验规则
const registerRules = {
username: [
{ required: true, message: "请输入您的账号", trigger: "blur" },
{ min: 2, max: 20, message: "用户账号长度必须介于 2 和 20 之间", trigger: "blur" }
],
password: [
{ required: true, message: "请输入您的密码", trigger: "blur" },
{ min: 5, max: 20, message: "用户密码长度必须介于 5 和 20 之间", trigger: "blur" },
{ pattern: /^[^<>"'|\\]+$/, message: "不能包含非法字符：< > \" ' \\\ |", trigger: "blur" }
],
confirmPassword: [
{ required: true, message: "请再次输入您的密码", trigger: "blur" },
{
validator: (rule: any, value: any, callback: any) => {
if (registerForm.value.password !== value) {
callback(new Error("两次输入的密码不一致"));
} else {
callback();
}
},
trigger: "blur"
}
],
code: [{ required: true, message: "请输入验证码", trigger: "change" }]
};
// 用户仓库
const userStore = useUserStore();
// 获取图形验证码
function getCode() {
if (!props.captchaEnabled) return;
getCodeImg().then((res: any) => {
codeUrl.value = "data:image/gif;base64," + res.img;
registerForm.value.uuid = res.uuid;
});
}
// 发送验证码
function sendCode() {
if (props.method === 'email') {
sendEmailCode(registerForm.value, 'register');
} else if (props.method === 'phone') {
sendPhoneCode(registerForm.value, 'register');
}
}
// 注册提交
function handleRegister() {
registerRef.value.validate((valid: boolean) => {
if (valid) {
loading.value = true;
userStore.register(registerForm.value, props.method).then(() => {
uni.showModal({
title: "系统提示",
content: `<font color='red'>恭喜你，您的账号 ${registerForm.value.username} 注册成功！</font>`,
showCancel: false,
success: () => {
uni.redirectTo({
url: "/pages/login/login" // 跳转到登录页
});
}
});
}).catch(() => {
getCode();
}).finally(() => {
loading.value = false;
});
}
});
}
// 页面加载时获取验证码
onMounted(() => {
getCode();
});
</script>
<template>
<view class="register-container">
<uni-forms
ref="registerRef"
:model="registerForm"
:rules="registerRules"
class="register-form"
>
<!-- 邮箱输入 -->
<uni-forms-item prop="email" v-if="method === 'email'">
<uni-easyinput
v-model="registerForm.email"
type="text"
placeholder="邮箱"
prefixIcon="email"
/>
</uni-forms-item>
<!-- 手机号输入 -->
<uni-forms-item prop="phonenumber" v-else-if="method === 'phone'">
<uni-easyinput
v-model="registerForm.phonenumber"
type="text"
placeholder="手机号"
prefixIcon="phone"
/>
</uni-forms-item>
<!-- 用户名输入 -->
<uni-forms-item prop="username" v-else>
<uni-easyinput
v-model="registerForm.username"
type="text"
placeholder="账号"
prefixIcon="user"
/>
</uni-forms-item>
<!-- 密码输入 -->
<uni-forms-item prop="password">
<uni-easyinput
v-model="registerForm.password"
type="password"
placeholder="密码"
prefixIcon="lock"
@keyup.enter="handleRegister"
/>
</uni-forms-item>
<!-- 确认密码输入 -->
<uni-forms-item prop="confirmPassword">
<uni-easyinput
v-model="registerForm.confirmPassword"
type="password"
placeholder="确认密码"
prefixIcon="lock"
@keyup.enter="handleRegister"
/>
</uni-forms-item>
<!-- 验证码输入 -->
<uni-forms-item prop="code">
<view class="code-input">
<uni-easyinput
v-model="registerForm.code"
type="text"
placeholder="验证码"
prefixIcon="code"
@keyup.enter="handleRegister"
/>
<!-- 图形验证码或发送按钮 -->
<view class="code-action">
<uni-image
v-if="captchaEnabled && method === 'password'"
:src="codeUrl"
class="code-img"
@click="getCode"
mode="aspectFill"
/>
<uni-button
v-else
type="primary"
size="mini"
@click="sendCode"
:loading="loading"
>
发送验证码
</uni-button>
</view>
</view>
</uni-forms-item>
<!-- 注册按钮 -->
<uni-forms-item>
<button
type="primary"
size="default"
class="register-btn"
:loading="loading"
@click="handleRegister"
>
注册
</button>
</uni-forms-item>
<!-- 已有账号跳转 -->
<view class="login-link">
<text class="question-text">已有账号？</text>
<navigator url="/pages/login" class="link-type">立即登录</navigator>
</view>
</uni-forms>
</view>
</template>
<style scoped lang="scss">
.register-container {
padding: 40rpx;
}
.register-form {
background-color: #fff;
padding: 60rpx;
border-radius: 16rpx;
box-shadow: 0 10rpx 30rpx rgba(0, 0, 0, 0.05);
}
.code-input {
display: flex;
align-items: center;
gap: 20rpx;
}
.code-action {
flex-shrink: 0;
}
.code-img {
width: 180rpx;
height: 70rpx;
border-radius: 8rpx;
}
.register-btn {
width: 100%;
height: 80rpx;
line-height: 80rpx;
font-size: 30rpx;
border-radius: 40rpx;
margin-top: 20rpx;
}
.login-link {
display: flex;
justify-content: center;
align-items: center;
margin-top: 40rpx;
font-size: 26rpx;
color: #666;
}
.link-type {
color: #007aff;
margin-left: 10rpx;
text-decoration: underline;
}
</style>