diff --git a/src/apis/createVideo.js b/src/apis/createVideo.js index 501fb02..a89b02b 100644 --- a/src/apis/createVideo.js +++ b/src/apis/createVideo.js @@ -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 } }) -} \ No newline at end of file +} + diff --git a/src/apis/login.js b/src/apis/login.js index 4131a63..bcea05c 100644 --- a/src/apis/login.js +++ b/src/apis/login.js @@ -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 + }) +} + + + + + + + + /** /** diff --git a/src/lang/package/en.ts b/src/lang/package/en.ts index 25115e5..72451b1 100644 --- a/src/lang/package/en.ts +++ b/src/lang/package/en.ts @@ -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', }, // 我的视频 diff --git a/src/lang/package/zh-cn.ts b/src/lang/package/zh-cn.ts index d100b25..1d76180 100644 --- a/src/lang/package/zh-cn.ts +++ b/src/lang/package/zh-cn.ts @@ -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:'个人素材', }, // 我的视频 diff --git a/src/views/createVideo/index.vue b/src/views/createVideo/index.vue index 6c042b6..870f664 100644 --- a/src/views/createVideo/index.vue +++ b/src/views/createVideo/index.vue @@ -21,68 +21,53 @@ > < - - -

性别

+

{{ $t("createVideo.sex") }}

- 全部 + {{ $t("createVideo.all") }}
- 男性 + {{ $t("createVideo.male") }}
- 女性 + {{ $t("createVideo.female") }}
-

视频比例

+

{{ $t("createVideo.videoRatio") }}

- 全部 + {{ $t("createVideo.all") }}
- 横屏 + {{ $t("createVideo.landscape") }}
- 竖屏 + {{ $t("createVideo.portrait") }}
@@ -124,28 +109,28 @@ :class="tabItemActive == 1 ? 'tabItemActive' : ''" @click="tabItemActive = 1" > - 文案 + {{ $t("createVideo.copywriting") }}
- 背景 + {{ $t("createVideo.BackgroundImage") }}
- 素材 + {{ $t("createVideo.material") }}
- 字幕 + {{ $t("createVideo.subtitles") }}
@@ -171,13 +156,13 @@ type="textarea" :placeholder="$t('createVideo.aiText')" /> + 🔊🕗 - 🕗

{{ $t("createVideo.languages") }}

@@ -190,7 +175,7 @@ - {{ item.name }} + {{ + lanChange == "zh-cn" ? item.chineseName : item.name + }}

{{ $t("createVideo.voices") }}

@@ -213,7 +200,13 @@ @@ -227,10 +220,19 @@ > + :key="item.name" + :label="lanChange == 'zh-cn' ? item.name : item.engName" + :value="item.name" + > +
+ {{ lanChange == "zh-cn" ? item.name : item.engName }} + 🔊 +
+
@@ -241,18 +243,19 @@ :class="bjTabItemActive == 1 ? 'tabItemActive' : ''" @click="bjTabItemActive = 1" > - 系统背景 + {{ $t("createVideo.systemBGI") }}
- 个人背景 + {{ $t("createVideo.personBGI") }}
- +
+ +
+
+ +
+
@@ -274,18 +292,19 @@ :class="scTabItemActive == 1 ? 'tabItemActive' : ''" @click="scTabItemActive = 1" > - 系统素材 + {{ $t("createVideo.systemMaterial") }}
- 个人素材 + {{ $t("createVideo.personMaterial") }}
- +
+ +
+
+ +
+
@@ -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); }); @@ -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; diff --git a/src/views/login/index.vue b/src/views/login/index.vue index c0b025e..ea27aa5 100644 --- a/src/views/login/index.vue +++ b/src/views/login/index.vue @@ -114,6 +114,11 @@
{{ $t("login.signUp") }}
+
+ {{ + $t("login.SMSLogin") + }} +
{{ $t("login.forgetPwd") @@ -604,6 +609,103 @@
+ + +
+ {{ + $t("login.title") + " " + $t("login.login") + }} + + + +
+ + +
+ +
+ +
+ + + + + + + + +
+ {{ $t("login.sendSMS") }} +
+
{{ SMSTimeOut }}s
+
+
+ + + + + + + + {{ $t("login.loginBtn") }} + + +
+
+ {{ $t("login.signUp") }} +
+
+ {{ + $t("login.pwsLogin") + }} +
+
+ {{ + $t("login.forgetPwd") + }} +
+
+
@@ -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); diff --git a/src/views/moveImg/index.vue b/src/views/moveImg/index.vue index e6977ba..2aeddb8 100644 --- a/src/views/moveImg/index.vue +++ b/src/views/moveImg/index.vue @@ -12,9 +12,9 @@ @@ -29,6 +29,7 @@