OnlineEducation-student-front/src/views/courseCenter/components/ResourceList.vue

<template>
	<div class="resource-list">
		<div class="list-header">
			<div style="display: flex">
				<div style="display: flex; justify-content: center; align-items: center">
					<div class="line"></div>
					<span style="font-weight: bold">共计 {{ total }} 个课程</span>
				</div>
				<div style="width: 20px"></div>
				<TabSwitcher @selectTab="selectTab" />
			</div>

			<a-input-search
				v-model:value="currentPage.queryInfo"
				placeholder="请输入课程标题/专业名称/关键词"
				style="width: 200px"
				@search="onSearch"
			/>
		</div>
		<a-row :gutter="[16, 16]">
			<a-col :span="8" v-for="(item, index) in resources" :key="index">
				<div style="border-radius: 10px 10px 5px 5px; border: 1px solid #dcdcdc; position: relative">
					<div style="display: flex; position: relative">
						<div
							class="resource"
							@click="handleItem(item)"
							:style="{
								backgroundSize: 'cover',
								backgroundPosition: 'center',
								backgroundImage:
									'url(' +
									(item.coverImagePath != '' && sysConfig.FILE_URL + item.coverImagePath
										? sysConfig.FILE_URL + item.coverImagePath
										: '') +
									')'
							}"
						>
							<PlayCircleOutlined
								:style="{ fontSize: '40px', color: 'white' }"
								style="position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%)"
							/>
							<div
								style="
									position: absolute;
									bottom: 0;
									right: 0;
									background-color: #40a0ff;
									color: white;
									padding: 5px 20px;
									border-radius: 4px;
								"
							>
								共{{ item.lessonCount }}节课
							</div>
						</div>
					</div>
					<div style="display: flex; flex-direction: column; padding: 5px 10px">
						<span style="font-size: 16px; font-weight: bold">{{ item.fileName }}</span>
						<span style="font-size: 12px">{{ item.collegeIdName }}</span>
						<span style="font-size: 12px">{{ item.majorIdName }}</span>
						<div style="display: flex; justify-content: space-between">
							<div style="display: flex; justify-content: center; align-items: center">
								<FieldTimeOutlined />
								<div style="width: 5px"></div>
								<span style="font-size: 12px">{{ item.uploadTime }}</span>
							</div>

							<div style="display: flex; justify-content: center; align-items: center">
								<EyeOutlined />
								<div style="width: 5px"></div>
								<span style="font-size: 12px">{{ item.viewCount }}</span>
							</div>
						</div>
					</div>
				</div>
			</a-col>
		</a-row>

		<div style="height: 20px"></div>
		<div style="display: flex; width: 100%; align-items: center; justify-content: center">
			<a-pagination
				v-model:current="currentPage.current"
				v-model:pageSize="currentPage.size"
				:total="total"
				@change="onChange"
			/>
		</div>
		<div style="height: 20px"></div>
	</div>
</template>

<script setup>
	import { ref, onMounted } from 'vue'
	import TabSwitcher from './TabSwitcher.vue'
	import { list } from '@/api/portal'
	import tool from '@/utils/tool'
	import EventBus from '@/utils/EventBus'
	import sysConfig from '@/config/index'

	const queryData = ref({})
	const total = ref(0)
	const tabKey = ref(0)
	const currentPage = reactive({
		current: 1,
		size: 12,
		queryInfo: '',
		sortflag: tabKey
	})
	const searchKeyword = ref('')
	const resources = ref([])

	const selectTab = (key) => {
		if (key == 'latest') {
			tabKey.value = 0
		} else {
			tabKey.value = 1
		}
		currentPage.sortflag = tabKey.value
		currentPage.current = 1
		currentPage.size = 12
		getList()
	}

	const handleItem = (item) => {
		EventBus.emit('openCourseDetails', { id: item.id })
	}

	const onSearch = (value) => {
		currentPage.current = 1
		currentPage.size = 12
		getList()
	}

	const onChange = (page, pageSize) => {
		getList()
	}

	const getList = () => {
		list({ ...currentPage, ...queryData.value })
			.then((res) => {
				if (res.code == 200) {
					resources.value = res.data.records
					total.value = res.data.total
					currentPage.current = res.data.current
				}
			})
			.catch((err) => {
				console.log(err)
			})
	}

	const upLoadList = (data) => {
		currentPage.current = 1
		currentPage.size = 12
		queryData.value = data
		list({ ...currentPage, ...queryData.value })
			.then((res) => {
				if (res.code == 200) {
					resources.value = res.data.records
					total.value = res.data.total
					currentPage.current = res.data.current
				}
			})
			.catch((err) => {
				console.log(err)
			})
	}

	onMounted(() => {
		getList()
	})

	EventBus.off('upLoadList', upLoadList)
	EventBus.on('upLoadList', upLoadList)
</script>

<style scoped>
	.list-header {
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin-bottom: 20px;
	}
	.line {
		width: 6px;
		height: 15px;
		background-color: rgb(0, 140, 255);
		margin-right: 5px;
	}

	.resource {
		width: 100%;
		height: 150px;
		position: relative;
		background: #00000011;
		border-radius: 10px 10px 0 0;
		display: flex;
		justify-content: center;
		align-items: center;
		cursor: pointer;
		position: relative;
		overflow: hidden;
	}
	.resource::before {
		content: '';
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background-color: transparent;
		transition: background-color 0.6s ease;
		z-index: 1;
	}

	.resource:hover::before {
		background-color: rgba(0, 0, 0, 0.4); /* 悬停变暗 */
	}

	.resource > * {
		position: relative;
		z-index: 2;
	}
</style>