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

<template>
	<div>
		<div class="recommend-container">
			<div style="display: flex;    align-items: center;  margin-bottom: 20px">
				<a-image :src="Frame" style="width: 20px; height: 20px"></a-image>
				<span style="font-size: 18px; font-weight: bold;  margin-left: 10px">资源</span><span
				style="color: #165dff;font-size: 18px; font-weight: bold;">推荐</span>
			</div>

			<div v-for="(item, index) in recommendations" :key="index" class="recommend-item"
				 @click="handlerItem(item)">
				<div style="display: flex; flex-direction: column">
					<div style="display: flex;">
						<div
							class="item"
							:style="{
						backgroundSize: 'cover',
						backgroundPosition: 'center',
						  backgroundImage: item.coverImagePath && sysConfig.FILE_URL + item.coverImagePath
    ? 'url(' + sysConfig.FILE_URL + item.coverImagePath + ')'
    : 'none',
  backgroundColor: item.coverImagePath && sysConfig.FILE_URL + item.coverImagePath
    ? 'transparent'
    : '#7f8c8d55'
					}"
						></div>
						<div
							style="display: flex; flex-direction: column; justify-content: space-between; width: 100%;  padding-left: 7px">
							<a-tooltip>
								<template #title>{{ item.fileName }}</template>
								<span style="font-size: 15px; font-weight: bold">{{
										tool.truncateString(item.fileName, 20)
									}}</span>
							</a-tooltip>
							<!--					<span style="font-weight: bold; font-size: 12px; margin-top: 5px">{{ item.fileName }}</span>-->
							<div style="display: flex; justify-content: space-between; align-items: center">
								<div style="display: flex; justify-content: center; align-items: center">
									<FieldTimeOutlined/>
									<div style="width: 5px"></div>
									<span style="font-size: 10px">{{ 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 v-if="index<recommendations.length-1"
						 style="height: 1px; width: 100%;  margin-top: 10px; background: #7f8c8d22"></div>
				</div>

			</div>
		</div>
	</div>
</template>

<script setup>
const emit = defineEmits(['handlerItem'])
import {list} from '@/api/portal'
import tool from '@/utils/tool'
import Frame from '@/assets/images/Frame.png'
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) => {
			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 {
	background: white;
	display: flex;
	flex-direction: column;
	margin-bottom: 10px;
	border-radius: 4px;
	padding: 20px;
}

.recommend-item {
	display: flex;

	margin-bottom: 10px;
	cursor: pointer;
}

.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: 150px;
	height: 90px;
}
</style>