| @@ -68,12 +68,26 @@ const routes = [ | |||
| name: 'editPosition-chatgpt', | |||
| component: () => import("../views/model/editPosition-chatgpt"), | |||
| }, | |||
| // 编辑位置new | |||
| // 下载预览视频页 | |||
| { | |||
| path: '/videoDownload', | |||
| name: 'videoDownload', | |||
| component: () => import("../views/videoDownload/videoDownload"), | |||
| }, | |||
| } | |||
| , | |||
| //视频生成中页 | |||
| { | |||
| path: '/videoCreate', | |||
| name: 'videoCreate', | |||
| component: () => import("../views/model/videoCreate"), | |||
| }, | |||
| , | |||
| //视频生成失败 | |||
| { | |||
| path: '/videoFail', | |||
| name: 'videoFail', | |||
| component: () => import("../views/model/videoFail"), | |||
| }, | |||
| // 聊天首页new | |||
| { | |||
| path: '/chat', | |||
| @@ -45,6 +45,10 @@ | |||
| <span>没有账号?</span> | |||
| <span class="greenColor" @click="loginType = 5">立即注册</span> | |||
| </div> | |||
| <div class="toHome wordColor"> | |||
| <img src="../../assets/icon/icon-home.png" alt="" /> | |||
| <span @click="$router.push('myPage')">回到首页</span> | |||
| </div> | |||
| </el-form> | |||
| </div> | |||
| @@ -533,7 +537,16 @@ export default { | |||
| // 有邀请码直接前往我的页面 | |||
| } else if (status == 1) { | |||
| Toast.success('登录成功!'); | |||
| this.$router.push('/myPage'); | |||
| if (this.$route.query.modelId) { | |||
| this.$router.push({ | |||
| path: '/editModel', | |||
| query: { | |||
| modelId: this.$route.query.modelId | |||
| } | |||
| }); | |||
| } else { | |||
| this.$router.push('/myPage'); | |||
| } | |||
| } | |||
| } catch (error) { | |||
| console.log(error, 'error'); | |||
| @@ -554,7 +567,16 @@ export default { | |||
| const res = await doUpdateInviteCode(inviteCodeData); | |||
| console.log(res, '更新邀请码数据'); | |||
| Toast.success('登录成功!'); | |||
| this.$router.push('/myPage'); | |||
| if (this.$route.query.modelId) { | |||
| this.$router.push({ | |||
| path: '/editModel', | |||
| query: { | |||
| modelId: this.$route.query.modelId | |||
| } | |||
| }); | |||
| } else { | |||
| this.$router.push('/myPage'); | |||
| } | |||
| } catch (error) { | |||
| console.log(error, 'error'); | |||
| Toast.fail(error.message); | |||
| @@ -575,6 +597,21 @@ export default { | |||
| </script> | |||
| <style lang="scss" scoped> | |||
| .toHome { | |||
| display: flex; | |||
| justify-content: flex-end; | |||
| width: 100%; | |||
| height: 18px; | |||
| margin-top: -17px; | |||
| img { | |||
| // margin-top: -15px; | |||
| width: 18px; | |||
| vertical-align: top; | |||
| } | |||
| span { | |||
| margin-top: 5px; | |||
| } | |||
| } | |||
| ::v-deep .el-icon-circle-close:before { | |||
| content: '' !important; | |||
| } | |||
| @@ -123,7 +123,8 @@ export default { | |||
| query: { | |||
| imgUrl: res.data.coverImg, //模版图片路径 | |||
| mouldSmId: res.data.mouldSmId, //模版标识 | |||
| modelId: res.data.id //模版id | |||
| modelId: res.data.id, //模版id | |||
| videoType: res.data.videoType //模版id | |||
| } | |||
| }); | |||
| @@ -573,11 +573,6 @@ export default { | |||
| }; | |||
| console.log(data, '最终提交的参数'); | |||
| if (type == 1) { | |||
| Toast.loading({ | |||
| duration: 3000, | |||
| message: '加载中...', | |||
| forbidClick: true | |||
| }); | |||
| if (!this.textareaContent) { | |||
| // Toast.fail('请输入文案内容!'); | |||
| Toast('请输入文案内容!'); | |||
| @@ -639,12 +634,19 @@ export default { | |||
| async createVideo(data) { | |||
| let that = this; | |||
| try { | |||
| Toast({ | |||
| message: '请稍等', | |||
| duration: 60000, | |||
| position: 'bottom' | |||
| }); | |||
| const res = await doCreateVideo(data); | |||
| Toast.clear(); | |||
| this.$router.push('videoCreate'); | |||
| return; | |||
| console.log(res, '生成视频'); | |||
| Toast.success('提交成功!'); | |||
| // *#06# | |||
| that.showSynthesisDialog = true; //显示进度条 | |||
| this.timeOuter = setTimeout(() => { | |||
| this.isShowCover = true; | |||
| }, 2000); | |||
| @@ -748,7 +750,6 @@ export default { | |||
| const res = await getModelDetailById(id); | |||
| // console.log(JSON.parse(res.data.personMouldSm)) | |||
| console.log(); | |||
| this.materialList.BGI = JSON.parse(res.data.backgroundSm) || {}; | |||
| // this.materialList.BGI.id = JSON.parse(res.data.backgroundSm).id + ''; | |||
| this.materialList.BGI.id = res.data.backgroundId + ''; | |||
| @@ -766,6 +767,7 @@ export default { | |||
| } | |||
| this.videoType = res.data.videoType; | |||
| // 判断是不是复制或者重新生成的,从而来设置id | |||
| this.id = res.data.id; | |||
| // this.imgUrl = res.data.personMould.coverImg | |||
| this.personMouldId = res.data.personMouldId; | |||
| @@ -788,24 +790,16 @@ export default { | |||
| return item.id == this.soundChoose.id; | |||
| }); //高亮处理 | |||
| this.contentLoading = false; | |||
| // backgroundMouldId: '', // 背景id | |||
| // backgroundMouldSmId: '', //背景标识 | |||
| // 如果视频生成了 | |||
| // if ([2, 4, 5, 6].includes(res.data.videoStatus)) { | |||
| // this.$router.push({ | |||
| // // path: '/downloadVideo', | |||
| // path: '/videoDownload', | |||
| // query: { | |||
| // id: this.$route.query.id | |||
| // } | |||
| // }); | |||
| // return; | |||
| // } | |||
| // if ([1].includes(res.data.videoStatus)) { | |||
| // this.$router.push('/myPage'); | |||
| // return; | |||
| // } | |||
| // 判断是不是复制或者重新生成的,从而来设置id | |||
| if (this.$route.query.copy) { | |||
| this.id = null; | |||
| this.soundChoose = {}; | |||
| this.soundChoose2 = {}; | |||
| this.textareaContent = ''; | |||
| this.inputTitle = '您的新数字人'; | |||
| this.soundItemListAction = -1; | |||
| this.soundItemListAction2 = -1; | |||
| } | |||
| } catch (error) { | |||
| console.log(error, 'error'); | |||
| @@ -3,7 +3,7 @@ | |||
| <div id="top"></div> | |||
| <HeadTop /> | |||
| <!-- 展示图片 --> | |||
| <div v-if="imgUrl" class="shouModelImg"> | |||
| <div v-if="imgUrl" class="shouModelImg" :class="videoType == 1 ? '' : 'videoType2'"> | |||
| <img :src="imgUrl" alt="" /> | |||
| </div> | |||
| <div class="makeMpdel" @click="handleMakeMpdel">立即制作</div> | |||
| @@ -34,7 +34,8 @@ export default { | |||
| modelId: null, //模版id | |||
| mouldSmId: null, //模版标识 | |||
| saveID: null, //作品id | |||
| id: null | |||
| id: null, | |||
| videoType: null | |||
| }; | |||
| }, | |||
| computed: { | |||
| @@ -48,14 +49,20 @@ export default { | |||
| // 点击立即制作 | |||
| handleMakeMpdel() { | |||
| if (!this.hasToken) { | |||
| this.$router.push('/login'); | |||
| this.$router.push({ | |||
| path: '/login', | |||
| query: { | |||
| modelId: this.modelId | |||
| } | |||
| }); | |||
| } else { | |||
| this.$router.push({ | |||
| path: '/editModel', | |||
| query: { | |||
| modelId: this.modelId | |||
| } | |||
| }); | |||
| } | |||
| this.$router.push({ | |||
| path: '/editModel', | |||
| query: { | |||
| modelId: this.modelId | |||
| } | |||
| }); | |||
| }, | |||
| go(url) { | |||
| @@ -65,6 +72,7 @@ export default { | |||
| async created() { | |||
| this.modelId = this.$route.query.modelId; | |||
| this.imgUrl = this.$route.query.imgUrl; | |||
| this.videoType = this.$route.query.videoType; | |||
| // const res = await getModelDetailById(this.id); | |||
| // this.imgUrl = res.data.personMould.imgUrl; | |||
| this.hasToken = localStorage.getItem('AccessToken'); | |||
| @@ -95,6 +103,18 @@ export default { | |||
| border-radius: 10px; | |||
| } | |||
| } | |||
| .videoType2 { | |||
| display: flex; | |||
| align-items: center; | |||
| width: 315px; | |||
| height: 518px; | |||
| border-radius: 10px; | |||
| img { | |||
| width: 305px; | |||
| height: 173px; | |||
| border-radius: 10px; | |||
| } | |||
| } | |||
| .makeMpdel { | |||
| margin-left: 30px; | |||
| width: 315px; | |||
| @@ -0,0 +1,91 @@ | |||
| <template> | |||
| <div :class="inPage ? 'page active' : 'page'"> | |||
| <div id="top"></div> | |||
| <HeadTop /> | |||
| <div style="padding: 0 20px"> | |||
| <h1 style="margin-top: 30px">提交视频生成成功</h1> | |||
| <h1 style="margin-top: 30px">请耐心等待</h1> | |||
| <h1 style="margin-top: 20px"> | |||
| {{ countdown }}秒后将自动跳转至 | |||
| <i @click="$router.push({ path: '/myPage' })">首页</i> | |||
| </h1> | |||
| <h4 style="display: flex; justify-content: end; margin-top: 20px"> | |||
| 您也可以点击 | |||
| <i @click="$router.push('/myPage')" class="wordColor"> 返回 </i> | |||
| 至 首页 | |||
| </h4> | |||
| </div> | |||
| </div> | |||
| </template> | |||
| <script> | |||
| // 组件 | |||
| import Vue from 'vue'; | |||
| import { Toast } from 'vant'; | |||
| import { mapState, mapActions } from 'vuex'; | |||
| // 工具 | |||
| import { scrollToID } from '../../utils'; | |||
| import HeadTop from './../../components/common/head.vue'; | |||
| Vue.use(Toast); | |||
| export default { | |||
| components: { | |||
| HeadTop | |||
| }, | |||
| data() { | |||
| return { | |||
| inPage: false, | |||
| countdown: 10, | |||
| timer: null | |||
| }; | |||
| }, | |||
| computed: { | |||
| ...mapState({ | |||
| characters: state => state.publicObj.characters | |||
| }) | |||
| }, | |||
| methods: { | |||
| ...mapActions(['setCharacters']), | |||
| getCountdown() { | |||
| this.timer = setInterval(() => { | |||
| if (this.countdown < 1) { | |||
| this.clearTimer(); | |||
| this.countdown = 0; | |||
| this.$router.push('myPage'); | |||
| } else { | |||
| this.startLoading(); | |||
| } | |||
| }, 1000); | |||
| }, | |||
| startLoading() { | |||
| this.countdown--; | |||
| }, | |||
| clearTimer() { | |||
| clearInterval(this.timer); | |||
| this.timer = null; | |||
| } | |||
| }, | |||
| created() { | |||
| this.getCountdown(); | |||
| }, | |||
| mounted() { | |||
| this.inPage = true; | |||
| scrollToID('top'); | |||
| }, | |||
| destroyed() { | |||
| this.clearTimer(); | |||
| } | |||
| }; | |||
| </script> | |||
| <style lang="scss" scoped> | |||
| .page { | |||
| transform: translateX(30%); | |||
| opacity: 0; | |||
| transition: all 0.5s; // global-transition | |||
| &.active { | |||
| opacity: 1; | |||
| transform: translateX(0); | |||
| } | |||
| } | |||
| </style> | |||
| @@ -0,0 +1,78 @@ | |||
| <template> | |||
| <div :class="inPage ? 'page active' : 'page'"> | |||
| <div id="top"></div> | |||
| <HeadTop /> | |||
| <div style="padding: 0 20px"> | |||
| <h1 style="margin-top: 30px">视频生成失败</h1> | |||
| <h1 style="margin-top: 30px">失败原因是:</h1> | |||
| <h1 style="margin-top: 20px"> | |||
| <i | |||
| @click=" | |||
| $router.push({ | |||
| path: 'editModel', | |||
| query: { | |||
| id: $route.query.id, | |||
| copy: true | |||
| } | |||
| }) | |||
| " | |||
| class="wordColor"> | |||
| 重新编辑 | |||
| </i> | |||
| </h1> | |||
| <h4 style="display: flex; justify-content: end; margin-top: 20px"> | |||
| 您也可以点击 | |||
| <i @click="$router.push(`myPage`)" class="wordColor"> 返回 </i> | |||
| 至 首页 | |||
| </h4> | |||
| </div> | |||
| </div> | |||
| </template> | |||
| <script> | |||
| // 组件 | |||
| import Vue from 'vue'; | |||
| import { Toast } from 'vant'; | |||
| import { mapState, mapActions } from 'vuex'; | |||
| // 工具 | |||
| import { scrollToID } from '../../utils'; | |||
| import HeadTop from '../../components/common/head.vue'; | |||
| Vue.use(Toast); | |||
| export default { | |||
| components: { | |||
| HeadTop | |||
| }, | |||
| data() { | |||
| return { | |||
| inPage: false | |||
| }; | |||
| }, | |||
| computed: { | |||
| ...mapState({ | |||
| characters: state => state.publicObj.characters | |||
| }) | |||
| }, | |||
| methods: { | |||
| ...mapActions(['setCharacters']) | |||
| }, | |||
| created() {}, | |||
| mounted() { | |||
| this.inPage = true; | |||
| scrollToID('top'); | |||
| }, | |||
| destroyed() {} | |||
| }; | |||
| </script> | |||
| <style lang="scss" scoped> | |||
| .page { | |||
| transform: translateX(30%); | |||
| opacity: 0; | |||
| transition: all 0.5s; // global-transition | |||
| &.active { | |||
| opacity: 1; | |||
| transform: translateX(0); | |||
| } | |||
| } | |||
| </style> | |||
| @@ -27,7 +27,7 @@ | |||
| <div v-show="!showLoading"> | |||
| <!-- 列表样式--大图 --> | |||
| <div v-if="videoList.length == 0" :style="{ height: '250px', textAlign: 'center', lineHeight: '250px' }">暂无数据</div> | |||
| <!-- 新 修改v-if--> | |||
| <!-- 新 修改v-if videoList--> | |||
| <div v-if="waterfallBug"> | |||
| <waterfall v-if="videoList.length != 0" v-show="listActive == 1" class="waterFall" :col="2" :data="videoList"> | |||
| <div v-for="(item, index) in videoList" class="waterFall-item" :key="item.id ? item.id : index" @click="goDetail(item)"> | |||
| @@ -40,15 +40,25 @@ | |||
| <div>视频容量:{{ bytesToSize(item.videoSize) }}</div> | |||
| <div>创建时间:{{ changeTime(item.createDate, 'YYYY-MM-DD hh:mm:ss') }}</div> | |||
| </div> | |||
| <!-- 视频状态 草稿还是未完成还是失败 --> | |||
| <div class="waterFall-item-state" v-if="item.videoStatus == 2"> | |||
| <!-- 视频状态 草稿还是未完成还是失败 0草稿,1246生成中,3失败,5成功--> | |||
| <div class="waterFall-item-state" v-if="item.videoStatus != 5"> | |||
| <!-- <div class="waterFall-item-state" v-if="item.videoStatus == 2"> --> | |||
| <div v-if="item.videoStatus == 0" class="cover">草稿</div> | |||
| <div v-if="item.videoStatus == 1" class="cover">视频生成中</div> | |||
| <div v-if="[1, 2, 4, 6].includes(item.videoStatus)" class="cover">视频生成中</div> | |||
| <div v-if="item.videoStatus == 3" class="cover">视频生成失败</div> | |||
| </div> | |||
| <!-- 删除 --> | |||
| <div class="waterFall-item-del" @click.stop="goDelete(item.id)"> | |||
| <!-- <div class="waterFall-item-del" @click.stop="goDelete(item.id)"> | |||
| <img src="../../assets/icon/icon-trash.png" alt="" /> | |||
| </div> --> | |||
| <div class="waterFall-item-del" @click.stop="copyAndDel(item.id)"> | |||
| <img v-show="clickAction == item.id" src="../../assets/icon/icon-shang.png" alt="" /> | |||
| <img v-show="clickAction != item.id" src="../../assets/icon/icon-xia.png" alt="" /> | |||
| </div> | |||
| <!-- 删除和拷贝 --> | |||
| <div v-show="clickAction == item.id" class="copyAndDelBox"> | |||
| <div @click.stop="copyModel(item.id)">复制</div> | |||
| <div @click.stop="goDelete(item.id)">删除</div> | |||
| </div> | |||
| </div> | |||
| </div> | |||
| @@ -72,8 +82,8 @@ | |||
| <div class="videoName"> | |||
| {{ item.title || '无标题' }} | |||
| </div> | |||
| <div class="createTime">视频时长:{{ formatSeconds(item.videoTime) }}</div> | |||
| <div class="createTime">视频容量:{{ bytesToSize(item.videoSize) }}</div> | |||
| <!-- <div class="createTime">视频时长:{{ formatSeconds(item.videoTime) }}</div> --> | |||
| <!-- <div class="createTime">视频容量:{{ bytesToSize(item.videoSize) }}</div> --> | |||
| <div class="createTime">创建时间:{{ changeTime(item.createDate, 'YYYY-MM-DD hh:mm:ss') }}</div> | |||
| </div> | |||
| <!-- 右侧更多 --> | |||
| @@ -140,6 +150,7 @@ export default { | |||
| }, | |||
| data() { | |||
| return { | |||
| clickAction: -1, //右上角下拉 | |||
| hasToken: null, // 判断有没有token来判断有没有登录 | |||
| showLoading: true, // 加载处理 | |||
| waterfallBug: true, // 解决瀑布流不显示bug | |||
| @@ -168,6 +179,24 @@ export default { | |||
| methods: { | |||
| ...mapActions(['setCharacters']), | |||
| // 复制 | |||
| copyModel(id) { | |||
| this.$router.push({ | |||
| path: '/editModel', | |||
| query: { | |||
| id: id, | |||
| copy: true | |||
| } | |||
| }); | |||
| }, | |||
| // 点击右上角 | |||
| copyAndDel(id) { | |||
| if (this.clickAction == id) { | |||
| this.clickAction = -1; | |||
| } else { | |||
| this.clickAction = id; | |||
| } | |||
| }, | |||
| // 草稿箱切换 | |||
| draftChange(type) { | |||
| this.listActive = type; | |||
| @@ -239,12 +268,13 @@ export default { | |||
| }); | |||
| } | |||
| //生成中 | |||
| else if (status == 1) { | |||
| else if ([1, 2, 4, 6].includes(status)) { | |||
| Toast.fail('视频生成中'); | |||
| this.$router.push('/videoCreate'); | |||
| return; | |||
| } | |||
| // 成功 | |||
| else if ([2, 4, 5, 6].includes(status)) { | |||
| else if ([5].includes(status)) { | |||
| const url = item.videoPathUri + item.videoPath; | |||
| this.$router.push({ | |||
| // path: '/downloadVideo', | |||
| @@ -259,13 +289,9 @@ export default { | |||
| // 失败 | |||
| else if (status == 3) { | |||
| this.$router.push({ | |||
| path: '/editModel', | |||
| path: '/videoFail', | |||
| query: { | |||
| id: item.id, | |||
| imgUrl: item.id, | |||
| modelId: item.id, | |||
| mouldSmId: item.id, | |||
| modify: true | |||
| id: item.id | |||
| } | |||
| }); | |||
| } | |||
| @@ -298,16 +324,24 @@ export default { | |||
| this.showLoading = true; | |||
| this.waterfallBug = false; | |||
| // 根据listActive判断是不是看的草稿箱 | |||
| let videoStatuss = this.listActive == 1 ? [2, 4, 5, 6] : [0, 1, 3]; | |||
| // let videoStatuss = this.listActive == 1 ? [2, 4, 5, 6] : [0, 1, 3]; | |||
| let videoStatuss = this.listActive == 1 ? [1, 2, 3, 4, 5, 6] : [0]; | |||
| const res = await getVideoList(pageNum, pageSize, videoType, videoStatuss); | |||
| console.log(res, '获取作品列表'); | |||
| this.videoList = res.data.list; | |||
| console.log(this.videoList); | |||
| this.waterfallBug = true; | |||
| console.log(this.waterfallBug); | |||
| this.total = res.data.total; | |||
| console.log(this.total); | |||
| this.showLoading = false; | |||
| console.log(this.showLoading); | |||
| } catch (error) { | |||
| console.log(error, 'error'); | |||
| // Toast.fail(error.message) | |||
| // Toast.fail(error.message); | |||
| } | |||
| }, | |||
| @@ -369,19 +403,18 @@ export default { | |||
| } | |||
| }, | |||
| mounted() { | |||
| async mounted() { | |||
| this.inPage = true; | |||
| scrollToID('top'); | |||
| }, | |||
| async created() { | |||
| if (!this.hasToken) { | |||
| this.hasToken = localStorage.getItem('AccessToken'); | |||
| this.showLoading = false; | |||
| } | |||
| if (this.hasToken) { | |||
| await this.loadVideoList(1, this.pageSize, this.videoType); | |||
| } else { | |||
| this.showLoading = false; | |||
| } | |||
| }, | |||
| created() { | |||
| this.hasToken = localStorage.getItem('AccessToken'); | |||
| } | |||
| }; | |||
| </script> | |||
| @@ -472,18 +505,18 @@ export default { | |||
| margin-bottom: 20px; | |||
| .videoPrv { | |||
| width: 150px; | |||
| width: 140px; | |||
| height: 100px; | |||
| // background-color: #979797; | |||
| img { | |||
| position: absolute; | |||
| width: 150px; | |||
| width: 140px; | |||
| height: 100px; | |||
| border-radius: 6px; | |||
| } | |||
| .cover { | |||
| position: absolute; | |||
| width: 150px; | |||
| width: 140px; | |||
| height: 100px; | |||
| line-height: 100px; | |||
| background-color: #00000034; | |||
| @@ -494,7 +527,7 @@ export default { | |||
| } | |||
| .videoInfo { | |||
| flex: 1; | |||
| margin-left: 12px; | |||
| margin-left: 5px; | |||
| white-space: nowrap; | |||
| overflow: hidden; | |||
| text-overflow: ellipsis; | |||
| @@ -617,6 +650,7 @@ export default { | |||
| display: flex; | |||
| justify-content: space-around; | |||
| align-items: center; | |||
| z-index: 9999; | |||
| img { | |||
| width: 60%; | |||
| height: 60%; | |||
| @@ -740,8 +774,14 @@ export default { | |||
| position: absolute; | |||
| top: 0px; | |||
| left: 0px; | |||
| padding: 7.5px; | |||
| border-radius: 0 0 12px 0; | |||
| width: 100%; | |||
| height: 100%; | |||
| // padding: 7.5px; | |||
| border-radius: 12px; | |||
| display: flex; | |||
| justify-content: center; | |||
| align-items: center; | |||
| text-align: center; | |||
| color: #f7dcdc; | |||
| background-color: rgba(0, 0, 0, 0.3); | |||
| } | |||
| @@ -758,6 +798,29 @@ export default { | |||
| height: 15px; | |||
| width: 15px; | |||
| } | |||
| z-index: 999; | |||
| } | |||
| .copyAndDelBox { | |||
| position: absolute; | |||
| top: 0px; | |||
| left: 0px; | |||
| width: 100%; | |||
| height: 100%; | |||
| // padding: 7.5px; | |||
| border-radius: 12px; | |||
| display: flex; | |||
| flex-direction: column; | |||
| justify-content: center; | |||
| align-items: center; | |||
| text-align: center; | |||
| color: #f7dcdc; | |||
| background-color: rgba(0, 0, 0, 0.5); | |||
| z-index: 99; | |||
| transition: opacity 0.3s ease-out; | |||
| div { | |||
| font-size: 15px; | |||
| margin-bottom: 20px; | |||
| } | |||
| } | |||
| } | |||
| } | |||