133 lines
3.8 KiB
Vue
133 lines
3.8 KiB
Vue
<template>
|
|
<el-container class="register-container">
|
|
<el-main>
|
|
<el-card class="register-card">
|
|
<el-header>
|
|
<h2>注册</h2>
|
|
</el-header>
|
|
<el-form @submit.prevent="register" label-position="top" class="register-form">
|
|
<el-form-item label="用户名" required>
|
|
<el-input type="text" v-model="username"></el-input>
|
|
</el-form-item>
|
|
<el-form-item label="密码" required>
|
|
<el-input type="password" v-model="password"></el-input>
|
|
</el-form-item>
|
|
<el-form-item label="电子邮箱" required>
|
|
<el-input type="email" v-model="email"></el-input>
|
|
</el-form-item>
|
|
<el-form-item label="电话号码" required>
|
|
<el-input type="text" v-model="phoneNumber"></el-input>
|
|
</el-form-item>
|
|
<el-form-item label="所属企业" required>
|
|
<el-input type="text" v-model="company"></el-input>
|
|
</el-form-item>
|
|
<el-form-item label="选择身份">
|
|
<el-select v-model="role" placeholder="Select role">
|
|
<el-option label="租户" value="USER"></el-option>
|
|
<el-option label="管理员" value="ADMIN"></el-option>
|
|
</el-select>
|
|
</el-form-item>
|
|
<el-form-item label="请输入验证码" required>
|
|
<el-input type="text" v-model="verificationCode"></el-input>
|
|
<el-button class="verification-button" type="primary" @click="getVerificationCode">获取验证码</el-button>
|
|
</el-form-item>
|
|
<el-form-item>
|
|
<el-button type="primary" native-type="submit">注册</el-button>
|
|
<el-button type="default" @click="goToLogin">返回</el-button>
|
|
</el-form-item>
|
|
</el-form>
|
|
<el-alert v-if="message" type="info" :closable="false">{{ message }}</el-alert>
|
|
</el-card>
|
|
</el-main>
|
|
</el-container>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { ref } from 'vue';
|
|
import { useRouter } from 'vue-router';
|
|
import { ElMessage } from 'element-plus';
|
|
import authenticationService from '../../services/authenticationService';
|
|
|
|
const username = ref('');
|
|
const password = ref('');
|
|
const email = ref('');
|
|
const phoneNumber = ref('');
|
|
const company = ref('');
|
|
const role = ref('USER');
|
|
const verificationCode = ref('');
|
|
const message = ref('');
|
|
const router = useRouter();
|
|
|
|
const getVerificationCode = async () => {
|
|
// 模拟获取验证码
|
|
message.value = '验证码已发送。请检查您的邮箱/短信。';
|
|
};
|
|
|
|
const register = async () => {
|
|
if (!verificationCode.value) {
|
|
message.value = '验证码不能为空！';
|
|
return;
|
|
}
|
|
try {
|
|
const response = await authenticationService.register({
|
|
username: username.value,
|
|
password: password.value,
|
|
email: email.value,
|
|
phoneNumber: phoneNumber.value,
|
|
company: company.value,
|
|
role: role.value
|
|
});
|
|
message.value = response.data.message;
|
|
router.push('/login');
|
|
} catch (error) {
|
|
console.error("Registration failed:", error.response.data.message);
|
|
message.value = error.response.data.message;
|
|
}
|
|
};
|
|
|
|
const goToLogin = () => {
|
|
router.push('/login');
|
|
};
|
|
</script>
|
|
|
|
<style scoped>
|
|
.register-container {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
height: 100vh;
|
|
background-image: url('@public/background1.jpg');
|
|
background-size: cover;
|
|
background-position: center;
|
|
padding: 20px;
|
|
overflow: hidden;
|
|
width: 100%;
|
|
}
|
|
|
|
.register-card {
|
|
padding: 20px;
|
|
box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
|
|
border-radius: 8px;
|
|
background-color: white;
|
|
width: 100%;
|
|
max-width: 300px;
|
|
}
|
|
|
|
.register-form {
|
|
width: 100%;
|
|
}
|
|
|
|
.el-header h2 {
|
|
text-align: center;
|
|
margin: 0 0 20px;
|
|
}
|
|
|
|
.verification-button {
|
|
margin-top: 20px;
|
|
}
|
|
|
|
.el-alert {
|
|
margin-top: 20px;
|
|
}
|
|
</style> |