@@ -65,11 +65,13 @@ export function videoSave(data) { | |||
data | |||
}) | |||
} | |||
export function deleteVideo(data) { | |||
export function deleteVideo(id) { | |||
return request({ | |||
url: '/index/deleteVideo', | |||
method: 'get', | |||
data | |||
url: `/index/deleteVideo`, | |||
method: 'post', | |||
data: { | |||
id: id | |||
} | |||
}) | |||
} | |||
@@ -1,26 +1,23 @@ | |||
<!-- | |||
* @Autor: Chuting | |||
* @Date: 2022-11-02 10:03:47 | |||
* @LastEditors: Chuting | |||
* @LastEditTime: 2022-11-02 13:56:17 | |||
* @Description: 图片上传 | |||
--> | |||
<template> | |||
<el-upload | |||
v-loading="loading" | |||
class="avatar-uploader" | |||
action="#" | |||
:show-file-list="false" | |||
:before-upload="beforeAvatarUpload" | |||
:http-request="uploadHttpRequest"> | |||
<template v-if="url"> | |||
<video v-if="type === 'video'" :src="url" class="avatar" controls="controls"> | |||
您的浏览器不支持视频播放 | |||
</video> | |||
<img v-else :src="url" class="avatar"> | |||
</template> | |||
<i v-else class="el-icon-plus avatar-uploader-icon"></i> | |||
</el-upload> | |||
<div> | |||
<p v-if="type === 'video'" class="tip">请上传MP4格式的 {{ tip }}</p> | |||
<el-upload | |||
v-loading="loading" | |||
:element-loading-text="loadingText" | |||
class="avatar-uploader" | |||
action="#" | |||
:show-file-list="false" | |||
:before-upload="beforeAvatarUpload" | |||
:http-request="uploadHttpRequest"> | |||
<template v-if="url"> | |||
<video v-if="type === 'video'" :src="url" class="avatar" controls="controls"> | |||
您的浏览器不支持视频播放 | |||
</video> | |||
<img v-else :src="url" class="avatar"> | |||
</template> | |||
<i v-else class="el-icon-plus avatar-uploader-icon"></i> | |||
</el-upload> | |||
</div> | |||
</template> | |||
<script> | |||
import { upload, videoUpload, uploadProgress, videoDetial } from '@/api/common.js' | |||
@@ -41,54 +38,21 @@ export default { | |||
height: { | |||
type: String, | |||
default: '' | |||
}, | |||
tip: { | |||
type: String, | |||
default: '' | |||
} | |||
}, | |||
data() { | |||
return { | |||
loading: false | |||
loading: false, | |||
loadingText: '上传中' | |||
} | |||
}, | |||
methods: { | |||
/* // 上传图片时限制图片的尺寸 | |||
beforeUpload(file) { | |||
//进行图片类型和大小的限制 | |||
const isLt10M = file.size / 1024 / 1024 < 10; | |||
if (!isLt10M) { | |||
this.$message({ | |||
message: "广告图大小不能超过10M!请重新选择!", | |||
type: "warning", | |||
}); | |||
return false; //必须加上return false; 才能阻止 | |||
} | |||
const isSize = new Promise(function (resolve, reject) { | |||
let width = 1920; | |||
// let height = 500; | |||
let _URL = window.URL || window.webkitURL; | |||
let img = new Image(); | |||
img.onload = function () { | |||
let valid = | |||
img.width == width && (img.height == 500 || img.height == 280); | |||
valid ? resolve() : reject(); | |||
}; | |||
img.src = _URL.createObjectURL(file); | |||
}).then( | |||
() => { | |||
return file; | |||
}, | |||
() => { | |||
this.$message({ | |||
message: "广告图尺寸只能是500或280*1920px!请重新选择!", | |||
type: "warning", | |||
}); | |||
return Promise.reject(); | |||
return false; //必须加上return false; 才能阻止 | |||
} | |||
); | |||
return isLt10M && isSize; | |||
}, */ | |||
beforeAvatarUpload(file) { | |||
const isType = this.type === 'video' ? (file.type === ('video/mp4' || 'video/avi' || 'video/wmv' || 'video/mov')) : (file.type === 'image/jpeg' || file.type === 'image/png' || file.type === 'image/jpg' || file.type === 'image/gif') | |||
const isType = this.type === 'video' ? (file.type === ('video/mp4')) : (file.type === 'image/jpeg' || file.type === 'image/png' || file.type === 'image/jpg' || file.type === 'image/gif') | |||
const isLt2M = this.type === 'video' ? file.size / 1024 / 1024 < 50 : file.size / 1024 / 1024 < 10 | |||
if (!isType) { | |||
@@ -107,6 +71,10 @@ export default { | |||
if (d === 'complete') { | |||
videoDetial(videoId).then(url => { | |||
this.$emit('update:url', url.videoUrl) | |||
this.$message({ | |||
message: '上传成功!', | |||
type: 'success' | |||
}) | |||
this.loading = false | |||
}) | |||
} else if (d === 'error') { | |||
@@ -116,6 +84,7 @@ export default { | |||
}) | |||
this.loading = false | |||
} else { | |||
this.loadingText = '上传中' | |||
this.getVideo(videoId) | |||
} | |||
}) | |||
@@ -163,4 +132,9 @@ export default { | |||
height: 150px; | |||
display: block; | |||
} | |||
.tip{ | |||
color: red; | |||
margin: 0; | |||
font-size: 14px; | |||
} | |||
</style> |
@@ -59,7 +59,7 @@ | |||
<el-input v-model="ruleForm.serialNumber"></el-input> | |||
</el-form-item> | |||
<el-form-item label="视频" prop="link"> | |||
<uploadFile :url.sync="ruleForm.link" type="video"/> | |||
<uploadFile :url.sync="ruleForm.link" type="video" tip="9:16竖屏视频"/> | |||
</el-form-item> | |||
<el-form-item label="标题" prop="title"> | |||
<el-input v-model="ruleForm.title"></el-input> | |||
@@ -59,7 +59,7 @@ | |||
<el-input v-model="ruleForm.serialNumber"></el-input> | |||
</el-form-item> | |||
<el-form-item label="视频" prop="link"> | |||
<uploadFile :url.sync="ruleForm.link" type="video" /> | |||
<uploadFile :url.sync="ruleForm.link" type="video" tip="横屏视频"/> | |||
</el-form-item> | |||
<el-form-item label="标题" prop="title"> | |||
<el-input v-model="ruleForm.title"></el-input> | |||
@@ -111,7 +111,7 @@ | |||
<p style="color: #909399;">*请上传400*300的图片</p> | |||
</el-form-item> | |||
<el-form-item label="视频" prop="video"> | |||
<uploadFile :url.sync="ruleForm.video" type="video" /> | |||
<uploadFile :url.sync="ruleForm.video" type="video" tip="横屏视频"/> | |||
</el-form-item> | |||
<el-form-item label="视频封面" prop="videoImage"> | |||
<uploadFile :url.sync="ruleForm.videoImage" type="image" width="1300" height="940"/> | |||
@@ -12,8 +12,8 @@ | |||
@keyup.enter.native="crud.toQuery" /> | |||
<el-select v-model="query.subType" clearable placeholder="类型" class="filter-item"> | |||
<el-option label="汽车资讯" value="11"></el-option> | |||
<el-option label="元宇宙日爆" value="12"></el-option> | |||
<el-option label="汽车资讯" :value="11"></el-option> | |||
<el-option label="元宇宙日爆" :value="12"></el-option> | |||
</el-select> | |||
<el-date-picker v-model="query.sendDate" value-format="yyyy-MM-dd HH:mm:ss" type="datetimerange" range-separator="-" start-placeholder="开始日期" end-placeholder="结束日期" class="date-item" style="width:300px !important; margin: 0 3px 10px 0;"></el-date-picker> | |||
@@ -28,16 +28,21 @@ | |||
<!--表格渲染--> | |||
<el-table ref="table" v-loading="crud.loading" :data="crud.data" style="width: 100%;"> | |||
<el-table-column :show-overflow-tooltip="true" prop="title" label="标题" /> | |||
<el-table-column :show-overflow-tooltip="true" prop="subTitle" label="副标题" /> | |||
<el-table-column :show-overflow-tooltip="true" prop="detail" label="详情" /> | |||
<el-table-column :show-overflow-tooltip="true" prop="image" label="图片"> | |||
<el-table-column :show-overflow-tooltip="true" align="center" prop="title" label="标题" /> | |||
<el-table-column :show-overflow-tooltip="true" align="center" prop="subTitle" label="副标题" /> | |||
<el-table-column :show-overflow-tooltip="true" align="center" prop="detail" label="详情" /> | |||
<el-table-column :show-overflow-tooltip="true" align="center" prop="image" label="图片"> | |||
<template slot-scope="scope"> | |||
<img :src="scope.row.image" width="50px" /> | |||
</template> | |||
</el-table-column> | |||
<el-table-column :show-overflow-tooltip="true" prop="image" label="视频地址" /> | |||
<el-table-column :show-overflow-tooltip="true" prop="sendDate" label="发布时间"> | |||
<el-table-column :show-overflow-tooltip="true" align="center" prop="image" label="视频地址" /> | |||
<el-table-column :show-overflow-tooltip="true" align="center" prop="subType" label="类型"> | |||
<template slot-scope="scope"> | |||
{{ scope.row.subType === 12 ? '元宇宙日爆' : '汽车资讯' }} | |||
</template> | |||
</el-table-column> | |||
<el-table-column :show-overflow-tooltip="true" align="center" prop="sendDate" label="发布时间"> | |||
<template slot-scope="scope"> | |||
{{ $moment(scope.row.sendDate).format('YYYY-MM-DD HH:mm:ss') }} | |||
</template> | |||
@@ -109,8 +114,8 @@ | |||
</el-form-item> | |||
<el-form-item label="类型" prop="subType"> | |||
<el-select v-model="ruleForm.subType" clearable placeholder="类型"> | |||
<el-option label="汽车资讯" value="11"></el-option> | |||
<el-option label="元宇宙日爆" value="12"></el-option> | |||
<el-option label="汽车资讯" :value="11"></el-option> | |||
<el-option label="元宇宙日爆" :value="12"></el-option> | |||
</el-select> | |||
</el-form-item> | |||
<el-form-item label="详情" prop="detail"> | |||
@@ -121,7 +126,7 @@ | |||
<p style="color: #909399;">*请上传300*224的图片</p> | |||
</el-form-item> | |||
<el-form-item label="视频" prop="video"> | |||
<uploadFile :url.sync="ruleForm.video" type="video" /> | |||
<uploadFile :url.sync="ruleForm.video" type="video" tip="横屏视频"/> | |||
</el-form-item> | |||
<el-form-item label="发布时间" prop="sendDate"> | |||
<el-date-picker | |||
@@ -28,16 +28,17 @@ | |||
<!--表格渲染--> | |||
<el-table ref="table" v-loading="crud.loading" :data="crud.data" style="width: 100%;"> | |||
<el-table-column :show-overflow-tooltip="true" prop="title" label="标题" /> | |||
<el-table-column :show-overflow-tooltip="true" prop="subTitle" label="副标题" /> | |||
<el-table-column :show-overflow-tooltip="true" prop="detail" label="详情" /> | |||
<el-table-column :show-overflow-tooltip="true" prop="image" label="图片"> | |||
<el-table-column :show-overflow-tooltip="true" align="center" prop="title" label="标题" /> | |||
<el-table-column :show-overflow-tooltip="true" align="center" prop="subTitle" label="副标题" /> | |||
<el-table-column :show-overflow-tooltip="true" align="center" prop="detail" label="详情" /> | |||
<el-table-column :show-overflow-tooltip="true" align="center" prop="image" label="图片"> | |||
<template slot-scope="scope"> | |||
<img :src="scope.row.image" width="50px" /> | |||
</template> | |||
</el-table-column> | |||
<el-table-column :show-overflow-tooltip="true" prop="image" label="视频地址" /> | |||
<el-table-column :show-overflow-tooltip="true" prop="sendDate" label="发布时间"> | |||
<el-table-column :show-overflow-tooltip="true" align="center" prop="image" label="视频地址" /> | |||
<el-table-column :show-overflow-tooltip="true" align="center" prop="tag" label="类型" /> | |||
<el-table-column :show-overflow-tooltip="true" align="center" prop="sendDate" label="发布时间"> | |||
<template slot-scope="scope"> | |||
{{ $moment(scope.row.sendDate).format('YYYY-MM-DD HH:mm:ss') }} | |||
</template> | |||
@@ -123,7 +124,7 @@ | |||
<p style="color: #909399;">*请上传400*300的图片</p> | |||
</el-form-item> | |||
<el-form-item label="视频" prop="video"> | |||
<uploadFile :url.sync="ruleForm.video" type="video" /> | |||
<uploadFile :url.sync="ruleForm.video" type="video" tip="横屏视频"/> | |||
</el-form-item> | |||
<el-form-item label="视频封面" prop="videoImage"> | |||
<uploadFile :url.sync="ruleForm.videoImage" type="image" width="1300" height="940"/> | |||
@@ -28,16 +28,17 @@ | |||
<!--表格渲染--> | |||
<el-table ref="table" v-loading="crud.loading" :data="crud.data" style="width: 100%;"> | |||
<el-table-column :show-overflow-tooltip="true" prop="title" label="标题" /> | |||
<el-table-column :show-overflow-tooltip="true" prop="subTitle" label="副标题" /> | |||
<el-table-column :show-overflow-tooltip="true" prop="detail" label="详情" /> | |||
<el-table-column :show-overflow-tooltip="true" prop="image" label="图片"> | |||
<el-table-column :show-overflow-tooltip="true" align="center" prop="title" label="标题" /> | |||
<el-table-column :show-overflow-tooltip="true" align="center" prop="subTitle" label="副标题" /> | |||
<el-table-column :show-overflow-tooltip="true" align="center" prop="detail" label="详情" /> | |||
<el-table-column :show-overflow-tooltip="true" align="center" prop="image" label="图片"> | |||
<template slot-scope="scope"> | |||
<img :src="scope.row.image" width="50px" /> | |||
</template> | |||
</el-table-column> | |||
<el-table-column :show-overflow-tooltip="true" prop="image" label="视频地址" /> | |||
<el-table-column :show-overflow-tooltip="true" prop="sendDate" label="发布时间"> | |||
<el-table-column :show-overflow-tooltip="true" align="center" prop="image" label="视频地址" /> | |||
<el-table-column :show-overflow-tooltip="true" align="center" prop="tag" label="类型" /> | |||
<el-table-column :show-overflow-tooltip="true" align="center" prop="sendDate" label="发布时间"> | |||
<template slot-scope="scope"> | |||
{{ $moment(scope.row.sendDate).format('YYYY-MM-DD HH:mm:ss') }} | |||
</template> | |||
@@ -122,7 +123,7 @@ | |||
<p style="color: #909399;">*请上传400*300的图片</p> | |||
</el-form-item> | |||
<el-form-item label="视频" prop="video"> | |||
<uploadFile :url.sync="ruleForm.video" type="video" /> | |||
<uploadFile :url.sync="ruleForm.video" type="video" tip="横屏视频"/> | |||
</el-form-item> | |||
<el-form-item label="视频封面" prop="videoImage"> | |||
<uploadFile :url.sync="ruleForm.videoImage" type="image" width="1300" height="940"/> | |||