| @@ -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"/> | |||