397 lines
10 KiB
Vue
397 lines
10 KiB
Vue
<template lang="pug">
|
|
div(:class="$style.leaderboard")
|
|
//- div(:class="$style.header")
|
|
material-tab(:class="$style.tab" :list="types" align="left" item-key="id" item-name="name" v-model="tabId")
|
|
material-select(:class="$style.select" :list="sourceInfo.sources" item-key="id" item-name="name" v-model="source")
|
|
div(:class="$style.lists" ref="dom_lists")
|
|
div(:class="$style.listsSelect")
|
|
//- h2(:class="$style.listsTitle") {{$t('core.aside.my_list')}}
|
|
material-selection(:class="$style.select" :list="sourceInfo.sources" item-key="id" item-name="name" v-model="source")
|
|
//- button(:class="$style.listsAdd" @click="handleShowNewList" :title="$t('view.list.lists_new_list_btn')")
|
|
svg(version='1.1' xmlns='http://www.w3.org/2000/svg' xlink='http://www.w3.org/1999/xlink' height='70%' viewBox='0 0 24 24' space='preserve')
|
|
use(xlink:href='#icon-list-add')
|
|
ul.scroll(:class="$style.listsContent" ref="dom_lists_list")
|
|
li(:class="[$style.listsItem, item.id == tabId ? $style.active : null]" :title="item.name" v-for="item in types" :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-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>
|
|
import { mapGetters, mapMutations, mapActions } from 'vuex'
|
|
export default {
|
|
name: 'Leaderboard',
|
|
data() {
|
|
return {
|
|
tabId: null,
|
|
source: null,
|
|
page: 1,
|
|
isShowDownload: false,
|
|
musicInfo: null,
|
|
selectdData: [],
|
|
isShowDownloadMultiple: false,
|
|
isShowListAdd: false,
|
|
isShowListAddMultiple: false,
|
|
}
|
|
},
|
|
computed: {
|
|
...mapGetters(['setting']),
|
|
...mapGetters('leaderboard', ['sourceInfo', 'list', 'info']),
|
|
...mapGetters('list', ['defaultList']),
|
|
types() {
|
|
return this.source ? this.sourceInfo.sourceList[this.source] : []
|
|
},
|
|
},
|
|
watch: {
|
|
tabId(n, o) {
|
|
this.setLeaderboard({ tabId: n })
|
|
if (!o && this.page !== 1) return
|
|
this.getList(1).then(() => {
|
|
this.page = this.info.page
|
|
})
|
|
},
|
|
source(n, o) {
|
|
this.setLeaderboard({ source: n })
|
|
if (o) this.tabId = this.types[0] && this.types[0].id
|
|
},
|
|
},
|
|
mounted() {
|
|
this.source = this.setting.leaderboard.source
|
|
this.tabId = this.setting.leaderboard.tabId
|
|
this.page = this.info.page
|
|
},
|
|
methods: {
|
|
...mapMutations(['setLeaderboard']),
|
|
...mapActions('leaderboard', ['getList']),
|
|
...mapActions('download', ['createDownload', 'createDownloadMultiple']),
|
|
...mapMutations('list', ['listAdd', 'listAddMultiple']),
|
|
...mapMutations('player', ['setList']),
|
|
handleListBtnClick(info) {
|
|
switch (info.action) {
|
|
case 'download':
|
|
this.musicInfo = this.list[info.index]
|
|
this.$nextTick(() => {
|
|
this.isShowDownload = true
|
|
})
|
|
break
|
|
case 'play':
|
|
this.testPlay(info.index)
|
|
break
|
|
case 'search':
|
|
this.handleSearch(info.index)
|
|
break
|
|
case 'listAdd':
|
|
this.musicInfo = this.list[info.index]
|
|
this.$nextTick(() => {
|
|
this.isShowListAdd = true
|
|
})
|
|
break
|
|
}
|
|
},
|
|
handleMenuClick(info) {
|
|
switch (info.action) {
|
|
case 'download':
|
|
if (this.selectdData.length) {
|
|
this.isShowDownloadMultiple = true
|
|
} else {
|
|
this.musicInfo = this.list[info.index]
|
|
this.$nextTick(() => {
|
|
this.isShowDownload = true
|
|
})
|
|
}
|
|
break
|
|
case 'play':
|
|
this.testPlay(info.index)
|
|
break
|
|
case 'search':
|
|
this.handleSearch(info.index)
|
|
break
|
|
case 'addTo':
|
|
if (this.selectdData.length) {
|
|
this.$nextTick(() => {
|
|
this.isShowListAddMultiple = true
|
|
})
|
|
} else {
|
|
this.musicInfo = this.list[info.index]
|
|
this.$nextTick(() => {
|
|
this.isShowListAdd = true
|
|
})
|
|
}
|
|
break
|
|
}
|
|
},
|
|
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 targetIndex = this.defaultList.list.findIndex(
|
|
s => s.songmid === targetSong.songmid,
|
|
)
|
|
if (targetIndex > -1) {
|
|
this.setList({
|
|
list: this.defaultList,
|
|
index: targetIndex,
|
|
})
|
|
}
|
|
},
|
|
handleSearch(index) {
|
|
const info = this.list[index]
|
|
this.$router.push({
|
|
path: 'search',
|
|
query: {
|
|
text: `${info.name} ${info.singer}`,
|
|
},
|
|
})
|
|
},
|
|
handleTogglePage(page) {
|
|
this.getList(page).then(() => {
|
|
this.page = this.info.page
|
|
})
|
|
},
|
|
handleAddDownload(type) {
|
|
this.createDownload({ musicInfo: this.musicInfo, type })
|
|
this.isShowDownload = false
|
|
},
|
|
handleAddDownloadMultiple(type) {
|
|
if (this.source == 'xm' && type == 'flac') type = 'wav'
|
|
this.createDownloadMultiple({ list: [...this.selectdData], type })
|
|
this.isShowDownloadMultiple = false
|
|
this.resetSelect()
|
|
},
|
|
handleListAddModalClose(isSelect) {
|
|
if (isSelect) this.resetSelect()
|
|
this.isShowListAddMultiple = false
|
|
},
|
|
// handleFlowBtnClick(action) {
|
|
// switch (action) {
|
|
// case 'download':
|
|
// this.isShowDownloadMultiple = true
|
|
// break
|
|
// case 'play':
|
|
// this.testPlay()
|
|
// break
|
|
// case 'add':
|
|
// this.isShowListAddMultiple = true
|
|
// break
|
|
// }
|
|
// },
|
|
handleSongListAction({ action, data }) {
|
|
switch (action) {
|
|
case 'listBtnClick':
|
|
return this.handleListBtnClick(data)
|
|
case 'menuClick':
|
|
return this.handleMenuClick(data)
|
|
case 'togglePage':
|
|
return this.handleTogglePage(data)
|
|
// case 'flowBtnClick':
|
|
// return this.handleFlowBtnClick(data)
|
|
case 'testPlay':
|
|
return this.testPlay(data)
|
|
case 'search':
|
|
return this.handleSearch(data)
|
|
}
|
|
},
|
|
handleToggleList(id) {
|
|
if (this.tabId == id) return
|
|
this.tabId = id
|
|
},
|
|
resetSelect() {
|
|
this.selectdData = []
|
|
},
|
|
},
|
|
}
|
|
</script>
|
|
|
|
<style lang="less" module>
|
|
@import '../assets/styles/layout.less';
|
|
|
|
.leaderboard {
|
|
height: 100%;
|
|
display: flex;
|
|
position: relative;
|
|
}
|
|
.header {
|
|
flex: none;
|
|
width: 100%;
|
|
display: flex;
|
|
flex-flow: row nowrap;
|
|
|
|
}
|
|
.tab {
|
|
flex: auto;
|
|
}
|
|
.select {
|
|
flex: none;
|
|
width: 80px;
|
|
}
|
|
.content {
|
|
flex: auto;
|
|
display: flex;
|
|
overflow: hidden;
|
|
flex-flow: column nowrap;
|
|
}
|
|
|
|
.lists {
|
|
flex: none;
|
|
width: 14.8%;
|
|
display: flex;
|
|
flex-flow: column nowrap;
|
|
}
|
|
.listsHeader {
|
|
position: relative;
|
|
}
|
|
.listsSelect {
|
|
font-size: 12px;
|
|
|
|
&:hover {
|
|
:global(.icon) {
|
|
opacity: 1;
|
|
}
|
|
}
|
|
|
|
>:global(.content) {
|
|
display: block;
|
|
width: 100%;
|
|
}
|
|
:global(.label-content) {
|
|
background-color: transparent !important;
|
|
line-height: 38px;
|
|
height: 38px;
|
|
border-radius: 0;
|
|
&:hover {
|
|
background: none !important;
|
|
}
|
|
}
|
|
:global(.label) {
|
|
color: rgba(0, 0, 0, 0.95) !important;
|
|
}
|
|
:global(.icon) {
|
|
opacity: .6;
|
|
transition: opacity .3s ease;
|
|
}
|
|
|
|
:global(.list) {
|
|
max-height: 500px;
|
|
box-shadow: 0 1px 8px 0 rgba(0,0,0,.2);
|
|
li {
|
|
background-color: @color-theme_2-background_2;
|
|
line-height: 38px;
|
|
font-size: 13px;
|
|
&:hover {
|
|
background-color: @color-btn-hover;
|
|
}
|
|
&:active {
|
|
background-color: @color-btn-active;
|
|
}
|
|
}
|
|
}
|
|
// line-height: 38px;
|
|
// padding: 0 10px;
|
|
border-bottom: 1px solid rgba(0, 0, 0, 0.12);
|
|
flex: none;
|
|
}
|
|
.listsContent {
|
|
flex: auto;
|
|
min-width: 0;
|
|
overflow-y: scroll;
|
|
overflow-x: hidden;
|
|
// border-right: 1px solid rgba(0, 0, 0, 0.12);
|
|
}
|
|
.listsItem {
|
|
position: relative;
|
|
transition: .3s ease;
|
|
transition-property: color, background-color;
|
|
background-color: transparent;
|
|
&:hover:not(.active) {
|
|
background-color: @color-theme_2-hover;
|
|
cursor: pointer;
|
|
}
|
|
&.active {
|
|
// background-color:
|
|
color: @color-theme;
|
|
}
|
|
&.selected {
|
|
background-color: @color-theme_2-active;
|
|
}
|
|
&.clicked {
|
|
background-color: @color-theme_2-hover;
|
|
}
|
|
&.editing {
|
|
padding: 0 10px;
|
|
background-color: @color-theme_2-hover;
|
|
.listsLabel {
|
|
display: none;
|
|
}
|
|
.listsInput {
|
|
display: block;
|
|
}
|
|
}
|
|
}
|
|
.listsLabel {
|
|
display: block;
|
|
height: 100%;
|
|
padding: 0 10px;
|
|
font-size: 13px;
|
|
line-height: 36px;
|
|
.mixin-ellipsis-1;
|
|
}
|
|
|
|
.list {
|
|
overflow: hidden;
|
|
height: 100%;
|
|
flex: auto;
|
|
display: flex;
|
|
flex-flow: column nowrap;
|
|
// .noItem {
|
|
|
|
// }
|
|
}
|
|
|
|
|
|
each(@themes, {
|
|
:global(#container.@{value}) {
|
|
.listsSelect {
|
|
:global(.list) {
|
|
li {
|
|
background-color: ~'@{color-@{value}-theme_2-background_2}';
|
|
&:hover {
|
|
background-color: ~'@{color-@{value}-btn-hover}';
|
|
}
|
|
&:active {
|
|
background-color: ~'@{color-@{value}-btn-active}';
|
|
}
|
|
}
|
|
}
|
|
}
|
|
.listsItem {
|
|
&:hover:not(.active) {
|
|
background-color: ~'@{color-@{value}-theme_2-hover}';
|
|
}
|
|
&.active {
|
|
color: ~'@{color-@{value}-theme}';
|
|
}
|
|
&.select {
|
|
background-color: ~'@{color-@{value}-theme_2-active}';
|
|
}
|
|
&.clicked {
|
|
background-color: ~'@{color-@{value}-theme_2-hover}';
|
|
}
|
|
&.editing {
|
|
background-color: ~'@{color-@{value}-theme_2-hover}';
|
|
}
|
|
}
|
|
}
|
|
})
|
|
|
|
</style>
|