重构歌曲列表
This commit is contained in:
lyswhut
@@ -3,40 +3,7 @@
|
||||
div(:class="$style.header")
|
||||
material-tab(:class="$style.tab" :list="types" 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.content")
|
||||
div(v-if="list.length" :class="$style.list")
|
||||
div(:class="$style.thead")
|
||||
table
|
||||
thead
|
||||
tr
|
||||
th.nobreak.center(style="width: 37px;")
|
||||
material-checkbox(id="search_select_all" v-model="isSelectAll" @change="handleSelectAllData"
|
||||
:indeterminate="isIndeterminate" :title="isSelectAll && !isIndeterminate ? '全不选' : '全选'")
|
||||
th.nobreak(style="width: 25%;") 歌曲名
|
||||
th.nobreak(style="width: 20%;") 歌手
|
||||
th.nobreak(style="width: 22%;") 专辑
|
||||
th.nobreak(style="width: 18%;") 操作
|
||||
th.nobreak(style="width: 10%;") 时长
|
||||
div.scroll(:class="$style.tbody" ref="dom_scrollContent")
|
||||
table
|
||||
tbody
|
||||
tr(v-for='(item, index) in list' :key='item.songmid' @click="handleDoubleClick(index)")
|
||||
td.nobreak.center(style="width: 37px;" @click.stop)
|
||||
material-checkbox(:id="index.toString()" v-model="selectdData" :value="item")
|
||||
td.break(style="width: 25%;")
|
||||
| {{item.name}}
|
||||
//- span.badge.badge-info(v-if="item._types['320k']") 高品质
|
||||
//- span.badge.badge-success(v-if="item._types.ape || item._types.flac") 无损
|
||||
td.break(style="width: 20%;") {{item.singer}}
|
||||
td.break(style="width: 22%;") {{item.albumName}}
|
||||
td(style="width: 18%;")
|
||||
material-list-buttons(:index="index" :search-btn="true" :play-btn="item.source == 'kw' || (!isAPITemp && item.source != 'tx')" :download-btn="item.source == 'kw' || (!isAPITemp && item.source != 'tx')" :remove-btn="false" @btn-click="handleListBtnClick")
|
||||
//- button.btn-info(type='button' v-if="item._types['128k'] || item._types['192k'] || item._types['320k'] || item._types.flac" @click.stop='openDownloadModal(index)') 下载
|
||||
//- button.btn-secondary(type='button' v-if="item._types['128k'] || item._types['192k'] || item._types['320k']" @click.stop='testPlay(index)') 试听
|
||||
//- button.btn-success(type='button' v-if="(item._types['128k'] || item._types['192k'] || item._types['320k']) && userInfo" @click.stop='showListModal(index)') ＋
|
||||
td(style="width: 10%;") {{item.interval || '--/--'}}
|
||||
div(:class="$style.pagination")
|
||||
material-pagination(:count="info.total" :limit="info.limit" :page="info.page" @btn-click="handleTogglePage")
|
||||
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-flow-btn(:show="isShowEditBtn && (source == 'kw' || !isAPITemp)" :remove-btn="false" @btn-click="handleFlowBtnClick")
|
||||
@@ -44,8 +11,6 @@
|
||||
|
||||
<script>
|
||||
import { mapGetters, mapMutations, mapActions } from 'vuex'
|
||||
import { scrollTo } from '../utils'
|
||||
// import music from '../utils/music'
|
||||
export default {
|
||||
name: 'Leaderboard',
|
||||
data() {
|
||||
@@ -81,24 +46,23 @@ export default {
|
||||
if (!o && this.page !== 1) return
|
||||
this.getList(1).then(() => {
|
||||
this.page = this.info.page
|
||||
scrollTo(this.$refs.dom_scrollContent, 0)
|
||||
})
|
||||
},
|
||||
source(n, o) {
|
||||
this.setLeaderboard({ source: n })
|
||||
if (o) this.tabId = this.types[0] && this.types[0].id
|
||||
},
|
||||
selectdData(n) {
|
||||
const len = n.length
|
||||
if (len) {
|
||||
this.isSelectAll = true
|
||||
this.isIndeterminate = len !== this.list.length
|
||||
this.isShowEditBtn = true
|
||||
} else {
|
||||
this.isSelectAll = false
|
||||
this.isShowEditBtn = false
|
||||
}
|
||||
},
|
||||
// selectdData(n) {
|
||||
// const len = n.length
|
||||
// if (len) {
|
||||
// this.isSelectAll = true
|
||||
// this.isIndeterminate = len !== this.list.length
|
||||
// this.isShowEditBtn = true
|
||||
// } else {
|
||||
// this.isSelectAll = false
|
||||
// this.isShowEditBtn = false
|
||||
// }
|
||||
// },
|
||||
list() {
|
||||
this.resetSelect()
|
||||
},
|
||||
@@ -177,9 +141,6 @@ export default {
|
||||
handleTogglePage(page) {
|
||||
this.getList(page).then(() => {
|
||||
this.page = this.info.page
|
||||
this.$nextTick(() => {
|
||||
scrollTo(this.$refs.dom_scrollContent, 0)
|
||||
})
|
||||
})
|
||||
},
|
||||
handleSelectAllData(isSelect) {
|
||||
@@ -218,6 +179,9 @@ export default {
|
||||
break
|
||||
}
|
||||
},
|
||||
handleSongListAction({ action, data }) {
|
||||
console.log(action, data)
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
@@ -250,46 +214,5 @@ export default {
|
||||
overflow: hidden;
|
||||
flex-flow: column nowrap;
|
||||
}
|
||||
.list {
|
||||
position: relative;
|
||||
height: 100%;
|
||||
font-size: 14px;
|
||||
display: flex;
|
||||
flex-flow: column nowrap;
|
||||
// table {
|
||||
// position: relative;
|
||||
// thead {
|
||||
// position: fixed;
|
||||
// width: 100%;
|
||||
// th {
|
||||
// width: 100%;
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
}
|
||||
.thead {
|
||||
flex: none;
|
||||
}
|
||||
.tbody {
|
||||
flex: auto;
|
||||
overflow-y: auto;
|
||||
td {
|
||||
font-size: 12px;
|
||||
:global(.badge) {
|
||||
margin-right: 3px;
|
||||
&:first-child {
|
||||
margin-left: 3px;
|
||||
}
|
||||
&:last-child {
|
||||
margin-right: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.pagination {
|
||||
text-align: center;
|
||||
padding: 15px 0;
|
||||
// left: 50%;
|
||||
// transform: translateX(-50%);
|
||||
}
|
||||
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user