|
|
@@ -49,7 +49,7 @@ |
|
|
|
<div>英语_女性_安娜</div> |
|
|
|
</div> |
|
|
|
<!-- 合成按钮 --> |
|
|
|
<div class="makeVideo" @click="videoMake">立即制作</div> |
|
|
|
<div class="makeVideo" @click="submit">立即制作</div> |
|
|
|
<!-- 上移下移 --> |
|
|
|
<div v-if="false" class="upAndBottomBtn"> |
|
|
|
<div class="moveLayer"> |
|
|
@@ -155,18 +155,19 @@ |
|
|
|
> |
|
|
|
<!-- 展示页 --> |
|
|
|
<div class="list"> |
|
|
|
<div v-if="soundItemList.length == 0">暂无数据</div> |
|
|
|
<div |
|
|
|
v-if="soundItemList.length != 0" |
|
|
|
@click="soundItemListAction = index" |
|
|
|
class="listItem" |
|
|
|
:class="{ active: soundItemListAction === index }" |
|
|
|
v-for="(item, index) in soundItemList" |
|
|
|
:key="index" |
|
|
|
> |
|
|
|
<img src="../../assets/icon/icon-earphone.png" alt="" /> |
|
|
|
<div>{{ item.title }}</div> |
|
|
|
</div> |
|
|
|
<div v-if="textareaContent.length == 0">请输入文案</div> |
|
|
|
<template v-if="soundItemList.length != 0"> |
|
|
|
<div |
|
|
|
@click="clickSoundItem(index, item)" |
|
|
|
class="listItem" |
|
|
|
:class="{ active: soundItemListAction == index }" |
|
|
|
v-for="(item, index) in soundItemList" |
|
|
|
:key="index" |
|
|
|
> |
|
|
|
<img src="../../assets/icon/icon-earphone.png" alt="" /> |
|
|
|
<div>{{ item.title }}</div> |
|
|
|
</div> |
|
|
|
</template> |
|
|
|
</div> |
|
|
|
</van-tab> |
|
|
|
</van-tabs> |
|
|
@@ -311,6 +312,9 @@ |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</van-action-sheet> |
|
|
|
|
|
|
|
<!-- 试听的mp3 --> |
|
|
|
<!-- <audio :src="audioUrl"></audio> --> |
|
|
|
</div> |
|
|
|
</template> |
|
|
|
|
|
|
@@ -331,6 +335,7 @@ import { |
|
|
|
doFindInviteCode, |
|
|
|
saveOrUpdateUserVideo |
|
|
|
} from '@/api/generateVideo' |
|
|
|
import { getModelDetailById } from '../../api/getPaper.js' |
|
|
|
|
|
|
|
Vue.use(Toast) |
|
|
|
export default { |
|
|
@@ -343,6 +348,7 @@ export default { |
|
|
|
imgUrl: null, |
|
|
|
modelId: null, |
|
|
|
mouldSmId: null, |
|
|
|
saveID: null, // 作品id |
|
|
|
inputTitle: '', |
|
|
|
textareaContent: '', // 输入框内容 |
|
|
|
bottomTabActive: 2, // 底部导航高亮 |
|
|
@@ -353,6 +359,7 @@ export default { |
|
|
|
soundListAction: -1, //声音tab栏标题高亮 |
|
|
|
soundItemList: [], // 声音展示列表 |
|
|
|
soundItemListAction: -1, // 声音展示列表高亮 |
|
|
|
soundChoose: {}, //选中的音频 |
|
|
|
bjAction: 0, // 背景:素材库和上传高亮 |
|
|
|
bjImgAction: -1, // 选中背景图高亮 |
|
|
|
scAction: 0, // 素材:素材库和上传高亮 |
|
|
@@ -375,6 +382,9 @@ export default { |
|
|
|
clickBottomTab(index) { |
|
|
|
if (index != 4) { |
|
|
|
this.bottomTabActive = index |
|
|
|
if (this.textareaContent.length == 0) { |
|
|
|
this.soundItemList = [] //清空处理 |
|
|
|
} |
|
|
|
console.log(this.bottomTabActive) |
|
|
|
this.showTabSheet = !this.showTabSheet |
|
|
|
} else { |
|
|
@@ -382,12 +392,6 @@ export default { |
|
|
|
this.showSubtitle = !this.showSubtitle |
|
|
|
} |
|
|
|
}, |
|
|
|
// 点击立即制作 |
|
|
|
videoMake() { |
|
|
|
if (this.textareaContent.length == 0) { |
|
|
|
Toast('您还没有输入文案') |
|
|
|
} |
|
|
|
}, |
|
|
|
// 获取声音列表 |
|
|
|
async loadVoice() { |
|
|
|
if (this.textareaContent.length != 0) { |
|
|
@@ -406,6 +410,146 @@ export default { |
|
|
|
Toast('您还没有输入文案') |
|
|
|
} |
|
|
|
}, |
|
|
|
// 点击声音列表中的某一项 |
|
|
|
clickSoundItem(index, item) { |
|
|
|
if (this.soundItemListAction != index) { |
|
|
|
this.soundItemListAction = index |
|
|
|
this.soundChoose = item |
|
|
|
} else { |
|
|
|
this.soundItemListAction = -1 |
|
|
|
this.soundChoose = {} |
|
|
|
} |
|
|
|
}, |
|
|
|
submit() { |
|
|
|
// 组装参数 |
|
|
|
console.log(this.soundChoose.id) |
|
|
|
const data = { |
|
|
|
backgroundMouldId: '', // 背景id |
|
|
|
backgroundMouldSmId: '', //背景标识 |
|
|
|
id: this.saveID, //作品id |
|
|
|
paperwork: this.textareaContent, //文本框内容 |
|
|
|
personMouldId: this.modelId, //模版id |
|
|
|
personMouldSmId: this.mouldSmId, //模版标识 |
|
|
|
title: this.inputTitle, //文案标题 |
|
|
|
type: 1, //写死type |
|
|
|
voiceMouldId: this.soundChoose.id, //声音id |
|
|
|
voiceMouldSmId: this.soundChoose.mouldSmId //声音标识 |
|
|
|
} |
|
|
|
console.log(data, '最终提交的参数') |
|
|
|
|
|
|
|
// 当没有选择声音参数时 |
|
|
|
if (!this.soundChoose.id || !this.soundChoose.mouldSmId) { |
|
|
|
Toast.fail('请选择声音!') |
|
|
|
return |
|
|
|
} |
|
|
|
if (!this.inputTitle) { |
|
|
|
Toast.fail('请输入文案标题!') |
|
|
|
return |
|
|
|
} |
|
|
|
if (!this.textareaContent) { |
|
|
|
Toast.fail('请输入文案内容!') |
|
|
|
return |
|
|
|
} |
|
|
|
// 先保存草稿,里面再调生成视频的接口 |
|
|
|
this.saveOrUpdate(data) |
|
|
|
}, |
|
|
|
|
|
|
|
/** |
|
|
|
* @description:保存或修改用户作品 |
|
|
|
*/ |
|
|
|
async saveOrUpdate(data) { |
|
|
|
try { |
|
|
|
const res = await saveOrUpdateUserVideo(data) |
|
|
|
console.log(res, '保存或修改用户作品') |
|
|
|
this.createVideo({ id: this.saveID }) |
|
|
|
} catch (error) { |
|
|
|
console.log(error, 'error') |
|
|
|
Toast.fail(error.message) |
|
|
|
} |
|
|
|
}, |
|
|
|
/** |
|
|
|
* @description:生成视频 |
|
|
|
*/ |
|
|
|
async createVideo(data) { |
|
|
|
try { |
|
|
|
const res = await doCreateVideo(data) |
|
|
|
console.log(res, '生成视频') |
|
|
|
Toast.success('提交成功!') |
|
|
|
// *#06# |
|
|
|
this.timeOuter = setTimeout(() => { |
|
|
|
this.isShowCover = true |
|
|
|
}, 2000) |
|
|
|
const timer = setInterval(() => { |
|
|
|
// 重复调取此接口直到videoStatus == 2 || 3 |
|
|
|
this.getVideo(this.saveID) |
|
|
|
if (this.timerOver) { |
|
|
|
clearInterval(timer) |
|
|
|
this.isShowCover = false |
|
|
|
} |
|
|
|
}, 1000) |
|
|
|
} catch (error) { |
|
|
|
console.log(error, 'error') |
|
|
|
Toast.fail(error.message) |
|
|
|
} |
|
|
|
}, |
|
|
|
/** |
|
|
|
* @description:通过id获取视频 |
|
|
|
*/ |
|
|
|
async getVideo(id) { |
|
|
|
try { |
|
|
|
const res = await doFindVideoById(id) |
|
|
|
console.log(res, '通过id获取视频') |
|
|
|
if (res.data.videoStatus == 2) { |
|
|
|
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', |
|
|
|
query: { |
|
|
|
videoId: res.data.videoId, |
|
|
|
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 |
|
|
|
} |
|
|
|
} catch (error) { |
|
|
|
console.log(error, 'error') |
|
|
|
Toast.fail(error.message) |
|
|
|
} |
|
|
|
}, |
|
|
|
// 根据作品ID获取信息 |
|
|
|
async getDetailById(id) { |
|
|
|
try { |
|
|
|
const res = await getModelDetailById(id) |
|
|
|
console.log(res, '根据作品ID获取信息') |
|
|
|
this.imgUrl = res.data.personMould.coverImg |
|
|
|
this.modelId = 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 |
|
|
|
await this.loadVoice() // 获取音频列表 |
|
|
|
this.soundItemListAction = this.soundItemList.findIndex((item) => { |
|
|
|
return item.id == this.soundChoose.id |
|
|
|
}) //高亮处理 |
|
|
|
|
|
|
|
// backgroundMouldId: '', // 背景id |
|
|
|
// backgroundMouldSmId: '', //背景标识 |
|
|
|
} catch (error) { |
|
|
|
console.log(error, 'error') |
|
|
|
Toast.fail(error.message) |
|
|
|
} |
|
|
|
}, |
|
|
|
go(url) { |
|
|
|
this.$router.push(url) |
|
|
|
} |
|
|
@@ -414,6 +558,11 @@ export default { |
|
|
|
this.imgUrl = this.$route.query.imgUrl |
|
|
|
this.modelId = this.$route.query.modelId |
|
|
|
this.mouldSmId = this.$route.query.mouldSmId |
|
|
|
this.saveID = this.$route.query.saveID |
|
|
|
// 判断是不是草稿或者生成失败的情况 |
|
|
|
if (this.$route.query.modify) { |
|
|
|
this.getDetailById(this.saveID) |
|
|
|
} |
|
|
|
}, |
|
|
|
mounted() { |
|
|
|
this.inPage = true |
|
|
@@ -428,11 +577,13 @@ export default { |
|
|
|
// transform: translateX(30%); |
|
|
|
opacity: 0; |
|
|
|
transition: all 0.5s; // global-transition |
|
|
|
|
|
|
|
&.active { |
|
|
|
opacity: 1; |
|
|
|
// transform: translateX(0); |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
.content { |
|
|
|
position: relative; |
|
|
|
padding: 0 10px; |
|
|
@@ -443,11 +594,13 @@ export default { |
|
|
|
position: relative; |
|
|
|
justify-content: center; |
|
|
|
width: 100%; |
|
|
|
|
|
|
|
img { |
|
|
|
width: 200px; |
|
|
|
height: 351px; |
|
|
|
border-radius: 12px; |
|
|
|
} |
|
|
|
|
|
|
|
&-subtitle { |
|
|
|
position: absolute; |
|
|
|
top: 220px; |
|
|
@@ -463,16 +616,19 @@ export default { |
|
|
|
border-radius: 3px; |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
.addText { |
|
|
|
display: flex; |
|
|
|
justify-content: space-between; |
|
|
|
margin-top: 20px; |
|
|
|
|
|
|
|
&-title { |
|
|
|
font-size: 16px; |
|
|
|
font-weight: 600; |
|
|
|
color: #000; |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
.textInput { |
|
|
|
margin-top: 10px; |
|
|
|
padding: 1px; |
|
|
@@ -483,14 +639,17 @@ export default { |
|
|
|
rgba(114, 100, 245, 1) |
|
|
|
); |
|
|
|
border-radius: 6px; |
|
|
|
|
|
|
|
&-in { |
|
|
|
width: 100%; |
|
|
|
height: 100%; |
|
|
|
background: #fff; |
|
|
|
border-radius: 6px; |
|
|
|
|
|
|
|
::v-deep .el-input-group__append { |
|
|
|
padding: 0; |
|
|
|
} |
|
|
|
|
|
|
|
img { |
|
|
|
float: right; |
|
|
|
width: 16px; |
|
|
@@ -498,6 +657,7 @@ export default { |
|
|
|
margin: 10px; |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
.divider { |
|
|
|
transform: scaleY (0.25); |
|
|
|
width: 100%; |
|
|
@@ -510,15 +670,18 @@ export default { |
|
|
|
) |
|
|
|
1 1; |
|
|
|
} |
|
|
|
|
|
|
|
::v-deep .el-input__inner { |
|
|
|
border: none; |
|
|
|
background-color: #faf9fe; |
|
|
|
} |
|
|
|
|
|
|
|
::v-deep .el-textarea__inner { |
|
|
|
border: none; |
|
|
|
background-color: #faf9fe; |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
.makeVideo { |
|
|
|
margin: 15px 20px 0; |
|
|
|
|
|
|
@@ -530,6 +693,7 @@ export default { |
|
|
|
background: linear-gradient(316deg, #6ee4d7 0%, #37c4f1 32%, #a49afc 100%); |
|
|
|
border-radius: 25px; |
|
|
|
} |
|
|
|
|
|
|
|
.upAndBottomBtn { |
|
|
|
.moveLayer { |
|
|
|
position: absolute; |
|
|
@@ -548,26 +712,31 @@ export default { |
|
|
|
background-color: rgba(255, 255, 255, 1); |
|
|
|
border-radius: 11px; |
|
|
|
} |
|
|
|
|
|
|
|
img { |
|
|
|
vertical-align: middle; |
|
|
|
width: 10px; |
|
|
|
height: 11px; |
|
|
|
margin: 1px 0 2px 0; |
|
|
|
} |
|
|
|
|
|
|
|
.below { |
|
|
|
top: 25%; |
|
|
|
} |
|
|
|
|
|
|
|
.active { |
|
|
|
opacity: 0.5; |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
.bottom { |
|
|
|
::v-deep .van-tabbar-item { |
|
|
|
color: rgba(51, 51, 51, 1) !important; |
|
|
|
font-size: 10px !important; |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
.synthesisDialog { |
|
|
|
position: fixed; |
|
|
|
top: 0; |
|
|
@@ -577,6 +746,7 @@ export default { |
|
|
|
z-index: 99999; |
|
|
|
color: #333; |
|
|
|
background: rgba(0, 0, 0, 0.5); |
|
|
|
|
|
|
|
&-in { |
|
|
|
position: absolute; |
|
|
|
top: 40%; |
|
|
@@ -588,22 +758,27 @@ export default { |
|
|
|
height: 95px; |
|
|
|
background-color: #fff; |
|
|
|
border-radius: 12px; |
|
|
|
|
|
|
|
.progress { |
|
|
|
width: 300px; |
|
|
|
|
|
|
|
::v-deep .el-progress__text { |
|
|
|
margin-left: 15px; |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
&-text { |
|
|
|
margin-top: 10px; |
|
|
|
font-size: 12px; |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
.tabSheet { |
|
|
|
height: 280px; |
|
|
|
padding-bottom: 0px; |
|
|
|
background-color: #f9f9f9; |
|
|
|
|
|
|
|
&-title { |
|
|
|
display: flex; |
|
|
|
justify-content: space-between; |
|
|
@@ -612,29 +787,35 @@ export default { |
|
|
|
font-size: 13px; |
|
|
|
line-height: 40px; |
|
|
|
background-color: #fff; |
|
|
|
|
|
|
|
.img { |
|
|
|
margin-top: -3px; |
|
|
|
margin-right: 3px; |
|
|
|
width: 16px; |
|
|
|
height: 16px; |
|
|
|
} |
|
|
|
|
|
|
|
.yesImg { |
|
|
|
margin-top: -3px; |
|
|
|
width: 24px; |
|
|
|
height: 16px; |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
&-content { |
|
|
|
height: 220px; |
|
|
|
padding: 0 10px; |
|
|
|
background-color: #f9f9f9; |
|
|
|
|
|
|
|
::v-deep .van-tab { |
|
|
|
background-color: #f9f9f9; |
|
|
|
} |
|
|
|
|
|
|
|
::v-deep .van-tab--active { |
|
|
|
font-size: 17px; |
|
|
|
font-weight: 700; |
|
|
|
} |
|
|
|
|
|
|
|
.list { |
|
|
|
height: 170px; |
|
|
|
overflow-y: scroll; |
|
|
@@ -656,22 +837,27 @@ export default { |
|
|
|
background: rgba(186, 186, 189, 0.5); |
|
|
|
border-radius: 24px; |
|
|
|
color: #fff; |
|
|
|
|
|
|
|
img { |
|
|
|
width: 32px; |
|
|
|
} |
|
|
|
|
|
|
|
> div { |
|
|
|
flex: 1; |
|
|
|
margin-left: 12px; |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
.active { |
|
|
|
background: #7264f5; |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
.list::-webkit-scrollbar { |
|
|
|
width: 0; |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
.myTab { |
|
|
|
display: flex; |
|
|
|
margin: 10px 0; |
|
|
@@ -680,6 +866,7 @@ export default { |
|
|
|
height: 40px; |
|
|
|
background-color: #eeeeee; |
|
|
|
border-radius: 6px; |
|
|
|
|
|
|
|
&-item { |
|
|
|
width: 50%; |
|
|
|
height: 30px; |
|
|
@@ -688,20 +875,25 @@ export default { |
|
|
|
text-align: center; |
|
|
|
background-color: #eeeeee; |
|
|
|
border-radius: 6px; |
|
|
|
|
|
|
|
img { |
|
|
|
width: 20px; |
|
|
|
height: 16px; |
|
|
|
margin-right: 8px; |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
.active { |
|
|
|
background-color: #fff; |
|
|
|
} |
|
|
|
|
|
|
|
&-show { |
|
|
|
width: 100%; |
|
|
|
height: 170px; |
|
|
|
|
|
|
|
&-title { |
|
|
|
font-size: 16px; |
|
|
|
|
|
|
|
i { |
|
|
|
display: block; |
|
|
|
margin-top: 4px; |
|
|
@@ -712,6 +904,7 @@ export default { |
|
|
|
border-radius: 2px; |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
&-list { |
|
|
|
height: 145px; |
|
|
|
padding-left: 4px; |
|
|
@@ -727,13 +920,16 @@ export default { |
|
|
|
width: 80px; |
|
|
|
height: 120px; |
|
|
|
z-index: 9; |
|
|
|
|
|
|
|
img { |
|
|
|
background: red; |
|
|
|
width: 80px; |
|
|
|
height: 120px; |
|
|
|
border-radius: 12px; |
|
|
|
} |
|
|
|
|
|
|
|
border-radius: 10px; |
|
|
|
|
|
|
|
.icon-error { |
|
|
|
float: left; |
|
|
|
position: absolute; |
|
|
@@ -750,10 +946,12 @@ export default { |
|
|
|
background: #666666; |
|
|
|
border-radius: 6px; |
|
|
|
} |
|
|
|
|
|
|
|
&:nth-child(4n) { |
|
|
|
margin-right: 0px !important; |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
&-active { |
|
|
|
position: absolute; |
|
|
|
top: -3px; |
|
|
@@ -769,6 +967,7 @@ export default { |
|
|
|
rgba(81, 217, 202, 1), |
|
|
|
rgba(114, 100, 245, 1) |
|
|
|
); |
|
|
|
|
|
|
|
.whiteBox { |
|
|
|
transition: all 0.5s; |
|
|
|
width: 100%; |
|
|
@@ -777,6 +976,7 @@ export default { |
|
|
|
border-radius: 12px; |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
&-upload { |
|
|
|
position: relative; |
|
|
|
margin-right: 10px; |
|
|
@@ -785,6 +985,7 @@ export default { |
|
|
|
height: 120px; |
|
|
|
background: #ddd; |
|
|
|
border-radius: 10px; |
|
|
|
|
|
|
|
img { |
|
|
|
background-color: #fff; |
|
|
|
position: absolute; |
|
|
@@ -792,6 +993,7 @@ export default { |
|
|
|
left: 50%; |
|
|
|
transform: translate(-50%, -50%); |
|
|
|
} |
|
|
|
|
|
|
|
input { |
|
|
|
width: 100%; |
|
|
|
height: 100%; |
|
|
@@ -801,6 +1003,7 @@ export default { |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
// 隐藏滚动条 |
|
|
|
.myTab-show-list::-webkit-scrollbar { |
|
|
|
display: none; |
|
|
|