OnlineEducation-student-front/src/views/resourceDetails/components/TallList.vue

<template>
	<div style="display: flex" class="mt-3">
		<a-card class="flex-3 mr-3">
			<div class="tallList">
				<div>
					<span style="font-weight: bold;">发表评论</span>
					<span class="tallListInfo ml-3">文明上网理性发言,请遵守评论服务协议</span>
				</div>
				<div class="mt-3">
					<div style="display: flex">
						<div style="display: flex; flex-direction: column; margin-left: 10px; margin-right: 10px">
							<div style="margin-right: 15px">
								<a-avatar :src="userInfo.avatar">
									<template #icon><UserOutlined /></template>
								</a-avatar>
							</div>
							<span style="display: block; font-size: 12px">{{ userInfo.name }}</span>
						</div>

						<div style="width: 100%; height: 100%; display: flex; position: relative">
							<a-textarea placeholder="" :rows="4" v-model:value="talk" style="margin-top: 5px" :maxlength="500" />
						</div>
					</div>
					<div style="display: flex; justify-content: flex-end; margin-top: 10px">
						<a-button style="width: 100px" @click="handerPublish">发布</a-button>
					</div>
				</div>
				<a-divider />
				<div style="display: flex; justify-content: flex-end">
					<TabSwitcher @selectTab="handelrSelectTab"></TabSwitcher>
				</div>
				<div>
					<TallItem v-for="(item, index) in talkList" :key="index" :item="item" :id="id" @publish="publish"></TallItem>
				</div>
			</div>
		</a-card>
		<a-card class="flex-1">
			<div class="equalList">
				<div style="display: flex; align-items: center">
					<span style="font-size: 20px; font-weight: bold">同类型资源</span>
				</div>
				<div style="display: flex; flex-direction: column; padding: 10px">
					<EqualItem
						v-for="(item, index) in equalList"
						:key="index"
						:item="item"
						:class="equalList.length == index + 1 ? '' : 'mb-2'"
					></EqualItem>
				</div>
			</div>
		</a-card>
	</div>
</template>

<script setup>
	import { ref } from 'vue'
	import TabSwitcher from './TabSwitcher.vue'
	import TallItem from './TallItem.vue'
	import EqualItem from './EqualItem.vue'
	import {
		addViewCount,
		detail,
		add,
		cancel,
		queryList,
		pageComment,
		list,
		addComment,
		getTalkPageList
	} from '@/api/portal'
	import { useRoute } from 'vue-router'
	import EventBus from '@/utils/EventBus'
	import { globalStore } from '@/store'
	const store = globalStore()
	const userInfo = computed(() => {
		return store.userInfo
	})
	const currentPage = reactive({
		funcType: 2,
		current: 1,
		size: 6
	})

	const emit = defineEmits(['selectTab'])
	const tabKey = ref(0)
	const total = ref(0)
	const route = useRoute()
	const id = route.query.id
	const talk = ref('')

	const pagers = reactive({
		pages: 1,
		size: 20
	})

	const equalList = ref([])
	const talkList = ref([])
	const getList = () => {
		list(currentPage)
			.then((res) => {
				console.log('下面列表获取', res)
				if (res.code == 200) {
					equalList.value = res.data.records
					currentPage.current = res.data.current
				}
			})
			.catch((err) => {
				console.log(err)
			})
	}
	const publish = (data) => {
		addComment({ pid: data.id, resourceId: data.resourceId, commentName: data.talk })
			.then((res) => {
				getPageComment()
				talk.value = ''
			})
			.catch((err) => {
				console.log(err)
			})
	}
	const handelrSelectTab = (data) => {
		if (data == 'latest') {
			tabKey.value = 0
		} else {
			tabKey.value = 1
		}
		pagers.pages = 1
		pagers.size = 20
		if (tabKey.value == 0) {
			getPageComment()
		} else {
			getHotPageComment()
		}
	}
	const handerPublish = () => {
		addComment({ resourceId: id, commentName: talk.value })
			.then((res) => {
				getPageComment()
				talk.value = ''
				EventBus.emit('upDataDetailsNum')
			})
			.catch((err) => {
				console.log(err)
			})
	}
	const getPageComment = () => {
		pageComment({ resourceId: id, ...pagers })
			.then((res) => {
				if (res.code == 200) {
					talkList.value = res.data.records

					pagers.pages = res.data.pages
					pagers.size = res.data.size

					total.value = res.data.total
				}
			})
			.catch((err) => {
				console.log(err)
			})
	}

	const getPageCommentNew = (data) => {
		list({ ...currentPage, ...data })
			.then((res) => {
				if (res.code == 200) {
					equalList.value = res.data.records
					currentPage.current = res.data.current
				}
			})
			.catch((err) => {
				console.log(err)
			})
	}
	const onGetPageCommentNew = (data) => {
		getPageCommentNew(data)
	}
	const getHotPageComment = () => {
		getTalkPageList({ resourceId: id, ...pagers })
			.then((res) => {
				if (res.code == 200) {
					talkList.value = res.data.records

					pagers.pages = res.data.pages
					pagers.size = res.data.size
				}
			})
			.catch((err) => {
				console.log(err)
			})
	}

	onMounted(() => {
		getPageComment()
	})

	EventBus.off('onGetPageComment', getPageComment)
	EventBus.on('onGetPageComment', getPageComment)

	defineExpose({ onGetPageCommentNew })
