更新 鉴图/视频 逻辑

src/views/index/mediaCheck.vue

@@ -29,7 +29,7 @@
       审核未通过
     </div>
   </div>
-  <div class="container-title">图片</div>
+  <div class="container-title">图片/视频</div>
   <div class="line-container-p24 df aic ffw">
     <el-card
       style="
@@ -38,20 +38,42 @@
         margin-left: 20px;
         margin-bottom: 15px;
       "
-      v-for="(item, index) in photos"
+      v-for="(item, index) in media"
       :key="item"
       shadow="hover"
     >
       <div class="card-note">
         {{ item.note }}
       </div>
-      <div class="media-box">
+      <div class="media-box" style="position: relative">
         <el-image
+          v-if="item.mediaType == 1"
           style="width: 100%; height: 100%"
           fit="contain"
           :src="item.downloadUrl"
           :preview-src-list="previewSrcList"
         ></el-image>
+        <video
+          style="width: 100%; height: 100%"
+          v-else
+          :src="item.downloadUrl"
+        ></video>
+        <img
+          @click="openVideoModal(item.downloadUrl, index, item.id, item.audit)"
+          v-if="item.mediaType == 2"
+          src="../../assets/icon-player.png"
+          style="
+            object-fit: contain;
+            width: 40px;
+            height: 40px;
+            position: absolute;
+            top: calc(50% - 20px);
+            left: calc(50% - 20px);
+            background: #fff;
+            border-radius: 50%;
+          "
+          alt=""
+        />
       </div>
       <div class="checkbox-group df aic jcsa">
         <el-checkbox
@@ -67,12 +89,27 @@
       </div>
     </el-card>
   </div>
-  <div class="container-title">视频</div>
-  <div class="line-container-p24 df aic">
-    <el-card v-for="(item, index) in videoes" :key="item" shadow="hover">
-      {{ item.note }}
-    </el-card>
-  </div>
+  <el-dialog
+    v-model="videoModal"
+    title="视频审核"
+    width="30%"
+    :before-close="videoClose"
+  >
+    <video
+      autoplay
+      controls
+      style="width: 100%; height: 100%"
+      :src="currentUrl"
+    ></video>
+    <template #footer>
+      <span class="dialog-footer">
+        <el-button type="primary" @click="dialogAuditVideo(1)">通过</el-button>
+        <el-button type="warning" @click="dialogAuditVideo(2)">
+          未通过
+        </el-button>
+      </span>
+    </template>
+  </el-dialog>
 </template>
 <script>
 import { ref, toRefs, reactive } from "_vue@3.2.20@vue";
@@ -83,6 +120,7 @@ export default {
     let checkedBox = ref();
     let audit = ref(0);
     let currentPage = ref(1);
+    let media = ref([]);
     let photos = ref([]);
     let videoes = ref([]);
     let previewSrcList = ref([]);
@@ -94,12 +132,10 @@ export default {
       });
       console.log(res);
       if (res.data.status == 0) {
-        for (let i of res.data.result) {
+        media.value = res.data.result;
+        for (let i of media.value) {
           if (i.mediaType == 1) {
-            photos.value.push(i);
             previewSrcList.value.push(i.downloadUrl);
-          } else {
-            videoes.value.push(i);
           }
         }
       }
@@ -119,16 +155,15 @@ export default {
         audit: a,
       });
       if (res.data.status == 0) {
+        videoModal.value = false;
         ElNotification({
           title: res.data.msg,
           message: `${a == 1 ? "通过" : "未通过"}`,
           type: `${a == 1 ? "success" : "info"}`,
         });
+        media.value.splice(index, 1);
         if (mediaType == 1) {
-          photos.value.splice(index, 1);
           previewSrcList.value.splice(index, 1);
-        } else {
-          videoes.value.splice(index, 1);
         }
       } else {
         ElNotification({
@@ -139,6 +174,30 @@ export default {
       }
       console.log(res);
     }
+    let videoModal = ref(false);
+    let currentIndex = ref();
+    let currentId = ref();
+    let currentAudit = ref();
+    let currentUrl = ref();
+    function openVideoModal(url, i, id, a) {
+      currentIndex.value = i;
+      currentId.value = id;
+      currentAudit.value = a;
+      currentUrl.value = url;
+      videoModal.value = true;
+    }
+
+    function dialogAuditVideo(a) {
+      console.log(a);
+      console.log(currentAudit.value);
+      if (a == currentAudit.value) {
+        videoModal.value = false;
+      } else {
+        auditMedia(currentId.value, a, currentIndex.value, 2);
+      }
+    }
+
+    function videoClose() {}
     getMediaList();
 
     return {
@@ -150,6 +209,11 @@ export default {
       checkedBox,
       previewSrcList,
       auditMedia,
+      media,
+      videoModal,
+      openVideoModal,
+      dialogAuditVideo,
+      currentUrl,
     };
   },
 };