| 
				
				
					
				
				
				 | 
			
			 | 
			@@ -108,8 +108,9 @@ | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			      <!-- 选中需要上传的图片后 --> | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			      <div class="left-top" v-show="showUploadBtn == 4"> | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			        <el-row style="display: flex; justify-content: flex-end"> | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			          <!-- 上传按钮 --> | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			          <div class="btnBox" v-show="submitImgBtn"> | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			          <!-- 上传按钮 废弃了--> | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			          <!-- <div v-if="false" class="btnBox" v-show="submitImgBtn"> --> | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			          <div v-if="false" class="btnBox"> | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			            <button class="uploadBtn"> | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			              {{ $t("createVideo.reselect") }} | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			              <input accept="image/*" type="file" @change="lookImg" /> | 
		
		
	
	
		
			
				| 
				
					
				
				
					
				
				
				 | 
			
			 | 
			@@ -236,6 +237,7 @@ | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			          :infinite-scroll-disabled="overLoadUser" | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			        > | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			          <div class="title"> | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			            <el-icon><i-ep-Lock /></el-icon> | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			            {{ $t("createVideo.comingSoon") }} | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			          </div> | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			        </div> | 
		
		
	
	
		
			
				| 
				
					
				
				
					
				
				
				 | 
			
			 | 
			@@ -428,30 +430,87 @@ | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			              <el-icon class="icon-Headset"><i-ep-Headset /></el-icon> | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			              {{ $t("createVideo.chooseMusic") }} | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			            </p> | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			            <!-- 搜索框 --> | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			            <!-- <div class="flex justify-between" style="width: 99%"> | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			              <el-input | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			                v-model="searchInput" | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			                :placeholder="$t('createVideo.searchMusic')" | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			                @keyup.enter="searchMusicList" | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			            <!-- tab栏 --> | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			            <div class="musicTab"> | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			              <div | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			                class="musicTabItem" | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			                :class="musicTabActive == 1 ? 'musicTabItemActive' : ''" | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			                @click="musicTabActive = 1" | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			              > | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			                {{ $t("createVideo.hotMusic") }} | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			              </div> | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			              <div | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			                v-if="AccessToken" | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			                class="musicTabItem" | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			                :class="musicTabActive == 2 ? 'musicTabItemActive' : ''" | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			                @click="musicTabActive = 2" | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			              > | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			                {{ $t("createVideo.personalWarehouse") }} | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			              </div> | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			            </div> | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			            <!-- 上传音乐 --> | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			            <div v-if="musicTabActive == 2" class="uploadVideo"> | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			              + | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			              <input | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			                accept="audio/*" | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			                type="file" | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			                ref="fileMusicInput" | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			                @click="e.target.value = null" | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			                @change="uploadMusic" | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			              /> | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			              <el-icon class="icon-edit" @click="searchMusicList" | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			                ><i-ep-search | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			              /></el-icon> | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			            </div> --> | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			            <!-- 音乐列表展示 --> | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			            <div class="musicList"> | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			            </div> | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			            <!-- 系统音乐列表展示 --> | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			            <div v-if="musicTabActive == 1" class="musicList"> | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			              <div | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			                @click="chooseMusicUrl(item.url, item.id)" | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			                class="musicItem" | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			                :class="musicItemAction == item.id ? 'musicItemAvtive' : ''" | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			                v-for="item in musicListSystem" | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			                :key="item.id" | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			              > | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			                <span class="musicNmae"> 🎵{{ item.name }}</span> | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			                <span class="musicTime"> {{ handleTime(item.time) }}</span> | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			              </div> | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			            </div> | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			            <!-- 个人音乐列表展示 --> | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			            <div v-if="musicTabActive == 2" class="musicList"> | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			              <div | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			                @click="chooseMusicUrl(item.url, item.id)" | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			                class="musicItem" | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			                :class="musicItemAction == item.id ? 'musicItemAvtive' : ''" | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			                v-for="item in musicList" | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			                v-for="item in musicListPerson" | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			                :key="item.id" | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			              > | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			                <span class="musicNmae"> {{ item.name }}</span> | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			                <span class="musicNmae"> 🎵{{ item.name }}</span> | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			                <span class="musicTime"> {{ handleTime(item.time) }}</span> | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			              </div> | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			            </div> | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			            <!-- 系统分页 --> | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			            <div v-if="musicTabActive == 1" class="pagination"> | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			              <el-pagination | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			                v-model:current-page="musicListPageNumSystem" | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			                v-model:page-size="musicListPageSize" | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			                :small="false" | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			                :disabled="false" | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			                :background="true" | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			                layout="total, prev, pager, next, jumper" | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			                :total="musicListTotalSystem" | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			                @current-change="musicListPageNumSystemChange" | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			              /> | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			            </div> | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			            <!-- 个人分页 --> | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			            <div v-if="musicTabActive == 2" class="pagination"> | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			              <el-pagination | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			                v-model:current-page="musicListPageNumPerson" | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			                v-model:page-size="musicListPageSize" | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			                :small="false" | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			                :disabled="false" | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			                :background="true" | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			                layout="total, prev, pager, next, jumper" | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			                :total="musicListTotalPerson" | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			                @current-change="musicListPageNumPersonChange" | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			              /> | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			            </div> | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			            <div class="AudioBox" v-if="audioMusicUrl"> | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			              <audio controls :src="audioMusicUrl" id="uploadAudio"></audio> | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			            </div> | 
		
		
	
	
		
			
				| 
				
					
				
				
					
				
				
				 | 
			
			 | 
			@@ -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; | 
		
		
	
	
		
			
				| 
				
					
				
				
				
				 | 
			
			 | 
			
  |