From d99667882cc64b97c3a19a5967609ccbca7c2c32 Mon Sep 17 00:00:00 2001 From: congzc Date: Tue, 27 Jun 2023 15:55:15 +0800 Subject: [PATCH] 3 --- src/assets/img/uploadImg.png | Bin 0 -> 6033 bytes src/styles/my.scss | 19 ++++++ src/types/components.d.ts | 2 + src/views/createVideo/index.vue | 105 ++++++++++++++++++++++++++------ 4 files changed, 107 insertions(+), 19 deletions(-) create mode 100644 src/assets/img/uploadImg.png diff --git a/src/assets/img/uploadImg.png b/src/assets/img/uploadImg.png new file mode 100644 index 0000000000000000000000000000000000000000..0de27dfd8463cacf9389e84ffd722b60fdb5e8ba GIT binary patch literal 6033 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 Ta#)A=*a6z=2FO}f2h{%oWP%{G literal 0 HcmV?d00001 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;