backup/ZY-Player
1
0
Fork 0
mirror of https://github.com/cuiocean/ZY-Player.git synced 2026-05-05 20:44:52 +08:00
Code Issues Projects Releases Wiki Activity

改进推荐页面的过滤功能

Browse Source
This commit is contained in:
haiyangcui
2020-10-30 11:22:09 +01:00
parent 962f6b46c3
commit ff01abe88c
1 changed files with 17 additions and 23 deletions
Download Patch File Download Diff File Expand all files Collapse all files

40
src/components/Recommandation.vue
View File

@@ -3,7 +3,7 @@
<div class="listpage-content">
<div class="listpage-header">
<el-switch v-model="viewMode" active-text="海报" active-value="picture" inactive-text="列表" inactive-value="list" @change="updateViewMode"></el-switch>
<el-select v-model="selectedAreas" multiple collapse-tags style="margin-left: 20px;" placeholder="地区" @change="typeChangeEvent">
<el-select v-model="selectedAreas" multiple collapse-tags style="margin-left: 20px;" placeholder="地区">
<el-option
v-for="item in areas"
:key="item"
@@ -11,7 +11,7 @@
:value="item">
</el-option>
</el-select>
<el-select v-model="selectedTypes" multiple collapse-tags style="margin-left: 20px;" placeholder="类型" @change="typeChangeEvent">
<el-select v-model="selectedTypes" multiple collapse-tags style="margin-left: 20px;" placeholder="类型">
<el-option
v-for="item in types"
:key="item"
@@ -24,34 +24,34 @@
<div class="listpage-body" id="recommandataions-table" v-show="viewMode === 'list'">
<el-table size="mini" fit height="100%" row-key="id"
ref="recommandataionsTable"
:data="recommandations"
:data="filteredRecommandations"
@row-click="detailEvent">
<el-table-column
prop="name"
label="片名">
</el-table-column>
<el-table-column
:sort-by="['detail.type', 'name']"
sortable
:sort-method="sortByType"
prop="detail.area"
label="地区"
width="100">
</el-table-column>
<el-table-column
prop="detail.type"
label="类型"
width="100">
</el-table-column>
<el-table-column
sortable
:sort-by="['detail.year', 'name']"
prop="detail.year"
label="上映"
width="100"
align="center">
</el-table-column>
<el-table-column v-if="recommandations.some(e => e.detail.note)"
<el-table-column v-if="filteredRecommandations.some(e => e.detail.note)"
prop="detail.note"
width="120"
label="备注">
</el-table-column>
<el-table-column v-if="recommandations.some(e => e.rate)"
<el-table-column v-if="filteredRecommandations.some(e => e.rate)"
prop="rate"
width="120"
label="豆瓣评分">
@@ -71,12 +71,12 @@
</div>
<div class="body zy-scroll" id="star-picture" v-show="viewMode === 'picture'">
<div class="show-img">
<Waterfall ref="waterfall" :list="recommandations" :gutter="20" :width="240"
<Waterfall ref="waterfall" :list="filteredRecommandations" :gutter="20" :width="240"
:breakpoints="{ 1200: { rowPerView: 4 } }"
animationEffect="fadeInUp"
backgroundColor="rgba(0, 0, 0, 0)">
<template slot="item" slot-scope="props">
<div class="card" v-if="showCard(props.data)">
<div class="card">
<div class="img">
<div class="rate" v-if="props.data.rate && props.data.rate !== '暂无评分'">
<span>豆瓣: {{props.data.rate}}</span>
@@ -160,6 +160,11 @@ export default {
set (val) {
this.SET_SHARE(val)
}
},
filteredRecommandations () {
var filteredData = this.recommandations.filter(x => (this.selectedAreas.length === 0) || this.selectedAreas.includes(x.detail.area))
filteredData = filteredData.filter(x => (this.selectedTypes.length === 0) || this.selectedTypes.includes(x.detail.type))
return filteredData
}
},
watch: {
@@ -169,17 +174,6 @@ export default {
},
methods: {
...mapMutations(['SET_VIEW', 'SET_DETAIL', 'SET_VIDEO', 'SET_SHARE']),
showCard (cardData) {
var filteredByAreas = this.selectedAreas.length === 0 || this.selectedAreas.includes(cardData.detail.area)
var filteredByTypes = this.selectedTypes.length === 0 || this.selectedTypes.includes(cardData.detail.type)
return filteredByAreas && filteredByTypes
},
typeChangeEvent () {
this.$refs.waterfall.refresh()
},
sortByType (a, b) {
return a.detail.type.localeCompare(b.detail.type)
},
detailEvent (e) {
this.detail = {
show: true,