|
@@ -14,67 +14,84 @@ |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
<!-- 作品列表 --> |
|
|
<!-- 作品列表 --> |
|
|
<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 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="'statusName ' + item.statusName"> |
|
|
|
|
|
{{ $t("myCreating." + item.statusName) }} |
|
|
|
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="workInfo flex"> |
|
|
|
|
|
<span>{{ item.title }}</span> |
|
|
|
|
|
<span>{{ item.createDate }}</span> |
|
|
|
|
|
</div> |
|
|
|
|
|
<!-- 更多遮罩层 --> |
|
|
|
|
|
<div |
|
|
|
|
|
class="more" |
|
|
|
|
|
@mouseleave="mouseleave" |
|
|
|
|
|
@click="clickVideoItem(item)" |
|
|
|
|
|
> |
|
|
|
|
|
<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" @click.stop="handleDownload(item.id)"> |
|
|
|
|
|
<div class="btns-item-icon"> |
|
|
|
|
|
<el-icon class="icon-delete"><i-ep-download /></el-icon> |
|
|
|
|
|
|
|
|
<div class="workInfo flex"> |
|
|
|
|
|
<span>{{ item.title }}</span> |
|
|
|
|
|
<span>{{ item.createDate }}</span> |
|
|
|
|
|
</div> |
|
|
|
|
|
<!-- 更多遮罩层 --> |
|
|
|
|
|
<div |
|
|
|
|
|
class="more" |
|
|
|
|
|
@mouseleave="mouseleave" |
|
|
|
|
|
@click="clickVideoItem(item)" |
|
|
|
|
|
> |
|
|
|
|
|
<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" @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> |
|
|
<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 |
|
|
|
|
|
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 class="text">{{ $t("myCreating.delete") }}</div> |
|
|
|
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</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 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> |
|
|
</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 |
|
|
<el-dialog |
|
|
destroy-on-close |
|
|
destroy-on-close |
|
@@ -119,7 +136,7 @@ |
|
|
</template> |
|
|
</template> |
|
|
</el-dialog> |
|
|
</el-dialog> |
|
|
|
|
|
|
|
|
<div class="pagination"> |
|
|
|
|
|
|
|
|
<div v-if="!isLoading" class="pagination"> |
|
|
<el-pagination |
|
|
<el-pagination |
|
|
v-model:current-page="pageNum" |
|
|
v-model:current-page="pageNum" |
|
|
v-model:page-size="pageSize" |
|
|
v-model:page-size="pageSize" |
|
@@ -153,6 +170,7 @@ const pageSize = ref(10); |
|
|
const total = ref(0); |
|
|
const total = ref(0); |
|
|
// 弹窗显示隐藏 |
|
|
// 弹窗显示隐藏 |
|
|
const showDialog = ref(false); |
|
|
const showDialog = ref(false); |
|
|
|
|
|
const isLoading = ref(true); |
|
|
// 当前作品 |
|
|
// 当前作品 |
|
|
const presentItem = ref(""); |
|
|
const presentItem = ref(""); |
|
|
// 作品列表 |
|
|
// 作品列表 |
|
@@ -245,6 +263,7 @@ function getPhotoVideoList(pageNum, pageSize, title, searchFlag) { |
|
|
? ElMessage.success(total > 0 ? msg1 : msg2) |
|
|
? ElMessage.success(total > 0 ? msg1 : msg2) |
|
|
: ElMessage.success(msg3); |
|
|
: ElMessage.success(msg3); |
|
|
} |
|
|
} |
|
|
|
|
|
isLoading.value = false; |
|
|
}) |
|
|
}) |
|
|
.catch((err) => { |
|
|
.catch((err) => { |
|
|
console.log(err, "err"); |
|
|
console.log(err, "err"); |
|
@@ -271,6 +290,7 @@ function delPhotoVideo(videoID) { |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
onMounted(() => { |
|
|
onMounted(() => { |
|
|
|
|
|
isLoading.value = true; |
|
|
getPhotoVideoList(pageNum.value, pageSize.value, title.value); |
|
|
getPhotoVideoList(pageNum.value, pageSize.value, title.value); |
|
|
}); |
|
|
}); |
|
|
</script> |
|
|
</script> |
|
@@ -284,6 +304,17 @@ onMounted(() => { |
|
|
.top { |
|
|
.top { |
|
|
margin-bottom: 35px; |
|
|
margin-bottom: 35px; |
|
|
} |
|
|
} |
|
|
|
|
|
.loadingIcon { |
|
|
|
|
|
height: 100px; |
|
|
|
|
|
line-height: 100px; |
|
|
|
|
|
text-align: center; |
|
|
|
|
|
transform: scale(2); |
|
|
|
|
|
.loadingText { |
|
|
|
|
|
position: relative; |
|
|
|
|
|
top: -2px; |
|
|
|
|
|
left: 4px; |
|
|
|
|
|
} |
|
|
|
|
|
} |
|
|
.workList { |
|
|
.workList { |
|
|
flex-wrap: wrap; |
|
|
flex-wrap: wrap; |
|
|
justify-content: flex-start; |
|
|
justify-content: flex-start; |
|
|