瀏覽代碼

缩放控件大小

master
HolyKnightIX 2 年之前
父節點
當前提交
e1665c1049
共有 2 個檔案被更改,包括 210 行新增210 行删除
  1. +5
    -5
      src/components/editPosition.vue
  2. +205
    -205
      src/views/model/editModel.vue

+ 5
- 5
src/components/editPosition.vue 查看文件

@@ -449,8 +449,8 @@ export default {
border: 3px solid #09ff00;
.outSide {
position: absolute;
width: 85px;
height: 85px;
width: 185px;
height: 185px;
bottom: 0;
right: 0;
transform: translate(50%, 50%);
@@ -459,9 +459,9 @@ export default {
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 35px;
height: 35px;
line-height: 35px;
width: 85px;
height: 85px;
line-height: 85px;
border-radius: 50% 50%;
background-color: #fff;
border: 1px solid #969696;


+ 205
- 205
src/views/model/editModel.vue 查看文件

@@ -420,17 +420,17 @@

<script>
// 组件
import Vue from 'vue'
import { Toast, Dialog } from 'vant'
import { mapState, mapActions } from 'vuex'
import HeadTop from './../../components/common/head.vue'
import CutImg from '../../components/CutImg.vue'
import EditPosition from '../../components/editPosition.vue'
import Vue from "vue";
import { Toast, Dialog } from "vant";
import { mapState, mapActions } from "vuex";
import HeadTop from "./../../components/common/head.vue";
import CutImg from "../../components/CutImg.vue";
import EditPosition from "../../components/editPosition.vue";

// 工具
import { scrollToID } from '../../utils'
import { scrollToID } from "../../utils";
// 语言检测插件
import { franc } from 'franc'
import { franc } from "franc";
// 接口
import {
doCreateVideo,
@@ -438,8 +438,8 @@ import {
getVoiceList, // 获取声音列表,废弃
getBackGroundList,
doFindInviteCode,
saveOrUpdateUserVideo
} from '@/api/generateVideo'
saveOrUpdateUserVideo,
} from "@/api/generateVideo";
import {
videoDetial,
voiceList,
@@ -448,16 +448,16 @@ import {
myBGIListApi,
systemScListApi,
myScListApi,
delImgApi
} from '@/api/editModel'
import { getModelDetailById } from '../../api/getPaper.js'
delImgApi,
} from "@/api/editModel";
import { getModelDetailById } from "../../api/getPaper.js";

Vue.use(-Toast)
Vue.use(-Toast);
export default {
components: {
HeadTop,
CutImg,
EditPosition
EditPosition,
},
data() {
return {
@@ -474,21 +474,21 @@ export default {
materialList: {
BGI: {},
scList: [],
virtual: {}
virtual: {},
}, // 传给组件的素材,背景,数字人数据

personMouldId: null, //选择数字人id
mouldSmId: null,
saveID: null, // 作品id
inputTitle: '', // 作品标题
textareaContent: '', // 输入框内容
inputTitle: "", // 作品标题
textareaContent: "", // 输入框内容
//底部
bottomTabActive: 2, // 底部导航高亮
showSubtitle: false, // 是否展示字幕
showSynthesisDialog: false, //合成进度条窗口显示隐藏
showTabSheet: false, //tab栏弹出框显隐
showSoundList2: false, //声音的二级显隐
soundTabList: ['全部'], // 声音tab栏标题
soundTabList: ["全部"], // 声音tab栏标题
soundListAction: -1, //声音tab栏标题高亮
soundItemList: [], // 声音展示一级列表
soundItemList2: [], // 声音展示二级列表
@@ -506,17 +506,17 @@ export default {
myBGIList: [], // 我上传的背景库列表
showScList: [], // 渲染时代替下面2个列表
systemScList: [], // 素材库列表
myScList: [] // 我上传的素材库列表
}
myScList: [], // 我上传的素材库列表
};
},
computed: {
...mapState({
characters: (state) => state.publicObj.characters
})
characters: (state) => state.publicObj.characters,
}),
},

methods: {
...mapActions(['setCharacters']),
...mapActions(["setCharacters"]),
// aaa() {
// console.log('aaa')
// this.$nextTick(() => {
@@ -528,78 +528,78 @@ export default {
// 点击底部tab栏
clickBottomTab(index) {
if (index == 1) {
this.showSoundList2 = false
this.showSoundList2 = false;
}
if (index != 4) {
this.bottomTabActive = index
this.bottomTabActive = index;
if (this.textareaContent.length == 0) {
this.soundItemList = [] //清空处理
this.soundItemList2 = [] //清空处理
this.soundItemList = []; //清空处理
this.soundItemList2 = []; //清空处理
}
console.log(this.bottomTabActive)
this.showTabSheet = !this.showTabSheet
console.log(this.bottomTabActive);
this.showTabSheet = !this.showTabSheet;
} else {
//字幕切换
this.showSubtitle = !this.showSubtitle
this.showSubtitle = !this.showSubtitle;
}
},
// 获取声音列表
async loadVoice() {
if (this.textareaContent.length != 0) {
const language = franc(this.textareaContent)
console.log(language, '语种')
const language = franc(this.textareaContent);
console.log(language, "语种");
const data = {
personMouldId: this.personMouldId,
paperwork: this.textareaContent
}
paperwork: this.textareaContent,
};
try {
const res = await voiceList(data)
console.log(res, '获取声音列表')
this.soundItemList = res.data.list
const res = await voiceList(data);
console.log(res, "获取声音列表");
this.soundItemList = res.data.list;
} catch (error) {
console.log(error, 'error')
Toast.fail(error.message)
console.log(error, "error");
Toast.fail(error.message);
}
} else {
Toast('您还没有输入文案')
Toast("您还没有输入文案");
}
},
// 点击声音列表中的某一项
async clickSoundItem(index, item) {
if (this.soundItemListAction != index) {
this.soundItemListAction = index //高亮
this.soundChoose = item
this.soundItemListAction = index; //高亮
this.soundChoose = item;

this.showSoundList2 = true
const res = await voiceList2Api(item.id)
this.showSoundList2 = true;
const res = await voiceList2Api(item.id);

let list = res.data.subVoiceMould ? res.data.subVoiceMould : []
console.log(list)
let obj = JSON.parse(JSON.stringify(res))
delete obj.data.subVoiceMould
let list2 = [{ ...obj.data }, ...list]
let list = res.data.subVoiceMould ? res.data.subVoiceMould : [];
console.log(list);
let obj = JSON.parse(JSON.stringify(res));
delete obj.data.subVoiceMould;
let list2 = [{ ...obj.data }, ...list];

this.soundItemList2 = list2 || []
this.soundItemList2 = list2 || [];

// console.log(this.soundItemList2)
// this.audioUrl = res.data.videoUrl
} else {
this.soundItemListAction = -1
this.soundChoose = {}
this.soundItemListAction = -1;
this.soundChoose = {};
}
},
// 点击声音列表中的某一项2级
async clickSoundItem2(index, item) {
if (this.soundItemListAction2 != index) {
this.soundItemListAction2 = index //高亮
this.soundChoose2 = item
this.soundItemListAction2 = index; //高亮
this.soundChoose2 = item;
// 得到试听文件
const res = await videoDetial(item.exampleVideoId)
const res = await videoDetial(item.exampleVideoId);

this.audioUrl = res.data.videoUrl
this.audioUrl = res.data.videoUrl;
} else {
this.soundItemListAction2 = -1
this.soundChoose2 = {}
this.soundItemListAction2 = -1;
this.soundChoose2 = {};
}
},

@@ -607,7 +607,7 @@ export default {
submit(type) {
// type代表时保存还是点击生成视频按钮
// 组装参数
console.log(this.soundChoose.id)
console.log(this.soundChoose.id);
// 素材列表处理
const scList = this.materialList.scList.map((item) => {
return {
@@ -618,9 +618,9 @@ export default {
y: item.y,
z: item.z,
w: item.w,
h: item.h
}
})
h: item.h,
};
});
// 数字人处理
const shuziren = {
id: this.materialList.virtual.id,
@@ -630,8 +630,8 @@ export default {
y: this.materialList.virtual.y,
z: this.materialList.virtual.z,
w: this.materialList.virtual.w,
h: this.materialList.virtual.h
}
h: this.materialList.virtual.h,
};
const data = {
id: this.id,
videoType: this.videoType, //横屏竖屏
@@ -641,75 +641,75 @@ export default {
paperwork: this.textareaContent, //语音内容
backgroundId: this.materialList.BGI.id, //背景id
personJson: JSON.stringify(shuziren), // 数字人
materialAllJson: JSON.stringify([...scList]) // 素材
}
console.log(data, '最终提交的参数')
materialAllJson: JSON.stringify([...scList]), // 素材
};
console.log(data, "最终提交的参数");
if (type == 1) {
// 当没有选择声音参数时
if (!this.soundChoose.id) {
Toast.fail('请选择声音!')
return
Toast.fail("请选择声音!");
return;
}
if (!this.inputTitle) {
Toast.fail('请输入文案标题!')
return
Toast.fail("请输入文案标题!");
return;
}
if (!this.textareaContent) {
Toast.fail('请输入文案内容!')
return
Toast.fail("请输入文案内容!");
return;
}
}
// 先保存草稿,里面再调生成视频的接口
this.saveOrUpdate(data, type)
this.saveOrUpdate(data, type);
},

/**
* @description:保存或修改用户作品
*/
async saveOrUpdate(data, type) {
console.log(data)
console.log(data);
try {
const res = await saveOrUpdateUserVideo(data)
console.log(res, '保存或修改用户作品')
const res = await saveOrUpdateUserVideo(data);
console.log(res, "保存或修改用户作品");
// this.createVideo({ id: this.saveID })
if (type == 1) {
this.createVideo({ id: this.$route.query.id })
this.createVideo({ id: this.$route.query.id });
}
} catch (error) {
console.log(error, 'error')
Toast.fail(error.message)
console.log(error, "error");
Toast.fail(error.message);
}
},
/**
* @description:生成视频
*/
async createVideo(data) {
let that = this
let that = this;
try {
const res = await doCreateVideo(data)
console.log(res, '生成视频')
Toast.success('提交成功!')
const res = await doCreateVideo(data);
console.log(res, "生成视频");
Toast.success("提交成功!");
// *#06#
that.showSynthesisDialog = true //显示进度条
that.showSynthesisDialog = true; //显示进度条
this.timeOuter = setTimeout(() => {
this.isShowCover = true
}, 2000)
this.isShowCover = true;
}, 2000);
const timer = setInterval(() => {
if (that.percentageData < 98) {
that.percentageData += 1
that.percentageData += 1;
} else {
that.percentageData == 98
that.percentageData == 98;
}
// 重复调取此接口直到videoStatus == 2 || 3
this.getVideo(that.$route.query.id)
this.getVideo(that.$route.query.id);
if (this.timerOver) {
clearInterval(timer)
this.isShowCover = false
clearInterval(timer);
this.isShowCover = false;
}
}, 1000)
}, 1000);
} catch (error) {
console.log(error, 'error')
Toast.fail(error.message)
console.log(error, "error");
Toast.fail(error.message);
}
},
/**
@@ -717,49 +717,49 @@ export default {
*/
async getVideo(id) {
try {
const res = await doFindVideoById(id)
console.log(res, '通过id获取视频')
const res = await doFindVideoById(id);
console.log(res, "通过id获取视频");
if (res.data.videoStatus == 2) {
this.percentageData == 99
this.showSynthesisDialog = false //隐藏进度条
this.isShowCover = false
clearTimeout(this.timeOuter)
Toast.success('视频生成成功!')
const url = res.data.videoPathUri + res.data.videoPath
console.log(url, 'url')
this.percentageData == 99;
this.showSynthesisDialog = false; //隐藏进度条
this.isShowCover = false;
clearTimeout(this.timeOuter);
Toast.success("视频生成成功!");
const url = res.data.videoPathUri + res.data.videoPath;
console.log(url, "url");
this.$router.push({
// path: '/downloadVideo',
path: '/videoDownload',
path: "/videoDownload",
query: {
id: this.$route.query.id,
videoId: res.data.videoId,
videoUrl: url
}
})
this.timerOver = true
return
videoUrl: url,
},
});
this.timerOver = true;
return;
} else if (res.data.videoStatus == 3) {
Toast.fail(`视频生成失败!失败原因:${res.data.videoMsg}`)
this.timerOver = true
clearTimeout(this.timeOuter)
this.isShowCover = false
return
Toast.fail(`视频生成失败!失败原因:${res.data.videoMsg}`);
this.timerOver = true;
clearTimeout(this.timeOuter);
this.isShowCover = false;
return;
}
} catch (error) {
console.log(error, 'error')
Toast.fail(error.message)
console.log(error, "error");
Toast.fail(error.message);
}
},
// 根据作品ID获取信息
async getDetailById(id) {
try {
const res = await getModelDetailById(id)
console.log(JSON.parse(res.data.personMouldSm))
this.materialList.BGI = JSON.parse(res.data.backgroundSm)
const res = await getModelDetailById(id);
console.log(JSON.parse(res.data.personMouldSm));
this.materialList.BGI = JSON.parse(res.data.backgroundSm);
this.materialList.scList = res.data.materialAllJson
? JSON.parse(res.data.materialAllJson)
: []
this.materialList.virtual = JSON.parse(res.data.personJson)
: [];
this.materialList.virtual = JSON.parse(res.data.personJson);
if (!this.materialList.virtual.w) {
this.materialList.virtual = {
...this.materialList.virtual,
@@ -767,53 +767,53 @@ export default {
y: 0,
z: 0,
w: 1,
h: 1
}
h: 1,
};
}

this.videoType = res.data.videoType
this.id = res.data.id
this.videoType = res.data.videoType;
this.id = res.data.id;
// this.imgUrl = res.data.personMould.coverImg
this.personMouldId = res.data.personMouldId
this.mouldSmId = res.data.personMouldSmId
this.inputTitle = res.data.title
this.textareaContent = res.data.paperwork || ''
this.soundChoose.id = res.data.voiceMouldId
this.soundChoose.mouldSmId = res.data.voiceMouldSmId
this.personMouldId = res.data.personMouldId;
this.mouldSmId = res.data.personMouldSmId;
this.inputTitle = res.data.title;
this.textareaContent = res.data.paperwork || "";
this.soundChoose.id = res.data.voiceMouldId;
this.soundChoose.mouldSmId = res.data.voiceMouldSmId;
if (this.textareaContent.length != 0) {
await this.loadVoice() // 获取音频列表
await this.loadVoice(); // 获取音频列表
}
this.soundItemListAction = this.soundItemList.findIndex((item) => {
return item.id == this.soundChoose.id
}) //高亮处理
return item.id == this.soundChoose.id;
}); //高亮处理

