146 lines
3.3 KiB
Vue
146 lines
3.3 KiB
Vue
<template>
|
|
<div class="videos">
|
|
<PullRefresh :params="moreParams" @onLoad="onLoad" @onRefresh="onRefresh">
|
|
<div class="moreMoviesBox" :class="['video', 'image'].includes(currentType) ? 'moreAcgBox' : ''">
|
|
<HorizontalVideoBox
|
|
class="videoBox"
|
|
:videoList="state.list"
|
|
:videoInfo="item"
|
|
:isMovie="type == 'SP' && type == currentType"
|
|
v-for="item in state.list"
|
|
:key="item.id"
|
|
:showTimeAndComment="currentType == 'SP'"
|
|
@changeVideo="changeVideo"
|
|
/>
|
|
</div>
|
|
</PullRefresh>
|
|
</div>
|
|
</template>
|
|
<script lang="ts" setup>
|
|
import VideoApi from '@/service/video';
|
|
import AcgApi from '@/service/acg';
|
|
import { reactive } from 'vue';
|
|
const props = withDefaults(
|
|
defineProps<{
|
|
type: string;
|
|
tagId?: string;
|
|
currentType: string;
|
|
}>(),
|
|
{
|
|
type: 'SP',
|
|
},
|
|
);
|
|
const state = reactive({
|
|
tabActive: 0,
|
|
pageNumber: 1,
|
|
pageSize: 10,
|
|
list: <any>[],
|
|
});
|
|
const moreParams = reactive({
|
|
loading: true,
|
|
refreshing: false,
|
|
finished: false,
|
|
isNoData: false,
|
|
error: false,
|
|
isHigehtMax: false,
|
|
});
|
|
const emit = defineEmits(['changeVideo']);
|
|
const changeVideo = (videoInfo: any) => {
|
|
emit('changeVideo', videoInfo);
|
|
};
|
|
// 获取更多视频
|
|
const getList = async () => {
|
|
try {
|
|
let req: any = {
|
|
pageNumber: state.pageNumber,
|
|
pageSize: state.pageSize,
|
|
};
|
|
let ajax: any = VideoApi.queryRecommend;
|
|
if (props.currentType == 'video' || props.currentType == 'image') {
|
|
req.mediaType = props.currentType;
|
|
if (props.type == props.currentType) {
|
|
req.tagId = props.tagId || null;
|
|
}
|
|
ajax = AcgApi.getMediaRecommend;
|
|
} else {
|
|
req.newsType = props.currentType;
|
|
if (props.type == 'SP') {
|
|
req.tagId = props.tagId || null;
|
|
}
|
|
}
|
|
|
|
let res: any = await ajax(req);
|
|
let list = res.list || [];
|
|
if (state.pageNumber == 1) {
|
|
state.list = list;
|
|
} else {
|
|
state.list = state.list.concat(list);
|
|
}
|
|
if (state.pageNumber == 1 && state.list.length == 0) {
|
|
moreParams.isNoData = true;
|
|
}
|
|
if (!res.hasNext) {
|
|
moreParams.finished = true;
|
|
}
|
|
} catch (e) {
|
|
moreParams.error = true;
|
|
} finally {
|
|
moreParams.loading = false;
|
|
moreParams.refreshing = false;
|
|
}
|
|
};
|
|
const onLoad = () => {
|
|
if (moreParams.refreshing) return;
|
|
moreParams.loading = true;
|
|
state.pageNumber++;
|
|
getList();
|
|
};
|
|
const onRefresh = () => {
|
|
state.pageNumber = 1;
|
|
moreParams.refreshing = true;
|
|
moreParams.finished = false;
|
|
moreParams.isNoData = false;
|
|
getList();
|
|
};
|
|
const init = () => {
|
|
getList();
|
|
};
|
|
init();
|
|
</script>
|
|
<style lang="scss" scoped>
|
|
.videos {
|
|
.moreMoviesBox {
|
|
display: grid;
|
|
grid-template-columns: repeat(2, minmax(0, 1fr));
|
|
grid-column-gap: 7px;
|
|
width: 100%;
|
|
box-sizing: border-box;
|
|
.videoBox {
|
|
width: 100%;
|
|
min-width: 0;
|
|
:deep(.coverBox) {
|
|
height: 93px;
|
|
}
|
|
}
|
|
}
|
|
.moreAcgBox {
|
|
display: grid;
|
|
grid-template-columns: repeat(3, minmax(0, 1fr));
|
|
grid-column-gap: 5px;
|
|
.videoBox {
|
|
width: 100%;
|
|
min-width: 0;
|
|
:deep(.coverBox) {
|
|
height: 148px;
|
|
}
|
|
:deep(.videoTitleBox) {
|
|
.videoTitle {
|
|
height: 20px;
|
|
-webkit-line-clamp: 1;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</style>
|