diff --git a/music-qianduan/src/views/Music.vue b/music-qianduan/src/views/Music.vue index 6b7017a..f442f40 100644 --- a/music-qianduan/src/views/Music.vue +++ b/music-qianduan/src/views/Music.vue @@ -25,11 +25,42 @@ const musicTypes = ref([]) // 标签页 const activeTab = ref('all') +const hotMusicSource = ref([]) const hotMusicList = ref([]) +const latestMusicSource = ref([]) const latestMusicList = ref([]) const loadingHot = ref(false) const loadingLatest = ref(false) +const getMusicTypeId = (music) => { + return music?.typeId ?? music?.musicTypeId ?? music?.type?.id ?? null +} + +const applyMusicFilter = (list = []) => { + const normalizedKeyword = keyword.value.trim().toLowerCase() + + return list.filter((music) => { + const matchType = selectedType.value == null || getMusicTypeId(music) === selectedType.value + + if (!normalizedKeyword) { + return matchType + } + + const searchText = [ + music.name, + music.typeName, + music.album, + music.singer, + ...(Array.isArray(music.singerNames) ? music.singerNames : []) + ] + .filter(Boolean) + .join(' ') + .toLowerCase() + + return matchType && searchText.includes(normalizedKeyword) + }) +} + // 获取音乐列表 const fetchMusicList = async (params = {}) => { loading.value = true @@ -43,8 +74,6 @@ const fetchMusicList = async (params = {}) => { musicList.value = res.data.list || res.data.records || [] total.value = res.data.total || 0 - console.log('音乐列表数据:', res.data) - // 确保音乐URL和封面URL正确处理 musicList.value.forEach(music => { if (music.url) { @@ -68,6 +97,21 @@ const fetchMusicList = async (params = {}) => { } } +const updateHotMusicView = (params = {}) => { + const filteredList = applyMusicFilter(hotMusicSource.value) + const page = params.page || currentPage.value + const size = params.size || pageSize.value + + total.value = filteredList.length + const startIndex = (page - 1) * size + const endIndex = startIndex + size + hotMusicList.value = filteredList.slice(startIndex, endIndex) +} + +const updateLatestMusicView = () => { + latestMusicList.value = applyMusicFilter(latestMusicSource.value) +} + // 获取音乐类型列表 const fetchMusicTypes = async () => { try { @@ -85,28 +129,52 @@ const fetchMusicTypes = async () => { // 处理搜索 const handleSearch = () => { - if (activeTab.value !== 'all') { + currentPage.value = 1 + + if (activeTab.value === 'hot') { + updateHotMusicView({ page: 1, size: pageSize.value }) return } - currentPage.value = 1 + + if (activeTab.value === 'latest') { + updateLatestMusicView() + return + } + fetchMusicList() } const handleKeywordClear = () => { - if (activeTab.value !== 'all') { - return - } keyword.value = '' currentPage.value = 1 + + if (activeTab.value === 'hot') { + updateHotMusicView({ page: 1, size: pageSize.value }) + return + } + + if (activeTab.value === 'latest') { + updateLatestMusicView() + return + } + fetchMusicList() } // 处理类型变化 const handleTypeChange = () => { - if (activeTab.value !== 'all') { + currentPage.value = 1 + + if (activeTab.value === 'hot') { + updateHotMusicView({ page: 1, size: pageSize.value }) return } - currentPage.value = 1 + + if (activeTab.value === 'latest') { + updateLatestMusicView() + return + } + fetchMusicList() } @@ -144,25 +212,19 @@ const fetchHotMusic = async (params = {}) => { // 从缓存中获取全部50条热门音乐 const res = await getHotMusic(50) if (res.code === 200) { - const allHotMusic = res.data || [] - total.value = allHotMusic.length // 总数是50 + hotMusicSource.value = res.data || [] // 处理URL - allHotMusic.forEach(music => { + hotMusicSource.value.forEach(music => { if (music.url) music.url = processMusicUrl(music.url) if (music.cover) music.cover = processMusicUrl(music.cover) }) // 更新状态 - await updateMusicStatuses(allHotMusic) - - // 根据当前页码和每页数量进行前端分页 - const page = params.page || currentPage.value - const size = params.size || pageSize.value - const startIndex = (page - 1) * size - const endIndex = startIndex + size - hotMusicList.value = allHotMusic.slice(startIndex, endIndex) + await updateMusicStatuses(hotMusicSource.value) + // 根据筛选和分页展示 + updateHotMusicView(params) } else { ElMessage.error(res.message || '获取热门音乐失败') } @@ -180,10 +242,10 @@ const fetchLatestMusic = async () => { try { const res = await getLatestMusic(20) // 获取20首最新音乐 if (res.code === 200) { - latestMusicList.value = res.data || [] + latestMusicSource.value = res.data || [] // 处理音乐URL和封面URL - latestMusicList.value.forEach(music => { + latestMusicSource.value.forEach(music => { if (music.url) { music.url = processMusicUrl(music.url) } @@ -193,7 +255,8 @@ const fetchLatestMusic = async () => { }) // 更新状态 - updateMusicStatuses(latestMusicList.value) + await updateMusicStatuses(latestMusicSource.value) + updateLatestMusicView() } else { ElMessage.error(res.message || '获取最新音乐失败') } @@ -207,21 +270,31 @@ const fetchLatestMusic = async () => { // 切换标签页 const handleTabChange = (tab) => { - currentPage.value = 1; // 重置页码 + currentPage.value = 1 // 重置页码 if (tab.paneName === 'hot') { - fetchHotMusic(); + fetchHotMusic({ page: 1, size: pageSize.value }) } else if (tab.paneName === 'latest') { - fetchLatestMusic(); + fetchLatestMusic() } else { - fetchMusicList(); + fetchMusicList({ page: 1, size: pageSize.value }) } } - watch(keyword, (val) => { - if (val === '' && activeTab.value === 'all') { + if (val === '') { currentPage.value = 1 - fetchMusicList() + + if (activeTab.value === 'hot') { + updateHotMusicView({ page: 1, size: pageSize.value }) + return + } + + if (activeTab.value === 'latest') { + updateLatestMusicView() + return + } + + fetchMusicList({ page: 1, size: pageSize.value }) } }) @@ -236,7 +309,7 @@ onMounted(() => {