| 
				
				
					
				
				
				 | 
			
			 | 
			@@ -61,8 +61,30 @@ | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			
  | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			      <!-- 底部 --> | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			      <div class="left-bottom"> | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			        <div>{{ $t("createVideo.availableMould") }}:</div> | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			        <div class="tab flex"> | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			          <div | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			            class="pointer" | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			            :class="showFace == 0 ? 'tabAvtive' : ''" | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			            @click="ChangeShowFaceList(0)" | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			          > | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			            {{ $t("createVideo.availableMould") }} | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			          </div> | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			          <div | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			            class="pointer" | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			            :class="showFace == 1 ? 'tabAvtive' : ''" | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			            @click="ChangeShowFaceList(1)" | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			          > | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			            {{ $t("createVideo.personalWarehouse") }} | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			          </div> | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			        </div> | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			        <div class="faceList"> | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			          <!-- 上传图片组件 --> | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			          <div v-if="showFace == 1" class="faceItem"> | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			            <span class="uploadImg" | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			              >+ | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			              <input class="pointer" type="file" @change="lookImg" /> | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			            </span> | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			          </div> | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			          <div | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			            class="faceItem pointer" | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			            @click="setImgUrl(item.material)" | 
		
		
	
	
		
			
				| 
				
					
				
				
					
				
				
				 | 
			
			 | 
			@@ -259,10 +281,16 @@ | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			    </div> | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			  </div> | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			</template> | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			
  | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			<script setup> | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			import { getCurrentInstance } from "vue"; | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			import Recorder from "js-audio-recorder"; | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			import { personPhotoList, awsImgUpload, videoUpload } from "@/apis/createVideo"; | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			import { | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			  personPhotoList, | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			  awsImgUpload, | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			  videoUpload, | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			  saveImgApi, | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			} from "@/apis/createVideo"; | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			
  | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			// 获取AI头像 | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			const AiFaceList = ref([]); | 
		
		
	
	
		
			
				| 
				
				
				
					
				
				 | 
			
			 | 
			@@ -270,14 +298,17 @@ const AiFaceList = ref([]); | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			function getAiFaceList(pageNum, pageSize) { | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			  personPhotoList(pageNum, pageSize) | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			    .then((res) => { | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			      console.log(res, "res"); | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			      AiFaceList.value = res.data.list; | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			    }) | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			    .catch((err) => { | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			      console.log(err, "err"); | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			    }); | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			} | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			
  | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			// 选择显示的face列表 | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			const showFace = ref("0"); | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			function ChangeShowFaceList(index) { | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			  showFace.value = index; | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			} | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			// 标题 | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			let title = ref(""); | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			// 上传图片 | 
		
		
	
	
		
			
				| 
				
				
				
					
				
				 | 
			
			 | 
			@@ -296,7 +327,12 @@ async function changeFile() { | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			  formData.append("file", imgData.value, timestamp + ".png"); | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			  try { | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			    const res = await awsImgUpload(formData); | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			    ElMessage.success("上传成功!"); | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			    if (res.code == 200) { | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			      ElMessage.success("上传成功!"); | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			    } else { | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			      ElMessage.error("上传失败!"); | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			    } | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			    const res2 = await saveImgApi({ material: res.data.url }); | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			  } catch (error) { | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			    ElMessage.error(error); | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			  } | 
		
		
	
	
		
			
				| 
				
					
				
				
					
				
				
				 | 
			
			 | 
			@@ -399,7 +435,8 @@ onMounted(() => { | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			
  | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			<style lang="scss" scoped> | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			.page { | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			  height: 1200px; | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			  // height: 1200px; | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			  height: calc(100vh - 80px); | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			  padding: 20px 0 0 40px; | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			  background-color: #fff; | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			  border-radius: 25px 0 0; | 
		
		
	
	
		
			
				| 
				
					
				
				
					
				
				
				 | 
			
			 | 
			@@ -427,7 +464,8 @@ onMounted(() => { | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			  &-top { | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			    position: relative; | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			    width: 100%; | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			    height: 65%; | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			    // height: 65%; | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			    height: 600px; | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			
  | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			    .uploadBtn { | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			      position: relative; | 
		
		
	
	
		
			
				| 
				
					
				
				
					
				
				
				 | 
			
			 | 
			@@ -533,7 +571,23 @@ onMounted(() => { | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			    width: 100%; | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			    height: 32%; | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			    margin-top: 10px; | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			
  | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			    .tab { | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			      padding: 10px; | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			      > div { | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			        margin-right: 20px; | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			        padding: 5px 10px; | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			        transition: all 0.3s; | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			        border-radius: 5px; | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			        &:hover { | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			          background-color: #000; | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			          color: #fff; | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			        } | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			      } | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			      .tabAvtive { | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			        background-color: #000; | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			        color: #fff; | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			      } | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			    } | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			    .ai { | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			      width: 100%; | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			    } | 
		
		
	
	
		
			
				| 
				
				
				
					
				
				 | 
			
			 | 
			@@ -546,12 +600,31 @@ onMounted(() => { | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			      height: 160px; | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			      overflow-y: scroll; | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			      .faceItem { | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			        position: relative; | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			        margin-right: 10px; | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			        margin-bottom: 10px; | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			        width: 150px; | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			        height: 150px; | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			        padding: 0 25px; | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			        line-height: 30px; | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			        line-height: 150px; | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			        text-align: center; | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			
  | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			        border-radius: 50%; | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			        border: 2px solid #000; | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			        overflow: hidden; | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			        input { | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			          position: absolute; | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			          top: 0; | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			          left: 0; | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			          width: 100%; | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			          height: 100%; | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			          opacity: 0; | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			        } | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			        .uploadImg { | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			          line-height: 145px; | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			          font-size: 50px; | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			          font-weight: 700; | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			          text-align: center; | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			        } | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			        p { | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			          height: 30px; | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			        } | 
		
		
	
	
		
			
				| 
				
				
				
					
				
				 | 
			
			 | 
			@@ -561,7 +634,6 @@ onMounted(() => { | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			        .img { | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			          width: 100px; | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			          height: 100px; | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			          // background-color: green; | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			          border-radius: 50%; | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			        } | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			      } | 
		
		
	
	
		
			
				| 
				
					
				
				
				
				 | 
			
			 | 
			
  |