登录页加上轮播及关于门墩页面

src/views/login/index copy.vue

@@ -0,0 +1,229 @@
+<template>
+  <div class="login-box">
+    <navBar :showLoginBtn="false" class="navBar"></navBar>
+    <div class="login-content">
+      <!-- <div>123</div> -->
+      <div class="login-card">
+        <div class="login-change" @click="handleChangeLogin">{{ isEnterpriseLogin ? '切换个人登录' : '切换企业登录' }}</div>
+        <div class="login-card-box my-10">
+          <!-- 企业邮箱登录 -->
+          <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>
+              <!-- <v-tab :value="3">微信</v-tab> -->
+            </v-tabs>
+            <v-window v-model="tab">
+                <!-- 验证码登录 -->
+              <v-window-item :value="1">
+                <phoneFrom ref="phoneRef" @handleEnter="handleLogin"></phoneFrom>
+              </v-window-item>
+                <!-- 账号密码登录 -->
+              <v-window-item :value="2">
+                <passwordFrom ref="passRef" @handleEnter="handleLogin"></passwordFrom>
+              </v-window-item>
+              <!-- <v-window-item :value="3">
+                <div v-if="showQrCode" class="d-flex align-center flex-column">
+                  <span class="text-decoration-underline">微信扫描二维码进行登录</span>
+                  <v-img src="https://minio.citupro.com/dev/menduner/login-qrCode.png" width="150" height="150"></v-img>
+                </div>
+                <div v-else style="height: 150px; line-height: 150px; text-align: center;">
+                  加载中 . . .
+                </div>
+              </v-window-item> -->
+            </v-window>
+          </div>
+          <div class="font-size-14 tips">
+            <span class="float-left color-666 cursor-pointer" v-if="tab === 2 && !isEnterpriseLogin" @click="router.push('/forgotPassword')">忘记密码</span>
+            <span class="float-right color-error cursor-pointer text-decoration-underline" @click="router.push('/register/selected')">还没有登录账户？去注册</span>
+          </div>
+          <v-btn :loading="loginLoading" color="primary" class="white--text mt-5" min-width="350" @click="handleLogin">
+            {{ $t('login.login') }}
+          </v-btn>
+          <div class="login-tips mt-3">
+            {{ $t('login.agreeLogin') }}
+            <span class="color" style="cursor: pointer;" @click="router.push('/userAgreement')"> [{{ $t('login.userAgreement') }}] </span>和
+            <span class="color" style="cursor: pointer;" @click="router.push('/privacyPolicy')">[{{ $t('login.privacyPolicy') }}]</span>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+defineOptions({ name: 'login-index' })
+import { nextTick, ref } from 'vue'
+import passwordFrom from './components/passwordPage.vue'
+import phoneFrom from '@/components/VerificationCode'
+import { useUserStore } from '@/store/user'
+import { useRouter } from 'vue-router'
+import { useI18n } from '@/hooks/web/useI18n'
+import {
+  getEnterpriseRegisterApply,
+  // socialAuthRedirect,
+} from '@/api/common'
+import Snackbar from '@/plugins/snackbar'
+import Confirm from '@/plugins/confirm'
+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()
+const passRef = ref()
+const loginLoading = ref(false)
+const userStore = useUserStore()
+
+const handleCheckEnterprise = async () => {
+  const data = await getEnterpriseRegisterApply(passRef.value.loginData.phone)
+  if (data && Object.keys(data).length) {
+    // 查看申请状态
+    localStorage.setItem('entRegisterData', JSON.stringify(data))
+    localStorage.setItem('loginAccount', data.phone)
+    router.push({ path: '/recruit/entRegister/inReview', query: { type: 'noLoginToRegister', noLogin: true } })
+  }
+}
+
+const handleLogin = async () => {
+  const { valid } = tab.value === 1 ? await phoneRef.value.phoneForm.validate() : await passRef.value.passwordForm.validate()
+  if (!valid) return
+  loginLoading.value = true
+  try {
+    let params, api = {}
+    if (tab.value === 1) { params = { ...phoneRef.value.loginData }; api = 'handleSmsLogin'}
+    else { params = { ...passRef.value.loginData }; api = 'handlePasswordLogin'}
+    
+    // 邮箱为企业招聘， 手机号为个人求职
+    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)
+    // 跳转
+    if (params.isEnterprise) return // 企业邮箱登录
+    else localStorage.setItem('simpleCompleteDialogHaveBeenShow', true) // 个人登录简易基本信息填写弹窗open-status
+    Snackbar.success(t('login.loginSuccess'))
+    router.push({ path: '/recruitHome' })
+
+  } catch (err) {
+    if (!err.code) return
+    // 企业注册申请中
+    if (err.code === 1100021016) {
+      handleCheckEnterprise()
+      return
+    }
+    // 登录未注册过的账号跳转注册
+    const text = err.code === 1100016002 ? '您的手机号还未注册过' : '您的邮箱还未注册过'
+    Confirm('系统提示',  `${text},去注册？`, {
+      cancelCallback: true
+    }).then(() => {
+      localStorage.setItem('loginAccount', tab.value === 1 ? phoneRef.value.loginData.phone : passRef.value.loginData.phone)
+      router.push(err.code === 1100016002 ? '/register/person?type=noLoginToRegister' : '/register/company?type=noLoginToRegister')
+    })
+  } finally {
+    loginLoading.value = false
+  }
+}
+
+
+// const getSocialAuthRedirect = async () => {
+//   const params = {
+//     type: '34',
+//     redirectUri: 'https://www.baidu.com'
+//   }
+//   const res = await socialAuthRedirect(params)
+//   const otherUrl = res?.url
+//   if (otherUrl) window.open(otherUrl)
+// }
+
+// const showQrCode = ref(false)
+const tabChange = (val) => {
+  if (val === 3) {
+    // getSocialAuthRedirect()
+  }
+}
+
+</script>
+
+<style lang="scss" scoped>
+.login-box {
+  position: relative;
+  width: 100%;
+  height: 100%;
+  background-image: url('https://www.mendunerhr.com/images/userfiles/92d7e4a755e2428b94aab3636d5047f3/images/recruitment/adImages/2018/11/1920x940.jpg');
+  background-size: cover;
+}
+.navBar {
+  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%;
+  left: 50%;
+  translate: -50% -50%;
+}
+.login-card {
+  position: relative;
+  width: 450px;
+  background-color: #fff;
+  border-radius: 10px;
+}
+.login-card-box {
+  padding: 0 50px;
+}
+.left {
+  display: flex;
+}
+.login-tips {
+  width: 100%;
+  font-size: 12px;
+  text-align: center;
+}
+.tips {
+  span:hover {
+    text-decoration: underline;
+  }
+}
+.color {
+  color: var(--v-primary-base); 
+}
+</style>

