fix: 修复 AccountLogin 组件多次初始化的问题(图形验证码接口被调用 2 次)

This commit is contained in:
KAI
2024-12-08 14:24:28 +00:00
committed by Charles7c
parent 206b92c2a2
commit 6b4f0d1e99

View File

@@ -1,5 +1,5 @@
<template>
<div class="login pc">
<div v-if="isDesktop" class="login pc">
<h3 class="login-logo">
<img v-if="logo" :src="logo" alt="logo" />
<img v-else src="/logo.svg" alt="logo" />
@@ -15,13 +15,13 @@
<a-col :xs="24" :sm="12" :md="11">
<div class="login-right">
<h3 v-if="isEmailLogin" class="login-right__title">邮箱登录</h3>
<EmailLogin v-show="isEmailLogin" />
<a-tabs v-show="!isEmailLogin" class="login-right__form">
<EmailLogin v-if="isEmailLogin" />
<a-tabs v-else v-model:activeKey="activeTab" class="login-right__form">
<a-tab-pane key="1" title="账号登录">
<AccountLogin />
<component :is="AccountLogin" v-if="activeTab === '1'" />
</a-tab-pane>
<a-tab-pane key="2" title="手机号登录">
<PhoneLogin />
<component :is="PhoneLogin" v-if="activeTab === '2'" />
</a-tab-pane>
</a-tabs>
<div class="login-right__oauth">
@@ -50,7 +50,8 @@
<GiThemeBtn class="theme-btn" />
<Background />
</div>
<div class="login h5">
<div v-else class="login h5">
<div class="login-logo">
<img v-if="logo" :src="logo" alt="logo" />
<img v-else src="/logo.svg" alt="logo" />
@@ -60,13 +61,13 @@
<a-col :xs="24" :sm="12" :md="11">
<div class="login-right">
<h3 v-if="isEmailLogin" class="login-right__title">邮箱登录</h3>
<EmailLogin v-show="isEmailLogin" />
<a-tabs v-show="!isEmailLogin" class="login-right__form">
<EmailLogin v-if="isEmailLogin" />
<a-tabs v-else v-model:activeKey="activeTab" class="login-right__form">
<a-tab-pane key="1" title="账号登录">
<AccountLogin />
<component :is="AccountLogin" v-if="activeTab === '1'" />
</a-tab-pane>
<a-tab-pane key="2" title="手机号登录">
<PhoneLogin />
<component :is="PhoneLogin" v-if="activeTab === '2'" />
</a-tab-pane>
</a-tabs>
</div>
@@ -89,6 +90,7 @@
</template>
<script setup lang="ts">
import { computed, ref } from 'vue'
import Background from './components/background/index.vue'
import AccountLogin from './components/account/index.vue'
import PhoneLogin from './components/phone/index.vue'
@@ -105,6 +107,8 @@ const title = computed(() => appStore.getTitle())
const logo = computed(() => appStore.getLogo())
const isEmailLogin = ref(false)
const activeTab = ref('1')
// 切换登录模式
const toggleLoginMode = () => {
isEmailLogin.value = !isEmailLogin.value