|
- <template>
- <div class="page">
- <!-- 搜索框 -->
- <div class="top">
- <div class="flex justify-between" style="width: 300px">
- <el-input
- v-model="title"
- :placeholder="$t('myCreating.search')"
- @keyup.enter="searchVideoList"
- />
- <el-icon class="icon-edit" @click="searchVideoList"
- ><i-ep-search
- /></el-icon>
- </div>
- </div>
- <!-- 作品列表 -->
- <div v-if="!isLoading">
- <div v-if="videoList.length > 0" class="workList flex">
- <div class="workItem" v-for="item in videoList" :key="item.id">
- <div class="workImg">
- <img
- v-if="item.coverImg"
- class="coverImg inmiddle"
- :src="item.coverImg"
- alt=""
- />
- <img
- v-else
- class="takePlace inmiddle"
- src="@/assets/img/left-top-logo.png"
- alt=""
- />
- </div>
-
- <div :class="'statusName ' + item.statusName">
- {{ $t("myCreating." + item.statusName) }}
- </div>
-
- <div class="workInfo flex">
- <span>{{ item.title }}</span>
- <span>{{ dayjs(item.createDate).format("YYYY-MM-DD") }}</span>
- </div>
- <!-- 更多遮罩层 -->
- <div
- class="more"
- @mouseleave="mouseleave"
- @click="clickVideoItem(item)"
- >
- <el-icon
- v-if="[0].includes(item.videoStatus)"
- class="icon-videoPlay"
- ><i-ep-edit
- /></el-icon>
- <el-icon
- v-if="[1, 2, 4, 6].includes(item.videoStatus)"
- class="icon-videoPlay"
- ><i-ep-loading
- /></el-icon>
- <el-icon
- v-if="[3].includes(item.videoStatus)"
- class="icon-videoPlay"
- ><i-ep-closeBold
- /></el-icon>
- <el-icon
- v-if="[5].includes(item.videoStatus)"
- class="icon-videoPlay"
- ><i-ep-videoPlay
- /></el-icon>
- <div class="showBtn" @click.stop="mouseenter(item)">...</div>
- <div class="btns" v-show="showPopup">
- <!-- 下载按钮 -->
- <div
- class="btns-item"
- @click.stop="handleDownload(item.videoPlayUrl)"
- >
- <div class="btns-item-icon">
- <el-icon class="icon-delete"><i-ep-download /></el-icon>
- </div>
- <div class="text">{{ $t("myCreating.download") }}</div>
- </div>
- <!-- 删除按钮 -->
- <div
- class="btns-item"
- @click.stop="handelDelete(item.id, item.title)"
- >
- <div class="btns-item-icon">
- <el-icon class="icon-delete"><i-ep-delete /></el-icon>
- </div>
- <div class="text">{{ $t("myCreating.delete") }}</div>
- </div>
- </div>
- </div>
- </div>
- </div>
- <div v-if="videoList.length == 0" class="noList">
- <div class="title">
- {{ $t("myCreating.noList") }}
- </div>
- <div class="goCreate" @click="goCreate">
- {{ $t("myCreating.goCreate") }}
- </div>
- </div>
- </div>
- <div v-if="isLoading" class="loadingIcon">
- <el-icon class="is-loading">
- <svg
- viewBox="0 0 1024 1024"
- xmlns="http://www.w3.org/2000/svg"
- data-v-ea893728=""
- >
- <path
- fill="currentColor"
- d="M512 64a32 32 0 0 1 32 32v192a32 32 0 0 1-64 0V96a32 32 0 0 1 32-32zm0 640a32 32 0 0 1 32 32v192a32 32 0 1 1-64 0V736a32 32 0 0 1 32-32zm448-192a32 32 0 0 1-32 32H736a32 32 0 1 1 0-64h192a32 32 0 0 1 32 32zm-640 0a32 32 0 0 1-32 32H96a32 32 0 0 1 0-64h192a32 32 0 0 1 32 32zM195.2 195.2a32 32 0 0 1 45.248 0L376.32 331.008a32 32 0 0 1-45.248 45.248L195.2 240.448a32 32 0 0 1 0-45.248zm452.544 452.544a32 32 0 0 1 45.248 0L828.8 783.552a32 32 0 0 1-45.248 45.248L647.744 692.992a32 32 0 0 1 0-45.248zM828.8 195.264a32 32 0 0 1 0 45.184L692.992 376.32a32 32 0 0 1-45.248-45.248l135.808-135.808a32 32 0 0 1 45.248 0zm-452.544 452.48a32 32 0 0 1 0 45.248L240.448 828.8a32 32 0 0 1-45.248-45.248l135.808-135.808a32 32 0 0 1 45.248 0z"
- ></path>
- </svg>
- </el-icon>
- <span class="loadingText">{{ $t("myCreating.loading") }}</span>
- </div>
- <!-- 弹出框预览作品 -->
- <el-dialog
- destroy-on-close
- class="elDialog"
- v-model="showDialog"
- :title="presentItem.title"
- width="40%"
- center
- >
- <div class="videoBox">
- <video
- v-if="presentItem.videoPlayUrl"
- controls="true"
- class=""
- :src="presentItem.videoPlayUrl"
- ></video>
- <div v-else class="insteadVideo">
- {{ $t("myCreating." + presentItem.statusName + "Text") }}
-
- <p v-if="lanChange == 'zh-cn'">
- 错误原因: {{ presentItem.videoMsg }}
- </p>
- <p v-if="lanChange == 'en'">
- Error cause: {{ presentItem.videoMsg }}
- </p>
- <!-- <span v-if="presentItem.videoStatus == 3">{{
- presentItem.videoMsg
- }}</span> -->
- </div>
- <!-- 有视频路径的页脚 -->
- <div class="footer" v-if="presentItem.videoPlayUrl">
- <span class="dialog-footer">
- <!-- dialog下载按钮 -->
- <button
- class="elBtn"
- type="primary"
- @click.stop="handleDownload(presentItem.videoPlayUrl)"
- >
- <el-icon class="icon-delete"><i-ep-download /></el-icon
- >{{ $t("myCreating.download") }}
- </button>
- <!-- dialog删除按钮 -->
- <button
- class="elBtn"
- @click.stop="handelDelete(presentItem.id, presentItem.title)"
- >
- <el-icon class="icon-delete"><i-ep-delete /></el-icon
- >{{ $t("myCreating.delete") }}
- </button>
- </span>
- </div>
- <!-- 无视频路径的页脚 -->
- <div class="footer" v-if="!presentItem.videoPlayUrl">
- <span class="dialog-footer">
- <!-- dialog编辑按钮 -->
- <button
- class="elBtn"
- type="primary"
- @click.stop="
- router.push({
- path: '/createVideo',
- query: { id: presentItem.id },
- })
- "
- v-if="[0, 3].includes(presentItem.videoStatus)"
- >
- {{ $t("myCreating.edit") }}
- </button>
- </span>
- </div>
- </div>
- </el-dialog>
- <!-- 分页 -->
- <div v-if="!isLoading" class="pagination">
- <el-pagination
- v-model:current-page="pageNum"
- v-model:page-size="pageSize"
- :page-sizes="[10, 20, 50, 100, 200]"
- :small="false"
- :disabled="false"
- :background="true"
- layout="total, sizes, prev, pager, next, jumper"
- :total="total"
- @size-change="handleSizeChange"
- @current-change="handleCurrentChange"
- />
- </div>
- </div>
- </template>
-
- <script setup>
- import { userPhotoVideoList, delUserPhotoVideoByID } from "@/apis/myCreating";
- import { timestampToTime } from "@/utils/tools";
- import { useI18n } from "vue-i18n";
- import { getStatus } from "./videoStatus";
- import { useRouter } from "vue-router";
- import dayjs from "dayjs";
- const router = useRouter();
- // 当前语言状态与国际化组件
- const { locale } = useI18n();
- const lanChange = ref(locale);
-
- const title = ref("");
- const pageNum = ref(1);
- const pageSize = ref(10);
- const total = ref(0);
- // 弹窗显示隐藏
- const showDialog = ref(false);
- const isLoading = ref(true);
- // 当前作品
- const presentItem = ref("");
- // 作品列表
- const videoList = ref([]);
-
- const handleSizeChange = (val) => {
- pageSize.value = val;
- getPhotoVideoList(pageNum.value, pageSize.value, title.value);
- };
-
- const handleCurrentChange = (val) => {
- pageNum.value = val;
- getPhotoVideoList(pageNum.value, pageSize.value, title.value);
- };
-
- // 点击作品
- function clickVideoItem(item) {
- showDialog.value = true;
- presentItem.value = item;
- }
-
- // 删除框是否显示
- let showPopup = ref(false);
- function mouseleave() {
- showPopup.value = false;
- }
-
- function mouseenter(item) {
- presentItem.value = item;
- showPopup.value = !showPopup.value;
- }
- // 下载
- function handleDownload(itemVideoPlayUrl) {
- if (itemVideoPlayUrl) {
- const link = document.createElement("a");
- link.href = itemVideoPlayUrl;
- document.body.appendChild(link);
- link.click();
- document.body.removeChild(link);
- ElMessage.success(
- lanChange.value == "zh-cn" ? `下载成功` : `Download Successfully`
- );
- } else {
- ElMessage.error(
- lanChange.value == "zh-cn" ? `无法下载` : `Unable to download`
- );
- }
- }
-
- function goCreate() {
- router.push("/createVideo");
- }
-
- function searchVideoList() {
- getPhotoVideoList(pageNum.value, pageSize.value, title.value, true);
- }
-
- function handelDelete(id, title) {
- const msg =
- lanChange.value == "zh-cn"
- ? `确定要删除这个作品吗? 作品标题:${title}`
- : `Are you sure to delete this video ? Title:${title};`;
- const notice = lanChange.value == "zh-cn" ? "提示" : "Notice";
- const confirm = lanChange.value == "zh-cn" ? "确定" : "Confirm";
- const cancel = lanChange.value == "zh-cn" ? "取消" : "Cancel";
- ElMessageBox.confirm(msg, notice, {
- confirmButtonText: confirm,
- cancelButtonText: cancel,
- }).then(() => {
- delPhotoVideo(id);
- });
- }
-
- /**
- * @description:获取我的视频作品
- * @return: data
- */
- function getPhotoVideoList(pageNum, pageSize, title, searchFlag) {
- userPhotoVideoList(pageNum, pageSize, title)
- .then((res) => {
- console.log(res, "res");
- res.data.list.forEach((item) => {
- // item.createDate = timestampToTime(item.createDate) || "";
- // item.updateDate = timestampToTime(item.updateDate) || "";
- // item.createVideoDate = timestampToTime(item.createVideoDate) || "";
- item.statusName = getStatus(item.videoStatus);
- });
- videoList.value = res.data.list;
- total.value = res.data.total * 1;
- if (searchFlag) {
- const total = res.data.total;
- const msg1 =
- lanChange.value == "zh-cn"
- ? `查询成功!找到${total}条符合条件的视频`
- : `Found! Match ${total} videos`;
- const msg2 =
- lanChange.value == "zh-cn"
- ? `查询成功!没有符合条件的视频`
- : `Found! No match videos`;
- const msg3 =
- lanChange.value == "zh-cn"
- ? `查询成功!已加载全部视频`
- : `Found! Present all videos`;
- return title
- ? ElMessage.success(total > 0 ? msg1 : msg2)
- : ElMessage.success(msg3);
- }
- isLoading.value = false;
- })
- .catch((err) => {
- console.log(err, "err");
- });
- }
-
- /**
- * @description:删除视频作品
- * @param: videoID
- * @return: data
- */
- function delPhotoVideo(videoID) {
- delUserPhotoVideoByID(videoID)
- .then((res) => {
- console.log(res, "res");
- const msg = lanChange.value == "zh-cn" ? `删除成功!` : `Success !`;
- ElMessage.success(msg);
- showDialog.value = false;
- getPhotoVideoList(pageNum.value, pageSize.value, title.value);
- })
- .catch((err) => {
- console.log(err, "err");
- ElMessage.error(err.message);
- });
- }
-
- onMounted(() => {
- isLoading.value = true;
- getPhotoVideoList(pageNum.value, pageSize.value, title.value);
- });
- </script>
-
- <style lang="scss" scoped>
- .page {
- min-height: calc(100vh - 80px);
- padding: 15px 130px;
- background-color: #fff;
- border-radius: 25px 0 0;
- width: 100%;
- overflow: hidden;
- .top {
- margin-bottom: 35px;
- }
- .loadingIcon {
- height: 100px;
- line-height: 100px;
- text-align: center;
- transform: scale(2);
-
- .loadingText {
- position: relative;
- top: -2px;
- left: 4px;
- }
- }
- .workList {
- flex-wrap: wrap;
- justify-content: flex-start;
- width: 100%;
- // height: 200px;
- margin-top: 5px;
- padding-bottom: 50px;
- cursor: pointer;
- .workItem {
- position: relative;
- width: 300px;
- // height: 200px;
- margin: 0 20px 20px 0;
- border: 2px solid #c2c2c2;
- border-radius: 15px;
- cursor: pointer;
- overflow: hidden;
- .workImg {
- position: relative;
- width: 100%;
- height: 170px;
- cursor: pointer;
- padding: 10px;
- overflow: hidden;
- .coverImg {
- max-width: 90%;
- max-height: 170px;
- cursor: pointer;
- }
- .takePlace {
- position: absolute;
- top: 40%;
- width: 80%;
- }
- }
-
- .more {
- position: absolute;
- top: 0;
- left: 0;
- width: 100%;
- height: 170px;
- background-color: rgb(0 0 0 / 30%);
- cursor: pointer;
- opacity: 0;
- transition: all 0.2s;
- .icon-videoPlay {
- position: absolute;
- top: 50%;
- left: 50%;
- width: 50px;
- height: 50px;
- font-size: 50px;
- color: #fff;
- text-align: center;
- transform: translate(-50%, -50%);
- cursor: pointer;
- }
-
- .showBtn {
- position: absolute;
- top: 10px;
- right: 10px;
- width: 20px;
- height: 20px;
- font-size: 20px;
- line-height: 10px;
- color: #fff;
- text-align: center;
- transition: all 0.3s;
- cursor: pointer;
- border-radius: 2px;
- &:hover {
- background-color: #00000056;
- }
- }
-
- .btns {
- position: absolute;
- top: 45px;
- right: 10px;
- // width: 70px;
- // height: 60px;
- overflow: hidden;
- border-radius: 10px;
- cursor: pointer;
-
- &-item {
- // width: 70px;
- // height: 30px;
- text-align: center;
- background-color: #fff;
- padding: 0 10px;
- transition: all 0.3s;
- cursor: pointer;
- &-icon {
- position: relative;
- display: inline-block;
- width: 20px;
- height: 20px;
- cursor: pointer;
- .icon-delete {
- position: absolute;
- top: 4px;
- left: 0;
- width: 20px;
- height: 20px;
- font-size: 16px;
- color: #000;
- text-align: center;
- cursor: pointer;
- }
- }
-
- .text {
- display: inline-block;
- height: 30px;
- padding-left: 5px;
- margin-top: -5px;
- line-height: 20px;
- cursor: pointer;
- }
- &:hover {
- color: #ffffff;
- background-color: #0000001a;
- }
- }
- }
- }
-
- .workInfo {
- justify-content: space-between;
- height: 40px;
- padding: 0 10px;
- line-height: 40px;
- border-top: 1px solid #afafaf;
- white-space: nowrap;
- overflow: hidden;
- text-overflow: ellipsis;
- font-size: 13px;
- }
- .statusName {
- position: absolute;
- top: 10%;
- left: -10%;
- width: 120px;
- text-align: center;
- color: #ffffff;
- font-size: 14px;
- transform: rotate(-45deg);
-
- &.manuscript {
- /* 草稿 */
- background: linear-gradient(to right, #d7d2cc 0%, #304352 100%);
- }
- &.generating {
- /* 生成中 */
- background: linear-gradient(270deg, #4b61dc, #15d1b8);
- }
- &.generationFailed {
- /* 生成失败 */
- background: linear-gradient(120deg, #f093fb 0%, #f5576c 100%);
- }
- &.generationSucceed {
- /* 生成成功 */
- background: linear-gradient(120deg, #84fab0 0%, #8fd3f4 100%);
- }
- }
- &:hover {
- .more {
- opacity: 1;
- }
- }
- }
- }
- .noList {
- .title {
- font-size: 30px;
- text-align: center;
- margin-top: 100px;
- background-image: -webkit-linear-gradient(
- left,
- #4b61dc,
- #15d1b8 25%,
- #4b61dc 50%,
- #15d1b8 75%,
- #4b61dc
- ) !important;
- -webkit-text-fill-color: transparent !important;
- -webkit-background-clip: text !important;
- background-clip: text !important;
- -webkit-background-size: 200% 100% !important;
- background-size: 200% 100% !important;
- }
-
- .goCreate {
- width: 200px;
- height: 40px;
- line-height: 40px;
- text-align: center;
- color: #ffffff;
- border-radius: 6px;
- background: linear-gradient(270deg, #4b61dc, #15d1b8);
- margin: 30px auto;
- cursor: pointer;
- transition: all 0.3s;
- &:hover {
- transform: scale(1.1);
- }
- }
- }
- .pagination {
- position: fixed;
- bottom: 20px;
- left: 50%;
- transform: translateX(-50%);
- background-color: #ffffff;
- padding: 10px 20px;
- border-radius: 8px;
- transition: all 0.3s;
- cursor: pointer;
- &:hover {
- background-color: #b8b8b873;
- }
- }
- }
-
- :deep(.el-input__wrapper) {
- border: none;
- border-bottom: 2px solid #000;
- border-radius: 0;
- box-shadow: none;
- }
-
- .el-icon.icon-edit {
- width: 30px;
- height: 30px;
- font-size: 30px;
- color: #8c939d;
- text-align: center;
- cursor: pointer;
- transition: all 0.3s;
- &:hover {
- color: #292929;
- }
- }
-
- .elDialog {
- .videoBox {
- // display: flex;
- // justify-content: space-between;
- width: 100%;
- padding: 20px;
- video {
- width: 100%;
- max-height: 600px;
- margin: auto;
- }
- .insteadVideo {
- font-size: 20px;
- font-weight: 400;
- margin: 20px auto;
- text-align: center;
- }
- p {
- font-weight: 700;
- }
- }
-
- .dialog-footer {
- display: flex;
- justify-content: space-between;
- .elBtn {
- color: #fff;
- border-radius: 10px;
- padding: 10px 15px;
- cursor: pointer;
- background-color: #000;
- transition: all 0.3s;
- &:hover {
- background-color: #15d1b8;
- }
- }
-
- :deep(.el-icon) {
- margin-right: 5px;
- font-weight: 700;
- }
- }
- }
-
- :deep(.el-dialog) {
- overflow: hidden;
- border-radius: 25px;
- }
- // :deep(.el-dialog__header) {
- // }
- :deep(.el-dialog__title) {
- background-image: -webkit-linear-gradient(
- left,
- #4b61dc,
- #15d1b8 25%,
- #4b61dc 50%,
- #15d1b8 75%,
- #4b61dc
- ) !important;
- -webkit-text-fill-color: transparent !important;
- -webkit-background-clip: text !important;
- background-clip: text !important;
- -webkit-background-size: 200% 100% !important;
- background-size: 200% 100% !important;
- }
-
- :deep(.el-dialog__body) {
- padding: 0;
- }
-
- :deep(.dialog__footer) {
- padding: 0;
- }
- </style>
|