OnlineEducation-teacher-front/src/views/forum/detail.vue

<template>
	<a-card>
		<div style="display: flex; justify-content: space-between">
			<div style="display: flex">
				<a-avatar
					style="width: 60px; height: 60px"
					:src="detailObj.userAvatar"
					:size="{ xs: 24, sm: 32, md: 40, lg: 64, xl: 80, xxl: 100 }"
				/>
				<div class="snowy-index-card-left-one-username">
					<span style="font-weight: 600; margin: 2px; font-size: 18px">{{ detailObj.userNickName }}</span>
					<span style="color: #6d737b; margin: 2px"
						>{{ detailObj.typeName }} | {{ formatDateTime(detailObj.lastReplyTime) }}</span
					>
				</div>
			</div>
		</div>
		<div class="forum-list-title">{{ detailObj.postTitle }}</div>
		<div v-html="detailObj.postContent"></div>
		<div>
			<span>
				<a-tooltip title="点赞">
					<template v-if="detailObj.isLike == 1">
						<HeartOutlined :style="{ color: '#fa6c8d' }" @click="like(item, 0)" />
					</template>
					<template v-else>
						<HeartOutlined @click="like(item, 1)" />
					</template>
				</a-tooltip>
				<span style="padding-left: 8px">
					{{ detailObj.likeCount }}
				</span>
			</span>
			<a-tooltip title="编辑" v-if="detailObj.isSelf == 1">
				<EditOutlined class="ml-2" @click="formRef.onOpen(detailObj, detailObj.postId)" />
			</a-tooltip>

			<span class="ml-2" style="cursor: pointer" @click="replyFormRef.onOpen(detailObj, detailObj.postId)">
				<span>回复</span>
				<span style="padding-left: 8px">{{ detailObj.replyCount }}</span>
			</span>
			<a-tooltip title="举报">
				<WarningOutlined class="ml-2" @click="reportFormRef.onOpen(detailObj, detailObj.postId)" />
			</a-tooltip>
		</div>
	</a-card>
	<a-card class="mt-2">
		<Comment :commentList="detailObj.replyList?.records" :params="commentParams" @successful="resetGetList()"></Comment>
		<div style="display: flex; justify-content: center" class="mt-8">
			<a-button type="primary" shape="round" @click="morePaging" v-if="moreType"> 加载更多 </a-button>
			<div v-else>全部加载完毕</div>
		</div>
	</a-card>
	<replyForm ref="replyFormRef" @successful="resetGetList()" />
	<Form ref="formRef" @successful="resetGetList()" />
	<reportForm ref="reportFormRef" @successful="resetGetList()"></reportForm>
</template>

<script setup name="forumDetail">
	import forumApi from '@/api/forum/forumApi'
	import { useRoute, useRouter } from 'vue-router'
	import { parseTime } from '@/utils/exam'
	import Comment from '@/components/Comment/index.vue'
	import replyForm from './replyForm.vue'
	import reportForm from './reportForm.vue'
	import Form from './form.vue'
	const reportFormRef = ref()
	const replyFormRef = ref()
	const formRef = ref()
	const route = useRoute()
	const detailObj = ref({})
	const moreType = ref(true)
	const commentParams = ref({
		likeType: 1,
		targetId: route.query.postId
	})
	const pagination = ref({
		current: 1,
		size: 10
	})
	function like(item, l) {
		forumApi.postlikeSubmit({ likeType: 0, targetId: route.query.postId }, item.isLike).then((data) => {
			item.isLike = l
			resetGetList()
		})
	}
	function formatDateTime(val) {
		if (!val) return ''
		return parseTime(val, '{y}-{m}-{d} {h}:{i}:{s}')
	}
	function getDetail(p) {
		forumApi
			.forumTypeDetail({
				postId: route.query.postId,
				...pagination.value
			})
			.then((data) => {
				if (p) {
					if (data.replyList.records.length > 0) {
						detailObj.value.replyList.records = detailObj.value.replyList.records.concat(data.replyList.records)
					} else {
						pagination.value.current -= 1
						moreType.value = false
					}
				} else {
					detailObj.value = data
				}
			})
	}
	function morePaging() {
		pagination.value.current += 1
		getDetail(true)
	}
	function resetGetList() {
		pagination.value.size = 10
		pagination.value.current = 1
		moreType.value = true
		getDetail()
	}
	getDetail()
</script>

<style scoped>
	.snowy-index-card-left-one-username {
		margin-left: 8px;
		display: flex;
		flex-direction: column;
		justify-content: center;
	}
	.forum-list-title {
		font-size: 30px;
		font-weight: bold;
	}

	.forum-list-content {
		font-size: 14px;
		color: #696969;
	}
</style>