diff --git a/src/apis/createVideo.js b/src/apis/createVideo.js index b62dfbc..6874ea3 100644 --- a/src/apis/createVideo.js +++ b/src/apis/createVideo.js @@ -62,7 +62,7 @@ export function delImgApi(id) { } /** - * @description 上传视频 + * @description 上传音频 * @params data * @returns data */ @@ -75,7 +75,7 @@ export function videoUpload(data) { } /** - * @description 获取视频上传进度 + * @description 获取音频上传进度 * @params videoId * @returns data */ @@ -184,12 +184,36 @@ export function findByIdApi(id) { /** * @description 获取音乐列表 - * @params data + * @params pageNum,pageSize + * @returns data + */ +export function musicListSystemApi(pageNum, pageSize) { + return request({ + url: `api/userPhotoVideo/music?pageNum=${pageNum}&pageSize=${pageSize}&type=1`, + method: 'get', + }) +} +/** + * @description 获取音乐列表 + * @params pageNum,pageSize * @returns data */ -export function musicListApi() { +export function musicListPersonApi(pageNum, pageSize) { return request({ - url: `api/userPhotoVideo/music`, + url: `api/userPhotoVideo/userMusic?pageNum=${pageNum}&pageSize=${pageSize}&type=3`, method: 'get', }) +} + +/** + * @description 保存音频(新) + * @params videoId + * @returns data + */ +export function saveMusicApi(data) { + return request({ + url: `/api/userPhotoVideo/save`, + method: 'post', + data + }) } \ No newline at end of file diff --git a/src/lang/package/en.ts b/src/lang/package/en.ts index 87c0095..5132349 100644 --- a/src/lang/package/en.ts +++ b/src/lang/package/en.ts @@ -72,6 +72,7 @@ export default { chooseMusic:'Choose Music', searchMusic:'Search Music', comingSoon:'coming soon', + hotMusic:'Hit song', }, // 我的视频 diff --git a/src/lang/package/zh-cn.ts b/src/lang/package/zh-cn.ts index 6cf4668..146e0a8 100644 --- a/src/lang/package/zh-cn.ts +++ b/src/lang/package/zh-cn.ts @@ -72,6 +72,7 @@ export default { chooseMusic:'选择音乐', searchMusic:'搜索音乐', comingSoon:'敬请期待', + hotMusic:'热门歌曲', }, // 我的视频 diff --git a/src/layout/components/Sidebar/index.vue b/src/layout/components/Sidebar/index.vue index a873a96..e3ac906 100644 --- a/src/layout/components/Sidebar/index.vue +++ b/src/layout/components/Sidebar/index.vue @@ -21,7 +21,7 @@ {{ $t("shop.title") }} -
+
diff --git a/src/router/index.ts b/src/router/index.ts index b460489..57b9390 100644 --- a/src/router/index.ts +++ b/src/router/index.ts @@ -104,7 +104,25 @@ export const constantRoutes: RouteRecordRaw[] = [ }, ], }, - + // API Access + { + path: "/", + component: Layout, + redirect: "/APIAccess", + children: [ + { + path: "APIAccess", + component: () => import("@/views/APIAccess/index.vue"), + name: "APIAccess", + meta: { + title: "APIAccess", + icon: "homepage", + affix: true, + name: "API Access", + }, + }, + ], + }, // { // path: "/dashboard", // component: Layout, diff --git a/src/store/modules/userInfo.js b/src/store/modules/userInfo.js index 6ebf515..5d48bd6 100644 --- a/src/store/modules/userInfo.js +++ b/src/store/modules/userInfo.js @@ -10,9 +10,7 @@ export const userInfoModules = defineStore("userInfoState", () => { // 登录获取用户信息 async function getUserInfo() { const res = await getUserInfoApi() - console.log(res.data); userInfo.value = res.data - console.log(userInfo); } // 退出清除用户信息 function loginOut(params) { diff --git a/src/views/APIAccess/index.vue b/src/views/APIAccess/index.vue new file mode 100644 index 0000000..343db22 --- /dev/null +++ b/src/views/APIAccess/index.vue @@ -0,0 +1,68 @@ + + + + + diff --git a/src/views/createVideo/index.vue b/src/views/createVideo/index.vue index 87f7a3b..39bfbd1 100644 --- a/src/views/createVideo/index.vue +++ b/src/views/createVideo/index.vue @@ -108,8 +108,9 @@
- -
+ + +
@@ -428,30 +430,87 @@ {{ $t("createVideo.chooseMusic") }}

