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 | 485 ++++++++++++++++++++++++++++++++++++++++++++++++++--- 1 files changed, 456 insertions(+), 29 deletions(-) diff --git a/manager/src/views/video/VideoList.vue b/manager/src/views/video/VideoList.vue index d493f41..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> @@ -134,9 +149,9 @@ <Icon type="ios-trash-outline" @click.native="handleRemove(item)"></Icon> </div> </template> - <!-- <template v-else>--> - <!-- <Progress v-if="item.showProgress" :percent="item.percentage" hide-info></Progress>--> - <!-- </template>--> + <!-- <template v-else>--> + <!-- <Progress v-if="item.showProgress" :percent="item.percentage" hide-info></Progress>--> + <!-- </template>--> </div> <Upload ref="upload" @@ -202,8 +217,6 @@ :page-size-opts="[10, 20, 50]" size="small" show-total - show-elevator - show-sizer ></Page> </FormItem> </Col> @@ -214,14 +227,16 @@ align-items: center;justify-content: flex-start;border: 1px solid gray;margin-top: 10px; padding: 10px;border-radius: 20px"> <div> - <img :src="endpoint+'/'+item.thumbnail" style="width: 80px;height: 80px"> + <img :src="item.thumbnail.includes('http') ? item.thumbnail : endpoint + '/' + item.thumbnail" + style="width: 80px;height: 80px"> </div> <div style="display: flex;flex-direction: column;margin-left: 20px"> <div style="font-size: 1.5em;font-weight: bold">{{ item.goodsName }}</div> <div style="color: #ff6f6f;display: flex;align-content: center;justify-content: flex-start"> <div> 锟{ item.price }}</div> <div style="margin-left: 10px"> - <InputNumber v-model="item.goodsNum" :min="0" :max="99" controls-outside @on-change="changeGoodsNum(item.goodsSkuId,index,item.goodsNum)" + <InputNumber v-model="item.goodsNum" :min="0" :max="99" controls-outside + @on-change="changeGoodsNum(item.goodsSkuId,index,item.goodsNum)" style="vertical-align: center;width: 100px"></InputNumber> </div> </div> @@ -404,15 +419,127 @@ <Button type="primary" size="small" style="margin-right: 5px" v-if="row.status === '99'" @click="openAuditing(row)">瀹℃牳 </Button> + <Button type="primary" size="small" style="margin-right: 5px" + @click="editVideo(row)">缂栬緫 + </Button> <Button type="error" size="small" style="margin-right: 5px" v-if="row.status === '1'" @click="openVideoDown(row)">涓嬫灦 + </Button> + <Button type="error" size="small" style="margin-right: 5px" v-if="row.status === '1'" + @click="generalQrCode(row)">鐢熸垚浜岀淮鐮� </Button> <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="浜岀淮鐮�" + width="800" + :mask-closable="false" + > + <vue-qr + :text="QRCodeUrl" + :margin="0" + colorDark="#000" + colorLight="#fff" + :size="150" + ></vue-qr> + <div slot="footer"> + <Button type="text" @click="closeGeneralQrCode">鍏抽棴</Button> + <!-- <Button type="primary" @click="generalQrCode">纭</Button>--> + </div> + </Modal> <Row type="flex" justify="end" class="mt_10"> <Page :current="searchForm.pageNumber" @@ -432,7 +559,19 @@ </template> <script> -import {getVideos, recommendSet, getVideoById, auditingVideo, up, down, recreateIndex,publish} from "@/api/video"; +import { + getVideos, + recommendSet, + getVideoById, + auditingVideo, + up, + down, + recreateIndex, + publish, + updatePublish, + getCommentPage, + removeById +} from "@/api/video"; import {getVideoTagList, recommend, videoGoodsEsPage} from "@/api/videoTag"; import {getFilePreview, getSts} from "@/api/file"; import Editor from '@/components/editor/index.vue' @@ -440,10 +579,17 @@ import COS from "cos-js-sdk-v5"; 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", - components: {vuedraggable, Editor, GoodsExpandRow}, + computed: { + uploadImage() { + return uploadImage + } + }, + components: {vuedraggable, Editor, GoodsExpandRow, "vue-qr": vueQr}, watch: { 'uploadVideoForm.videoContentType'(newValue, oldValue) { if (newValue === 'video') { @@ -459,6 +605,7 @@ } }, chooseTag(newValue, oldValue) { + console.log('瑙﹀彂鏂板�煎彉鍖�',newValue); this.uploadVideoForm.tags = newValue.map(item => { const findTag = this.videoTagList.find(tagItem => { return tagItem.tagName === item @@ -480,10 +627,58 @@ }, 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: '', + showGeneralQrCode: false, endpoint: '', searchGoods: '', videoTagList: [], - chooseTag: '', + chooseTag: [], videoTag: '', visible: false, imgName: '', @@ -493,6 +688,8 @@ videoProgress: 0, upLoadVideoShow: false, uploadVideoForm: { + coverUrl:null, + showCoverUrl:null, id: '', title: '', cover: "", @@ -666,6 +863,7 @@ slot: "action", align: "center", width: 200, + fixed: "right" }, ], goodsData: [], @@ -681,9 +879,149 @@ 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; + // this.showUploadVideoShow = true; + this.videoTagList = [] + await recommend({ + searchType: "HOT" + }).then(res => { + this.videoTagList = res.data; + }) + this.upLoadVideoShow = true; + this.chooseTag = row.tagList.map(item => { + return item.tagName + }) + console.log('閫変腑鍒楄〃---銆�',row.goodsList) + row.goodsList.forEach(item => { + item.goodsSkuId = item.id + }) + this.uploadVideoForm = { + id: '', + title: '', + cover: "", + videoFileKey: "", + videoDuration: 0, + videoFit: "cover", + videoContentType: 'video', + videoImgs: [], + showListImages: [], + tags: [], + fileInfo: {}, + goodsList: [] + } + + + // 閬嶅巻宸查�夋嫨鐨勬爣绛� + row.tagList.forEach(tag => { + // 妫�鏌ユ爣绛炬槸鍚﹀凡瀛樺湪浜巚ideoTagList涓� + const exists = this.videoTagList.some(item => item.tagName === tag.tagName); + // 濡傛灉涓嶅瓨鍦紝鍒欐坊鍔犲埌閫夐」鍒楄〃 + if (!exists) { + this.videoTagList.push({ + id: tag.id, // 鐢熸垚涓存椂ID + tagName: tag.tagName + }); + } + }); + 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 = 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(); + }, + closeGeneralQrCode() { + this.showGeneralQrCode = false; + this.QRCodeUrl = ''; + }, + generalQrCode(row) { + this.showGeneralQrCode = true + console.log('-------------------->', row); + this.QRCodeUrl = this.baseQRCodeUrl + '?shareType=videoRecommend' + '&videoId=' + row.id; + console.log(this.QRCodeUrl) + }, //todo 淇濈暀鍚庣画鍙兘浼氫娇鐢� - changeGoodsNum(id,index,goodsNum){ - console.log('-------------------->',id,index,goodsNum) + changeGoodsNum(id, index, goodsNum) { + console.log('-------------------->', id, index, goodsNum) }, chooseGoods(id) { const goods = this.goodsData.find(item => { @@ -720,21 +1058,59 @@ this.upLoadVideoShow = false; }, submitVideoUpload() { - this.uploadVideoForm.goodsList = this.uploadVideoForm.goodsList.filter(item => { - return item.goodsNum >0; + 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; }) - publish(this.uploadVideoForm).then(response => { - if (response.code == 200) { - this.$Message.success("瑙嗛鍙戝竷鎴愬姛"); - this.upLoadVideoShow = false; - this.getDataList(); + if (!this.uploadVideoForm.title) { + this.$Message.error('鏍囬涓嶈兘涓虹┖'); + return; + } + //琛ㄥ崟鏍¢獙 + if (this.uploadVideoForm.videoContentType === 'video') { + if (!this.uploadVideoForm.videoFileKey) { + this.$Message.error('瑙嗛涓嶈兘涓虹┖'); + return; } - }).then(error=>{ - this.$Message.success(error); - }) + } + if (this.uploadVideoForm.videoContentType === 'img') { + if (this.uploadVideoForm.videoImgs < 1) { + this.$Message.error('鍥剧墖涓嶈兘涓虹┖'); + return; + } + } + console.log('鎻愪氦琛ㄥ崟--------------->', this.uploadVideoForm) + if (this.uploadVideoForm.id) { + updatePublish(this.uploadVideoForm).then(response => { + if (response.code == 200) { + this.$Message.success("瑙嗛淇敼鎴愬姛"); + this.upLoadVideoShow = false; + this.getDataList(); + } + }).then(error => { + this.$Message.success(error); + }) + + } else { + publish(this.uploadVideoForm).then(response => { + if (response.code == 200) { + this.$Message.success("瑙嗛鍙戝竷鎴愬姛"); + this.upLoadVideoShow = false; + this.getDataList(); + } + }).then(error => { + this.$Message.success(error); + }) + } + }, //todo 鍚庣画鍙兘浼氫娇鐢ㄩ鐣� createVideoTag(e) { + console.log('------------>',e) }, handleRemove(file) { const fileList2 = this.uploadVideoForm.showListImages; @@ -745,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({ @@ -788,7 +1213,6 @@ console.log("涓婁紶澶辫触", upData) return false; } finally { - // this.upLoadVideoLoading = false; } return false; @@ -853,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) @@ -867,6 +1291,7 @@ openUploadVideo() { this.upLoadVideoShow = true; this.videoTagList = [] + this.chooseTag = [] this.uploadVideoForm = { id: '', title: '', @@ -1058,6 +1483,7 @@ // 鑾峰彇鍒楄〃鏁版嵁 getGoodsDataList() { let search = this.searchGoodsForm; + console.log('-------------------------->', this.searchGoodsForm) if (search.pageNumber > 0) { search.pageNumber = search.pageNumber - 1; } @@ -1114,13 +1540,14 @@ }, // 鍒嗛〉 鏀瑰彉椤电爜 goodsChangePage(v) { - this.searchForm.pageNumber = v; + console.log('-------------------------->鍒嗛〉', v); + this.searchGoodsForm.pageNumber = v; this.getGoodsDataList(); }, // 鍒嗛〉 鏀瑰彉椤垫暟 goodsChangePageSize(v) { - this.searchForm.pageNumber = 1; - this.searchForm.pageSize = v; + this.searchGoodsForm.pageNumber = 1; + this.searchGoodsForm.pageSize = v; this.getGoodsDataList(); }, } -- Gitblit v1.8.0