|
- <template>
- <div class="page">
- <div id="top"></div>
- <HeadTop />
- <img class="showIMG" src="../../assets/img/BG-Page.png" alt="" />
- <div class="item">
- <div class="title">我的视频作品</div>
- <div class="itemList">
- <div
- v-if="videoList.length > 0"
- class="videoModel"
- v-for="(item, index) in videoList"
- :key="index"
- @click="goDetail(item)"
- >
- <div class="videoPrv">
- <video
- :src="
- 'https://smapitest.malls.iformall.com/myVideo/' + item.videoPath
- "
- />
- <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">
- <div class="videoName">
- {{ item.title || "暂无" }}
- </div>
- <div class="createTime">视频时长:{{ item.videoTime }}</div>
- <div class="createTime">视频容量{{ "46.5Mb" }}</div>
- <div class="createTime">
- 创建时间:{{ changeTime(item.createDate, "YYYY-MM-DD hh:mm:ss") }}
- </div>
- </div>
- </div>
- <div v-if="videoList.length <= 0" class="noWork">您还没有视频作品</div>
- </div>
- </div>
- <van-pagination
- v-model="currentPage"
- :total-items="total"
- :items-per-page="3"
- @change="pageChange"
- />
- <div class="goAdd" @click="goCreateNew">+ 创作新作品</div>
- </div>
- </template>
-
- <script>
- import Vue from "vue";
- import HeadTop from "./../../components/common/head.vue";
- import { mapState, mapActions } from "vuex";
- import { Toast } from "vant";
- import timestampToTime from "../../utils/timestampToTime";
- import scrollToID from "../../utils/scrollToID";
- import { getVideoList } from "../../api/myPage";
-
- Vue.use(Toast);
- export default {
- components: {
- HeadTop,
- },
- data() {
- return {
- videoList: [],
- currentPage: 1,
- pageSize: 5,
- total: "",
- };
- },
- computed: {
- ...mapState({
- characters: (state) => state.publicObj.characters,
- }),
- },
-
- methods: {
- ...mapActions(["setCharacters"]),
-
- go(url) {
- this.$router.push(url);
- },
-
- changeTime(timestamp, form) {
- return timestampToTime(timestamp, form);
- },
-
- pageChange() {
- this.loadVideoList(this.currentPage, this.pageSize);
- },
-
- 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) {
- this.$router.push({
- path: "/downloadVideo",
- query: {
- videoDetail: item,
- },
- });
- } else if (status == 3) {
- }
- },
-
- 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);
- Toast.fail(error.message);
- }
- },
-
- goCreateNew() {
- this.$router.push("/chooseModel");
- },
- },
- mounted() {
- scrollToID("top");
- },
- created() {
- this.loadVideoList(1, this.pageSize);
- },
- };
- </script>
-
- <style lang="scss" scoped>
- .page {
- .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 {
- width: 100%;
- height: 130px;
- }
- .item {
- padding-top: 15px;
- padding-bottom: 15px;
- .title {
- font-size: 15px;
- font-weight: 600;
- margin-left: 15px;
- margin-bottom: 20px;
- }
- .itemList {
- .videoModel {
- position: relative;
- display: flex;
- justify-content: space-between;
- margin-bottom: 25px;
- border-bottom: 1px solid #00000010;
- padding: 0 20px 25px 25px;
- .videoPrv {
- width: 150px;
- height: 100px;
- // background-color: #979797;
- video {
- position: absolute;
- width: 150px;
- height: 100px;
- }
- .cover {
- position: absolute;
- width: 150px;
- height: 100px;
- line-height: 100px;
- background-color: #00000034;
- text-align: center;
- color: #fff;
- }
- }
- .videoInfo {
- display: flex;
- flex-direction: column;
- justify-content: space-between;
- margin-left: 10px;
- .videoName {
- font-size: 16px;
- font-weight: 600;
- }
- .createTime {
- font-size: 11px;
- }
- }
- .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: fixed;
- bottom: 15px;
- left: 50%;
- 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;
- }
- }
- </style>
|