From ecdcb040ee7fc23975383bfc1663019f49339755 Mon Sep 17 00:00:00 2001 From: lyswhut Date: Sat, 15 Feb 2020 12:59:35 +0800 Subject: [PATCH] =?UTF-8?q?=E4=BC=98=E5=8C=96=E5=88=97=E8=A1=A8=E5=8A=A0?= =?UTF-8?q?=E8=BD=BD=E4=BA=A4=E4=BA=92?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/renderer/store/modules/songList.js | 8 +++- src/renderer/views/SongList.vue | 57 +++++++++++++++++++------- 2 files changed, 49 insertions(+), 16 deletions(-) diff --git a/src/renderer/store/modules/songList.js b/src/renderer/store/modules/songList.js index 36ee4058..237bcd2c 100644 --- a/src/renderer/store/modules/songList.js +++ b/src/renderer/store/modules/songList.js @@ -64,7 +64,9 @@ const actions = { // console.log(sortId) let key = `slist__${source}__${sortId}__${tabId}__${page}` if (state.list.list.length && state.list.key == key) return - return (cache.has(key) ? Promise.resolve(cache.get(key)) : music[source].songList.getList(sortId, tabId, page)).then(result => commit('setList', { result, key, page })) + if (cache.has(key)) return Promise.resolve(cache.get(key)).then(result => commit('setList', { result, key, page })) + commit('clearList') + return music[source].songList.getList(sortId, tabId, page).then(result => commit('setList', { result, key, page })) }, getListDetail({ state, rootState, commit }, { id, page }) { let source = rootState.setting.songList.source @@ -108,6 +110,10 @@ const mutations = { setTags(state, { tags, source }) { state.tags[source] = tags }, + clearList(state) { + state.list.list = [] + state.list.total = 0 + }, setList(state, { result, key, page }) { state.list.list = result.list state.list.total = result.total diff --git a/src/renderer/views/SongList.vue b/src/renderer/views/SongList.vue index 2bed1b89..abcade1a 100644 --- a/src/renderer/views/SongList.vue +++ b/src/renderer/views/SongList.vue @@ -24,22 +24,27 @@ material-select(:class="$style.select" :list="sourceInfo.sources" item-key="id" item-name="name" v-model="source") div(:class="$style.songListContent") transition(enter-active-class="animated-fast fadeIn" leave-active-class="animated-fast fadeOut") - div.scroll(:class="$style.songList" v-if="sortId !== 'importSongList'" ref="dom_scrollContent") - ul - li(:class="$style.item" v-for="(item, index) in listData.list" @click="handleItemClick(index)") - div(:class="$style.left") - img(:src="item.img") - div(:class="$style.right" :src="item.img") - h4(:title="item.name") {{item.name}} - p(:title="item.desc") {{item.desc}} - li(:class="$style.item" style="cursor: default;" v-if="listData.list && listData.list.length && listData.list.length % 3 == 2") - div(:class="$style.pagination") - material-pagination(:count="listData.total" :limit="listData.limit" :page="listData.page" @btn-click="handleToggleListPage") + div(:class="$style.songListContent" v-show="listData.list.length") + transition(enter-active-class="animated-fast fadeIn" leave-active-class="animated-fast fadeOut") + div.scroll(:class="$style.songList" v-if="sortId !== 'importSongList'" ref="dom_scrollContent") + ul + li(:class="$style.item" v-for="(item, index) in listData.list" @click="handleItemClick(index)") + div(:class="$style.left") + img(:src="item.img") + div(:class="$style.right" :src="item.img") + h4(:title="item.name") {{item.name}} + p(:title="item.desc") {{item.desc}} + li(:class="$style.item" style="cursor: default;" v-if="listData.list && listData.list.length && listData.list.length % 3 == 2") + div(:class="$style.pagination") + material-pagination(:count="listData.total" :limit="listData.limit" :page="listData.page" @btn-click="handleToggleListPage") + transition(enter-active-class="animated-fast fadeIn" leave-active-class="animated-fast fadeOut") + div(:class="$style.importSongListContent" v-show="sortId === 'importSongList'") + material-search-input(v-model="importSongListText" @event="handleImportSongListEvent" big placeholder="输入歌单链接或歌单ID") + svg(version='1.1' xmlns='http://www.w3.org/2000/svg' xlink='http://www.w3.org/1999/xlink' height='100%' viewBox='0 0 451.846 451.847' space='preserve') + use(xlink:href='#icon-right') transition(enter-active-class="animated-fast fadeIn" leave-active-class="animated-fast fadeOut") - div(:class="$style.importSongListContent" v-show="sortId === 'importSongList'") - material-search-input(v-model="importSongListText" @event="handleImportSongListEvent" big placeholder="输入歌单链接或歌单ID") - svg(version='1.1' xmlns='http://www.w3.org/2000/svg' xlink='http://www.w3.org/1999/xlink' height='100%' viewBox='0 0 451.846 451.847' space='preserve') - use(xlink:href='#icon-right') + div(v-show="!listData.list.length" :class="$style.noitem") + p 列表加载中... material-download-modal(:show="isShowDownload" :musicInfo="musicInfo" @select="handleAddDownload" @close="isShowDownload = false") material-download-multiple-modal(:show="isShowDownloadMultiple" :list="selectdData" @select="handleAddDownloadMultiple" @close="isShowDownloadMultiple = false") material-list-add-modal(:show="isShowListAdd" :musicInfo="musicInfo" @close="isShowListAdd = false") @@ -529,6 +534,23 @@ export default { // transform: translateX(-50%); } +.noitem { + position: absolute; + top: 0; + left: 0; + height: 100%; + width: 100%; + display: flex; + flex-flow: column nowrap; + justify-content: center; + align-items: center; + + p { + font-size: 24px; + color: @color-theme_2-font-label; + } +} + each(@themes, { :global(#container.@{value}) { .song-list-header-middle { @@ -541,6 +563,11 @@ each(@themes, { color: ~'@{color-@{value}-theme_2-font-label}'; } } + .noitem { + p { + color: ~'@{color-@{value}-theme_2-font-label}'; + } + } } })