Merge branch 'feature/新手指导' of Software/android-cloud-H5 into develop

pages/activity/invite-user/guide-pc.vue

@@ -0,0 +1,122 @@
+<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;">
+          <video v-for="ele in item.videoCourseList" :id="'el-video-' + ele.id" :key="ele.id" class="w165h148" preload="auto" :poster="'http://110.53.221.195:8210/document/newFile/download/0/e858720c23ke455aa60e?fileKey=' + ele.coverImageKey" :src="'http://110.53.221.195:8210/document/newFile/download/0/e858720c23ke455aa60e?fileKey=' + ele.videoKey" @click="play('el-video-' + ele.id)" />
+        </v-tab-item>
+      </v-tabs-items>
+    </v-tabs>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'GuidePc',
+  auth: false,
+  data() {
+    return {
+      tab: null,
+      videoList: [],
+      topADList: [],
+      token: ''
+    }
+  },
+  fetch() {
+    this.token = this.$route.query.token;
+  },
+  created() {
+    this.getActiveInfo()
+    this.getAdInfoByAdPlace()
+  },
+  methods: {
+    async getActiveInfo() {
+      const res = await this.$axios.$get('/videoCourse/client/list');
+      this.videoList = res.data;
+    },
+    async getAdInfoByAdPlace() {
+      const data = {
+          id: 1,
+          adPlace: 511,
+          os: 1
+        }
+      const res = await this.$axios.$post('/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()
+      }
+      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('/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>
+@media (min-width: 0px) {
+  .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;
+    &:nth-of-type(4n+0){
+      margin-right: 0px;
+    }
+  }
+}
+</style>

pages/activity/invite-user/guide.vue

@@ -0,0 +1,169 @@
+<template>
+  <div class="bg2C2C2D">
+    <video v-for="item in topADList" id="ad" :key="item.id" class="w345h120" :poster="item.imgUrls[0]" :src="item.videoUrl" @click="playAd()" />
+    <div v-for="item in videoList" :key="item.plateId">
+      <div class="fs16">{{item.plateName}}</div>
+      <div :class="item.displayMode === 1 ? 'jjjc-list' : 'jcjc-list'">
+        <video v-for="ele in item.videoCourseList" :id="'el-video-' + ele.id" :key="ele.id" class="w165h148" preload="auto" :poster="'http://110.53.221.195:8210/document/newFile/download/0/e858720c23ke455aa60e?fileKey=' + ele.coverImageKey" :src="'http://110.53.221.195:8210/document/newFile/download/0/e858720c23ke455aa60e?fileKey=' + ele.videoKey" @click="play(item, ele)" />
+      </div>
+    </div>
+    <div class="return out"><div class="in"><img src="~/assets/image/activity/invite-user/guide/left.png" /></div></div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'Guide',
+  auth: false,
+  data() {
+    return {
+      videoList: [],
+      topADList: [],
+      token: ''
+    }
+  },
+  fetch() {
+    this.token = this.$route.query.token;
+  },
+  created() {
+    this.getActiveInfo()
+    this.getAdInfoByAdPlace()
+  },
+  methods: {
+    async getActiveInfo() {
+      const res = await this.$axios.$get('http://192.168.31.198:8112/videoCourse/client/list');
+      this.videoList = res.data;
+    },
+    async getAdInfoByAdPlace() {
+      const data = {
+          id: 1,
+          adPlace: 511,
+          os: 1
+        }
+      const res = await this.$axios.$post('/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()
+      }
+      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('/videoCourse/statistics/save', data, {headers: {Authorization: this.token}});
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.bg2C2C2D {
+  background-color: #1C1C1E;
+  min-height: 100vh;
+  overflow: hidden;
+}
+.w345h120 {
+  width: 345px;
+  height: 120px;
+  margin: 15px;
+}
+.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;
+  display: flex;
+  margin: 15px 0;
+  .w165h148 {
+    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;
+}
+.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>