OnlineEducation-back-front/src/views/resourceDetails/components/TallItem.vue

<template>
	<div>
		<div>
			<div style="display: flex; margin-left: 10px; margin-right: 10px">
				<div style="width: 40px; height: 40px; background: #1e90ff; border-radius: 50%; margin-right: 10px"></div>
				<div style="width: 100%">
					<div style="display: flex; flex-direction: column; margin-bottom: 0px">
						<span style="display: block; font-size: 14px; font-weight: bold; margin-bottom: 0px">{{
							props.item.userName
						}}</span>
						<span style="display: block; font-size: 12px">{{ props.item.commentName }}</span>
					</div>
					<div style="width: 100%; display: flex; justify-content: space-between">
						<div>
							<span style="font-size: 10px">{{ props.item.commentTime }}</span>
						</div>
						<div style="display: flex">
							<div>
								<MessageOutlined style="cursor: pointer" @click="handerMessage" />
								<span style="margin-left: 5px">{{ props.item.childSize }}</span>
							</div>
							<div style="margin-left: 15px">
								<!-- <LikeFilled /> -->
								<LikeOutlined style="cursor: pointer" @click="handerfollw" />
								<span style="margin-left: 5px">{{ props.item.giveNum }}</span>
							</div>
						</div>
					</div>
				</div>
			</div>
			<div v-show="props.item.child.length > 0" v-for="(item, index) in props.item.child" :key="index">
				<div style="display: flex; margin-left: 50px; margin-right: 0px">
					<div style="width: 40px; height: 40px; background: #1e90ff; border-radius: 50%; margin-right: 10px"></div>
					<div style="width: 100%">
						<div style="display: flex; flex-direction: column; margin-bottom: 0px">
							<span style="display: block; font-size: 14px; font-weight: bold; margin-bottom: 5px">{{
								item.userName
							}}</span>
							<span style="display: block; font-size: 12px">{{ item.commentName }}</span>
						</div>
						<div style="width: 100%; display: flex; justify-content: space-between">
							<div>
								<span style="font-size: 10px">{{ item.commentTime }}</span>
							</div>
							<div style="display: flex">
								<!-- <div>
								<MessageOutlined @click="handerMessage" />
								<span style="margin-left: 5px">10</span>
							</div> -->
								<div style="margin-left: 15px">
									<!-- <LikeFilled /> -->
									<LikeOutlined style="cursor: pointer" @click="handerfollwChild(item)" />
									<span style="margin-left: 5px">{{ item.giveNum }}</span>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>

			<div v-if="tallTag">
				<div>
					<a-textarea placeholder="" v-model:value="talk" :rows="4" style="margin-top: 5px" />
					<div style="display: flex; justify-content: flex-end; margin-top: 10px">
						<a-button style="width: 100px" @click="handerPublish">回复</a-button>
					</div>
				</div>
			</div>
		</div>
	</div>
</template>

<script setup>
	import { ref } from 'vue'
	import TabSwitcher from './TabSwitcher.vue'
	import EventBus from '@/utils/EventBus'
	import { addViewCount, detail, add, cancel, queryList, pageComment, addComment, giveComment } from '@/api/portal'
	const emit = defineEmits(['selectTab'])

	// id: 1,
	// 			name: '张三',
	// 			talk: '今天，我被你给打赏了1000元，请给我一个好评，谢谢',
	// 			follw: 0,

	const props = defineProps({
		item: {
			type: Object,
			default: () => {}
		},
		id: {
			type: String,
			default: () => ''
		}
		// talk: {
		// 	type: String,
		// 	default: () => ''
		// },
		// follw: {
		// 	type: Number,
		// 	default: () => 0
		// },
		// callBackTalk: {
		// 	type: Array,
		// 	default: () => []
		// }
	})
	const listUnpublishedView = ref(null)
	const tallTag = ref(false)
	const talk = ref('')
	const handerMessage = (form) => {
		console.log('查询内容', form)
		tallTag.value == true ? (tallTag.value = false) : (tallTag.value = true)
		EventBus.emit('closeInput', null, props.item.id)
		//....

		// listUnpublishedView.value.setData(tableData.value)
	}
	watch(
		() => props.item,
		(val) => {
			console.log('item有变化吗', val)
		}
	)

	const handerfollw = async () => {
		await giveComment({ id: props.item.id })
		EventBus.emit('onGetPageComment')
	}
	const handerfollwChild = async (item) => {
		await giveComment({ id: item.id })
		EventBus.emit('onGetPageComment')
	}
	const handerPublish = () => {
		tallTag.value = false
		emit('publish', { resourceId: props.id, id: props.item.id, talk: talk.value })

		//....
		// listUnpublishedView.value.setData(tableData.value)
	}
	const handleCloseInput = (data, tag) => {
		if (props.item.id != tag) {
			talk.value = ''
			tallTag.value = false
		}
	}
	onMounted(() => {
		// getList()
	})

	EventBus.off('closeInput', handleCloseInput)
	EventBus.on('closeInput', handleCloseInput)
</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;
	}
</style>