添加

src/tool/adList.js

@@ -39,19 +39,14 @@ document.addEventListener('DOMContentLoaded', function () {
         if (dateTime < start || dateTime > end || !Array.isArray(item.stuffsList)) continue
         // 获取广告类型 1 轮播 2 交替
         const showType = item.showType
-        let e = showType === 1 ? generateCarouselAd(item, D) : generateAlternateAd(item, D)
+        let e =
+          showType === 1
+            ? generateCarouselAd(item, D, v.slotId)
+            : generateAlternateAd(item, D, v.slotId)
         if (e == -1) return
         ele.appendChild(e)
         ele.style.width = '100%'
         ele.style.height = '100%'
-        ele.addEventListener('click', () => {
-          // 点击广告
-          fetch(base + 'ad/click?uuid=123&stuffId=1008&slotId=3')
-            .then((res) => res.text())
-            .then(() => {
-              window.open(v.ad_url)
-            })
-        })
       }
 
       ad_pos.style.width = v.width + 'px'
@@ -61,20 +56,19 @@ document.addEventListener('DOMContentLoaded', function () {
   }
 
   // 生成轮播广告
-  const generateCarouselAd = function (generateCarousel = {}, D) {
+  const generateCarouselAd = function (generateCarousel = {}, D, slotId) {
     const week = D.getDay() === 0 ? 7 : D.getDay()
     const timeInterval = (generateCarousel.timeInterval || '')
       .slice(week * 24, week * 24 + 25)
       .split('')
     const H = D.getHours()
     if (timeInterval[H] == 0) return -1
-    console.log('生成轮播广告', generateCarousel)
     const T = (generateCarousel.showIntervalTime || 5) * 1000
-    return createCarousel(generateCarousel.stuffsList, T)
+    return createCarousel(generateCarousel.stuffsList, T, slotId)
   }
 
   // 生成交替广告
-  const generateAlternateAd = function (generateAlternate = {}, D) {
+  const generateAlternateAd = function (generateAlternate = {}, D, slotId) {
     const week = D.getDay() === 0 ? 7 : D.getDay()
     const timeInterval = (generateAlternate.timeInterval || '')
       .slice(week * 24, week * 24 + 25)
@@ -87,10 +81,58 @@ document.addEventListener('DOMContentLoaded', function () {
           generateAlternate.stuffsList.length
       ]
     if (!stuff) return -1
-    const son_ele = document.createElement('img')
+    const fileType = stuff.addr.split('.').pop()
+    // fileType是否是图片类型
+    if (fileType === 'jpg' || fileType === 'png') {
+      const son_ele = document.createElement('img')
+      son_ele.src = stuff.addr
+      son_ele.style.width = '100%'
+      son_ele.style.height = '100%'
+      son_ele.onload = () => {
+        const uuid = localStorage.getItem('ad_id')
+        fetch(`${base}ad/show?uuid=${uuid}&stuffId=${src.stuffId}&slotId=${slotId}`).then((res) =>
+          res.text(),
+        )
+      }
+      son_ele.addEventListener('click', () => {
+        const uuid = localStorage.getItem('ad_id')
+        // 点击广告
+        fetch(`${base}ad/click?uuid=${uuid}&stuffId=${stuff.stuffId}&slotId=${slotId}`)
+          .then((res) => res.text())
+          .then(() => {
+            window.open(stuff.landingPage)
+          })
+      })
+      return son_ele
+    }
+    const son_ele = document.createElement('video')
     son_ele.src = stuff.addr
     son_ele.style.width = '100%'
     son_ele.style.height = '100%'
+    // 视频加载允许播放的回调
+    son_ele.oncanplay = () => {
+      son_ele.play()
+      const uuid = localStorage.getItem('ad_id')
+      fetch(`${base}ad/show?uuid=${uuid}&stuffId=${src.stuffId}&slotId=${slotId}`).then((res) =>
+        res.text(),
+      )
+    }
+    son_ele.addEventListener('click', () => {
+      const uuid = localStorage.getItem('ad_id')
+      // 点击广告
+      fetch(`${base}ad/click?uuid=${uuid}&stuffId=${stuff.stuffId}&slotId=${slotId}`)
+        .then((res) => res.text())
+        .then(() => {
+          window.open(stuff.landingPage)
+        })
+    })
+    // 对body添加一次性点击事件
+    const play = () => {
+      son_ele.play()
+      // 移除点击
+      document.body.removeEventListener('click', play)
+    }
+    document.body.addEventListener('click', play)
     return son_ele
   }
 
@@ -181,7 +223,7 @@ document.addEventListener('DOMContentLoaded', function () {
   }
 
   // 轮播
-  function createCarousel(images, interval) {
+  function createCarousel(images, interval, slotId) {
     // 创建轮播图容器
     const carouselContainer = document.createElement('div')
     carouselContainer.style = `
@@ -221,6 +263,23 @@ document.addEventListener('DOMContentLoaded', function () {
         display: block;
       `
       if (index !== 0) img.style.display = 'none'
+
+      img.addEventListener('click', () => {
+        const uuid = localStorage.getItem('ad_id')
+        // 点击广告
+        fetch(`${base}ad/click?uuid=${uuid}&stuffId=${src.stuffId}&slotId=${slotId}`)
+          .then((res) => res.text())
+          .then(() => {
+            window.open(v.ad_url)
+          })
+      })
+      // 图片加载完成
+      img.onload = () => {
+        const uuid = localStorage.getItem('ad_id')
+        fetch(`${base}ad/show?uuid=${uuid}&stuffId=${src.stuffId}&slotId=${slotId}`).then((res) =>
+          res.text(),
+        )
+      }
       imagesContainer.appendChild(img)
     })