Bläddra i källkod

增加轮播图

huangxiaojing 2 år sedan
förälder
incheckning
e3f070109e
1 ändrade filer med 8 tillägg och 13 borttagningar
  1. 8 13
      pages/activity/invite-user/guide-pc.vue

+ 8 - 13
pages/activity/invite-user/guide-pc.vue

@@ -1,6 +1,8 @@
 <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-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" :src="item.imgUrls[0]" @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">
@@ -73,19 +75,11 @@ export default {
       }
       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()
+    playAd(item) {
+      this.submit(item, '', 2)
+      if (item.actionType === '1' || item.actionType === '3' || item.actionType === '4' || item.actionType === '5' || item.actionType === '6') {
+        window.location.href = item.clickUrl
       }
-      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 }
@@ -150,6 +144,7 @@ export default {
     margin: 10px auto;
     display: block;
     background: #FAFAFA;
+    border-radius: 5px;
   }
   .w165h148 {
     width: 165px;