|
|
@@ -0,0 +1,410 @@
|
|
|
+<template>
|
|
|
+ <!-- 网页版登录页面 -->
|
|
|
+ <div class="login-content">
|
|
|
+ <!-- 登录输入框 -->
|
|
|
+ <div class="login-wrapper">
|
|
|
+ <!-- 左侧图片背景盒子 -->
|
|
|
+ <div class="login-left">
|
|
|
+ <img :src="homeBG" alt="背景图片" class="bg-image">
|
|
|
+ </div>
|
|
|
+ <!-- 右侧输入框盒子 -->
|
|
|
+ <div class="login-right">
|
|
|
+ <div class="login-input">
|
|
|
+ <span>{{ appTitle }}</span>
|
|
|
+ <el-form
|
|
|
+ ref="loginFormRef"
|
|
|
+ :model="loginForm"
|
|
|
+ :rules="rules"
|
|
|
+ label-width="0px"
|
|
|
+ class="input-item"
|
|
|
+ >
|
|
|
+ <!-- 手机号登录 -->
|
|
|
+ <el-form-item prop="phone">
|
|
|
+ <el-input
|
|
|
+ v-model="loginForm.phone"
|
|
|
+ :prefix-icon="Iphone"
|
|
|
+ placeholder="请输入手机号"
|
|
|
+ />
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item prop="password">
|
|
|
+ <el-input
|
|
|
+ v-model="loginForm.password"
|
|
|
+ class="password-input"
|
|
|
+ type="password"
|
|
|
+ :prefix-icon="Lock"
|
|
|
+ placeholder="请输入密码"
|
|
|
+ show-password
|
|
|
+ />
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item prop="confirmPassword">
|
|
|
+ <el-input
|
|
|
+ v-model="loginForm.confirmPassword"
|
|
|
+ class="password-input"
|
|
|
+ type="password"
|
|
|
+ :prefix-icon="Lock"
|
|
|
+ placeholder="请再次确认密码"
|
|
|
+ show-password
|
|
|
+ />
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item prop="inviteCode">
|
|
|
+ <el-input v-model="loginForm.inviteCode" :prefix-icon="Key" placeholder="请输入邀请码" />
|
|
|
+ </el-form-item>
|
|
|
+
|
|
|
+ <!-- 登录按钮 -->
|
|
|
+ <el-form-item>
|
|
|
+ <div class="login-btn-container">
|
|
|
+ <el-button @click="handleRegister" class="login-btn" type="primary">注册</el-button>
|
|
|
+ </div>
|
|
|
+ </el-form-item>
|
|
|
+
|
|
|
+ </el-form>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script setup>
|
|
|
+import { ref } from "vue";
|
|
|
+import { Lock, Iphone, Key } from '@element-plus/icons-vue';
|
|
|
+import { ElMessage } from 'element-plus';
|
|
|
+import homeBG from "@/assets/images/homeBG.png";
|
|
|
+import { registerSignUp } from '@/api/login/login.js';
|
|
|
+import { getTenantId } from '@/utils/loginUtils.js';
|
|
|
+
|
|
|
+// 获取环境变量
|
|
|
+const appTitle = ref("注册账号");
|
|
|
+
|
|
|
+const loginFormRef = ref(null);
|
|
|
+
|
|
|
+// 登录表单数据
|
|
|
+const loginForm = ref({
|
|
|
+ phone: "", // 手机号
|
|
|
+ password: "", // 密码
|
|
|
+ confirmPassword: "", // 确认密码
|
|
|
+ inviteCode: "", // 邀请码
|
|
|
+ rememberMe: false,
|
|
|
+});
|
|
|
+
|
|
|
+// 表单验证规则
|
|
|
+const rules = ref({
|
|
|
+ phone: [
|
|
|
+ { required: true, message: "请输入手机号", trigger: "blur" },
|
|
|
+ { pattern: /^1[3-9]\d{9}$/, message: "请输入正确的手机号格式", trigger: "blur" }
|
|
|
+ ],
|
|
|
+ password: [
|
|
|
+ { required: true, message: "请输入密码", trigger: "blur" },
|
|
|
+ { min: 6, max: 20, message: "密码长度应在6-20位之间", trigger: "blur" }
|
|
|
+ ],
|
|
|
+ confirmPassword: [
|
|
|
+ { required: true, message: "请确认密码", trigger: "blur" },
|
|
|
+ {
|
|
|
+ validator: (rule, value, callback) => {
|
|
|
+ if (value !== loginForm.value.password) {
|
|
|
+ callback(new Error("两次输入的密码不一致"));
|
|
|
+ } else {
|
|
|
+ callback();
|
|
|
+ }
|
|
|
+ },
|
|
|
+ trigger: "blur"
|
|
|
+ }
|
|
|
+ ],
|
|
|
+ inviteCode: [{ required: true, message: "请输入邀请码", trigger: "blur" }],
|
|
|
+});
|
|
|
+
|
|
|
+// 处理注册
|
|
|
+const handleRegister = async () => {
|
|
|
+ try {
|
|
|
+ // 表单验证
|
|
|
+ await loginFormRef.value.validate();
|
|
|
+ // 获取默认租户名称
|
|
|
+ const tenantName = '内部测试租户';
|
|
|
+ // 获取租户ID
|
|
|
+ const tenantId = await getTenantId(tenantName);
|
|
|
+ if (!tenantId) {
|
|
|
+ // 租户验证失败
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ // 准备请求数据
|
|
|
+ const registerData = {
|
|
|
+ username: loginForm.value.phone,
|
|
|
+ nickname: loginForm.value.phone,
|
|
|
+ password: loginForm.value.password,
|
|
|
+ inviteCode: 'RTGx3rarJo', // 写死的邀请码
|
|
|
+ rememberMe: loginForm.value.rememberMe
|
|
|
+ };
|
|
|
+ // 调用注册接口
|
|
|
+ const res = await registerSignUp({ 'Tenant-Id': tenantId },registerData);
|
|
|
+ console.log('registerSignUp response:', res);
|
|
|
+ // 注册成功处理
|
|
|
+ if (res && res.code === 200) {
|
|
|
+ ElMessage.success('注册成功，请登录');
|
|
|
+ } else {
|
|
|
+ ElMessage.error(res && res.message || '注册失败，请稍后重试');
|
|
|
+ }
|
|
|
+ } catch (error) {
|
|
|
+ console.error('注册失败:', error);
|
|
|
+ ElMessage.error('注册失败，请检查输入信息或网络连接');
|
|
|
+ }
|
|
|
+};
|
|
|
+
|
|
|
+</script>
|
|
|
+
|
|
|
+<style scoped lang="scss">
|
|
|
+@use "sass:math";
|
|
|
+// 定义rpx转换函数
|
|
|
+@function rpx($px) {
|
|
|
+ @return math.div($px, 750) * 100vw;
|
|
|
+}
|
|
|
+
|
|
|
+.login-content {
|
|
|
+ position: fixed;
|
|
|
+ top: 0;
|
|
|
+ left: 0;
|
|
|
+ right: 0;
|
|
|
+ bottom: 0;
|
|
|
+ display: flex;
|
|
|
+ justify-content: center; // 水平居中
|
|
|
+ align-items: center; // 垂直居中
|
|
|
+ background: linear-gradient(to bottom, #001169, #8a78d0);
|
|
|
+}
|
|
|
+
|
|
|
+.login-wrapper {
|
|
|
+ width: rpx(500); // 固定宽度
|
|
|
+ height: rpx(300); // 固定高度
|
|
|
+ max-width: 90%; // 响应式最大宽度
|
|
|
+ padding: 0;
|
|
|
+ border-radius: rpx(15);
|
|
|
+ box-shadow: 0 rpx(5) rpx(15) rgba(0, 0, 0, 0.3);
|
|
|
+ display: flex;
|
|
|
+ overflow: hidden;
|
|
|
+ background-color: white;
|
|
|
+}
|
|
|
+
|
|
|
+/* 左侧图片背景盒子 */
|
|
|
+.login-left {
|
|
|
+ width: 50%;
|
|
|
+ position: relative;
|
|
|
+ overflow: hidden;
|
|
|
+}
|
|
|
+
|
|
|
+/* 背景图片样式 */
|
|
|
+.bg-image {
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ object-fit: cover;
|
|
|
+}
|
|
|
+
|
|
|
+/* 右侧输入框盒子 */
|
|
|
+.login-right {
|
|
|
+ width: 50%;
|
|
|
+ padding: rpx(20);
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ align-items: center;
|
|
|
+ background-color: white;
|
|
|
+}
|
|
|
+.login-input {
|
|
|
+ width: 80%;
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ align-items: center;
|
|
|
+ flex-direction: column;
|
|
|
+ text-align: center;
|
|
|
+}
|
|
|
+
|
|
|
+
|
|
|
+.login-input span {
|
|
|
+ color: black;
|
|
|
+ font-size: rpx(12);
|
|
|
+ padding-bottom: rpx(10);
|
|
|
+ letter-spacing: rpx(1);
|
|
|
+}
|
|
|
+.input-item {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ justify-content: center;
|
|
|
+ align-items: center;
|
|
|
+ width: 100%;
|
|
|
+}
|
|
|
+.el-input ::v-deep(.el-input__wrapper) {
|
|
|
+ border-radius: rpx(5);
|
|
|
+}
|
|
|
+.input-item .el-form-item {
|
|
|
+ margin-bottom: 0;
|
|
|
+ width: 100%;
|
|
|
+}
|
|
|
+.input-item .el-input {
|
|
|
+ width: 100%;
|
|
|
+ height: rpx(22);
|
|
|
+ margin-bottom: rpx(15);
|
|
|
+ font-size: rpx(8);
|
|
|
+}
|
|
|
+.el-form-item ::v-deep(.el-form-item__error) {
|
|
|
+ top: rpx(25);
|
|
|
+ font-size: rpx(7);
|
|
|
+}
|
|
|
+
|
|
|
+/* 按钮容器，用于控制按钮位置 */
|
|
|
+.login-btn-container {
|
|
|
+ width: 100%;
|
|
|
+ display: flex;
|
|
|
+ justify-content: flex-end;
|
|
|
+}
|
|
|
+.login-btn {
|
|
|
+ width: rpx(70); /* 缩小宽度 */
|
|
|
+ height: rpx(25);
|
|
|
+ color: black;
|
|
|
+ font-size: rpx(9);
|
|
|
+ letter-spacing: rpx(5); /* 调整字间距以适应较小宽度 */
|
|
|
+ border-radius: rpx(5);
|
|
|
+ margin: 0;
|
|
|
+ border: none;
|
|
|
+ outline: none;
|
|
|
+ background: linear-gradient(to bottom, #fee78a, #ffce1b);
|
|
|
+ box-shadow: 0 rpx(4) rpx(4) rgb(0, 0, 0, 0.2);
|
|
|
+}
|
|
|
+.check-box {
|
|
|
+ width: 100%;
|
|
|
+ height: rpx(18);
|
|
|
+ margin: rpx(10) 0;
|
|
|
+ display: flex;
|
|
|
+ justify-content: flex-end;
|
|
|
+ align-items: center;
|
|
|
+}
|
|
|
+.check-box .el-checkbox {
|
|
|
+ color: white;
|
|
|
+ padding-right: rpx(10);
|
|
|
+ font-size: rpx(7);
|
|
|
+}
|
|
|
+.el-checkbox ::v-deep(.el-checkbox__label) {
|
|
|
+ font-size: rpx(7);
|
|
|
+}
|
|
|
+.el-checkbox ::v-deep(.el-checkbox__label) {
|
|
|
+ font-size: 14px;
|
|
|
+}
|
|
|
+
|
|
|
+// 移动端响应式设计
|
|
|
+@media screen and (max-width: 768px) {
|
|
|
+ .login-content {
|
|
|
+ flex-direction: column;
|
|
|
+ background: url('@/assets/images/homeBG.png') no-repeat center center fixed;
|
|
|
+ background-size: cover;
|
|
|
+ }
|
|
|
+
|
|
|
+ .bg-image-container {
|
|
|
+ position: fixed;
|
|
|
+ top: 0;
|
|
|
+ left: 0;
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ z-index: -1;
|
|
|
+ background-size: cover;
|
|
|
+ background-position: center;
|
|
|
+ }
|
|
|
+
|
|
|
+ .login-wrapper {
|
|
|
+ flex: none;
|
|
|
+ width: 70%;
|
|
|
+ margin: 0 auto;
|
|
|
+ padding: 30px;
|
|
|
+ border-radius: 15px;
|
|
|
+ position: absolute;
|
|
|
+ top: 50%;
|
|
|
+ left: 50%;
|
|
|
+ transform: translate(-50%, -50%);
|
|
|
+ min-height: 40%;
|
|
|
+ overflow-y: auto;
|
|
|
+ }
|
|
|
+
|
|
|
+ .login-left{
|
|
|
+ display: none;
|
|
|
+ }
|
|
|
+ .login-right{
|
|
|
+ width: 100%;
|
|
|
+ }
|
|
|
+
|
|
|
+ .login-input {
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ justify-content: center;
|
|
|
+ }
|
|
|
+
|
|
|
+ .login-input span {
|
|
|
+ font-size: rpx(18);
|
|
|
+ padding-bottom: rpx(20);
|
|
|
+ }
|
|
|
+
|
|
|
+ .input-item {
|
|
|
+ width: 100%;
|
|
|
+ align-items: stretch;
|
|
|
+ }
|
|
|
+
|
|
|
+ .input-item .el-input {
|
|
|
+ width: 100% !important;
|
|
|
+ max-width: none;
|
|
|
+ height: rpx(45) !important;
|
|
|
+ font-size: rpx(14) !important;
|
|
|
+ margin-bottom: rpx(25) !important;
|
|
|
+ }
|
|
|
+
|
|
|
+ .el-input ::v-deep(.el-input__wrapper) {
|
|
|
+ height: rpx(45) !important;
|
|
|
+ border-radius: rpx(15);
|
|
|
+ }
|
|
|
+
|
|
|
+ .el-input ::v-deep(.el-input__inner) {
|
|
|
+ height: rpx(45) !important;
|
|
|
+ font-size: rpx(14) !important;
|
|
|
+ }
|
|
|
+
|
|
|
+ .login-btn {
|
|
|
+ width: 40% !important;
|
|
|
+ max-width: none;
|
|
|
+ height: rpx(45) !important;
|
|
|
+ font-size: rpx(16) !important;
|
|
|
+ margin: rpx(25) 0 !important;
|
|
|
+ letter-spacing: rpx(15);
|
|
|
+ border-radius: rpx(10);
|
|
|
+ }
|
|
|
+
|
|
|
+ .check-box {
|
|
|
+ width: 100% !important;
|
|
|
+ max-width: none;
|
|
|
+ height: auto;
|
|
|
+ margin: rpx(15) 0 !important;
|
|
|
+ }
|
|
|
+
|
|
|
+ .check-box .el-checkbox {
|
|
|
+ font-size: rpx(12) !important;
|
|
|
+ }
|
|
|
+
|
|
|
+ .el-checkbox ::v-deep(.el-checkbox__label) {
|
|
|
+ font-size: rpx(12) !important;
|
|
|
+ }
|
|
|
+
|
|
|
+ .sms-code-container {
|
|
|
+ width: 100% !important;
|
|
|
+ max-width: none;
|
|
|
+ height: rpx(45) !important;
|
|
|
+ }
|
|
|
+
|
|
|
+ .sms-input {
|
|
|
+ width: calc(100% - rpx(75)) !important;
|
|
|
+ height: rpx(45) !important;
|
|
|
+ }
|
|
|
+
|
|
|
+ .get-code-btn {
|
|
|
+ width: rpx(75) !important;
|
|
|
+ height: rpx(45) !important;
|
|
|
+ font-size: rpx(10) !important;
|
|
|
+ }
|
|
|
+
|
|
|
+ .el-form-item ::v-deep(.el-form-item__error) {
|
|
|
+ top: rpx(50) !important;
|
|
|
+ font-size: rpx(10) !important;
|
|
|
+ }
|
|
|
+}
|
|
|
+</style>
|
丸子
