|
|
@@ -47,6 +47,7 @@ |
|
|
|
<div class="divider" /> |
|
|
|
<!-- 语音内容 --> |
|
|
|
<el-input |
|
|
|
placeholder="请输入文案" |
|
|
|
@change="loadVoice" |
|
|
|
rows="4" |
|
|
|
type="textarea" |
|
|
@@ -182,7 +183,9 @@ |
|
|
|
> |
|
|
|
<!-- 展示页 --> |
|
|
|
<div class="list"> |
|
|
|
<div v-if="textareaContent.length == 0">请输入文案</div> |
|
|
|
<div v-if="textareaContent.length == 0"> |
|
|
|
输入文案后才可以选择声音哦~ ~ |
|
|
|
</div> |
|
|
|
<div |
|
|
|
v-if=" |
|
|
|
soundItemList.length == 0 && textareaContent.length != 0 |
|
|
@@ -420,17 +423,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 +441,8 @@ import { |
|
|
|
getVoiceList, // 获取声音列表,废弃 |
|
|
|
getBackGroundList, |
|
|
|
doFindInviteCode, |
|
|
|
saveOrUpdateUserVideo, |
|
|
|
} from "@/api/generateVideo"; |
|
|
|
saveOrUpdateUserVideo |
|
|
|
} from '@/api/generateVideo' |
|
|
|
import { |
|
|
|
videoDetial, |
|
|
|
voiceList, |
|
|
@@ -448,16 +451,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 +477,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 +509,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 +531,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 +610,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 +621,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 +633,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 +644,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 +720,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 +770,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 +826,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 +850,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 +883,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 +913,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 +926,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 +952,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> |
|
|
|