From 96eaeaca93702811133756fbf97b7d825c648a15 Mon Sep 17 00:00:00 2001
From: jacky <phpcrazy@163.com>
Date: Wed, 8 May 2024 12:48:23 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E6=94=B9=E5=9B=BE=E7=89=87=E5=92=8C?=
 =?UTF-8?q?=E8=A7=86=E9=A2=91=E9=A2=84=E8=A7=88?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/upload/cropperImg.vue    |  3 +-
 src/components/video/videoViewer.vue    | 41 +++++++++++++++++++++++++
 src/view/ad/content.vue                 | 20 ++++++------
 src/view/ad/position.vue                |  4 +--
 src/view/content/academician/index.vue  |  2 +-
 src/view/content/entrepreneur/index.vue |  2 +-
 src/view/content/live/index.vue         |  4 +--
 src/view/mediaFile/index.vue            | 21 ++-----------
 8 files changed, 62 insertions(+), 35 deletions(-)
 create mode 100644 src/components/video/videoViewer.vue

diff --git a/src/components/upload/cropperImg.vue b/src/components/upload/cropperImg.vue
index c776ecb..64bb7cb 100644
--- a/src/components/upload/cropperImg.vue
+++ b/src/components/upload/cropperImg.vue
@@ -50,8 +50,7 @@
         <vue-cropper v-if="showDrawer" ref="vueCropperRef" :outputSize="1" outputType="png" :img="vueCropperImg"
           :info="true" :full="true" autoCrop :centerBox="props.cropType === 'fixed' ? true : false"
           :autoCropWidth="props.imgWidth" :autoCropHeight="props.imgHeight"
-          :fixedBox="props.cropType === 'fixed' ? true : false" :fixedNumber="props.fixedNumber" :maxImgSize="2000"
-          @realTime="realTime" />
+          :fixedBox="props.cropType === 'fixed' ? true : false" :fixedNumber="props.fixedNumber" :maxImgSize="2000" />
       </div>
     </div>
   </el-drawer>
diff --git a/src/components/video/videoViewer.vue b/src/components/video/videoViewer.vue
new file mode 100644
index 0000000..a4ab4ef
--- /dev/null
+++ b/src/components/video/videoViewer.vue
@@ -0,0 +1,41 @@
+<template>
+  <div>
+    <div class="gva-media-box" :style="{ 'width': props.width, 'height': props.height }"
+      @click="clickPreviewVideo(props.url)">
+      <el-icon :size="25">
+        <VideoPlay />
+      </el-icon>
+    </div>
+
+    <el-dialog v-model="videoPreviewDialog" align-center :z-index="100" :append-to-body="true">
+      <video :src="videoPreviewUrl" controls="controls" style="width: 100%; height: 100%" />
+    </el-dialog>
+  </div>
+</template>
+
+<script setup>
+import { ref } from 'vue'
+
+const props = defineProps({
+  url: {
+    type: String,
+    required: true,
+  },
+  width: {
+    type: String,
+    default: '120px'
+  },
+  height: {
+    type: String,
+    default: '90px'
+  }
+})
+
+const videoPreviewDialog = ref(null)
+const videoPreviewUrl = ref('')
+const clickPreviewVideo = (url) => {
+  videoPreviewDialog.value = true
+  videoPreviewUrl.value = url
+}
+
+</script>
diff --git a/src/view/ad/content.vue b/src/view/ad/content.vue
index 3deb129..9599b31 100644
--- a/src/view/ad/content.vue
+++ b/src/view/ad/content.vue
@@ -13,10 +13,8 @@
           <template #default="scope">
             <el-image v-if="scope.row.adType === 1 || scope.row.adType === 3" :src="scope.row.mediaUrl"
               class="gva-image" fit="contain" :preview-src-list="[scope.row.mediaUrl]" preview-teleported
-              hide-on-click-modal close-on-press-escape />
-            <div v-else-if="scope.row.adType === 2">
-              <video :src="scope.row.mediaUrl" controls="controls" style="width: 120px; height: 80px" />
-            </div>
+              hide-on-click-modal close-on-press-escape style="width: 140px; height: 100px" />
+            <video-viewer v-else-if="scope.row.adType === 2" width="140px" height="100px" :url="scope.row.mediaUrl" />
           </template>
         </el-table-column>
         <el-table-column align="left" label="类型" min-width="80" prop="adType">