src/views/login/index.vue

@@ -1,59 +1,70 @@
 <template>
-  <div class="login-box">
-    <navBar :showLoginBtn="false" class="navBar"></navBar>
-    <div class="login-content">
-      <!-- <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 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>
-            <!-- <v-tab :value="3">微信</v-tab> -->
-          </v-tabs>
-          <v-window v-model="tab">
-              <!-- 验证码登录 -->
-            <v-window-item :value="1">
-              <phoneFrom ref="phoneRef" @handleEnter="handleLogin"></phoneFrom>
-            </v-window-item>
-              <!-- 账号密码登录 -->
-            <v-window-item :value="2">
-              <passwordFrom ref="passRef" @handleEnter="handleLogin"></passwordFrom>
-            </v-window-item>
-            <!-- <v-window-item :value="3">
-              <div v-if="showQrCode" class="d-flex align-center flex-column">
-                <span class="text-decoration-underline">微信扫描二维码进行登录</span>
-                <v-img src="https://minio.citupro.com/dev/menduner/login-qrCode.png" width="150" height="150"></v-img>
-              </div>
-              <div v-else style="height: 150px; line-height: 150px; text-align: center;">
-                加载中 . . .
+  <div class="box">
+    <div class="content">
+      <div class="login-content">
+        <v-card v-if="props.showCarousel" height="392px" class="mr-3" style="width: 792px; border-radius: 0px;">
+          <v-carousel show-arrows="hover" cycle>
+            <v-carousel-item v-for="(item, i) in carouselList" :key="i">
+              <div style="height: 392px; overflow: hidden;">
+                <v-img :src="item.src" cover style="height: 100%; overflow: hidden;"></v-img>
               </div>
