From 934654b44fb2670a7ce08aafa3d1d85fe783ae26 Mon Sep 17 00:00:00 2001
From: zxl <763096477@qq.com>
Date: 星期三, 13 八月 2025 16:35:32 +0800
Subject: [PATCH] 封面必传问题
---
manager/src/views/video/VideoList.vue | 254 +++++++++++++++++++++++++++++++++++++++++++-------
1 files changed, 219 insertions(+), 35 deletions(-)
diff --git a/manager/src/views/video/VideoList.vue b/manager/src/views/video/VideoList.vue
index 393b491..79c7676 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"
@@ -212,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>
@@ -402,6 +419,9 @@
<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>
@@ -420,7 +440,7 @@
:mask-closable="false"
>
<vue-qr
- text="https://myk.9village.cn/scanpage/recommend?shareType=videoRecommend&videoId=1948284811844190209"
+ :text="QRCodeUrl"
:margin="0"
colorDark="#000"
colorLight="#fff"
@@ -428,7 +448,7 @@
></vue-qr>
<div slot="footer">
<Button type="text" @click="closeGeneralQrCode">鍏抽棴</Button>
- <Button type="primary" @click="generalQrCode">纭</Button>
+ <!-- <Button type="primary" @click="generalQrCode">纭</Button>-->
</div>
</Modal>
<Row type="flex" justify="end" class="mt_10">
@@ -450,7 +470,17 @@
</template>
<script>
-import {getVideos, recommendSet, getVideoById, auditingVideo, up, down, recreateIndex,publish} from "@/api/video";
+import {
+ getVideos,
+ recommendSet,
+ getVideoById,
+ auditingVideo,
+ up,
+ down,
+ recreateIndex,
+ publish,
+ updatePublish
+} from "@/api/video";
import {getVideoTagList, recommend, videoGoodsEsPage} from "@/api/videoTag";
import {getFilePreview, getSts} from "@/api/file";
import Editor from '@/components/editor/index.vue'
@@ -459,10 +489,16 @@
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,"vue-qr": vueQr},
+ computed: {
+ uploadImage() {
+ return uploadImage
+ }
+ },
+ components: {vuedraggable, Editor, GoodsExpandRow, "vue-qr": vueQr},
watch: {
'uploadVideoForm.videoContentType'(newValue, oldValue) {
if (newValue === 'video') {
@@ -478,6 +514,7 @@
}
},
chooseTag(newValue, oldValue) {
+ console.log('瑙﹀彂鏂板�煎彉鍖�',newValue);
this.uploadVideoForm.tags = newValue.map(item => {
const findTag = this.videoTagList.find(tagItem => {
return tagItem.tagName === item
@@ -499,7 +536,10 @@
},
data() {
return {
- showGeneralQrCode:false,
+ // https://myk.9village.cn/scanpage/recommend?shareType=videoRecommend&videoId=1948284811844190209
+ baseQRCodeUrl: this.QRcodeBaseUrl + '/scanpage/recommend',
+ QRCodeUrl: '',
+ showGeneralQrCode: false,
endpoint: '',
searchGoods: '',
videoTagList: [],
@@ -513,6 +553,8 @@
videoProgress: 0,
upLoadVideoShow: false,
uploadVideoForm: {
+ coverUrl:null,
+ showCoverUrl:null,
id: '',
title: '',
cover: "",
@@ -686,6 +728,7 @@
slot: "action",
align: "center",
width: 200,
+ fixed: "right"
},
],
goodsData: [],
@@ -701,13 +744,85 @@
this.getTags('')
},
methods: {
- generalQrCode(row){
+ 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);
+ 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 => {
@@ -744,38 +859,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;
})
if (!this.uploadVideoForm.title) {
this.$Message.error('鏍囬涓嶈兘涓虹┖');
return;
}
//琛ㄥ崟鏍￠獙
- if (this.uploadVideoForm.videoContentType==='video') {
- if (!this.uploadVideoForm.videoFileKey){
+ if (this.uploadVideoForm.videoContentType === 'video') {
+ if (!this.uploadVideoForm.videoFileKey) {
this.$Message.error('瑙嗛涓嶈兘涓虹┖');
return;
}
}
- if (this.uploadVideoForm.videoContentType==='img') {
- if (this.uploadVideoForm.videoImgs<1){
+ if (this.uploadVideoForm.videoContentType === 'img') {
+ if (this.uploadVideoForm.videoImgs < 1) {
this.$Message.error('鍥剧墖涓嶈兘涓虹┖');
return;
}
}
- publish(this.uploadVideoForm).then(response => {
- if (response.code == 200) {
- this.$Message.success("瑙嗛鍙戝竷鎴愬姛");
- this.upLoadVideoShow = false;
- this.getDataList();
- }
- }).then(error=>{
- this.$Message.success(error);
- })
+ 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;
@@ -786,13 +922,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({
@@ -829,7 +1014,6 @@
console.log("涓婁紶澶辫触", upData)
return false;
} finally {
- // this.upLoadVideoLoading = false;
}
return false;
@@ -894,7 +1078,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)
@@ -1100,7 +1284,7 @@
// 鑾峰彇鍒楄〃鏁版嵁
getGoodsDataList() {
let search = this.searchGoodsForm;
- console.log('-------------------------->',this.searchGoodsForm)
+ console.log('-------------------------->', this.searchGoodsForm)
if (search.pageNumber > 0) {
search.pageNumber = search.pageNumber - 1;
}
@@ -1157,7 +1341,7 @@
},
// 鍒嗛〉 鏀瑰彉椤电爜
goodsChangePage(v) {
- console.log('-------------------------->鍒嗛〉',v);
+ console.log('-------------------------->鍒嗛〉', v);
this.searchGoodsForm.pageNumber = v;
this.getGoodsDataList();
},
--
Gitblit v1.8.0