添加注册页面

src/api/sys/user.ts

@@ -43,6 +43,8 @@ enum Api {
   getLoginQrcode = '/sys/getLoginQrcode',
   //监控二维码扫描状态
   getQrcodeToken = '/sys/getQrcodeToken',
+  //注册接口（新）
+  registerNewApi = '/sys/user/registerNew',
 }
 
 /**
@@ -220,3 +222,10 @@ export async function validateCasLogin(params) {
   let url = Api.validateCasLogin;
   return defHttp.get({ url: url, params });
 }
+
+/**
+ * @description: 注册接口
+ */
+export function registerNew(params) {
+  return defHttp.post({ url: Api.registerNewApi, params }, { isReturnNativeResponse: true });
+}

src/views/system/loginmini/Login.vue

@@ -15,9 +15,9 @@
       <div class="login-box">
         <div class="login-content">
           <div class="login-title">
-            登录 {{ title }}
+            {{ showLogin ? `登录 ${title}` : `注册 ${title}` }}
           </div>
-          <div class="login-form-box">
+          <div class="login-form-box" v-if="showLogin">
             <a-form ref="loginRef" :model="formData" @keyup.enter.native="loginHandleClick">
               <div class="login-account">
                 <div class="login-inputClear">
@@ -64,6 +64,77 @@
                   <a-button :loading="loginLoading" class="aui-link-login" type="primary" @click="loginHandleClick">
                     {{ t('sys.login.loginButton') }}</a-button>
                 </div>
+                <div v-if="isSohoeb2bDomain()" class="register-link" style="text-align: center; margin-top: 20px;">
+                  <a-button class="register-button" type="default" @click="handleRegisterClick">
+                    没有账号？立即注册
+                  </a-button>
+                </div>
+              </div>
+            </a-form>
+          </div>
+          <div class="login-form-box" v-else>
+            <a-form ref="registerRef" :model="registerData">
+              <div class="login-account">
+                <div class="login-inputClear">
+                  <div class="login-label">
+                    <span>用户名<span style="color: red">*</span></span>
+                  </div>
+                  <a-form-item>
+                    <a-input class="auto-fill" style="padding: 0 15px;font-size: 14px;" placeholder="请输入用户名" v-model:value="registerData.username" />
+                  </a-form-item>
+                </div>
+                <div class="login-inputClear">
+                  <div class="login-label">
+                    <span>企业全称<span style="color: red">*</span></span>
+                  </div>
+                  <a-form-item>
+                    <a-input class="auto-fill" style="padding: 0 15px;font-size: 14px;" placeholder="请输入企业全称" v-model:value="registerData.companyName" />
+                  </a-form-item>
+                </div>
+                <div class="login-inputClear">
+                  <div class="login-label">
+                    <span>邮箱<span style="color: red">*</span></span>
+                  </div>
+                  <a-form-item>
+                    <a-input class="auto-fill" style="padding: 0 15px;font-size: 14px;" type="email" placeholder="请输入邮箱" v-model:value="registerData.email" />
+                  </a-form-item>
+                </div>
+                <div class="login-inputClear">
+                  <div class="login-label">
+                    <span>手机号码</span>
+                  </div>
+                  <a-form-item>
+                    <a-input class="auto-fill" style="padding: 0 15px;font-size: 14px;" placeholder="请输入手机号码（选填）" v-model:value="registerData.phone" autocomplete="new-phone" />
+                  </a-form-item>
+                </div>
+                <div class="login-inputClear">
+                  <div class="login-label">
+                    <span>密码<span style="color: red">*</span></span>
+                  </div>
+                  <a-form-item>
+                    <a-input class="auto-fill" style="padding: 0 15px;font-size: 14px;" type="password" placeholder="请输入密码" v-model:value="registerData.password" autocomplete="new-password" />
+                  </a-form-item>
+                </div>
+                <div class="login-inputClear">
+                  <div class="login-label">
+                    <span>确认密码<span style="color: red">*</span></span>
+                  </div>
+                  <a-form-item>
+                    <a-input class="auto-fill" style="padding: 0 15px;font-size: 14px;" type="password" placeholder="请再次输入密码" v-model:value="registerData.confirmPassword" />
+                  </a-form-item>
+                </div>
+              </div>
+              <div class="aui-formButton">
+                <div class="aui-flex">
+                  <a-button class="aui-link-login" type="primary" @click="handleRegisterSubmit">
+                    注册
+                  </a-button>
+                </div>
+                <div class="register-link" style="text-align: center; margin-top: 20px;">
+                  <a-button class="register-button" type="default" @click="showLogin = true">
+                    已有账号？立即登录
+                  </a-button>
+                </div>
               </div>
             </a-form>
           </div>
