@@ -6,9 +6,9 @@ import request from "@/utils/request.js"; | |||
* @param sex ,pageNum,pageSize | |||
* @returns data | |||
*/ | |||
export function modeListApi(sex, pageNum, pageSize) { | |||
export function modeListApi(sex, pageNum, pageSize, videoType) { | |||
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' | |||
}) | |||
} | |||
@@ -126,3 +126,27 @@ export function saveImgApi(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 {} | |||
declare global { | |||
const EffectScope: typeof import('vue')['EffectScope'] | |||
const ElForm: typeof import('element-plus/es')['ElForm'] | |||
const ElMessage: typeof import('element-plus/es')['ElMessage'] | |||
const ElMessageBox: typeof import('element-plus/es')['ElMessageBox'] | |||
const asyncComputed: typeof import('@vueuse/core')['asyncComputed'] | |||
@@ -270,6 +271,7 @@ import { UnwrapRef } from 'vue' | |||
declare module 'vue' { | |||
interface ComponentCustomProperties { | |||
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 ElMessageBox: UnwrapRef<typeof import('element-plus/es')['ElMessageBox']> | |||
readonly asyncComputed: UnwrapRef<typeof import('@vueuse/core')['asyncComputed']> | |||
@@ -8,9 +8,12 @@ export {} | |||
declare module '@vue/runtime-core' { | |||
export interface GlobalComponents { | |||
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'] | |||
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'] | |||
ElCol: typeof import('element-plus/es')['ElCol'] | |||
ElDialog: typeof import('element-plus/es')['ElDialog'] | |||
@@ -26,8 +26,8 @@ | |||
<div class="tab" v-show="showChooseModel"> | |||
<div | |||
class="tabItem" | |||
:class="modelTabItemActive == 0 ? 'tabItemActive' : ''" | |||
@click="changeTabSex(0)" | |||
:class="modelTabItemActive == -1 ? 'tabItemActive' : ''" | |||
@click="changeTabSex(-1)" | |||
> | |||
{{ $t("createVideo.all") }} | |||
</div> | |||
@@ -50,8 +50,8 @@ | |||
<div class="tab" v-show="showChooseModel"> | |||
<div | |||
class="tabItem" | |||
:class="modelTabItemActive2 == 0 ? 'tabItemActive' : ''" | |||
@click="changeTabVideoType(0)" | |||
:class="modelTabItemActive2 == -1 ? 'tabItemActive' : ''" | |||
@click="changeTabVideoType(-1)" | |||
> | |||
{{ $t("createVideo.all") }} | |||
</div> | |||
@@ -90,7 +90,16 @@ | |||
</div> | |||
<!-- 展示区 --> | |||
<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="customBtn" style="margin-right: 15px"> | |||
@@ -264,6 +273,8 @@ | |||
class="bjSystemBoxItem" | |||
v-for="item in systemBGIList" | |||
:key="item.id" | |||
:class="bjImgActive == item.id ? 'ImgBorderActive' : ''" | |||
@click="selectBjImg(item)" | |||
> | |||
<img class="boxCentreImg" :src="item.material" alt="" /> | |||
</div> | |||
@@ -293,7 +304,16 @@ | |||
class="bjSystemBoxItem" | |||
v-for="item in personBGIList" | |||
: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="" /> | |||
</div> | |||
</div> | |||
@@ -327,6 +347,8 @@ | |||
class="bjSystemBoxItem" | |||
v-for="item in systemSCIList" | |||
:key="item.id" | |||
:class="scImgActive == item.id ? 'ImgBorderActive' : ''" | |||
@click="selectScImg(item)" | |||
> | |||
<img class="boxCentreImg" :src="item.material" alt="" /> | |||
</div> | |||
@@ -355,7 +377,16 @@ | |||
class="bjSystemBoxItem" | |||
v-for="item in personSCIList" | |||
: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="" /> | |||
</div> | |||
</div> | |||
@@ -370,6 +401,7 @@ | |||
</div> | |||
</template> | |||
<!-- videoType==1为竖,==2为横 --> | |||
<script setup> | |||
//#region 导入 | |||
import { getCurrentInstance } from "vue"; | |||
@@ -382,6 +414,8 @@ import { | |||
personBGIListApi, | |||
systemSCIListApi, | |||
personSCIListApi, | |||
delImgApi, | |||
personPatchApi, | |||
} from "@/apis/createVideo"; | |||
import { useI18n } from "vue-i18n"; | |||
import Recorder from "js-audio-recorder"; //mp3插件 | |||
@@ -407,29 +441,21 @@ const videoType = ref(null); //判断横屏2还是竖屏1,初始为没有,控制 | |||
const showChooseModel = ref(true); // 控制弹窗显示隐藏 | |||
const modeList = ref([]); //模版列表 | |||
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 modelPageSize = ref(20); | |||
const overLoadModel = ref(true); //禁用模版加载更多 | |||
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; | |||
} 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) { | |||
@@ -439,16 +465,21 @@ function clickModelItem(item) { | |||
modelId.value = item.id; | |||
} | |||
// 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) { | |||
modeList.value = []; | |||
modelPageNum.value = 1; | |||
modelTabItemActive.value = index; | |||
overLoadModel.value = false; | |||
tabSex.value = false; | |||
tabSex.value = index; | |||
getModeList(index, modelPageNum.value, modelPageSize.value); | |||
getModeList( | |||
index, | |||
modelPageNum.value, | |||
modelPageSize.value, | |||
tabVideoType.value | |||
); | |||
} | |||
function changeTabVideoType(index) { | |||
modeList.value = []; | |||
@@ -456,7 +487,12 @@ function changeTabVideoType(index) { | |||
modelTabItemActive2.value = index; | |||
overLoadModel.value = false; | |||
tabVideoType.value = index; | |||
getModeList(tabSex.value, modelPageNum.value, modelPageSize.value); | |||
getModeList( | |||
tabSex.value, | |||
modelPageNum.value, | |||
modelPageSize.value, | |||
tabVideoType.value | |||
); | |||
} | |||
// watch(tabSex, (newVal, oldVal) => { | |||
// if (newVal == 0) { | |||
@@ -479,24 +515,16 @@ function changeTabVideoType(index) { | |||
// 触底刷新 | |||
async function loadMoreModel(params) { | |||
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 ---------------------------- | |||
@@ -711,7 +739,11 @@ async function reGetpersonBGIList() { | |||
overLoadpersonBG.value = true; | |||
await getpersonBGIList(); | |||
} | |||
// 点击列表中的背景图 | |||
const bjImgActive = ref(null); | |||
function selectBjImg(img) { | |||
bjImgActive.value = img.id; | |||
} | |||
//#endregion ---------------------------- | |||
//#region 素材 | |||
@@ -776,6 +808,87 @@ async function reGetpersonSCIList() { | |||
overLoadpersonSC.value = true; | |||
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 ---------------------------- | |||
//#region | |||
@@ -799,7 +912,7 @@ onMounted(async () => { | |||
voiceTotal(); //获取声音列表 | |||
// getSystemSCIList(); | |||
// getpersonBGIList(); | |||
await getModeList("", 1, 20); //获取模版列表 | |||
await getModeList(tabSex.value, 1, 20, tabVideoType.value); //获取模版列表 | |||
getpersonSCIList(); | |||
getSystemSCIList(); | |||
}); | |||
@@ -832,7 +945,7 @@ onMounted(async () => { | |||
left: 0px; | |||
width: 50%; | |||
height: 100%; | |||
padding: 30px; | |||
padding: 30px 30px 10px 30px; | |||
transition: all 0.3s; | |||
// background-color: #f1f2f6; | |||
background-color: #454545; | |||
@@ -917,7 +1030,7 @@ onMounted(async () => { | |||
flex-wrap: wrap; | |||
justify-content: flex-start; | |||
width: 100%; | |||
height: calc(100% - 180px); | |||
max-height: calc(100% - 180px); | |||
padding: 20px; | |||
border-radius: 20px; | |||
// background-color: #fff; | |||
@@ -967,6 +1080,14 @@ onMounted(async () => { | |||
max-width: 800px; | |||
max-height: 800px; | |||
} | |||
.EditPosition { | |||
position: absolute; | |||
top: 50%; | |||
left: 50%; | |||
transform: translate(-50%, -50%); | |||
max-width: 800px; | |||
max-height: 800px; | |||
} | |||
.btnBox { | |||
position: absolute; | |||
display: flex; | |||
@@ -1080,27 +1201,30 @@ onMounted(async () => { | |||
background-color: #e5e5e5; | |||
border-radius: 10px; | |||
cursor: pointer; | |||
img { | |||
border: rgba(0, 0, 0, 0) 2px solid; | |||
> img { | |||
padding: 10px; | |||
max-width: 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; | |||
z-index: 999; | |||
cursor: pointer; | |||
img { | |||
padding: 10px; | |||
max-width: 100%; | |||
max-height: 100%; | |||
} | |||
} | |||
} | |||
.ImgBorderActive { | |||
border: #7264f5 2px solid; | |||
} | |||
} | |||
} | |||
} | |||