- - +
+
+ {{ $t("createVideo.hotMusic") }} +
+
+ {{ $t("createVideo.personalWarehouse") }} +
+
+ +
+ + + - -
--> - -
+
+ +
+
+ 🎵{{ item.name }} + {{ handleTime(item.time) }} +
+
+ +
- {{ item.name }} + 🎵{{ item.name }} {{ handleTime(item.time) }}
+ + + +
@@ -610,7 +669,9 @@ import { createVideoApi, previewAudioApi, findByIdApi, - musicListApi, + musicListSystemApi, + musicListPersonApi, + saveMusicApi, } from "@/apis/createVideo"; import { useI18n } from "vue-i18n"; import Recorder from "js-audio-recorder"; //mp3插件 @@ -802,6 +863,9 @@ async function changeFile() { } faceItemActive.value = res2.data.id; imgUrl.value = res2.data.material; + submitImgBtn.value = false; + console.log(123654); + showUploadBtn.value = 1; } catch (error) { ElMessage.error(error); } @@ -1096,8 +1160,31 @@ async function saveOrUpdate(index, isSaveVideo) { }; if (index == 1) { createLoading.value = true; + if (!saveOrUpdateData.personPhotoId) { + ElMessage.error( + lanChange.value == "zh-cn" ? `请选择图片` : `Please select a picture` + ); + createLoading.value = false; + return; + } + if (!saveOrUpdateData.paperwork) { + ElMessage.error( + lanChange.value == "zh-cn" ? `请输入文案` : `Please enter copy` + ); + createLoading.value = false; + return; + } + if (!saveOrUpdateData.voiceMouldId) { + ElMessage.error( + lanChange.value == "zh-cn" ? `请选择声音` : `Please select sound` + ); + createLoading.value = false; + return; + } try { const res2 = await saveOrUpdateApi(saveOrUpdateData); // 保存数据 + if (res2.code == 1002) { + } // 这个if判断是不是仅仅保存视频 if (isSaveVideo == "saveVideo") { ElMessage.success( @@ -1118,11 +1205,28 @@ async function saveOrUpdate(index, isSaveVideo) { createLoading.value = false; router.push("/myCreating"); } catch (error) { + // ElMessage.error($t(error.message)); ElMessage.error(error); createLoading.value = false; } } if (index == 2) { + if (!saveOrUpdateData.personPhotoId) { + ElMessage.error( + lanChange.value == "zh-cn" ? `请选择图片` : `Please select a picture` + ); + createLoading.value = false; + return; + } + if (!saveOrUpdateData.voiceMaterialId) { + ElMessage.error( + lanChange.value == "zh-cn" + ? `请选择音频文件` + : `Please select an audio file` + ); + createLoading.value = false; + return; + } try { const res1 = await uploadAudio(isSaveVideo); // 上传音频 } catch (error) { @@ -1132,6 +1236,22 @@ async function saveOrUpdate(index, isSaveVideo) { } if (index == 3) { try { + if (!saveOrUpdateData.personPhotoId) { + ElMessage.error( + lanChange.value == "zh-cn" ? `请选择图片` : `Please select a picture` + ); + createLoading.value = false; + return; + } + if (!saveOrUpdateData.musicId) { + ElMessage.error( + lanChange.value == "zh-cn" + ? `请选择音乐文件` + : `Please select an music file` + ); + createLoading.value = false; + return; + } const res1 = await saveOrUpdateApi(saveOrUpdateData); // 保存数据 // 这个if判断是不是仅仅保存视频 @@ -1186,18 +1306,48 @@ async function findById(findId) { //#endregion ---------------------------- //#region 音乐tab -const musicList = ref(null); //展示音乐列表 +const musicListSystem = ref(null); //展示音乐列表 +const musicListPerson = ref(null); //展示音乐列表 const audioMusicUrl = ref(null); //选中音乐Url回显 const musicItemAction = ref(null); //选中高亮 -// 获取音乐列表 -async function getMusicList() { +const musicListPageNumSystem = ref(1); //系统音乐页数 +const musicListTotalSystem = ref(10); //系统音乐总条数 +const musicListPageNumPerson = ref(1); //个人音乐页数 +const musicListTotalPerson = ref(10); //个人音乐总条数 +const musicListPageSize = ref(8); // +const musicTabActive = ref(1); //热门歌曲和个人仓库高亮 +const musicData = ref(null); //上传歌曲的数据 +const fileMusicInput = ref(null); // 上传组件的dom +// 获取系统音乐列表 +async function getmusicListSystem(pageNum, pageSize) { try { - const res = await musicListApi(); - musicList.value = res.data; + const res = await musicListSystemApi(pageNum, pageSize); + musicListSystem.value = res.data.list; + musicListTotalSystem.value = Number(res.data.total); } catch (error) { console.log(error); } } +// 获取个人音乐列表 +async function getmusicListPerson(pageNum, pageSize) { + try { + const res = await musicListPersonApi(pageNum, pageSize); + musicListPerson.value = res.data.list; + musicListTotalPerson.value = Number(res.data.total); + } catch (error) { + console.log(error); + } +} +// 系统页数发生改变 +const musicListPageNumSystemChange = (val) => { + musicListPageNumSystem.value = val; + getmusicListSystem(musicListPageNumSystem.value, musicListPageSize.value); +}; +// 个人页数发生改变 +const musicListPageNumPersonChange = (val) => { + musicListPageNumPerson.value = val; + getmusicListPerson(musicListPageNumPerson.value, musicListPageSize.value); +}; // 点击选择音乐 function chooseMusicUrl(url, id) { audioMusicUrl.value = url; @@ -1205,18 +1355,51 @@ function chooseMusicUrl(url, id) { } // 转化秒为分秒 function handleTime(time) { - let m = Math.floor(time / 60); - let s = time % 60; + let m = Math.floor(time / 60).toFixed(0); + let s = (time % 60).toFixed(0); if (s < 10) { s = "0" + s; } return m + ":" + s; } -// 搜索功能 -const searchInput = ref(null); -async function searchMusicList() { - // const res = await - console.log("搜索"); +// 选择文件上传音乐 +async function uploadMusic() { + const file = fileMusicInput.value.files[0]; + if (file) { + const videoUrl = URL.createObjectURL(file); + musicData.value = file; + let formData = new FormData(); + formData.append("file", musicData.value, file.name + ".mp3"); + try { + const res = await videoUpload(formData); + if (res) { + // ElMessage.success("上传成功!"); + } else { + ElMessage.error( + lanChange.value == "zh-cn" + ? `上传音频失败!` + : `Failed to upload audio!` + ); + return; + } + // 查询进度 + intervalId = setInterval(async () => { + const res2 = await uploadProgressApi(res.data.videoId); + if (res2.data == "complete") { + clearInterval(intervalId); + try { + const res3 = await saveMusicApi({ voiceId: res.data.videoId }); + afterSaveAudioId.value = res2.data.id; // 得到id + } catch (error) { + ElMessage.error(error); + } + } + }, 1000); + // ElMessage.success("上传成功!"); + } catch (error) { + ElMessage.error(error); + } + } } //#endregion ---------------------------- @@ -1242,14 +1425,26 @@ onMounted(async () => { getAiFaceList(1, 10, 1); if (AccessToken) { getAiFaceUserList(1, 10, 3); + await getmusicListPerson( + musicListPageNumPerson.value, + musicListPageSize.value + ); } await voiceTotal(); if (route.query.id) { await findById(route.query.id); } - await getMusicList(); + await getmusicListSystem( + musicListPageNumSystem.value, + musicListPageSize.value + ); - musicList.value.forEach((item) => { + musicListSystem.value.forEach((item) => { + if (item.id == musicItemAction.value) { + audioMusicUrl.value = item.url; + } + }); + musicListPerson.value.forEach((item) => { if (item.id == musicItemAction.value) { audioMusicUrl.value = item.url; } @@ -1607,6 +1802,10 @@ onMounted(async () => { background-clip: text !important; -webkit-background-size: 200% 100% !important; background-size: 200% 100% !important; + .el-icon { + vertical-align: text-top; + font-size: 32px; + } } } .aiPicTab { @@ -1758,7 +1957,6 @@ onMounted(async () => { width: 100%; border: #000 1px solid; border-radius: 10px; - overflow: hidden; transition: all 0.3s; box-shadow: #00000026 2px 2px 2px 2px; @@ -1841,6 +2039,49 @@ onMounted(async () => { .el-icon { vertical-align: text-top; } + .musicTab { + display: flex; + width: 100%; + height: 50px; + line-height: 50px; + text-align: center; + .musicTabItem { + background-color: #f5f7fa; + width: 50%; + cursor: pointer; + } + .musicTabItemActive { + background-color: #000; + color: #fff; + } + } + .uploadVideo { + position: relative; + margin-top: 10px; + width: 100%; + border: #000 1px solid; + border-radius: 10px; + overflow: hidden; + transition: all 0.3s; + box-shadow: #00000026 2px 2px 2px 2px; + &:hover { + transform: translateY(-10px); + } + text-align: center; + margin-bottom: 20px; + height: 100px; + font-size: 50px; + font-weight: 700; + line-height: 100px; + input { + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + opacity: 0; + } + } .musicList { width: 100%; display: flex; @@ -1861,7 +2102,8 @@ onMounted(async () => { cursor: pointer; .musicNmae { display: inline-block; - width: 320px; + width: 280px; + margin-right: 20px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; @@ -1879,6 +2121,21 @@ onMounted(async () => { color: #fff; } } + .pagination { + // position: fixed; + // bottom: 20px; + // left: 50%; + // transform: translateX(-50%); + margin-top: 10px; + background-color: #ffffff; + padding: 10px 20px; + border-radius: 8px; + transition: all 0.3s; + cursor: pointer; + &:hover { + background-color: #b8b8b873; + } + } .AudioBox { display: flex; justify-content: space-around; diff --git a/src/views/myAccount/index.vue b/src/views/myAccount/index.vue index 099dba7..b827c55 100644 --- a/src/views/myAccount/index.vue +++ b/src/views/myAccount/index.vue @@ -38,6 +38,7 @@ Free for a limited time
限时免费
+
{{ $t("account.until") }} 2023/7/31
{{ $t("account.getMore") }} diff --git a/src/views/myStore/index.vue b/src/views/myStore/index.vue index 969b98c..8d187ac 100644 --- a/src/views/myStore/index.vue +++ b/src/views/myStore/index.vue @@ -12,7 +12,7 @@
- {{ $t(item.typeDesc) }} + {{ item.typeDesc }}
{{ @@ -351,7 +351,7 @@ onMounted(async () => { width: 100%; height: 100%; line-height: 780px; - font-size: 200px; + font-size: 120px; font-weight: 900; text-align: center; background-color: rgba(0, 0, 0, 0.2);