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

<template>
	<div>
		<div class="recommend-container">
			<div class="flc">
				<a-image :width="24" :src="resourceIcon" />
				<div style="margin-bottom: 0; font-size: 20px; font-weight: bold; margin-left: 8px">
					<span>资源</span>
					<span style="color: #1890ff">推荐</span>
				</div>
			</div>
			<div
				v-for="(item, index) in recommendations"
				:key="index"
				class="recommend-item"
				:class="recommendations.length - 1 > index ? 'borderBottom' : ''"
				@click="handlerItem(item)"
			>
				<div
					class="item"
					:style="{
						backgroundSize: 'cover',
						backgroundPosition: 'center',
						borderRadius:'4px',
						overflow:'hidden',
						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;flex:1;">
					<span style="font-weight: bold; margin-top: 5px" class="single-line">{{ item.fileName }}</span>
					<div style="display: flex; justify-content: space-between; align-items: space-between">
						<div style="display: flex; justify-content: center; align-items: center">
							<FieldTimeOutlined class="fzcoloe" />
							<div style="width: 5px"></div>
							<span class="f12 fzcoloe">{{ item.uploadTime.slice(0, 10) }}</span>
						</div>
						<div style="width: 20px"></div>
						<div style="display: flex; justify-content: center; align-items: center">
							<EyeOutlined class="fzcoloe" />
							<div style="width: 5px"></div>
							<span class="f12 fzcoloe">{{ item.viewCount }}</span>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</template>

<script setup>
	import resourceIcon from '@/assets/images/resourceIcon.png'
	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: 1,
		current: 1,
		size: 6
	})
	const recommendations = ref([
		// { 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) => {
				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-radius: 4px;
	}

	.recommend-item {
		display: flex;
		cursor: pointer;
		margin-top: 16px;
		padding-bottom: 16px;
	}

	.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: 100px;
		background-color: rgba(5, 5, 5, 0.219);
		flex: 1;
	}
	.flc {
		display: flex;
		justify-content: flex-start;
		align-items: center;
	}
	.borderBottom {
		border-bottom: 1px solid #ebebeb;
	}
	.f12 {
		font-size: 12px;
	}
	.single-line {
		max-width: 150px;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}
	.fzcoloe {
		color: #86909c;
	}
</style>