企业和个人登录

src/views/login/components/passwordPage.vue

@@ -1,6 +1,6 @@
 <template>
   <v-form ref="passwordForm" @submit.prevent>
-    <v-text-field v-model="loginData.phone" :disabled="props.phoneDisabled" :placeholder="placeholder ? placeholder : '请输入手机号码（企业请输入邮箱登录）'" color="primary" 
+    <v-text-field v-model="loginData.phone" :disabled="props.phoneDisabled" :placeholder="placeholder ? placeholder : '请输入手机号码'" color="primary" 
     variant="outlined" density="compact" :rules="phoneRules" validate-on="input" prepend-inner-icon="mdi-cellphone" >
       <!-- <template v-slot:prepend-inner>
         <span class="d-flex">
@@ -47,7 +47,7 @@ const emits = defineEmits(['handleEnter'])
 const phoneRules = ref([
   value => {
     if (value) return true
-    return props.placeholder ? props.placeholder : '请输入手机号码或邮箱'
+    return props.placeholder ? props.placeholder : '请输入手机号码'
   }
 ])
 
@@ -78,7 +78,7 @@ const loginData = reactive({
 
 // 设置默认账号密码便于开发快捷登录
 if (window.location.hostname === 'localhost' || window.location.hostname === '192.168.3.152') {
-  loginData.phone = '13229740092'
+  loginData.phone = props.validEmail ? '1687284007@qq.com' : '13229740092'
   loginData.password = 'Citu123456'
 }
 

src/views/login/index.vue

@@ -5,8 +5,15 @@
       <!-- <div class="text-end pr-5 pt-5">
         <span class="color-error cursor-pointer text-decoration-underline" @click="router.push('/register/selected')">还没有登录账户？去注册</span>
       </div> -->
+      <div class="login-change" @click="handleChangeLogin">{{ isEnterpriseLogin ? '切换个人登录' : '切换企业登录' }}</div>
       <div class="login-content-box my-10">
-        <div class="login-tab">
+        <div v-show="isEnterpriseLogin" class="login-tab">
+          <v-tabs v-model="tab1" align-tabs="center" color="primary" class="mb-10">
+            <v-tab :value="1">企业邮箱登录</v-tab>
+          </v-tabs>
+          <passwordFrom ref="passRef" placeholder="请输入企业邮箱" :validEmail="true" @handleEnter="handleLogin"></passwordFrom>
+        </div>
+        <div v-show="!isEnterpriseLogin" class="login-tab">
           <v-tabs v-model="tab" align-tabs="center" color="primary" class="mb-10" @update:modelValue="tabChange">
             <v-tab :value="1">验证码</v-tab>
             <v-tab :value="2">账号</v-tab>
@@ -51,7 +58,7 @@
 
 <script setup>
 defineOptions({ name: 'login-index' })
-import { ref } from 'vue'
+import { nextTick, ref } from 'vue'
 import passwordFrom from './components/passwordPage.vue'
 import phoneFrom from '@/components/VerificationCode'
 import { useUserStore } from '@/store/user'
@@ -68,6 +75,15 @@ import navBar from '@/layout/personal/navBar.vue'
 const { t } = useI18n()
 const router = useRouter()
 const tab = ref(1)
+const tab1 = ref(1)
+const isEnterpriseLogin = ref(false)
+
+const handleChangeLogin = () => {
+  isEnterpriseLogin.value = !isEnterpriseLogin.value
+  nextTick(() => {
+    tab.value = isEnterpriseLogin.value ? 2 : 1 // 为了验证邮箱validate
+  })
+}
 
 // 验证码登录
 const phoneRef = ref()
@@ -95,9 +111,10 @@ const handleLogin = async () => {
     else { params = { ...passRef.value.loginData }; api = 'handlePasswordLogin'}
     
     // 邮箱为企业招聘， 手机号为个人求职
-    if (tab.value === 2) {
+    if (isEnterpriseLogin.value) {
       const pattern = /^(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/
       const isEnterprise = pattern.test(params.phone)
+      if (!isEnterprise) return // 选中企业登录但输入内容非邮箱
       params.isEnterprise = isEnterprise
     }
     await userStore[api](params)
@@ -139,11 +156,11 @@ const handleLogin = async () => {
 // }
 
 // const showQrCode = ref(false)
-// const tabChange = (val) => {
-//   if (val === 3) {
-//     getSocialAuthRedirect()
-//   }
-// }
+const tabChange = (val) => {
+  if (val === 3) {
+    // getSocialAuthRedirect()
+  }
+}
 
 </script>
 
@@ -159,6 +176,23 @@ const handleLogin = async () => {
   position: absolute;
   top: 0;
 }
+.login-change {
+  position: absolute;
+  top: 0;
+  right: 0;
+  padding: 15px 44px;
+  text-decoration: underline;
+  color: orange; 
+  cursor: pointer;
+  font-weight: 400;
+  &:hover {
+    text-decoration: underline;
+    color: #fbb93e; 
+  }
+  // width: 450px;
+  // background-color: #fff;
+  // border-radius: 10px;
+}
 .login-content {
   position: absolute;
   top: 50%;