OnlineEducation-student-front/src/views/resourceCenter/components/Correlation.vue

<template>
	<div>
		<div class="recommend-container">
			<h3>相关课程</h3>
			<div v-for="(item, index) in recommendations" :key="index" class="recommend-item" @click="handlerItem(item)">
				<div class="item"></div>
				<div style="display: flex; flex-direction: column; justify-content: space-between; margin-left: 10px">
					<span style="font-weight: bold; font-size: 12px; margin-top: 5px">{{ item.title }}</span>
					<div style="display: flex; justify-content: center; align-items: space-between">
						<div style="display: flex; justify-content: center; align-items: center">
							<FieldTimeOutlined />
							<div style="width: 5px"></div>
							<span style="font-size: 12px">{{ item.time }}</span>
						</div>
						<div style="width: 20px"></div>
						<div style="display: flex; justify-content: center; align-items: center">
							<EyeOutlined />
							<div style="width: 5px"></div>
							<span style="font-size: 12px">{{ item.look }}</span>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</template>

<script setup>
	const emit = defineEmits(['handlerItem'])
	import { list } from '@/api/portal'
	import tool from '@/utils/tool'
	import sysConfig from '@/config/index'
	import EventBus from '@/utils/EventBus'
	const currentPage = reactive({
		funcType: 2,
		current: 1,
		size: 6
	})
	const recommendations = [
		// { id: '1', title: '资源名称', time: '05-22', look: '10000' },
		// { id: '2', title: '资源名称', time: '05-22', look: '10000' },
		// { id: '3', title: '资源名称', time: '05-22', look: '10000' },
		// { id: '4', title: '资源名称', time: '05-22', look: '10000' },
		// { id: '5', title: '资源名称', time: '05-22', look: '10000' },
		// { id: '6', title: '资源名称', time: '05-22', look: '10000' }
		// 更多数据...
	]
	const getList = () => {
		list(currentPage)
			.then((res) => {
				console.log('下面列表获取', res)
				if (res.code == 200) {
					recommendations.value = res.data.records
					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()
	})
	const handlerItem = (item) => {
		// emit('handlerItem', item)
		EventBus.emit('openResourceDetails', { id: item.id })
	}
</script>
<style scoped>
	.recommend-container {
		display: flex;
		flex-direction: column;
		border: 1px solid #e8e8e8;
		margin-bottom: 10px;
		border-radius: 4px;
		padding: 10px;
	}

	.recommend-item {
		display: flex;
		cursor: pointer;
		margin-bottom: 10px;
	}

	.recommend-avatar {
		margin-right: 15px;
	}

	.recommend-content {
		flex: 1;
	}

	.recommend-title {
		font-size: 16px;
		color: #1890ff;
		margin-bottom: 5px;
	}

	.recommend-description {
		font-size: 14px;
		color: #666;
	}
	.item {
		width: 100px;
		height: 70px;
		background-color: rgba(5, 5, 5, 0.219);
	}
</style>