@@ -3,19 +3,41 @@
<!-- 搜索框 -->
<div class="top">
<div class="flex justify-between" style="width: 300px">
<el-input v-model="title" :placeholder="$t('myCreating.typeTitle')" />
<el-icon class="icon-edit"><i-ep-edit /></el-icon>
<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 class="workList flex">
<div class="workItem" v-for="item in 12" :key="item">
<div class="workItem" v-for="item in videoList" :key="item.id ">
<div class="workImg">
<img class="inmiddle" src="" alt="" />
<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>{{ $t("myCreating.name") }}</span>
<span>{{ $t("myCreating.date") }}</span>
<span>{{ item.title }}</span>
<span>{{ item.createDate }}</span>
</div>
<!-- 更多遮罩层 -->
<div
@@ -26,13 +48,16 @@
<el-icon 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">
<div class="btns-item" @click.stop="handleDownload(item.id)" >
<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">
<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>
@@ -47,24 +72,38 @@
destroy-on-close
class="elDialog"
v-model="showDialog"
:title="presentVideo "
:title="presentItem.title "
width="40%"
center
>
<div class="videoBox">
<video
v-if="presentItem.videoPlayUrl"
controls="true"
class=""
src="https://wenlian.wenzhou.gov.cn:8001/upload/video/%E3%80%8A%E7%93%AF%E8%B6%8A%E4%B9%8B%E5%8D%8E%E3%80%8B%E7%89%87%E8%8A%B11.mp4 "
:src="presentItem.videoPlayUrl "
></video>
<div v-else class="insteadVideo">
{{ $t("myCreating." + presentItem.statusName + "Text") }}
<span v-if="presentItem.videoStatus == 3">{{
presentItem.videoMsg
}}</span>
</div>
</div>
<template #footer>
<template #footer v-if="presentItem.videoPlayUrl" >
<span class="dialog-footer">
<button class="elBtn" type="primary" @click="showDialog = false">
<button
class="elBtn"
type="primary"
@click.stop="handleDownload(presentItem.id)"
>
<el-icon class="icon-delete"><i-ep-download /></el-icon
>{{ $t("myCreating.download") }}
</button>
<button class="elBtn" @click="showDialog = false">
<button
class="elBtn"
@click.stop="handelDelete(presentItem.id, presentItem.title)"
>
<el-icon class="icon-delete"><i-ep-delete /></el-icon
>{{ $t("myCreating.delete") }}
</button>
@@ -74,32 +113,121 @@
</div>
</template>
<script setup>
import { userPhotoVideoList, delUserPhotoVideoByID } from "@/apis/myCreating";
import { timestampToTime } from "@/utils/tools";
import { useI18n } from "vue-i18n";
import { getStatus } from "./videoStatus";
// 当前语言状态与国际化组件
const { locale } = useI18n();
const lanChange = ref(locale);
let title = ref("");
let pageSize = ref(100);
let pageNum = ref(1);
// 弹窗显示隐藏
let showDialog = ref(false);
// 当前作品
let presentVideo = ref("");
// 点击作品事件
let presentItem = ref("");
// 作品列表
const videoList = ref([]);
// 点击作品
function clickVideoItem(item) {
showDialog.value = true;
presentVideo.value = item;
presentItem .value = item;
}
// 删除框是否显示
let showPopup = ref(false);
function mouseleave() {
showPopup.value = false;
}
function mouseenter(item) {
presentVideo .value = item;
presentItem .value = item;
showPopup.value = !showPopup.value;
}
function handleDownload() {}
function searchVideoList() {
getPhotoVideoList(pageSize.value, pageNum.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(pageSize, pageNum, title, searchFlag) {
userPhotoVideoList(pageSize, pageNum, 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;
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`;
ElMessage.success(total > 0 ? msg1 : msg2);
}
})
.catch((err) => {
console.log(err, "err");
});
}
/**
* @description:删除视频作品
* @param: videoID
* @return: data
*/
function delPhotoVideo(videoID) {
delUserPhotoVideoByID(videoID)
.then((res) => {
console.log(res, "res");
})
.catch((err) => {
console.log(err, "err");
});
}
onMounted(() => {
getPhotoVideoList(pageSize.value, pageNum.value, title.value);
});
</script>
<style lang="scss" scoped>
.page {
// height: calc(100vh - 84px);
height: 887px;
padding: 20px 0 0 20px;
padding: 5 0px;
background-color: #fff;
border-radius: 25px 0 0;
}
@@ -112,11 +240,16 @@ function mouseenter(item) {
}
.el-icon.icon-edit {
width: 32 px;
height: 32 px;
font-size: 32 px;
width: 30 px;
height: 30 px;
font-size: 30 px;
color: #8c939d;
text-align: center;
cursor: pointer;
transition: all 0.3s;
&:hover {
color: #292929;
}
}
.workList {
@@ -125,23 +258,31 @@ function mouseenter(item) {
width: 100%;
height: 200px;
margin-top: 20px;
cursor: pointer;
.workItem {
position: relative;
width: 300px;
height: 200px;
margin: 0 10px 10px 0;
border: 1px solid #000 ;
border: 2px solid #c2c2c2 ;
border-radius: 5px;
cursor: pointer;
overflow: hidden;
.workImg {
position: relative;
width: 100%;
height: 170px;
background-color: red ;
i mg {
max-width: 10 0%;
cursor: pointer ;
padding: 10px;
.coverI mg {
max-width: 9 0%;
max-height: 170px;
cursor: pointer;
}
.takePlace {
position: absolute;
top: 30%;
width: 80%;
}
}
@@ -153,7 +294,7 @@ function mouseenter(item) {
width: 100%;
height: 170px;
background-color: rgb(0 0 0 / 30%);
cursor: pointer;
.icon-videoPlay {
position: absolute;
top: 50%;
@@ -164,24 +305,25 @@ function mouseenter(item) {
color: #fff;
text-align: center;
transform: translate(-50%, -50%);
cursor: pointer;
}
.showBtn {
position: absolute;
top: 10px;
right: 10px;
width: 3 0px;
height: 3 0px;
width: 2 0px;
height: 2 0px;
font-size: 20px;
line-height: 15 px;
line-height: 10 px;
color: #fff;
text-align: center;
transition: all 0.3s;
cursor: pointer;
// &:hover {
// width: 80px;
// height: 80px;
// background-color: aqua;
// }
border-radius: 2px;
&:hover {
background-color: #00000056;
}
}
.btns {
@@ -192,6 +334,7 @@ function mouseenter(item) {
// height: 60px;
overflow: hidden;
border-radius: 10px;
cursor: pointer;
&-item {
// width: 70px;
@@ -199,12 +342,14 @@ function mouseenter(item) {
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;
@@ -214,6 +359,7 @@ function mouseenter(item) {
font-size: 16px;
color: #000;
text-align: center;
cursor: pointer;
}
}
@@ -223,6 +369,11 @@ function mouseenter(item) {
padding-left: 5px;
margin-top: -5px;
line-height: 20px;
cursor: pointer;
}
&:hover {
color: #ffffff;
background-color: #0000001a;
}
}
}
@@ -233,7 +384,34 @@ function mouseenter(item) {
height: 30px;
padding: 0 10px;
line-height: 30px;
border-top: 1px solid #000;
border-top: 1px solid #afafaf;
}
.statusName {
position: absolute;
top: 10%;
left: -10%;
width: 120px;
text-align: center;
color: #ffffff;
font-size: 14px;
transform: rotate(-45deg);
&.draft {
/* 草稿 */
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%);
}
}
}
@@ -247,21 +425,22 @@ function mouseenter(item) {
display: flex;
justify-content: space-between;
width: 100%;
height: 400px;
padding: 0 20px;
padding: 10px 40px 30px 40px;
video {
width: 90%;
height: 400px;
margin-top: -10px;
margin-left: 5%;
width: 100%;
margin: auto;
}
.insteadVideo {
font-size: 20px;
font-weight: 600;
margin: 20px auto;
}
}
.dialog-footer {
display: flex;
justify-content: space-between;
.elBtn {
color: #fff;
border-radius: 10px;
@@ -288,7 +467,19 @@ function mouseenter(item) {
// :deep(.el-dialog__header) {
// }
:deep(.el-dialog__title) {
color: red;
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) {