Selaa lähdekoodia

复制模版功能

master
congzc 1 vuosi sitten
vanhempi
commit
c97b83e31a
11 muutettua tiedostoa jossa 368 lisäystä ja 70 poistoa
  1. BIN
      src/assets/icon/icon-home.png
  2. BIN
      src/assets/icon/icon-shang.png
  3. BIN
      src/assets/icon/icon-xia.png
  4. +16
    -2
      src/router/index.js
  5. +39
    -2
      src/views/login/login.vue
  6. +2
    -1
      src/views/model/chooseModel.vue
  7. +19
    -25
      src/views/model/editModel.vue
  8. +29
    -9
      src/views/model/previewModel.vue
  9. +91
    -0
      src/views/model/videoCreate.vue
  10. +78
    -0
      src/views/model/videoFail.vue
  11. +94
    -31
      src/views/myPage/myPage.vue

BIN
src/assets/icon/icon-home.png Näytä tiedosto

Before After
Leveys: 200  |  Korkeus: 200  |  Koko: 6.3 KiB

BIN
src/assets/icon/icon-shang.png Näytä tiedosto

Before After
Leveys: 200  |  Korkeus: 200  |  Koko: 3.7 KiB

BIN
src/assets/icon/icon-xia.png Näytä tiedosto

Before After
Leveys: 200  |  Korkeus: 200  |  Koko: 3.7 KiB

+ 16
- 2
src/router/index.js Näytä tiedosto

@@ -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',


+ 39
- 2
src/views/login/login.vue Näytä tiedosto

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


+ 2
- 1
src/views/model/chooseModel.vue Näytä tiedosto

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



+ 19
- 25
src/views/model/editModel.vue Näytä tiedosto

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



+ 29
- 9
src/views/model/previewModel.vue Näytä tiedosto

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


+ 91
- 0
src/views/model/videoCreate.vue Näytä tiedosto

@@ -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">&nbsp;&nbsp;返回&nbsp;&nbsp;</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>

+ 78
- 0
src/views/model/videoFail.vue Näytä tiedosto

@@ -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">&nbsp;&nbsp;返回&nbsp;&nbsp;</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>

+ 94
- 31
src/views/myPage/myPage.vue Näytä tiedosto

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


Ladataan…
Peruuta
Tallenna