224 lines
6.2 KiB
Vue
224 lines
6.2 KiB
Vue
<template>
|
||
<PageWrapper>
|
||
<!-- 搜索框 -->
|
||
<el-card shadow="hover" :bordered="false" class="custom-box-card">
|
||
<h2 class="text-lg">搜索列表（视频）</h2>
|
||
<div class="mt-4 text-center">
|
||
<el-input
|
||
:style="{ width: '320px' }"
|
||
v-model="keywords"
|
||
placeholder="请输入关键字"
|
||
:prefix-icon="Search"
|
||
/>
|
||
</div>
|
||
</el-card>
|
||
|
||
<!-- 视频部分 start -->
|
||
<div class="mt-3 tab2">
|
||
<el-card shadow="hover" class="custom-box-card">
|
||
<!-- 分类 -->
|
||
<div class="p-5">
|
||
<el-skeleton :rows="1" :loading="loading" style="width: 100%">
|
||
<template #default>
|
||
<div class="flex items-start classification justify-between mt-2.5">
|
||
<div class="flex-none label">分类: </div>
|
||
<div class="flex-grow">
|
||
<el-space wrap size="small" :class="!isCollapse ? 'height-limited' : ''">
|
||
<el-tag
|
||
size="large"
|
||
v-for="(item, index) in categoryListData"
|
||
:key="index"
|
||
@click="selectedHandle(index)"
|
||
:class="categoryIndex != index ? 'noSelected' : ''"
|
||
>{{ item.name }}</el-tag
|
||
>
|
||
</el-space>
|
||
</div>
|
||
<div
|
||
class="flex items-center justify-end flex-none cursor-pointer collapse-btn"
|
||
:style="`color:var(--el-color-primary-light-1)`"
|
||
@click="collapseHandle"
|
||
>{{ isCollapse ? '收起' : '展开' }}
|
||
<el-icon
|
||
><arrow-up-bold class="ml-1" v-if="isCollapse" /><arrow-down-bold
|
||
class="ml-1"
|
||
v-else /></el-icon
|
||
></div>
|
||
</div>
|
||
</template>
|
||
</el-skeleton>
|
||
|
||
<div class="flex items-start items-center justify-between mt-4 classification">
|
||
<div class="flex-none label">排序:</div>
|
||
<div class="flex-grow">
|
||
<el-radio-group v-model="radio">
|
||
<el-radio :label="1">最新</el-radio>
|
||
<el-radio :label="2">最热</el-radio>
|
||
<el-radio :label="3">评分最高</el-radio>
|
||
</el-radio-group>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</el-card>
|
||
|
||
<!-- 视频 -->
|
||
<el-row :gutter="12" class="list">
|
||
<el-col
|
||
:xs="12"
|
||
:sm="8"
|
||
:md="8"
|
||
:lg="6"
|
||
:xl="4"
|
||
v-for="item in videoListData"
|
||
:key="item.id"
|
||
>
|
||
<el-card shadow="hover" class="custom-box-card">
|
||
<el-image :src="item.cover" class="cover" />
|
||
<div class="p-3">
|
||
<div>
|
||
<h3 class="text-base font-bold truncate">{{ item.title }}</h3>
|
||
<p class="my-1 text-gray-500 roy-line-2">简介：{{ item.summary }}</p>
|
||
</div>
|
||
<div class="flex items-center justify-between text-gray-400">
|
||
<div>
|
||
<el-icon class="mr-1 align-middle"><video-play /></el-icon>
|
||
<span class="text-xs">{{ item.viewingtimes }}万</span></div
|
||
>
|
||
<div class="flex items-center justify-center">
|
||
<div v-for="(avatar, i) in item.avatargroup" :key="i">
|
||
<el-avatar :size="20" :src="avatar.src" />
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</el-card>
|
||
</el-col>
|
||
</el-row>
|
||
|
||
<!-- 加载更多 -->
|
||
<el-card shadow="hover" class="mt-3 text-center custom-box-card">
|
||
<el-button :loading="loadingMore" @click="loadMore">加载更多</el-button>
|
||
</el-card>
|
||
</div>
|
||
</PageWrapper>
|
||
</template>
|
||
|
||
<script lang="ts" setup>
|
||
import { ref, onMounted } from 'vue';
|
||
import { Search, ArrowUpBold, ArrowDownBold, VideoPlay } from '@element-plus/icons-vue';
|
||
import { categoryList } from '@/api/comtemp/category';
|
||
import { videoList } from '@/api/comtemp/video';
|
||
|
||
const keywords = ref('');
|
||
const loading = ref(true);
|
||
const categoryIndex = ref(-1);
|
||
const isCollapse = ref(false);
|
||
const categoryListData = ref();
|
||
const videoListData = ref();
|
||
const pageSize = ref(12);
|
||
const loadingMore = ref(false);
|
||
const radio = ref(1);
|
||
|
||
//获取分类列表
|
||
async function getCategoryList() {
|
||
const res = await categoryList();
|
||
categoryListData.value = res && res.list ? res.list : [];
|
||
loading.value = false;
|
||
}
|
||
|
||
//分类选中
|
||
function selectedHandle(index) {
|
||
categoryIndex.value = index;
|
||
console.log(categoryIndex.value);
|
||
}
|
||
|
||
//是否展开
|
||
function collapseHandle() {
|
||
isCollapse.value = !isCollapse.value;
|
||
}
|
||
|
||
//获取视频列表
|
||
async function getVideoList() {
|
||
const res = await videoList({ pageSize: pageSize.value });
|
||
videoListData.value = res && res.list ? res.list : [];
|
||
loadingMore.value = false;
|
||
}
|
||
|
||
//加载更多
|
||
function loadMore() {
|
||
loadingMore.value = true;
|
||
pageSize.value = pageSize.value + 12;
|
||
getVideoList();
|
||
}
|
||
|
||
onMounted(() => {
|
||
//获取分类
|
||
getCategoryList();
|
||
//获取文章
|
||
getVideoList();
|
||
});
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
// 处理栅格
|
||
.el-row {
|
||
padding-top: 6px;
|
||
margin: -6px;
|
||
.el-row {
|
||
padding-top: 0;
|
||
}
|
||
}
|
||
.el-col {
|
||
padding-top: 6px;
|
||
padding-bottom: 6px;
|
||
}
|
||
// 卡片定制
|
||
.custom-box-card {
|
||
border: none;
|
||
}
|
||
|
||
//分类
|
||
.classification {
|
||
.label,
|
||
.collapse-btn {
|
||
height: 32px;
|
||
font-size: 14px;
|
||
line-height: 30px;
|
||
}
|
||
.label {
|
||
width: 60px;
|
||
}
|
||
.collapse-btn {
|
||
width: 60px;
|
||
}
|
||
.height-limited {
|
||
height: 40px;
|
||
overflow: hidden;
|
||
}
|
||
.el-tag {
|
||
cursor: pointer;
|
||
}
|
||
.el-tag.noSelected {
|
||
background-color: transparent;
|
||
border-color: transparent;
|
||
color: var(--el-color-info-lighter);
|
||
}
|
||
}
|
||
|
||
//视频
|
||
.tab2 {
|
||
.list {
|
||
margin-top: 0;
|
||
:deep(.el-card .el-card__body) {
|
||
padding: 0;
|
||
p {
|
||
height: 42px;
|
||
}
|
||
}
|
||
.card:hover {
|
||
box-shadow: rgba(0, 0, 0, 0.2) 0px 0px 20px;
|
||
}
|
||
}
|
||
}
|
||
</style>
|