DMJS-IT
/
merchant-web
12
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

fix: 品牌视频处理

This commit is contained in:
lzhizhao 2025-09-25 12:56:02 +08:00
parent 9ec6a185fd
commit 0d47faf1c2
1 changed files with 52 additions and 38 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

90
src/views/modules/brand/config/popup/add-or-update.vue
View File

@ -219,7 +219,6 @@ export default {
type: "Input",
width: "300px",
type: "jsx",
rules: { required: true, message: "请添加视频" },
render: () => {
const handleChange = (file, fileList) => {
// console.log(fileList);
@ -229,47 +228,62 @@ export default {
console.log(res, fileList);
};
const handleRemove = (file, fileList) => {
this.modalData.video = "";
console.log(file, fileList);
};
return (
<div style="display: flex;">
<el-upload
class="upload-demo"
action={this.$api.mer_admin.uploadFile()}
{...{
props: {
"on-change": handleChange,
"on-success": handleAvatarSuccess,
"on-remove": handleRemove,
},
}}
headers={{
token: "Bearer " + this.$cookie.get("token"),
}}
multiple={true}
file-list={this.fileList}
// list-type="picture"
>
<el-button size="small" type="primary">
<i class="el-icon-upload"></i>点击上传
</el-button>
<div class="el-upload__tip" slot="tip">
只能上传jpg/png文件，且不超过500kb
</div>
</el-upload>
<div style="margin-left:20px">
<video
id="videoPlayer"
width="200px"
height="100px"
object-fit="fill"
muted="muted"
loop
controls
<div>
<div style="display: flex; align-items: flex-start; flex-wrap: wrap;">
<el-upload
class="upload-demo"
action={this.$api.mer_admin.uploadFile()}
{...{
props: {
"on-change": handleChange,
"on-success": handleAvatarSuccess,
"on-remove": handleRemove,
},
}}
headers={{
token: "Bearer " + this.$cookie.get("token"),
}}
multiple={false}
file-list={this.modalData.video ? [{name: 'video', url: this.modalData.video}] : []}
list-type="picture"
>
<source src={this.modalData.video} type="video/mp4" />
</video>
<el-button size="small" type="primary">
<i class="el-icon-upload"></i>点击上传
</el-button>
<div class="el-upload__tip" slot="tip">
只能上传视频文件，且不超过500kb
</div>
</el-upload>
{this.modalData.video && (
<div style="margin-left: 20px; margin-top: 0; display: flex; align-items: center; min-width: 220px;">
<div style="position: relative; border: 1px solid #dcdfe6; border-radius: 4px; padding: 5px; background: #f5f7fa;">
<video
id="videoPlayer"
width="200px"
height="100px"
style="object-fit: cover; border-radius: 2px; display: block;"
muted="muted"
loop
controls
>
<source src={this.modalData.video} type="video/mp4" />
</video>
<div style="margin-top: 5px; font-size: 12px; color: #909399; text-align: center;">
当前视频预览
</div>
</div>
</div>
)}
</div>
{this.modalData.video && (
<div style="margin-top: 10px; font-size: 12px; color: #606266; word-break: break-all; max-width: 400px;">
视频URL: {this.modalData.video}
</div>
)}
</div>
);
},
@ -321,4 +335,4 @@ export default {
overflow-y: scroll !important;
height: 65vh !important;
}
</style>
</style>