复用 HotSearch card

src/components/card/HotSearch.vue

@@ -2,30 +2,58 @@
   <el-card class="box-card" :body-style="{ paddingTop: '0px' }">
     <div slot="header" class="clearfix">
       <img src="@/assets/img/icon/like.png" alt="" class="recommand-icon">
-      <span>热搜排行</span>
+      <span>{{ cardProp.title }}</span>
     </div>
-    <div
-      v-for="(search, index) in dataList"
-      :key="index"
-      :title="search.keyword"
-      class="item"
-    >
-      <div :class="rank(index + 1)">{{ index + 1 }}</div>
-      <router-link target="_blank" :to="`/search?keyword=${search.keyword}&pageNumber=1`">
-        {{ search.keyword }}
-      </router-link>
+    <div v-if="cardProp.type === 'hotSearch'">
+      <div
+        v-for="(search, index) in cardProp.dataList"
+        :key="index"
+        :title="search.keyword"
+        class="item"
+      >
+        <div :class="rank(index + 1)">{{ index + 1 }}</div>
+        <router-link target="_blank" :to="`/search?keyword=${search.keyword}&pageNumber=1`">
+          {{ search.keyword }}
+        </router-link>
+      </div>
+    </div>
+    <div v-if="cardProp.type === 'hotWatch'">
+      <div
+        v-for="(video, index) in cardProp.dataList"
+        :key="index"
+        :title="video.title"
+        class="item"
+      >
+        <div :class="rank(index + 1)">{{ index + 1 }}</div>
+        <router-link target="_blank" :to="`/video/${video.videoId}`">
+          <span style="left: 0;margin-bottom: 0px;color: blue;">{{ video.title | ellipsis }}</span>
+        </router-link>
+      </div>
     </div>
   </el-card>
 </template>
 
 <script>
-import { hotKeyword } from '@/api/search'
-
 export default {
   name: 'HotSearch',
+  filters: {
+    ellipsis(value) {
+      if (!value) return ''
+      const max = 15
+      if (value.length > max) {
+        return value.slice(0, max) + '...'
+      }
+      return value
+    }
+  },
+  props: {
+    cardProp: {
+      type: Object,
+      default: null
+    }
+  },
   data() {
     return {
-      dataList: []
     }
   },
   computed: {
@@ -35,26 +63,25 @@ export default {
         // console.log(index)
         if (index === 1) {
           return 'first'
-        }
-        if (index === 2) {
+        } else if (index === 2) {
           return 'second'
-        }
-        if (index === 3) {
+        } else if (index === 3) {
           return 'third'
-        }
-        if (index > 3) {
+        } else if (index === 4) {
+          return 'fourth'
+        } else if (index === 5) {
+          return 'fifth'
+        } else if (index === 6) {
+          return 'sixth'
+        } else if (index === 7) {
+          return 'seventh'
+        } else {
           return 'other'
         }
       }
     }
   },
   created() {
-    hotKeyword().then(res => {
-      if (res.code === 0) {
-        this.dataList = res.data
-      } else {
-      }
-    })
   },
   methods: {}
 }
