diff --git a/src/pages/login.vue b/src/pages/login.vue index c6173fcf..a7e35551 100644 --- a/src/pages/login.vue +++ b/src/pages/login.vue @@ -34,6 +34,9 @@ const errorMessage = ref('') // 背景图片 const backgroundImageUrl = ref('') +// 所有的背景图片 +const backgroundImages = ref([]) + // 背景图片加载状态 const isImageLoaded = ref(false) @@ -43,17 +46,21 @@ const isOTP = ref(false) // 用户名称输入框 const usernameInput = ref() +// Interval定时器 +let intervalTimer: NodeJS.Timeout | null = null + // 获取背景图片 async function fetchBackgroundImage() { - api - .get('/login/wallpaper') - .then((response: any) => { - backgroundImageUrl.value = response.message - }) - .catch((error: any) => { - console.log(error) - }) + try { + backgroundImages.value = await api.get('/login/wallpapers') + if (backgroundImages.value && backgroundImages.value.length > 0) { + backgroundImageUrl.value = backgroundImages.value[0] + } + } catch (e) { + console.log(e) + } } + // 查询是否开启双重验证 const fetchOTP = debounce(async () => { const userid = usernameInput.value?.value @@ -176,7 +183,7 @@ function login() { } // 自动登录 -onMounted(() => { +onMounted(async () => { // 从Vuex Store中获取token和remember状态 const token = store.state.auth.token const remember = store.state.auth.remember @@ -186,80 +193,97 @@ onMounted(() => { router.push('/') } else { // 获取背景图片 - fetchBackgroundImage() + await fetchBackgroundImage() + + // 每隔5秒更换一次背景图片 + intervalTimer = setInterval(() => { + if (backgroundImages.value.length > 0) { + const index = Math.floor(Math.random() * backgroundImages.value.length) + backgroundImageUrl.value = backgroundImages.value[index] + } + }, 5000) } }) + +onUnmounted(() => { + if (intervalTimer) clearInterval(intervalTimer) +})