@@ -13,166 +13,6 @@ export function modeListApi(sex, pageNum, pageSize) { | |||
}) | |||
} | |||
/** | |||
* @description 查询系统背景 | |||
* @returns pageNum,pageSize,videoType | |||
*/ | |||
export function systemBGIListApi(pageNum, pageSize, videoType) { | |||
return request({ | |||
url: `/api/materialMould/list?type=4&pageNum=${pageNum}&pageSize=${pageSize}&videoType=${videoType}`, | |||
method: 'get', | |||
}) | |||
} | |||
/** | |||
* @description 查询我上传的背景 | |||
* @returns pageNum,pageSize,videoType | |||
*/ | |||
export function personBGIListApi(pageNum, pageSize, videoType) { | |||
return request({ | |||
url: `/api/materialMould/userList?type=4&pageNum=${pageNum}&pageSize=${pageSize}&videoType=${videoType}`, | |||
method: 'get', | |||
}) | |||
} | |||
/** | |||
* @description 获取系统素材列表 | |||
* @param sex ,pageNum,pageSize | |||
* @returns data | |||
*/ | |||
export function systemSCIListApi(pageNum, pageSize) { | |||
return request({ | |||
url: `/api/materialMould/list?type=5&pageNum=${pageNum}&pageSize=${pageSize}`, | |||
method: 'get' | |||
}) | |||
} | |||
/** | |||
* @description 查询我上传的素材 | |||
* @returns pageNum,pageSize,videoType | |||
*/ | |||
export function personSCIListApi(pageNum, pageSize, videoType) { | |||
return request({ | |||
url: `/api/materialMould/userList?type=5&pageNum=${pageNum}&pageSize=${pageSize}&videoType=${videoType}`, | |||
method: 'get', | |||
}) | |||
} | |||
/** | |||
* @description 获取人脸列表 | |||
* @params pageNum, pageSize | |||
* @returns data | |||
*/ | |||
export function personPhotoList(pageNum, pageSize, sendType) { | |||
return request({ | |||
url: `api/personPhoto/list?pageNum=${pageNum}&pageSize=${pageSize}&sendType=${sendType}`, | |||
method: 'get' | |||
}) | |||
} | |||
/** | |||
* @description 获取人脸列表 | |||
* @params pageNum, pageSize | |||
* @returns data | |||
*/ | |||
export function personPhotoUserListList(pageNum, pageSize, sendType) { | |||
return request({ | |||
url: `api/personPhoto/userList?pageNum=${pageNum}&pageSize=${pageSize}&sendType=${sendType}`, | |||
method: 'get' | |||
}) | |||
} | |||
/** | |||
* @description 上传图片 | |||
* @params data | |||
* @returns data | |||
*/ | |||
export function awsImgUpload(data) { | |||
return request({ | |||
url: `/api/upload/awsImgUpload`, | |||
method: 'post', | |||
data | |||
}) | |||
} | |||
/** | |||
* @description 上传图片 | |||
* @params data | |||
* @returns data | |||
*/ | |||
export function saveImgApi(data) { | |||
return request({ | |||
url: `/api/personPhoto/save`, | |||
method: 'post', | |||
data | |||
}) | |||
} | |||
/** | |||
* @description 删除图片 | |||
* @params id | |||
* @returns data | |||
*/ | |||
export function delImgApi(id) { | |||
return request({ | |||
url: `api/personPhoto/del?id=${id}`, | |||
method: 'get', | |||
}) | |||
} | |||
/** | |||
* @description 上传视频 | |||
* @params data | |||
* @returns data | |||
*/ | |||
export function videoUpload(data) { | |||
return request({ | |||
url: `api/video/upload`, | |||
method: 'post', | |||
data | |||
}) | |||
} | |||
/** | |||
* @description 获取视频上传进度 | |||
* @params videoId | |||
* @returns data | |||
*/ | |||
export function uploadProgressApi(videoId) { | |||
return request({ | |||
url: `api/video/uploadProgress?videoId=${videoId}`, | |||
method: 'GET', | |||
}) | |||
} | |||
/** | |||
* @description 保存音频 | |||
* @params videoId | |||
* @returns data | |||
*/ | |||
export function saveAudioApi(data) { | |||
return request({ | |||
url: `/api/voiceMaterial/save`, | |||
method: 'post', | |||
data | |||
}) | |||
} | |||
/** | |||
* @description 获取语言 | |||
* @params | |||
@@ -198,71 +38,60 @@ export function chooseTypeApi(id) { | |||
} | |||
/** | |||
* @description 试听 | |||
* @params id | |||
* @returns data | |||
* @description 查询系统背景 &videoType=${videoType} | |||
* @returns pageNum,pageSize,videoType | |||
*/ | |||
// export function previewAudioApi(genTxt, voiceId, voiceStyle) { | |||
// return request({ | |||
// url: `api/voiceMould/preview?genTxt=${genTxt}&voiceId=${voiceId}&voiceStyle=${voiceStyle}`, | |||
// method: 'GET', | |||
// }) | |||
// } | |||
export function previewAudioApi(gen_txt, voice_id, voice_style) { | |||
export function systemBGIListApi(pageNum, pageSize, videoType) { | |||
return request({ | |||
url: `api/voiceMould/preview`, | |||
method: 'POST', | |||
data: { gen_txt, voice_id, voice_style } | |||
url: `/api/materialMould/list?type=4&pageNum=${pageNum}&pageSize=${pageSize}&videoType=${videoType}`, | |||
method: 'get', | |||
}) | |||
} | |||
/** | |||
* @description 保存生成视频数据 | |||
* @params data | |||
* @returns data | |||
* @description 查询我上传的背景 &videoType=${videoType} | |||
* @returns pageNum,pageSize,videoType | |||
*/ | |||
export function saveOrUpdateApi(data) { | |||
export function personBGIListApi(pageNum, pageSize, videoType) { | |||
return request({ | |||
url: `/api/userPhotoVideo/saveOrUpdate`, | |||
method: 'POST', | |||
data | |||
url: `/api/materialMould/userList?type=4&pageNum=${pageNum}&pageSize=${pageSize}&videoType=${videoType}`, | |||
method: 'get', | |||
}) | |||
} | |||
/** | |||
* @description 生成视频 | |||
* @params data | |||
* @description 获取系统素材列表 | |||
* @param pageNum,pageSize | |||
* @returns data | |||
*/ | |||
export function createVideoApi(data) { | |||
export function systemSCIListApi(pageNum, pageSize) { | |||
return request({ | |||
url: `/api/userPhotoVideo/createVideo`, | |||
method: 'POST', | |||
data | |||
url: `/api/materialMould/list?type=5&pageNum=${pageNum}&pageSize=${pageSize}`, | |||
method: 'get', | |||
}) | |||
} | |||
/** | |||
* @description 根据作品id查询作品信息 | |||
* @params data | |||
* @returns data | |||
* @description 查询我上传的素材 | |||
* @returns pageNum,pageSize, | |||
*/ | |||
export function findByIdApi(id) { | |||
export function personSCIListApi(pageNum, pageSize) { | |||
return request({ | |||
url: `/api/userPhotoVideo/findById?id=${id}`, | |||
url: `/api/materialMould/userList?type=5&pageNum=${pageNum}&pageSize=${pageSize}`, | |||
method: 'get', | |||
}) | |||
} | |||
/** | |||
* @description 获取音乐列表 | |||
* @params data | |||
* @description 试听 | |||
* @params id | |||
* @returns data | |||
*/ | |||
export function musicListApi() { | |||
export function previewAudioApi(gen_txt, voice_id, voice_style) { | |||
return request({ | |||
url: `api/userPhotoVideo/music`, | |||
method: 'get', | |||
url: `api/voiceMould/preview`, | |||
method: 'POST', | |||
data: { gen_txt, voice_id, voice_style } | |||
}) | |||
} | |||
} | |||
@@ -86,6 +86,38 @@ export function doUpdPassApi(loginParams) { | |||
}) | |||
} | |||
/** | |||
* @description 获取手机验证码 | |||
* @param {number} phone | |||
* @returns data | |||
*/ | |||
export function getSMSToLoginApi(phone) { | |||
return request({ | |||
url: `/api/user/sendLoginPhoneCode?phone=${phone}`, | |||
method: 'get' | |||
}) | |||
} | |||
/** | |||
* @description 短信验证码登录 | |||
* @param {object} loginParams (phone,code) | |||
* @returns data | |||
*/ | |||
export function loginByMSMApi(loginParams) { | |||
return request({ | |||
url: `/api/user/doLoginByPhone`, | |||
method: 'post', | |||
data: loginParams | |||
}) | |||
} | |||
/** | |||
/** | |||
@@ -35,7 +35,10 @@ export default { | |||
confirmNewPwd:'Confirm new password', | |||
confirm:'Confirm', | |||
gohome:'Back to home page', | |||
SMSCode:'SMS Code' | |||
SMSCode:'SMS Code', | |||
SMSLogin:'SMS login', | |||
pwsLogin:'Account password login', | |||
sendSMS:'Send SMS', | |||
}, | |||
// 导航栏国际化 | |||
@@ -71,7 +74,22 @@ export default { | |||
Aipicture:'Ai-generated pictures', | |||
AipictureTip:'Please customize your picture', | |||
chooseMusic:'Choose music', | |||
searchMusic:'Search music' | |||
searchMusic:'Search music', | |||
copywriting:'Copywriting', | |||
BackgroundImage:'Background Image', | |||
material:'Material', | |||
subtitles:'Subtitles', | |||
sex:"Sex", | |||
videoRatio:"Video Ratio", | |||
all:'All', | |||
male:'Male', | |||
female:'Female', | |||
landscape:'Landscape', | |||
portrait:'Portrait', | |||
systemBGI:'System background diagram', | |||
personBGI:'Person background diagram', | |||
systemMaterial:'System Material', | |||
personMaterial:'Person Material', | |||
}, | |||
// 我的视频 | |||
@@ -23,8 +23,10 @@ export default { | |||
loginBtn: "登 录", | |||
registerBtn: "注 册", | |||
verifyCode: "验证码", | |||
signIn: "已有账号?现在登录!", | |||
signUp: "没有账号?现在加入!", | |||
// signIn: "已有账号?现在登录!", | |||
// signUp: "没有账号?现在加入!", | |||
signIn: "立即登录", | |||
signUp: "立即注册", | |||
forgetPwd: "忘记密码", | |||
forgetPwdTitle:'忘记密码', | |||
SendEmail:'发送短信验证码', | |||
@@ -36,6 +38,9 @@ export default { | |||
confirm:'确定', | |||
gohome:'回到首页', | |||
SMSCode:'短信验证码', | |||
SMSLogin:'短信登录', | |||
pwsLogin:'账号密码登录', | |||
sendSMS:'发送短信验证码', | |||
}, | |||
// 导航栏国际化 | |||
@@ -72,6 +77,21 @@ export default { | |||
AipictureTip:'请自定义您的图片', | |||
chooseMusic:'选择音乐', | |||
searchMusic:'搜索音乐', | |||
copywriting:'文案', | |||
BackgroundImage:'背景', | |||
material:'素材', | |||
subtitles:'字幕', | |||
sex:"性别", | |||
videoRatio:"视频比例", | |||
all:'全部', | |||
male:'男性', | |||
female:'女性', | |||
landscape:'横屏', | |||
portrait:'竖屏', | |||
systemBGI:'系统背景', | |||
personBGI:'个人背景', | |||
systemMaterial:'系统素材', | |||
personMaterial:'个人素材', | |||
}, | |||
// 我的视频 | |||
@@ -21,68 +21,53 @@ | |||
> | |||
< | |||
</div> | |||
<!-- 箭头 --> | |||
<!-- <div | |||
v-if="showChooseModel && videoType" | |||
class="openChooseModel" | |||
@click="showChooseModel = false" | |||
> | |||
<img src="../../assets/img/arrowLeft.png" alt="" /> | |||
</div> | |||
<div | |||
v-if="!showChooseModel" | |||
class="closeChooseModel" | |||
@click="showChooseModel = true" | |||
> | |||
<img src="../../assets/img/arrowRight.png" alt="" /> | |||
</div> --> | |||
<!-- tab栏 --> | |||
<p>性别</p> | |||
<p>{{ $t("createVideo.sex") }}</p> | |||
<div class="tab" v-show="showChooseModel"> | |||
<div | |||
class="tabItem" | |||
:class="modelTabItemActive == 0 ? 'tabItemActive' : ''" | |||
@click="changeTabSex(0)" | |||
> | |||
全部 | |||
{{ $t("createVideo.all") }} | |||
</div> | |||
<div | |||
class="tabItem" | |||
:class="modelTabItemActive == 1 ? 'tabItemActive' : ''" | |||
@click="changeTabSex(1)" | |||
> | |||
男性 | |||
{{ $t("createVideo.male") }} | |||
</div> | |||
<div | |||
class="tabItem" | |||
:class="modelTabItemActive == 2 ? 'tabItemActive' : ''" | |||
@click="changeTabSex(2)" | |||
> | |||
女性 | |||
{{ $t("createVideo.female") }} | |||
</div> | |||
</div> | |||
<p>视频比例</p> | |||
<p>{{ $t("createVideo.videoRatio") }}</p> | |||
<div class="tab" v-show="showChooseModel"> | |||
<div | |||
class="tabItem" | |||
:class="modelTabItemActive2 == 0 ? 'tabItemActive' : ''" | |||
@click="changeTabVideoType(0)" | |||
> | |||
全部 | |||
{{ $t("createVideo.all") }} | |||
</div> | |||
<div | |||
class="tabItem" | |||
:class="modelTabItemActive2 == 2 ? 'tabItemActive' : ''" | |||
@click="changeTabVideoType(2)" | |||
> | |||
横屏 | |||
{{ $t("createVideo.landscape") }} | |||
</div> | |||
<div | |||
class="tabItem" | |||
:class="modelTabItemActive2 == 1 ? 'tabItemActive' : ''" | |||
@click="changeTabVideoType(1)" | |||
> | |||
竖屏 | |||
{{ $t("createVideo.portrait") }} | |||
</div> | |||
</div> | |||
<!-- 模版列表 --> | |||
@@ -124,28 +109,28 @@ | |||
:class="tabItemActive == 1 ? 'tabItemActive' : ''" | |||
@click="tabItemActive = 1" | |||
> | |||
文案 | |||
{{ $t("createVideo.copywriting") }} | |||
</div> | |||
<div | |||
class="tabItem" | |||
:class="tabItemActive == 2 ? 'tabItemActive' : ''" | |||
@click="tabItemActive = 2" | |||
> | |||
背景 | |||
{{ $t("createVideo.BackgroundImage") }} | |||
</div> | |||
<div | |||
class="tabItem" | |||
:class="tabItemActive == 3 ? 'tabItemActive' : ''" | |||
@click="tabItemActive = 3" | |||
> | |||
素材 | |||
{{ $t("createVideo.material") }} | |||
</div> | |||
<div | |||
class="tabItem" | |||
:class="tabItemActive == 4 ? 'tabItemActive' : ''" | |||
@click="tabItemActive = 4" | |||
> | |||
字幕 | |||
{{ $t("createVideo.subtitles") }} | |||
</div> | |||
</div> | |||
<!-- 文案 只能使用v-if,不能使用v-show--> | |||
@@ -171,13 +156,13 @@ | |||
type="textarea" | |||
:placeholder="$t('createVideo.aiText')" | |||
/> | |||
<span | |||
class="pointer" | |||
@click="getPreviewAudio" | |||
style="margin-right: 10px; font-size: 20px" | |||
>🔊</span | |||
class="pointer" | |||
@click="insertIcon" | |||
>🕗</span | |||
> | |||
<span class="pointer" @click="insertIcon">🕗</span> | |||
</div> | |||
<p>{{ $t("createVideo.languages") }}</p> | |||
<!-- 语言 --> | |||
@@ -190,7 +175,7 @@ | |||
<el-option | |||
v-for="item in languageOptions" | |||
:key="item.value" | |||
:label="item.name" | |||
:label="lanChange == 'zh-cn' ? item.chineseName : item.name" | |||
:value="item.id" | |||
> | |||
<img | |||
@@ -198,7 +183,9 @@ | |||
alt="" | |||
style="width: 20px; margin-right: 10px; vertical-align: text-top" | |||
/> | |||
<span style="line-height: 20px">{{ item.name }}</span> | |||
<span style="line-height: 20px">{{ | |||
lanChange == "zh-cn" ? item.chineseName : item.name | |||
}}</span> | |||
</el-option> | |||
</el-select> | |||
<p>{{ $t("createVideo.voices") }}</p> | |||
@@ -213,7 +200,13 @@ | |||
<el-option | |||
v-for="item in soundOptions" | |||
:key="item.value" | |||
:label="item.displayName" | |||
:label=" | |||
(lanChange == 'zh-cn' | |||
? item.displayName + ` (${item.sex == 1 ? '男' : '女'})` | |||
: item.localName + | |||
` (${item.sex == 1 ? 'male' : 'female'})`) + | |||
returnAge(item.ageType) | |||
" | |||
:value="item.id" | |||
/> | |||
</el-select> | |||
@@ -227,10 +220,19 @@ | |||
> | |||
<el-option | |||
v-for="item in soundStyleOptions" | |||
:key="item" | |||
:label="item" | |||
:value="item" | |||
/> | |||
:key="item.name" | |||
:label="lanChange == 'zh-cn' ? item.name : item.engName" | |||
:value="item.name" | |||
> | |||
<div style="padding: 0 20px"> | |||
{{ lanChange == "zh-cn" ? item.name : item.engName }} | |||
<span | |||
style="float: right; cursor: pointer" | |||
@click.stop="ListenVoices(item.url)" | |||
>🔊</span | |||
> | |||
</div> | |||
</el-option> | |||
</el-select> | |||
</div> | |||
<!-- 背景 --> | |||
@@ -241,18 +243,19 @@ | |||
:class="bjTabItemActive == 1 ? 'tabItemActive' : ''" | |||
@click="bjTabItemActive = 1" | |||
> | |||
系统背景 | |||
{{ $t("createVideo.systemBGI") }} | |||
</div> | |||
<div | |||
class="tabItem" | |||
:class="bjTabItemActive == 2 ? 'tabItemActive' : ''" | |||
@click="bjTabItemActive = 2" | |||
> | |||
个人背景 | |||
{{ $t("createVideo.personBGI") }} | |||
</div> | |||
</div> | |||
<!-- 背景图片展示 --> | |||
<!-- 系统背景图片展示 --> | |||
<div | |||
v-if="bjTabItemActive == 1" | |||
class="bjSystemBox" | |||
v-infinite-scroll="loadMoreSystemBGI" | |||
:infinite-scroll-disabled="overLoadSystemBG" | |||
@@ -265,6 +268,21 @@ | |||
<img class="boxCentreImg" :src="item.material" alt="" /> | |||
</div> | |||
</div> | |||
<!-- 个人背景图片展示 --> | |||
<div | |||
v-if="bjTabItemActive == 3" | |||
class="bjSystemBox" | |||
v-infinite-scroll="loadMorePersonBGI" | |||
:infinite-scroll-disabled="overLoadpersonBG" | |||
> | |||
<div | |||
class="bjSystemBoxItem" | |||
v-for="item in personBGIList" | |||
:key="item.id" | |||
> | |||
<img class="boxCentreImg" :src="item.material" alt="" /> | |||
</div> | |||
</div> | |||
</div> | |||
<!-- 素材 --> | |||
<div v-if="tabItemActive == 3" class="tabContent tab3"> | |||
@@ -274,18 +292,19 @@ | |||
:class="scTabItemActive == 1 ? 'tabItemActive' : ''" | |||
@click="scTabItemActive = 1" | |||
> | |||
系统素材 | |||
{{ $t("createVideo.systemMaterial") }} | |||
</div> | |||
<div | |||
class="tabItem" | |||
:class="scTabItemActive == 2 ? 'tabItemActive' : ''" | |||
@click="scTabItemActive = 2" | |||
> | |||
个人素材 | |||
{{ $t("createVideo.personMaterial") }} | |||
</div> | |||
</div> | |||
<!-- 素材图片展示 --> | |||
<!-- 系统素材图片展示 --> | |||
<div | |||
v-if="scTabItemActive == 1" | |||
class="bjSystemBox" | |||
v-infinite-scroll="loadMoreSystemSCI" | |||
:infinite-scroll-disabled="overLoadSystemSC" | |||
@@ -298,6 +317,21 @@ | |||
<img class="boxCentreImg" :src="item.material" alt="" /> | |||
</div> | |||
</div> | |||
<!-- 个人素材图片展示 --> | |||
<div | |||
v-if="scTabItemActive == 3" | |||
class="bjSystemBox" | |||
v-infinite-scroll="loadMorePersonSCI" | |||
:infinite-scroll-disabled="overLoadpersonSC" | |||
> | |||
<div | |||
class="bjSystemBoxItem" | |||
v-for="item in personSCIList" | |||
:key="item.id" | |||
> | |||
<img class="boxCentreImg" :src="item.material" alt="" /> | |||
</div> | |||
</div> | |||
</div> | |||
<!-- 字幕 --> | |||
<div v-if="tabItemActive == 4" class="tabContent"></div> | |||
@@ -332,6 +366,11 @@ const route = useRoute(); | |||
const router = useRouter(); | |||
const { locale } = useI18n(); | |||
const lanChange = ref(locale); | |||
// ElMessage.error( | |||
// lanChange.value == "zh-cn" | |||
// ? `您还没有输入文案` | |||
// : `You have not entered the copy yet` | |||
// ); | |||
const AccessToken = localStorage.getItem("AccessToken"); // 判断有没有登录 | |||
@@ -462,16 +501,7 @@ const language = ref(""); //选择的语言 | |||
const sound = ref(""); // 选择的声音 | |||
const soundStyle = ref(""); //选择的风格 | |||
// 语言下拉框内容 | |||
const languageOptions = ref([ | |||
{ | |||
id: "0", | |||
name: "中文", | |||
}, | |||
{ | |||
id: "1", | |||
name: "English", | |||
}, | |||
]); | |||
const languageOptions = ref([]); | |||
async function voiceTotal() { | |||
const res = await voiceTotalApi(); | |||
languageOptions.value = res.data; | |||
@@ -531,13 +561,58 @@ async function getPreviewAudio() { | |||
ElMessage.error(error); | |||
} | |||
} | |||
// 根据ageType返回年龄 | |||
function returnAge(ageType) { | |||
if (!ageType) { | |||
return ""; | |||
} else if (ageType == 1) { | |||
if (lanChange.value == "zh-cn") { | |||
return " 儿童"; | |||
} else { | |||
return "Child"; | |||
} | |||
} else if (ageType == 2) { | |||
if (lanChange.value == "zh-cn") { | |||
return " 少年"; | |||
} else { | |||
return "Teen"; | |||
} | |||
} else if (ageType == 3) { | |||
if (lanChange.value == "zh-cn") { | |||
return " 年轻"; | |||
} else { | |||
return "YoungAdult"; | |||
} | |||
} else if (ageType == 4) { | |||
if (lanChange.value == "zh-cn") { | |||
return " 中年"; | |||
} else { | |||
return "OlderAdult"; | |||
} | |||
} else if (ageType == 5) { | |||
if (lanChange.value == "zh-cn") { | |||
return " 老年"; | |||
} else { | |||
return "Senior"; | |||
} | |||
} | |||
} | |||
// 新的试听 | |||
function ListenVoices(url) { | |||
previewAudioUrl.value = url; | |||
let audioA = document.getElementById("audio"); | |||
audioA.addEventListener("loadedmetadata", async () => { | |||
audioA.muted = false; // 将 muted 属性设置为 false | |||
await audioA.play(); | |||
}); | |||
} | |||
//#endregion ---------------------------- | |||
//#region 背景 | |||
const bjTabItemActive = ref(1); //系统或个人tab高亮 | |||
const systemBGIList = ref([]); //系统背景列表 | |||
const systemBGPageNum = ref(1); //系统背景页数 | |||
const overLoadSystemBG = ref(true); | |||
const overLoadSystemBG = ref(true); //禁止系统背景触底刷新 | |||
async function getSystemBGIList() { | |||
const res = await systemBGIListApi( | |||
systemBGPageNum.value, | |||
@@ -561,19 +636,11 @@ async function loadMoreSystemBGI() { | |||
systemBGPageNum.value = modelPageNum.value - 1; | |||
} | |||
} | |||
// 当横屏竖屏改变时,重新获取背景列表 | |||
watch( | |||
() => videoType, | |||
(newValue, oldValue) => { | |||
systemBGPageNum.value = 1; | |||
getSystemBGIList(); | |||
}, | |||
{ deep: true } | |||
); | |||
// 个人背景 | |||
const personBGIList = ref([]); //系统背景列表 | |||
const personBGPageNum = ref(1); //系统背景页数 | |||
const overLoadpersonBG = ref(true); | |||
const personBGIList = ref([]); //个人背景列表 | |||
const personBGPageNum = ref(1); //个人背景页数 | |||
const overLoadpersonBG = ref(true); //禁止个人背景触底刷新 | |||
async function getpersonBGIList() { | |||
const res = await personBGIListApi( | |||
personBGPageNum.value, | |||
@@ -583,7 +650,7 @@ async function getpersonBGIList() { | |||
personBGIList.value = res.data.list; | |||
overLoadpersonBG.value = false; | |||
} | |||
// 加载更多系统背景图 | |||
// 加载更多个人背景图 | |||
async function loadMorePersonBGI() { | |||
personBGPageNum.value += 1; | |||
const res = await personBGIListApi( | |||
@@ -597,13 +664,26 @@ async function loadMorePersonBGI() { | |||
personBGPageNum.value = modelPageNum.value - 1; | |||
} | |||
} | |||
// 当横屏竖屏改变时,重新获取背景列表,且还原页数和禁止刷新状态 | |||
watch( | |||
() => videoType, | |||
async (newValue, oldValue) => { | |||
systemBGPageNum.value = 1; | |||
personBGPageNum.value = 1; | |||
overLoadSystemBG.value = true; | |||
overLoadpersonBG.value = true; | |||
await getSystemBGIList(); | |||
await getpersonBGIList(); | |||
}, | |||
{ deep: true } | |||
); | |||
//#endregion ---------------------------- | |||
//#region 素材 | |||
const scTabItemActive = ref(1); //系统或个人tab高亮 | |||
const systemSCIList = ref([]); //系统素材列表 | |||
const systemSCPageNum = ref(1); //系统素材页数 | |||
const overLoadSystemSC = ref(true); | |||
const overLoadSystemSC = ref(true); //禁止系统素材触底刷新 | |||
async function getSystemSCIList() { | |||
const res = await systemSCIListApi( | |||
systemSCPageNum.value, | |||
@@ -629,9 +709,9 @@ async function loadMoreSystemSCI() { | |||
} | |||
// 个人素材 | |||
const personSCIList = ref([]); //系统素材列表 | |||
const personSCPageNum = ref(1); //系统素材页数 | |||
const overLoadpersonSC = ref(true); | |||
const personSCIList = ref([]); //个人素材列表 | |||
const personSCPageNum = ref(1); //个人素材页数 | |||
const overLoadpersonSC = ref(true); //禁止个人素材触底刷新 | |||
async function getpersonSCIList() { | |||
const res = await personSCIListApi( | |||
personSCPageNum.value, | |||
@@ -675,9 +755,12 @@ const string = "createVideo.typeScript"; | |||
const t = globalProperties.$t(string); | |||
onMounted(async () => { | |||
voiceTotal(); | |||
voiceTotal(); //获取声音列表 | |||
// getSystemSCIList(); | |||
// getpersonBGIList(); | |||
await getModeList("", 1, 20); //获取模版列表 | |||
getpersonSCIList(); | |||
getSystemSCIList(); | |||
await getModeList("", 1, 20); | |||
}); | |||
</script> | |||
@@ -706,26 +789,14 @@ onMounted(async () => { | |||
position: absolute; | |||
top: 0px; | |||
left: 0px; | |||
width: 30%; | |||
width: 50%; | |||
height: 100%; | |||
padding: 30px; | |||
transition: all 0.3s; | |||
// background-color: #f1f2f6; | |||
background-color: #454545; | |||
z-index: 9; | |||
.openChooseModel, | |||
.closeChooseModel { | |||
position: absolute; | |||
top: 50%; | |||
width: 50px; | |||
height: 20px; | |||
z-index: 999; | |||
cursor: pointer; | |||
img { | |||
width: 100%; | |||
height: 100%; | |||
} | |||
} | |||
// 伸缩按钮 | |||
.shrinkBtn { | |||
position: absolute; | |||
@@ -774,6 +845,7 @@ onMounted(async () => { | |||
margin: auto; | |||
margin-top: 10px; | |||
display: flex; | |||
justify-content: space-between; | |||
width: 100%; | |||
height: 40px; | |||
// background-color: #fff; | |||
@@ -781,14 +853,16 @@ onMounted(async () => { | |||
border-radius: 25px; | |||
color: #b9b9b9; | |||
.tabItem { | |||
flex: 1; | |||
font-size: 16px; | |||
// flex: 1; | |||
width: 30%; | |||
font-size: 14px; | |||
text-align: center; | |||
line-height: 40px; | |||
border-radius: 15px; | |||
transition: all 0.3s; | |||
cursor: pointer; | |||
margin: 0 10px; | |||
// margin: 0 10px; | |||
// padding: 0 5px; | |||
background-color: #000; | |||
} | |||
.tabItemActive { | |||
@@ -812,9 +886,10 @@ onMounted(async () => { | |||
position: relative; | |||
padding: 20px; | |||
width: 45%; | |||
height: 110px; | |||
margin: 0 10px 10px 0; | |||
height: 190px; | |||
margin: 0 20px 20px 0; | |||
border-radius: 15px; | |||
// padding: 20px; | |||
// background: rgba(0, 0, 0, 0.1); | |||
background-color: #fff; | |||
z-index: 2; | |||
@@ -114,6 +114,11 @@ | |||
<div style="margin-bottom: 5px" @click="loginFlag(2)"> | |||
<span class="join">{{ $t("login.signUp") }}</span> | |||
</div> | |||
<div style="margin-bottom: 5px"> | |||
<span class="join" @click="loginFlag(7)">{{ | |||
$t("login.SMSLogin") | |||
}}</span> | |||
</div> | |||
<div> | |||
<span class="join" @click="loginFlag(3)">{{ | |||
$t("login.forgetPwd") | |||
@@ -604,6 +609,103 @@ | |||
</div> | |||
</div> | |||
</el-form> | |||
<!-- 短信登录 isLogin == 7--> | |||
<el-form | |||
v-if="isLogin == 7" | |||
ref="loginFormRef" | |||
:model="loginData7" | |||
:rules="loginRules" | |||
class="login-form" | |||
> | |||
<div class="flex text-white items-center"> | |||
<span class="flex-1 text-center">{{ | |||
$t("login.title") + " " + $t("login.login") | |||
}}</span> | |||
<el-tooltip | |||
class="box-item" | |||
effect="dark" | |||
:content="$t('navbar.LanguageChange')" | |||
placement="top-start" | |||
> | |||
<lang-select class="navItem" style="color: #ffffff" /> | |||
</el-tooltip> | |||
</div> | |||
<el-form-item prop="email"> | |||
<div class="text-white"> | |||
<svg-icon icon-class="user" /> | |||
</div> | |||
<el-input | |||
class="flex-1" | |||
ref="email" | |||
size="large" | |||
v-model="loginData7.email" | |||
:placeholder="$t('login.email')" | |||
name="email" | |||
/> | |||
</el-form-item> | |||
<!-- 验证码 --> | |||
<el-form-item prop="verifyCode"> | |||
<span class="text-white"> | |||
<svg-icon icon-class="verify_code" /> | |||
</span> | |||
<el-input | |||
v-model="loginData7.verifyCode" | |||
auto-complete="off" | |||
:placeholder="$t('login.SMSLogin')" | |||
class="flex-1" | |||
/> | |||
<span class="captcha"> | |||
<div v-if="SMSTimeOut == 0" @click="getSMSToLogin" class="sendSMSBtn"> | |||
{{ $t("login.sendSMS") }} | |||
</div> | |||
<div v-if="SMSTimeOut != 0" class="sendSMSBtn">{{ SMSTimeOut }}s</div> | |||
</span> | |||
</el-form-item> | |||
<el-button | |||
size="default" | |||
:loading="loading" | |||
type="primary" | |||
class="loginBtn" | |||
@click.prevent="handleLoginBySMS" | |||
> | |||
<el-icon | |||
v-if="isLogining" | |||
style="margin-right: 10px" | |||
class="is-loading" | |||
> | |||
<svg | |||
viewBox="0 0 1024 1024" | |||
xmlns="http://www.w3.org/2000/svg" | |||
data-v-ea893728="" | |||
> | |||
<path | |||
fill="currentColor" | |||
d="M512 64a32 32 0 0 1 32 32v192a32 32 0 0 1-64 0V96a32 32 0 0 1 32-32zm0 640a32 32 0 0 1 32 32v192a32 32 0 1 1-64 0V736a32 32 0 0 1 32-32zm448-192a32 32 0 0 1-32 32H736a32 32 0 1 1 0-64h192a32 32 0 0 1 32 32zm-640 0a32 32 0 0 1-32 32H96a32 32 0 0 1 0-64h192a32 32 0 0 1 32 32zM195.2 195.2a32 32 0 0 1 45.248 0L376.32 331.008a32 32 0 0 1-45.248 45.248L195.2 240.448a32 32 0 0 1 0-45.248zm452.544 452.544a32 32 0 0 1 45.248 0L828.8 783.552a32 32 0 0 1-45.248 45.248L647.744 692.992a32 32 0 0 1 0-45.248zM828.8 195.264a32 32 0 0 1 0 45.184L692.992 376.32a32 32 0 0 1-45.248-45.248l135.808-135.808a32 32 0 0 1 45.248 0zm-452.544 452.48a32 32 0 0 1 0 45.248L240.448 828.8a32 32 0 0 1-45.248-45.248l135.808-135.808a32 32 0 0 1 45.248 0z" | |||
></path> | |||
</svg> | |||
</el-icon> | |||
{{ $t("login.loginBtn") }} | |||
</el-button> | |||
<div :class="currentLan == 'zh-cn' ? 'bottomBtnCN' : 'bottomBtnEN'"> | |||
<div style="margin-bottom: 5px" @click="loginFlag(2)"> | |||
<span class="join">{{ $t("login.signUp") }}</span> | |||
</div> | |||
<div style="margin-bottom: 5px"> | |||
<span class="join" @click="loginFlag(1)">{{ | |||
$t("login.pwsLogin") | |||
}}</span> | |||
</div> | |||
<div> | |||
<span class="join" @click="loginFlag(3)">{{ | |||
$t("login.forgetPwd") | |||
}}</span> | |||
</div> | |||
</div> | |||
</el-form> | |||
</div> | |||
</template> | |||
@@ -619,6 +721,8 @@ import { | |||
doUpdPassApi, | |||
resetPwdEmailApi, | |||
resetPwdFormApi, | |||
getSMSToLoginApi, | |||
loginByMSMApi, | |||
} from "@/apis/login"; | |||
import axios from "axios"; | |||
// 状态管理依赖 | |||
@@ -695,7 +799,10 @@ const loginData5 = ref({ | |||
const loginData6 = ref({ | |||
SMSCode: "", | |||
}); | |||
const loginData7 = ref({ | |||
email: "", | |||
verifyCode: "", | |||
}); | |||
const loginRules = ref({ | |||
email: [ | |||
{ | |||
@@ -1038,6 +1145,87 @@ function resetPwdForm() { | |||
} | |||
//#endregion -------------------------- | |||
//#region 短信登录 表单7 | |||
// 获取验证码 | |||
const SMSTimeOut = ref(0); | |||
async function getSMSToLogin() { | |||
let phoneReg = /^[1][3-9]\d{9}$/; | |||
let phoneValide = phoneReg.test(loginData7.value.email); | |||
if (!phoneValide) { | |||
ElMessage.error( | |||
currentLan.value == "zh-cn" | |||
? "请输入正确的手机号!" | |||
: "Please enter the correct phone number!" | |||
); | |||
return; | |||
} | |||
try { | |||
await getSMSToLoginApi(Number(loginData7.value.email)).then((res) => { | |||
ElMessage.success( | |||
currentLan.value == "zh-cn" | |||
? "短信验证码发送成功!" | |||
: "SMS verification code sent successfully!" | |||
); | |||
SMSTimeOut.value = 60; | |||
const timer = setInterval(() => { | |||
if (SMSTimeOut.value != 0) { | |||
SMSTimeOut.value--; | |||
} else { | |||
clearInterval(timer); | |||
} | |||
}, 1000); | |||
}); | |||
} catch (error: any) { | |||
ElMessage.error(error.message); | |||
} | |||
} | |||
// 登录行为 | |||
function handleLoginBySMS() { | |||
loginFormRef.value.validate((val: any) => { | |||
if (val) { | |||
const data = { | |||
phone: loginData7.value.email, | |||
code: loginData7.value.verifyCode, | |||
}; | |||
isLogining.value = true; | |||
doLoginByMSM(data); | |||
} else { | |||
const msg = | |||
currentLan.value == "zh-cn" | |||
? "请检查信息格式!" | |||
: "Please check the format !"; | |||
ElMessage.error(msg); | |||
return; | |||
} | |||
}); | |||
} | |||
async function doLoginByMSM(data: any) { | |||
const msg = | |||
currentLan.value == "zh-cn" ? "登录成功!" : "Welcome to Metavatar!"; | |||
await loginByMSMApi(data) | |||
.then((res: any) => { | |||
console.log(res, "res"); | |||
localStorage.setItem("AccessToken", res.data.token); | |||
ElMessage.success(msg); | |||
router.push("/createVideo"); | |||
// 注册成功将账号密码保存到本地 | |||
saveInfo(data); | |||
isLogining.value = false; | |||
userInfoPinia.getUserInfo(); //保存邮箱到pinia | |||
}) | |||
.catch((err) => { | |||
console.log(err, "err"); | |||
// 登录失败刷新验证码 | |||
getCode(); | |||
ElMessage.error(err.message); | |||
isLogining.value = false; | |||
if (err.code == 2112) { | |||
reSendEmail(data.email); | |||
} | |||
}); | |||
} | |||
//#endregion -------------------------- | |||
function getCode() { | |||
showCodeImg.value = false; | |||
axios({ | |||
@@ -1197,6 +1385,14 @@ onMounted(() => { | |||
height: 48px; | |||
cursor: pointer; | |||
} | |||
.sendSMSBtn { | |||
width: 120px; | |||
height: 48px; | |||
line-height: 48px; | |||
color: #fff; | |||
text-align: center; | |||
background: linear-gradient(270deg, #4b61dc, #15d1b8); | |||
} | |||
} | |||
&:hover { | |||
backdrop-filter: blur(7px); | |||
@@ -12,9 +12,9 @@ | |||
<!-- <div class="other"></div> --> | |||
</canvas> | |||
<img | |||
style="display: none; width: 200px; height: 100px" | |||
style="display: none; width: 200px; height: 200px" | |||
id="bjImg" | |||
src="../../assets/img/lake.jpg" | |||
src="../../assets/img/star.png" | |||
alt="" | |||
/> | |||
</div> | |||
@@ -29,6 +29,7 @@ | |||
<script setup> | |||
//#region 导入 | |||
import { fabric } from "fabric"; | |||
//#endregion --------------------------- | |||
//#region 画布交互 | |||
@@ -38,23 +39,16 @@ let canvas = new fabric.Canvas("canvas"); | |||
onMounted(() => { | |||
let canvas = new fabric.Canvas("canvas"); | |||
// let rect = new fabric.Rect({ | |||
// left: 0, //距离画布左侧的距离,单位是像素 | |||
// top: 0, //距离画布上边的距离 | |||
// fill: "red", //填充的颜色 | |||
// width: 50, //方形的宽度 | |||
// height: 50, //方形的高度 | |||
// }); | |||
// canvas.add(rect); | |||
let imgElement = document.getElementById("bjImg"); //声明我们的图片 | |||
let imgInstance = new fabric.Image(imgElement, { | |||
//设置图片位置和样子 | |||
left: 100, | |||
top: 100, | |||
width: 200, | |||
height: 100, | |||
angle: 30, //设置图形顺时针旋转角度 | |||
// left: 100, | |||
// top: 100, | |||
// width: 400, | |||
// height: 200, | |||
// angle: 30, //设置图形顺时针旋转角度 | |||
}); | |||
console.log(imgInstance); | |||
canvas.add(imgInstance); | |||
// canvas.on("mouse:up", function (options) { | |||
// console.log(options.e.clientX, options.e.clientY); | |||