diff --git a/component/head-top/head-top.js b/component/head-top/head-top.js index 58e2673..0f899f4 100644 --- a/component/head-top/head-top.js +++ b/component/head-top/head-top.js @@ -1,6 +1,6 @@ // my-component.js // 引入全局 Vue 对象（因在 HTML 中通过 script 引入，Vue 已挂载到 window） -const { defineComponent, ref, onMounted, nextTick } = Vue; +const { defineComponent, ref, onMounted, onUnmounted, nextTick } = Vue; // 定义组件（直接使用模板） export const headTop = defineComponent({ @@ -13,10 +13,95 @@ export const headTop = defineComponent({ }, setup(props) { + // 轮播相关状态 + let currentIndex = ref(0); // 当前显示的关键词索引 + let carouselTimer = ref(null); // 轮播定时器 + let isPaused = ref(false); // 是否暂停轮播 + onMounted(() => { getHistorySearch(); + // 写一个函数 ，判断本地缓存有没有 wConfig 并判断 是否过一天 如果过了一天 则更新 wConfig + checkWConfig(); + + // 启动轮播 + startCarousel(); }); + // 启动轮播函数 + const startCarousel = () => { + // 清除已有的定时器 + if (carouselTimer.value) { + clearInterval(carouselTimer.value); + } + + // 设置新的定时器，每秒滚动一次 + carouselTimer.value = setInterval(() => { + if (!searchInputState.value && hotSearchWords.value.length > 1) { + // 当滚动到复制的数据部分时，进行无缝切换 + if (currentIndex.value >= hotSearchWords.value.length - 1) { + // 先滚动到复制的数据 + currentIndex.value++; + // 在下一帧，当动画完成后，立即切换回对应的数据索引位置，但不带动画 + setTimeout(() => { + if (!searchInputState.value) { + currentIndex.value = 0; + // 强制重新渲染以重置位置 + nextTick(() => { + // 继续正常滚动 + }); + } + }, 2300); + } else { + currentIndex.value++; + } + } + }, 2300); + }; + + // 暂停轮播 + const pauseCarousel = () => { + isPaused.value = true; + }; + + // 恢复轮播 + const resumeCarousel = () => { + isPaused.value = false; + }; + + // 组件卸载时清理定时器 + const onUnmounted = () => { + if (carouselTimer.value) { + clearInterval(carouselTimer.value); + } + }; + + let hotSearchWords = ref([]); + + const checkWConfig = () => { + const wConfig = JSON.parse(localStorage.getItem("wConfig")) || {}; + if (wConfig.time) { + const time = new Date(wConfig.time); + const now = new Date(); + if (now - time > 24 * 60 * 60 * 1000) getWConfig(); + else { + hotSearchWords.value = wConfig.hotSearchWords || []; + } + } else { + getWConfig(); + } + }; + + const getWConfig = () => { + ajaxGet("/v2/api/config/website").then((res) => { + if (res.code == 200) { + let data = res["data"] || {}; + hotSearchWords.value = data.hotSearchWords || {}; + data.time = new Date().toISOString(); + localStorage.setItem("wConfig", JSON.stringify(data)); + } + }); + }; + let state = ref(0); // 是否已经签到 let userInfoWinTimerCount = 0; @@ -50,19 +135,18 @@ export const headTop = defineComponent({ // console.log("page", page.value); let input = ref(""); - let defaultSearchText = ref("屯特"); let historySearchList = ref([]); // 历史搜索数据 // 获取历史搜索 const getHistorySearch = () => { const data = JSON.parse(localStorage.getItem("history-search")) || []; - console.log("data", data); historySearchList.value = data; }; // 跳转搜索 const searchEvent = (value) => { - const kw = value || input.value || defaultSearchText.value; + const kw = value || input.value || hotSearchWords.value[currentIndex.value]?.keyword || ""; + if (!kw) return; historySearchList.value.unshift(kw); historySearchList.value = [...new Set(historySearchList.value)]; if (historySearchList.value.length > 10) historySearchList.value = historySearchList.value.splice(0, 10); @@ -87,8 +171,8 @@ export const headTop = defineComponent({ }, 200); }; - return { historySearchList, searchEvent, searchInputState, searchHistoryShowState, searchInputFocus, searchInputBlur, page, pitchState, state, signIn, input, defaultSearchText }; + return { hotSearchWords, historySearchList, searchEvent, searchInputState, searchHistoryShowState, searchInputFocus, searchInputBlur, page, pitchState, state, signIn, input, currentIndex, pauseCarousel, resumeCarousel }; }, - template: `
历史搜索
{{ item }}
`, + template: `
大家都在搜：{{ item.keyword }}
大家都在搜：{{ item.keyword }}
历史搜索
{{ item }}
`, }); diff --git a/component/head-top/head-top.txt b/component/head-top/head-top.txt index f567c12..8035406 100644 --- a/component/head-top/head-top.txt +++ b/component/head-top/head-top.txt @@ -4,42 +4,22 @@
- - - +
+
大家都在搜：{{ item.keyword }}
+
大家都在搜：{{ item.keyword }}
+
+
历史搜索
{{ item }}
-
+
-
- - - - - - - - - - - - - - - -
-