// backgroundMouldId: '', // 背景id
// backgroundMouldSmId: '', //背景标识
} catch (error) {
console.log(error, 'error')
Toast.fail(error.message)
console.log(error, "error");
Toast.fail(error.message);
}
},
// 点击选中背景图或者素材
chooseImg(index, type) {
if (type == 'bj') {
if (type == "bj") {
if (this.bjImgAction == -1 || this.bjImgAction != index) {
this.bjImgAction = index
this.bjImgAction = index;
} else if (this.bjImgAction == index) {
this.bjImgAction = -1
this.bjImgAction = -1;
}
}
if (type == 'sc') {
if (type == "sc") {
if (this.scmgAction == -1) {
this.bjImgAction = index
this.bjImgAction = index;
} else if (this.scImgAction == index) {
this.scImgAction = -1
this.scImgAction = -1;
}
}
},
// 点击对钩确定背景或者素材图
sureImg() {
let that = this
let that = this;
// 背景
if (this.bottomTabActive == 2 && this.bjImgAction != -1) {
// Dialog.confirm({
@@ -823,14 +823,14 @@ export default {
// .then(() => {
if (that.bjAction == 0) {
that.materialList.BGI = that.systemBGIList.find((item, index) => {
return index == that.bjImgAction
})
return index == that.bjImgAction;
});
} else if (that.bjAction == 1) {
that.materialList.BGI = that.myBGIList.find((item, index) => {
return index == that.bjImgAction
})
return index == that.bjImgAction;
});
}
this.showTabSheet = false
this.showTabSheet = false;
// })
// .catch(() => {
// console.log('false')
@@ -847,30 +847,30 @@ export default {
// .then(() => {
if (that.scAction == 0) {
let scItem = that.systemScList.find((item, index) => {
return index == that.scImgAction
})
return index == that.scImgAction;
});
that.materialList.scList.push({
...scItem,
x: 0,
y: 0,
z: 0,
w: 1,
h: 1
})
h: 1,
});
} else if (that.scAction == 1) {
let scItem = that.myScList.find((item, index) => {
return index == that.scImgAction
})
return index == that.scImgAction;
});
that.materialList.scList.push({
...scItem,
x: 0,
y: 0,
z: 0,
w: 1,
h: 1
})
h: 1,
});
}
this.showTabSheet = false
this.showTabSheet = false;
// })
// .catch(() => {
// console.log('false')
@@ -880,26 +880,26 @@ export default {
}
// 啥没选
else {
this.showTabSheet = false
this.showTabSheet = false;
}
},
// 切换背景图/素材图的展示列表
changeShowBGIList(type) {
if (type == 0) {
this.bjAction = 0
this.showBGIList = this.systemBGIList
this.bjAction = 0;
this.showBGIList = this.systemBGIList;
}
if (type == 1) {
this.bjAction = 1
this.showBGIList = this.myBGIList
this.bjAction = 1;
this.showBGIList = this.myBGIList;
}
if (type == 2) {
this.scAction = 0
this.showScList = this.systemScList
this.scAction = 0;
this.showScList = this.systemScList;
}
if (type == 3) {
this.scAction = 1
this.showScList = this.myScList
this.scAction = 1;
this.showScList = this.myScList;
}
},
/**
@@ -910,9 +910,9 @@ export default {
this.pageNum,
this.pageSize,
this.videoType
)
this.systemBGIList = res.data.list
this.showBGIList = this.systemBGIList
);
this.systemBGIList = res.data.list;
this.showBGIList = this.systemBGIList;
},

/**
@@ -923,25 +923,25 @@ export default {
this.pageNum,
this.pageSize,
this.videoType
)
this.myBGIList = res.data.list
);
this.myBGIList = res.data.list;
},

/**
* @description:获取系统素材
*/
async getSystemScList() {
const res = await systemScListApi(this.pageNum, this.pageSize)
this.systemScList = res.data.list
this.showScList = this.systemScList
const res = await systemScListApi(this.pageNum, this.pageSize);
this.systemScList = res.data.list;
this.showScList = this.systemScList;
},

