完成我喜欢播放列表
This commit is contained in:
@@ -26,7 +26,7 @@ div(:class="$style.download")
|
||||
td.break(style="width: 10%;") {{item.type && item.type.toUpperCase()}}
|
||||
td(style="width: 20%; padding-left: 0; padding-right: 0;")
|
||||
material-list-buttons(:index="index" :download-btn="false" :file-btn="true" :start-btn="!item.isComplate && item.status != downloadStatus.WAITING && (item.status != downloadStatus.RUN)"
|
||||
:pause-btn="!item.isComplate && (item.status == downloadStatus.RUN || item.status == downloadStatus.WAITING)"
|
||||
:pause-btn="!item.isComplate && (item.status == downloadStatus.RUN || item.status == downloadStatus.WAITING)" :list-add-btn="false"
|
||||
:play-btn="item.status == downloadStatus.COMPLETED" @btn-click="handleListBtnClick")
|
||||
material-flow-btn(:show="isShowEditBtn" :play-btn="false" :download-btn="false" :add-btn="false" :start-btn="true" :pause-btn="true" @btn-click="handleFlowBtnClick")
|
||||
div(:class="$style.noItem" v-else)
|
||||
|
||||
@@ -6,6 +6,8 @@
|
||||
material-song-list(v-model="selectdData" @action="handleSongListAction" :source="source" :page="page" :limit="info.limit" :total="info.total" :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-list-add-modal(:show="isShowListAdd" :musicInfo="musicInfo" @close="isShowListAdd = false")
|
||||
material-list-add-multiple-modal(:show="isShowListAddMultiple" :musicList="selectdData" @close="handleListAddModalClose")
|
||||
</template>
|
||||
|
||||
<script>
|
||||
@@ -21,6 +23,8 @@ export default {
|
||||
musicInfo: null,
|
||||
selectdData: [],
|
||||
isShowDownloadMultiple: false,
|
||||
isShowListAdd: false,
|
||||
isShowListAddMultiple: false,
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
@@ -72,8 +76,12 @@ export default {
|
||||
case 'search':
|
||||
this.handleSearch(info.index)
|
||||
break
|
||||
// case 'add':
|
||||
// break
|
||||
case 'listAdd':
|
||||
this.musicInfo = this.list[info.index]
|
||||
this.$nextTick(() => {
|
||||
this.isShowListAdd = true
|
||||
})
|
||||
break
|
||||
}
|
||||
},
|
||||
testPlay(index) {
|
||||
@@ -125,6 +133,10 @@ export default {
|
||||
this.isShowDownloadMultiple = false
|
||||
this.resetSelect()
|
||||
},
|
||||
handleListAddModalClose(isSelect) {
|
||||
if (isSelect) this.resetSelect()
|
||||
this.isShowListAddMultiple = false
|
||||
},
|
||||
handleFlowBtnClick(action) {
|
||||
switch (action) {
|
||||
case 'download':
|
||||
@@ -134,8 +146,7 @@ export default {
|
||||
this.testPlay()
|
||||
break
|
||||
case 'add':
|
||||
this.listAddMultiple({ id: 'default', list: this.selectdData })
|
||||
this.resetSelect()
|
||||
this.isShowListAddMultiple = true
|
||||
break
|
||||
}
|
||||
},
|
||||
|
||||
+38
-14
@@ -40,7 +40,9 @@
|
||||
p(v-text="list.length ? '加载中...' : '列表竟然是空的...'")
|
||||
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-flow-btn(:show="isShowEditBtn" :add-btn="false" :play-btn="false" @btn-click="handleFlowBtnClick")
|
||||
material-flow-btn(:show="isShowEditBtn" :play-btn="false" @btn-click="handleFlowBtnClick")
|
||||
material-list-add-modal(:show="isShowListAdd" :musicInfo="musicInfo" :exclude-list-id="excludeListId" @close="isShowListAdd = false")
|
||||
material-list-add-multiple-modal(:show="isShowListAddMultiple" :musicList="selectdData" :exclude-list-id="excludeListId" @close="handleListAddModalClose")
|
||||
</template>
|
||||
|
||||
<script>
|
||||
@@ -62,6 +64,8 @@ export default {
|
||||
isShowDownloadMultiple: false,
|
||||
delayShow: false,
|
||||
routeLeaveLocation: null,
|
||||
isShowListAdd: false,
|
||||
isShowListAddMultiple: false,
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
@@ -72,21 +76,16 @@ export default {
|
||||
playIndex: 'playIndex',
|
||||
}),
|
||||
isPlayList() {
|
||||
return this.playerListId != 'download' && (
|
||||
((!this.$route.query.id || this.$route.query.id == 'test') && this.playerListId == 'test') ||
|
||||
this.$route.query.id == this.playerListId
|
||||
)
|
||||
return this.playerListId == this.listId
|
||||
},
|
||||
list() {
|
||||
return !this.$route.query.id || this.$route.query.id == 'test'
|
||||
? this.defaultList.list
|
||||
: this.userList.find(l => l._id == this.$route.query.id) || []
|
||||
return this.listData.list
|
||||
},
|
||||
isAPITemp() {
|
||||
return this.setting.apiSource == 'temp'
|
||||
},
|
||||
listData() {
|
||||
if (this.listId == null) return this.defaultList
|
||||
if (!this.listId) return this.defaultList
|
||||
let targetList
|
||||
switch (this.listId) {
|
||||
case 'default':
|
||||
@@ -101,6 +100,9 @@ export default {
|
||||
}
|
||||
return targetList
|
||||
},
|
||||
excludeListId() {
|
||||
return [this.listId]
|
||||
},
|
||||
},
|
||||
watch: {
|
||||
selectdData(n) {
|
||||
@@ -120,7 +122,13 @@ export default {
|
||||
},
|
||||
beforeRouteUpdate(to, from, next) {
|
||||
if (to.query.id === undefined) return
|
||||
this.listId = to.query.id
|
||||
this.delayShow = false
|
||||
this.$nextTick(() => {
|
||||
this.listId = to.query.id
|
||||
this.$nextTick(() => {
|
||||
this.handleDelayShow()
|
||||
})
|
||||
})
|
||||
next()
|
||||
},
|
||||
// mounted() {
|
||||
@@ -142,6 +150,7 @@ export default {
|
||||
next()
|
||||
},
|
||||
created() {
|
||||
this.listId = this.$route.query.id
|
||||
this.handleScroll = throttle(e => {
|
||||
if (this.routeLeaveLocation) {
|
||||
this.setListScroll(this.routeLeaveLocation)
|
||||
@@ -157,7 +166,9 @@ export default {
|
||||
...mapMutations(['setListScroll']),
|
||||
...mapMutations('list', ['listRemove', 'listRemoveMultiple']),
|
||||
...mapActions('download', ['createDownload', 'createDownloadMultiple']),
|
||||
...mapMutations('player', ['setList']),
|
||||
...mapMutations('player', {
|
||||
setPlayList: 'setList',
|
||||
}),
|
||||
handleDelayShow() {
|
||||
if (this.list.length > 150) {
|
||||
setTimeout(() => {
|
||||
@@ -185,10 +196,10 @@ export default {
|
||||
},
|
||||
testPlay(index) {
|
||||
if ((this.isAPITemp && this.list[index].source != 'kw') || this.list[index].source == 'tx' || this.list[index].source == 'wy') return
|
||||
this.setList({ list: this.list, listId: 'test', index })
|
||||
this.setPlayList({ list: this.list, listId: this.listId, index })
|
||||
},
|
||||
handleRemove(index) {
|
||||
this.listRemove({ id: 'default', index })
|
||||
this.listRemove({ id: this.listId, index })
|
||||
},
|
||||
handleListBtnClick(info) {
|
||||
switch (info.action) {
|
||||
@@ -207,6 +218,12 @@ export default {
|
||||
case 'remove':
|
||||
this.handleRemove(info.index)
|
||||
break
|
||||
case 'listAdd':
|
||||
this.musicInfo = this.list[info.index]
|
||||
this.$nextTick(() => {
|
||||
this.isShowListAdd = true
|
||||
})
|
||||
break
|
||||
}
|
||||
},
|
||||
handleAddDownload(type) {
|
||||
@@ -232,11 +249,18 @@ export default {
|
||||
this.isShowDownloadMultiple = true
|
||||
break
|
||||
case 'remove':
|
||||
this.listRemoveMultiple({ id: 'default', list: this.selectdData })
|
||||
this.listRemoveMultiple({ id: this.listId, list: this.selectdData })
|
||||
this.resetSelect()
|
||||
break
|
||||
case 'add':
|
||||
this.isShowListAddMultiple = true
|
||||
break
|
||||
}
|
||||
},
|
||||
handleListAddModalClose(isSelect) {
|
||||
if (isSelect) this.resetSelect()
|
||||
this.isShowListAddMultiple = false
|
||||
},
|
||||
// handleScroll(e) {
|
||||
// console.log(e.target.scrollTop)
|
||||
// },
|
||||
|
||||
@@ -28,7 +28,7 @@
|
||||
span.badge.badge-success(v-if="item._types.ape || item._types.flac") 无损
|
||||
td.break(style="width: 20%;") {{item.singer}}
|
||||
td.break(style="width: 25%;") {{item.albumName}}
|
||||
td(style="width: 15%;")
|
||||
td(style="width: 15%; padding-left: 0; padding-right: 0;")
|
||||
material-list-buttons(:index="index" :remove-btn="false" :class="$style.listBtn"
|
||||
:play-btn="item.source == 'kw' || (!isAPITemp && item.source != 'tx' && item.source != 'wy')"
|
||||
:download-btn="item.source == 'kw' || (!isAPITemp && item.source != 'tx' && item.source != 'wy')"
|
||||
@@ -41,6 +41,8 @@
|
||||
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-flow-btn(:show="isShowEditBtn && (searchSourceId == 'kw' || searchSourceId == 'all' || !isAPITemp)" :remove-btn="false" @btn-click="handleFlowBtnClick")
|
||||
material-list-add-modal(:show="isShowListAdd" :musicInfo="musicInfo" @close="isShowListAdd = false")
|
||||
material-list-add-multiple-modal(:show="isShowListAddMultiple" :musicList="selectdData" @close="handleListAddModalClose")
|
||||
</template>
|
||||
|
||||
<script>
|
||||
@@ -63,6 +65,8 @@ export default {
|
||||
isShowEditBtn: false,
|
||||
isShowDownloadMultiple: false,
|
||||
searchSourceId: null,
|
||||
isShowListAdd: false,
|
||||
isShowListAddMultiple: false,
|
||||
}
|
||||
},
|
||||
beforeRouteUpdate(to, from, next) {
|
||||
@@ -164,7 +168,11 @@ export default {
|
||||
case 'play':
|
||||
this.testPlay(info.index)
|
||||
break
|
||||
case 'add':
|
||||
case 'listAdd':
|
||||
this.musicInfo = this.listInfo.list[info.index]
|
||||
this.$nextTick(() => {
|
||||
this.isShowListAdd = true
|
||||
})
|
||||
break
|
||||
}
|
||||
},
|
||||
@@ -218,14 +226,17 @@ export default {
|
||||
this.resetSelect()
|
||||
break
|
||||
case 'add':
|
||||
this.listAddMultiple({ id: 'default', list: this.filterList(this.selectdData) })
|
||||
this.resetSelect()
|
||||
this.isShowListAddMultiple = true
|
||||
break
|
||||
}
|
||||
},
|
||||
filterList(list) {
|
||||
return this.setting.apiSource == 'temp' ? list.filter(s => s.source == 'kw') : list.filter(s => s.source != 'tx' && s.source != 'wy')
|
||||
},
|
||||
handleListAddModalClose(isSelect) {
|
||||
if (isSelect) this.resetSelect()
|
||||
this.isShowListAddMultiple = false
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
@@ -162,7 +162,7 @@ export default {
|
||||
name: 'Setting',
|
||||
computed: {
|
||||
...mapGetters(['setting', 'themes', 'version']),
|
||||
...mapGetters('list', ['defaultList']),
|
||||
...mapGetters('list', ['defaultList', 'loveList']),
|
||||
isLatestVer() {
|
||||
return this.version.newVersion && this.version.version === this.version.newVersion.version
|
||||
},
|
||||
@@ -325,19 +325,30 @@ export default {
|
||||
})
|
||||
},
|
||||
importPlayList(path) {
|
||||
let defautlList
|
||||
let listData
|
||||
try {
|
||||
defautlList = JSON.parse(fs.readFileSync(path, 'utf8'))
|
||||
listData = JSON.parse(fs.readFileSync(path, 'utf8'))
|
||||
} catch (error) {
|
||||
return
|
||||
}
|
||||
if (defautlList.type !== 'defautlList') return
|
||||
this.setList({ id: 'default', list: defautlList.data.list })
|
||||
console.log(listData.type)
|
||||
|
||||
// 兼容0.6.2及以前版本的列表数据
|
||||
if (listData.type === 'defautlList') return this.setList({ id: 'default', list: listData.data.list })
|
||||
|
||||
if (listData.type !== 'playList') return
|
||||
|
||||
for (const list of listData.data) {
|
||||
this.setList({ id: list.id, list: list.list })
|
||||
}
|
||||
},
|
||||
exportPlayList(path) {
|
||||
const data = {
|
||||
type: 'defautlList',
|
||||
data: this.defaultList,
|
||||
type: 'playList',
|
||||
data: [
|
||||
this.defaultList,
|
||||
this.loveList,
|
||||
],
|
||||
}
|
||||
fs.writeFile(path, JSON.stringify(data, null, 2), 'utf8', err => {
|
||||
console.log(err)
|
||||
@@ -353,13 +364,20 @@ export default {
|
||||
if (allData.type !== 'allData') return
|
||||
this.setSetting(updateSetting(allData.setting))
|
||||
this.init()
|
||||
this.setList({ id: 'default', list: allData.defaultList.list })
|
||||
if (allData.defaultList) return this.setList({ id: 'default', list: allData.defaultList.list })
|
||||
|
||||
for (const list of allData.playList) {
|
||||
this.setList({ id: list.id, list: list.list })
|
||||
}
|
||||
},
|
||||
exportAllData(path) {
|
||||
let allData = {
|
||||
type: 'allData',
|
||||
setting: this.setting,
|
||||
defaultList: this.defaultList,
|
||||
playList: [
|
||||
this.defaultList,
|
||||
this.loveList,
|
||||
],
|
||||
}
|
||||
fs.writeFile(path, JSON.stringify(allData, null, 2), 'utf8', err => {
|
||||
console.log(err)
|
||||
|
||||
@@ -31,6 +31,8 @@
|
||||
material-pagination(:count="listData.total" :limit="listData.limit" :page="listData.page" @btn-click="handleToggleListPage")
|
||||
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")
|
||||
material-list-add-multiple-modal(:show="isShowListAddMultiple" :musicList="selectdData" @close="handleListAddModalClose")
|
||||
</template>
|
||||
|
||||
<script>
|
||||
@@ -52,6 +54,8 @@ export default {
|
||||
selectdData: [],
|
||||
isShowDownloadMultiple: false,
|
||||
isToggleSource: false,
|
||||
isShowListAdd: false,
|
||||
isShowListAddMultiple: false,
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
@@ -137,8 +141,12 @@ export default {
|
||||
case 'search':
|
||||
this.handleSearch(info.index)
|
||||
break
|
||||
// case 'add':
|
||||
// break
|
||||
case 'listAdd':
|
||||
this.musicInfo = this.listDetail.list[info.index]
|
||||
this.$nextTick(() => {
|
||||
this.isShowListAdd = true
|
||||
})
|
||||
break
|
||||
}
|
||||
},
|
||||
testPlay(index) {
|
||||
@@ -216,8 +224,7 @@ export default {
|
||||
this.testPlay()
|
||||
break
|
||||
case 'add':
|
||||
this.listAddMultiple({ id: 'default', list: this.selectdData })
|
||||
this.resetSelect()
|
||||
this.isShowListAddMultiple = true
|
||||
break
|
||||
}
|
||||
},
|
||||
@@ -241,6 +248,10 @@ export default {
|
||||
hideListDetail() {
|
||||
setTimeout(() => this.setVisibleListDetail(false), 50)
|
||||
},
|
||||
handleListAddModalClose(isSelect) {
|
||||
if (isSelect) this.resetSelect()
|
||||
this.isShowListAddMultiple = false
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
Reference in New Issue
Block a user