mediaManagePlatform/src/views/dashboard/index.vue

<template>
  <div class="new-container">
    <div class="new-text">最新视频</div>
    <div class="new-content">
      <el-row :gutter="20">
        <el-col v-for="item in videoData.list" :key="item.id" :span="6">
          <public-video :media-data="item" @handleVideoClick="handleVideoClick" />
        </el-col>
      </el-row>
    </div>
  </div>
</template>
<script>
import PublicVideo from '@/layout/components/PublicVideo'
import { mapGetters, mapActions } from 'vuex'

export default {
  name: 'Dashboard',
  components: {
    PublicVideo
  },
  data() {
    return {
      currentVideo: ''
    }
  },
  computed: {
    ...mapGetters([
      'videoData',
      'navMenuData'
    ])
  },
  created() {
    this.getVideos({ limit: 12, page: 1 })
  },
  methods: {
    ...mapActions({
      getVideos: 'videos/fetchVideoList'
    }),
    handleVideoClick(videoObj) {
      if (!this.currentVideo) {
        this.currentVideo = videoObj
        videoObj['video'].play()
      } else {
        if (this.currentVideo['id'] === videoObj['id']) {
          if (!videoObj['playState']) {
            videoObj['video'].play()
          } else {
            videoObj['video'].pause()
          }
        } else {
          this.currentVideo['video'].pause()
          this.currentVideo = videoObj
          videoObj['video'].play()
        }
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.new {
  &-container {
    padding: 30px;
    height: 100vh;
    overflow-y: auto;
    background: #f2f4f8;
  }
  &-content {
    margin-bottom: 30px;
  }
  &-text {
    font-size: 30px;
    line-height: 46px;
  }
}
.el-row {
  background: #f2f4f8;
}
.el-col {
  border-radius: 4px;
  margin: 10px auto;
}
</style>