+
+
+
@@ -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.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);