diff --git a/src/component/home/design/editDesignType/index.vue b/src/component/home/design/editDesignType/index.vue index d2aea53f..ae3b8246 100644 --- a/src/component/home/design/editDesignType/index.vue +++ b/src/component/home/design/editDesignType/index.vue @@ -349,6 +349,29 @@ +
+
@@ -434,7 +457,7 @@ export default defineComponent({ const firstFrameImage = ref(null) const lastFrameImage = ref(null) - + const newVideoList = ref([]) const promptInputRef = useTemplateRef('promptInputRef') const prompt = computed(() => { if (videoType.value === 2) { @@ -608,11 +631,12 @@ export default defineComponent({ return obj } const getPoseTransformData = () => { + const currentImage = productimg.scaleImageList[productimg.scaleImageIndex] const params: any = { poseId: productimg.selectPose, projectId: productimg.selectObject.id, productImage: getMinioUrl( - productimg.scaleImageList[productimg.scaleImageIndex].sourceUrl + currentImage.sourceUrl || currentImage.productImage ), modelName: speed.speedData.value, mode: videoType.value, @@ -713,9 +737,11 @@ export default defineComponent({ data = getPoseTransformData() } productimg.productimgIsProductimg = true - if (productimg.openType != 'add' || productimg.generateCourse) { + if ( + (productimg.openType != 'add' || productimg.generateCourse) && + !isPoseTransfer.value + ) { await new Promise(async (res, reject) => { - console.log(productimg.generateCourse, productimg.selectGenerate) await props.onlike( productimg.generateCourse, productimg.selectGenerate.listType @@ -724,10 +750,7 @@ export default defineComponent({ res('') }, 1000) }) - // await props.onlike(null,null,productimg.selectGenerate.listType,'onLike') } - // setPrductimg([{taskId:"f785fbbf-425c-4d9b-b4d0-0f38f480c64e-83"}]) - // return Https.axiosPost(url, data) .then(rv => { productimg.productimgRemProductimg = true @@ -749,7 +772,6 @@ export default defineComponent({ rv.forEach((item: any) => { arr.push(item.taskId) }) - console.log(productimg.selectGenerate) productimg.generateCourse = { ...rv[0], prompt: productimg.productimgSearchName, @@ -822,13 +844,17 @@ export default defineComponent({ //防止取消后有正在执行的获取状态 let isEnd = false if (rv[0].status == 'Success') { - productimg.generateCourse.url = rv[0].url - productimg.generateCourse.status = rv[0].status - productimg.generateCourse.designOutfitUrl = rv[0].url - if (rv[0]?.videoUrl) { - productimg.generateCourse.firstFrameUrl = rv[0].firstFrameUrl - productimg.generateCourse.videoUrl = rv[0].videoUrl - productimg.generateCourse.gifUrl = rv[0].gifUrl + if (productimg.openType === 'edit' && isPoseTransfer.value) { + newVideoList.value.push(rv[0]) + } else { + productimg.generateCourse.url = rv[0].url + productimg.generateCourse.status = rv[0].status + productimg.generateCourse.designOutfitUrl = rv[0].url + if (rv[0]?.videoUrl) { + productimg.generateCourse.firstFrameUrl = rv[0].firstFrameUrl + productimg.generateCourse.videoUrl = rv[0].videoUrl + productimg.generateCourse.gifUrl = rv[0].gifUrl + } } isEnd = true clearInterval(remPrductimgTime) @@ -937,7 +963,7 @@ export default defineComponent({ status: any, listType: string ) => { - console.log(list[index]) + console.log(list[index], dialogueIndex, status, listType) productimg.scaleImageList = list productimg.scaleImageIndex = index scaleImage.value = true @@ -1102,6 +1128,43 @@ export default defineComponent({ } } } + // 新生成视频列表的引用和播放状态 + const newVideoRefs = ref>({}) + const newVideoPlayingStates = ref>({}) + + const setNewVideoRef = (el: HTMLVideoElement | null, index: number) => { + if (el) { + newVideoRefs.value[index] = el + newVideoPlayingStates.value[index] = !el.paused + el.addEventListener('play', () => { + newVideoPlayingStates.value[index] = true + }) + el.addEventListener('pause', () => { + newVideoPlayingStates.value[index] = false + }) + el.addEventListener('ended', () => { + newVideoPlayingStates.value[index] = false + }) + } + } + + const isNewVideoPlaying = (index: number) => { + return newVideoPlayingStates.value[index] || false + } + + const handlePlayNewVideo = (index: number) => { + console.log('视频播放') + const video = newVideoRefs.value[index] + if (video) { + if (video.paused) { + video.play().catch(err => { + console.error('播放视频失败:', err) + }) + } else { + video.pause() + } + } + } const setSelectPose = (item: any, index: number) => { productimg.poseList.forEach((poseItem: any) => { poseItem.isChecked = false @@ -1262,7 +1325,11 @@ export default defineComponent({ showProductList, fullProductImages, isPoseTransfer, - showCompare + showCompare, + newVideoList, + setNewVideoRef, + handlePlayNewVideo, + isNewVideoPlaying } }, data() { @@ -1578,6 +1645,7 @@ export default defineComponent({ .play-icon { width: 2rem; height: 2rem; + cursor: pointer; } } } @@ -1758,6 +1826,10 @@ export default defineComponent({ display: flex; align-items: center; justify-content: center; + &.new-video-container{ + margin-left: 2rem; + column-gap: 2rem; + } video { width: auto; height: 100%; @@ -1787,6 +1859,7 @@ export default defineComponent({ .play-icon { width: 2rem; height: 2rem; + cursor: pointer; } } } @@ -1922,4 +1995,12 @@ export default defineComponent({ } } } +.posetransfer{ + .loadBox { + .imgBox { + overflow-x: auto; + display: flex; + } + } +}