@@ -6,9 +6,9 @@ import request from "@/utils/request.js"; | |||||
* @param sex ,pageNum,pageSize | * @param sex ,pageNum,pageSize | ||||
* @returns data | * @returns data | ||||
*/ | */ | ||||
export function modeListApi(sex, pageNum, pageSize) { | |||||
export function modeListApi(sex, pageNum, pageSize, videoType) { | |||||
return request({ | return request({ | ||||
url: `/api/personPatch/list?sex=${sex}&pageNum=${pageNum}&pageSize=${pageSize}`, | |||||
url: `/api/personPatch/list?sex=${sex}&pageNum=${pageNum}&pageSize=${pageSize}&videoType=${videoType}`, | |||||
method: 'get' | method: 'get' | ||||
}) | }) | ||||
} | } | ||||
@@ -126,3 +126,27 @@ export function saveImgApi(data) { | |||||
data | data | ||||
}) | }) | ||||
} | } | ||||
/** | |||||
* @description 删除上传的背景或素材 | |||||
* @returns id | |||||
*/ | |||||
export function delImgApi(id) { | |||||
return request({ | |||||
url: `/api/materialMould/del?id=${id}`, | |||||
method: 'get', | |||||
}) | |||||
} | |||||
/** | |||||
* @description:根据id获取模板详情 | |||||
* @param {number} id | |||||
* @return data | |||||
*/ | |||||
export function personPatchApi(id) { | |||||
return request({ | |||||
url: `/api/personPatch/findById?id=${id}`, | |||||
method: 'get' | |||||
}) | |||||
} |
@@ -1,97 +0,0 @@ | |||||
import request from "@/utils/request.js"; | |||||
const baseURL = import.meta.env.VITE_APP_BASE_API | |||||
/** | |||||
* @description 注册 | |||||
* @params email,password | |||||
* @returns data | |||||
*/ | |||||
export function register(data) { | |||||
return request({ | |||||
url: `/api/user/doRegisterByEmail`, | |||||
method: 'post', | |||||
data | |||||
}) | |||||
} | |||||
/** | |||||
* @description 登录 | |||||
* @params email,password,code | |||||
* @returns data | |||||
*/ | |||||
export function login(data) { | |||||
return request({ | |||||
url: `/api/user/loginByEmail`, | |||||
method: 'post', | |||||
data | |||||
}) | |||||
} | |||||
/** | |||||
/** | |||||
* @description:重新发送邮件 | |||||
* @param {string} data | |||||
* @return: data | |||||
*/ | |||||
export function sendRegisterEmail(email) { | |||||
return request({ | |||||
url: `/api/user/sendRegisterEmail`, | |||||
method: 'post', | |||||
data: { | |||||
} | |||||
}) | |||||
} | |||||
/** | |||||
/** | |||||
* @description:忘记密码发送邮件 | |||||
* @param {string} data | |||||
* @return: data | |||||
*/ | |||||
export function sendUpdPwdEmailApi(email) { | |||||
return request({ | |||||
url: `/api/user/sendUpdPwdEmail`, | |||||
method: 'post', | |||||
data: { | |||||
} | |||||
}) | |||||
} | |||||
/** | |||||
/** | |||||
* @description:邮件重置密码, | |||||
* @param pwd, ticket | |||||
* @return: data | |||||
*/ | |||||
export function resetPwdEmailApi(data) { | |||||
return request({ | |||||
url: `/api/user/doUpdPass`, | |||||
method: 'post', | |||||
data | |||||
}) | |||||
} | |||||
/** | |||||
/** | |||||
* @description:邮件重置密码, | |||||
* @param oldpwd, newpwd | |||||
* @return: data | |||||
*/ | |||||
export function resetPwdFormApi(data) { | |||||
return request({ | |||||
url: `/api/user/oldUpdPass`, | |||||
method: 'post', | |||||
data | |||||
}) | |||||
} | |||||
/** | |||||
* @description:获取图形验证码 | |||||
* @return: 验证码地址 | |||||
*/ | |||||
export const getCodeImgUrl = baseURL + '/api/user/captcha.jpg' | |||||
@@ -0,0 +1,159 @@ | |||||
<template> | |||||
<div class="myPage"> | |||||
<!-- 主要显示 --> | |||||
<div | |||||
:class="props.videoType == 1 ? 'content1' : 'content2'" | |||||
id="content" | |||||
:style="bgStyle" | |||||
ref="fatherBox" | |||||
> | |||||
<!-- 数字人的图片 --> | |||||
<div | |||||
class="virtual" | |||||
:class="showBorderActive == materialList.virtual.id ? 'border' : ''" | |||||
@mousedown="handleDrag(materialList.virtual.id, $event)" | |||||
:style="virtualStyle" | |||||
> | |||||
<img id="virtualImg" :src="materialList.virtual.material" alt="" /> | |||||
<div class="stretchBox box1"></div> | |||||
<div class="stretchBox box2"></div> | |||||
<div class="stretchBox box3"></div> | |||||
<div class="stretchBox box4"></div> | |||||
</div> | |||||
</div> | |||||
</div> | |||||
</template> | |||||
<script setup> | |||||
//#region 父组件传参 | |||||
const props = defineProps({ | |||||
// isLoading: { | |||||
// required: true, //是否必传 | |||||
// }, | |||||
materialList: { | |||||
required: true, | |||||
}, | |||||
videoType: { | |||||
required: true, | |||||
}, | |||||
proportion: { | |||||
required: true, | |||||
}, | |||||
}); | |||||
//#endregion -------------------------- | |||||
//#region 大盒子样式 | |||||
const bgStyle = computed(() => { | |||||
return { | |||||
// width: '1080px', | |||||
// height: '1920px', | |||||
// transform: 'scale(0.2)', | |||||
backgroundImage: `url(${props.materialList.BGI.material})`, | |||||
backgroundSize: "cover", | |||||
backgroundPosition: "center", | |||||
}; | |||||
}); | |||||
//#endregion -------------------------- | |||||
//#region 数字人逻辑 | |||||
// 计算属性来计算盒子位置和大小 | |||||
const virtualStyle = computed(() => { | |||||
return { | |||||
top: props.materialList.virtual.y + "px", | |||||
left: props.materialList.virtual.x + "px", | |||||
transform: | |||||
"scale(" + props.materialList.virtual.w / props.proportion + ") ", | |||||
transformOrigin: "top left", | |||||
}; | |||||
}); | |||||
// 拖动盒子 | |||||
const showBorderActive = ref(null); //判断显示边框 | |||||
const fatherBox = ref(null); | |||||
const handleDrag = (id, event) => { | |||||
showBorderActive.value = id; | |||||
event.preventDefault(); | |||||
const imageElement = fatherBox.value; | |||||
const startX = event.clientX; //保存初始值,避免闪烁 | |||||
const startY = event.clientY; | |||||
const startLeft = props.materialList.virtual.x; | |||||
const startTop = props.materialList.virtual.y; | |||||
// 鼠标移动 | |||||
const onMouseMove = (event) => { | |||||
const deltaX = event.clientX - startX; | |||||
const deltaY = event.clientY - startY; | |||||
props.materialList.virtual.x = startLeft + deltaX; | |||||
props.materialList.virtual.y = startTop + deltaY; | |||||
}; | |||||
// 鼠标抬起 | |||||
const onMouseUp = () => { | |||||
document.removeEventListener("mousemove", onMouseMove); | |||||
document.removeEventListener("mouseup", onMouseUp); | |||||
}; | |||||
document.addEventListener("mousemove", onMouseMove); | |||||
document.addEventListener("mouseup", onMouseUp); | |||||
}; | |||||
//#endregion -------------------------- | |||||
//#region | |||||
//#endregion -------------------------- | |||||
</script> | |||||
<style lang="scss" scoped> | |||||
.myPage { | |||||
// height: 768px; | |||||
// width: 432px; | |||||
} | |||||
.content1 { | |||||
position: relative; | |||||
height: 768px; | |||||
width: 432px; | |||||
overflow: hidden; | |||||
} | |||||
.content2 { | |||||
position: relative; | |||||
height: 432px; | |||||
width: 768px; | |||||
overflow: hidden; | |||||
} | |||||
.virtual { | |||||
position: absolute; | |||||
user-select: none; | |||||
border: rgba(0, 0, 0, 0) 5px solid; | |||||
} | |||||
.border { | |||||
border: 5px solid #00ff00; | |||||
.stretchBox { | |||||
opacity: 1; | |||||
position: absolute; | |||||
width: 20px; | |||||
height: 20px; | |||||
background-color: #7264f5; | |||||
} | |||||
.box1 { | |||||
top: -10px; | |||||
left: -10px; | |||||
cursor: nwse-resize; | |||||
} | |||||
.box2 { | |||||
top: -10px; | |||||
left: 100%; | |||||
transform: translateX(-10px); | |||||
cursor: nesw-resize; | |||||
} | |||||
.box3 { | |||||
top: 100%; | |||||
left: -10px; | |||||
transform: translateY(-10px); | |||||
cursor: nesw-resize; | |||||
} | |||||
.box4 { | |||||
top: 100%; | |||||
left: 100%; | |||||
transform: translate(-10px, -10px); | |||||
cursor: nwse-resize; | |||||
} | |||||
} | |||||
</style> |
@@ -0,0 +1,208 @@ | |||||
<template> | |||||
<div class="myPage"> | |||||
<!-- 主要显示 --> | |||||
<div | |||||
:class="props.videoType == 1 ? 'content1' : 'content2'" | |||||
id="content" | |||||
:style="bgStyle" | |||||
ref="fatherBox" | |||||
> | |||||
<!-- 数字人的图片 --> | |||||
<div | |||||
class="virtual" | |||||
:class="showBorderActive == materialList.virtual.id ? 'border' : ''" | |||||
@mousedown="handleDrag(materialList.virtual.id, $event)" | |||||
:style="virtualStyle" | |||||
> | |||||
<img id="virtualImg" :src="materialList.virtual.material" alt="" /> | |||||
<div class="stretchBox box1"></div> | |||||
<div class="stretchBox box2"></div> | |||||
<div class="stretchBox box3"></div> | |||||
<div @mousedown.stop="changeScale" class="stretchBox box4"></div> | |||||
</div> | |||||
</div> | |||||
</div> | |||||
</template> | |||||
<script setup> | |||||
//#region 父组件传参 | |||||
const props = defineProps({ | |||||
// isLoading: { | |||||
// required: true, //是否必传 | |||||
// }, | |||||
materialList: { | |||||
required: true, | |||||
}, | |||||
videoType: { | |||||
required: true, | |||||
}, | |||||
proportion: { | |||||
required: true, | |||||
}, | |||||
}); | |||||
//#endregion -------------------------- | |||||
//#region 大盒子样式 | |||||
const bgStyle = computed(() => { | |||||
return { | |||||
// width: '1080px', | |||||
// height: '1920px', | |||||
// transform: 'scale(0.2)', | |||||
backgroundImage: `url(${props.materialList.BGI.material})`, | |||||
backgroundSize: "cover", | |||||
backgroundPosition: "center", | |||||
}; | |||||
}); | |||||
//#endregion -------------------------- | |||||
//#region 数字人逻辑 | |||||
// 计算属性来计算盒子位置和大小 | |||||
const virtualStyle = computed(() => { | |||||
return { | |||||
top: props.materialList.virtual.y + "px", | |||||
left: props.materialList.virtual.x + "px", | |||||
transform: | |||||
"scale(" + props.materialList.virtual.w / props.proportion + ") ", | |||||
transformOrigin: "top left", | |||||
}; | |||||
}); | |||||
// 拖动盒子 | |||||
const showBorderActive = ref(null); //判断显示边框 | |||||
const fatherBox = ref(null); | |||||
const handleDrag = (id, event) => { | |||||
showBorderActive.value = id; | |||||
event.preventDefault(); | |||||
const imageElement = fatherBox.value; | |||||
const startX = event.clientX; //保存初始值,避免闪烁 | |||||
const startY = event.clientY; | |||||
const startLeft = props.materialList.virtual.x; | |||||
const startTop = props.materialList.virtual.y; | |||||
// 鼠标移动 | |||||
const onMouseMove = (event) => { | |||||
const deltaX = event.clientX - startX; | |||||
const deltaY = event.clientY - startY; | |||||
props.materialList.virtual.x = startLeft + deltaX; | |||||
props.materialList.virtual.y = startTop + deltaY; | |||||
}; | |||||
// 鼠标抬起 | |||||
const onMouseUp = () => { | |||||
document.removeEventListener("mousemove", onMouseMove); | |||||
document.removeEventListener("mouseup", onMouseUp); | |||||
}; | |||||
document.addEventListener("mousemove", onMouseMove); | |||||
document.addEventListener("mouseup", onMouseUp); | |||||
}; | |||||
// 缩放盒子 | |||||
let touchStart = reactive({ | |||||
pageX: null, | |||||
pageY: null, | |||||
}); | |||||
const scaleNum = ref(0.003); | |||||
function changeScale(event) { | |||||
event.preventDefault(); | |||||
const x = event.clientX; | |||||
const y = event.clientY; | |||||
touchStart = { | |||||
pageX: x, | |||||
pageY: y, | |||||
}; | |||||
// 鼠标移动 | |||||
const onMouseMove = (event) => { | |||||
const MoveX = event.clientX; | |||||
const MoveY = event.clientY; | |||||
const flag = Math.sign(x - touchStart.pageX) == -1 ? true : false; | |||||
if (flag) { | |||||
// 限制最大缩放系数 | |||||
if (props.materialList.virtual.w > 1.3) return; | |||||
props.materialList.virtual.w += scaleNum.value; | |||||
// 更新坐标位置 | |||||
touchStart = { | |||||
pageX: MoveX, | |||||
pageY: MoveY, | |||||
}; | |||||
} else { | |||||
// 限制最小缩放系数 | |||||
if (props.materialList.virtual.w < 0.4) return; | |||||
props.materialList.virtual.w -= scaleNum.value; | |||||
// 更新坐标位置 | |||||
touchStart = { | |||||
pageX: MoveX, | |||||
pageY: MoveY, | |||||
}; | |||||
} | |||||
}; | |||||
// 鼠标抬起 | |||||
const onMouseUp = () => { | |||||
document.removeEventListener("mousemove", onMouseMove); | |||||
document.removeEventListener("mouseup", onMouseUp); | |||||
}; | |||||
document.addEventListener("mousemove", onMouseMove); | |||||
document.addEventListener("mouseup", onMouseUp); | |||||
} | |||||
//#endregion -------------------------- | |||||
//#region | |||||
//#endregion -------------------------- | |||||
</script> | |||||
<style lang="scss" scoped> | |||||
.myPage { | |||||
// height: 768px; | |||||
// width: 432px; | |||||
} | |||||
.content1 { | |||||
position: relative; | |||||
height: 768px; | |||||
width: 432px; | |||||
overflow: hidden; | |||||
} | |||||
.content2 { | |||||
position: relative; | |||||
height: 432px; | |||||
width: 768px; | |||||
overflow: hidden; | |||||
} | |||||
.virtual { | |||||
position: absolute; | |||||
user-select: none; | |||||
border: rgba(0, 0, 0, 0) 5px solid; | |||||
} | |||||
.border { | |||||
border: 5px solid #00ff00; | |||||
.stretchBox { | |||||
opacity: 1; | |||||
position: absolute; | |||||
width: 20px; | |||||
height: 20px; | |||||
background-color: #7264f5; | |||||
} | |||||
.box1 { | |||||
top: -10px; | |||||
left: -10px; | |||||
cursor: nwse-resize; | |||||
} | |||||
.box2 { | |||||
top: -10px; | |||||
left: 100%; | |||||
transform: translateX(-10px); | |||||
cursor: nesw-resize; | |||||
} | |||||
.box3 { | |||||
top: 100%; | |||||
left: -10px; | |||||
transform: translateY(-10px); | |||||
cursor: nesw-resize; | |||||
} | |||||
.box4 { | |||||
top: 100%; | |||||
left: 100%; | |||||
transform: translate(-10px, -10px); | |||||
cursor: nwse-resize; | |||||
} | |||||
} | |||||
</style> |
@@ -2,6 +2,7 @@ | |||||
export {} | export {} | ||||
declare global { | declare global { | ||||
const EffectScope: typeof import('vue')['EffectScope'] | const EffectScope: typeof import('vue')['EffectScope'] | ||||
const ElForm: typeof import('element-plus/es')['ElForm'] | |||||
const ElMessage: typeof import('element-plus/es')['ElMessage'] | const ElMessage: typeof import('element-plus/es')['ElMessage'] | ||||
const ElMessageBox: typeof import('element-plus/es')['ElMessageBox'] | const ElMessageBox: typeof import('element-plus/es')['ElMessageBox'] | ||||
const asyncComputed: typeof import('@vueuse/core')['asyncComputed'] | const asyncComputed: typeof import('@vueuse/core')['asyncComputed'] | ||||
@@ -270,6 +271,7 @@ import { UnwrapRef } from 'vue' | |||||
declare module 'vue' { | declare module 'vue' { | ||||
interface ComponentCustomProperties { | interface ComponentCustomProperties { | ||||
readonly EffectScope: UnwrapRef<typeof import('vue')['EffectScope']> | readonly EffectScope: UnwrapRef<typeof import('vue')['EffectScope']> | ||||
readonly ElForm: UnwrapRef<typeof import('element-plus/es')['ElForm']> | |||||
readonly ElMessage: UnwrapRef<typeof import('element-plus/es')['ElMessage']> | readonly ElMessage: UnwrapRef<typeof import('element-plus/es')['ElMessage']> | ||||
readonly ElMessageBox: UnwrapRef<typeof import('element-plus/es')['ElMessageBox']> | readonly ElMessageBox: UnwrapRef<typeof import('element-plus/es')['ElMessageBox']> | ||||
readonly asyncComputed: UnwrapRef<typeof import('@vueuse/core')['asyncComputed']> | readonly asyncComputed: UnwrapRef<typeof import('@vueuse/core')['asyncComputed']> | ||||
@@ -8,9 +8,12 @@ export {} | |||||
declare module '@vue/runtime-core' { | declare module '@vue/runtime-core' { | ||||
export interface GlobalComponents { | export interface GlobalComponents { | ||||
Breadcrumb: typeof import('./../components/Breadcrumb/index.vue')['default'] | Breadcrumb: typeof import('./../components/Breadcrumb/index.vue')['default'] | ||||
copy: typeof import('./../components/myLoading copy.vue')['default'] | |||||
copy: typeof import('./../components/EditPosition copy.vue')['default'] | |||||
CutImg: typeof import('./../components/cutImg.vue')['default'] | CutImg: typeof import('./../components/cutImg.vue')['default'] | ||||
CutImg1: typeof import('./../components/cutImg1.vue')['default'] | CutImg1: typeof import('./../components/cutImg1.vue')['default'] | ||||
DoCreateVideo: typeof import('./../components/doCreateVideo.vue')['default'] | |||||
EditPosition: typeof import('./../components/EditPosition.vue')['default'] | |||||
'EditPosition copy': typeof import('./../components/EditPosition copy.vue')['default'] | |||||
ElButton: typeof import('element-plus/es')['ElButton'] | ElButton: typeof import('element-plus/es')['ElButton'] | ||||
ElCol: typeof import('element-plus/es')['ElCol'] | ElCol: typeof import('element-plus/es')['ElCol'] | ||||
ElDialog: typeof import('element-plus/es')['ElDialog'] | ElDialog: typeof import('element-plus/es')['ElDialog'] | ||||
@@ -26,8 +26,8 @@ | |||||
<div class="tab" v-show="showChooseModel"> | <div class="tab" v-show="showChooseModel"> | ||||
<div | <div | ||||
class="tabItem" | class="tabItem" | ||||
:class="modelTabItemActive == 0 ? 'tabItemActive' : ''" | |||||
@click="changeTabSex(0)" | |||||
:class="modelTabItemActive == -1 ? 'tabItemActive' : ''" | |||||
@click="changeTabSex(-1)" | |||||
> | > | ||||
{{ $t("createVideo.all") }} | {{ $t("createVideo.all") }} | ||||
</div> | </div> | ||||
@@ -50,8 +50,8 @@ | |||||
<div class="tab" v-show="showChooseModel"> | <div class="tab" v-show="showChooseModel"> | ||||
<div | <div | ||||
class="tabItem" | class="tabItem" | ||||
:class="modelTabItemActive2 == 0 ? 'tabItemActive' : ''" | |||||
@click="changeTabVideoType(0)" | |||||
:class="modelTabItemActive2 == -1 ? 'tabItemActive' : ''" | |||||
@click="changeTabVideoType(-1)" | |||||
> | > | ||||
{{ $t("createVideo.all") }} | {{ $t("createVideo.all") }} | ||||
</div> | </div> | ||||
@@ -90,7 +90,16 @@ | |||||
</div> | </div> | ||||
<!-- 展示区 --> | <!-- 展示区 --> | ||||
<div class="showModelImgBox"> | <div class="showModelImgBox"> | ||||
<img :src="modelImg" alt="" /> | |||||
<!-- <img :src="modelImg" alt="" /> --> | |||||
<!-- 编辑图片位置组件 --> | |||||
<EditPosition | |||||
id="editPosition" | |||||
class="EditPosition" | |||||
:materialList="materialList" | |||||
:videoType="videoType" | |||||
:proportion="proportion" | |||||
> | |||||
</EditPosition> | |||||
<!-- 保存视频和生成视频 --> | <!-- 保存视频和生成视频 --> | ||||
<div class="btnBox" v-show="!showChooseModel"> | <div class="btnBox" v-show="!showChooseModel"> | ||||
<div class="customBtn" style="margin-right: 15px"> | <div class="customBtn" style="margin-right: 15px"> | ||||
@@ -264,6 +273,8 @@ | |||||
class="bjSystemBoxItem" | class="bjSystemBoxItem" | ||||
v-for="item in systemBGIList" | v-for="item in systemBGIList" | ||||
:key="item.id" | :key="item.id" | ||||
:class="bjImgActive == item.id ? 'ImgBorderActive' : ''" | |||||
@click="selectBjImg(item)" | |||||
> | > | ||||
<img class="boxCentreImg" :src="item.material" alt="" /> | <img class="boxCentreImg" :src="item.material" alt="" /> | ||||
</div> | </div> | ||||
@@ -293,7 +304,16 @@ | |||||
class="bjSystemBoxItem" | class="bjSystemBoxItem" | ||||
v-for="item in personBGIList" | v-for="item in personBGIList" | ||||
:key="item.id" | :key="item.id" | ||||
:class="bjImgActive == item.id ? 'ImgBorderActive' : ''" | |||||
@click="selectBjImg(item)" | |||||
> | > | ||||
<div | |||||
v-show="bjImgActive == item.id" | |||||
class="delIcon" | |||||
@click="delImg(item.id)" | |||||
> | |||||
<img src="../../assets/img/delete.png" alt="" /> | |||||
</div> | |||||
<img class="boxCentreImg" :src="item.material" alt="" /> | <img class="boxCentreImg" :src="item.material" alt="" /> | ||||
</div> | </div> | ||||
</div> | </div> | ||||
@@ -327,6 +347,8 @@ | |||||
class="bjSystemBoxItem" | class="bjSystemBoxItem" | ||||
v-for="item in systemSCIList" | v-for="item in systemSCIList" | ||||
:key="item.id" | :key="item.id" | ||||
:class="scImgActive == item.id ? 'ImgBorderActive' : ''" | |||||
@click="selectScImg(item)" | |||||
> | > | ||||
<img class="boxCentreImg" :src="item.material" alt="" /> | <img class="boxCentreImg" :src="item.material" alt="" /> | ||||
</div> | </div> | ||||
@@ -355,7 +377,16 @@ | |||||
class="bjSystemBoxItem" | class="bjSystemBoxItem" | ||||
v-for="item in personSCIList" | v-for="item in personSCIList" | ||||
:key="item.id" | :key="item.id" | ||||
:class="scImgActive == item.id ? 'ImgBorderActive' : ''" | |||||
@click="selectScImg(item)" | |||||
> | > | ||||
<div | |||||
v-show="scImgActive == item.id" | |||||
class="delIcon" | |||||
@click="delImg(item.id)" | |||||
> | |||||
<img src="../../assets/img/delete.png" alt="" /> | |||||
</div> | |||||
<img class="boxCentreImg" :src="item.material" alt="" /> | <img class="boxCentreImg" :src="item.material" alt="" /> | ||||
</div> | </div> | ||||
</div> | </div> | ||||
@@ -370,6 +401,7 @@ | |||||
</div> | </div> | ||||
</template> | </template> | ||||
<!-- videoType==1为竖,==2为横 --> | |||||
<script setup> | <script setup> | ||||
//#region 导入 | //#region 导入 | ||||
import { getCurrentInstance } from "vue"; | import { getCurrentInstance } from "vue"; | ||||
@@ -382,6 +414,8 @@ import { | |||||
personBGIListApi, | personBGIListApi, | ||||
systemSCIListApi, | systemSCIListApi, | ||||
personSCIListApi, | personSCIListApi, | ||||
delImgApi, | |||||
personPatchApi, | |||||
} from "@/apis/createVideo"; | } from "@/apis/createVideo"; | ||||
import { useI18n } from "vue-i18n"; | import { useI18n } from "vue-i18n"; | ||||
import Recorder from "js-audio-recorder"; //mp3插件 | import Recorder from "js-audio-recorder"; //mp3插件 | ||||
@@ -407,29 +441,21 @@ const videoType = ref(null); //判断横屏2还是竖屏1,初始为没有,控制 | |||||
const showChooseModel = ref(true); // 控制弹窗显示隐藏 | const showChooseModel = ref(true); // 控制弹窗显示隐藏 | ||||
const modeList = ref([]); //模版列表 | const modeList = ref([]); //模版列表 | ||||
const modelImg = ref(null); //模版回显图 | const modelImg = ref(null); //模版回显图 | ||||
const modelTabItemActive = ref(0); //模版tab栏 性别 | |||||
const modelTabItemActive2 = ref(0); //模版tab栏 比例 | |||||
const modelTabItemActive = ref(-1); //模版tab栏 性别 | |||||
const modelTabItemActive2 = ref(-1); //模版tab栏 比例 | |||||
const modelPageNum = ref(1); | const modelPageNum = ref(1); | ||||
const modelPageSize = ref(20); | const modelPageSize = ref(20); | ||||
const overLoadModel = ref(true); //禁用模版加载更多 | const overLoadModel = ref(true); //禁用模版加载更多 | ||||
const modelId = ref(null); // 选中模版的id | const modelId = ref(null); // 选中模版的id | ||||
// 获取模版列表 | // 获取模版列表 | ||||
async function getModeList(sex, pageNum, pageSize) { | |||||
let sexx = null; | |||||
if (sex == 0) { | |||||
sexx = ""; | |||||
} else { | |||||
sexx = sex; | |||||
} | |||||
const res = await modeListApi(sexx, pageNum, pageSize); | |||||
if (tabVideoType.value == 0) { | |||||
async function getModeList(sex, pageNum, pageSize, videoType) { | |||||
try { | |||||
const res = await modeListApi(sex, pageNum, pageSize, videoType); | |||||
modeList.value = res.data.list; | modeList.value = res.data.list; | ||||
} else { | |||||
modeList.value = res.data.list.filter( | |||||
(item) => item.videoType == tabVideoType.value | |||||
); | |||||
overLoadModel.value = false; | |||||
} catch (error) { | |||||
// ElMessage.success(msg); | |||||
} | } | ||||
overLoadModel.value = false; | |||||
} | } | ||||
// 点击模版 | // 点击模版 | ||||
function clickModelItem(item) { | function clickModelItem(item) { | ||||
@@ -439,16 +465,21 @@ function clickModelItem(item) { | |||||
modelId.value = item.id; | modelId.value = item.id; | ||||
} | } | ||||
// tab栏切换 性别 | // tab栏切换 性别 | ||||
// tab栏切换 横竖比例 videoType==1为竖,==2为横 | |||||
const tabSex = ref(0); | |||||
const tabVideoType = ref(0); | |||||
// tab栏切换 横竖比例 videoType==1为竖,==2为横,==-1为全部 | |||||
const tabSex = ref(-1); | |||||
const tabVideoType = ref(-1); | |||||
function changeTabSex(index) { | function changeTabSex(index) { | ||||
modeList.value = []; | modeList.value = []; | ||||
modelPageNum.value = 1; | modelPageNum.value = 1; | ||||
modelTabItemActive.value = index; | modelTabItemActive.value = index; | ||||
overLoadModel.value = false; | |||||
tabSex.value = false; | |||||
tabSex.value = index; | tabSex.value = index; | ||||
getModeList(index, modelPageNum.value, modelPageSize.value); | |||||
getModeList( | |||||
index, | |||||
modelPageNum.value, | |||||
modelPageSize.value, | |||||
tabVideoType.value | |||||
); | |||||
} | } | ||||
function changeTabVideoType(index) { | function changeTabVideoType(index) { | ||||
modeList.value = []; | modeList.value = []; | ||||
@@ -456,7 +487,12 @@ function changeTabVideoType(index) { | |||||
modelTabItemActive2.value = index; | modelTabItemActive2.value = index; | ||||
overLoadModel.value = false; | overLoadModel.value = false; | ||||
tabVideoType.value = index; | tabVideoType.value = index; | ||||
getModeList(tabSex.value, modelPageNum.value, modelPageSize.value); | |||||
getModeList( | |||||
tabSex.value, | |||||
modelPageNum.value, | |||||
modelPageSize.value, | |||||
tabVideoType.value | |||||
); | |||||
} | } | ||||
// watch(tabSex, (newVal, oldVal) => { | // watch(tabSex, (newVal, oldVal) => { | ||||
// if (newVal == 0) { | // if (newVal == 0) { | ||||
@@ -479,24 +515,16 @@ function changeTabVideoType(index) { | |||||
// 触底刷新 | // 触底刷新 | ||||
async function loadMoreModel(params) { | async function loadMoreModel(params) { | ||||
modelPageNum.value += 1; | modelPageNum.value += 1; | ||||
if (modelTabItemActive.value == 0) { | |||||
const res = await modeListApi("", modelPageNum.value, modelPageSize.value); | |||||
modeList.value.push(...res.data.list); | |||||
if (res.data.list.length == 0) { | |||||
overLoadModel.value = true; | |||||
modelPageNum.value = modelPageNum.value - 1; | |||||
} | |||||
} else { | |||||
const res = await modeListApi( | |||||
modelTabItemActive.value, | |||||
modelPageNum.value, | |||||
modelPageSize.value | |||||
); | |||||
modeList.value.push(...res.data.list); | |||||
if (res.data.list.length == 0) { | |||||
overLoadModel.value = true; | |||||
modelPageNum.value = modelPageNum.value - 1; | |||||
} | |||||
const res = await modeListApi( | |||||
tabSex.value, | |||||
modelPageNum.value, | |||||
modelPageSize.value, | |||||
tabVideoType.value | |||||
); | |||||
modeList.value.push(...res.data.list); | |||||
if (res.data.list.length == 0) { | |||||
overLoadModel.value = true; | |||||
modelPageNum.value = modelPageNum.value - 1; | |||||
} | } | ||||
} | } | ||||
//#endregion ---------------------------- | //#endregion ---------------------------- | ||||
@@ -711,7 +739,11 @@ async function reGetpersonBGIList() { | |||||
overLoadpersonBG.value = true; | overLoadpersonBG.value = true; | ||||
await getpersonBGIList(); | await getpersonBGIList(); | ||||
} | } | ||||
// 点击列表中的背景图 | |||||
const bjImgActive = ref(null); | |||||
function selectBjImg(img) { | |||||
bjImgActive.value = img.id; | |||||
} | |||||
//#endregion ---------------------------- | //#endregion ---------------------------- | ||||
//#region 素材 | //#region 素材 | ||||
@@ -776,6 +808,87 @@ async function reGetpersonSCIList() { | |||||
overLoadpersonSC.value = true; | overLoadpersonSC.value = true; | ||||
await getpersonSCIList(); | await getpersonSCIList(); | ||||
} | } | ||||
// 点击列表中的素材图 | |||||
const scImgActive = ref(null); | |||||
function selectScImg(img) { | |||||
scImgActive.value = img.id; | |||||
} | |||||
// 删除上传的背景或素材 | |||||
function delImg(id) { | |||||
const msg = | |||||
lanChange.value == "zh-cn" | |||||
? "确定删除图片吗?" | |||||
: "Are you sure to delete the picture?"; | |||||
const notice = lanChange.value == "zh-cn" ? "提示" : "Notice"; | |||||
const confirm = lanChange.value == "zh-cn" ? "确定" : "Confirm"; | |||||
const cancel = lanChange.value == "zh-cn" ? "取消" : "Cancel"; | |||||
ElMessageBox.confirm(msg, notice, { | |||||
confirmButtonText: confirm, | |||||
cancelButtonText: cancel, | |||||
}).then(async () => { | |||||
try { | |||||
const res = await delImgApi(id); | |||||
reGetpersonSCIList(); | |||||
reGetpersonBGIList(); | |||||
ElMessage.success( | |||||
lanChange.value == "zh-cn" ? "删除成功!" : "Deleted successfully!" | |||||
); | |||||
} catch (error) {} | |||||
}); | |||||
} | |||||
//#endregion ---------------------------- | |||||
//#region 编辑区域 | |||||
const proportion = ref(1); //比例 | |||||
const elementWidth = ref(null); | |||||
onMounted(() => { | |||||
elementWidth.value = document.getElementById("editPosition").clientWidth; | |||||
}); | |||||
watch( | |||||
() => videoType.value, | |||||
(newValue, oldValue) => { | |||||
// 根据横竖屏来确定比例 1竖2横 | |||||
if (videoType.value == 1) { | |||||
proportion.value = 1080 / elementWidth.value; | |||||
} else if (videoType.value == 2) { | |||||
proportion.value = 1920 / elementWidth.value; | |||||
} | |||||
console.log(proportion.value); | |||||
}, | |||||
{ deep: true } | |||||
); | |||||
const materialList = reactive({ | |||||
BGI: {}, | |||||
scList: [], | |||||
virtual: {}, | |||||
}); | |||||
// 根据模版id获取信息 | |||||
async function getPersonPatch() { | |||||
try { | |||||
const res = await personPatchApi(modelId.value); | |||||
materialList.BGI.material = res.data.backgroundMaterial; | |||||
materialList.BGI.id = res.data.backgroundId + ""; | |||||
materialList.virtual.material = res.data.material; | |||||
materialList.virtual.id = res.data.id; | |||||
// if (!materialList.virtual.w) { | |||||
materialList.virtual = { | |||||
...materialList.virtual, | |||||
x: 50, | |||||
y: 50, | |||||
z: 0, | |||||
w: 1, | |||||
h: 1, | |||||
}; | |||||
// } | |||||
} catch (error) {} | |||||
} | |||||
watch( | |||||
() => modelId.value, | |||||
async (newValue, oldValue) => { | |||||
await getPersonPatch(); | |||||
}, | |||||
{ deep: true } | |||||
); | |||||
//#endregion ---------------------------- | //#endregion ---------------------------- | ||||
//#region | //#region | ||||
@@ -799,7 +912,7 @@ onMounted(async () => { | |||||
voiceTotal(); //获取声音列表 | voiceTotal(); //获取声音列表 | ||||
// getSystemSCIList(); | // getSystemSCIList(); | ||||
// getpersonBGIList(); | // getpersonBGIList(); | ||||
await getModeList("", 1, 20); //获取模版列表 | |||||
await getModeList(tabSex.value, 1, 20, tabVideoType.value); //获取模版列表 | |||||
getpersonSCIList(); | getpersonSCIList(); | ||||
getSystemSCIList(); | getSystemSCIList(); | ||||
}); | }); | ||||
@@ -832,7 +945,7 @@ onMounted(async () => { | |||||
left: 0px; | left: 0px; | ||||
width: 50%; | width: 50%; | ||||
height: 100%; | height: 100%; | ||||
padding: 30px; | |||||
padding: 30px 30px 10px 30px; | |||||
transition: all 0.3s; | transition: all 0.3s; | ||||
// background-color: #f1f2f6; | // background-color: #f1f2f6; | ||||
background-color: #454545; | background-color: #454545; | ||||
@@ -917,7 +1030,7 @@ onMounted(async () => { | |||||
flex-wrap: wrap; | flex-wrap: wrap; | ||||
justify-content: flex-start; | justify-content: flex-start; | ||||
width: 100%; | width: 100%; | ||||
height: calc(100% - 180px); | |||||
max-height: calc(100% - 180px); | |||||
padding: 20px; | padding: 20px; | ||||
border-radius: 20px; | border-radius: 20px; | ||||
// background-color: #fff; | // background-color: #fff; | ||||
@@ -967,6 +1080,14 @@ onMounted(async () => { | |||||
max-width: 800px; | max-width: 800px; | ||||
max-height: 800px; | max-height: 800px; | ||||
} | } | ||||
.EditPosition { | |||||
position: absolute; | |||||
top: 50%; | |||||
left: 50%; | |||||
transform: translate(-50%, -50%); | |||||
max-width: 800px; | |||||
max-height: 800px; | |||||
} | |||||
.btnBox { | .btnBox { | ||||
position: absolute; | position: absolute; | ||||
display: flex; | display: flex; | ||||
@@ -1080,27 +1201,30 @@ onMounted(async () => { | |||||
background-color: #e5e5e5; | background-color: #e5e5e5; | ||||
border-radius: 10px; | border-radius: 10px; | ||||
cursor: pointer; | cursor: pointer; | ||||
img { | |||||
border: rgba(0, 0, 0, 0) 2px solid; | |||||
> img { | |||||
padding: 10px; | padding: 10px; | ||||
max-width: 100%; | max-width: 100%; | ||||
max-height: 100%; | max-height: 100%; | ||||
} | } | ||||
.bjSystemBoxItemAction { | |||||
position: relative; | |||||
margin-right: 3%; | |||||
margin-bottom: 10px; | |||||
width: 30%; | |||||
height: 200px; | |||||
background-color: #e5e5e5; | |||||
.delIcon { | |||||
position: absolute; | |||||
right: 5px; | |||||
top: 5px; | |||||
width: 20px; | |||||
height: 20px; | |||||
border-radius: 10px; | border-radius: 10px; | ||||
z-index: 999; | |||||
cursor: pointer; | cursor: pointer; | ||||
img { | img { | ||||
padding: 10px; | |||||
max-width: 100%; | max-width: 100%; | ||||
max-height: 100%; | max-height: 100%; | ||||
} | } | ||||
} | } | ||||
} | } | ||||
.ImgBorderActive { | |||||
border: #7264f5 2px solid; | |||||
} | |||||
} | } | ||||
} | } | ||||
} | } | ||||