瀏覽代碼

生成视频接口调用

master
congzc 2 年之前
父節點
當前提交
6ae1622493
共有 4 個文件被更改,包括 274 次插入47 次删除
  1. +20
    -15
      src/views/model/chooseModel.vue
  2. +222
    -19
      src/views/model/editModel.vue
  3. +5
    -2
      src/views/model/previewModel.vue
  4. +27
    -11
      src/views/myPage/myPage.vue

+ 20
- 15
src/views/model/chooseModel.vue 查看文件

@@ -135,14 +135,15 @@ export default {
const res = await getModeDetailById(id)
console.log(res, '根据id获取模板详情')
const modelDetail = res.data
this.$router.push({
path: '/previewModel',
query: {
imgUrl: res.data.coverImg, //模版图片路径
mouldSmId: res.data.mouldSmId, //模版标识
modelId: res.data.id //模版id
}
})
await this.goSetPaperWork(modelDetail)
// this.$router.push({
// path: '/previewModel',
// query: {
// imgUrl: res.data.coverImg, //模版图片路径
// mouldSmId: res.data.mouldSmId, //模版标识
// modelId: res.data.id //模版id
// }
// })

// this.goSetPaperWork(modelDetail);
} catch (error) {
@@ -153,15 +154,19 @@ export default {

async saveToSetPaper(data, modelDetail) {
try {
console.log(modelDetail.coverImg, 11111111111111111)
const res = await saveOrUpdateUserVideo(data)
console.log(res, '保存或修改用户作品')
// this.$router.push({
// path: "/getPaper",
// query: {
// modelDetail: JSON.stringify(modelDetail),
// saveID: res.data.id,
// },
// });
this.$router.push({
path: '/previewModel',
query: {
saveID: res.data.id,
imgUrl: modelDetail.coverImg, //模版图片路径
mouldSmId: modelDetail.mouldSmId, //模版标识
modelId: modelDetail.id, //模版id
modelDetail: JSON.stringify(modelDetail)
}
})
} catch (error) {
console.log(error, 'error')
Toast.fail(error.message)


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

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


+ 5
- 2
src/views/model/previewModel.vue 查看文件

@@ -29,7 +29,8 @@ export default {
inPage: false,
imgUrl: null, //模版图片地址
modelId: null, //模版id
mouldSmId: null //模版标识
mouldSmId: null, //模版标识
saveID: null //作品id
}
},
computed: {
@@ -47,7 +48,8 @@ export default {
query: {
imgUrl: this.imgUrl,
modelId: this.modelId,
mouldSmId: this.mouldSmId
mouldSmId: this.mouldSmId,
saveID: this.saveID
}
})
},
@@ -60,6 +62,7 @@ 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
},
mounted() {
this.inPage = true


+ 27
- 11
src/views/myPage/myPage.vue 查看文件

@@ -13,6 +13,7 @@
</div>
<!-- 具体内容 -->
<van-swipe-cell
loading
v-for="(item, index) in videoList"
:key="item.id ? item.id : index"
>
@@ -52,9 +53,9 @@
</div>
<!-- 弹出层 -->
<van-popup v-if="clickItem == item.id" v-model="showPopup">
<div @click="closeDialog">
<!-- <div @click="closeDialog">
<i class="el-icon-edit" />&nbsp;编辑
</div>
</div> -->
<div @click="goDelete(item.id)">
<i class="el-icon-delete" />&nbsp;删除
</div>
@@ -209,18 +210,28 @@ export default {

// 查看详情
goDetail(item) {
console.log(item)
const status = item.videoStatus
//草稿
if (status == 0) {
this.$router.push({
path: '/getPaper',
path: '/editModel',
query: {
id: item.id
saveID: item.id,
imgUrl: item.id,
modelId: item.id,
mouldSmId: item.id,
modify: true
}
})
} else if (status == 1) {
}
//生成中
else if (status == 1) {
Toast.fail('视频生成中')
return
} else if (status == 2) {
}
// 成功
else if (status == 2) {
const url = item.videoPathUri + item.videoPath
this.$router.push({
path: '/downloadVideo',
@@ -229,11 +240,17 @@ export default {
videoUrl: url
}
})
} else if (status == 3) {
}
// 失败
else if (status == 3) {
this.$router.push({
path: '/getPaper',
path: '/editModel',
query: {
id: item.id
id: item.id,
imgUrl: item.id,
modelId: item.id,
mouldSmId: item.id,
modify: true
}
})
}
@@ -457,9 +474,8 @@ export default {
justify-content: center;
top: 70%;
left: 290px;

width: 80px;
height: 60px;
height: 30px;
border-radius: 12px;
font-size: 14px;
line-height: 28px;


Loading…
取消
儲存