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

<template>
  <div class="bg-guide">
    <v-carousel :show-arrows="false" cycle interval="3000" height="120" hide-delimiter-background class="w345h120" delimiter-icon="mdi-minus">
      <v-carousel-item v-for="item in topADList" :key="item.id">
        <img :src="item.imgUrls[0]" style="width: 100%;height: 100%;" alt="" @click="playAd(item)">
      </v-carousel-item>
    </v-carousel>
    <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, num) in videoList" :key="item.plateId" style="background: #FAFAFA;min-height: calc(100vh - 162px);padding: 10px;">
          <v-container>
            <v-row>
              <v-col v-for="(ele, i) in item.videoCourseList" :key="ele.id" xl="2" lg="2" md="3" sm="3" xs="4" class="video-card">
                <img class="w165h148" :src="videoURL(ele.coverImageKey)" @click="play(item, ele, num, i)" />
              </v-col>
            </v-row>
          </v-container>
        </v-tab-item>
      </v-tabs-items>
    </v-tabs>
    <div v-show="showVideo" class="videobox">
      <div v-for="e in videoList" :key="e.plateId">
        <video 
          v-for="element in e.videoCourseList" :id="'el-video-' + element.id" :key="element.id" :class="element.isShow ? '' : 'hide'" controls :src="videoURL(element.videoKey)" preload="auto" webkit-playsinline="true"
          playsinline="true" x-webkit-airplay="allow" x5-video-player-type="h5" x5-video-player-fullscreen="true" x5-video-orientation="portraint" style="object-fit:contain">
        </video>
      </div>
    </div>
    <img v-if="showVideo" class="wh24" src="~/assets/image/activity/invite-user/guide/Union.png" alt="" @click="close">
  </div>
</template>

<script>
import { fileKeyToUrl } from '@/plugins/file-center.js';
export default {
  name: 'GuidePc',
  auth: false,
  data() {
    return {
      tab: null,
      videoList: [],
      topADList: [],
      token: '',
      showVideo: false,
      index: 0,
      idx: 0
    }
  },
  fetch() {
    this.token = this.$route.query.token;
  },
  computed: {
    videoURL() {
      return (key) => {
        return fileKeyToUrl(key)
      }
    }
  },
  created() {
    this.getActiveInfo()
    this.getAdInfoByAdPlace()
  },
  methods: {
    close() {
      this.showVideo = false
      this.videoList[this.index].videoCourseList[this.idx].isShow = false
      const elVideo = document.getElementById('el-video-' + this.videoList[this.index].videoCourseList[this.idx].id)
      elVideo.pause()
    },
    async getActiveInfo() {
      const res = await this.$axios.$get('/activity/videoCourse/client/list');
      this.videoList = res.data;
      res.data.forEach(item => {
        item.videoCourseList.forEach(ele => {
          ele.isShow = false
        })
      });
    },
    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, index, idx) {
      this.showVideo = true
      this.videoList[index].videoCourseList[idx].isShow = true
      this.index = index
      this.idx = idx
      const elVideo = document.getElementById('el-video-' + ele.id)
      elVideo.addEventListener("ended", () => {
        elVideo.pause();
        this.showVideo = false
        this.videoList[index].videoCourseList[idx].isShow = false
      });
      elVideo.addEventListener("play", () => {
        this.submit(item, ele, 1)
      });
    },
    playAd(item) {
      this.submit(item, '', 2)
      if (item.actionType === '1' || item.actionType === '3' || item.actionType === '4' || item.actionType === '5' || item.actionType === '6') {
        window.open(item.clickUrl, '_blank', '')
      }
    },
    submit(item, ele, flag) {
      const data = flag === 1 ? { id: ele.id, plateId: item.plateId, type: flag, videoId: ele.id } : { type: 2, adId: item.id, adName: item.title }
      this.$axios.$post('/activity/videoCourse/statistics/save', 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) {
  .wh24 {
    width: 24px;
    height: 24px;
    position: fixed;
    right: 20px;
    top: 20px;
    z-index: 4;
  }
  .hide {
    display: none;
  }
  .videobox {
    position: fixed;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    background: #1c1c1e;
    z-index: 2;
    width: 100vw;
    height: 100vh;
    overflow: hidden;
  }

  .videobox video {
    height: 100vh;
    width: 100vw;
    position: absolute;
    left: 0;
    top: 0;
    z-index: 3;
  }
  .video-card {
    width: 165px;
    height: 148px;
    border-radius: 5px;
    position: relative;
    display: inline-block;
    padding: 0;
    margin-bottom: 10px;
    z-index: 1;
    & .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;
    border-radius: 5px;
  }
  .w165h148 {
    width: 165px;
    height: 148px;
    margin: 0 auto;
    display: block;
    border-radius: 10px;
  }
}
</style>