|
@@ -0,0 +1,228 @@
|
|
|
+<template>
|
|
|
+ <div class="register-container">
|
|
|
+ <!-- 背景图 -->
|
|
|
+ <img class="background-image" :src="registerbg" alt="背景图">
|
|
|
+
|
|
|
+ <!-- 登录框 -->
|
|
|
+ <div class="register-form-container">
|
|
|
+ <div class="register-box">
|
|
|
+ <el-card class="register-card" shadow="never">
|
|
|
+ <template #header>
|
|
|
+ <div class="register-header">
|
|
|
+ <img :src="loginLogo" alt="logo" class="login-logo"/>
|
|
|
+ <h2>注册账号</h2>
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+
|
|
|
+ <el-form
|
|
|
+ :model="registerForm"
|
|
|
+ :rules="registerRules"
|
|
|
+ ref="registerFormRef"
|
|
|
+ @keyup.enter="handleRegister"
|
|
|
+ >
|
|
|
+ <el-form-item prop="company" label="单位名称:" style="margin-bottom: 20px;">
|
|
|
+ <el-input
|
|
|
+ v-model="registerForm.company"
|
|
|
+ placeholder="请输入单位名称"
|
|
|
+ clearable
|
|
|
+ />
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item prop="username" label="邮箱:" style="margin-bottom: 20px;">
|
|
|
+ <el-input
|
|
|
+ v-model="registerForm.username"
|
|
|
+ placeholder="请输入用户名"
|
|
|
+ clearable
|
|
|
+ />
|
|
|
+ </el-form-item>
|
|
|
+
|
|
|
+ <el-form-item prop="password" label="密码:">
|
|
|
+ <el-input
|
|
|
+ v-model="registerForm.password"
|
|
|
+ placeholder="请输入密码"
|
|
|
+ show-password
|
|
|
+ clearable
|
|
|
+ />
|
|
|
+ </el-form-item>
|
|
|
+
|
|
|
+ <el-form-item>
|
|
|
+ <el-button
|
|
|
+ type="primary"
|
|
|
+ class="register-btn"
|
|
|
+ :loading="loading"
|
|
|
+ @click="handleRegister"
|
|
|
+ :disabled="!isverify"
|
|
|
+ >
|
|
|
+ 立 即 注 册
|
|
|
+ </el-button>
|
|
|
+ </el-form-item>
|
|
|
+ </el-form>
|
|
|
+
|
|
|
+ <div class="register-footer">
|
|
|
+ <div class="register-prompt">已有账号?点击</div>
|
|
|
+ <el-link type="primary" @click="goToLogin">登录</el-link>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ </el-card>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script setup>
|
|
|
+import { ElMessage } from 'element-plus'
|
|
|
+import router from "@/router"
|
|
|
+import { request,enPassword } from "@/utils/request"
|
|
|
+
|
|
|
+import { getToken, setToken, setUserId} from "@/utils/token"
|
|
|
+
|
|
|
+import registerbg from '@/assets/img/register-bg.png'
|
|
|
+import loginLogo from '@/assets/img/login-logo.png'
|
|
|
+// 表单引用
|
|
|
+const registerFormRef = ref(null)
|
|
|
+
|
|
|
+// 注册表单数据
|
|
|
+const registerForm = reactive({
|
|
|
+ company: '',
|
|
|
+ username: '',
|
|
|
+ password: ''
|
|
|
+})
|
|
|
+
|
|
|
+// 加载状态
|
|
|
+const loading = ref(false)
|
|
|
+
|
|
|
+const isverify = ref(false)
|
|
|
+
|
|
|
+// 表单验证规则
|
|
|
+const registerRules = reactive({
|
|
|
+ username: [
|
|
|
+ { required: true, message: '请输入用户名', trigger: 'blur' },
|
|
|
+ { min: 3, max: 18, message: '长度在 3 到 18 个字符', trigger: 'blur' }
|
|
|
+ ],
|
|
|
+ password: [
|
|
|
+ { required: true, message: '请输入密码', trigger: 'blur' },
|
|
|
+ { min: 6, max: 18, message: '长度在 6 到 18 个字符', trigger: 'blur' }
|
|
|
+ ]
|
|
|
+})
|
|
|
+
|
|
|
+// 滑动验证成功
|
|
|
+const verifySuccess = () => {
|
|
|
+ isverify.value = true
|
|
|
+}
|
|
|
+
|
|
|
+// 注册方法
|
|
|
+const handleRegister = () => {
|
|
|
+ registerFormRef.value.validate(valid => {
|
|
|
+ if (!valid) return
|
|
|
+
|
|
|
+ loading.value = true
|
|
|
+
|
|
|
+ const params = {
|
|
|
+ transCode: "A00002",
|
|
|
+ loginName: loginForm.username,
|
|
|
+ password: enPassword(loginForm.password),
|
|
|
+ type: "",
|
|
|
+ }
|
|
|
+ console.log(params)
|
|
|
+ request(params)
|
|
|
+ .then((res) => {
|
|
|
+ setToken(res.clientToken)
|
|
|
+ setUserId(res.userId)
|
|
|
+ router.push({ path: "/" })
|
|
|
+ })
|
|
|
+ .catch((err) => {
|
|
|
+ console.error('错误信息:',err);
|
|
|
+ ElMessage.error(err.returnMsg);
|
|
|
+ loading.value = false;
|
|
|
+ })
|
|
|
+ .finally(() => {
|
|
|
+ loading.value = false
|
|
|
+ });
|
|
|
+
|
|
|
+ })
|
|
|
+}
|
|
|
+</script>
|
|
|
+
|
|
|
+<style lang="scss" scoped>
|
|
|
+.register-container {
|
|
|
+ position: relative;
|
|
|
+ width: 100%;
|
|
|
+ height: 100vh;
|
|
|
+ min-width: 1200px;
|
|
|
+ min-height: 600px;
|
|
|
+ overflow: auto;
|
|
|
+}
|
|
|
+
|
|
|
+.background-image {
|
|
|
+ position: absolute;
|
|
|
+ top: 0;
|
|
|
+ left: 0;
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ object-fit: fill;
|
|
|
+ object-position: center;
|
|
|
+ z-index: 0;
|
|
|
+}
|
|
|
+
|
|
|
+.register-form-container {
|
|
|
+ position: absolute;
|
|
|
+ right: 60%;
|
|
|
+ width: 40%;
|
|
|
+ height: 100%;
|
|
|
+}
|
|
|
+
|
|
|
+.register-box {
|
|
|
+ height: 100%;
|
|
|
+ background-color: rgba(255, 255, 255, 0.6);
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ align-items: center;
|
|
|
+}
|
|
|
+
|
|
|
+.register-card {
|
|
|
+ border: none !important;
|
|
|
+ width: 70%;
|
|
|
+ background-color: transparent;
|
|
|
+ :deep(.el-card__header) {
|
|
|
+ border-bottom: none;
|
|
|
+ padding-bottom: 0;
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+.register-header {
|
|
|
+ text-align: start;
|
|
|
+ width: 75%;
|
|
|
+
|
|
|
+ h2 {
|
|
|
+ margin: 0;
|
|
|
+ font-size: 24px;
|
|
|
+ font-weight: 500;
|
|
|
+ color: #2D2D2D;
|
|
|
+ margin: 10px 0;
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+.login-logo {
|
|
|
+ width: 70px;
|
|
|
+ margin-bottom: 10px;
|
|
|
+}
|
|
|
+
|
|
|
+.register-btn {
|
|
|
+ width: 100%;
|
|
|
+ height: 42px;
|
|
|
+ margin-top: 10px;
|
|
|
+ font-size: 16px;
|
|
|
+ background-color: #2267B1;
|
|
|
+}
|
|
|
+
|
|
|
+.register-footer {
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ margin-top: 10px;
|
|
|
+}
|
|
|
+
|
|
|
+.register-prompt {
|
|
|
+ margin-right: 5px;
|
|
|
+ font-size: 13px;
|
|
|
+}
|
|
|
+</style>
|