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