Skip to content

Commit 40a6df8

Browse files
hgc357341051hgc357341051
authored
Create VideoList.vue 播放列表
1 parent 4bee44c commit 40a6df8

File tree

1 file changed

+183
-0
lines changed

1 file changed

+183
-0
lines changed

‎dashboard/src/components/VideoList.vue‎

Lines changed: 183 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,183 @@
1+
<template>
2+
<a-tabs
3+
lazy-load
4+
size="large"
5+
justify
6+
animation
7+
v-model:activeKey="activeKey"
8+
:trigger="trigger"
9+
@change="getListData"
10+
>
11+
<a-tab-pane key="recommendTuijian404" title="推荐">
12+
<a-scrollbar
13+
@scroll="scrollToBottom($event)"
14+
:style="'height:' + listHeight + 'px; overflow: auto;margin-right: 14px;'"
15+
>
16+
<a-grid :cols="{ xs: 1, sm: 2, md: 3, lg: 4, xl: 5, xxl: 6 }" :rowGap="20">
17+
<a-grid-item
18+
v-for="item in listData[activeKey]"
19+
:key="item.vod_id"
20+
class="video_list_hover"
21+
>
22+
<div style="margin: 10px" class="video_list_item">
23+
<div class="video_list_item_img">
24+
<a-image
25+
:preview="false"
26+
class="video_list_item_img_cover"
27+
fit="cover"
28+
:src="item.vod_pic"
29+
>
30+
</a-image>
31+
</div>
32+
33+
<div class="video_list_item_title">{{ item.vod_name }}</div>
34+
</div>
35+
</a-grid-item>
36+
</a-grid>
37+
<div style="height: 60px"></div>
38+
</a-scrollbar>
39+
</a-tab-pane>
40+
<a-tab-pane
41+
v-for="item in classList.class"
42+
:key="item.type_id"
43+
:title="item.type_name"
44+
>
45+
<a-scrollbar
46+
@scroll="scrollToBottom($event)"
47+
:style="'height:' + listHeight + 'px; overflow: auto;margin-right: 14px;'"
48+
>
49+
<a-grid :cols="{ xs: 1, sm: 2, md: 3, lg: 4, xl: 5, xxl: 6 }" :rowGap="20">
50+
<a-grid-item
51+
v-for="item in listData[item.type_id]"
52+
:key="item.vod_id"
53+
class="video_list_hover"
54+
>
55+
<div style="margin: 10px" class="video_list_item">
56+
<div class="video_list_item_img">
57+
<a-image
58+
:preview="false"
59+
class="video_list_item_img_cover"
60+
fit="cover"
61+
:src="item.vod_pic"
62+
>
63+
</a-image>
64+
</div>
65+
66+
<div class="video_list_item_title">{{ item.vod_name }}</div>
67+
</div>
68+
</a-grid-item>
69+
</a-grid>
70+
<div style="height: 60px"></div>
71+
</a-scrollbar>
72+
</a-tab-pane>
73+
</a-tabs>
74+
</template>
75+
76+
<script setup>
77+
import req from "@/utils/req";
78+
import { ref, reactive, onMounted } from "vue";
79+
//分类选中id
80+
const activeKey = ref("recommendTuijian404"); //key设置一个网站永远不会设置type_id
81+
const listData = reactive({});
82+
const listHeight = ref(0);
83+
const props = defineProps({
84+
classList: Object,
85+
trigger: {
86+
type: String,
87+
default: "click",
88+
},
89+
});
90+
91+
//获取分类列表数据
92+
const getListData = async (key) => {
93+
console.log(key, "选中分类id"); //记得判断一下key=activeKey的默认值是不是推荐列表
94+
if (!listData.hasOwnProperty(key)) {
95+
//已存在的就不用在次请求了
96+
try {
97+
let response;
98+
if (req.defaults.baseURL === "") {
99+
response = await req.get("/mock/data.json");
100+
listData[key] = response.homeVod.list;
101+
} else {
102+
response = await req.get("/homeVod"); // 假设这个请求返回 sites 数组
103+
listData[key] = response.list;
104+
}
105+
} catch (error) {
106+
console.error("请求数据失败:", error);
107+
}
108+
}
109+
};
110+
const scrollToBottom = (e) => {
111+
//e.srcElement.offsetHeight = e.srcElement.clientHeight
112+
const scrollHeight = e.srcElement.scrollHeight - e.srcElement.clientHeight;
113+
if (scrollHeight - e.srcElement.scrollTop < 1) {
114+
console.log("触发底部加载事件");
115+
}
116+
};
117+
118+
//帮我写一个函数，判断是否加载完毕，如果加载完毕就执行，否则就定时器11213
119+
onMounted(() => {
120+
//默认加载推荐列表
121+
getListData(activeKey.value);
122+
//加载完成后开始计算滚动条高度
123+
listHeight.value = document.querySelector(".arco-tabs-content-list").offsetHeight - 16;
124+
});
125+
</script>
126+
127+
<style scoped>
128+
.arco-tabs::v-deep(.arco-tabs-tab-title) {
129+
font-size: 18px;
130+
font-weight: bold;
131+
letter-spacing: 8px;
132+
text-align: center;
133+
text-indent: 8px;
134+
}
135+
136+
.arco-tabs::v-deep(.arco-tabs-tab-active),
137+
.arco-tabs::v-deep(.arco-tabs-tab-active:hover) {
138+
color: rgb(var(--success-6));
139+
}
140+
.arco-tabs::v-deep(.arco-tabs-nav-ink) {
141+
background-color: rgb(var(--success-6));
142+
}
143+
144+
.video_list_item {
145+
transition: all 0.3s ease-in-out;
146+
box-shadow: 0 2px 12px 0 rgb(190, 190, 190);
147+
border: 1px solid rgb(207, 207, 207);
148+
border-radius: 8px;
149+
}
150+
.video_list_hover {
151+
cursor: pointer;
152+
transition: all 0.3s ease-in-out;
153+
}
154+
155+
.video_list_hover:hover {
156+
transform: translateY(-5px);
157+
}
158+
.video_list_hover:hover .video_list_item {
159+
box-shadow: 0 8px 16px 0 rgb(68, 68, 68);
160+
color: rgb(var(--success-6));
161+
}
162+
163+
.video_list_item_img_cover {
164+
width: 100%;
165+
border-top-left-radius: 8px;
166+
border-top-right-radius: 8px;
167+
overflow: hidden;
168+
vertical-align: top;
169+
}
170+
.video_list_item::v-deep(.arco-image-img) {
171+
width: 100%;
172+
173+
height: 300px;
174+
}
175+
.video_list_item_title {
176+
width: 100%;
177+
overflow: hidden;
178+
white-space: nowrap;
179+
text-overflow: ellipsis;
180+
text-align: center;
181+
padding: 10px 10px;
182+
}
183+
</style>

0 commit comments

Comments
 (0)