menduner/src/views/login/index.vue

<template>
  <div class="login-box">
    <div class="login-content">
      <div class="login-header mt-1 ml-1">
        <div class="left">
          <div ref="phone" :class="['left-qrCode', {'phone-switch': isPhone}]" @click="handlePhone">
            <div class="switch-tip">
              {{ isPhone ? '短信、密码登录/注册' : '微信扫码快速登录' }}
            </div>
          </div>
        </div>
        <div class="right mr-2 mt-3" v-if="showClose">
          <v-icon color="grey" size="30">mdi-close</v-icon>
        </div>
      </div>
      <div class="login-content-box mt-5">
        <div v-if="!isPhone" class="login-tab">
          <v-tabs v-model="tab" align-tabs="center" color="primary">
            <v-tab :value="1">短信登录</v-tab>
            <v-tab :value="2">密码登录</v-tab>
          </v-tabs>
          <v-window v-model="tab" class="mt-9">
              <!-- 验证码登录 -->
            <v-window-item :value="1">
              <phoneFrom ref="phoneRef"></phoneFrom>
            </v-window-item>
              <!-- 账号密码登录 -->
            <v-window-item :value="2">
              <passwordFrom ref="passRef"></passwordFrom>
            </v-window-item>
          </v-window>
        </div>
        <div v-else>
          <!-- 微信扫码登录 -->
          <qr-code></qr-code>
        </div>
        <v-btn v-if="!isPhone" :loading="loginLoading" color="primary" class="white--text mt-5" min-width="350" @click="handleLogin">
          {{ tab === 1 ? $t('login.register') : $t('login.login') }}
        </v-btn>
        <div class="login-tips mt-3">
          登录/注册即代表您同意 
          <span class="color" style="cursor: pointer;" @click="handleToUserAgreement">[用户协议]</span>
          <span class="color" style="cursor: pointer;" @click="handlePrivacyPolicy">[隐私政策]</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import passwordFrom from './components/passwordPage.vue'
import phoneFrom from '@/components/VerificationCode'
import qrCode from './components/qrCode.vue'

import { userLocaleStore } from '@/store/user'
import { useRouter } from 'vue-router'
import Snackbar from '@/plugins/snackbar'
defineOptions({ name: 'login-index' })

const router = useRouter()

const phone = ref()
let isPhone = ref(false)
const handlePhone = () => {
  isPhone.value = !isPhone.value
  phone.value.style.backgroundPosition = isPhone.value ? '0 -80px' : '0 0'
}
const tab = ref(1)
const showClose = ref(false)

// 验证码登录
const phoneRef = ref()
const passRef = ref()
const loginLoading = ref(false)
const userStore = userLocaleStore()
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 {
    if (tab.value === 1) {
      await userStore.handleSmsLogin(phoneRef.value.loginData)
    } else {
      await userStore.handlePasswordLogin(passRef.value.loginData)
    }
    Snackbar.success('登录成功')
    router.push({ path: '/home' })
  }
  finally {
    loginLoading.value = false
  }
}

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

<style lang="scss" scoped>
.login-box {
  position: relative;
  width: 100%;
  height: 100%;
  background-image: url('https://www.menduner.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;
  height: 430px;
  background-color: #fff;
  border-radius: 10px;
}
.login-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 40px;
}
.login-content-box {
  padding: 0 50px;
}
.left {
  display: flex;
}
.left-qrCode {
  position: absolute;
  left: 8px;
  top: 8px;
  width: 40px;
  height: 40px;
  cursor: pointer;
  background: url('../../assets/login.png') 0 0/40px auto no-repeat;
}
.left-qrCode:hover {
  background-position: 0 -40px !important;
}
.left-qrCode.phone-switch {
  background-position: 0 -80px !important;
}
.left-qrCode.phone-switch:hover {
  background-position: 0 -120px !important;
}
.switch-tip {
  position: absolute;
  left: 60px;
  top: 4px;
  padding: 0 14px;
  border-radius: 4px;
  font-size: 12px;
  color: #666;
  line-height: 32px;
  text-align: center;
  background-color: #fff;
  box-shadow: 0 6px 13px 0 rgba(0,0,0,.1);
  white-space: nowrap;
  &::before {
    content: '';
    position: absolute;
    left: -5px;
    top: 50%;
    transform: translateY(-50%) rotate(45deg);
    width: 10px;
    height: 10px;
    background-color: #fff;
    box-shadow: 0 6px 13px 0 rgba(0,0,0,.1);
  }
}
.login-tips {
  width: 100%;
  font-size: 12px;
  text-align: center;
}

.color {
  color: var(--v-primary-base); 
}
</style>