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

<template>
	<div style="display: flex; justify-content: center" class="main-content-wrapper">
		<div style="width: 1200px">
			<a-card>
				<div style="display: flex; justify-content: space-between" v-if="detailObj.userNickName">
					<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 class="htmlContent" v-html="detailObj.postContent"></div>
				<div>
					<span v-if="detailObj.userNickName">
						<a-tooltip title="点赞">
							<template v-if="detailObj.isLike == 1">
								<HeartOutlined :style="{ color: '#fa6c8d' }" @click="like(detailObj, 0)" />
							</template>
							<template v-else>
								<HeartOutlined @click="like(detailObj, 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="举报" v-if="detailObj.userNickName">
						<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>
		</div>
	</div>
</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
		if (route.query.postId) {
			getDetail(true)
		} else {
			submitFormGetChapter(true)
		}
	}
	function resetGetList() {
		pagination.value.size = 10
		pagination.value.current = 1
		moreType.value = true
		if (route.query.postId) {
			getDetail()
		} else {
			submitFormGetChapter()
		}
	}
	const submitFormGetChapter = (p) => {
		forumApi
			.submitFormGetChapter({
				courseId: route.query.courseId,
				chapterId: route.query.chapterId,
				courseName: route.query.courseName,
				chapterName: route.query.chapterName,
				...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
				}
			})
	}
	onMounted(() => {
		if (route.query.postId) {
			getDetail()
		} else {
			submitFormGetChapter()
		}
	})
</script>

<style scoped>
	:deep(.htmlContent img) {
		max-width: 100% !important;
	}
	.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>