浏览代码

1

dev_YWQ
congzc 2 年前
父节点
当前提交
bb7ec5b00b
共有 5 个文件被更改,包括 100 次插入14 次删除
  1. +12
    -0
      src/apis/createVideo.js
  2. +2
    -1
      src/lang/package/en.ts
  3. +2
    -1
      src/lang/package/zh-cn.ts
  4. +1
    -1
      src/layout/components/AppMain.vue
  5. +83
    -11
      src/views/createVideo/index.vue

+ 12
- 0
src/apis/createVideo.js 查看文件

@@ -24,6 +24,18 @@ export function awsImgUpload(data) {
data
})
}
/**
* @description 上传图片
* @params data
* @returns data
*/
export function saveImgApi(data) {
return request({
url: `/api/personPhoto/save`,
method: 'post',
data
})
}

/**
* @description 上传视频


+ 2
- 1
src/lang/package/en.ts 查看文件

@@ -31,7 +31,8 @@ export default {
// 创作视频
createVideo: {
title: "CreateVideo",
availableMould: "Available Moulds",
availableMould:"Available Moulds",
personalWarehouse:'Personal warehouse',
typeScript: "Type your Script",
uploadAudio: "Upload Audio",
aiScript: "Ai Script",


+ 2
- 1
src/lang/package/zh-cn.ts 查看文件

@@ -31,7 +31,8 @@ export default {
// 创作视频
createVideo: {
title: "创作视频",
availableMould: "可用模板",
availableMould:"可用模板",
personalWarehouse:'个人仓库',
typeScript: "输入文案",
uploadAudio: "上传音频",
aiScript: "AI生成文本",


+ 1
- 1
src/layout/components/AppMain.vue 查看文件

@@ -22,7 +22,7 @@ const tagsViewStore = useTagsViewStore();
width: 100%;

/* 50= navbar 50 */
min-height: calc(100vh - 50px);
min-height: calc(100vh - 80px);
overflow: hidden;
// background-color: var(--el-bg-color-page);
background-color: #000;


+ 83
- 11
src/views/createVideo/index.vue 查看文件

@@ -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%;
}
}


正在加载...
取消
保存