|
|
@@ -14,7 +14,7 @@ |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<!-- 作品列表 --> |
|
|
|
<div class="workList flex"> |
|
|
|
<div v-if="videoList.length > 0" class="workList flex"> |
|
|
|
<div class="workItem" v-for="item in videoList" :key="item.id"> |
|
|
|
<div class="workImg"> |
|
|
|
<img |
|
|
@@ -67,6 +67,14 @@ |
|
|
|
</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> |
|
|
|
<!-- 预览作品 --> |
|
|
|
<el-dialog |
|
|
|
destroy-on-close |
|
|
@@ -110,6 +118,21 @@ |
|
|
|
</span> |
|
|
|
</template> |
|
|
|
</el-dialog> |
|
|
|
|
|
|
|
<div 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> |
|
|
@@ -117,20 +140,34 @@ 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"; |
|
|
|
|
|
|
|
const router = useRouter(); |
|
|
|
// 当前语言状态与国际化组件 |
|
|
|
const { locale } = useI18n(); |
|
|
|
const lanChange = ref(locale); |
|
|
|
|
|
|
|
let title = ref(""); |
|
|
|
let pageSize = ref(100); |
|
|
|
let pageNum = ref(1); |
|
|
|
const title = ref(""); |
|
|
|
const pageNum = ref(1); |
|
|
|
const pageSize = ref(10); |
|
|
|
const total = ref(0); |
|
|
|
// 弹窗显示隐藏 |
|
|
|
let showDialog = ref(false); |
|
|
|
const showDialog = ref(false); |
|
|
|
// 当前作品 |
|
|
|
let presentItem = ref(""); |
|
|
|
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; |
|
|
@@ -150,8 +187,12 @@ function mouseenter(item) { |
|
|
|
|
|
|
|
function handleDownload() {} |
|
|
|
|
|
|
|
function goCreate() { |
|
|
|
router.push("/createVideo"); |
|
|
|
} |
|
|
|
|
|
|
|
function searchVideoList() { |
|
|
|
getPhotoVideoList(pageSize.value, pageNum.value, title.value, true); |
|
|
|
getPhotoVideoList(pageNum.value, pageSize.value, title.value, true); |
|
|
|
} |
|
|
|
|
|
|
|
function handelDelete(id, title) { |
|
|
@@ -174,8 +215,8 @@ function handelDelete(id, title) { |
|
|
|
* @description:获取我的视频作品 |
|
|
|
* @return: data |
|
|
|
*/ |
|
|
|
function getPhotoVideoList(pageSize, pageNum, title, searchFlag) { |
|
|
|
userPhotoVideoList(pageSize, pageNum, title) |
|
|
|
function getPhotoVideoList(pageNum, pageSize, title, searchFlag) { |
|
|
|
userPhotoVideoList(pageNum, pageSize, title) |
|
|
|
.then((res) => { |
|
|
|
console.log(res, "res"); |
|
|
|
res.data.list.forEach((item) => { |
|
|
@@ -185,6 +226,7 @@ function getPhotoVideoList(pageSize, pageNum, title, searchFlag) { |
|
|
|
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 = |
|
|
@@ -195,7 +237,13 @@ function getPhotoVideoList(pageSize, pageNum, title, searchFlag) { |
|
|
|
lanChange.value == "zh-cn" |
|
|
|
? `查询成功!没有符合条件的视频` |
|
|
|
: `Found! No match videos`; |
|
|
|
ElMessage.success(total > 0 ? msg1 : msg2); |
|
|
|
const msg3 = |
|
|
|
lanChange.value == "zh-cn" |
|
|
|
? `查询成功!已加载全部视频` |
|
|
|
: `Found! Present all videos`; |
|
|
|
return title |
|
|
|
? ElMessage.success(total > 0 ? msg1 : msg2) |
|
|
|
: ElMessage.success(msg3); |
|
|
|
} |
|
|
|
}) |
|
|
|
.catch((err) => { |
|
|
@@ -219,204 +267,257 @@ function delPhotoVideo(videoID) { |
|
|
|
} |
|
|
|
|
|
|
|
onMounted(() => { |
|
|
|
getPhotoVideoList(pageSize.value, pageNum.value, title.value); |
|
|
|
getPhotoVideoList(pageNum.value, pageSize.value, title.value); |
|
|
|
}); |
|
|
|
</script> |
|
|
|
|
|
|
|
<style lang="scss" scoped> |
|
|
|
.page { |
|
|
|
// height: calc(100vh - 84px); |
|
|
|
height: 887px; |
|
|
|
padding: 50px; |
|
|
|
height: 1200px; |
|
|
|
padding: 50px 130px; |
|
|
|
background-color: #fff; |
|
|
|
border-radius: 25px 0 0; |
|
|
|
} |
|
|
|
|
|
|
|
: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; |
|
|
|
.top { |
|
|
|
margin-bottom: 35px; |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
.workList { |
|
|
|
flex-wrap: wrap; |
|
|
|
justify-content: flex-start; |
|
|
|
width: 100%; |
|
|
|
height: 200px; |
|
|
|
margin-top: 20px; |
|
|
|
cursor: pointer; |
|
|
|
.workItem { |
|
|
|
position: relative; |
|
|
|
width: 300px; |
|
|
|
.workList { |
|
|
|
flex-wrap: wrap; |
|
|
|
justify-content: flex-start; |
|
|
|
width: 100%; |
|
|
|
height: 200px; |
|
|
|
margin: 0 10px 10px 0; |
|
|
|
border: 2px solid #c2c2c2; |
|
|
|
border-radius: 5px; |
|
|
|
margin-top: 20px; |
|
|
|
cursor: pointer; |
|
|
|
overflow: hidden; |
|
|
|
.workImg { |
|
|
|
.workItem { |
|
|
|
position: relative; |
|
|
|
width: 100%; |
|
|
|
height: 170px; |
|
|
|
width: 300px; |
|
|
|
height: 200px; |
|
|
|
margin: 0 20px 30px 0; |
|
|
|
border: 2px solid #c2c2c2; |
|
|
|
border-radius: 5px; |
|
|
|
cursor: pointer; |
|
|
|
padding: 10px; |
|
|
|
.coverImg { |
|
|
|
max-width: 90%; |
|
|
|
max-height: 170px; |
|
|
|
overflow: hidden; |
|
|
|
.workImg { |
|
|
|
position: relative; |
|
|
|
width: 100%; |
|
|
|
height: 170px; |
|
|
|
cursor: pointer; |
|
|
|
} |
|
|
|
.takePlace { |
|
|
|
position: absolute; |
|
|
|
top: 40%; |
|
|
|
width: 80%; |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
.more { |
|
|
|
position: absolute; |
|
|
|
top: 0; |
|
|
|
left: 0; |
|
|
|
display: none; |
|
|
|
width: 100%; |
|
|
|
height: 170px; |
|
|
|
background-color: rgb(0 0 0 / 30%); |
|
|
|
cursor: pointer; |
|
|
|
.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; |
|
|
|
padding: 10px; |
|
|
|
.coverImg { |
|
|
|
max-width: 90%; |
|
|
|
max-height: 170px; |
|
|
|
cursor: pointer; |
|
|
|
} |
|
|
|
.takePlace { |
|
|
|
position: absolute; |
|
|
|
top: 40%; |
|
|
|
width: 80%; |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
.btns { |
|
|
|
.more { |
|
|
|
position: absolute; |
|
|
|
top: 45px; |
|
|
|
right: 10px; |
|
|
|
// width: 70px; |
|
|
|
// height: 60px; |
|
|
|
overflow: hidden; |
|
|
|
border-radius: 10px; |
|
|
|
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; |
|
|
|
} |
|
|
|
|
|
|
|
&-item { |
|
|
|
// width: 70px; |
|
|
|
// height: 30px; |
|
|
|
.showBtn { |
|
|
|
position: absolute; |
|
|
|
top: 10px; |
|
|
|
right: 10px; |
|
|
|
width: 20px; |
|
|
|
height: 20px; |
|
|
|
font-size: 20px; |
|
|
|
line-height: 10px; |
|
|
|
color: #fff; |
|
|
|
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; |
|
|
|
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-delete { |
|
|
|
position: absolute; |
|
|
|
top: 4px; |
|
|
|
left: 0; |
|
|
|
&-icon { |
|
|
|
position: relative; |
|
|
|
display: inline-block; |
|
|
|
width: 20px; |
|
|
|
height: 20px; |
|
|
|
font-size: 16px; |
|
|
|
color: #000; |
|
|
|
text-align: center; |
|
|
|
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; |
|
|
|
.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: 30px; |
|
|
|
padding: 0 10px; |
|
|
|
line-height: 30px; |
|
|
|
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%); |
|
|
|
.workInfo { |
|
|
|
justify-content: space-between; |
|
|
|
height: 30px; |
|
|
|
padding: 0 10px; |
|
|
|
line-height: 30px; |
|
|
|
border-top: 1px solid #afafaf; |
|
|
|
} |
|
|
|
&.generating { |
|
|
|
/* 生成中 */ |
|
|
|
background: linear-gradient(270deg, #4b61dc, #15d1b8); |
|
|
|
.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%); |
|
|
|
} |
|
|
|
} |
|
|
|
&.generationFailed { |
|
|
|
/* 生成失败 */ |
|
|
|
background: linear-gradient(120deg, #f093fb 0%, #f5576c 100%); |
|
|
|
&:hover { |
|
|
|
.more { |
|
|
|
opacity: 1; |
|
|
|
} |
|
|
|
} |
|
|
|
&.generationSucceed { |
|
|
|
/* 生成成功 */ |
|
|
|
background: linear-gradient(120deg, #84fab0 0%, #8fd3f4 100%); |
|
|
|
} |
|
|
|
} |
|
|
|
.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: 50px; |
|
|
|
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; |
|
|
|
} |
|
|
|
|
|
|
|
.workItem:hover .more { |
|
|
|
display: block; |
|
|
|
.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; |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|