feat：对接视频收藏功能

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

@@ -53,6 +53,18 @@
           @click="handleItemVideo(item.hlsUrl, 100)"
         >
           <div class="video-item__inner">
+            <div
+              v-if="item.isCollect == 1"
+              class="video-item__follow"
+              @click.stop="handleCollect(item.id, item.isCollect, index)"
+              >取消关注
+            </div>
+            <div
+              v-if="item.isCollect == 0"
+              class="video-item__unfollow"
+              @click.stop="handleCollect(item.id, item.isCollect, index)"
+              >关注
+            </div>
             <video
               class="video-item__video"
               :id="'monitorVideo' + index"
@@ -133,7 +145,12 @@
 
 <script setup>
   import { getVideoListApi, postRefreshApi, getPreviewUrlApi } from '@/api/home'
-  import { getVideoTypeApi, getVideoRegionsApi, postVideoRemainApi } from '@/api/monitor'
+  import {
+    getVideoTypeApi,
+    getVideoRegionsApi,
+    postVideoRemainApi,
+    postVideoCollectApi
+  } from '@/api/monitor'
 
   import { debounce } from 'lodash'
   import PubSub from 'pubsub-js'
@@ -185,11 +202,9 @@
       })
     })
   }
-
   const onInput = debounce((e) => {
     getVideoRegions()
   }, 500)
-
   const currentChange = (e) => {
     videoList.value = []
     getVideoList()
@@ -234,6 +249,17 @@
     })
     videoSrc.value = res.data.url
   }
+  const handleCollect = async (id, status, index) => {
+    let res = await postVideoCollectApi({
+      id,
+      isCollect: status == 0 ? 1 : 0
+    })
+    if (status == 0) {
+      videoList.value[index].isCollect = 1
+    } else {
+      videoList.value[index].isCollect = 0
+    }
+  }
   const getVideoList = async () => {
     try {
       if (loading.value) return
@@ -243,6 +269,7 @@
       total.value = res.total
       if (res.data.length > 0) {
         videoList.value = res.data
+        console.log(videoList.value, 'videoList.value')
         nextTick(() => {
           videoList.value.forEach(async (x, index) => {
             const video = document.getElementById(`monitorVideo${index}`)
@@ -533,6 +560,7 @@
       align-content: flex-start;
     }
     &-item {
+      position: relative;
       width: vw(686);
       height: vh(420);
       padding: vw(10);
@@ -541,7 +569,34 @@
       &:nth-child(3n) {
         margin-right: 0;
       }
+      &:hover {
+        .video-item__follow {
+          display: block !important;
+        }
+      }
     }
+    &-item__follow {
+      cursor: pointer;
+      display: none;
+      position: absolute;
+      right: vw(8);
+      top: vw(8);
+      z-index: 9999;
+      padding: 0 vw(20);
+      height: vh(24);
+      text-align: center;
+      line-height: vh(24);
+      font-weight: 400;
+      font-size: vw(16);
+      color: #ffffff;
+      background-image: url('@/assets/images/unfollow.png');
+      background-size: 100% 100%;
+    }
+    &-item__unfollow {
+      @extend .video-item__follow;
+      background-image: url('@/assets/images/unfollow.png');
+    }
+
     &-item__inner {
       position: relative;
     }
@@ -778,5 +833,3 @@
     }
   }
 </style>
-
-<style lang="scss" scoped></style>