-            </v-window-item> -->
-          </v-window>
-        </div>
-        <div class="font-size-14 tips">
-          <span class="float-left color-666 cursor-pointer" v-if="tab === 2 && !isEnterpriseLogin" @click="router.push('/forgotPassword')">忘记密码</span>
-          <span class="float-right color-error cursor-pointer text-decoration-underline" @click="router.push('/register/selected')">还没有登录账户？去注册</span>
-        </div>
-        <v-btn :loading="loginLoading" color="primary" class="white--text mt-5" min-width="350" @click="handleLogin">
-          {{ $t('login.login') }}
-        </v-btn>
-        <div class="login-tips mt-3">
-          {{ $t('login.agreeLogin') }}
-          <span class="color" style="cursor: pointer;" @click="router.push('/userAgreement')"> [{{ $t('login.userAgreement') }}] </span>和
-          <span class="color" style="cursor: pointer;" @click="router.push('/privacyPolicy')">[{{ $t('login.privacyPolicy') }}]</span>
+            </v-carousel-item>
+          </v-carousel>
+        </v-card>
+        <div class="login-card">
+          <div class="login-change" @click="handleChangeLogin">{{ isEnterpriseLogin ? '切换个人登录' : '切换企业登录' }}</div>
+          <!-- 企业邮箱登录 -->
+          <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>
+              <!-- <v-tab :value="3">微信</v-tab> -->
+            </v-tabs>
+            <v-window v-model="tab">
+                <!-- 验证码登录 -->
+              <v-window-item :value="1">
+                <phoneFrom ref="phoneRef" @handleEnter="handleLogin"></phoneFrom>
+              </v-window-item>
+                <!-- 账号密码登录 -->
+              <v-window-item :value="2">
+                <passwordFrom ref="passRef" @handleEnter="handleLogin"></passwordFrom>
+              </v-window-item>
+              <!-- <v-window-item :value="3">
+                <div v-if="showQrCode" class="d-flex align-center flex-column">
+                  <span class="text-decoration-underline">微信扫描二维码进行登录</span>
+                  <v-img src="https://minio.citupro.com/dev/menduner/login-qrCode.png" width="150" height="150"></v-img>
+                </div>
+                <div v-else style="height: 150px; line-height: 150px; text-align: center;">
+                  加载中 . . .
+                </div>
+              </v-window-item> -->
+            </v-window>
+          </div>
+          <div class="font-size-14 tips">
+            <span class="float-left color-666 cursor-pointer" v-if="tab === 2 && !isEnterpriseLogin" @click="router.push('/forgotPassword')">忘记密码</span>
+            <span class="float-right color-error cursor-pointer text-decoration-underline" @click="router.push('/register/selected')">还没有登录账户？去注册</span>
+          </div>
+          <v-btn :loading="loginLoading" color="primary" class="white--text mt-5" min-width="350" @click="handleLogin">
+            {{ $t('login.login') }}
+          </v-btn>
+          <div class="login-tips mt-3">
+              {{ $t('login.agreeLogin') }}
+              <span class="color" style="cursor: pointer;" @click="router.push('/userAgreement')"> [{{ $t('login.userAgreement') }}] </span>和
+              <span class="color" style="cursor: pointer;" @click="router.push('/privacyPolicy')">[{{ $t('login.privacyPolicy') }}]</span>
+          </div>
         </div>
       </div>
+      <div class="aboutBox">
+        <about></about>
+      </div>
+      <navBar :showLoginBtn="false" class="navBar"></navBar>
     </div>
   </div>
 </template>
@@ -73,6 +84,14 @@ import {
 import Snackbar from '@/plugins/snackbar'
 import Confirm from '@/plugins/confirm'
 import navBar from '@/layout/personal/navBar.vue'
+import about from '@/views/about/index.vue'
+
+const props = defineProps({
+  showCarousel: {
+    type: Boolean,
+    default: true
+  }
+})
 
 const { t } = useI18n()
 const router = useRouter()
@@ -164,19 +183,40 @@ const tabChange = (val) => {
   }
 }
 
+// 轮播广告 // 轮播图片
+const carouselList = ref([
+  { src: 'https://minio.citupro.com/dev/menduner/preferredGroup/IHG-banner-new.gif' },
+  { src: 'https://minio.citupro.com/dev/menduner/preferredGroup/Hilton.jpg'},
+  { src: 'https://minio.citupro.com/dev/menduner/preferredGroup/SWISS-HOTEL-MANAGEMENT-SCHOOL-MBA.jpg'},
+  { src: 'https://minio.citupro.com/dev/menduner/preferredGroup/Hong-Kong-Polytechnic-University-banner.jpg' }
+])
+
 </script>
 
 <style lang="scss" scoped>
-.login-box {
+.box {
   position: relative;
   width: 100%;
-  height: 100%;
+  height: 100vh;
   background-image: url('https://www.mendunerhr.com/images/userfiles/92d7e4a755e2428b94aab3636d5047f3/images/recruitment/adImages/2018/11/1920x940.jpg');
   background-size: cover;
+  overflow: hidden;
+  .navBar {
+    position: absolute;
+    top: 0;
+  }
 }
-.navBar {
-  position: absolute;
-  top: 0;
+.content {
+  width: 100%;
+  height: 100%;
+  overflow-y: auto;
+}
+.login-content {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  height: 86vh;
 }
 .login-change {
   position: absolute;
@@ -191,21 +231,13 @@ const tabChange = (val) => {
     text-decoration: underline;
     color: #fbb93e; 
   }
-  // width: 450px;
-  // background-color: #fff;
-  // border-radius: 10px;
 }
-.login-content {
-  position: absolute;
-  top: 50%;
-  left: 50%;
-  translate: -50% -50%;
+.login-card {
+  position: relative;
   width: 450px;
   background-color: #fff;
-  border-radius: 10px;
-}
-.login-content-box {
-  padding: 0 50px;
+  border-radius: 0px;
+  padding: 36px 50px;
 }
 .left {
   display: flex;
@@ -223,4 +255,9 @@ const tabChange = (val) => {
 .color {
   color: var(--v-primary-base); 
 }
+
+.aboutBox {
+  width: 100%;
+  // overflow-x: auto;
+}
 </style>