feat: 重新生成图片

This commit is contained in:
zhangyh
2025-11-19 15:41:41 +08:00
parent 72e589b748
commit 8682fc1eba

View File

@@ -349,6 +349,29 @@
</div>
</div>
</div>
<div
v-for="(item, index) in newVideoList"
:key="item.taskId || index"
class="result-video-container new-video-container"
>
<video
:ref="el => setNewVideoRef(el, index)"
:src="item.videoUrl"
controlslist="nodownload nofullscreen noremoteplayback"
:controls="false"
/>
<div class="control-container" @click.stop>
<div class="icon-list">
<SvgIcon
class="play-icon"
@click.stop="handlePlayNewVideo(index)"
:name="isNewVideoPlaying(index) ? 'CPause' : 'CPlay'"
size="20"
color="#ffffff"
/>
</div>
</div>
</div>
</div>
</div>
</div>
@@ -434,7 +457,7 @@ export default defineComponent({
const firstFrameImage = ref<any | null>(null)
const lastFrameImage = ref<any | null>(null)
const newVideoList = ref([])
const promptInputRef = useTemplateRef<HTMLTextAreaElement>('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<Record<number, HTMLVideoElement | null>>({})
const newVideoPlayingStates = ref<Record<number, boolean>>({})
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;
}
}
}
</style>