|
- <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 class="floatRight" style="float: right;">草稿箱</span>
- </div>
- <!-- 具体内容 -->
- <van-swipe-cell 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>
-
- <!-- <van-dialog class="dialog"
- v-model="clickItem==item?showTrue:showFalse">
- <div @click="closeDialog"><i class="el-icon-edit" /> 编辑</div>
- <div><i class="el-icon-delete" /> 删除</div>
- </van-dialog> -->
- </div>
- <!-- 无数据处理 -->
- <div v-if="videoList.length <= 0" class="noWork">
- 您还没有视频作品
- </div>
- </div>
- <!-- 右滑 -->
- <!-- <template #right>
- <van-button
- square
- text="删除"
- type="danger"
- class="delete-button"
- @click="goDelete(item.id)"
- />
- </template> -->
- </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: "",
- };
- },
- 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) {
- const status = item.videoStatus;
- if (status == 0) {
- this.$router.push({
- path: "/getPaper",
- query: {
- id: item.id,
- },
- });
- } 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: "/getPaper",
- query: {
- id: item.id,
- },
- });
- }
- },
- // 删除作品
- 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>
- .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;
- padding-left: 10px;
- width: 80px;
- height: 60px;
- 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%;
- }
- }
- </style>
|