/**
* @description:获取我上传的素材
*/
async getMyScListApi() {
const res = await myScListApi(this.pageNum, this.pageSize)
this.myScList = res.data.list
const res = await myScListApi(this.pageNum, this.pageSize);
this.myScList = res.data.list;
},

/**
@@ -949,54 +949,54 @@ export default {
*/
async delImg(id) {
Dialog.confirm({
message: '确认删除吗?'
message: "确认删除吗?",
})
.then(async () => {
const res = await delImgApi(id)
const res = await delImgApi(id);
if (this.bottomTabActive == 2) {
await this.getMyBGIListApi()
this.changeShowBGIList(1)
await this.getMyBGIListApi();
this.changeShowBGIList(1);
}
if (this.bottomTabActive == 3) {
await this.getMyScListApi()
this.changeShowBGIList(3)
await this.getMyScListApi();
this.changeShowBGIList(3);
}
})
.catch(() => {})
.catch(() => {});
},

go(url) {
this.$router.push(url)
}
this.$router.push(url);
},
},
created() {},
async mounted() {
this.inPage = true
scrollToID('top')
this.inPage = true;
scrollToID("top");

await this.getDetailById(this.$route.query.id)
this.getSystemBGIList()
this.getMyBGIListApi()
this.getSystemScList()
this.getMyScListApi()
await this.getDetailById(this.$route.query.id);
this.getSystemBGIList();
this.getMyBGIListApi();
this.getSystemScList();
this.getMyScListApi();

const elementWidth = document.getElementById('editPosition').clientWidth
console.log(elementWidth)
const elementWidth = document.getElementById("editPosition").clientWidth;
console.log(elementWidth);
// 根据横竖屏来确定比例 1竖2横
if (this.videoType == 1) {
this.proportion = 1080 / elementWidth
console.log(this.proportion)
this.proportion = 1080 / elementWidth;
console.log(this.proportion);
} else if (this.videoType == 2) {
this.proportion = 1920 / elementWidth
console.log(this.proportion)
this.proportion = 1920 / elementWidth;
console.log(this.proportion);
}
},
async beforeDestroy() {
this.timeOuter = null // 清除定时器
await this.submit(2) // 保存草稿
console.log('保存了')
}
}
this.timeOuter = null; // 清除定时器
await this.submit(2); // 保存草稿
console.log("保存了");
},
};
</script>

<style lang="scss" scoped>


Loading…
取消
儲存