推荐、历史、收藏页面进行类film改造

src/components/History.vue

@@ -1,13 +1,13 @@
 <template>
   <div class="listpage" id="history">
     <div class="listpage-header" id="history-header">
-        <el-switch v-model="viewMode" active-text="海报" active-value="picture" inactive-text="列表" inactive-value="table" @change="updateViewMode"></el-switch>
+        <el-switch v-model="setting.historyViewMode" active-text="海报" active-value="picture" inactive-text="列表" inactive-value="table" @change="updateViewMode"></el-switch>
         <el-button @click.stop="exportHistory" icon="el-icon-upload2">导出</el-button>
         <el-button @click.stop="importHistory" icon="el-icon-download">导入</el-button>
         <el-button @click.stop="clearAllHistory" icon="el-icon-delete-solid">清空</el-button>
     </div>
     <div class="listpage-body" id="history-body">
-      <div class="show-table" id="history-table" v-show="viewMode === 'table'">
+      <div class="show-table" id="history-table" v-if="setting.historyViewMode === 'table'">
         <el-table size="mini" fit height="100%" :data="history" row-key="id" @row-click="detailEvent">
           <el-table-column
             prop="name"
@@ -52,7 +52,7 @@
           </el-table-column>
         </el-table>
       </div>
-      <div class="show-picture" id="star-picture" v-show="viewMode === 'picture'">
+      <div class="show-picture" id="star-picture" v-if="setting.historyViewMode === 'picture'">
         <Waterfall ref="historyWaterfall" :list="history" :gutter="20" :width="240"
           :breakpoints="{
             1200: { //当屏幕宽度小于等于1200
@@ -111,8 +111,7 @@ export default {
   data () {
     return {
       history: [],
-      sites: [],
-      viewMode: setting.historyViewMode
+      sites: []
     }
   },
   components: {
@@ -150,19 +149,24 @@ export default {
       set (val) {
         this.SET_SHARE(val)
       }
+    },
+    setting: {
+      get () {
+        return this.$store.getters.getSetting
+      },
+      set (val) {
+        this.SET_SETTING(val)
+      }
     }
   },
   watch: {
     view () {
       this.getAllhistory()
       this.getAllsites()
-      if (this.$refs.historyWaterfall) {
-        this.$refs.historyWaterfall.refresh()
-      }
     }
   },
   methods: {
-    ...mapMutations(['SET_VIEW', 'SET_DETAIL', 'SET_VIDEO', 'SET_SHARE']),
+    ...mapMutations(['SET_VIEW', 'SET_DETAIL', 'SET_VIDEO', 'SET_SHARE', 'SET_SETTING']),
     fmtMSS (s) {
       return (s - (s %= 60)) / 60 + (s > 9 ? ':' : ':0') + s
     },
@@ -309,33 +313,20 @@ export default {
         }
       })
     },
-    getViewMode () {
-      setting.find().then(res => {
-        this.viewMode = res.historyViewMode
-      })
-    },
     updateViewMode () {
+      setTimeout(() => { if (this.$refs.historyWaterfall) this.$refs.historyWaterfall.refresh() }, 1000)
       setting.find().then(res => {
-        res.historyViewMode = this.viewMode
+        res.historyViewMode = this.setting.historyViewMode
         setting.update(res)
       })
     }
   },
   mounted () {
     this.rowDrop()
-    window.addEventListener('resize', () => {
-      if (this.$refs.historyWaterfall && this.view === 'History') {
-        this.$refs.historyWaterfall.resize()
-        this.$refs.historyWaterfall.refresh()
-        setTimeout(() => {
-          this.$refs.historyWaterfall.refresh()
-        }, 500)
-      }
-    }, false)
+    window.addEventListener('resize', () => { }, true)
   },
   created () {
     this.getAllhistory()
-    this.getViewMode()
   }
 }
 </script>

src/components/Recommendation.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="listpage" id="recommendataions">
     <div class="listpage-header" id="recommendataions-header">
