android-cloud-H5/pages/activity/invite-user/guide-pc.vue

<template>
  <div class="bg-guide">
    <video v-for="item in topADList" id="ad" :key="item.id" class="w345h120" :poster="item.imgUrls[0]" :src="item.videoUrl" @click="playAd()" />
    <v-tabs v-model="tab" color="#3666F2" background-color="transparent" style="height: 42px;">
      <v-tab v-for="item in videoList" :key="item.plateId" style="height: 42px;">{{item.plateName}}</v-tab>
      <v-tabs-items v-model="tab">
        <v-tab-item v-for="item in videoList" :key="item.plateId" style="padding: 10px;background: #FAFAFA;min-height: calc(100vh - 162px);">
          <div v-for="ele in item.videoCourseList" :key="ele.id" class="video-card" @click="play(item, ele)">
            <video :id="'el-video-' + ele.id" class="w165h148" preload="auto" :poster="videoURL(ele.coverImageKey)" :src="videoURL(ele.videoKey)" />
            <div class="video-card-title">{{ele.videoName}}</div>
          </div>
        </v-tab-item>
      </v-tabs-items>
    </v-tabs>
  </div>
</template>

<script>
import { fileKeyToUrl } from '@/plugins/file-center.js';
export default {
  name: 'GuidePc',
  auth: false,
  data() {
    return {
      tab: null,
      videoList: [],
      topADList: [],
      token: ''
    }
  },
  fetch() {
    this.token = this.$route.query.token;
  },
  computed: {
    videoURL() {
      return (key) => {
        return fileKeyToUrl(key)
      }
    }
  },
  created() {
    this.getActiveInfo()
    this.getAdInfoByAdPlace()
  },
  methods: {
    async getActiveInfo() {
      const res = await this.$axios.$get('/activity/videoCourse/client/list');
      this.videoList = res.data;
    },
    async getAdInfoByAdPlace() {
      const data = {
          id: 1,
          adPlace: 20,
          os: 1
        }
      const res = await this.$axios.$post('/public/v5/advertising/getAdInfoByAdPlace', data);
      this.topADList = res.data;
    },
    play(item, ele) {
      const elVideo = document.getElementById('el-video-' + ele.id)
      if (elVideo.requestFullscreen) {
        elVideo.requestFullscreen()
        elVideo.play()
      } else if (elVideo.mozRequestFullscreen) {
        elVideo.mozRequestFullscreen()
        elVideo.play()
      } else if (elVideo.webkitRequestFullscreen) {
        elVideo.webkitRequestFullscreen()
        elVideo.play()
      } else {
        elVideo.requestFullscreen()
        elVideo.play()
      }
      this.submit(item, ele, 1)
    },
    playAd(item, ele) {
      const elVideo = document.getElementById('ad')
      if (elVideo.requestFullscreen) {
        elVideo.requestFullscreen()
        elVideo.play()
      } else if (elVideo.mozRequestFullscreen) {
        elVideo.mozRequestFullscreen()
        elVideo.play()
      } else if (elVideo.webkitRequestFullscreen) {
        elVideo.webkitRequestFullscreen()
        elVideo.play()
      }
      this.submit(item, ele, 2)
    },
    submit(item, ele, flag) {
      const data = flag === 1 ? { id: ele.id, plateId: item.plateId, type: flag, videoId: ele.id } : { type: 2 }
      this.$axios.$post('/activity/v5/advertising/getAdInfoByAdPlace', data, {headers: {Authorization: this.token}});
    }
  }
}
</script>
<style lang="scss">
@media (min-width: 0px) {
  .bg-guide {
    & .v-tabs-bar {
      height: 42px !important;
    }
  }
}
</style>
<style lang="scss" scoped>
.bgFAFAFA {
  background: #FAFAFA;
}
@media (min-width: 0px) {
  .video-card {
    width: 165px;
    height: 148px;
    border-radius: 5px;
    position: relative;
    display: inline-block;
    margin-right: 30px;
    &:nth-of-type(4n+0){
      margin-right: 0px;
    }
    & .video-card-title {
      width: 100%;
      height: 45px;
      line-height: 45px;
      text-align: center;
      font-size: 14px;
      font-weight: 500;
      color: #1C1C1E;
      background: #fff;
      border-radius: 0 0 9px 9px;
      position: absolute;
      left: 0;
      bottom: 0;
    }
  }
  .bg-guide {
    min-height: 100vh;
    overflow: hidden;
    & .v-tab {
      font-size: 12px;
      min-width: 88px;
    }
    & .v-tabs-bar {
      height: 42px !important;
    }
  }
  .w345h120 {
    width: 345px;
    height: 120px;
    margin: 10px auto;
    display: block;
    background: #FAFAFA;
  }
  .w165h148 {
    width: 165px;
    height: 148px;
    margin-bottom: 10px;
    margin-right: 30px;
    border-radius: 10px;
    &:nth-of-type(4n+0){
      margin-right: 0px;
    }
  }
}
</style>