diff --git a/src/views/model/chooseModel.vue b/src/views/model/chooseModel.vue
index 260edd0..472d3c1 100644
--- a/src/views/model/chooseModel.vue
+++ b/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)
diff --git a/src/views/model/editModel.vue b/src/views/model/editModel.vue
index b66606b..f15be13 100644
--- a/src/views/model/editModel.vue
+++ b/src/views/model/editModel.vue
@@ -49,7 +49,7 @@
英语_女性_安娜
- 立即制作
+ 立即制作
@@ -155,18 +155,19 @@
>
-
暂无数据
-
-

-
{{ item.title }}
-
+
请输入文案
+
+
+

+
{{ item.title }}
+
+
@@ -311,6 +312,9 @@
+
+
+
@@ -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;
diff --git a/src/views/model/previewModel.vue b/src/views/model/previewModel.vue
index 1aa5a8b..d921fea 100644
--- a/src/views/model/previewModel.vue
+++ b/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
diff --git a/src/views/myPage/myPage.vue b/src/views/myPage/myPage.vue
index 4a0c8cf..7b0cdfa 100644
--- a/src/views/myPage/myPage.vue
+++ b/src/views/myPage/myPage.vue
@@ -13,6 +13,7 @@
@@ -52,9 +53,9 @@
-
+
删除
@@ -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;