From c50a1d33e50b70ba4ca8c7565acce069e5050282 Mon Sep 17 00:00:00 2001 From: zhangyh Date: Tue, 18 Nov 2025 13:35:56 +0800 Subject: [PATCH] =?UTF-8?q?feat:=20=E5=BC=B9=E7=AA=97=E8=BD=AC=E8=A7=86?= =?UTF-8?q?=E9=A2=91=E5=8A=A8=E5=9B=BE=E6=9B=BF=E6=8D=A2=E4=B8=BA=E8=A7=86?= =?UTF-8?q?=E9=A2=91?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../home/design/editDesignType/index.vue | 137 +++++++++++++----- .../home/tools/poseTransfer/index.vue | 1 - 2 files changed, 99 insertions(+), 39 deletions(-) diff --git a/src/component/home/design/editDesignType/index.vue b/src/component/home/design/editDesignType/index.vue index e07d1648..6ce86f3d 100644 --- a/src/component/home/design/editDesignType/index.vue +++ b/src/component/home/design/editDesignType/index.vue @@ -31,12 +31,6 @@ {{$t('ProductImg.MagicTools')}} {{$t('ProductImg.relightingTool')}} -
{{$t('ProductImg.Similarity')}}
@@ -95,25 +89,29 @@ -
{{$t('poseTransfer.Selectpose')}}
-
- +
+
@@ -128,12 +126,6 @@
- -
@@ -154,25 +146,8 @@ > - -
@@ -687,6 +662,50 @@ setup(props:any,{emit}) { const gifPause = (e:any,item:any)=>{ e.target.src = item.firstFrame || item.firstFrameUrl//静态图片 } + // 存储视频元素的引用 + const videoRefs = ref>({}) + // 存储视频播放状态 + const videoPlayingStates = ref>({}) + + // 设置视频 ref + const setVideoRef = (id: number, el: HTMLVideoElement | null) => { + if (el) { + videoRefs.value[id] = el + // 初始化播放状态 + videoPlayingStates.value[id] = !el.paused + // 监听播放事件 + el.addEventListener('play', () => { + videoPlayingStates.value[id] = true + }) + // 监听暂停事件 + el.addEventListener('pause', () => { + videoPlayingStates.value[id] = false + }) + // 监听结束事件 + el.addEventListener('ended', () => { + videoPlayingStates.value[id] = false + }) + } + } + + // 检查视频是否正在播放 + const isVideoPlaying = (id: number) => { + return videoPlayingStates.value[id] || false + } + + // 播放视频 + const handlePlayMotion = (item: any) => { + const video = videoRefs.value[item.id] + 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 @@ -772,6 +791,9 @@ setup(props:any,{emit}) { gifPlay, gifPause, setSelectPose, + setVideoRef, + handlePlayMotion, + isVideoPlaying, generateProceedList, init, cancelDsign, @@ -1021,6 +1043,7 @@ overflow: visible !important; flex-direction: column; align-items: center; justify-content: center; + z-index: 3; > div{ width: 2rem; height: 2rem; @@ -1051,6 +1074,44 @@ overflow: visible !important; width: 100%; object-fit: contain; } + > video{ + width: 100%; + height: 100%; + object-fit: cover; + position: absolute; + top: 0; + left: 0; + z-index: 1; + } + .control-container { + width: 100%; + height: 3.3rem; + position: absolute; + bottom: 0; + left: 0; + background: linear-gradient( + 180deg, + rgba(8, 9, 13, 0) 0%, + rgba(8, 9, 13, 0.27) 80.37% + ); + display: flex; + // align-items: flex-end; + // justify-content: center; + z-index: 2; + .icon-list { + // height: 50%; + // width: calc(100% - 1.6rem); + padding-left: 1rem; + display: flex; + box-sizing: border-box; + justify-content: flex-start; + align-items: center; + .play-icon { + width: 2rem; + height: 2rem; + } + } + } } > .upload_item{ border: none; diff --git a/src/component/home/tools/poseTransfer/index.vue b/src/component/home/tools/poseTransfer/index.vue index 025f11a4..661cf049 100644 --- a/src/component/home/tools/poseTransfer/index.vue +++ b/src/component/home/tools/poseTransfer/index.vue @@ -451,7 +451,6 @@ export default defineComponent({ if (props.isDesignPage) { //标识design页面打开的tools data.fileList = designList - console.log('11111111111111', data.fileList) } else { data.currentList = store.state.UploadFilesModule.modularData.toProduct data.currentList = data.currentList ? data.currentList : []