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

<template>
	<div style="display: flex">
		<div class="tallList">
			<div>
				<span style="font-weight: bold; font-size: 14px">发表评论</span>
				<span class="tallListInfo">文明上网理性发言,请遵守评论服务协议</span>
			</div>
			<!-- 切换 -->
			<div v-if="false">
				<div style="display: flex">
					<div style="display: flex; flex-direction: column; margin-left: 10px; margin-right: 10px">
						<div
							style="
								width: 30px;
								height: 30px;
								background: #1e90ff;
								border-radius: 50%;
								margin-top: 15px;
								margin-right: 15px;
							"
						></div>
						<span style="display: block; font-size: 10px">未登录</span>
					</div>

					<div style="width: 100%; height: 100%; display: flex; position: relative">
						<a-textarea placeholder="" :rows="4" disabled style="margin-top: 5px" />
						<div
							style="
								flex-direction: column;
								display: flex;
								justify-content: center;
								align-items: center;
								position: absolute;
								left: 50%;
								top: 50%;
								transform: translate(-50%, -50%);
							"
						>
							<span style="display: block; cursor: pointer; font-size: 12px">登陆后可以发表评论</span>
							<span style="display: block; cursor: pointer; font-size: 12px; color: #1e90ff">立即登录</span>
						</div>
					</div>
				</div>
				<div style="display: flex; justify-content: flex-end; margin-top: 10px">
					<a-button style="width: 100px" disabled>发布</a-button>
				</div>
			</div>
			<div>
				<div style="display: flex">
					<div style="display: flex; flex-direction: column; margin-left: 10px; margin-right: 10px">
						<div
							style="
								width: 30px;
								height: 30px;
								background: #1e90ff;
								border-radius: 50%;
								margin-top: 15px;
								margin-right: 15px;
							"
						></div>
						<span style="display: block; font-size: 10px">未登录</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" />
					</div>
				</div>
				<div style="display: flex; justify-content: flex-end; margin-top: 10px">
					<a-button style="width: 100px" @click="handerPublish">发布</a-button>
				</div>
			</div>

			<div style="display: flex; justify-content: space-between; margin-top: 40px">
				<div style="display: flex; align-items: center">
					<span style="font-weight: bold">全部评论</span>
					<span style="font-size: 10px; color: darkgray; margin-left: 5px">1000</span>
				</div>
				<TabSwitcher></TabSwitcher>
			</div>

			<div class="line"></div>

			<div>
				<TallItem v-for="(item, index) in list" :key="index" :item="item" :id="id" @publish="publish"></TallItem>
			</div>
		</div>

		<div class="equalList">
			<div style="display: flex; align-items: center">
				<div class="resInfoTitile"></div>
				<span style="font-size: 14px; 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"></EqualItem>
			</div> -->
		</div>
	</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, addComment } from '@/api/portal'
	import { useRoute } from 'vue-router'
	import EventBus from '@/utils/EventBus'
	import { list } from '@/api/portal'
	const currentPage = reactive({
		funcType: 1,
		current: 1,
		size: 6
	})

	const emit = defineEmits(['selectTab'])
	const listUnpublishedView = ref(null)
	const route = useRoute()
	const id = route.query.id
	const talk = ref('')

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

	const equalList = ref([])

	// callBackTalk: [
	// 			{
	// 				id: 2,
	// 				name: '李四',
	// 				talk: '不给',
	// 				follw: 0
	// 			}
	// 		]

	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)
			})
	}
	const publish = (data) => {
		// { pid: props.item.id, talk }
		addComment({ pid: data.id, resourceId: data.resourceId, commentName: data.talk })
			.then((res) => {
				getPageComment()
				talk.value = ''
			})
			.catch((err) => {
				console.log(err)
			})
		// list.value[0].callBackTalk.push({
		// 	id: 1,
		// 	name: '张三',
		// 	talk: '今天，我被你给打赏了1000元，请给我一个好评，谢谢123123123',
		// 	follw: 0
		// })
		// list.value = [...list.value]
		// console.log('最后的', list.value)
	}

	const handerPublish = () => {
		addComment({ resourceId: id, commentName: talk.value })
			.then((res) => {
				getPageComment()
				talk.value = ''
				EventBus.emit('upDataDetailsNum')
			})
			.catch((err) => {
				console.log(err)
			})
		//....
		// listUnpublishedView.value.setData(tableData.value)
	}
	const onQuery = (form) => {
		console.log('查询内容', form)
		//....

		// listUnpublishedView.value.setData(tableData.value)
	}

	const getPageComment = () => {
		pageComment({ resourceId: id, ...pagers.value })
			.then((res) => {
				if (res.code == 200) {
					list.value = res.data.records

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

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

	EventBus.off('onGetPageComment', getPageComment)
	EventBus.on('onGetPageComment', getPageComment)
</script>

<style scoped>
	.tab-switcher {
		display: flex;
		border-radius: 20px;
		border: 1px solid #1e90ff;
		overflow: hidden;
	}

	.tab-switcher div {
		padding: 2px 20px;
		background-color: #f5f5f5;

		cursor: pointer;
	}

	.tab-switcher div.active {
		background-color: #1e90ff;
		color: white;
	}

	.tab-switcher div:not(:last-child) {
	}

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

	.resource-container {
		width: 850px;
		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: 850px;
		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;
	}

	.resInfoTitile {
		width: 5px;
		height: 14px;
		background-color: cadetblue;
		margin-right: 5px;
	}

	.tallList {
		display: flex;
		flex-direction: column;
		width: 850px;
		border: 1px solid #dfe2e5;
		padding: 20px;
		margin-top: 10px;
	}

	.tallListInfo {
		color: rgba(0, 0, 0, 0.116);
		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;
		width: 300px;
		border: 1px solid #dfe2e5;
		padding: 10px;
		margin-top: 10px;
		margin-left: 10px;
	}
	.resInfoTitile {
		width: 5px;
		height: 14px;
		background-color: #1e90ff;
		margin-right: 5px;
	}
</style>