diff --git a/src/assets/img/uploadImg.png b/src/assets/img/uploadImg.png new file mode 100644 index 0000000..0de27df Binary files /dev/null and b/src/assets/img/uploadImg.png differ diff --git a/src/styles/my.scss b/src/styles/my.scss index 58bb358..3e77d8c 100644 --- a/src/styles/my.scss +++ b/src/styles/my.scss @@ -72,6 +72,25 @@ p { border-radius: 30px !important; } +.imgInCenter { + position: absolute; + top: 50%; + left: 50%; + width: 100%; + height: 100%; + transform: translate(-50%, -50%); + // z-index: -1; + + img { + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + max-width: 80%; + max-height: 80%; + } +} + // :deep(.el-input__wrapper.is-focus) { // box-shadow: 0 0 0 1px #000 !important; // } \ No newline at end of file diff --git a/src/types/components.d.ts b/src/types/components.d.ts index 26d3161..95af5be 100644 --- a/src/types/components.d.ts +++ b/src/types/components.d.ts @@ -49,6 +49,8 @@ declare module '@vue/runtime-core' { IEpMic: typeof import('~icons/ep/mic')['default'] IEpSearch: typeof import('~icons/ep/search')['default'] IEpSetting: typeof import('~icons/ep/setting')['default'] + IEpSwitchButton: typeof import('~icons/ep/switch-button')['default'] + IEpVideoPause: typeof import('~icons/ep/video-pause')['default'] IEpVideoPlay: typeof import('~icons/ep/video-play')['default'] LangSelect: typeof import('./../components/LangSelect/index.vue')['default'] MultiUpload: typeof import('./../components/Upload/MultiUpload.vue')['default'] diff --git a/src/views/createVideo/index.vue b/src/views/createVideo/index.vue index 168c284..b2101e4 100644 --- a/src/views/createVideo/index.vue +++ b/src/views/createVideo/index.vue @@ -41,7 +41,8 @@

- + +

{{ $t("createVideo.uploadImgTip1") }} {{ $t("createVideo.uploadImgTip2") }} @@ -334,7 +335,7 @@ v-for="item in soundOptions" :key="item.value" :label=" - item.displayName + `  (${item.sex == 1 ? '男' : '女'})` + item.displayName + `  (${item.sex == 1 ? '♂' : '♀'})` " :value="item.id" /> @@ -393,7 +394,10 @@ audioUrl && showAudioWhich == 1 ? 'uploadAudioAvtion2' : '' " > - + + + {{ $t("createVideo.startRecorded") }} +
+ +
+
+ +
@@ -492,12 +505,15 @@
- + +
+ +
@@ -644,8 +660,9 @@ -
- + +
+
@@ -999,6 +1016,7 @@ async function getPreviewAudio() { } previewAudioUrl.value = res.data.data; let audioA = document.getElementById("audio"); + audioA.muted = false; // 将 muted 属性设置为 false audioA.addEventListener("loadedmetadata", function () { audioA.play(); }); @@ -1118,22 +1136,22 @@ const handleFileChange = async () => { // 进行大小时长限制 await countAudioTime(audio2); // 限制60秒 - if (uploadAudioTime.value > 960) { + if (uploadAudioTime.value > 60) { ElMessage.error( lanChange.value == "zh-cn" - ? `上传失败,您上传的文件时长与您的权益不匹配` - : `The upload failed because the duration of the file you uploaded did not match your entitlements` + ? `上传失败,上传音频时长最多为60秒` + : `Description Failed to upload audio files. The maximum duration of uploading audio files is 60 seconds` ); audioUrl.value = null; audioData.value = null; return; } // 限制3mb - if (file.size / 1048576 > 93) { + if (file.size / 1048576 > 3) { ElMessage.error( lanChange.value == "zh-cn" - ? `上传失败,您上传的文件大小与您的权益不匹配` - : `Upload failed, the file size you uploaded does not match your entitlements` + ? `上传失败,上传音频大小最大为3MB` + : `Description Upload failed. The maximum size of uploaded audio is 3MB` ); audioUrl.value = null; audioData.value = null; @@ -1163,7 +1181,10 @@ async function uploadProgress(videoId, isSaveVideo) { if (res.data == "complete") { clearInterval(intervalId); try { - const res2 = await saveAudioApi({ videoId: videoId }); + const res2 = await saveAudioApi({ + videoId: videoId, + sendType: showAudioWhich.value, + }); afterSaveAudioId.value = res2.data.id; // 得到id } catch (error) { ElMessage.error(error); @@ -1360,6 +1381,9 @@ async function findById(findId) { const res = await findByIdApi(findId); id.value = res.data.id; title.value = res.data.title; //标题回显 + showAudioWhich.value = res.data.voiceMaterial + ? res.data.voiceMaterial.sendType + : null; faceItemActive.value = res.data.personPhotoId; //aiface高亮和图片id tabFrom.value = res.data.voiceFrom; //输入文案还是上传mp3模式 textareaContent.value = res.data.paperwork; //文案内容 @@ -1368,6 +1392,7 @@ async function findById(findId) { audioUrl.value = res.data.voiceMaterialUrl; // mp3回显 musicItemAction.value = res.data.musicId; //音乐id回显 language.value = res.data.voiceInfo ? res.data.voiceInfo.languageId : null; + if (language.value) { await chooseType(language.value); } @@ -1444,6 +1469,12 @@ function handleTime(time) { } return m + ":" + s; } +// 点击上传音乐 +// 点击上传input +function handleFileMusicClick(e) { + musicData.value = null; + e.target.value = null; +} // 选择文件上传音乐 async function uploadMusic() { const file = fileMusicInput.value.files[0]; @@ -1451,6 +1482,29 @@ async function uploadMusic() { musicData.value = file; let formData = new FormData(); formData.append("file", musicData.value, file.name + ".mp3"); + const videoUrl = URL.createObjectURL(file); + const audio2 = new Audio(); + audio2.src = videoUrl; + // 进行大小时长限制 + await countAudioTime(audio2); + // 限制60秒 + if (uploadAudioTime.value > 60) { + ElMessage.error( + lanChange.value == "zh-cn" + ? `上传失败,上传音频时长最多为60秒` + : `Description Failed to upload audio files. The maximum duration of uploading audio files is 60 seconds` + ); + return; + } + // 限制3mb + if (file.size / 1048576 > 3) { + ElMessage.error( + lanChange.value == "zh-cn" + ? `上传失败,上传音频大小最大为3MB` + : `Description Upload failed. The maximum size of uploaded audio is 3MB` + ); + return; + } try { const res = await videoUpload(formData); if (res) { @@ -1777,21 +1831,25 @@ onUnmounted(() => { font-size: 50px; line-height: 100px; text-align: center; - background-color: #ccc; + background-color: rgba(204, 204, 204, 0.1); border-radius: 30px; - box-shadow: rgba(0, 0, 0, 0.3) 0px 0px 5px 5px; + box-shadow: rgba(108, 120, 238, 0.3) 0px 0px 5px 5px; p { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: -1; - opacity: 0.1; + opacity: 0.5; .el-icon { width: 200px; height: 200px; font-size: 150px; } + img { + max-width: 60%; + max-height: 60%; + } } span { display: block; @@ -2232,7 +2290,7 @@ onUnmounted(() => { padding: 20px; // margin-top: 30px; margin-bottom: 20px; - height: 70px; + // height: 70px; .btnBox { display: flex; justify-content: space-between; @@ -2245,16 +2303,20 @@ onUnmounted(() => { } button { border-radius: 10px; - height: 30px; + // height: 30px; line-height: 22px; padding: 5px 10px; background-color: #fff; transition: all 0.3s; + cursor: pointer; &:hover { background-color: #000; color: #fff; } + .el-icon { + font-size: 20px; + } } } .uploadAudioAvtion { @@ -2275,6 +2337,11 @@ onUnmounted(() => { font-weight: 700; line-height: 100px; transition: all 0.3s; + img { + margin: auto; + max-width: 80%; + max-height: 80%; + } input { position: absolute; top: 0;