新增桌面歌词
This commit is contained in:
@@ -14,11 +14,11 @@
|
||||
li(:class="[$style.listsItem, item.id == tabId ? $style.active : null]" :title="item.name" v-for="item in boardList" :key="item.id" @click="handleToggleList(item.id)")
|
||||
span(:class="$style.listsLabel") {{item.name}}
|
||||
div(:class="$style.list")
|
||||
material-song-list(v-model="selectdData" :rowWidth="{r1: '5%', r2: 'auto', r3: '22%', r4: '22%', r5: '9%', r6: '15%'}" @action="handleSongListAction" :source="source" :page="page" :limit="info.limit" :total="info.total" :noItem="$t('material.song_list.loding_list')" :list="list")
|
||||
material-song-list(v-model="selectedData" :rowWidth="{r1: '5%', r2: 'auto', r3: '22%', r4: '22%', r5: '9%', r6: '15%'}" @action="handleSongListAction" :source="source" :page="page" :limit="info.limit" :total="info.total" :noItem="$t('material.song_list.loding_list')" :list="list")
|
||||
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-download-multiple-modal(:show="isShowDownloadMultiple" :list="selectedData" @select="handleAddDownloadMultiple" @close="isShowDownloadMultiple = false")
|
||||
material-list-add-modal(:show="isShowListAdd" :musicInfo="musicInfo" @close="isShowListAdd = false")
|
||||
material-list-add-multiple-modal(:show="isShowListAddMultiple" :musicList="selectdData" @close="handleListAddModalClose")
|
||||
material-list-add-multiple-modal(:show="isShowListAddMultiple" :musicList="selectedData" @close="handleListAddModalClose")
|
||||
</template>
|
||||
|
||||
<script>
|
||||
@@ -32,7 +32,7 @@ export default {
|
||||
page: 1,
|
||||
isShowDownload: false,
|
||||
musicInfo: null,
|
||||
selectdData: [],
|
||||
selectedData: [],
|
||||
isShowDownloadMultiple: false,
|
||||
isShowListAdd: false,
|
||||
isShowListAddMultiple: false,
|
||||
@@ -101,7 +101,7 @@ export default {
|
||||
handleMenuClick(info) {
|
||||
switch (info.action) {
|
||||
case 'download':
|
||||
if (this.selectdData.length) {
|
||||
if (this.selectedData.length) {
|
||||
this.isShowDownloadMultiple = true
|
||||
} else {
|
||||
this.musicInfo = this.list[info.index]
|
||||
@@ -111,13 +111,17 @@ export default {
|
||||
}
|
||||
break
|
||||
case 'play':
|
||||
if (this.selectedData.length) {
|
||||
this.listAddMultiple({ id: 'default', list: this.selectedData })
|
||||
this.resetSelect()
|
||||
}
|
||||
this.testPlay(info.index)
|
||||
break
|
||||
case 'search':
|
||||
this.handleSearch(info.index)
|
||||
break
|
||||
case 'addTo':
|
||||
if (this.selectdData.length) {
|
||||
if (this.selectedData.length) {
|
||||
this.$nextTick(() => {
|
||||
this.isShowListAddMultiple = true
|
||||
})
|
||||
@@ -131,15 +135,8 @@ export default {
|
||||
}
|
||||
},
|
||||
testPlay(index) {
|
||||
let targetSong
|
||||
if (index == null) {
|
||||
targetSong = this.selectdData[0]
|
||||
this.listAddMultiple({ id: 'default', list: this.selectdData })
|
||||
this.resetSelect()
|
||||
} else {
|
||||
targetSong = this.list[index]
|
||||
this.listAdd({ id: 'default', musicInfo: targetSong })
|
||||
}
|
||||
let targetSong = this.list[index]
|
||||
this.listAdd({ id: 'default', musicInfo: targetSong })
|
||||
let targetIndex = this.defaultList.list.findIndex(
|
||||
s => s.songmid === targetSong.songmid,
|
||||
)
|
||||
@@ -170,7 +167,7 @@ export default {
|
||||
},
|
||||
handleAddDownloadMultiple(type) {
|
||||
if (this.source == 'xm' && type == 'flac') type = 'wav'
|
||||
this.createDownloadMultiple({ list: [...this.selectdData], type })
|
||||
this.createDownloadMultiple({ list: [...this.selectedData], type })
|
||||
this.isShowDownloadMultiple = false
|
||||
this.resetSelect()
|
||||
},
|
||||
@@ -212,7 +209,7 @@ export default {
|
||||
this.tabId = id
|
||||
},
|
||||
resetSelect() {
|
||||
this.selectdData = []
|
||||
this.selectedData = []
|
||||
},
|
||||
},
|
||||
}
|
||||
|
||||
@@ -777,6 +777,8 @@ export default {
|
||||
display: flex;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
@lists-item-height: 36px;
|
||||
.lists {
|
||||
flex: none;
|
||||
width: 16%;
|
||||
@@ -857,18 +859,19 @@ export default {
|
||||
}
|
||||
.listsLabel {
|
||||
display: block;
|
||||
height: 36px;
|
||||
height: @lists-item-height;
|
||||
padding: 0 10px;
|
||||
font-size: 13px;
|
||||
line-height: 36px;
|
||||
line-height: @lists-item-height;
|
||||
.mixin-ellipsis-1;
|
||||
}
|
||||
.listsInput {
|
||||
width: 100%;
|
||||
height: 36px;
|
||||
height: @lists-item-height;
|
||||
border: none;
|
||||
padding: 0;
|
||||
line-height: 36px;
|
||||
// padding-bottom: 1px;
|
||||
line-height: @lists-item-height;
|
||||
background: none;
|
||||
outline: none;
|
||||
font-size: 13px;
|
||||
@@ -884,7 +887,7 @@ export default {
|
||||
}
|
||||
}
|
||||
.newLeave {
|
||||
margin-top: -36px;
|
||||
margin-top: -@lists-item-height;
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
|
||||
@@ -52,10 +52,10 @@
|
||||
div(v-else :class="$style.noitem_list")
|
||||
p {{$t('view.search.no_item')}}
|
||||
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-download-multiple-modal(:show="isShowDownloadMultiple" :list="selectedData" @select="handleAddDownloadMultiple" @close="isShowDownloadMultiple = false")
|
||||
//- material-flow-btn(:show="isShowEditBtn && (searchSourceId == 'all' || assertApiSupport(searchSourceId))" :remove-btn="false" @btn-click="handleFlowBtnClick")
|
||||
material-list-add-modal(:show="isShowListAdd" :musicInfo="musicInfo" @close="handleListAddModalClose")
|
||||
material-list-add-multiple-modal(:show="isShowListAddMultiple" :musicList="selectdData" @close="handleListAddMultipleModalClose")
|
||||
material-list-add-multiple-modal(:show="isShowListAddMultiple" :musicList="selectedData" @close="handleListAddMultipleModalClose")
|
||||
material-menu(:menus="listItemMenu" :location="listMenu.menuLocation" item-name="name" :isShow="listMenu.isShowItemMenu" @menu-click="handleListItemMenuClick")
|
||||
</template>
|
||||
|
||||
@@ -73,7 +73,7 @@ export default {
|
||||
clickIndex: -1,
|
||||
isShowDownload: false,
|
||||
musicInfo: null,
|
||||
selectdData: [],
|
||||
selectedData: [],
|
||||
// isShowEditBtn: false,
|
||||
isShowDownloadMultiple: false,
|
||||
searchSourceId: null,
|
||||
@@ -133,7 +133,7 @@ export default {
|
||||
this.handleGetHotSearch()
|
||||
},
|
||||
watch: {
|
||||
// selectdData(n) {
|
||||
// selectedData(n) {
|
||||
// const len = n.length
|
||||
// if (len) {
|
||||
// this.isShowEditBtn = true
|
||||
@@ -277,8 +277,8 @@ export default {
|
||||
},
|
||||
handleSelectData(event, clickIndex) {
|
||||
if (this.keyEvent.isShiftDown) {
|
||||
if (this.selectdData.length) {
|
||||
let lastSelectIndex = this.listInfo.list.indexOf(this.selectdData[this.selectdData.length - 1])
|
||||
if (this.selectedData.length) {
|
||||
let lastSelectIndex = this.listInfo.list.indexOf(this.selectedData[this.selectedData.length - 1])
|
||||
this.removeAllSelect()
|
||||
if (lastSelectIndex != clickIndex) {
|
||||
let isNeedReverse = false
|
||||
@@ -288,8 +288,8 @@ export default {
|
||||
clickIndex = temp
|
||||
isNeedReverse = true
|
||||
}
|
||||
this.selectdData = this.listInfo.list.slice(lastSelectIndex, clickIndex + 1)
|
||||
if (isNeedReverse) this.selectdData.reverse()
|
||||
this.selectedData = this.listInfo.list.slice(lastSelectIndex, clickIndex + 1)
|
||||
if (isNeedReverse) this.selectedData.reverse()
|
||||
let nodes = this.$refs.dom_tbody.childNodes
|
||||
do {
|
||||
nodes[lastSelectIndex].classList.add('active')
|
||||
@@ -298,22 +298,22 @@ export default {
|
||||
}
|
||||
} else {
|
||||
event.currentTarget.classList.add('active')
|
||||
this.selectdData.push(this.listInfo.list[clickIndex])
|
||||
this.selectedData.push(this.listInfo.list[clickIndex])
|
||||
}
|
||||
} else if (this.keyEvent.isModDown) {
|
||||
let item = this.listInfo.list[clickIndex]
|
||||
let index = this.selectdData.indexOf(item)
|
||||
let index = this.selectedData.indexOf(item)
|
||||
if (index < 0) {
|
||||
this.selectdData.push(item)
|
||||
this.selectedData.push(item)
|
||||
event.currentTarget.classList.add('active')
|
||||
} else {
|
||||
this.selectdData.splice(index, 1)
|
||||
this.selectedData.splice(index, 1)
|
||||
event.currentTarget.classList.remove('active')
|
||||
}
|
||||
} else if (this.selectdData.length) this.removeAllSelect()
|
||||
} else if (this.selectedData.length) this.removeAllSelect()
|
||||
},
|
||||
removeAllSelect() {
|
||||
this.selectdData = []
|
||||
this.selectedData = []
|
||||
let dom_tbody = this.$refs.dom_tbody
|
||||
if (!dom_tbody) return
|
||||
let nodes = dom_tbody.querySelectorAll('.active')
|
||||
@@ -322,15 +322,9 @@ export default {
|
||||
}
|
||||
},
|
||||
testPlay(index) {
|
||||
let targetSong
|
||||
if (index == null) {
|
||||
targetSong = this.selectdData[0]
|
||||
this.listAddMultiple({ id: 'default', list: this.filterList(this.selectdData) })
|
||||
} else {
|
||||
if (!this.assertApiSupport(this.listInfo.list[index].source)) return
|
||||
targetSong = this.listInfo.list[index]
|
||||
this.listAdd({ id: 'default', musicInfo: targetSong })
|
||||
}
|
||||
let targetSong = this.listInfo.list[index]
|
||||
// if (!targetSong || !this.assertApiSupport(targetSong.source)) return
|
||||
this.listAdd({ id: 'default', musicInfo: targetSong })
|
||||
let targetIndex = this.defaultList.list.findIndex(
|
||||
s => s.songmid === targetSong.songmid,
|
||||
)
|
||||
@@ -349,13 +343,13 @@ export default {
|
||||
this.isShowDownload = false
|
||||
},
|
||||
handleAddDownloadMultiple(type) {
|
||||
this.createDownloadMultiple({ list: this.filterList(this.selectdData), type })
|
||||
this.createDownloadMultiple({ list: this.filterList(this.selectedData), type })
|
||||
this.removeAllSelect()
|
||||
this.isShowDownloadMultiple = false
|
||||
},
|
||||
handleSelectAllData() {
|
||||
this.removeAllSelect()
|
||||
this.selectdData = [...this.listInfo.list]
|
||||
this.selectedData = [...this.listInfo.list]
|
||||
let nodes = this.$refs.dom_tbody.childNodes
|
||||
for (const node of nodes) {
|
||||
node.classList.add('active')
|
||||
@@ -441,10 +435,14 @@ export default {
|
||||
let minfo
|
||||
switch (action && action.action) {
|
||||
case 'play':
|
||||
if (this.selectedData.length) {
|
||||
this.listAddMultiple({ id: 'default', list: this.filterList(this.selectedData) })
|
||||
this.removeAllSelect()
|
||||
}
|
||||
this.testPlay(index)
|
||||
break
|
||||
case 'addTo':
|
||||
if (this.selectdData.length) {
|
||||
if (this.selectedData.length) {
|
||||
this.$nextTick(() => {
|
||||
this.isShowListAddMultiple = true
|
||||
})
|
||||
@@ -456,7 +454,7 @@ export default {
|
||||
}
|
||||
break
|
||||
case 'download':
|
||||
if (this.selectdData.length) {
|
||||
if (this.selectedData.length) {
|
||||
this.isShowDownloadMultiple = true
|
||||
} else {
|
||||
minfo = this.listInfo.list[index]
|
||||
|
||||
@@ -25,7 +25,7 @@ div.scroll(:class="$style.setting")
|
||||
dd(:title="$t('view.setting.basic_to_tray_title')")
|
||||
h3 {{$t('view.setting.basic_to_tray')}}
|
||||
div
|
||||
material-checkbox(id="setting_to_tray" v-model="current_setting.tray.isToTray" @change="handleToTrayChange" :label="$t('view.setting.is_enable')")
|
||||
material-checkbox(id="setting_to_tray" v-model="current_setting.tray.isToTray" :label="$t('view.setting.is_enable')")
|
||||
|
||||
dd(:title="$t('view.setting.basic_window_size_title')")
|
||||
h3 {{$t('view.setting.basic_window_size')}}
|
||||
@@ -68,7 +68,14 @@ div.scroll(:class="$style.setting")
|
||||
h3 {{$t('view.setting.play_mediaDevice')}}
|
||||
div
|
||||
material-selection(:list="mediaDevices" :class="$style.gapLeft" v-model="current_setting.player.mediaDeviceId" item-key="deviceId" item-name="label")
|
||||
|
||||
dt {{$t('view.setting.desktop_lyric')}}
|
||||
dd
|
||||
div(:class="$style.gapTop")
|
||||
material-checkbox(id="setting_desktop_lyric_enable" v-model="current_setting.desktopLyric.enable" :label="$t('view.setting.desktop_lyric_enable')")
|
||||
div(:class="$style.gapTop")
|
||||
material-checkbox(id="setting_desktop_lyric_lock" v-model="current_setting.desktopLyric.isLock" :label="$t('view.setting.desktop_lyric_lock')")
|
||||
div(:class="$style.gapTop")
|
||||
material-checkbox(id="setting_desktop_lyric_alwaysOnTop" v-model="current_setting.desktopLyric.isAlwaysOnTop" :label="$t('view.setting.desktop_lyric_always_on_top')")
|
||||
dt {{$t('view.setting.search')}}
|
||||
dd(:title="$t('view.setting.search_hot_title')")
|
||||
h3 {{$t('view.setting.search_hot')}}
|
||||
@@ -221,7 +228,6 @@ import {
|
||||
openDirInExplorer,
|
||||
selectDir,
|
||||
openSaveDir,
|
||||
updateSetting,
|
||||
openUrl,
|
||||
clipboardWriteText,
|
||||
getCacheSize,
|
||||
@@ -229,8 +235,9 @@ import {
|
||||
sizeFormate,
|
||||
setWindowSize,
|
||||
} from '../utils'
|
||||
import { rendererSend } from '../../common/ipc'
|
||||
import apiSource from '../config/api-source'
|
||||
import { rendererSend, NAMES } from '../../common/ipc'
|
||||
import { mergeSetting } from '../../common/utils'
|
||||
import apiSourceInfo from '../utils/music/api-source-info'
|
||||
import fs from 'fs'
|
||||
import languageList from '@/lang/languages.json'
|
||||
|
||||
@@ -268,7 +275,7 @@ export default {
|
||||
]
|
||||
},
|
||||
apiSources() {
|
||||
return apiSource.map(api => ({
|
||||
return apiSourceInfo.map(api => ({
|
||||
id: api.id,
|
||||
label: this.$t('view.setting.basic_source_' + api.id) || api.name,
|
||||
disabled: api.disabled,
|
||||
@@ -314,6 +321,20 @@ export default {
|
||||
mediaDeviceId: 'default',
|
||||
isMediaDeviceRemovedStopPlay: false,
|
||||
},
|
||||
desktopLyric: {
|
||||
enable: false,
|
||||
isLock: false,
|
||||
width: 600,
|
||||
height: 700,
|
||||
x: -1,
|
||||
y: -1,
|
||||
theme: '',
|
||||
style: {
|
||||
fontSize: 125,
|
||||
opacity: 80,
|
||||
isZoomActiveLrc: true,
|
||||
},
|
||||
},
|
||||
list: {
|
||||
isShowAlbumName: true,
|
||||
isShowSource: true,
|
||||
@@ -366,6 +387,7 @@ export default {
|
||||
current_setting: {
|
||||
handler(n, o) {
|
||||
if (!this.settingVersion) return
|
||||
if (JSON.stringify(this.setting) === JSON.stringify(n)) return
|
||||
this.setSetting(JSON.parse(JSON.stringify(n)))
|
||||
},
|
||||
deep: true,
|
||||
@@ -379,7 +401,7 @@ export default {
|
||||
'current_setting.player.isShowTaskProgess'(n) {
|
||||
if (n) return
|
||||
this.$nextTick(() => {
|
||||
rendererSend('progress', {
|
||||
rendererSend(NAMES.mainWindow.progress, {
|
||||
status: -1,
|
||||
mode: 'normal',
|
||||
})
|
||||
@@ -388,10 +410,12 @@ export default {
|
||||
},
|
||||
mounted() {
|
||||
navigator.mediaDevices.addEventListener('devicechange', this.getMediaDevice)
|
||||
window.eventHub.$on('set_config', this.handleUpdateSetting)
|
||||
this.init()
|
||||
},
|
||||
beforeDestroy() {
|
||||
navigator.mediaDevices.removeEventListener('devicechange', this.getMediaDevice)
|
||||
window.eventHub.$off('set_config', this.handleUpdateSetting)
|
||||
},
|
||||
methods: {
|
||||
...mapMutations(['setSetting', 'setSettingVersion', 'setVersionModalVisible']),
|
||||
@@ -424,7 +448,7 @@ export default {
|
||||
return
|
||||
}
|
||||
if (settingData.type !== 'setting') return
|
||||
const { version: settingVersion, setting } = updateSetting(settingData.data)
|
||||
const { version: settingVersion, setting } = mergeSetting(settingData.data)
|
||||
setting.isAgreePact = false
|
||||
this.refreshSetting(setting, settingVersion)
|
||||
},
|
||||
@@ -478,7 +502,7 @@ export default {
|
||||
return
|
||||
}
|
||||
if (allData.type !== 'allData') return
|
||||
const { version: settingVersion, setting } = updateSetting(allData.setting)
|
||||
const { version: settingVersion, setting } = mergeSetting(allData.setting)
|
||||
setting.isAgreePact = false
|
||||
this.refreshSetting(setting, settingVersion)
|
||||
|
||||
@@ -610,7 +634,6 @@ export default {
|
||||
}
|
||||
this.init()
|
||||
this.handleLangChange(this.current_setting.langId)
|
||||
this.handleToTrayChange()
|
||||
},
|
||||
handleLangChange(id) {
|
||||
this.$i18n.locale = id
|
||||
@@ -621,13 +644,12 @@ export default {
|
||||
this.mediaDevices = audioDevices
|
||||
// console.log(this.mediaDevices)
|
||||
},
|
||||
handleToTrayChange(isToTray) {
|
||||
if (isToTray != null) this.current_setting.tray.isShow = isToTray
|
||||
rendererSend('changeTray', this.current_setting.tray)
|
||||
},
|
||||
handleShowPact() {
|
||||
window.globalObj.isShowPact = true
|
||||
},
|
||||
handleUpdateSetting(config) {
|
||||
this.current_setting = JSON.parse(JSON.stringify(config))
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
@@ -737,7 +759,7 @@ export default {
|
||||
height: 100%;
|
||||
border-radius: @radius-border;
|
||||
background-position: center;
|
||||
background-size: auto 100%;
|
||||
background-size: cover;
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -3,8 +3,8 @@
|
||||
transition(enter-active-class="animated-fast fadeIn" leave-active-class="animated-fast fadeOut")
|
||||
div(:class="$style.songListDetailContent" v-if="isVisibleListDetail")
|
||||
div(:class="$style.songListHeader")
|
||||
div(:class="$style.songListHeaderLeft")
|
||||
img(:src="listDetail.info.img || selectListInfo.img")
|
||||
div(:class="$style.songListHeaderLeft" :style="{ backgroundImage: 'url('+(selectListInfo.img || listDetail.info.img)+')' }")
|
||||
//- img(:src="listDetail.info.img || selectListInfo.img")
|
||||
span(:class="$style.playNum" v-if="listDetail.info.play_count || selectListInfo.play_count") {{listDetail.info.play_count || selectListInfo.play_count}}
|
||||
div(:class="$style.songListHeaderMiddle")
|
||||
h3(:title="listDetail.info.name || selectListInfo.name") {{listDetail.info.name || selectListInfo.name}}
|
||||
@@ -15,7 +15,7 @@
|
||||
//- material-btn(:class="$style.closeDetailButton" :disabled="detailLoading" @click="playSongListDetail") 播放
|
||||
//- |
|
||||
material-btn(:class="$style.closeDetailButton" @click="hideListDetail") {{$t('view.song_list.back')}}
|
||||
material-song-list(v-model="selectdData" @action="handleSongListAction" :source="source" :page="listDetail.page" :limit="listDetail.limit"
|
||||
material-song-list(v-model="selectedData" @action="handleSongListAction" :source="source" :page="listDetail.page" :limit="listDetail.limit"
|
||||
:total="listDetail.total" :noItem="isGetDetailFailed ? $t('view.song_list.loding_list_fail') : $t('view.song_list.loding_list')" :list="listDetail.list")
|
||||
transition(enter-active-class="animated-fast fadeIn" leave-active-class="animated-fast fadeOut")
|
||||
div(:class="$style.songListContainer" v-if="!isVisibleListDetail")
|
||||
@@ -30,12 +30,13 @@
|
||||
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.left" :style="{ backgroundImage: 'url('+item.img+')' }")
|
||||
//- 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")
|
||||
p(:class="$style.play_count") {{item.play_count}}
|
||||
p(:class="$style.author") {{item.author}}
|
||||
li(:class="$style.item" style="cursor: default;" v-for="i in spaceNum")
|
||||
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")
|
||||
@@ -53,9 +54,9 @@
|
||||
div(v-show="!listData.list.length" :class="$style.noitem")
|
||||
p {{$t('view.song_list.loding_list')}}
|
||||
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-download-multiple-modal(:show="isShowDownloadMultiple" :list="selectedData" @select="handleAddDownloadMultiple" @close="isShowDownloadMultiple = false")
|
||||
material-list-add-modal(:show="isShowListAdd" :musicInfo="musicInfo" @close="isShowListAdd = false" :list-name="listDetail.info.name")
|
||||
material-list-add-multiple-modal(:show="isShowListAddMultiple" :musicList="selectdData" @close="handleListAddModalClose" :list-name="listDetail.info.name")
|
||||
material-list-add-multiple-modal(:show="isShowListAddMultiple" :musicList="selectedData" @close="handleListAddModalClose" :list-name="listDetail.info.name")
|
||||
</template>
|
||||
|
||||
<script>
|
||||
@@ -74,7 +75,7 @@ export default {
|
||||
source: null,
|
||||
isShowDownload: false,
|
||||
musicInfo: null,
|
||||
selectdData: [],
|
||||
selectedData: [],
|
||||
isShowDownloadMultiple: false,
|
||||
isToggleSource: false,
|
||||
isShowListAdd: false,
|
||||
@@ -112,6 +113,10 @@ export default {
|
||||
let tagInfo = this.tags[this.source]
|
||||
return tagInfo ? [{ name: '热门标签', list: [...tagInfo.hotTag] }, ...tagInfo.tags] : []
|
||||
},
|
||||
spaceNum() {
|
||||
let num = this.listData.list ? this.listData.list.length % 3 : 0
|
||||
return num > 0 ? 3 - num : 0
|
||||
},
|
||||
},
|
||||
watch: {
|
||||
sortId(n, o) {
|
||||
@@ -200,7 +205,7 @@ export default {
|
||||
handleMenuClick(info) {
|
||||
switch (info.action) {
|
||||
case 'download':
|
||||
if (this.selectdData.length) {
|
||||
if (this.selectedData.length) {
|
||||
this.isShowDownloadMultiple = true
|
||||
} else {
|
||||
this.musicInfo = this.listDetail.list[info.index]
|
||||
@@ -210,13 +215,17 @@ export default {
|
||||
}
|
||||
break
|
||||
case 'play':
|
||||
if (this.selectedData.length) {
|
||||
this.listAddMultiple({ id: 'default', list: this.filterList(this.selectedData) })
|
||||
this.resetSelect()
|
||||
}
|
||||
this.testPlay(info.index)
|
||||
break
|
||||
case 'search':
|
||||
this.handleSearch(info.index)
|
||||
break
|
||||
case 'addTo':
|
||||
if (this.selectdData.length) {
|
||||
if (this.selectedData.length) {
|
||||
this.$nextTick(() => {
|
||||
this.isShowListAddMultiple = true
|
||||
})
|
||||
@@ -230,16 +239,9 @@ export default {
|
||||
}
|
||||
},
|
||||
testPlay(index) {
|
||||
let targetSong
|
||||
if (index == null) {
|
||||
targetSong = this.selectdData[0]
|
||||
this.listAddMultiple({ id: 'default', list: this.filterList(this.selectdData) })
|
||||
this.resetSelect()
|
||||
} else {
|
||||
targetSong = this.listDetail.list[index]
|
||||
if (!this.assertApiSupport(targetSong.source)) return
|
||||
this.listAdd({ id: 'default', musicInfo: targetSong })
|
||||
}
|
||||
let targetSong = this.listDetail.list[index]
|
||||
// if (!this.assertApiSupport(targetSong.source)) return
|
||||
this.listAdd({ id: 'default', musicInfo: targetSong })
|
||||
let targetIndex = this.defaultList.list.findIndex(
|
||||
s => s.songmid === targetSong.songmid,
|
||||
)
|
||||
@@ -279,7 +281,7 @@ export default {
|
||||
},
|
||||
handleAddDownloadMultiple(type) {
|
||||
if (this.source == 'xm' && type == 'flac') type = 'wav'
|
||||
this.createDownloadMultiple({ list: this.filterList(this.selectdData), type })
|
||||
this.createDownloadMultiple({ list: this.filterList(this.selectedData), type })
|
||||
this.resetSelect()
|
||||
this.isShowDownloadMultiple = false
|
||||
},
|
||||
@@ -321,7 +323,7 @@ export default {
|
||||
}
|
||||
},
|
||||
resetSelect() {
|
||||
this.selectdData = []
|
||||
this.selectedData = []
|
||||
},
|
||||
hideListDetail() {
|
||||
setTimeout(async() => {
|
||||
@@ -441,11 +443,14 @@ export default {
|
||||
flex: none;
|
||||
margin-left: 5px;
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
position: relative;
|
||||
img {
|
||||
max-width: 100%;
|
||||
max-height: 100%;
|
||||
}
|
||||
overflow: hidden;
|
||||
border-radius: 4px;
|
||||
background-position: center;
|
||||
background-size: cover;
|
||||
opacity: .9;
|
||||
|
||||
.play-num {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
@@ -515,36 +520,46 @@ export default {
|
||||
}
|
||||
.left {
|
||||
flex: none;
|
||||
width: 66px;
|
||||
height: 66px;
|
||||
width: 88px;
|
||||
height: 88px;
|
||||
display: flex;
|
||||
|
||||
img {
|
||||
max-width: 100%;
|
||||
max-height: 100%;
|
||||
}
|
||||
background-position: center;
|
||||
background-size: cover;
|
||||
border-radius: 4px;
|
||||
overflow: hidden;
|
||||
opacity: .9;
|
||||
// box-shadow: 0 0 2px 0 rgba(0,0,0,.2);
|
||||
}
|
||||
.right {
|
||||
flex: auto;
|
||||
padding: 5px 15px 5px 7px;
|
||||
padding: 3px 15px 5px 7px;
|
||||
overflow: hidden;
|
||||
h4 {
|
||||
font-size: 14px;
|
||||
height: 2.6em;
|
||||
text-align: justify;
|
||||
line-height: 1.2;
|
||||
.mixin-ellipsis-1;
|
||||
}
|
||||
p {
|
||||
margin-top: 12px;
|
||||
font-size: 12px;
|
||||
line-height: 1.3;
|
||||
.mixin-ellipsis-2;
|
||||
text-align: justify;
|
||||
line-height: 1.2;
|
||||
// text-indent: 24px;
|
||||
|
||||
color: @color-theme_2-font-label;
|
||||
}
|
||||
}
|
||||
.play_count {
|
||||
margin-top: 12px;
|
||||
font-size: 12px;
|
||||
.mixin-ellipsis-1;
|
||||
text-align: justify;
|
||||
line-height: 1.2;
|
||||
// text-indent: 24px;
|
||||
color: @color-theme_2-font-label;
|
||||
}
|
||||
.author {
|
||||
margin-top: 6px;
|
||||
font-size: 12px;
|
||||
.mixin-ellipsis-1;
|
||||
text-align: justify;
|
||||
line-height: 1.2;
|
||||
// text-indent: 24px;
|
||||
color: @color-theme_2-font-label;
|
||||
}
|
||||
.pagination {
|
||||
text-align: center;
|
||||
padding: 15px 0;
|
||||
|
||||
Reference in New Issue
Block a user