feat: 弹窗&prompt i18n
This commit is contained in:
zhangyh
@@ -23,7 +23,11 @@
|
||||
<div class="selectImg">
|
||||
<div class="head">
|
||||
<div class="text">{{ $t('poseTransfer.SelectDesign') }}</div>
|
||||
<i class="fi fi-rs-interrogation tips-icon" />
|
||||
<i
|
||||
v-show="videoType !== 2"
|
||||
class="fi fi-rs-interrogation tips-icon"
|
||||
@click="showTips = true"
|
||||
/>
|
||||
</div>
|
||||
<div class="imgBox" v-mousewheel>
|
||||
<div
|
||||
@@ -59,7 +63,60 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="upload_item item"
|
||||
v-show="!isDesignPage && !(videoType === 3 && fileList.length > 0)"
|
||||
>
|
||||
<div class="upload_file_item">
|
||||
<a-upload
|
||||
key="common"
|
||||
:action="getUploadUrl() + '/api/history/toProductImageElementUpload'"
|
||||
list-type="picture-card"
|
||||
:capture="null"
|
||||
:data="{
|
||||
...upload
|
||||
}"
|
||||
:headers="{ Authorization: token }"
|
||||
:before-upload="beforeUpload"
|
||||
:multiple="!!upload.projectId"
|
||||
accept=".jpg,.png,.jpeg,.bmp"
|
||||
@change="file => fileUploadChange(file)"
|
||||
>
|
||||
<div class="upload_tip_block">
|
||||
<i class="fi fi-br-upload"></i>
|
||||
<!-- <img class="upload_img_icon" src="@/assets/images/homePage/add_file.png"> -->
|
||||
</div>
|
||||
</a-upload>
|
||||
</div>
|
||||
</div>
|
||||
<template v-if="videoType === 3">
|
||||
<div
|
||||
class="upload_item item last_frames"
|
||||
v-show="!isDesignPage && lastFrameList?.length < 1"
|
||||
>
|
||||
<div class="upload_file_item">
|
||||
<a-upload
|
||||
key="lastframes"
|
||||
:action="
|
||||
getUploadUrl() + '/api/history/toProductImageElementUpload'
|
||||
"
|
||||
list-type="picture-card"
|
||||
:capture="null"
|
||||
:data="{
|
||||
...upload
|
||||
}"
|
||||
:headers="{ Authorization: token }"
|
||||
:before-upload="beforeUpload"
|
||||
accept=".jpg,.png,.jpeg,.bmp"
|
||||
@change="file => fileUploadChangeLast(file)"
|
||||
>
|
||||
<div class="upload_tip_block">
|
||||
<i class="fi fi-br-upload"></i>
|
||||
<!-- <img class="upload_img_icon" src="@/assets/images/homePage/add_file.png"> -->
|
||||
</div>
|
||||
</a-upload>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="item lastframe-list"
|
||||
:class="{ active: item.id == selectImg.id }"
|
||||
@@ -94,60 +151,6 @@
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<template v-if="fileList.length < 1">
|
||||
<div class="upload_item item" v-show="!isDesignPage">
|
||||
<div class="upload_file_item">
|
||||
<a-upload
|
||||
key="common"
|
||||
:action="
|
||||
getUploadUrl() + '/api/history/toProductImageElementUpload'
|
||||
"
|
||||
list-type="picture-card"
|
||||
:capture="null"
|
||||
:data="{
|
||||
...upload
|
||||
}"
|
||||
:headers="{ Authorization: token }"
|
||||
:before-upload="beforeUpload"
|
||||
:multiple="!!upload.projectId"
|
||||
accept=".jpg,.png,.jpeg,.bmp"
|
||||
@change="file => fileUploadChange(file)"
|
||||
>
|
||||
<div class="upload_tip_block">
|
||||
<i class="fi fi-br-upload"></i>
|
||||
<!-- <img class="upload_img_icon" src="@/assets/images/homePage/add_file.png"> -->
|
||||
</div>
|
||||
</a-upload>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<template v-if="videoType === 3 && lastFrameList?.length < 1">
|
||||
<div class="upload_item item last_frames" v-show="!isDesignPage">
|
||||
<div class="upload_file_item">
|
||||
<a-upload
|
||||
key="lastframes"
|
||||
:action="
|
||||
getUploadUrl() + '/api/history/toProductImageElementUpload'
|
||||
"
|
||||
list-type="picture-card"
|
||||
:file-list="lastFrameList"
|
||||
:capture="null"
|
||||
:data="{
|
||||
...upload
|
||||
}"
|
||||
:headers="{ Authorization: token }"
|
||||
:before-upload="beforeUpload"
|
||||
accept=".jpg,.png,.jpeg,.bmp"
|
||||
@change="file => fileUploadChangeLast(file)"
|
||||
>
|
||||
<div class="upload_tip_block">
|
||||
<i class="fi fi-br-upload"></i>
|
||||
<!-- <img class="upload_img_icon" src="@/assets/images/homePage/add_file.png"> -->
|
||||
</div>
|
||||
</a-upload>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
</div>
|
||||
<div class="prompt-input-container" v-show="!showMotion">
|
||||
@@ -159,13 +162,13 @@
|
||||
<div class="text">{{ $t('poseTransfer.Selectpose') }}</div>
|
||||
</div>
|
||||
<div class="imgBox" v-mousewheel>
|
||||
<div class="item" v-for="item in poseList" @click="selectPose(item)">
|
||||
<img
|
||||
:src="item.firstFrame"
|
||||
alt=""
|
||||
@mouseenter.stop="gifPlay($event, item)"
|
||||
@mouseleave.stop="gifPause($event, item)"
|
||||
/>
|
||||
<div
|
||||
class="item"
|
||||
v-for="item in poseList"
|
||||
:key="item.id"
|
||||
@click="selectPose(item)"
|
||||
>
|
||||
<video :ref="el => setVideoRef(item.id, el)" :src="item.video" />
|
||||
<div class="btnBox">
|
||||
<div :class="{ active: item.isChecked }">
|
||||
<i class="fi fi-br-check"></i>
|
||||
@@ -174,12 +177,21 @@
|
||||
<div class="control-container">
|
||||
<div class="icon-list">
|
||||
<SvgIcon
|
||||
v-show="!isVideoPlaying(item.id)"
|
||||
class="play-icon"
|
||||
@click="handlePlayMotion(item)"
|
||||
@click.stop="handlePlayMotion(item)"
|
||||
name="CPlay"
|
||||
size="10"
|
||||
color="#fff"
|
||||
/>
|
||||
<SvgIcon
|
||||
v-show="isVideoPlaying(item.id)"
|
||||
class="play-icon pause"
|
||||
@click.stop="handlePlayMotion(item)"
|
||||
name="CPause"
|
||||
size="10"
|
||||
color="#fff"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -267,6 +279,7 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<Tips v-model:showModal="showTips" />
|
||||
</div>
|
||||
</template>
|
||||
<script lang="ts">
|
||||
@@ -293,11 +306,14 @@ import { getCookie, setCookie } from '@/tool/cookie'
|
||||
import showViewVideo from '@/tool/mount'
|
||||
import router from '@/router'
|
||||
import promptInput from './promptInput.vue'
|
||||
import Tips from './Tips.vue'
|
||||
import { getFirstFrame, getFirstAndLastFrame } from './prompt'
|
||||
|
||||
export default defineComponent({
|
||||
components: {
|
||||
generalDrag,
|
||||
promptInput
|
||||
promptInput,
|
||||
Tips
|
||||
},
|
||||
props: {
|
||||
isDesignPage: {
|
||||
@@ -349,12 +365,14 @@ export default defineComponent({
|
||||
generateTime: null as any,
|
||||
poseList: [],
|
||||
selectPose: null as any,
|
||||
prompt: [
|
||||
{ id: '1', type: 'text', value: '11111' },
|
||||
{ id: '2', type: 'input', value: '222', placeholder: '[请输入内容]' },
|
||||
{ id: '3', type: 'text', value: '333333' },
|
||||
{ id: '4', type: 'input', value: '', placeholder: '[请输入内容]' }
|
||||
]
|
||||
prompt: computed(() => {
|
||||
if (videoType.value === 2) {
|
||||
return getFirstFrame(t)
|
||||
}
|
||||
if (videoType.value === 3) {
|
||||
return getFirstAndLastFrame(t)
|
||||
}
|
||||
})
|
||||
})
|
||||
let speed = reactive({
|
||||
speedList: [
|
||||
@@ -376,6 +394,7 @@ export default defineComponent({
|
||||
value: ''
|
||||
}
|
||||
})
|
||||
const showTips = ref(false)
|
||||
const setIsShowMark: any = inject('setIsShowMark')
|
||||
const createProbject: any = inject('createProbject', () => {})
|
||||
const dataDom = reactive({
|
||||
@@ -431,24 +450,52 @@ export default defineComponent({
|
||||
if (data.poseList.length == 0) {
|
||||
getPoseList()
|
||||
}
|
||||
// setCloudImg()
|
||||
}
|
||||
// const setCloudImg = ()=>{
|
||||
// let arr = store.state.UploadFilesModule.cloudList
|
||||
// let list = JSON.parse(JSON.stringify(arr.poseTransfer)) || []
|
||||
// list.forEach((item:any)=>{
|
||||
// item.url = item.firstFrameUrl
|
||||
// data.noLikeList.unshift(item)
|
||||
// })
|
||||
// store.commit('clearCloudList','poseTransfer')
|
||||
// }
|
||||
const gifPlay = (e: any, item: any) => {
|
||||
e.target.src = item.gif //使用gif图片
|
||||
// 存储视频元素的引用
|
||||
const videoRefs = ref<Record<number, HTMLVideoElement | null>>({})
|
||||
// 存储视频播放状态
|
||||
const videoPlayingStates = ref<Record<number, boolean>>({})
|
||||
|
||||
// 设置视频 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 gifPause = (e: any, item: any) => {
|
||||
e.target.src = item.firstFrame //静态图片
|
||||
|
||||
// 检查视频是否正在播放
|
||||
const isVideoPlaying = (id: number) => {
|
||||
return videoPlayingStates.value[id] || false
|
||||
}
|
||||
const handlePlayMotion = item => {}
|
||||
|
||||
// 播放视频
|
||||
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 getPoseList = () => {
|
||||
Https.axiosGet(Https.httpUrls.getAllPose).then(rv => {
|
||||
rv[0].isChecked = true
|
||||
@@ -485,10 +532,7 @@ export default defineComponent({
|
||||
}
|
||||
})
|
||||
})
|
||||
.then(() => {})
|
||||
.catch(() => {
|
||||
return
|
||||
})
|
||||
|
||||
data.isGenerate = true
|
||||
// data.remGenerateTime = setTimeout(()=>{
|
||||
// },10000)
|
||||
@@ -513,36 +557,35 @@ export default defineComponent({
|
||||
const lastFrameProductImage = data.lastSelectImg.minioUrl
|
||||
value.lastFrameProductImage = lastFrameProductImage
|
||||
}
|
||||
console.table('videoType:', videoType.value, '请求参数', value)
|
||||
// Https.axiosPost(Https.httpUrls.poseTransform, value)
|
||||
// .then(rv => {
|
||||
// data.remGenerate = true
|
||||
// data.noLikeList.unshift({
|
||||
// taskId: rv.taskId,
|
||||
// parentId: data.selectImg.parentId
|
||||
// })
|
||||
// setGenerate(rv.taskId)
|
||||
// })
|
||||
// .catch((res: any) => {
|
||||
// data.isGenerate = false
|
||||
// clearInterval(data.remGenerateTime)
|
||||
// data.remGenerate = false
|
||||
// if (res.errCode === 2) {
|
||||
// Modal.confirm({
|
||||
// title: res.errMsg,
|
||||
// icon: createVNode(ExclamationCircleOutlined),
|
||||
// okText: 'Yes',
|
||||
// cancelText: 'No',
|
||||
// mask: false,
|
||||
// zIndex: 99999,
|
||||
// centered: true,
|
||||
// onOk() {
|
||||
// store.commit('setUpgradePlan', true)
|
||||
// },
|
||||
// onCancel() {}
|
||||
// })
|
||||
// }
|
||||
// })
|
||||
Https.axiosPost(Https.httpUrls.poseTransform, value)
|
||||
.then(rv => {
|
||||
data.remGenerate = true
|
||||
data.noLikeList.unshift({
|
||||
taskId: rv.taskId,
|
||||
parentId: data.selectImg.parentId
|
||||
})
|
||||
setGenerate(rv.taskId)
|
||||
})
|
||||
.catch((res: any) => {
|
||||
data.isGenerate = false
|
||||
clearInterval(data.remGenerateTime)
|
||||
data.remGenerate = false
|
||||
if (res.errCode === 2) {
|
||||
Modal.confirm({
|
||||
title: res.errMsg,
|
||||
icon: createVNode(ExclamationCircleOutlined),
|
||||
okText: 'Yes',
|
||||
cancelText: 'No',
|
||||
mask: false,
|
||||
zIndex: 99999,
|
||||
centered: true,
|
||||
onOk() {
|
||||
store.commit('setUpgradePlan', true)
|
||||
},
|
||||
onCancel() {}
|
||||
})
|
||||
}
|
||||
})
|
||||
}
|
||||
const setGenerate = (dataList: any) => {
|
||||
let list: any = [dataList]
|
||||
@@ -646,7 +689,6 @@ export default defineComponent({
|
||||
if (!isLt2M) {
|
||||
message.info(useI18n().t('MoodboardUpload.jsContent4'))
|
||||
}
|
||||
console.log(data?.upload, isSelectObject)
|
||||
if (!data?.upload?.projectId && !isSelectObject) {
|
||||
isSelectObject = true
|
||||
await createProbject()
|
||||
@@ -654,7 +696,6 @@ export default defineComponent({
|
||||
return (isJpgOrPng && isLt2M && data.upload.projectId) || Upload.LIST_IGNORE
|
||||
}
|
||||
const fileUploadChange = (value: any) => {
|
||||
console.log('普通上传或上传首帧---', value)
|
||||
let file = value.file
|
||||
let bor = true
|
||||
if (file.status === 'done') {
|
||||
@@ -689,7 +730,6 @@ export default defineComponent({
|
||||
}
|
||||
}
|
||||
const fileUploadChangeLast = (value: any) => {
|
||||
console.log('上传尾帧 ---', value)
|
||||
const file = value.file
|
||||
if (file.status === 'done') {
|
||||
const res = JSON.parse(file.xhr.response)
|
||||
@@ -767,7 +807,6 @@ export default defineComponent({
|
||||
if (props.isDesignPage) {
|
||||
emit('unLike', item)
|
||||
}
|
||||
console.log(props.isDesignPage)
|
||||
}
|
||||
Https.axiosPost(Https.httpUrls.poselikeOrDisike, {}, { params: value })
|
||||
.then(rv => {
|
||||
@@ -883,9 +922,9 @@ export default defineComponent({
|
||||
const videoType = ref(2)
|
||||
const showMotion = computed(() => videoType.value === 1)
|
||||
const options = ref([
|
||||
{ vlaue: 2, label: 'First frame' },
|
||||
{ value: 3, label: 'First and last frames' },
|
||||
{ value: 1, label: 'First frame and skeleton' }
|
||||
{ vlaue: 2, label: t('poseTransfer.FirstFrame') },
|
||||
{ value: 3, label: t('poseTransfer.FirstAndLastFrames') },
|
||||
{ value: 1, label: t('poseTransfer.FirstFrameAndSkeleton') }
|
||||
])
|
||||
|
||||
onBeforeUnmount(() => {
|
||||
@@ -904,8 +943,6 @@ export default defineComponent({
|
||||
selectImgItem,
|
||||
setSize,
|
||||
setItemPosition,
|
||||
gifPlay,
|
||||
gifPause,
|
||||
getgenerate,
|
||||
getUploadUrl,
|
||||
beforeUpload,
|
||||
@@ -921,7 +958,11 @@ export default defineComponent({
|
||||
locale,
|
||||
videoType,
|
||||
options,
|
||||
showMotion
|
||||
showMotion,
|
||||
setVideoRef,
|
||||
handlePlayMotion,
|
||||
isVideoPlaying,
|
||||
showTips
|
||||
}
|
||||
},
|
||||
directives: {
|
||||
@@ -1139,7 +1180,7 @@ export default defineComponent({
|
||||
.icon-list {
|
||||
height: 50%;
|
||||
width: calc(100% - 1.6rem);
|
||||
border-top: 1px solid #fff;
|
||||
// border-top: 1px solid #fff;
|
||||
display: flex;
|
||||
box-sizing: border-box;
|
||||
justify-content: flex-start;
|
||||
|
||||
Reference in New Issue
Block a user