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

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

@ -219,7 +219,6 @@ export default {
type: "Input", type: "Input",
width: "300px", width: "300px",
type: "jsx", type: "jsx",
rules: { required: true, message: "请添加视频" },
render: () => { render: () => {
const handleChange = (file, fileList) => { const handleChange = (file, fileList) => {
// console.log(fileList); // console.log(fileList);
@ -229,47 +228,62 @@ export default {
console.log(res, fileList); console.log(res, fileList);
}; };
const handleRemove = (file, fileList) => { const handleRemove = (file, fileList) => {
this.modalData.video = "";
console.log(file, fileList); console.log(file, fileList);
}; };
return ( return (
<div style="display: flex;"> <div>
<el-upload <div style="display: flex; align-items: flex-start; flex-wrap: wrap;">
class="upload-demo" <el-upload
action={this.$api.mer_admin.uploadFile()} class="upload-demo"
{...{ action={this.$api.mer_admin.uploadFile()}
props: { {...{
"on-change": handleChange, props: {
"on-success": handleAvatarSuccess, "on-change": handleChange,
"on-remove": handleRemove, "on-success": handleAvatarSuccess,
}, "on-remove": handleRemove,
}} },
headers={{ }}
token: "Bearer " + this.$cookie.get("token"), headers={{
}} token: "Bearer " + this.$cookie.get("token"),
multiple={true} }}
file-list={this.fileList} multiple={false}
// list-type="picture" file-list={this.modalData.video ? [{name: 'video', url: this.modalData.video}] : []}
> 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
> >
<source src={this.modalData.video} type="video/mp4" /> <el-button size="small" type="primary">
</video> <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> </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> </div>
); );
}, },