@@ -92,12 +90,14 @@
           <el-alert v-if="editForm.adType !== '' && editForm.adPositionId !== ''" type="info" :closable="false"
             style="margin-bottom: 10px;"
             :title="`文件类型为：${uploadInfo.mediaTypeInfo}, 大小不超过${uploadInfo.fileSizeInfo}, 宽*高: ${uploadInfo.mediaWidth}px*${uploadInfo.mediaHeight}px`" />
-          <div v-if="editForm.adType !== '' && editForm.adPositionId !== ''" class="flex flex-wrap gap-3">
-            <el-upload class="avatar-uploader"
-              :action="`${imgUploadPath}/cms/mediaFile/upload?category=ad_content_imgs`" :show-file-list="false"
-              :on-success="uploadSuccess" :on-error="uploadFailure" :before-upload="beforeUpload">
-              <el-button type="primary" plain icon="upload">上传</el-button>
+          <div class="gva-btn-list" v-if="editForm.adType !== '' && editForm.adPositionId !== ''" style="width: 100%;">
+            <el-upload :action="`${imgUploadPath}/cms/mediaFile/upload?category=ad_content_imgs`"
+              :show-file-list="false" :on-success="uploadSuccess" :on-error="uploadFailure"
+              :before-upload="beforeUpload">
+              <el-button type="default" plain icon="upload">直接上传</el-button>
             </el-upload>
+            <CropperImg name="avatar" :img-width="uploadInfo.mediaWidth" :img-height="uploadInfo.mediaHeight"
+              category="entrepreneur_imgs" @on-success="(res) => { uploadSuccess(res, 'avatar') }" />
           </div>
           <div class="upload-file-box">
             <el-image
@@ -120,6 +120,8 @@ import { reactive, ref } from 'vue'
 import { ElMessage, ElMessageBox } from 'element-plus'
 import { formatOnlyDate } from '@/utils/format'
 import { isImageMime, isVideoMime, isGifMime, checkImageWHEqual } from '@/utils/image'