@@ -129,7 +156,7 @@ export default {
 }
 .first {
   display: inline-block;
-  background-color: rgb(255, 74, 74);
+  background-color: rgb(255, 0, 0);
   width: 22px;
   height: 22px;
   line-height: 20px;
@@ -140,7 +167,7 @@ export default {
 }
 .second {
   display: inline-block;
-  background-color: rgb(255, 119, 1);
+  background-color: rgb(255, 128, 0);
   width: 22px;
   height: 22px;
   line-height: 20px;
@@ -151,7 +178,51 @@ export default {
 }
 .third {
   display: inline-block;
-  background-color: rgb(255, 180, 0);
+  background-color: rgb(255, 215, 0);
+  width: 22px;
+  height: 22px;
+  line-height: 20px;
+  text-align: center;
+  color: #ffffff;
+  font-size: 15px;
+  border-radius: 5px;
+}
+.fourth {
+  display: inline-block;
+  background-color: rgb(0, 255, 0);
+  width: 22px;
+  height: 22px;
+  line-height: 20px;
+  text-align: center;
+  color: #ffffff;
+  font-size: 15px;
+  border-radius: 5px;
+}
+.fifth {
+  display: inline-block;
+  background-color: rgb(0, 255, 255);
+  width: 22px;
+  height: 22px;
+  line-height: 20px;
+  text-align: center;
+  color: #ffffff;
+  font-size: 15px;
+  border-radius: 5px;
+}
+.sixth {
+  display: inline-block;
+  background-color: rgb(0, 0, 255);
+  width: 22px;
+  height: 22px;
+  line-height: 20px;
+  text-align: center;
+  color: #ffffff;
+  font-size: 15px;
+  border-radius: 5px;
+}
+.seventh {
+  display: inline-block;
+  background-color: rgb(128, 0, 255);
   width: 22px;
   height: 22px;
   line-height: 20px;

src/components/card/HotVideo.vue

@@ -1,176 +0,0 @@
-<template>
-  <el-card class="box-card" :body-style="{ paddingTop: '0px' }">
-    <div slot="header" class="clearfix">
-      <img src="@/assets/img/icon/like.png" alt="" class="recommand-icon">
-      <span>热播排行</span>
-    </div>
-    <div
-      v-for="(video, index) in dataList"
-      :key="index"
-      :title="video.title"
-      class="item"
-    >
-      <div :class="rank(index + 1)">{{ index + 1 }}</div>
-      <router-link target="_blank" :to="`/video/${video.videoId}`">
-        <span style="left: 0;margin-bottom: 0px;color: blue;">{{ video.title | ellipsis }}</span>
-      </router-link>
-    </div>
-  </el-card>
-</template>
-
-<script>
-import { getHotVideo } from '@/api/video'
-
-export default {
-  name: 'HotVideo',
-  filters: {
-    ellipsis(value) {
-      if (!value) return ''
-      const max = 15
-      if (value.length > max) {
-        return value.slice(0, max) + '...'
-      }
-      return value
-    }
-  },
-  data() {
-    return {
-      dataList: []
-    }
-  },
-  computed: {
-    rank() {
-      return (index) => {
-        // index是使用时的参数
-        // console.log(index)
-        if (index === 1) {
-          return 'first'
-        }
-        if (index === 2) {
-          return 'second'
-        }
-        if (index === 3) {
-          return 'third'
-        }
-        if (index > 3) {
-          return 'other'
-        }
-      }
-    }
-  },
-  created() {
-    getHotVideo().then(res => {
-      if (res.code === 0) {
-        this.dataList = res.data
-      } else {
-      }
-    })
-  },
-  methods: {}
-}
-</script>
-
-<style scoped>
-.item {
-  height: 25px;
-  margin-top: 4px;
-  margin-bottom: 16px;
-  cursor: pointer;
-  transition: all 0.6s; /*所有属性变化在0.6秒内执行动画*/
-
-  overflow: hidden;
-  text-overflow: ellipsis;
-  display: -webkit-box;
-  -webkit-line-clamp: 1; /*行数*/
-  -webkit-box-orient: vertical;
-}
-.item:hover {
-  transform: scale(1.1); /*鼠标放上之后元素变成1.1倍大小*/
-}
-
-.clearfix:before,
-.clearfix:after {
-  display: table;
-  content: "";
-}
-.clearfix:after {
-  clear: both;
-}
-
-.clearfix {
-  position: relative;
-}
-.clearfix span {
-  font-size: 20px;
-  position: absolute;
-  bottom: 8px;
-  left: 35px;
-}
-.box-card {
-  width: 100%;
-}
-
-.recommand-icon {
-  width: 30px;
-}
-
-@media screen and (max-width: 768px) {
-  .clearfix span {
-    font-size: 15px;
-    position: absolute;
-    bottom: 8px;
-    left: 35px;
-  }
-  .text {
-    font-size: 13px;
-  }
-}
-
-.other {
-  display: inline-block;
-  background-color: rgb(176, 183, 194);
-  width: 22px;
-  height: 22px;
-  line-height: 20px;
-  text-align: center;
-  color: #ffffff;
-  font-size: 15px;
-  border-radius: 5px;
-}
-.first {
-  display: inline-block;
-  background-color: rgb(255, 74, 74);
-  width: 22px;
-  height: 22px;
-  line-height: 20px;
-  text-align: center;
-  color: #ffffff;
-  font-size: 15px;
-  border-radius: 5px;
-}
-.second {
-  display: inline-block;
-  background-color: rgb(255, 119, 1);
-  width: 22px;
-  height: 22px;
-  line-height: 20px;
-  text-align: center;
-  color: #ffffff;
-  font-size: 15px;
-  border-radius: 5px;
-}
-.third {
-  display: inline-block;
-  background-color: rgb(255, 180, 0);
-  width: 22px;
-  height: 22px;
-  line-height: 20px;
-  text-align: center;
-  color: #ffffff;
-  font-size: 15px;
-  border-radius: 5px;
-}
-.el-card__body {
-  padding-top: 0px;
-}
-</style>

src/components/upload/EditVideo.vue

@@ -81,8 +81,8 @@
                 <el-date-picker
                   v-model="videoInfoForm.pubDate"
                   type="datetime"
-                  placeholder="选择发布的时间">
-                </el-date-picker>
+                  placeholder="选择发布的时间"
+                />
               </el-form-item>
             </el-form>
           </div>
@@ -114,7 +114,7 @@ export default {
         headers: {
           Authorization: ''
         },
-        withCredentials: true,
+        withCredentials: true
       },
       attrs: {
         accept: 'video/*'
@@ -137,7 +137,7 @@ export default {
         description: null,
         pubDate: null
       },
-      ossToken: null,
+      ossToken: null
     }
   },
   created() {
@@ -174,7 +174,7 @@ export default {
         const resData = res.data
         this.options.target = resData.ossUrl
         this.options.chunkSize = resData.maxSize
-        this.options.headers.Authorization = "Bearer " + resData.token
+        this.options.headers.Authorization = 'Bearer ' + resData.token
       } else {
         this.$notify({
           title: '提示',
@@ -216,7 +216,7 @@ export default {
   methods: {
     // ****************************************************************************************************************
     onFileAdded(file) {
-      if (file.file.size > 1024*1024*1024*5) {
+      if (file.file.size > 1024 * 1024 * 1024 * 5) {
         file.cancel()
         this.$notify(
           {
@@ -378,7 +378,7 @@ export default {
           duration: 3000
         })
       })
-    },
+    }
   }
 }
 </script>

src/views/home/Index.vue

@@ -6,7 +6,7 @@
           <site-notice />
         </el-row>
         <el-row style="padding-right: 5px; padding-left: 5px; padding-bottom: 5px">
-          <hot-video />
+          <hot-search :card-prop="cardProp" />
         </el-row>
       </el-col>
       <el-col :md="18">
@@ -37,13 +37,13 @@
 
 <script>
 import VideoCard from '@/components/card/VideoCard'
-import HotVideo from '@/components/card/HotVideo'
+import HotSearch from '@/components/card/HotSearch'
 import SiteNotice from '@/components/card/SiteNotice'
-import { videoRecommend } from '@/api/video'
+import { getHotVideo, videoRecommend } from '@/api/video'
 
 export default {
   name: 'Index',
-  components: { VideoCard, HotVideo, SiteNotice },
+  components: { VideoCard, HotSearch, SiteNotice },
   data() {
     return {
       // 屏幕宽度, 为了控制分页条的大小
@@ -51,7 +51,12 @@ export default {
       nextId: '1',
       dataList: [],
       loading: false,
-      max: 0
+      max: 0,
+      cardProp: {
+        title: null,
+        type: null,
+        dataList: []
+      }
     }
   },
   created() {
@@ -65,6 +70,14 @@ export default {
         this.screenWidth = window.screenWidth
       }
     }
+
+    getHotVideo().then(resp => {
+      if (resp.code === 0) {
+        this.cardProp.dataList = resp.data
+        this.cardProp.title = '热播排行'
+        this.cardProp.type = 'hotWatch'
+      }
+    })
   },
   methods: {
     videoRecommendWrapper(nextId) {

src/views/home/Search.vue

@@ -12,7 +12,7 @@
 
     <el-row class="movie-list">
       <el-col :md="6">
-        <hot-search />
+        <hot-search :card-prop="cardProp" />
       </el-col>
       <el-col :md="18">
         <el-col v-for="(video,index) in dataList" :key="index" :md="6" :sm="8" :xs="12">
@@ -50,7 +50,7 @@
 import VideoCard from '@/components/card/VideoCard'
 import HotSearch from '@/components/card/HotSearch'
 
-import { videoQuery } from '@/api/search'
+import { videoQuery, hotKeyword } from '@/api/search'
 
 export default {
   name: 'Search',
@@ -63,9 +63,23 @@ export default {
       length: 0,
       pageSize: 12,
       dataList: [],
-      showEmpty: false
+      showEmpty: false,
+      cardProp: {
+        title: null,
+        type: null,
+        dataList: []
+      }
     }
   },
+  mounted() {
+    hotKeyword().then(resp => {
+      if (resp.code === 0) {
+        this.cardProp.dataList = resp.data
+        this.cardProp.title = '热搜排行'
+        this.cardProp.type = 'hotSearch'
+      }
+    })
+  },
   created() {
     this.keyword = this.$route.query.keyword
     this.currentPage = parseInt(this.$route.query.pageNumber)