|
|
|
@@ -24,31 +24,10 @@ |
|
|
|
/></span> --> |
|
|
|
<div class="title-change"> |
|
|
|
<div class="displayFlex"> |
|
|
|
<span |
|
|
|
v-show="listActive == 1" |
|
|
|
class="floatRight" |
|
|
|
:class="videoType == 1 ? 'wordColor' : ''" |
|
|
|
@click="getNewList(1)" |
|
|
|
>只看竖屏</span |
|
|
|
> |
|
|
|
<span |
|
|
|
v-show="listActive == 1" |
|
|
|
class="floatRight" |
|
|
|
:class="videoType == 2 ? 'wordColor' : ''" |
|
|
|
@click="getNewList(2)" |
|
|
|
>只看横屏</span |
|
|
|
> |
|
|
|
<span |
|
|
|
v-show="listActive == 1" |
|
|
|
class="floatRight" |
|
|
|
@click="draftChange(2)" |
|
|
|
>草稿箱</span |
|
|
|
><span |
|
|
|
@click="draftChange(1)" |
|
|
|
v-show="listActive == 2" |
|
|
|
class="floatRight" |
|
|
|
>已完成</span |
|
|
|
> |
|
|
|
<span v-show="listActive == 1" class="floatRight" :class="videoType == 1 ? 'wordColor' : ''" @click="getNewList(1)">只看竖屏</span> |
|
|
|
<span v-show="listActive == 1" class="floatRight" :class="videoType == 2 ? 'wordColor' : ''" @click="getNewList(2)">只看横屏</span> |
|
|
|
<span v-show="listActive == 1" class="floatRight" @click="draftChange(2)">草稿箱</span> |
|
|
|
<span @click="draftChange(1)" v-show="listActive == 2" class="floatRight">已完成</span> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
@@ -59,48 +38,22 @@ |
|
|
|
|
|
|
|
<!-- 新 修改v-if--> |
|
|
|
<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)" |
|
|
|
> |
|
|
|
<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)"> |
|
|
|
<div class="waterFall-item-paddding"> |
|
|
|
<img |
|
|
|
:src=" |
|
|
|
item.coverImg |
|
|
|
? item.coverImg |
|
|
|
: item.videoType == 2 |
|
|
|
? defaultImg |
|
|
|
: defaultImg1 |
|
|
|
" |
|
|
|
alt="" |
|
|
|
/> |
|
|
|
<img :src="item.coverImg ? item.coverImg : item.videoType == 2 ? defaultImg : defaultImg1" alt="" /> |
|
|
|
<!-- 渐变遮罩层 --> |
|
|
|
<div class="waterFall-item-mask"> |
|
|
|
<div>{{ item.title || '暂无' }}</div> |
|
|
|
<div>{{ item.title || '无标题' }}</div> |
|
|
|
<div>视频时长:{{ formatSeconds(item.videoTime) }}</div> |
|
|
|
<div>视频容量:{{ bytesToSize(item.videoSize) }}</div> |
|
|
|
<div> |
|
|
|
创建时间:{{ |
|
|
|
changeTime(item.createDate, 'YYYY-MM-DD hh:mm:ss') |
|
|
|
}} |
|
|
|
</div> |
|
|
|
<div>创建时间:{{ changeTime(item.createDate, 'YYYY-MM-DD hh:mm:ss') }}</div> |
|
|
|
</div> |
|
|
|
<!-- 视频状态 草稿还是未完成还是失败 --> |
|
|
|
<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="item.videoStatus == 3" class="cover"> |
|
|
|
视频生成失败 |
|
|
|
</div> |
|
|
|
<div v-if="item.videoStatus == 3" class="cover">视频生成失败</div> |
|
|
|
</div> |
|
|
|
<!-- 删除 --> |
|
|
|
<div class="waterFall-item-del" @click.stop="goDelete(item.id)"> |
|
|
|
@@ -112,12 +65,7 @@ |
|
|
|
</div> |
|
|
|
|
|
|
|
<!-- 列表样式--小图 --> |
|
|
|
<van-swipe-cell |
|
|
|
v-show="listActive == 2" |
|
|
|
loading |
|
|
|
v-for="(item, index) in videoList" |
|
|
|
:key="item.id ? item.id : index" |
|
|
|
> |
|
|
|
<van-swipe-cell v-show="listActive == 2" loading v-for="(item, index) in videoList" :key="item.id ? item.id : index"> |
|
|
|
<div class="itemList"> |
|
|
|
<!-- 每一项 --> |
|
|
|
<div v-if="videoList.length > 0" class="videoModel" :key="index"> |
|
|
|
@@ -132,19 +80,11 @@ |
|
|
|
<!-- 中间文字 --> |
|
|
|
<div class="videoInfo" @click="goDetail(item)"> |
|
|
|
<div class="videoName"> |
|
|
|
{{ item.title || '暂无' }} |
|
|
|
</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') |
|
|
|
}} |
|
|
|
{{ item.title || '无标题' }} |
|
|
|
</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> |
|
|
|
<!-- 右侧更多 --> |
|
|
|
<div class="showMore" @click.stop="showDialog(item.id)"> |
|
|
|
@@ -158,35 +98,25 @@ |
|
|
|
<i class="el-icon-edit" /> 编辑 |
|
|
|
</div> --> |
|
|
|
<div @click="goDelete(item.id)"> |
|
|
|
<i class="el-icon-delete" /> 删除 |
|
|
|
<i class="el-icon-delete" /> |
|
|
|
删除 |
|
|
|
</div> |
|
|
|
</van-popup> |
|
|
|
</div> |
|
|
|
<!-- 无数据处理 --> |
|
|
|
<div v-if="videoList.length <= 0" class="noWork"> |
|
|
|
您还没有视频作品 |
|
|
|
</div> |
|
|
|
<div v-if="videoList.length <= 0" class="noWork">您还没有视频作品</div> |
|
|
|
</div> |
|
|
|
</van-swipe-cell> |
|
|
|
</div> |
|
|
|
<!-- 分页 --> |
|
|
|
<van-pagination |
|
|
|
v-model="currentPage" |
|
|
|
:total-items="total" |
|
|
|
:items-per-page="4" |
|
|
|
@change="pageChange" |
|
|
|
/> |
|
|
|
<van-pagination v-model="currentPage" :total-items="total" :items-per-page="pageSize" @change="pageChange" /> |
|
|
|
<!-- 创建新作品 --> |
|
|
|
<!-- <div class="goAdd" @click="checkInviteCode">+ 创作新作品</div> --> |
|
|
|
<div class="goNewAdd" @click="checkInviteCode"> |
|
|
|
<i class="el-icon-plus"></i> |
|
|
|
</div> |
|
|
|
|
|
|
|
<div |
|
|
|
class="messageCover" |
|
|
|
:class="isShowMessageCover ? 'active' : ''" |
|
|
|
@click="exitCover" |
|
|
|
> |
|
|
|
<div class="messageCover" :class="isShowMessageCover ? 'active' : ''" @click="exitCover"> |
|
|
|
<div class="message" id="message"> |
|
|
|
<div class="connect" id="message">请添加微信与我们联系</div> |
|
|
|
<div class="qrCode" id="message"> |
|
|
|
@@ -201,26 +131,16 @@ |
|
|
|
|
|
|
|
<script> |
|
|
|
// 组件 |
|
|
|
import Vue from 'vue' |
|
|
|
import { Toast, Dialog } from 'vant' |
|
|
|
import { mapState, mapActions } from 'vuex' |
|
|
|
import HeadTop from '@/components/common/head.vue' |
|
|
|
import Vue from 'vue'; |
|
|
|
import { Toast, Dialog } from 'vant'; |
|
|
|
import { mapState, mapActions } from 'vuex'; |
|
|
|
import HeadTop from '@/components/common/head.vue'; |
|
|
|
// 工具 |
|
|
|
import { |
|
|
|
bytesToSize, |
|
|
|
timestampToTime, |
|
|
|
scrollToID, |
|
|
|
formatSeconds |
|
|
|
} from '../../utils' |
|
|
|
import { bytesToSize, timestampToTime, scrollToID, formatSeconds } from '../../utils'; |
|
|
|
// 接口 |
|
|
|
import { |
|
|
|
getVideoList, |
|
|
|
doGetVideoDetialById, |
|
|
|
doFindInviteCode, |
|
|
|
deleteVideoById |
|
|
|
} from '../../api/myPage' |
|
|
|
import { getVideoList, doGetVideoDetialById, doFindInviteCode, deleteVideoById } from '../../api/myPage'; |
|
|
|
|
|
|
|
Vue.use(Toast) |
|
|
|
Vue.use(Toast); |
|
|
|
export default { |
|
|
|
components: { |
|
|
|
HeadTop |
|
|
|
@@ -238,17 +158,17 @@ export default { |
|
|
|
isShowMessageCover: false, |
|
|
|
videoList: [], |
|
|
|
currentPage: 1, |
|
|
|
pageSize: 4, |
|
|
|
pageSize: 6, |
|
|
|
prePage: '', |
|
|
|
total: '', |
|
|
|
defaultImg: require('@/assets/img/BG@2x.png'), //默认图片 |
|
|
|
defaultImg1: require('@/assets/img/bg.png'), //默认图片 |
|
|
|
listActive: 1 // 显示列表样式 |
|
|
|
} |
|
|
|
}; |
|
|
|
}, |
|
|
|
computed: { |
|
|
|
...mapState({ |
|
|
|
characters: (state) => state.publicObj.characters |
|
|
|
characters: state => state.publicObj.characters |
|
|
|
}) |
|
|
|
}, |
|
|
|
|
|
|
|
@@ -256,65 +176,65 @@ export default { |
|
|
|
...mapActions(['setCharacters']), |
|
|
|
// 草稿箱切换 |
|
|
|
draftChange(type) { |
|
|
|
this.listActive = type |
|
|
|
this.videoType = -1 |
|
|
|
this.loadVideoList(1, this.pageSize, this.videoType) |
|
|
|
this.listActive = type; |
|
|
|
this.videoType = -1; |
|
|
|
this.loadVideoList(1, this.pageSize, this.videoType); |
|
|
|
}, |
|
|
|
// 横屏竖屏列表 |
|
|
|
getNewList(videoType) { |
|
|
|
this.videoType = videoType |
|
|
|
this.loadVideoList(1, this.pageSize, videoType) |
|
|
|
this.videoType = videoType; |
|
|
|
this.loadVideoList(1, this.pageSize, videoType); |
|
|
|
}, |
|
|
|
|
|
|
|
closeDialog() { |
|
|
|
Dialog.close |
|
|
|
Dialog.close; |
|
|
|
}, |
|
|
|
// 点击显示编辑删除 |
|
|
|
showDialog(id) { |
|
|
|
this.showPopup = true |
|
|
|
this.clickItem = id |
|
|
|
this.showPopup = true; |
|
|
|
this.clickItem = id; |
|
|
|
}, |
|
|
|
go(url) { |
|
|
|
this.$router.push(url) |
|
|
|
this.$router.push(url); |
|
|
|
}, |
|
|
|
|
|
|
|
changeTime(timestamp, form) { |
|
|
|
return timestampToTime(timestamp, form) |
|
|
|
return timestampToTime(timestamp, form); |
|
|
|
}, |
|
|
|
|
|
|
|
pageChange() { |
|
|
|
this.loadVideoList(this.currentPage, this.pageSize, this.videoType) |
|
|
|
this.loadVideoList(this.currentPage, this.pageSize, this.videoType); |
|
|
|
}, |
|
|
|
|
|
|
|
// 点击空白区域退出提示 |
|
|
|
exitCover(e) { |
|
|
|
if (e.srcElement.id != 'message') { |
|
|
|
this.isShowMessageCover = false |
|
|
|
this.isShowMessageCover = false; |
|
|
|
} |
|
|
|
}, |
|
|
|
|
|
|
|
// 秒转化时分秒 |
|
|
|
formatSeconds(seconds) { |
|
|
|
if (seconds) { |
|
|
|
return formatSeconds(seconds) |
|
|
|
return formatSeconds(seconds); |
|
|
|
} else { |
|
|
|
return '无' |
|
|
|
return '无'; |
|
|
|
} |
|
|
|
}, |
|
|
|
|
|
|
|
// 将bytes转化 |
|
|
|
bytesToSize(bytes) { |
|
|
|
if (bytes) { |
|
|
|
return bytesToSize(bytes) |
|
|
|
return bytesToSize(bytes); |
|
|
|
} else { |
|
|
|
return '无' |
|
|
|
return '无'; |
|
|
|
} |
|
|
|
}, |
|
|
|
|
|
|
|
// 查看详情 |
|
|
|
goDetail(item) { |
|
|
|
console.log(item) |
|
|
|
const status = item.videoStatus |
|
|
|
console.log(item); |
|
|
|
const status = item.videoStatus; |
|
|
|
//草稿 |
|
|
|
if (status == 0) { |
|
|
|
this.$router.push({ |
|
|
|
@@ -322,16 +242,16 @@ export default { |
|
|
|
query: { |
|
|
|
id: item.id |
|
|
|
} |
|
|
|
}) |
|
|
|
}); |
|
|
|
} |
|
|
|
//生成中 |
|
|
|
else if (status == 1) { |
|
|
|
Toast.fail('视频生成中') |
|
|
|
return |
|
|
|
Toast.fail('视频生成中'); |
|
|
|
return; |
|
|
|
} |
|
|
|
// 成功 |
|
|
|
else if ([2, 4, 5, 6].includes(status)) { |
|
|
|
const url = item.videoPathUri + item.videoPath |
|
|
|
const url = item.videoPathUri + item.videoPath; |
|
|
|
this.$router.push({ |
|
|
|
// path: '/downloadVideo', |
|
|
|
path: '/videoDownload', |
|
|
|
@@ -340,7 +260,7 @@ export default { |
|
|
|
videoUrl: url, |
|
|
|
id: item.id |
|
|
|
} |
|
|
|
}) |
|
|
|
}); |
|
|
|
} |
|
|
|
// 失败 |
|
|
|
else if (status == 3) { |
|
|
|
@@ -353,7 +273,7 @@ export default { |
|
|
|
mouldSmId: item.id, |
|
|
|
modify: true |
|
|
|
} |
|
|
|
}) |
|
|
|
}); |
|
|
|
} |
|
|
|
}, |
|
|
|
// 删除作品 |
|
|
|
@@ -363,18 +283,14 @@ export default { |
|
|
|
message: '您确定要删除该作品吗?' |
|
|
|
}) |
|
|
|
.then(async () => { |
|
|
|
this.showLoading = true |
|
|
|
await this.deleteVideoById(id) |
|
|
|
await this.loadVideoList( |
|
|
|
this.currentPage, |
|
|
|
this.pageSize, |
|
|
|
this.videoType |
|
|
|
) |
|
|
|
this.showLoading = false |
|
|
|
this.showLoading = true; |
|
|
|
await this.deleteVideoById(id); |
|
|
|
await this.loadVideoList(this.currentPage, this.pageSize, this.videoType); |
|
|
|
this.showLoading = false; |
|
|
|
}) |
|
|
|
.catch(() => { |
|
|
|
return |
|
|
|
}) |
|
|
|
return; |
|
|
|
}); |
|
|
|
}, |
|
|
|
|
|
|
|
/** |
|
|
|
@@ -382,22 +298,17 @@ export default { |
|
|
|
*/ |
|
|
|
async loadVideoList(pageNum, pageSize, videoType) { |
|
|
|
try { |
|
|
|
this.waterfallBug = false |
|
|
|
this.waterfallBug = false; |
|
|
|
// 根据listActive判断是不是看的草稿箱 |
|
|
|
let videoStatuss = this.listActive == 1 ? [2, 4, 5, 6] : [0, 1, 3] |
|
|
|
const res = await getVideoList( |
|
|
|
pageNum, |
|
|
|
pageSize, |
|
|
|
videoType, |
|
|
|
videoStatuss |
|
|
|
) |
|
|
|
console.log(res, '获取作品列表') |
|
|
|
let videoStatuss = this.listActive == 1 ? [2, 4, 5, 6] : [0, 1, 3]; |
|
|
|
const res = await getVideoList(pageNum, pageSize, videoType, videoStatuss); |
|
|
|
console.log(res, '获取作品列表'); |
|
|
|
|
|
|
|
this.videoList = res.data.list |
|
|
|
this.waterfallBug = true |
|
|
|
this.total = res.data.total |
|
|
|
this.videoList = res.data.list; |
|
|
|
this.waterfallBug = true; |
|
|
|
this.total = res.data.total; |
|
|
|
} catch (error) { |
|
|
|
console.log(error, 'error') |
|
|
|
console.log(error, 'error'); |
|
|
|
// Toast.fail(error.message) |
|
|
|
} |
|
|
|
}, |
|
|
|
@@ -407,12 +318,12 @@ export default { |
|
|
|
*/ |
|
|
|
async getVideoDetialById(id) { |
|
|
|
try { |
|
|
|
const res = await doGetVideoDetialById(id) |
|
|
|
console.log(res, '通过视频id获取视频详情') |
|
|
|
return res.data |
|
|
|
const res = await doGetVideoDetialById(id); |
|
|
|
console.log(res, '通过视频id获取视频详情'); |
|
|
|
return res.data; |
|
|
|
} catch (error) { |
|
|
|
console.log(error, 'error') |
|
|
|
Toast.fail(error.message) |
|
|
|
console.log(error, 'error'); |
|
|
|
Toast.fail(error.message); |
|
|
|
} |
|
|
|
}, |
|
|
|
|
|
|
|
@@ -421,11 +332,11 @@ export default { |
|
|
|
*/ |
|
|
|
async deleteVideoById(id) { |
|
|
|
try { |
|
|
|
const res = await deleteVideoById(id) |
|
|
|
console.log(res, '根据id删除作品') |
|
|
|
const res = await deleteVideoById(id); |
|
|
|
console.log(res, '根据id删除作品'); |
|
|
|
} catch (error) { |
|
|
|
console.log(error, 'error') |
|
|
|
Toast.fail(error.message) |
|
|
|
console.log(error, 'error'); |
|
|
|
Toast.fail(error.message); |
|
|
|
} |
|
|
|
}, |
|
|
|
|
|
|
|
@@ -434,37 +345,37 @@ export default { |
|
|
|
*/ |
|
|
|
async checkInviteCode() { |
|
|
|
try { |
|
|
|
const res = await doFindInviteCode() |
|
|
|
console.log(res, '查询用户邀请码数据') |
|
|
|
const status = res.data.status |
|
|
|
const res = await doFindInviteCode(); |
|
|
|
console.log(res, '查询用户邀请码数据'); |
|
|
|
const status = res.data.status; |
|
|
|
|
|
|
|
// 当没有邀请码时 |
|
|
|
if (status == 0) { |
|
|
|
scrollToID('top') |
|
|
|
this.isShowMessageCover = true |
|
|
|
scrollToID('top'); |
|
|
|
this.isShowMessageCover = true; |
|
|
|
} else if (status == 1) { |
|
|
|
this.goCreateNew() |
|
|
|
this.goCreateNew(); |
|
|
|
} |
|
|
|
} catch (error) { |
|
|
|
console.log(error, 'error') |
|
|
|
Toast.fail(error.message) |
|
|
|
console.log(error, 'error'); |
|
|
|
Toast.fail(error.message); |
|
|
|
} |
|
|
|
}, |
|
|
|
|
|
|
|
goCreateNew() { |
|
|
|
this.$router.push('/chooseModel') |
|
|
|
this.$router.push('/chooseModel'); |
|
|
|
} |
|
|
|
}, |
|
|
|
|
|
|
|
mounted() { |
|
|
|
this.inPage = true |
|
|
|
scrollToID('top') |
|
|
|
this.inPage = true; |
|
|
|
scrollToID('top'); |
|
|
|
}, |
|
|
|
|
|
|
|
created() { |
|
|
|
this.loadVideoList(1, this.pageSize, this.videoType) |
|
|
|
this.loadVideoList(1, this.pageSize, this.videoType); |
|
|
|
} |
|
|
|
} |
|
|
|
}; |
|
|
|
</script> |
|
|
|
|
|
|
|
<style lang="scss" scoped> |
|
|
|
|