You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
75 lines
2.1 KiB
75 lines
2.1 KiB
<template>
|
|
<div>
|
|
<ClientOnly>
|
|
<el-empty v-if="movieList.length === 0" description="您还未收藏视频噢~" />
|
|
<div v-else class="video-list">
|
|
<el-row :gutter="20">
|
|
<el-col v-for="item in movieList" :key="item.movie.id" :sm="4" :xs="8">
|
|
<div class="video-list__block">
|
|
<nuxt-link :to="`/column/${item.movie.columnValue}/movie/${item.movie.id}`">
|
|
<el-image
|
|
class="video-list__block__img"
|
|
:src="item.movie.poster || runtimeConfig.public.apiBase + '/default.jpg'"
|
|
fit="cover"
|
|
/>
|
|
</nuxt-link>
|
|
<div class="video-list__detail">
|
|
<h4 class="title text-overflow">{{ item.movie.title }}</h4>
|
|
</div>
|
|
</div>
|
|
</el-col>
|
|
</el-row>
|
|
<div class="pagination">
|
|
<el-pagination
|
|
background
|
|
layout="prev, pager, next"
|
|
:current-page="currentPage"
|
|
:page-size="12"
|
|
:pager-count="5"
|
|
:total="total"
|
|
@current-change="handleCurrentChange"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</ClientOnly>
|
|
</div>
|
|
</template>
|
|
|
|
<script lang="ts" setup>
|
|
import { useRequest } from '~/composables/useRequest';
|
|
|
|
const runtimeConfig = useRuntimeConfig();
|
|
const movieList = ref<any[]>([]);
|
|
const currentPage = ref<number>(1);
|
|
const total = ref(0);
|
|
|
|
async function getList() {
|
|
const { data: collectData, error } = await useRequest<{ rows: any[]; total: number; code: number }>(
|
|
'/user-collect/findByPage',
|
|
{
|
|
query: {
|
|
pageNum: currentPage.value,
|
|
pageSize: 12
|
|
}
|
|
}
|
|
);
|
|
if (!error.value && collectData.value?.code === 200) {
|
|
movieList.value = collectData.value.rows;
|
|
total.value = collectData.value.total;
|
|
}
|
|
}
|
|
getList();
|
|
|
|
function handleCurrentChange(page: number) {
|
|
currentPage.value = page;
|
|
getList();
|
|
}
|
|
</script>
|
|
|
|
<style scoped>
|
|
.pagination {
|
|
padding: 20px;
|
|
display: flex;
|
|
justify-content: center;
|
|
}
|
|
</style>
|