refactor(搜索功能): 优化搜索逻辑和显示
- 新增 searchedKeyword 变量,用于存储实际搜索的关键词 - 修改搜索逻辑,将 keyword 复制到 searchedKeyword - 更新搜索结果和热门列表的显示条件 -歌单和歌手页面的搜索功能都进行了相应优化
This commit is contained in:
@@ -44,6 +44,7 @@ const loading = ref(false)
|
|||||||
|
|
||||||
// 搜索关键词
|
// 搜索关键词
|
||||||
const keyword = ref('')
|
const keyword = ref('')
|
||||||
|
const searchedKeyword = ref('')
|
||||||
|
|
||||||
// 热门歌单
|
// 热门歌单
|
||||||
const hotPlaylists = ref([])
|
const hotPlaylists = ref([])
|
||||||
@@ -82,7 +83,7 @@ const fetchPlaylists = async () => {
|
|||||||
const res = await getPlaylistList(
|
const res = await getPlaylistList(
|
||||||
currentPage.value,
|
currentPage.value,
|
||||||
pageSize.value,
|
pageSize.value,
|
||||||
keyword.value,
|
searchedKeyword.value,
|
||||||
activeType.value
|
activeType.value
|
||||||
)
|
)
|
||||||
|
|
||||||
@@ -123,6 +124,7 @@ const fetchHotPlaylists = async () => {
|
|||||||
// 处理搜索
|
// 处理搜索
|
||||||
const handleSearch = () => {
|
const handleSearch = () => {
|
||||||
currentPage.value = 1
|
currentPage.value = 1
|
||||||
|
searchedKeyword.value = keyword.value
|
||||||
fetchPlaylists()
|
fetchPlaylists()
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -243,7 +245,7 @@ onMounted(() => {
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- 热门歌单 -->
|
<!-- 热门歌单 -->
|
||||||
<div class="hot-playlists" v-if="!keyword && activeType === null && currentPage === 1">
|
<div class="hot-playlists" v-if="!searchedKeyword && activeType === null && currentPage === 1">
|
||||||
<h2>热门歌单</h2>
|
<h2>热门歌单</h2>
|
||||||
<div class="playlist-list" v-loading="loadingHot">
|
<div class="playlist-list" v-loading="loadingHot">
|
||||||
<div
|
<div
|
||||||
@@ -291,7 +293,7 @@ onMounted(() => {
|
|||||||
|
|
||||||
<!-- 歌单列表 -->
|
<!-- 歌单列表 -->
|
||||||
<div class="all-playlists">
|
<div class="all-playlists">
|
||||||
<h2 v-if="keyword">搜索结果</h2>
|
<h2 v-if="searchedKeyword">搜索结果</h2>
|
||||||
<h2 v-else-if="activeType === null && currentPage === 1">全部歌单</h2>
|
<h2 v-else-if="activeType === null && currentPage === 1">全部歌单</h2>
|
||||||
<div class="playlist-list" v-loading="loading">
|
<div class="playlist-list" v-loading="loading">
|
||||||
<div
|
<div
|
||||||
|
|||||||
@@ -30,6 +30,7 @@ const loading = ref(false)
|
|||||||
|
|
||||||
// 搜索关键词
|
// 搜索关键词
|
||||||
const keyword = ref('')
|
const keyword = ref('')
|
||||||
|
const searchedKeyword = ref('')
|
||||||
|
|
||||||
// 热门歌手
|
// 热门歌手
|
||||||
const hotSingers = ref([])
|
const hotSingers = ref([])
|
||||||
@@ -68,7 +69,7 @@ const fetchSingers = async () => {
|
|||||||
const res = await getSingerList(
|
const res = await getSingerList(
|
||||||
currentPage.value,
|
currentPage.value,
|
||||||
pageSize.value,
|
pageSize.value,
|
||||||
keyword.value,
|
searchedKeyword.value,
|
||||||
activeType.value
|
activeType.value
|
||||||
)
|
)
|
||||||
|
|
||||||
@@ -121,6 +122,7 @@ const fetchHotSingers = async () => {
|
|||||||
// 处理搜索
|
// 处理搜索
|
||||||
const handleSearch = () => {
|
const handleSearch = () => {
|
||||||
currentPage.value = 1
|
currentPage.value = 1
|
||||||
|
searchedKeyword.value = keyword.value
|
||||||
fetchSingers()
|
fetchSingers()
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -243,7 +245,7 @@ onMounted(() => {
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- 热门歌手 -->
|
<!-- 热门歌手 -->
|
||||||
<div class="hot-singers" v-if="!keyword && activeType === null && currentPage === 1">
|
<div class="hot-singers" v-if="!searchedKeyword && activeType === null && currentPage === 1">
|
||||||
<h2>热门歌手</h2>
|
<h2>热门歌手</h2>
|
||||||
<div class="singer-list" v-loading="loadingHot">
|
<div class="singer-list" v-loading="loadingHot">
|
||||||
<div
|
<div
|
||||||
@@ -277,7 +279,7 @@ onMounted(() => {
|
|||||||
|
|
||||||
<!-- 歌手列表 -->
|
<!-- 歌手列表 -->
|
||||||
<div class="all-singers">
|
<div class="all-singers">
|
||||||
<h2 v-if="keyword">搜索结果</h2>
|
<h2 v-if="searchedKeyword">搜索结果</h2>
|
||||||
<h2 v-else-if="activeType === null && currentPage === 1">全部歌手</h2>
|
<h2 v-else-if="activeType === null && currentPage === 1">全部歌手</h2>
|
||||||
<div class="singer-list" v-loading="loading">
|
<div class="singer-list" v-loading="loading">
|
||||||
<div
|
<div
|
||||||
|
|||||||
Reference in New Issue
Block a user