@@ -73,7 +144,7 @@
 
 </template>
 <script lang="ts" setup name="login-mini">
-import { getCodeInfo } from '/@/api/sys/user';
+import { getCodeInfo, registerNew } from '/@/api/sys/user';
 import { computed, onMounted, reactive, ref, toRaw } from 'vue';
 import codeImg from '/@/assets/images/checkcode.png';
 import { useUserStore } from '/@/store/modules/user';
@@ -84,6 +155,7 @@ import AdweblogoImg from '/@/assets/loginmini/icon/adweb-logo.png';
 import { useDesign } from "/@/hooks/web/useDesign";
 import sohoImage from '/@/assets/loginmini/icon/soho-bg.jpg'; // Import the first background image
 import adwebImage from '/@/assets/loginmini/icon/adweb-bg.jpg'; // Import the alternative background image
+import { useRouter } from 'vue-router';
 
 const { prefixCls } = useDesign('mini-login');
 const { notification, createMessage } = useMessage();
@@ -95,6 +167,8 @@ const randCodeData = reactive<any>({
   checkKey: null,
 });
 
+const router = useRouter();
+
 // TODO:: 待域名申请
 const isSohoeb2bDomain = () => window.location.hostname.includes('sohoeb2b');
 
@@ -140,6 +214,17 @@ const formData = reactive<any>({
 const loginRef = ref();
 const loginLoading = ref<boolean>(false);
 
+const showLogin = ref(true); // Add this to control form visibility
+
+const registerData = reactive({
+  username: '',
+  companyName: '',
+  email: '',
+  phone: '',
+  password: '',
+  confirmPassword: ''
+});
+
 /**
  * 获取验证码
  */
@@ -204,6 +289,80 @@ async function accountLogin() {
   }
 }
 
+function handleRegisterClick() {
+  Object.assign(registerData, {
+    username: '',
+    companyName: '',
+    email: '',
+    phone: '',
+    password: '',
+    confirmPassword: ''
+  });
+  showLogin.value = false;
+}
+
+async function handleRegisterSubmit() {
+  // Validate required fields
+  if (!registerData.username) {
+    createMessage.warn('用户名不能为空');
+    return;
+  }
+  if (!registerData.companyName) {
+    createMessage.warn('企业全称不能为空');
+    return;
+  }
+  if (!registerData.email) {
+    createMessage.warn('邮箱不能为空');
+    return;
+  }
+  if (!registerData.password) {
+    createMessage.warn('密码不能为空');
+    return;
+  }
+  if (!registerData.confirmPassword) {
+    createMessage.warn('请再次输入密码');
+    return;
+  }
+
+  // Validate email format
+  const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
+  if (!emailRegex.test(registerData.email)) {
+    createMessage.warn('请输入有效的邮箱地址');
+    return;
+  }
+
+  // Validate password match
+  if (registerData.password !== registerData.confirmPassword) {
+    createMessage.warn('两次输入的密码不一致');
+    return;
+  }
+
+  // Validate password strength (optional)
+  if (registerData.password.length < 8) {
+    createMessage.warn('密码长度至少为8位');
+    return;
+  }
+
+  registerNew(registerData)
+  .then(response => {
+    console.log(response)
+    if (response.data.code === 200) {
+    
+      createMessage.success(response.data.message || '注册成功');
+      showLogin.value = true; // Switch back to login form
+    } else {
+      createMessage.error(response.data.message || '注册失败，请稍后重试');
+    }
+  })
+  .catch(error => {
+    if (error.response && error.response.data) {
+      createMessage.error(error.response.data.message || '注册失败，请稍后重试');
+    } else {
+      createMessage.error(error.message || '注册失败，请稍后重试');
+    }
+  });
+}
+
 onMounted(() => {
   //加载验证码
   handleChangeCheckCode();
@@ -271,6 +430,10 @@ onMounted(() => {
     background-position: center;
     background-repeat: no-repeat;
   }
+  .login-form-box {
+    width: 350px;
+    margin: 0 auto;
+  }
 </style>
 
 <style lang="less">
@@ -365,4 +528,31 @@ html[data-theme='dark'] {
 
 }
 
+.register-link a {
+  color: #1573e9;
+  text-decoration: none;
+  font-size: 14px;
+}
+
+.register-link a:hover {
+  text-decoration: underline;
+}
+
+.register-button {
+  width: 100%;
+  height: 42px;
+  border-radius: 8px;
+  margin-top: 15px;
+  background: #fff;
+  border: 1px solid #1573e9;
+  color: #1573e9;
+  font-size: 14px;
+}
+
+.register-button:hover {
+  background: #f0f7ff;
+  border-color: #115cbf;
+  color: #115cbf;
+}
+
 </style>