From ff01abe88c645b05703f45b26627c912838e6519 Mon Sep 17 00:00:00 2001
From: haiyangcui <cuiocean@gmail.com>
Date: Fri, 30 Oct 2020 11:22:09 +0100
Subject: [PATCH] =?UTF-8?q?=E6=94=B9=E8=BF=9B=E6=8E=A8=E8=8D=90=E9=A1=B5?=
 =?UTF-8?q?=E9=9D=A2=E7=9A=84=E8=BF=87=E6=BB=A4=E5=8A=9F=E8=83=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/Recommandation.vue | 40 +++++++++++++------------------
 1 file changed, 17 insertions(+), 23 deletions(-)

diff --git a/src/components/Recommandation.vue b/src/components/Recommandation.vue
index ec4bb28..8574f5c 100644
--- a/src/components/Recommandation.vue
+++ b/src/components/Recommandation.vue
@@ -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,