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 }}
-
+
请输入文案
+
@@ -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;