|
|
@@ -0,0 +1,199 @@
|
|
|
+<template>
|
|
|
+ <div class="pic-container">
|
|
|
+ <div v-for="(item, index) in list" :key="item" class="pic-main">
|
|
|
+ <div :class="index % 2 == 0 ? 'box' : 'box bottom-box'">
|
|
|
+ <div class="card-note">
|
|
|
+ {{ item.userName }} 拍摄于
|
|
|
+ <br />
|
|
|
+ {{ item.createTime }}
|
|
|
+ </div>
|
|
|
+ <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)"
|
|
|
+ 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
|
|
|
+ @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>
|
|
|
+ </div>
|
|
|
+ <div :class="index % 2 == 0 ? 's-line' : 's-line top210px'"></div>
|
|
|
+ <div class="point"></div>
|
|
|
+ <div class="l-line" v-if="index + 1 != list.length"></div>
|
|
|
+ </div>
|
|
|
+ <el-dialog
|
|
|
+ v-model="videoModal"
|
|
|
+ title="视频审核"
|
|
|
+ width="20%"
|
|
|
+ :before-close="videoClose"
|
|
|
+ >
|
|
|
+ <video
|
|
|
+ autoplay
|
|
|
+ controls
|
|
|
+ style="width: 100%; height: 100%"
|
|
|
+ :src="currentUrl"
|
|
|
+ ></video>
|
|
|
+ </el-dialog>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+<script>
|
|
|
+import { onMounted, ref, watch } from "_vue@3.2.20@vue";
|
|
|
+import store from "../store";
|
|
|
+import { useStore } from "vuex";
|
|
|
+import api from "../apis/fetch";
|
|
|
+export default {
|
|
|
+ setup(props, ctx) {
|
|
|
+ let currentUrl = ref("");
|
|
|
+ let videoModal = ref(false);
|
|
|
+ function openVideoModal(url) {
|
|
|
+ currentUrl.value = url;
|
|
|
+ videoModal.value = true;
|
|
|
+ }
|
|
|
+
|
|
|
+ async function auditMedia(mediaId, a, index, mediaType) {
|
|
|
+ // console.log(mediaId, a, index, mediaType);
|
|
|
+ let res = await api.auditMedia({
|
|
|
+ mediaId,
|
|
|
+ audit: a,
|
|
|
+ });
|
|
|
+ }
|
|
|
+ onMounted(() => {});
|
|
|
+ return {
|
|
|
+ currentUrl,
|
|
|
+ videoModal,
|
|
|
+ openVideoModal,
|
|
|
+ auditMedia,
|
|
|
+ list,
|
|
|
+ };
|
|
|
+ },
|
|
|
+};
|
|
|
+</script>
|
|
|
+<style scoped>
|
|
|
+* {
|
|
|
+ --box-width: 200px;
|
|
|
+}
|
|
|
+
|
|
|
+.pic-container {
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ box-sizing: border-box;
|
|
|
+ display: flex;
|
|
|
+ padding: 20px;
|
|
|
+ overflow-x: scroll;
|
|
|
+ overflow-y: hidden;
|
|
|
+ white-space: nowrap;
|
|
|
+}
|
|
|
+
|
|
|
+.pic-main {
|
|
|
+ position: relative;
|
|
|
+ width: 120px;
|
|
|
+}
|
|
|
+.box {
|
|
|
+ position: absolute;
|
|
|
+ height: 240px;
|
|
|
+ width: var(--box-width);
|
|
|
+ border: 1px solid #dddddd;
|
|
|
+ transition: all 0.5s;
|
|
|
+ background: #fff;
|
|
|
+ z-index: 10;
|
|
|
+}
|
|
|
+
|
|
|
+.s-line {
|
|
|
+ position: absolute;
|
|
|
+ left: 100px;
|
|
|
+ top: 242px;
|
|
|
+ height: 20px;
|
|
|
+ border-left: 2px dashed;
|
|
|
+ box-sizing: border-box;
|
|
|
+ border-color: #97caf6;
|
|
|
+}
|
|
|
+.point {
|
|
|
+ position: relative;
|
|
|
+ left: 93px;
|
|
|
+ top: 258px;
|
|
|
+ width: 16px;
|
|
|
+ height: 16px;
|
|
|
+ background-image: url(../images/blue-circle.png);
|
|
|
+}
|
|
|
+
|
|
|
+.l-line {
|
|
|
+ position: relative;
|
|
|
+ bottom: 30px;
|
|
|
+ left: 111px;
|
|
|
+ top: 249px;
|
|
|
+ height: 3px;
|
|
|
+ width: 100px;
|
|
|
+ background-color: #0094fe;
|
|
|
+}
|
|
|
+
|
|
|
+.bottom-box {
|
|
|
+ top: 290px;
|
|
|
+}
|
|
|
+.top210px {
|
|
|
+ top: 270px;
|
|
|
+}
|
|
|
+
|
|
|
+.box:hover {
|
|
|
+ transform: scale(1.2);
|
|
|
+}
|
|
|
+
|
|
|
+.media-box {
|
|
|
+ width: 80px;
|
|
|
+ height: 80px;
|
|
|
+ margin-top: 10px;
|
|
|
+}
|
|
|
+
|
|
|
+.card-note {
|
|
|
+ height: 30px;
|
|
|
+ font-size: 12px;
|
|
|
+ font-family: PingFangSC-Regular, PingFang SC;
|
|
|
+ font-weight: 400;
|
|
|
+ color: #777777;
|
|
|
+ padding: 10px 20px;
|
|
|
+}
|
|
|
+
|
|
|
+.media-box {
|
|
|
+ width: 100%;
|
|
|
+ height: 100px;
|
|
|
+ margin-top: 20px;
|
|
|
+}
|
|
|
+
|
|
|
+.checkbox-group {
|
|
|
+ width: 200px;
|
|
|
+ height: 50px;
|
|
|
+ margin-top: 20px;
|
|
|
+}
|
|
|
+</style>
|
