132 lines
3.3 KiB
Vue
132 lines
3.3 KiB
Vue
<template>
|
|
<!-- AI 图片换脸/AI 脱衣 -->
|
|
<div class="ai_to_image" v-if="state.aiInfo.type == 1 || state.aiInfo.type == 3">
|
|
<LazyImg :src="item.originalImage" class="cover_1" @click="handlePreview(item.originalImage)" />
|
|
<LazyImg :src="item.generateImage" class="cover_1" @click="handlePreview(item.generateImage)" />
|
|
</div>
|
|
<!-- AI 视频换脸 -->
|
|
<div class="ai_to_video" v-if="state.aiInfo.type == 2">
|
|
<LazyImg :src="item.originalVideoCover" class="cover_2" :borderRadius="8" @click="handleVideo">
|
|
<SvgIcon name="playIcon" class="play_icon" />
|
|
</LazyImg>
|
|
</div>
|
|
<!-- 图生视频 -->
|
|
<div class="image_to_video" v-if="state.aiInfo.type == 4">
|
|
<LazyImg :src="item.originalImage" class="cover_4" :borderRadius="8" @click="handlePreview(item.originalImage)" />
|
|
<LazyImg :src="item.generateImage" class="cover_4" :borderRadius="8" @click="handlePreview(item.generateImage)" />
|
|
</div>
|
|
<!-- AI 绘画 -->
|
|
<div class="text_to_image" v-if="state.aiInfo.type == 5">
|
|
<div class="content">{{ item.originContent }}</div>
|
|
<LazyImg :src="item.generateImage" class="cover_5" :borderRadius="8" @click="handlePreview(item.generateImage)" />
|
|
</div>
|
|
<Teleport to="body">
|
|
<van-overlay :show="state.showPlayVideo" z-index="3000">
|
|
<div class="videoBox">
|
|
<SvgIcon name="back_white" class="close" @click="state.showPlayVideo = false" color="#fff" />
|
|
<SmallVideo
|
|
v-if="state.showPlayVideo"
|
|
:sourceURL="state.aiInfo.generateVideo"
|
|
:h265Url="state.aiInfo.h265Url"
|
|
/>
|
|
</div>
|
|
</van-overlay>
|
|
</Teleport>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { reactive } from 'vue';
|
|
import { useRouter } from 'vue-router';
|
|
|
|
const router = useRouter();
|
|
// {"1":"Ai图片换脸","2":"Ai视频换脸","3":"Ai脱衣","4":"Ai图生视频","5":"Ai绘画"}
|
|
const props = withDefaults(
|
|
defineProps<{
|
|
item: Types.Media.AiMediaBoxItem;
|
|
/**
|
|
* 是否可以预览图片和视频
|
|
*/
|
|
canPreview?: boolean;
|
|
}>(),
|
|
{
|
|
canPreview: true,
|
|
},
|
|
);
|
|
const state = reactive({
|
|
aiInfo: props.item,
|
|
showPlayVideo: false,
|
|
});
|
|
|
|
const handlePreview = (url: string) => {
|
|
if (!props.canPreview) return;
|
|
router.push({ path: '/picturePreview', query: { imgs: [url], index: 0 } });
|
|
};
|
|
const handleVideo = () => {
|
|
if (!props.canPreview) return;
|
|
state.showPlayVideo = true;
|
|
};
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.ai_to_image {
|
|
display: flex;
|
|
align-items: center;
|
|
border-radius: 8px;
|
|
overflow: hidden;
|
|
.cover_1 {
|
|
width: 172px;
|
|
height: 233px;
|
|
}
|
|
}
|
|
.ai_to_video {
|
|
.cover_2 {
|
|
width: 100%;
|
|
height: 193px;
|
|
.play_icon {
|
|
position: absolute;
|
|
left: 50%;
|
|
top: 50%;
|
|
transform: translate(-50%, -50%);
|
|
width: 36px;
|
|
height: 36px;
|
|
}
|
|
}
|
|
}
|
|
.text_to_image {
|
|
.content {
|
|
font-size: 14px;
|
|
color: #03fceb;
|
|
line-height: 20px;
|
|
margin-bottom: 14px;
|
|
}
|
|
.cover_5 {
|
|
width: 167px;
|
|
height: 223px;
|
|
}
|
|
}
|
|
.image_to_video {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
.cover_4 {
|
|
width: 167px;
|
|
height: 223px;
|
|
}
|
|
}
|
|
|
|
.videoBox {
|
|
height: 100%;
|
|
width: 100%;
|
|
background: rgb(0, 0, 0);
|
|
position: relative;
|
|
.close {
|
|
height: 30px;
|
|
width: 30px;
|
|
position: absolute;
|
|
top: 16px;
|
|
left: 16px;
|
|
z-index: 200;
|
|
}
|
|
}
|
|
</style>
|