新增 媒体审核页面

src/App.vue

@@ -95,6 +95,14 @@ export default {
   display: flex;
 }
 
+.ffw {
+  flex-flow: wrap;
+}
+
+.jcsa {
+  justify-content: space-around;
+}
+
 .aic {
   align-items: center;
 }

src/apis/fetch.js

@@ -34,4 +34,14 @@ export default {
   addVoyage(data) {
     return $http("post", "voyage/backstage/add", data);
   },
+
+  // 获取媒体列表
+  getMediaList(data) {
+    return $http("post", "/media/backstage/list", data);
+  },
+
+  // 审核媒体文件
+  auditMedia(data) {
+    return $http("post", "/media/backstage/audit", data);
+  },
 };

src/views/index/mediaCheck.vue

@@ -1,9 +1,220 @@
-<template>mediaCheck</template>
+<template>
+  <div class="df aic">
+    <div
+      @click="changeMediaStatus(0)"
+      :class="
+        audit == 0
+          ? 'currentbtn radio-btns left-radius'
+          : 'radio-btns left-radius'
+      "
+    >
+      待审核
+    </div>
+    <div
+      @click="changeMediaStatus(1)"
+      :class="audit == 1 ? ' radio-btns currentbtn' : 'radio-btns '"
+      style="border-right: none; border-left: none"
+    >
+      审核通过
+    </div>
+    <div
+      @click="changeMediaStatus(2)"
+      :class="
+        audit == 2
+          ? ' radio-btns right-radius currentbtn'
+          : 'radio-btns right-radius '
+      "
+      style="margin-right: 40px"
+    >
+      审核未通过
+    </div>
+  </div>
+  <div class="container-title">图片</div>
+  <div class="line-container-p24 df aic ffw">
+    <el-card
+      style="
+        width: 240px;
+        height: 360px;
+        margin-left: 20px;
+        margin-bottom: 15px;
+      "
+      v-for="(item, index) in photos"
+      :key="item"
+      shadow="hover"
+    >
+      <div class="card-note">
+        {{ item.note }}
+      </div>
+      <div class="media-box">
+        <el-image
+          style="width: 100%; height: 100%"
+          fit="contain"
+          :src="item.downloadUrl"
+          :preview-src-list="previewSrcList"
+        ></el-image>
+      </div>
+      <div class="checkbox-group df aic jcsa">
+        <el-checkbox
+          @change="auditMedia(item.id, 1, index, item.mediaType)"
+          :model-value="item.audit == 1"
+          label="通过"
+        ></el-checkbox>
+        <el-checkbox
+          @change="auditMedia(item.id, 2, index, item.mediaType)"
+          :model-value="item.audit == 2"
+          label="未通过"
+        ></el-checkbox>
+      </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>
+</template>
 <script>
+import { ref, toRefs, reactive } from "_vue@3.2.20@vue";
+import { ElNotification } from "element-plus";
+import api from "../../apis/fetch";
 export default {
   setup() {
-    return {};
+    let checkedBox = ref();
+    let audit = ref(0);
+    let currentPage = ref(1);
+    let photos = ref([]);
+    let videoes = ref([]);
+    let previewSrcList = ref([]);
+    async function getMediaList() {
+      let res = await api.getMediaList({
+        audit: audit.value,
+        currentPage: currentPage.value,
+        size: 10,
+      });
+      console.log(res);
+      if (res.data.status == 0) {
+        for (let i of res.data.result) {
+          if (i.mediaType == 1) {
+            photos.value.push(i);
+            previewSrcList.value.push(i.downloadUrl);
+          } else {
+            videoes.value.push(i);
+          }
+        }
+      }
+    }
+
+    function changeMediaStatus(s) {
+      photos.value = [];
+      videoes.value = [];
+      audit.value = s;
+      getMediaList();
+    }
+
+    async function auditMedia(mediaId, a, index, mediaType) {
+      if (a == audit.value) return;
+      let res = await api.auditMedia({
+        mediaId,
+        audit: a,
+      });
+      if (res.data.status == 0) {
+        ElNotification({
+          title: res.data.msg,
+          message: `${a == 1 ? "通过" : "未通过"}`,
+          type: `${a == 1 ? "success" : "info"}`,
+        });
+        if (mediaType == 1) {
+          photos.value.splice(index, 1);
+          previewSrcList.value.splice(index, 1);
+        } else {
+          videoes.value.splice(index, 1);
+        }
+      } else {
+        ElNotification({
+          title: "Error!",
+          message: res.data.msg,
+          type: "error",
+        });
+      }
+      console.log(res);
+    }
+    getMediaList();
+
+    return {
+      audit,
+      getMediaList,
+      changeMediaStatus,
+      photos,
+      videoes,
+      checkedBox,
+      previewSrcList,
+      auditMedia,
+    };
   },
 };
 </script>
-<style scoped></style>
+<style scoped>
+.radio-btns {
+  height: 38px;
+  width: 103px;
+  border: 1px solid #1486f9;
+  line-height: 38px;
+  text-align: center;
+  font-size: 14px;
+  font-family: PingFangSC-Regular, PingFang SC;
+  font-weight: 400;
+  color: #0094fe;
+  cursor: pointer;
+}
+
+.left-radius {
+  border-top-left-radius: 19px;
+  border-bottom-left-radius: 19px;
+}
+
+.right-radius {
+  border-top-right-radius: 19px;
+  border-bottom-right-radius: 19px;
+}
+.currentbtn {
+  background: #1486f9;
+  color: #fff;
+}
+
+.seach-btn {
+  display: inline-block;
+  width: 60px;
+  height: 38px;
+  background: #0094fe;
+  border-radius: 2px;
+  font-size: 14px;
+  font-family: PingFangSC-Regular, PingFang SC;
+  font-weight: 400;
+  color: #ffffff;
+  text-align: center;
+  line-height: 38px;
+  margin-left: 10px;
+  cursor: pointer;
+}
+
+.card-note {
+  height: 30px;
+  font-size: 12px;
+  font-family: PingFangSC-Regular, PingFang SC;
+  font-weight: 400;
+  color: #777777;
+}
+
+.media-box {
+  width: 200px;
+  height: 200px;
+  margin-top: 20px;
+}
+
+.checkbox-group {
+  width: 200px;
+  height: 50px;
+  margin-top: 20px;
+}
+</style>