gva
/
web-admin
2
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

修改图片和视频预览

This commit is contained in:
jacky 2024-05-08 12:48:23 +08:00
parent 2b37ea8dff
commit 96eaeaca93
8 changed files with 62 additions and 35 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
src/components/upload/cropperImg.vue
View File

@ -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>

41
src/components/video/videoViewer.vue Normal file
View File

@ -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>

20
src/view/ad/content.vue
View File

@ -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,

4
src/view/ad/position.vue
View File

@ -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" />

2
src/view/content/academician/index.vue
View File

@ -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">

2
src/view/content/entrepreneur/index.vue
View File

@ -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">

4
src/view/content/live/index.vue
View File

@ -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" />

21
src/view/mediaFile/index.vue
View File

@ -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>