feat：视频列表新增分页

src/views/monitor/components/box-2.vue

@@ -40,7 +40,12 @@
     </div>
 
     <div v-if="videoLog == 1" class="video-wrapper">
-      <div class="video-list">
+      <div
+        class="video-list"
+        v-infinite-scroll="getVideoList"
+        :infinite-scroll-immediate="false"
+        :infinite-scroll-distance="50"
+      >
         <div
           class="video-item"
           v-for="(item, index) in videoList"
@@ -130,11 +135,17 @@
   let showNav = ref(true)
   let videoLog = ref(1)
   let videoRef = ref()
-  let scenicSpotId = ref('')
   let regionList = ref()
   let monitorChange = null
   let videoSrc = ref('')
   let show = ref(false)
+  let loading = ref(false)
+  let params = reactive({
+    pageNum: 1,
+    pageSize: 16,
+    businessScenicArea: '',
+    businessVideoDisplayPosition: ''
+  })
 
   // const postVideoRemain = async () => {
   //   setInterval(() => {
@@ -170,6 +181,7 @@
   const handleNav = (e) => {
     if (current.value == e) return
     videoLog.value = 1
+    params.pageNum = 1
     videoList.value = []
     current.value = e
     getVideoList()
@@ -203,37 +215,44 @@
     videoSrc.value = res.data.url
   }
   const getVideoList = async () => {
-    let res = await getVideoListApi({
-      businessScenicArea: scenicSpotId.value,
-      businessVideoDisplayPosition: navList.value[current.value].dictValue
-    })
-    videoList.value = res.data
-    // postVideoRemain()
-    nextTick(() => {
-      videoList.value.forEach(async (item, index) => {
-        const video = document.getElementById(`monitorVideo${index}`)
+    params.businessVideoDisplayPosition = navList.value[current.value].dictValue
+    let res = await getVideoListApi(params)
+    if (res.data.length > 0) {
+      let list = res.data
+      list.forEach(async (i) => {
         let res = await postRefreshApi({
           type: 'hls',
-          businessVideoDisplayPosition: item.businessVideoDisplayPosition,
-          cameraIndexCode: item.cameraIndexCode
+          businessVideoDisplayPosition: i.businessVideoDisplayPosition,
+          cameraIndexCode: i.cameraIndexCode
         })
-        item.hlsUrl = res.data.hlsUrl
-        const hls = new Hls({
-          maxBufferLength: 10, // 最大缓冲长度（秒）
-          maxMaxBufferLength: 15, // 缓冲区长度的上限
-          maxBufferSize: 30 * 1000 * 1000 // 最大缓冲大小（字节）
-        })
-        hls.loadSource(res.data.hlsUrl)
-        hls.attachMedia(video)
-        hls.on(Hls.Events.MANIFEST_PARSED, () => {
-          video.play()
+        return {
+          ...i,
+          hlsUrl: res.data.hlsUrl
+        }
+      })
+      videoList.value = [...videoList.value, ...res.data]
+      params.pageNum++
+      // postVideoRemain()
+      nextTick(() => {
+        videoList.value.forEach(async (x, index) => {
+          const video = document.getElementById(`monitorVideo${index}`)
+          const hls = new Hls({
+            maxBufferLength: 10, // 最大缓冲长度（秒）
+            maxMaxBufferLength: 15, // 缓冲区长度的上限
+            maxBufferSize: 30 * 1000 * 1000 // 最大缓冲大小（字节）
+          })
+          hls.loadSource(x.hlsUrl)
+          hls.attachMedia(video)
+          hls.on(Hls.Events.MANIFEST_PARSED, () => {
+            video.play()
+          })
         })
       })
-    })
+    }
   }
   const getVideoType = async (id) => {
     let res = await getVideoTypeApi({
-      businessScenicArea: scenicSpotId.value
+      businessScenicArea: params.businessScenicArea
     })
     if (res.data.length > 0) {
       navList.value = res.data
@@ -244,15 +263,23 @@
     }
   }
   const getVideoRegions = async () => {
-    let res = await getVideoRegionsApi({
-      businessScenicArea: scenicSpotId.value
-    })
-    regionList.value = res.data
-    console.log(regionList.value, 'regionList')
+    if (loading.value) return
+    loading.value = true
+    try {
+      let res = await getVideoRegionsApi({
+        businessScenicArea: params.businessScenicArea
+      })
+      regionList.value = res.data
+      loading.value = false
+    } catch (error) {
+      loading.value = false
+    }
   }
   const onMonitorChange = () => {
     monitorChange = PubSub.subscribe('monitorChange', (res, data) => {
-      scenicSpotId.value = data.scenicSpotId
+      params.businessScenicArea = data.scenicSpotId
+      params.pageNum = 1
+      videoList.value = []
       regionList.value = []
       getVideoType()
       getVideoRegions()