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

<template>
  <div class="bg2C2C2D">
    <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>
    <div v-for="(item, num) in videoList" :key="item.plateId">
      <div class="fs16">{{item.plateName}}</div>
      <div :class="item.displayMode === 1 ? 'jcjc-list' : 'jjjc-list'">
        <div v-for="(ele, i) in item.videoCourseList" :key="ele.id" class="video-card">
          <img 
            class="w165h148" :src="videoURL(ele.coverImageKey)" @click="play(item, ele, num, i)" />
        </div>
      </div>
    </div>
    <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-page" 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: 'Guide',
  auth: false,
  data() {
    return {
      videoList: [],
      topADList: [],
      token: '',
      showVideo: false,
      index: 0,
      idx: 0
    }
  },
  async fetch() {
    if (this.$userAgent.isAndroid) {
      this.token = await window.native.getToken();
    } else {
      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');
      res.data.forEach(item => {
        item.videoCourseList.forEach(ele => {
          ele.isShow = false
        })
      });
      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, 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 === '5' || item.actionType === '6') {
        window.open(item.clickUrl, '_blank')
      } else if (item.actionType === '4') {
        if (this.$userAgent.isIos) {
          window.open(item.deeplink, '_blank')
        } else {
          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" scoped>
.hide {
  display: none;
}
.videobox {
  position: fixed;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  background: #000;
  z-index: 2;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
}

.wh24 {
  width: 24px;
  height: 24px;
  margin: 10px auto;
  position: fixed;
  bottom: 0;
  left: 50%;
  margin-left: -12px;
  z-index: 4;
}

.videobox video {
  height: calc(100vh - 44px);
  width: 100vw;
  position: absolute;
  left: 0;
  top: 0;
  z-index: 3;
}
.video-player--is-cssfullscreen {
  position: fixed !important;
  left: 0 !important;
  top: 0 !important;
  width: 100% !important;
  height: 100% !important;
  z-index: 999;
}
.video-card {
  width: 165px;
  height: 148px;
  border-radius: 5px;
  position: relative;
  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;
    position: absolute;
    left: 0;
    bottom: 0;
    border-radius: 0 0 9px 9px;
  }
}
.bg2C2C2D {
  background-color: #1c1c1e;
  min-height: 100vh;
  overflow: hidden;
}
.w345h120 {
  width: 345px;
  height: 120px;
  margin: 15px;
  border-radius: 5px;
}
.fs16 {
  font-weight: 500;
  color: #ffffff;
  font-size: 16px;
  margin-left: 15px;
  display: flex;
  align-items: center;
}
.jcjc-list {
  padding: 0 15px;
  overflow-x: scroll;
  overflow-y: hidden;
  display: flex;
  margin: 15px 0;
  .video-card {
    margin-right: 10px;
    &:last-child {
      margin-right: 0;
    }
  }
}
.fs16::before {
  content: '';
  display: inline-block;
  width: 6px;
  height: 14px;
  background: #3b7fff;
  border-radius: 3px 3px 3px 3px;
  opacity: 1;
  margin-right: 6px;
}
.w144h140 {
  width: 144px;
  height: 140px;
  margin-right: 10px;
}
.w144h140:last-child {
  margin-right: 0;
}
.jjjc-list {
  display: flex;
  flex-flow: wrap;
  justify-content: space-between;
  padding: 15px;
}
.w165h148 {
  width: 165px;
  height: 148px;
  object-fit: contain;
  margin-bottom: 15px;
  border-radius: 10px;
}
.return {
  width: 42px;
  height: 42px;
  margin-left: 20px;
  margin-bottom: 40px;
  &.out {
    border-radius: 50%;
    padding: 1px;
    background: linear-gradient(
      46deg,
      rgba(48, 49, 53, 1),
      rgba(113, 116, 127, 1)
    );
    box-shadow: 0px 9px 17px 0px rgba(0, 0, 0, 0.5);
  }
  .in {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: linear-gradient(180deg, #232427 0%, #4b4c52 100%);
    opacity: 1;
    text-align: center;
    line-height: 40px;
  }

  img {
    width: 16px;
    height: 16px;
  }
}
</style>