menduner/src/views/login/index.vue

<template>
  <div class="login-box">
    <div class="login-content">
      <div class="login-content-box my-10">
        <div class="login-tab">
          <v-tabs v-model="tab" align-tabs="center" color="primary" class="mb-10">
            <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 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>
            </v-window-item>
          </v-window>
        </div>
        <div class="font-size-14 tips">
          <span class="float-left color-666 cursor-pointer" v-if="tab === 2">忘记密码</span>
          <span class="float-right color-error cursor-pointer" @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="handleToUserAgreement"> [{{ $t('login.userAgreement') }}] </span>和
          <span class="color" style="cursor: pointer;" @click="handlePrivacyPolicy">[{{ $t('login.privacyPolicy') }}]</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { 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 Snackbar from '@/plugins/snackbar'
defineOptions({ name: 'login-index' })

const { t } = useI18n()
const router = useRouter()
const tab = ref(1)

// 验证码登录
const phoneRef = ref()
const passRef = ref()
const loginLoading = ref(false)
const userStore = useUserStore()

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'}
    await userStore[api](params)
    Snackbar.success(t('login.loginSuccess'))
    router.push({ path: '/recruitHome' })
  }
  finally {
    loginLoading.value = false
  }
}

// 隐私、用户协议
const handleToUserAgreement = () => {
  router.push({ path: '/userAgreement' })
}
const handlePrivacyPolicy = () => {
  router.push({ path: '/privacyPolicy' })
}
</script>

<style lang="scss" scoped>
.loginType {
  position: absolute;
  top: 16px;
  right: 0;
  color: #fff;
  padding: 4px 15px 4px 32px;
  border-radius: 8px 0 0 8px;
  background-color: #fa9c3e;
  font-size: 16px;
}
.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;
}
.login-content {
  position: absolute;
  top: 50%;
  left: 50%;
  translate: -50% -50%;
  width: 450px;
  background-color: #fff;
  border-radius: 10px;
}
.login-content-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>