</script>

<style scoped>
	.user-info {
		display: flex;
		align-items: center;
		width: 100%;
		height: 200px;
		border: 1px solid #dfe2e5;
		padding: 20px;
	}

	.resource-container {
		width: 100%;
		margin: 0 auto;
		padding: 20px;
		border: 1px solid #dfe2e5;
	}

	.user-avatar {
		width: 40px;
		height: 40px;
		background: #1e90ff;
		border-radius: 50%;
		margin-right: 10px;
	}

	.user-details {
		flex: 1;
	}

	.user-name {
		font-size: 13px;
		font-weight: bold;
	}

	.publish-time {
		font-size: 12px;
		color: #999;
		margin-top: 5px;
	}

	.metrics {
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.metric-item {
		display: flex;
		flex-direction: column;
		align-items: center;
		padding-left: 10px;
		padding-right: 10px;
	}

	.metric-item span:first-child {
		font-size: 18px;
		font-weight: bold;
	}

	.metric-item span:last-child {
		font-size: 12px;
		color: #666;
	}

	.actions {
		display: flex;
	}

	.share-btn,
	.favorite-btn {
		background-color: transparent;
		border: none;
		cursor: pointer;
	}

	.course-info {
		margin-top: 20px;
		line-height: 1.6;
	}

	.liene {
		height: 35px;
		width: 1px;
		background: #00000018;
	}

	.resource-container {
		width: 100%;
		margin: 0 auto;
		padding: 20px;
		border: 1px solid #dfe2e5;
	}

	h1 {
		text-align: center;
		margin-bottom: 20px;
	}

	.ant-descriptions {
		margin-top: 20px;
	}

	.ant-typography-title {
		margin-top: 20px;
	}

	.ant-typography-paragraph {
		margin-top: 10px;
	}

	.ant-space {
		margin-top: 10px;
	}
	.video-info {
		height: 100%; /* 确保填满容器高度 */
	}
	.resInfo {
		margin-left: 10px;
		width: 350px;
		height: 570px;
		border: 1px solid #dfe2e5;
		padding: 10px;
	}

	.user-info-container {
		display: flex;
	}

	.tallList {
		display: flex;
		flex-direction: column;
	}

	.tallListInfo {
		color: rgba(0, 0, 0, 0.479);
		font-size: 12px;
	}

	.line {
		width: 100%;
		height: 0.5px;
		background-color: rgba(0, 0, 0, 0.075);
		margin-top: 10px;
		margin-bottom: 10px;
	}

	.equalList {
		display: flex;
		flex-direction: column;
	}
	.resInfoTitile {
		width: 5px;
		height: 20px;
		background-color: #1e90ff;
		margin-right: 5px;
	}
	.flex-3 {
		flex: 3;
	}
	.flex-1 {
		flex: 1;
	}
</style>