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

<template>
	<div style="margin-bottom: 50px">
		<div class="recommend-container">
			<h3>相关课程</h3>
			<div v-for="(item, index) in recommendations" :key="index" class="recommend-item" @click="handlerItem(item)">
				<div
					class="item"
					:style="{
						backgroundSize: 'cover',
						backgroundPosition: 'center',
						backgroundImage:
							'url(' +
							(item.coverImagePath != '' && sysConfig.FILE_URL + item.coverImagePath
								? sysConfig.FILE_URL + item.coverImagePath
								: '') +
							')'
					}"
				></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.fileName }}</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.uploadTime }}</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.viewCount }}</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 = ref([])
	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
				}
			})
			.catch((err) => {
				console.log(err)
			})
	}
	onMounted(() => {
		getList()
	})
	const upLoadList = (data) => {
		let queryData = data
		list({ ...currentPage, ...queryData })
			.then((res) => {
				if (res.code == 200) {
					recommendations.value = res.data.records
					currentPage.current = res.data.current
				}
			})
			.catch((err) => {
				console.log(err)
			})
	}
	const handlerItem = (item) => {
		// emit('handlerItem', item)
		EventBus.emit('openResourceDetails', { id: item.id })
	}
	EventBus.off('upLoadList', upLoadList)
	EventBus.on('upLoadList', upLoadList)
</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 {
		min-width: 100px;
		height: 70px;
		background-color: rgba(5, 5, 5, 0.219);
	}
</style>