From 7eecaf8267fa29c878a870b3566fbb0ab3859921 Mon Sep 17 00:00:00 2001 From: congzc Date: Fri, 2 Jun 2023 13:44:05 +0800 Subject: [PATCH] 1 --- package.json | 1 + src/apis/createVideo.js | 41 +++++++++++++++++++++++++++++++++ src/store/index.ts | 3 +++ src/store/modules/userInfo.js | 5 +++- src/views/createVideo/index.vue | 27 ++++++++++++++++++---- yarn.lock | 5 ++++ 6 files changed, 77 insertions(+), 5 deletions(-) diff --git a/package.json b/package.json index 9168068..3846bf1 100644 --- a/package.json +++ b/package.json @@ -26,6 +26,7 @@ "path-browserify": "^1.0.1", "path-to-regexp": "^6.2.0", "pinia": "^2.0.33", + "pinia-plugin-persistedstate": "^3.1.0", "screenfull": "^6.0.0", "vue": "^3.2.45", "vue-i18n": "9", diff --git a/src/apis/createVideo.js b/src/apis/createVideo.js index eeeb9ee..37502fe 100644 --- a/src/apis/createVideo.js +++ b/src/apis/createVideo.js @@ -62,6 +62,19 @@ export function uploadProgressApi(videoId) { }) } +/** + * @description 保存音频 + * @params videoId + * @returns data + */ +export function saveAudioApi(videoId) { + return request({ + url: `/api/voiceMaterial/save?videoId=${videoId}`, + method: 'GET', + }) +} + + /** * @description 获取语言 * @params @@ -84,4 +97,32 @@ export function chooseTypeApi(id) { url: `api/voiceMould/chooseType/?id=${id}`, method: 'GET', }) +} + + + +/** + * @description 保存生成视频数据 + * @params data + * @returns data + */ +export function userPhotoVideoApi(data) { + return request({ + url: `/api/userPhotoVideo`, + method: 'POST', + data + }) +} + +/** + * @description 生成视频 + * @params data + * @returns data + */ +export function createVideoApi(data) { + return request({ + url: `/api/userPhotoVideo/createVideo`, + method: 'POST', + data + }) } \ No newline at end of file diff --git a/src/store/index.ts b/src/store/index.ts index ceb4219..e4e5a6b 100644 --- a/src/store/index.ts +++ b/src/store/index.ts @@ -1,8 +1,11 @@ import type { App } from 'vue'; import { createPinia } from 'pinia'; +import piniaPluginPersistedstate from 'pinia-plugin-persistedstate' const store = createPinia(); +store.use(piniaPluginPersistedstate ) + // 全局注册 store export function setupStore(app: App) { app.use(store); diff --git a/src/store/modules/userInfo.js b/src/store/modules/userInfo.js index aeb506f..db02748 100644 --- a/src/store/modules/userInfo.js +++ b/src/store/modules/userInfo.js @@ -9,4 +9,7 @@ export const userInfoPinia = defineStore("userInfo", () => { } return { email, setEmail }; -}); \ No newline at end of file +}, + { + persist: true, + }); \ No newline at end of file diff --git a/src/views/createVideo/index.vue b/src/views/createVideo/index.vue index 7867a1a..585a496 100644 --- a/src/views/createVideo/index.vue +++ b/src/views/createVideo/index.vue @@ -331,6 +331,7 @@ import { videoUpload, saveImgApi, uploadProgressApi, + saveAudioApi, voiceTotalApi, chooseTypeApi, } from "@/apis/createVideo"; @@ -356,6 +357,7 @@ function getAiFaceList(pageNum, pageSize, sendType) { // 选择显示的face列表 const showFace = ref("0"); function ChangeShowFaceList(index) { + AiFaceList.value = null; if (index == 0) { getAiFaceList(1, 100, 1); } @@ -488,6 +490,7 @@ const recorder = new Recorder(parameter); const isRecording = ref(true); const audioUrl = ref(null); const audioData = ref(""); +const videoId = ref(null); //上传mp3的videoId,创建视频会用到 const startRecording = async () => { try { @@ -516,12 +519,14 @@ const playRecording = () => { audio.play(); } }; +// 上传音频 async function uploadAudio(params) { let formData = new FormData(); const timestamp = Date.now(); formData.append("file", audioData.value, timestamp + ".mp3"); try { const res = await videoUpload(formData); + videoId.value = res.data.videoId; ElMessage.success("上传成功!"); } catch (error) { ElMessage.error(error); @@ -566,11 +571,17 @@ async function uploadProgress(videoId) { const res = await uploadProgressApi(videoId); if (res.data == "complete") { clearInterval(intervalId); + const res2 = await saveAudioApi(videoId); } } //#endregion -------------------------------------- -//#region 获取语言列表 +//#region 生成视频 +// 上传音频后,得到videoId + +//#endregion ---------------------------- + +//#region //#endregion ---------------------------- @@ -769,7 +780,7 @@ onMounted(() => { text-align: center; border-radius: 50%; background-color: #fbf8f8; - border: 2px solid #fff; + // border: 2px solid #fff; box-shadow: rgba(0, 0, 0, 0.3) 0px 0px 5px 5px; // overflow: hidden; .imgBox { @@ -786,6 +797,10 @@ onMounted(() => { background-color: #fbf8f8; overflow: hidden; img { + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); width: 100%; } } @@ -802,10 +817,14 @@ onMounted(() => { &::before { content: ""; position: absolute; + // top: -3px; + // right: -7px; + // left: -3px; + // bottom: -7px; top: -3px; - right: -7px; + right: -3px; left: -3px; - bottom: -7px; + bottom: -3px; z-index: 2; border-radius: 50%; background: linear-gradient( diff --git a/yarn.lock b/yarn.lock index 073b92b..85ea2d8 100644 --- a/yarn.lock +++ b/yarn.lock @@ -4740,6 +4740,11 @@ pidtree@^0.6.0: resolved "https://registry.npmmirror.com/pidtree/-/pidtree-0.6.0.tgz" integrity sha512-eG2dWTVw5bzqGRztnHExczNxt5VGsE6OwTeCG3fdUf9KBsZzO3R5OIIIzWR+iZA0NtZ+RDVdaoE2dK1cn6jH4g== +pinia-plugin-persistedstate@^3.1.0: + version "3.1.0" + resolved "https://registry.npmmirror.com/pinia-plugin-persistedstate/-/pinia-plugin-persistedstate-3.1.0.tgz#eada2b61ecd478fce88e490a685210415cd7a1b4" + integrity sha512-8UN+vYMEPBdgNLwceY08mi5olI0wkYaEb8b6hD6xW7SnBRuPydWHlEhZvUWgNb/ibuf4PvufpvtS+dmhYjJQOw== + pinia@^2.0.33: version "2.0.36" resolved "https://registry.npmmirror.com/pinia/-/pinia-2.0.36.tgz"