OnlineEducation-teacher-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-range-picker
				v-model:value="currentPage.date"
				@calendarChange="calendarChange"
				style="margin-right: 12px; width: 240px"
			/>
			<a-input-search
				v-model:value="currentPage.queryInfo"
				placeholder="请输入资源关键词"
				style="width: 200px"
				@search="onSearch"
			/>
		</div>
		<a-spin :spinning="loading" tip="">
			<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">{{tool.truncateString(item.fileName,20)  }}</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>
		</a-spin>
		<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 } 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 loading = ref(false)
	const tabKey = ref(0)
	const tabKeyName = ref('')
	const dateName = ref([])
	const currentPage = reactive({
		current: 1,
		size: 12,
		queryInfo: '',
		date : undefined,
		startTime : undefined,
		endTime : undefined,
		sortflag: tabKey
	})
	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 calendarChange = (dates, dateStrings , info ) =>{
		console.log('修改时间',' dates ',dates,' dateStrings ',dateStrings,' info ',info)
		// currentPage.date = dateStrings
		// if(dateStrings[0] == '' && dateStrings[1] == ''){
		//
		// }
		dateName.value = dateStrings
		selectTab(tabKeyName.value)
	}
	const selectTab = (key) => {
		console.log('现在是点了tab', key)
		tabKeyName.value = key
		if (key == 'latest') {
			tabKey.value = 0
		} else {
			tabKey.value = 1
		}
		console.log('有没有',' currentPage.date ',currentPage.date,)
		if(dateName.value[0] == ''  && dateName.value[1] == ''){
			dateName.value = []
			currentPage.startTime = undefined
			currentPage.endTime = undefined
		}else{
			currentPage.startTime =	dateName.value[0]
			currentPage.endTime = dateName.value[1]
			dateName.value = []
		}
		currentPage.date = undefined
		currentPage.sortflag = tabKey.value
		currentPage.current = 1
		currentPage.size = 12
		getList()
	}
	const handleItem = (item) => {
		console.log('点了看教材的条目了', item)

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

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

	const getList = () => {
		loading.value = true
		list({ ...currentPage, ...queryData.value })
			.then((res) => {
				console.log('下面列表获取', res)
				if (res.code == 200) {
					resources.value = res.data.records
					total.value = res.data.total
					currentPage.current = res.data.current
				}
				loading.value = false
			})
			.catch((err) => {
				console.log(err)
				loading.value = false
			})
	}

	const upLoadList = (data) => {
		currentPage.current = 1
		currentPage.size = 12
		queryData.value = data
		loading.value = true
		list({ ...currentPage, ...queryData.value })
			.then((res) => {
				// console.log('外面控制的刷新列表', res)
				if (res.code == 200) {
					resources.value = res.data.records
					total.value = res.data.total
					currentPage.current = res.data.current
				}
				loading.value = false
			})
			.catch((err) => {
				console.log(err)
				loading.value = false
			})
	}
	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;
		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>