-        <el-switch v-model="viewMode" active-text="海报" active-value="picture" inactive-text="列表" inactive-value="table" @change="updateViewMode"></el-switch>
+        <el-switch v-model="setting.recommendationViewMode" active-text="海报" active-value="picture" inactive-text="列表" inactive-value="table" @change="updateViewMode"></el-switch>
         <el-button type="text">视频数：{{ recommendations.length }}</el-button>
         <el-select v-model="selectedAreas" size="small" multiple collapse-tags placeholder="地区" popper-class="popper" :popper-append-to-body="false">
           <el-option
@@ -30,7 +30,7 @@
         <el-button :loading="loading" @click.stop="updateEvent" icon="el-icon-refresh">更新推荐</el-button>
     </div>
     <div class="listpage-body" id="recommendataions-body" >
-      <div class="show-table" id="star-table" v-show="viewMode === 'table'">
+      <div class="show-table" id="star-table" v-if="setting.recommendationViewMode === 'table'">
         <el-table size="mini" fit height="100%" row-key="id"
         ref="recommendataionsTable"
         :data="filteredRecommendations"
@@ -79,7 +79,7 @@
           </el-table-column>
         </el-table>
       </div>
-      <div class="show-picture" id="star-picture" v-show="viewMode === 'picture'">
+      <div class="show-picture" id="star-picture" v-if="setting.recommendationViewMode === 'picture'">
         <Waterfall ref="recommendataionsWaterfall" :list="filteredRecommendations" :gutter="20" :width="240"
           :breakpoints="{
             1200: { //当屏幕宽度小于等于1200
@@ -136,7 +136,6 @@ export default {
     return {
       recommendations: [],
       sites: [],
-      viewMode: 'picture',
       loading: false,
       types: [],
       selectedTypes: [],
@@ -182,6 +181,14 @@ export default {
         this.SET_SHARE(val)
       }
     },
+    setting: {
+      get () {
+        return this.$store.getters.getSetting
+      },
+      set (val) {
+        this.SET_SETTING(val)
+      }
+    },
     filteredRecommendations () {
       var filteredData = this.recommendations.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))
@@ -192,9 +199,6 @@ export default {
     view () {
       if (this.view === 'Recommendation') {
         this.getRecommendations()
-        if (this.$refs.recommendataionsWaterfall) {
-          this.$refs.recommendataionsWaterfall.refresh()
-        }
       }
     },
     sortKeyword () {
@@ -220,7 +224,7 @@ export default {
     }
   },
   methods: {
-    ...mapMutations(['SET_VIEW', 'SET_DETAIL', 'SET_VIDEO', 'SET_SHARE']),
+    ...mapMutations(['SET_VIEW', 'SET_DETAIL', 'SET_VIDEO', 'SET_SHARE', 'SET_SETTING']),
     detailEvent (e) {
       this.detail = {
         show: true,
@@ -314,32 +318,19 @@ export default {
       this.types = [...new Set(this.recommendations.map(ele => ele.detail.type))].filter(x => x)
       this.areas = [...new Set(this.recommendations.map(ele => ele.detail.area))].filter(x => x)
     },
-    getViewMode () {
-      setting.find().then(res => {
-        this.viewMode = res.recommendationViewMode
-      })
-    },
     updateViewMode () {
+      setTimeout(() => { if (this.$refs.recommendataionsWaterfall) this.$refs.recommendataionsWaterfall.refresh() }, 1000)
       setting.find().then(res => {
-        res.recommendationViewMode = this.viewMode
+        res.recommendationViewMode = this.setting.recommendationViewMode
         setting.update(res)
       })
     }
   },
   created () {
     this.getRecommendations()
-    this.getViewMode()
   },
   mounted () {
-    window.addEventListener('resize', () => {
-      if (this.$refs.recommendataionsWaterfall && this.view === 'Recommendation') {
-        this.$refs.recommendataionsWaterfall.resize()
-        this.$refs.recommendataionsWaterfall.refresh()
-        setTimeout(() => {
-          this.$refs.recommendataionsWaterfall.refresh()
-        }, 500)
-      }
-    }, false)
+    window.addEventListener('resize', () => { }, true)
   }
 }
 </script>

src/components/Star.vue

@@ -1,14 +1,14 @@
 <template>
   <div class="listpage" id="star">
     <div class="listpage-header" id="star-header">
-        <el-switch v-model="viewMode" active-text="海报" active-value="picture" inactive-text="列表" inactive-value="table" @change="updateViewMode"></el-switch>
+        <el-switch v-model="setting.starViewMode" active-text="海报" active-value="picture" inactive-text="列表" inactive-value="table" @change="updateViewMode"></el-switch>
         <el-button @click.stop="exportFavoritesEvent" icon="el-icon-upload2">导出</el-button>
         <el-button @click.stop="importFavoritesEvent" icon="el-icon-download">导入</el-button>
         <el-button @click.stop="clearFavoritesEvent" icon="el-icon-delete-solid">清空</el-button>
         <el-button @click.stop="updateAllEvent" icon="el-icon-refresh">同步所有收藏</el-button>
     </div>
     <div class="listpage-body" id="star-body">
-      <div class="show-table" id="star-table"  v-show="viewMode === 'table'">
+      <div class="show-table" id="star-table"  v-if="setting.starViewMode === 'table'">
         <el-table size="mini" fit height="100%" row-key="id"
         ref="starTable"
         :data="list"
@@ -78,7 +78,7 @@
           </el-table-column>
         </el-table>
       </div>
-      <div class="show-picture" id="star-picture" v-show="viewMode === 'picture'">
+      <div class="show-picture" id="star-picture" v-if="setting.starViewMode === 'picture'">
         <Waterfall ref="starWaterfall" :list="list" :gutter="20" :width="240"
           :breakpoints="{
             1200: { //当屏幕宽度小于等于1200
@@ -146,7 +146,6 @@ export default {
     return {
       list: [],
       sites: [],
-      viewMode: 'picture',
       numNoUpdate: 0
     }
   },
@@ -185,6 +184,14 @@ export default {
       set (val) {
         this.SET_SHARE(val)
       }
+    },
+    setting: {
+      get () {
+        return this.$store.getters.getSetting
+      },
+      set (val) {
+        this.SET_SETTING(val)
+      }
     }
   },
   watch: {
@@ -192,9 +199,6 @@ export default {
       if (this.view === 'Star') {
         this.getAllsites()
         this.getFavorites()
-        if (this.$refs.starWaterfall) {
-          this.$refs.starWaterfall.refresh()
-        }
       }
     },
     numNoUpdate () {
@@ -206,7 +210,7 @@ export default {
     }
   },
   methods: {
-    ...mapMutations(['SET_VIEW', 'SET_DETAIL', 'SET_VIDEO', 'SET_SHARE']),
+    ...mapMutations(['SET_VIEW', 'SET_DETAIL', 'SET_VIDEO', 'SET_SHARE', 'SET_SETTING']),
     handleSortChange (column, prop, order) {
       this.updateDatabase()
     },
@@ -458,33 +462,20 @@ export default {
         }
       })
     },
-    getViewMode () {
-      setting.find().then(res => {
-        this.viewMode = res.starViewMode
-      })
-    },
     updateViewMode () {
+      setTimeout(() => { if (this.$refs.starWaterfall) this.$refs.starWaterfall.refresh() }, 1000)
       setting.find().then(res => {
-        res.starViewMode = this.viewMode
+        res.starViewMode = this.setting.starViewMode
         setting.update(res)
       })
     }
   },
   created () {
     this.getFavorites()
-    this.getViewMode()
   },
   mounted () {
     this.rowDrop()
-    window.addEventListener('resize', () => {
-      if (this.$refs.starWaterfall && this.view === 'Star') {
-        this.$refs.starWaterfall.resize()
-        this.$refs.starWaterfall.refresh()
-        setTimeout(() => {
-          this.$refs.starWaterfall.refresh()
-        }, 500)
-      }
-    }, false)
+    window.addEventListener('resize', () => { }, true)
   }
 }
 </script>