|
- <template>
- <div :class="inPage ? 'page active' : 'page'">
- <div id="top"></div>
- <HeadTop />
- <!-- 顶部图 -->
- <img class="showIMG" src="../../assets/img/BG-Page.png" alt="" />
- <!-- 展示列表 -->
- <div class="item">
- <div class="title">
- <div>
- <img src="../../assets/img/myVideo.png" alt="" />
- 我的视频作品
- </div>
- <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>
- </div>
- </div>
- </div>
- <div class="vantLoadingBox" style="height: 550px" v-show="showLoading">
- <van-loading type="spinner" color="#52d4e5" class="vantLoading" />
- </div>
- <!-- 具体内容 -->
- <div v-show="!showLoading">
- <!-- 列表样式--大图 -->
- <div v-if="videoList.length == 0" :style="{ height: '250px', textAlign: 'center', lineHeight: '250px' }">暂无数据</div>
- <!-- 新 修改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)">
- <div class="waterFall-item-paddding">
- <img :src="item.coverImg ? item.coverImg : item.videoType == 2 ? defaultImg : defaultImg1" alt="" />
- <!-- 渐变遮罩层 -->
- <div class="waterFall-item-mask">
- <div>{{ item.title || '无标题' }}</div>
- <div v-if="item.videoStatus == 5">视频时长:{{ formatSeconds(item.videoTime) }}</div>
- <div v-if="item.videoStatus == 5">视频容量:{{ bytesToSize(item.videoSize) }}</div>
- <div>创建时间:{{ changeTime(item.createDate, 'YYYY-MM-DD hh:mm:ss') }}</div>
- </div>
- <!-- 视频状态 草稿还是未完成还是失败 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="[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)">
- <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>
- </waterfall>
- </div>
- <!-- 列表样式--小图 -->
- <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">
- <!-- 左侧图片 -->
- <div class="videoPrv" @click="goDetail(item)">
- <!-- <img src="../../assets/img/BG@2x.png" /> -->
- <img src="../../assets/img/logoh.png" />
- <!-- <div v-if="item.videoStatus == 0" class="cover">草稿</div> -->
- <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 == ?" class="cover">排队中</div> -->
- </div>
- <!-- 中间文字 -->
- <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') }}</div>
- </div>
- <!-- 右侧更多 -->
- <div class="showMore" @click.stop="showDialog(item.id)">
- <div></div>
- <div></div>
- <div></div>
- </div>
- <!-- 弹出层 -->
- <van-popup v-if="clickItem == item.id" v-model="showPopup">
- <!-- <div @click="closeDialog">
- <i class="el-icon-edit" /> 编辑
- </div> -->
- <div @click="goDelete(item.id)">
- <i class="el-icon-delete" />
- 删除
- </div>
- </van-popup>
- </div>
- <!-- 无数据处理 -->
- <div v-if="videoList.length <= 0" class="noWork">您还没有视频作品</div>
- </div>
- </van-swipe-cell>
- </div>
- </div>
- <!-- 分页 -->
- <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">
- <img src="../../assets/icon/icon-plus.png" alt="" />
- <!-- <i class="el-icon-plus"></i> -->
- </div>
-
- <div class="messageCover" :class="isShowMessageCover ? 'active' : ''" @click="exitCover">
- <div class="message" id="message">
- <div class="connect" id="message">请添加微信与我们联系</div>
- <div class="qrCode" id="message">
- <img src="../../assets/img/SuiMangQRCode.png" alt="" />
- </div>
- <div class="phoneNum" id="message">或致电13260039498</div>
- <div class="clickToClose">点击空白处关闭</div>
- </div>
- </div>
- </div>
- </template>
-
- <script>
- // 组件
- import Vue from 'vue';
- import { Toast, Dialog, Loading } from 'vant';
- import { mapState, mapActions } from 'vuex';
- import HeadTop from '@/components/common/head.vue';
- // 工具
- import { bytesToSize, timestampToTime, scrollToID, formatSeconds } from '../../utils';
- // 接口
- import { getVideoList, doGetVideoDetialById, doFindInviteCode, deleteVideoById } from '../../api/myPage';
-
- Vue.use(Toast);
- Vue.use(Loading);
- export default {
- components: {
- HeadTop
- },
- data() {
- return {
- clickAction: -1, //右上角下拉
- hasToken: null, // 判断有没有token来判断有没有登录
- showLoading: true, // 加载处理
- waterfallBug: true, // 解决瀑布流不显示bug
- videoType: -1, //-1全部1竖屏2横屏
- showPopup: false, // 编辑和删除显示隐藏
- clickItem: -1, // 弹出层显示隐藏
- showTrue: true, // 弹出层显示隐藏
- showFalse: false, // 弹出层显示隐藏
- inPage: false,
- isShowMessageCover: false,
- videoList: [],
- currentPage: 1,
- pageSize: 6,
- prePage: '',
- total: '',
- // defaultImg: require('@/assets/img/BG@2x.png'), //默认图片
- // defaultImg1: require('@/assets/img/bg.png'), //默认图片
- defaultImg: require('@/assets/img/logoh.png'), //默认图片
- defaultImg1: require('@/assets/img/logoh.png'), //默认图片
- listActive: 1 // 显示列表样式
- };
- },
- computed: {
- ...mapState({
- characters: state => state.publicObj.characters
- })
- },
-
- 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;
- this.videoType = -1;
- this.loadVideoList(1, this.pageSize, this.videoType);
- },
- // 横屏竖屏列表
- getNewList(videoType) {
- this.videoType = videoType;
- this.loadVideoList(1, this.pageSize, videoType);
- },
-
- closeDialog() {
- Dialog.close;
- },
- // 点击显示编辑删除
- showDialog(id) {
- this.showPopup = true;
- this.clickItem = id;
- },
- go(url) {
- this.$router.push(url);
- },
-
- changeTime(timestamp, form) {
- return timestampToTime(timestamp, form);
- },
-
- pageChange() {
- this.loadVideoList(this.currentPage, this.pageSize, this.videoType);
- },
-
- // 点击空白区域退出提示
- exitCover(e) {
- if (e.srcElement.id != 'message') {
- this.isShowMessageCover = false;
- }
- },
-
- // 秒转化时分秒
- formatSeconds(seconds) {
- if (seconds) {
- return formatSeconds(seconds);
- } else {
- return '暂未获取';
- }
- },
-
- // 将bytes转化
- bytesToSize(bytes) {
- if (bytes) {
- return bytesToSize(bytes);
- } else {
- return '暂未获取';
- }
- },
-
- // 查看详情
- goDetail(item) {
- console.log(item);
- const status = item.videoStatus;
- //草稿
- if (status == 0) {
- this.$router.push({
- path: '/editModel',
- query: {
- id: item.id
- }
- });
- }
- //生成中
- else if ([1, 2, 4, 6].includes(status)) {
- Toast.fail('视频生成中');
- this.$router.push('/videoCreate');
- return;
- }
- // 成功
- else if ([5].includes(status)) {
- const url = item.videoPathUri + item.videoPath;
- this.$router.push({
- // path: '/downloadVideo',
- path: '/videoDownload',
- query: {
- videoId: item.videoId,
- videoUrl: url,
- id: item.id
- }
- });
- }
- // 失败
- else if (status == 3) {
- this.$router.push({
- path: '/videoFail',
- query: {
- id: item.id
- }
- });
- }
- },
- // 删除作品
- goDelete(id) {
- Dialog.confirm({
- title: '删除作品',
- message: '您确定要删除该作品吗?'
- })
- .then(async () => {
- await this.deleteVideoById(id);
- await this.loadVideoList(this.currentPage, this.pageSize, this.videoType);
- })
- .catch(() => {
- return;
- });
- },
-
- /**
- * @description:获取作品列表
- */
- async loadVideoList(pageNum, pageSize, videoType) {
- if (!this.hasToken) {
- // this.$router.push('/login');
- // Toast.fail('请您先登录!');
- return;
- }
- try {
- this.showLoading = true;
- this.waterfallBug = false;
- // 根据listActive判断是不是看的草稿箱
- // 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);
- }
- },
-
- /**
- * @description 通过视频id获取视频详情
- */
- async getVideoDetialById(id) {
- try {
- const res = await doGetVideoDetialById(id);
- console.log(res, '通过视频id获取视频详情');
- return res.data;
- } catch (error) {
- console.log(error, 'error');
- Toast.fail(error.message);
- }
- },
-
- /**
- * @description 根据id删除作品
- */
- async deleteVideoById(id) {
- try {
- const res = await deleteVideoById(id);
- console.log(res, '根据id删除作品');
- } catch (error) {
- console.log(error, 'error');
- Toast.fail(error.message);
- }
- },
-
- /**
- * @description:查询用户邀请码状态
- */
- async checkInviteCode() {
- this.$router.push('/chooseModel');
- return;
- if (!this.hasToken) {
- this.$router.push('/chooseModel');
- return;
- }
- try {
- const res = await doFindInviteCode();
- console.log(res, '查询用户邀请码数据');
- const status = res.data.status;
-
- // 当没有邀请码时
- if (status == 0) {
- scrollToID('top');
- this.isShowMessageCover = true;
- } else if (status == 1) {
- this.goCreateNew();
- }
- } catch (error) {
- console.log(error, 'error');
- Toast.fail(error.message);
- }
- },
-
- goCreateNew() {
- this.$router.push('/chooseModel');
- }
- },
-
- async mounted() {
- this.inPage = true;
- scrollToID('top');
- if (this.hasToken) {
- await this.loadVideoList(1, this.pageSize, this.videoType);
- } else {
- this.showLoading = false;
- }
- },
-
- created() {
- this.hasToken = localStorage.getItem('AccessToken');
- }
- };
- </script>
-
- <style lang="scss" scoped>
- .van-pagination {
- margin-top: 10px;
- }
- .floatRight {
- margin-left: 15px;
- img {
- vertical-align: bottom !important;
- margin-top: 2px !important;
- color: red;
- }
- }
- .page {
- // transform: translateX(30%);
- min-height: 100vh;
- opacity: 0;
- transition: all 0.5s; // global-transition
- padding-bottom: 25px;
- &.active {
- opacity: 1;
- transform: translateX(0);
- }
- .logoBox {
- display: flex;
- justify-content: space-between;
- align-items: center;
- overflow: hidden;
- cursor: pointer;
- background-color: #606060;
- .logo {
- float: left;
- width: 140px;
- height: 40px;
- }
- .userInfo {
- display: flex;
- justify-content: space-between;
- align-items: center;
- color: #fff;
- .userImg {
- float: right;
- width: 30px;
- height: 30px;
- margin-top: 3px;
- margin-right: 10px;
- margin-left: 15px;
- }
- }
- }
- .showIMG {
- padding: 10px;
- width: 100%;
- height: 140px;
- border-radius: 16px;
- }
- .item {
- width: 100%;
- padding: 15px 10px;
- .title {
- display: flex;
- justify-content: space-between;
- width: 100%;
- font-size: 16px;
- font-weight: 500;
- // margin-left: 15px;
- margin-bottom: 20px;
- img {
- margin-top: -5px;
- vertical-align: middle;
- width: 24px;
- height: 18px;
- background-size: 100% 100%;
- }
- &-change {
- display: inline-block;
- font-size: 12px;
- }
- }
- .itemList {
- .videoModel {
- position: relative;
- display: flex;
- justify-content: space-between;
- margin-bottom: 20px;
-
- .videoPrv {
- width: 140px;
- height: 100px;
- // background-color: #979797;
- img {
- position: absolute;
- top: 25px;
- width: 140px;
- height: 50px;
- border-radius: 6px;
- }
- .cover {
- position: absolute;
- width: 140px;
- height: 100px;
- line-height: 100px;
- background-color: #00000034;
- text-align: center;
- border-radius: 6px;
- color: #fff;
- }
- }
- .videoInfo {
- flex: 1;
- margin-left: 5px;
- white-space: nowrap;
- overflow: hidden;
- text-overflow: ellipsis;
- margin-top: 10px;
- .videoName {
- width: 100%;
- font-size: 16px;
- white-space: nowrap;
- overflow: hidden;
- text-overflow: ellipsis;
- font-weight: 600;
- }
- .createTime {
- font-size: 11px;
- color: #999999;
- margin-top: 5px;
- }
- }
- .showMore {
- width: 20px;
- display: flex;
- justify-content: space-between;
- align-items: center;
- // margin-left: 10px;
- div {
- width: 4px;
- height: 4px;
- background-color: #51d9ca;
- }
- }
- .dialog {
- i {
- margin-left: -10px;
- }
- }
- // 弹出层样式
- ::v-deep .van-popup {
- display: flex;
- flex-wrap: wrap;
- align-items: center;
- justify-content: center;
- top: 50%;
- left: 80%;
- width: 80px;
- height: 30px;
- border-radius: 12px;
- font-size: 14px;
- line-height: 28px;
- text-align: center;
- box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.1);
- }
- ::v-deep .van-overlay {
- background-color: rgba(0, 0, 0, 0);
- }
- ::v-deep .van-button {
- display: none;
- }
- .tag {
- position: absolute;
- right: 10px;
- top: 10px;
- padding: 1px 5px;
- border-radius: 5px;
- &.text {
- color: #fff;
- background-color: #a2a2a290;
- }
- &.generating {
- background-color: #ffa600c2;
- }
- &.finish {
- color: #ffffff;
- background-color: #00ff88;
- }
- &.fail {
- color: #ffffff;
- background-color: #ff0000c3;
- }
- }
- }
- .noWork {
- width: 100%;
- height: 450px;
- line-height: 450px;
- font-size: 14px;
- font-weight: 600;
- text-align: center;
- }
- }
- }
- .goAdd {
- position: sticky;
- bottom: 25px;
- left: 10px;
- width: 300px;
- height: 42px;
- line-height: 42px;
- font-size: 15px;
- color: #fff;
- text-align: center;
- transform: translateX(-50%);
- background-color: #0068b7;
- border-radius: 5px;
- box-shadow: #60606082 1px 1px 1px 1px;
- margin-top: 25px;
- margin-left: 190px;
- }
- .goNewAdd {
- position: sticky;
- left: 80%;
- bottom: 25px;
- width: 60px;
- height: 60px;
- border-radius: 50%;
- // font-size: 40px;
- // line-height: 60px;
- // text-align: center;
- color: #ffffff;
- background: linear-gradient(316deg, #6ee4d7 0%, #37c4f1 32%, #a49afc 100%);
- box-shadow: 0px 2px 6px 0px rgba(114, 100, 245, 0.25);
- display: flex;
- justify-content: space-around;
- align-items: center;
- z-index: 9999;
- img {
- width: 60%;
- height: 60%;
- }
- }
- .messageCover {
- position: fixed;
- top: 0;
- width: 100%;
- height: 100%;
- background-color: #00000091;
- transition: all 0.3s;
- opacity: 0;
- z-index: -1;
- .message {
- position: sticky;
- top: 48%;
- transform: translate(-50%, -50%);
- width: 272px;
- height: 290px;
- border-radius: 5px;
- background-color: #fff;
- text-align: center;
- transition: all 0.3s;
- margin-left: 50%;
- padding: 10px;
-
- .connect {
- font-size: 12px;
- margin: 19px 0 10px 0;
- }
- .qrCode {
- width: 203px;
- height: 213px;
- background-color: #ffffff;
- border-radius: 5px;
- border: solid 1px #595959;
- margin: auto;
- img {
- width: 100%;
- height: 100%;
- }
- }
- .phoneNum {
- float: left;
- font-size: 11px;
- margin-top: 8px;
- margin-left: 34px;
- }
- .close {
- position: absolute;
- top: 8px;
- right: 15px;
- font-size: 18px;
- color: #000;
- }
- .clickToClose {
- position: absolute;
- font-size: 14px;
- color: #fff;
- left: 50%;
- bottom: -20%;
- transform: translateX(-50%);
- }
- }
-
- &.active {
- z-index: 100;
- opacity: 1;
- }
- }
- .delete-button {
- position: relative;
- left: 1%;
- height: 100%;
- }
- }
-
- // 瀑布流
- .waterFall {
- // width: 350px;
- width: 100%;
-
- ::v-deep .vue-waterfall-column {
- width: 50% !important;
- margin: 0 !important;
- }
- &-item {
- padding: 5px;
- border-radius: 12px;
- overflow: hidden;
- &-paddding {
- position: relative;
- border-radius: 12px;
- overflow: hidden;
- // min-width: 200px;
- min-height: 100px;
- }
- img {
- max-width: 100%;
- max-height: 100%;
- object-fit: cover;
- }
- &-mask {
- position: absolute;
- bottom: 0;
- left: 0;
- display: flex;
- flex-direction: column;
- justify-content: flex-end;
- padding: 5px 8px 5px;
- background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, #000000 100%);
- height: 80px;
- width: 100%;
- color: #f7dcdc;
- div {
- overflow: hidden;
- white-space: nowrap;
- text-overflow: ellipsis;
- margin-bottom: 3px;
- }
- }
- &-state {
- position: absolute;
- top: 0px;
- left: 0px;
- 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);
- }
- &-del {
- position: absolute;
- top: 0px;
- right: 0px;
- height: 30px;
- width: 30px;
- padding: 7.5px;
- border-radius: 0 0 0 12px;
- background-color: rgba(0, 0, 0, 0.3);
- img {
- 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;
- }
- }
- }
- }
- </style>
|