OnlineEducation-student-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 class="flt">
					<div class="flex-1">
						<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; min-height: 20px">{{
										detailObj.userNickName
									}}</span>
									<span style="color: #6d737b; margin: 2px">
										{{ detailObj.typeName ? detailObj.typeName + '|' : '' }}
										{{ formatDateTime(detailObj.lastReplyTime) }}
									</span>
								</div>
							</div>
						</div>
						<div class="forum-list-title">{{ detailObj.postTitle }}</div>
					</div>
					<a-tooltip :getPopupContainer="(trigger) => trigger.parentElement">
						<template #title>
							<span>返回</span>
						</template>
						<a-button @click="goToHome" type="primary">
							<rollback-outlined />
						</a-button>
					</a-tooltip>
				</div>
				<a-descriptions title="设备信息" class="equ" v-if="detailObj.forumSupportEnv">
					<a-descriptions-item label="浏览器类型：">
						<span>{{ detailObj.forumSupportEnv.browserType }}</span>
					</a-descriptions-item>
					<a-descriptions-item label="浏览器版本号：">
						<span>{{ detailObj.forumSupportEnv.browserVersion }}</span>
					</a-descriptions-item>
					<a-descriptions-item label="操作系统：">
						<span>{{ detailObj.forumSupportEnv.osType }}</span>
					</a-descriptions-item>
					<a-descriptions-item label="操作系统版本号：">
						<span>{{ detailObj.forumSupportEnv.osVersion }}</span>
					</a-descriptions-item>
				</a-descriptions>
				<div class="htmlContent" v-html="detailObj.postContent"></div>
				<div class="flc">
					<div 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: 3px">
							{{ detailObj.likeCount }}
						</span>
					</div>
					<div v-if="detailObj.userNickName" class="ml-2">
						<a-tooltip title="踩">
							<template v-if="detailObj.isNotLike == 1">
								<dislike-outlined :style="{ color: '#fa6c8d' }" @click="postnotlike(detailObj, 0)" />
							</template>
							<template v-else>
								<dislike-outlined @click="postnotlike(detailObj, 1)" />
							</template>
						</a-tooltip>
					</div>
					<div
						v-if="detailObj.isSelf == 1"
						style="cursor: pointer"
						@click="formRef.onOpen(detailObj, detailObj.postId)"
					>
						<EditOutlined class="ml-2" />
						<span style="padding-left: 3px">编辑</span>
					</div>
					<div class="ml-2" style="cursor: pointer" @click="replyFormRef.onOpen(detailObj, detailObj.postId)">
						<span>评论</span>
						<span style="padding-left: 3px">{{ detailObj.replyCount }}</span>
					</div>
					<div
						class="ml-2"
						style="cursor: pointer"
						v-if="detailObj.userNickName"
						@click="reportFormRef.onOpen(detailObj, detailObj.postId)"
					>
						<WarningOutlined />
						<span style="padding-left: 3px">举报</span>
					</div>
				</div>
			</a-card>
			<a-button type="primary" class="mt-2" @click="replyFormRef.onOpen(detailObj, detailObj.postId)">
				<template #icon><comment-outlined /></template>
				评论
			</a-button>
			<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 router = useRouter()
	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 postnotlike(item, l) {
		forumApi
			.postPostnotlikeSubmit(
				{ likeType: 0, targetId: route.query.postId, notLikeId: route.query.postId },
				item.isNotLike
			)
			.then((data) => {
				item.isNotLike = 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,
				courseName: `${route.query.courseName}-${route.query.title}-${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
				}
			})
	}
	//回到首页
	const goToHome = () => {
		router.go(-1)
	}
	onMounted(() => {
		if (route.query.postId) {
			getDetail()
		} else {
			submitFormGetChapter()
		}
	})
</script>

<style scoped>
	:deep(.htmlContent img) {
		max-width: 100% !important;
	}
	:deep(.equ .ant-descriptions-header){
		margin-bottom: 10px;
	}
	.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;
	}
	.flt {
		display: flex;
		justify-content: flex-start;
		align-items: flex-start;
	}
	.flc {
		display: flex;
		justify-content: flex-start;
		align-items: center;
	}
</style>