|
- <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">
- <img src="../../assets/img/myVideo.png" alt="" />
- 我的视频作品
- <span
- v-show="listActive == 1"
- class="floatRight"
- @click="listActive = 2"
- ><img src="../../assets/icon/icon-list2.png" alt="" /></span
- ><span
- @click="listActive = 1"
- v-show="listActive == 2"
- class="floatRight"
- ><img src="../../assets/icon/icon-list1.png" alt=""
- /></span>
- <span class="floatRight">只看竖屏</span>
- <span class="floatRight">只看横屏</span>
- </div>
- <!-- 具体内容 -->
- <!-- 列表样式--大图 -->
- <div
- v-show="listActive == 1"
- v-masonry
- class="waterFall"
- item-selector=".waterFall-item"
- column-width="175"
- >
- <div
- v-masonry-tile
- v-for="(item, index) in videoList"
- class="waterFall-item"
- :key="item.id ? item.id : index"
- @click="goDetail(item)"
- >
- <img :src="index == 1 ? defaultImg : defaultImg1" alt="" />
- <!-- 渐变遮罩层 -->
- <div class="waterFall-item-mask">
- <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>
- <!-- 视频状态 草稿还是未完成还是失败 -->
- <div class="waterFall-item-state">
- <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>
- <!-- 删除 -->
- <div class="waterFall-item-del" @click.stop="goDelete(item.id)">
- <img src="../../assets/icon/icon-trash.png" alt="" />
- </div>
- </div>
- </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" />
- <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>
- <!-- 分页 -->
- <van-pagination
- v-model="currentPage"
- :total-items="total"
- :items-per-page="4"
- @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="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 } 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)
- export default {
- components: {
- HeadTop
- },
- data() {
- return {
- showPopup: false, // 编辑和删除显示隐藏
- clickItem: -1, // 弹出层显示隐藏
- showTrue: true, // 弹出层显示隐藏
- showFalse: false, // 弹出层显示隐藏
- inPage: false,
- isShowMessageCover: false,
- videoList: [],
- currentPage: 1,
- pageSize: 4,
- prePage: '',
- total: '',
- defaultImg: require('@/assets/img/BG@2x.png'), //默认图片
- defaultImg1: require('@/assets/img/bg.png'), //默认图片
- listActive: 1 // 显示列表样式
- }
- },
- computed: {
- ...mapState({
- characters: (state) => state.publicObj.characters
- })
- },
-
- methods: {
- ...mapActions(['setCharacters']),
- 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)
- },
-
- // 点击空白区域退出提示
- 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: {
- saveID: item.id,
- id: item.id,
- imgUrl: item.id,
- modelId: item.id,
- mouldSmId: item.id,
- modify: true
- }
- })
- }
- //生成中
- else if (status == 1) {
- Toast.fail('视频生成中')
- return
- }
- // 成功
- else if (status == 2) {
- const url = item.videoPathUri + item.videoPath
- this.$router.push({
- path: '/downloadVideo',
- query: {
- videoId: item.videoId,
- videoUrl: url
- }
- })
- }
- // 失败
- else if (status == 3) {
- this.$router.push({
- path: '/editModel',
- query: {
- id: item.id,
- imgUrl: item.id,
- modelId: item.id,
- mouldSmId: item.id,
- modify: true
- }
- })
- }
- },
- // 删除作品
- goDelete(id) {
- Dialog.confirm({
- title: '删除作品',
- message: '您确定要删除该作品吗?'
- })
- .then(async () => {
- await this.deleteVideoById(id)
- this.loadVideoList(this.currentPage, this.pageSize)
- })
- .catch(() => {
- return
- })
- },
-
- /**
- * @description:获取作品列表
- */
- async loadVideoList(pageNum, pageSize) {
- try {
- const res = await getVideoList(pageNum, pageSize)
- console.log(res, '获取作品列表')
- this.videoList = res.data.list
- this.total = res.data.total
- } 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() {
- 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')
- }
- },
-
- mounted() {
- this.inPage = true
- scrollToID('top')
- },
-
- created() {
- this.loadVideoList(1, this.pageSize)
- }
- }
- </script>
-
- <style lang="scss" scoped>
- .floatRight {
- margin-left: 20px;
- img {
- vertical-align: bottom !important;
- margin-top: 2px !important;
- color: red;
- }
- }
- .page {
- transform: translateX(30%);
- 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 {
- padding: 15px 10px;
- .title {
- 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%;
- }
- }
- .itemList {
- .videoModel {
- position: relative;
- display: flex;
- justify-content: space-between;
- margin-bottom: 20px;
-
- .videoPrv {
- width: 150px;
- height: 100px;
- // background-color: #979797;
- img {
- position: absolute;
- width: 150px;
- height: 100px;
- border-radius: 6px;
- }
- .cover {
- position: absolute;
- width: 150px;
- height: 100px;
- line-height: 100px;
- background-color: #00000034;
- text-align: center;
- border-radius: 6px;
- color: #fff;
- }
- }
- .videoInfo {
- flex: 1;
- margin-left: 12px;
- .videoName {
- font-size: 16px;
- 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: 70%;
- left: 290px;
- 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: 300px;
- 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);
- }
- .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 {
- display: flex;
- flex-wrap: wrap;
- justify-content: space-between;
- margin-right: -20px;
- width: 100%;
- &-item {
- // max-width: 355px; //非瀑布流
- max-width: 170px;
- max-height: 300px;
- // background-color: red;
- border-radius: 12px;
- margin-bottom: 10px;
- overflow: hidden;
- img {
- max-width: 100%;
- max-height: 100%;
- object-fit: cover;
- // background-color: red;
- }
- &-mask {
- position: absolute;
- bottom: 0;
- left: 0;
- display: flex;
- flex-direction: column;
- justify-content: space-around;
- padding: 5px 8px 0;
- background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, #000000 100%);
- height: 80px;
- width: 100%;
- color: #f7dcdc;
- }
- &-state {
- position: absolute;
- top: 0px;
- left: 0px;
- padding: 7.5px;
- border-radius: 0 0 12px 0;
- 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;
- }
- }
- }
- }
- </style>
|