OnlineEducation-back-front/src/views/resourceCenter/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">
					<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
										: '') +
									')'
							}"
						>
							<!-- <a-image
								style="width: 100%; height: 100%"
								:src="
									item.coverImagePath != '' && sysConfig.FILE_URL + item.coverImagePath
										? sysConfig.FILE_URL + item.coverImagePath
										: ''
								"
								alt=""
								:preview="false"
							></a-image> -->
							<PlayCircleOutlined
								:style="{ fontSize: '40px', color: 'white' }"
								style="position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%)"
							/>
						</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>

					<!-- <a-card-meta :title="item.title">
						<template #description>
							<p>{{ item.description }}</p>
						</template>
					</a-card-meta> -->
				</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" :total="total" @change="onChange" show-size-changer />
		</div>
		<div style="height: 20px"></div>
	</div>
</template>

<script setup>
	import { ref } 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 total = ref(1024)
	const tabKey = ref('new')
	const currentPage = reactive({
		current: 1,
		size: 10,
		queryInfo: ''
	})
	const searchKeyword = ref('')
	const resources = ref([
		// { id: 1, title: '学术交流英语', description: '来源学校', name: '姓名', time: '05-22 10:49', look: 10000 },
		// { id: 2, title: '学术交流英语', description: '来源学校', name: '姓名', time: '05-22 10:49', look: 10000 },
		// { id: 3, title: '学术交流英语', description: '来源学校', name: '姓名', time: '05-22 10:49', look: 10000 },
		// { id: 4, title: '学术交流英语', description: '来源学校', name: '姓名', time: '05-22 10:49', look: 10000 },
		// { id: 5, title: '学术交流英语', description: '来源学校', name: '姓名', time: '05-22 10:49', look: 10000 },
		// { id: 6, title: '学术交流英语', description: '来源学校', name: '姓名', time: '05-22 10:49', look: 10000 },
		// { id: 7, title: '学术交流英语', description: '来源学校', name: '姓名', time: '05-22 10:49', look: 10000 },
		// { id: 8, title: '学术交流英语', description: '来源学校', name: '姓名', time: '05-22 10:49', look: 10000 },
		// { id: 9, title: '学术交流英语', description: '来源学校', name: '姓名', time: '05-22 10:49', look: 10000 },
		// { id: 10, title: '学术交流英语', description: '来源学校', name: '姓名', time: '05-22 10:49', look: 10000 },
		// { id: 11, title: '学术交流英语', description: '来源学校', name: '姓名', time: '05-22 10:49', look: 10000 },
		// { id: 12, title: '学术交流英语', description: '来源学校', name: '姓名', time: '05-22 10:49', look: 10000 }
		// 更多数据...
	])

	const selectTab = (key) => {
		console.log('现在是点了tab', key)
	}
	const handleItem = (item) => {
		console.log('点了看教材的条目了', item)

		EventBus.emit('openResourceDetails', { id: item.id })
	}
	const onSearch = (value) => {
		console.log('搜索了', value)
		currentPage.current = 1
		currentPage.size = 10
		getList()
	}
	const onChange = (page, pageSize) => {
		console.log('翻页', page, pageSize)
		getList()
	}

	// watch(currentPage.value.current, (newValue) => {
	// 	console.log('变化了', newValue)
	// 	// getList()
	// })

	const getList = () => {
		list(currentPage)
			.then((res) => {
				console.log('下面列表获取', res)
				if (res.code == 200) {
					resources.value = res.data.records
					total.value = res.data.total
					currentPage.current = res.data.current
					// "size": 20,
					//                 "current": 1,
					//   "pages": 1
				}

				// {
				//     "code": 200,
				//     "msg": "操作成功",
				//     "data": {
				//         "records": [
				//             {
				//                 "publishTime": 1750820852119,
				//                 "courseName": "转手绢",
				//                 "collegeIdName": "二人转研究学院",
				//                 "teacherId": "1936984714123436034",
				//                 "coverImageId": "1936957954687279104",
				//                 "collegeId": "1",
				//                 "timeLimitType": "0",
				//                 "viewCount": 0,
				//                 "courseId": "1937091089341124610",
				//                 "teacherIdName": "老师"
				//             },
				//             {
				//                 "publishTime": 1750820875604,
				//                 "courseName": "胸口碎大石",
				//                 "collegeIdName": "二人转研究学院",
				//                 "teacherId": "1936984714123436034",
				//                 "coverImageId": "1937056330116354050",
				//                 "coverImagePath": "http://localhost:9003/api/webapp/dev/file/download?id=1937056330116354050",
				//                 "collegeId": "1",
				//                 "timeLimitType": "0",
				//                 "viewCount": 10000,
				//                 "courseId": "1937326992873689089",
				//                 "teacherIdName": "老师"
				//             }
				//         ],
				//         "total": 2,
				//         "size": 20,
				//         "current": 1,
				//         "orders": [],
				//         "optimizeCountSql": true,
				//         "searchCount": true,
				//         "maxLimit": null,
				//         "countId": null,
				//         "pages": 1
				//     }
				// }
			})
			.catch((err) => {
				console.log(err)
			})
	}

	onMounted(() => {
		getList()
	})
</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;
		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;
	}
	/* .resource:hover {
		background-color: #ffffff8c;
	} */
</style>