From bd57e65508781d967dedff5bb535dfefdb56e9e2 Mon Sep 17 00:00:00 2001 From: zxl <763096477@qq.com> Date: 星期四, 21 八月 2025 14:39:30 +0800 Subject: [PATCH] 抽奖活动,奖品 --- manager/src/views/video/VideoList.vue | 290 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++- 1 files changed, 284 insertions(+), 6 deletions(-) diff --git a/manager/src/views/video/VideoList.vue b/manager/src/views/video/VideoList.vue index 070f4cc..ef36837 100644 --- a/manager/src/views/video/VideoList.vue +++ b/manager/src/views/video/VideoList.vue @@ -115,10 +115,25 @@ </FormItem> </Col> </Row> + <Row> + <Col span="24" v-show="uploadVideoForm.videoFileKey && !uploadVideoForm.coverUrl"> + <FormItem label="涓婁紶灏侀潰" prop="coverUrl" :label-width="80"> + <Upload + :multiple="true" + :before-upload="upLoadImagCover" + accept="image/*" + action="" + > + <Button icon="ios-cloud-upload-outline">閫夋嫨灏侀潰</Button> + </Upload> + </FormItem> + </Col> + </Row> <Row :gutter="24"> <Col span="12" v-if="uploadVideoForm.videoFileKey"> <FormItem :labelWidth="80"> - <Button @click="reloadVideo" type="primary">閲嶆柊涓婁紶瑙嗛</Button> + <Button @click="reloadVideo" type="primary" >閲嶆柊涓婁紶瑙嗛</Button> + <Button type="primary" @click="clearCoverImage" v-show="uploadVideoForm.coverUrl" style="margin-left: 20px">閲嶆柊涓婁紶灏侀潰</Button> </FormItem> </Col> </Row> @@ -416,8 +431,97 @@ <Button type="success" size="small" style="margin-right: 5px" v-else-if="row.status === '0'" @click="videoUp(row)">涓婃灦 </Button> + <Button type="error" size="small" style="margin-right: 5px" + @click="openComment(row)"> + 鏌ョ湅璇勮 + </Button> </template> </Table> + <Modal + v-model="showVideoComment" + title="瑙嗛璇勮" + width="1000" + :mask-closable="false"> + <Form :model="commentForm" ref="commentForm"> + <Row type="flex" :gutter="16"> + <Col> + <FormItem :label-width="70" label="鍐呭锛�" prop="commentContent"> + <Input style="width: 120px" + v-model="commentForm.commentContent" placeholder="璇疯緭鍏ュ唴瀹�" + @on-clear="commentHandleSearch" + @on-change="commentHandleSearch"></Input> + </FormItem> + </Col> + <Col> + <FormItem :label-width="70" label="鐢ㄦ埛鏄电О锛�" prop="nickName"> + <Input style="width: 120px" v-model="commentForm.nickName" placeholder="璇疯緭鍏ュ唴瀹�" + @on-clear="commentHandleSearch" + @on-change="commentHandleSearch"></Input> + </FormItem> + </Col> + <Col> + <FormItem :label-width="70" label="寮�濮嬫椂闂达細" prop="startTime"> + <DatePicker + :v-model="commentForm.startTime" + type="datetime" + placeholder="閫夋嫨寮�濮嬫椂闂�" + style="width: 120px" + @on-change="commentHandleSearch($event)" + @on-clear="commentHandleSearch" + ></DatePicker> + </FormItem> + </Col> + <Col> + <FormItem :label-width="70" label="缁撴潫鏃堕棿锛�" prop="endTime"> + <DatePicker + :v-model="commentForm.endTime" + type="datetime" + placeholder="閫夋嫨缁撴潫鏃堕棿" + style="width: 120px" + @on-change="commentHandleSearch($event)" + @on-clear="commentHandleSearch" + ></DatePicker> + </FormItem> + </Col> + </Row> + </Form> + + <div slot="footer"> + <Button type="text" @click="closeVideoDown">鍏抽棴</Button> + <Button type="primary" @click="videoDown">纭</Button> + </div> + <Table + :loading="commentLoading" + border + :columns="commentColumns" + :data="commentData" + ref="commentTable" + sortable="custom" + > + <template slot-scope="{ row, index }" slot="action"> + <Button type="error" size="small" + @click="removeComment(row)">鍒犻櫎</Button> + </template> + </Table> + <Row type="flex" justify="end" class="page-footer"> + <Page + :current="commentForm.pageNumber" + :total="commentTotal" + :page-size="commentForm.pageSize" + @on-change="commentChangePage" + @on-page-size-change="commentChangePageSize" + :page-size-opts="[10, 20, 50]" + size="small" + show-total + show-elevator + show-sizer + ></Page> + </Row> + <div slot="footer"> + + </div> + </Modal> + <Modal v-model="showGeneralQrCode" title="浜岀淮鐮�" @@ -464,7 +568,9 @@ down, recreateIndex, publish, - updatePublish + updatePublish, + getCommentPage, + removeById } from "@/api/video"; import {getVideoTagList, recommend, videoGoodsEsPage} from "@/api/videoTag"; import {getFilePreview, getSts} from "@/api/file"; @@ -474,9 +580,15 @@ import {getFileKey} from "@/utils/file"; import vuedraggable from "vuedraggable"; import vueQr from "vue-qr"; +import uploadImage from "../../components/editor/upload-image.vue"; export default { name: "VideoList", + computed: { + uploadImage() { + return uploadImage + } + }, components: {vuedraggable, Editor, GoodsExpandRow, "vue-qr": vueQr}, watch: { 'uploadVideoForm.videoContentType'(newValue, oldValue) { @@ -515,6 +627,50 @@ }, data() { return { + commentTotal:0, + commentForm:{ + commentContent:'', + videoId:'', + nikeName:'', + startTime:'', + endTime:'', + pageNumber:1, + pageSize:10 + }, + commentColumns:[ + // { + // type: 'selection', + // width: 60, + // align: 'center' + // }, + { + title: "鐢ㄦ埛鍚�", + key: "userNickname", + minWidth: 240, + tooltip: true, + },{ + title: "鍐呭", + key: "commentContent", + minWidth: 240, + tooltip: true, + },{ + title: "璇勮鏃堕棿", + key: "createTime", + minWidth: 240, + tooltip: true, + },{ + title: "鎿嶄綔", + key: "action", + slot: "action", + align: "center", + width: 200, + fixed: "right" + } + ], + commentData:[], + showVideoComment:false, + commentLoading:false, + // https://myk.9village.cn/scanpage/recommend?shareType=videoRecommend&videoId=1948284811844190209 baseQRCodeUrl: this.QRcodeBaseUrl + '/scanpage/recommend', QRCodeUrl: '', @@ -532,6 +688,8 @@ videoProgress: 0, upLoadVideoShow: false, uploadVideoForm: { + coverUrl:null, + showCoverUrl:null, id: '', title: '', cover: "", @@ -721,6 +879,70 @@ this.getTags('') }, methods: { + commentChangePage(page) { + this.commentForm.pageNumber = page + this.commentPage() + }, + + // 鏀瑰彉鎶ュ悕浜哄憳姣忛〉鏉℃暟 + commentChangePageSize(pageSize) { + this.commentForm.pageNumber = 1 + this.commentForm.pageSize = pageSize + this.commentPage() + }, + commentPage(){ + this.commentLoading = true; + getCommentPage(this.commentForm).then(res =>{ + this.commentLoading = false; + if (res.code === 200){ + this.commentData = res.data; + this.commentData.forEach(item =>{ + item.createTime = this.formatDate(item.createTime); + }) + + } + }) + }, + commentHandleSearch(){ + this.commentPage(); + }, + removeComment(row){ + removeById(row.id).then(res=>{ + if (res.code === 200){ + this.$Message.success(res.msg); + }else { + this.$Message.error(res.msg); + } + this.commentPage(); + }) + + }, + formatDate(date, format = 'yyyy-MM-dd HH:mm:ss') { + if (!date) return ''; + + const d = new Date(date); + if (isNaN(d.getTime())) return date; // 鏃犳晥鏃ユ湡鐩存帴杩斿洖鍘熷�� + + const padZero = (num) => (num < 10 ? `0${num}` : num.toString()); + + return format + .replace('yyyy', d.getFullYear()) + .replace('MM', padZero(d.getMonth() + 1)) + .replace('dd', padZero(d.getDate())) + .replace('HH', padZero(d.getHours())) + .replace('mm', padZero(d.getMinutes())) + .replace('ss', padZero(d.getSeconds())); + }, + commentShowSelect(){ + // this.selectList = selection.map(item => item.id) + // this.selectCount = selection.length + }, + openComment(row){ + console.log(row) + this.commentForm.videoId = row.id; + this.showVideoComment = true; + this.commentPage(); + }, async editVideo(row) { // this.uploadVideoForm = {}; // this.uploadVideoForm = row; @@ -768,19 +990,22 @@ } }); this.uploadVideoForm = row + console.log("鎵撳嵃鍊�",this.uploadVideoForm) this.uploadVideoForm.fileInfo= {}; this.uploadVideoForm.videoImgs = JSON.parse(this.uploadVideoForm.videoImgs) const sts = await getSts(); if (this.uploadVideoForm.videoContentType === 'video') { this.uploadVideoForm.showVideoUrl = sts.data.endpoint + '/' + this.uploadVideoForm.videoFileKey + if (this.uploadVideoForm.coverUrl !== '' && this.uploadVideoForm.coverUrl != null) { - this.uploadVideoForm.showCoverUrl = sts.data.endpoint + '/' + this.uploadVideoForm.coverUrl + this.uploadVideoForm.showCoverUrl = this.uploadVideoForm.coverUrl } } else if (this.uploadVideoForm.videoContentType === 'img') { this.uploadVideoForm.showListImages = this.uploadVideoForm.videoImgs.map(item => { return sts.data.endpoint + '/' + item }) } + console.log("澶勭悊杩囧悗",this.uploadVideoForm) this.searchGoodsList(); }, @@ -833,6 +1058,11 @@ this.upLoadVideoShow = false; }, submitVideoUpload() { + console.log(this.uploadVideoForm.coverUrl) + if (this.uploadVideoForm.coverUrl === null || this.uploadVideoForm.coverUrl === undefined) { + this.$Message.error('鏍囬涓嶈兘涓虹┖'); + return; + } this.uploadVideoForm.goodsList = this.uploadVideoForm.goodsList.filter(item => { return item.goodsNum > 0; }) @@ -891,13 +1121,62 @@ this.imgName = name; this.visible = true; }, + async upLoadImagCover(file) { + try { + // 鑾峰彇鏂囦欢涓婁紶涓存椂瀵嗛挜 + const sts = await getSts(); + const cos = new COS({ + getAuthorization: async function (options, callback) { + callback({ + TmpSecretId: sts.data.tmpSecretId, + TmpSecretKey: sts.data.tmpSecretKey, + SecurityToken: sts.data.sessionToken, + // 寤鸿杩斿洖鏈嶅姟鍣ㄦ椂闂翠綔涓虹鍚嶇殑寮�濮嬫椂闂达紝閬垮厤瀹㈡埛绔湰鍦版椂闂村亸宸繃澶у鑷寸鍚嶉敊璇� + StartTime: sts.data.stsStartTime, // 鏃堕棿鎴筹紝鍗曚綅绉掞紝濡傦細1580000000 + ExpiredTime: sts.data.stsEndTime,// 鏃堕棿鎴筹紝鍗曚綅绉掞紝濡傦細1580000000 + ScopeLimit: true, // 缁嗙矑搴︽帶鍒舵潈闄愰渶瑕佽涓� true锛屼細闄愬埗瀵嗛挜鍙湪鐩稿悓璇锋眰鏃堕噸澶嶄娇鐢� + }); + } + }) + const fileKey = getFileKey(file.name) + const upData = await cos.uploadFile({ + Bucket: sts.data.bucket, + Region: sts.data.region, + Key: fileKey, + Body: file, // 瑕佷笂浼犵殑鏂囦欢瀵硅薄銆俢over + SliceSize: 1024 * 1024 * 5, + onProgress: function (progressData) { + console.log('涓婁紶杩涘害锛�', progressData); + }, + }); + this.$set(this.uploadVideoForm, 'coverUrl', fileKey); + this.$set(this.uploadVideoForm, 'showCoverUrl', `${sts.data.endpoint}/${fileKey}`); + this.uploadVideoForm.cover = fileKey; + if (this.$refs.videoInfo) { + this.$refs.videoInfo.poster = this.uploadVideoForm.showCoverUrl; + this.$refs.videoInfo.load(); // 閲嶆柊鍔犺浇瑙嗛 + } + console.log(this.uploadVideoForm) + + } catch (e) { + console.log("涓婁紶澶辫触", upData) + } finally { + + } + return false; + }, + clearCoverImage(){ + this.$set(this.uploadVideoForm, 'coverUrl', ''); + this.$set(this.uploadVideoForm, 'showCoverUrl', ''); + this.$set(this.uploadVideoForm, 'temp', new Date().getTime()); + }, + async upLoadImg(file) { if (this.uploadVideoForm.videoImgs >= 5) { this.$Message.error("鍥剧墖涓婁紶涓嶈兘瓒呰繃5涓�"); return; } try { - // this.upLoadVideoLoading = true; // 鑾峰彇鏂囦欢涓婁紶涓存椂瀵嗛挜 const sts = await getSts(); const cos = new COS({ @@ -934,7 +1213,6 @@ console.log("涓婁紶澶辫触", upData) return false; } finally { - // this.upLoadVideoLoading = false; } return false; @@ -999,7 +1277,7 @@ this.uploadVideoForm.showVideoUrl = sts.data.endpoint + "/" + fileKey; }) console.log("涓婁紶鎴愬姛", upData) - const duration = this.$refs.healthVideoInfo.duration; + const duration = this.$refs.videoInfo.duration; console.log('-娴嬭瘯鑾峰彇鏃堕棿淇℃伅---------------->', duration); } catch (e) { console.log("涓婁紶澶辫触", upData) -- Gitblit v1.8.0