Merge branch 'develop' into release/v5.4.1

package.json

@@ -38,6 +38,7 @@
     "normalize.css": "^8.0.1",
     "numeral": "^2.0.6",
     "nuxt": "^2.15.8",
+    "screenfull": "^6.0.2",
     "v-mask": "^2.3.0",
     "vant": "^2.12.47",
     "vconsole": "^3.14.6",

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

@@ -4,8 +4,11 @@
     <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="videoURL(ele.coverImageKey)" :src="videoURL(ele.videoKey)" @click="play('el-video-' + ele.id)" />
+        <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>
@@ -31,7 +34,7 @@ export default {
   computed: {
     videoURL() {
       return (key) => {
-        return fileKeyToUrl + key
+        return fileKeyToUrl(key)
       }
     }
   },
@@ -41,16 +44,16 @@ export default {
   },
   methods: {
     async getActiveInfo() {
-      const res = await this.$axios.$get('/videoCourse/client/list');
+      const res = await this.$axios.$get('/activity/videoCourse/client/list');
       this.videoList = res.data;
     },
     async getAdInfoByAdPlace() {
       const data = {
           id: 1,
-          adPlace: 511,
+          adPlace: 20,
           os: 1
         }
-      const res = await this.$axios.$post('/v5/advertising/getAdInfoByAdPlace', data);
+      const res = await this.$axios.$post('/public/v5/advertising/getAdInfoByAdPlace', data);
       this.topADList = res.data;
     },
     play(item, ele) {
@@ -64,6 +67,9 @@ export default {
       } else if (elVideo.webkitRequestFullscreen) {
         elVideo.webkitRequestFullscreen()
         elVideo.play()
+      } else {
+        elVideo.requestFullscreen()
+        elVideo.play()
       }
       this.submit(item, ele, 1)
     },
@@ -83,7 +89,7 @@ export default {
     },
     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}});
+      this.$axios.$post('/activity/v5/advertising/getAdInfoByAdPlace', data, {headers: {Authorization: this.token}});
     }
   }
 }
@@ -98,7 +104,35 @@ export default {
 }
 </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;
@@ -122,6 +156,7 @@ export default {
     height: 148px;
     margin-bottom: 10px;
     margin-right: 30px;
+    border-radius: 10px;
     &:nth-of-type(4n+0){
       margin-right: 0px;
     }

pages/activity/invite-user/guide.vue

@@ -4,14 +4,18 @@
     <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="videoURL(ele.coverImageKey)" :src="videoURL(ele.videoKey)" @click="play(item, ele)" />
+        <div v-for="ele in item.videoCourseList" :key="ele.id" class="video-card">
+          <video :id="'el-video-' + ele.id" class="w165h148" :x5-video-player-fullscreen="true" x5-video-player-type="h5" style="object-fit:fill" x5-video-orientation="landscape|portrait" preload="auto" :poster="videoURL(ele.coverImageKey)" :src="videoURL(ele.videoKey)" @click="play(item, ele)" />
+          <div class="video-card-title">{{ele.videoName}}</div>
+        </div>
       </div>
     </div>
-    <div class="return out"><div class="in"><img src="~/assets/image/activity/invite-user/guide/left.png" /></div></div>
+    <!-- <div class="return out"><div class="in"><img src="~/assets/image/activity/invite-user/guide/left.png" /></div></div> -->
   </div>
 </template>
 
 <script>
+import screenfull from "screenfull"
 import { fileKeyToUrl } from '@/plugins/file-center.js';
 export default {
   name: 'Guide',
@@ -23,13 +27,17 @@ export default {
       token: ''
     }
   },
-  fetch() {
-    this.token = this.$route.query.token;
+  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
+        return fileKeyToUrl(key)
       }
     }
   },
@@ -39,29 +47,50 @@ export default {
   },
   methods: {
     async getActiveInfo() {
-      const res = await this.$axios.$get('/videoCourse/client/list');
+      const res = await this.$axios.$get('/activity/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);
+        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()
+      if (this.$userAgent.isAndroid) {
+        if (screenfull.isEnabled) {
+          screenfull.request(elVideo);
+        }
+      } else {
+        if (elVideo.requestFullscreen) {
+          elVideo.requestFullscreen()
+          elVideo.play()
+        } else if (elVideo.mozRequestFullscreen) {
+          elVideo.mozRequestFullscreen()
+          elVideo.play()
+        } else if (elVideo.msRequestFullscreen) {
+          elVideo.msRequestFullscreen()
+          elVideo.play()
+        } else if (elVideo.webkitRequestFullscreen) {
+          elVideo.webkitRequestFullscreen()
+          elVideo.play()
+        } else {
+          elVideo.requestFullscreen()
+          elVideo.play()
+        }
+        elVideo.addEventListener("webkitfullscreenchange", function (e) {
+          if (!document.webkitIsFullScreen) {// 退出全屏暂停视频
+            elVideo.pause();
+          };
+        }, false);
+  
+        elVideo.addEventListener('ended', function () {
+          document.webkitCancelFullScreen(); // 播放完毕自动退出全屏
+        }, false);
       }
       this.submit(item, ele, 1)
     },
@@ -81,15 +110,43 @@ export default {
     },
     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}});
+      this.$axios.$post('/activity/videoCourse/statistics/save', data, { headers: { Authorization: this.token } });
     }
   }
 }
 </script>
 
 <style lang="scss" scoped>
+.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;
+  & .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;
+  background-color: #1c1c1e;
   min-height: 100vh;
   overflow: hidden;
 }
@@ -109,9 +166,10 @@ export default {
 .jcjc-list {
   padding: 0 15px;
   overflow-x: scroll;
+  overflow-y: hidden;
   display: flex;
   margin: 15px 0;
-  .w165h148 {
+  .video-card {
     margin-right: 10px;
     &:last-child {
       margin-right: 0;
@@ -147,6 +205,7 @@ export default {
   height: 148px;
   object-fit: contain;
   margin-bottom: 15px;
+  border-radius: 10px;
 }
 .return {
   width: 42px;
@@ -156,19 +215,23 @@ export default {
   &.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);
+    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%);
+    background: linear-gradient(180deg, #232427 0%, #4b4c52 100%);
     opacity: 1;
     text-align: center;
     line-height: 40px;
   }
-  
+
   img {
     width: 16px;
     height: 16px;