广告内容列表页增加媒体文件显示

This commit is contained in:
jacky 2024-04-20 09:49:01 +08:00
parent fd383e178c
commit ffee2285e5
1 changed files with 17 additions and 5 deletions

View File

@ -8,7 +8,17 @@
</div> </div>
<el-table ref="multipleTable" :data="tableData" row-key="ID" @selection-change="handleSelectionChange"> <el-table ref="multipleTable" :data="tableData" row-key="ID" @selection-change="handleSelectionChange">
<el-table-column fixed type="selection" width="40" align="center" /> <el-table-column fixed type="selection" width="40" align="center" />
<el-table-column align="left" label="ID" min-width="80" prop="ID" /> <el-table-column align="left" label="ID" min-width="60" prop="ID" />
<el-table-column align="left" label="媒体文件" min-width="160" prop="position">
<template #default="scope">
<el-image v-if="scope.row.adType === 1 || scope.row.adType === 3" :src="scope.row.mediaUrl" class="file"
fit="cover" :preview-src-list="[scope.row.mediaUrl]" preview-teleported hide-on-click-modal
close-on-press-escape style="width: 120px; height: 80px" />
<div v-else-if="scope.row.adType === 2">
<video :src="scope.row.mediaUrl" controls="controls" style="width: 120px; height: 80px" />
</div>
</template>
</el-table-column>
<el-table-column align="left" label="类型" min-width="80" prop="adType"> <el-table-column align="left" label="类型" min-width="80" prop="adType">
<template #default="scope"> <template #default="scope">
{{ formatAdType(scope.row.adType) }} {{ formatAdType(scope.row.adType) }}
@ -21,12 +31,12 @@
</el-table-column> </el-table-column>
<el-table-column align="left" label="媒体地址" min-width="300" prop="mediaUrl" /> <el-table-column align="left" label="媒体地址" min-width="300" prop="mediaUrl" />
<el-table-column align="left" label="跳转地址" min-width="300" prop="url" /> <el-table-column align="left" label="跳转地址" min-width="300" prop="url" />
<el-table-column align="left" label="有效起始日期" min-width="140" prop="validStart"> <el-table-column align="left" label="有效起始" min-width="140" prop="validStart">
<template #default="scope"> <template #default="scope">
{{ formatOnlyDate(scope.row.validStart) }} {{ formatOnlyDate(scope.row.validStart) }}
</template> </template>
</el-table-column> </el-table-column>
<el-table-column align="left" label="有效截止日期" min-width="140" prop="validEnd"> <el-table-column align="left" label="有效截止" min-width="140" prop="validEnd">
<template #default="scope"> <template #default="scope">
{{ formatOnlyDate(scope.row.validEnd) }} {{ formatOnlyDate(scope.row.validEnd) }}
</template> </template>
@ -92,8 +102,10 @@
</el-upload> </el-upload>
</div> </div>
<div class="upload-file-box"> <div class="upload-file-box">
<el-image v-if="editForm.mediaUrl !== '' && uploadInfo.mediaType === 'pic'" :src="editForm.mediaUrl" <el-image
class="avatar" fit="cover" style="width: 100%; min-height: 178px; min-width: 178px;" /> v-if="editForm.mediaUrl !== '' && (uploadInfo.mediaType === 'pic' || uploadInfo.mediaType === 'gif')"
:src="editForm.mediaUrl" class="avatar" fit="cover"
style="width: 100%; min-height: 178px; min-width: 178px;" />
<div v-else-if="editForm.mediaUrl !== '' && uploadInfo.mediaType === 'video'"> <div v-else-if="editForm.mediaUrl !== '' && uploadInfo.mediaType === 'video'">
<video :src="editForm.mediaUrl" controls="controls" :width="uploadInfo.mediaWidth" <video :src="editForm.mediaUrl" controls="controls" :width="uploadInfo.mediaWidth"
:height="uploadInfo.mediaHeight" /> :height="uploadInfo.mediaHeight" />