+import VideoViewer from '@/components/video/videoViewer.vue'
+import CropperImg from '@/components/upload/cropperImg.vue'
 import {
   getAdContentList,
   addAdContent,
diff --git a/src/view/ad/position.vue b/src/view/ad/position.vue
index 1580376..c985b5a 100644
--- a/src/view/ad/position.vue
+++ b/src/view/ad/position.vue
@@ -6,10 +6,10 @@
       </div>
       <el-table :data="tableData" row-key="ID">
         <el-table-column align="left" label="ID" min-width="50" prop="ID" />
-        <el-table-column align="left" label="示例图片" min-width="100" prop="position">
+        <el-table-column align="left" label="示例图片" min-width="150" prop="position">
           <template #default="scope">
             <el-image :src="scope.row.imgUrl" class="gva-image" fit="contain" :preview-src-list="[scope.row.imgUrl]"
-              preview-teleported hide-on-click-modal close-on-press-escape style="width: 100px; height: 100px" />
+              preview-teleported hide-on-click-modal close-on-press-escape style="width: 140px; height: 100px" />
           </template>
         </el-table-column>
         <el-table-column align="left" label="位置名称" min-width="120" prop="position" />
diff --git a/src/view/content/academician/index.vue b/src/view/content/academician/index.vue
index 4557adc..47798a7 100644
--- a/src/view/content/academician/index.vue
+++ b/src/view/content/academician/index.vue
@@ -34,7 +34,7 @@
           <template #default="scope">
             <el-image v-if="scope.row.avatar" :src="scope.row.avatar" class="gva-image" fit="contain"
               :preview-src-list="[scope.row.avatar]" preview-teleported hide-on-click-modal close-on-press-escape
-              style="max-width: 80px; max-height: 100px" />
+              style="width: 75px; height: 100px" />
           </template>
         </el-table-column>
         <el-table-column align="left" label="姓名/职称" min-width="120" prop="name">
diff --git a/src/view/content/entrepreneur/index.vue b/src/view/content/entrepreneur/index.vue
index 47e26f4..1ca795a 100644
--- a/src/view/content/entrepreneur/index.vue
+++ b/src/view/content/entrepreneur/index.vue
@@ -34,7 +34,7 @@
           <template #default="scope">
             <el-image v-if="scope.row.avatar" :src="scope.row.avatar" class="gva-image" fit="contain"
               :preview-src-list="[scope.row.avatar]" preview-teleported hide-on-click-modal close-on-press-escape
-              style="max-width: 70px; max-height: 90px" />
+              style="width: 75px; height: 100px" />
           </template>
         </el-table-column>
         <el-table-column align="left" label="姓名/企业" min-width="120" prop="name">
diff --git a/src/view/content/live/index.vue b/src/view/content/live/index.vue
index 8ceb9e4..3568e1f 100644
--- a/src/view/content/live/index.vue
+++ b/src/view/content/live/index.vue
@@ -54,10 +54,10 @@
           </template>
         </el-table-column>
         <el-table-column align="left" label="ID" min-width="50" prop="ID" />
-        <el-table-column align="left" label="封面" min-width="160" prop="cover">
+        <el-table-column align="left" label="封面" min-width="180" prop="cover">
           <template #default="scope">
             <el-image :src="scope.row.cover" class="gva-image" fit="contain" :preview-src-list="[scope.row.cover]"
-              preview-teleported hide-on-click-modal close-on-press-escape />
+              preview-teleported hide-on-click-modal close-on-press-escape style="width: 160px; height: 90px;" />
           </template>
         </el-table-column>
         <el-table-column align="left" label="标题" min-width="220" prop="title" />
diff --git a/src/view/mediaFile/index.vue b/src/view/mediaFile/index.vue
index affd56c..e2ad5a4 100644
--- a/src/view/mediaFile/index.vue
+++ b/src/view/mediaFile/index.vue
@@ -23,13 +23,8 @@
             <el-image v-if="isImage(scope.row.tag)" :src="getUrl(scope.row.url)" class="gva-image" fit="contain"
               :preview-src-list="[getUrl(scope.row.url)]" :preview-teleported="true"
               style="width: 120px; height: 100px;" />
-            <div v-else-if="isVideo(scope.row.tag)" class="gva-media-box" style="width: 120px; height: 100px;"
-              @click="clickPreviewVideo(scope.row.url)">
-              <el-icon :size="25">
-                <VideoPlay />
-              </el-icon>
-            </div>
-            <div v-else class="gva-media-box" style="width: 120px; height: 80px;">
+            <video-viewer v-else-if="isVideo(scope.row.tag)" width="120px" height="100px" :url="scope.row.url" />
+            <div v-else class="gva-media-box" style="width: 120px; height: 100px;">
               <el-icon :size="25">
                 <Document />
               </el-icon>
@@ -76,9 +71,6 @@
           @current-change="handleCurrentChange" @size-change="handleSizeChange" />
       </div>
     </div>
-    <el-dialog v-model="videoPreviewDialog" align-center>
-      <video :src="videoPreviewUrl" controls="controls" style="width: 100%; height: 100%" />
-    </el-dialog>
   </div>
 </template>
 
@@ -88,6 +80,7 @@ import { getFileList, deleteFile, editFileName } from '@/api/mediaFile'
 import { downloadImage } from '@/utils/downloadImg'
 import UploadImage from '@/components/upload/image.vue'
 import UploadCommon from '@/components/upload/common.vue'
+import VideoViewer from '@/components/video/videoViewer.vue'
 import CropperImg from '@/components/upload/cropperImg.vue'
 import { getDictFunc, formatDate, filterDict } from '@/utils/format'
 import WarningBar from '@/components/warningBar/warningBar.vue'
@@ -231,14 +224,6 @@ const editFileNameFunc = async (row) => {
     })
   })
 }
-
-const videoPreviewDialog = ref(null)
-const videoPreviewUrl = ref('')
-const clickPreviewVideo = (url) => {
-  console.log('clickPreviewVideo')
-  videoPreviewDialog.value = true
-  videoPreviewUrl.value = url
-}
 </script>
 
 <style scoped>