|
@@ -61,7 +61,20 @@ |
|
|
|
|
|
|
|
|
<!-- 底部 --> |
|
|
<!-- 底部 --> |
|
|
<div class="left-bottom"> |
|
|
<div class="left-bottom"> |
|
|
<div>{{ $t("createVideo.availableMould") }}:</div> |
|
|
|
|
|
|
|
|
<div class="tab flex"> |
|
|
|
|
|
<div |
|
|
|
|
|
:class="showFace == 0 ? 'tabAvtive' : ''" |
|
|
|
|
|
@click="ChangeShowFaceList(0)" |
|
|
|
|
|
> |
|
|
|
|
|
{{ $t("createVideo.availableMould") }} |
|
|
|
|
|
</div> |
|
|
|
|
|
<div |
|
|
|
|
|
:class="showFace == 1 ? 'tabAvtive' : ''" |
|
|
|
|
|
@click="ChangeShowFaceList(1)" |
|
|
|
|
|
> |
|
|
|
|
|
{{ $t("createVideo.personalWarehouse") }} |
|
|
|
|
|
</div> |
|
|
|
|
|
</div> |
|
|
<div class="faceList"> |
|
|
<div class="faceList"> |
|
|
<div |
|
|
<div |
|
|
class="faceItem pointer" |
|
|
class="faceItem pointer" |
|
@@ -259,10 +272,16 @@ |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</template> |
|
|
</template> |
|
|
|
|
|
|
|
|
<script setup> |
|
|
<script setup> |
|
|
import { getCurrentInstance } from "vue"; |
|
|
import { getCurrentInstance } from "vue"; |
|
|
import Recorder from "js-audio-recorder"; |
|
|
import Recorder from "js-audio-recorder"; |
|
|
import { personPhotoList, awsImgUpload, videoUpload } from "@/apis/createVideo"; |
|
|
|
|
|
|
|
|
import { |
|
|
|
|
|
personPhotoList, |
|
|
|
|
|
awsImgUpload, |
|
|
|
|
|
videoUpload, |
|
|
|
|
|
saveImgApi, |
|
|
|
|
|
} from "@/apis/createVideo"; |
|
|
|
|
|
|
|
|
// 获取AI头像 |
|
|
// 获取AI头像 |
|
|
const AiFaceList = ref([]); |
|
|
const AiFaceList = ref([]); |
|
@@ -277,7 +296,11 @@ function getAiFaceList(pageNum, pageSize) { |
|
|
console.log(err, "err"); |
|
|
console.log(err, "err"); |
|
|
}); |
|
|
}); |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
// 选择显示的face列表 |
|
|
|
|
|
const showFace = ref("0"); |
|
|
|
|
|
function ChangeShowFaceList(index) { |
|
|
|
|
|
showFace.value = index; |
|
|
|
|
|
} |
|
|
// 标题 |
|
|
// 标题 |
|
|
let title = ref(""); |
|
|
let title = ref(""); |
|
|
// 上传图片 |
|
|
// 上传图片 |
|
@@ -296,7 +319,12 @@ async function changeFile() { |
|
|
formData.append("file", imgData.value, timestamp + ".png"); |
|
|
formData.append("file", imgData.value, timestamp + ".png"); |
|
|
try { |
|
|
try { |
|
|
const res = await awsImgUpload(formData); |
|
|
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) { |
|
|
} catch (error) { |
|
|
ElMessage.error(error); |
|
|
ElMessage.error(error); |
|
|
} |
|
|
} |
|
@@ -533,7 +561,23 @@ onMounted(() => { |
|
|
width: 100%; |
|
|
width: 100%; |
|
|
height: 32%; |
|
|
height: 32%; |
|
|
margin-top: 10px; |
|
|
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 { |
|
|
.ai { |
|
|
width: 100%; |
|
|
width: 100%; |
|
|
} |
|
|
} |
|
|