| @@ -65,11 +65,13 @@ export function videoSave(data) { | |||||
| data | data | ||||
| }) | }) | ||||
| } | } | ||||
| export function deleteVideo(data) { | |||||
| export function deleteVideo(id) { | |||||
| return request({ | 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> | <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> | </template> | ||||
| <script> | <script> | ||||
| import { upload, videoUpload, uploadProgress, videoDetial } from '@/api/common.js' | import { upload, videoUpload, uploadProgress, videoDetial } from '@/api/common.js' | ||||
| @@ -41,54 +38,21 @@ export default { | |||||
| height: { | height: { | ||||
| type: String, | type: String, | ||||
| default: '' | default: '' | ||||
| }, | |||||
| tip: { | |||||
| type: String, | |||||
| default: '' | |||||
| } | } | ||||
| }, | }, | ||||
| data() { | data() { | ||||
| return { | return { | ||||
| loading: false | |||||
| loading: false, | |||||
| loadingText: '上传中' | |||||
| } | } | ||||
| }, | }, | ||||
| methods: { | 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) { | 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 | const isLt2M = this.type === 'video' ? file.size / 1024 / 1024 < 50 : file.size / 1024 / 1024 < 10 | ||||
| if (!isType) { | if (!isType) { | ||||
| @@ -107,6 +71,10 @@ export default { | |||||
| if (d === 'complete') { | if (d === 'complete') { | ||||
| videoDetial(videoId).then(url => { | videoDetial(videoId).then(url => { | ||||
| this.$emit('update:url', url.videoUrl) | this.$emit('update:url', url.videoUrl) | ||||
| this.$message({ | |||||
| message: '上传成功!', | |||||
| type: 'success' | |||||
| }) | |||||
| this.loading = false | this.loading = false | ||||
| }) | }) | ||||
| } else if (d === 'error') { | } else if (d === 'error') { | ||||
| @@ -116,6 +84,7 @@ export default { | |||||
| }) | }) | ||||
| this.loading = false | this.loading = false | ||||
| } else { | } else { | ||||
| this.loadingText = '上传中' | |||||
| this.getVideo(videoId) | this.getVideo(videoId) | ||||
| } | } | ||||
| }) | }) | ||||
| @@ -163,4 +132,9 @@ export default { | |||||
| height: 150px; | height: 150px; | ||||
| display: block; | display: block; | ||||
| } | } | ||||
| .tip{ | |||||
| color: red; | |||||
| margin: 0; | |||||
| font-size: 14px; | |||||
| } | |||||
| </style> | </style> | ||||
| @@ -59,7 +59,7 @@ | |||||
| <el-input v-model="ruleForm.serialNumber"></el-input> | <el-input v-model="ruleForm.serialNumber"></el-input> | ||||
| </el-form-item> | </el-form-item> | ||||
| <el-form-item label="视频" prop="link"> | <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> | ||||
| <el-form-item label="标题" prop="title"> | <el-form-item label="标题" prop="title"> | ||||
| <el-input v-model="ruleForm.title"></el-input> | <el-input v-model="ruleForm.title"></el-input> | ||||
| @@ -59,7 +59,7 @@ | |||||
| <el-input v-model="ruleForm.serialNumber"></el-input> | <el-input v-model="ruleForm.serialNumber"></el-input> | ||||
| </el-form-item> | </el-form-item> | ||||
| <el-form-item label="视频" prop="link"> | <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> | ||||
| <el-form-item label="标题" prop="title"> | <el-form-item label="标题" prop="title"> | ||||
| <el-input v-model="ruleForm.title"></el-input> | <el-input v-model="ruleForm.title"></el-input> | ||||
| @@ -111,7 +111,7 @@ | |||||
| <p style="color: #909399;">*请上传400*300的图片</p> | <p style="color: #909399;">*请上传400*300的图片</p> | ||||
| </el-form-item> | </el-form-item> | ||||
| <el-form-item label="视频" prop="video"> | <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> | ||||
| <el-form-item label="视频封面" prop="videoImage"> | <el-form-item label="视频封面" prop="videoImage"> | ||||
| <uploadFile :url.sync="ruleForm.videoImage" type="image" width="1300" height="940"/> | <uploadFile :url.sync="ruleForm.videoImage" type="image" width="1300" height="940"/> | ||||
| @@ -12,8 +12,8 @@ | |||||
| @keyup.enter.native="crud.toQuery" /> | @keyup.enter.native="crud.toQuery" /> | ||||
| <el-select v-model="query.subType" clearable placeholder="类型" class="filter-item"> | <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-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> | <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 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"> | <template slot-scope="scope"> | ||||
| <img :src="scope.row.image" width="50px" /> | <img :src="scope.row.image" width="50px" /> | ||||
| </template> | </template> | ||||
| </el-table-column> | </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"> | <template slot-scope="scope"> | ||||
| {{ $moment(scope.row.sendDate).format('YYYY-MM-DD HH:mm:ss') }} | {{ $moment(scope.row.sendDate).format('YYYY-MM-DD HH:mm:ss') }} | ||||
| </template> | </template> | ||||
| @@ -109,8 +114,8 @@ | |||||
| </el-form-item> | </el-form-item> | ||||
| <el-form-item label="类型" prop="subType"> | <el-form-item label="类型" prop="subType"> | ||||
| <el-select v-model="ruleForm.subType" clearable placeholder="类型"> | <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-select> | ||||
| </el-form-item> | </el-form-item> | ||||
| <el-form-item label="详情" prop="detail"> | <el-form-item label="详情" prop="detail"> | ||||
| @@ -121,7 +126,7 @@ | |||||
| <p style="color: #909399;">*请上传300*224的图片</p> | <p style="color: #909399;">*请上传300*224的图片</p> | ||||
| </el-form-item> | </el-form-item> | ||||
| <el-form-item label="视频" prop="video"> | <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> | ||||
| <el-form-item label="发布时间" prop="sendDate"> | <el-form-item label="发布时间" prop="sendDate"> | ||||
| <el-date-picker | <el-date-picker | ||||
| @@ -28,16 +28,17 @@ | |||||
| <!--表格渲染--> | <!--表格渲染--> | ||||
| <el-table ref="table" v-loading="crud.loading" :data="crud.data" style="width: 100%;"> | <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"> | <template slot-scope="scope"> | ||||
| <img :src="scope.row.image" width="50px" /> | <img :src="scope.row.image" width="50px" /> | ||||
| </template> | </template> | ||||
| </el-table-column> | </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"> | <template slot-scope="scope"> | ||||
| {{ $moment(scope.row.sendDate).format('YYYY-MM-DD HH:mm:ss') }} | {{ $moment(scope.row.sendDate).format('YYYY-MM-DD HH:mm:ss') }} | ||||
| </template> | </template> | ||||
| @@ -123,7 +124,7 @@ | |||||
| <p style="color: #909399;">*请上传400*300的图片</p> | <p style="color: #909399;">*请上传400*300的图片</p> | ||||
| </el-form-item> | </el-form-item> | ||||
| <el-form-item label="视频" prop="video"> | <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> | ||||
| <el-form-item label="视频封面" prop="videoImage"> | <el-form-item label="视频封面" prop="videoImage"> | ||||
| <uploadFile :url.sync="ruleForm.videoImage" type="image" width="1300" height="940"/> | <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 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"> | <template slot-scope="scope"> | ||||
| <img :src="scope.row.image" width="50px" /> | <img :src="scope.row.image" width="50px" /> | ||||
| </template> | </template> | ||||
| </el-table-column> | </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"> | <template slot-scope="scope"> | ||||
| {{ $moment(scope.row.sendDate).format('YYYY-MM-DD HH:mm:ss') }} | {{ $moment(scope.row.sendDate).format('YYYY-MM-DD HH:mm:ss') }} | ||||
| </template> | </template> | ||||
| @@ -122,7 +123,7 @@ | |||||
| <p style="color: #909399;">*请上传400*300的图片</p> | <p style="color: #909399;">*请上传400*300的图片</p> | ||||
| </el-form-item> | </el-form-item> | ||||
| <el-form-item label="视频" prop="video"> | <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> | ||||
| <el-form-item label="视频封面" prop="videoImage"> | <el-form-item label="视频封面" prop="videoImage"> | ||||
| <uploadFile :url.sync="ruleForm.videoImage" type="image" width="1300" height="940"/> | <uploadFile :url.sync="ruleForm.videoImage" type="image" width="1300" height="940"/> | ||||