MoeNovaClient/pages/index/articleDetail.vue

<template>
	<view class="page">
		<!-- 引入FontAwesome -->
		<view>
			<link rel="stylesheet"
				href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
		</view>

		<!-- 文章头图区域 -->
		<view class="topUser" v-if="articleInfo.type == 'user'">
			<image :src="home_image" class="home_image" mode="aspectFill"></image>
			<!-- 图片指示器 -->
			<view class="image-indicator" v-if="image_list.length > 1">
				<text>{{ selImg + 1 }}/{{ image_list.length }}</text>
			</view>
			<!-- 缩略图列表 -->
			<view class="list">
				<view class="img" :class="selImg == index ? 'active' : ''" v-for="(item, index) in image_list" :key="index"
					@click="selPhoto(item, index)">
					<image :src="item" mode="aspectFill"></image>
				</view>
			</view>
		</view>

		<!-- 文章内容区域 -->
		<view class="body">
			<!-- 文章标题与元信息 -->
			<view class="article-header">
				<view class="title">
					{{ articleInfo.title || '暂无标题' }}
				</view>
				<view class="meta-info">
					<view class="meta-item">
						<text class="fa fa-calendar"></text>
						<text class="meta-text">{{ articleInfo.create_time || '暂无时间' }}</text>
					</view>
					<view class="meta-item">
						<text class="fa fa-eye"></text>
						<text class="meta-text">{{ articleInfo.num_view || 0 }}次阅读</text>
					</view>
					<view class="meta-item" v-if="articleInfo.author">
						<text class="fa fa-user"></text>
						<text class="meta-text">{{ articleInfo.author }}</text>
					</view>
				</view>
			</view>

			<!-- 内容分隔线 -->
			<view class="divider"></view>

			<!-- 文章内容 -->
			<!-- <view class="article-content" v-if="articleInfo.type == 'user'">
				<view class="content">{{ articleInfo.content || '暂无内容' }}</view>
			</view> -->
			<view class="article-content">
				<view class="content">
					<rich-text :nodes="content" style="font-size: 14px;"></rich-text>
				</view>
			</view>

			<!-- 文章底部区域 -->
			<view class="article-footer">
				<view class="action-bar">
					<view class="action-item" @tap="likeArticle">
						<text class="fa" :class="articleInfo.is_like ? 'fa-thumbs-up liked' : 'fa-thumbs-o-up'"></text>
						<text class="action-text">{{ articleInfo.like_count || 0 }}</text>
					</view>
					<view class="action-item" @tap="openComment">
						<text class="fa fa-comment-o"></text>
						<text class="action-text">{{ tableTotal || 0 }}</text>
					</view>
					<view class="action-item" @tap="shareArticle">
						<text class="fa fa-share-alt"></text>
						<text class="action-text">分享</text>
					</view>
				</view>
			</view>

			<!-- 空白占位 -->
			<view class="list_info">
				<view class="blankHeight"></view>
			</view>

		</view>

		<!-- <view class="btn_submit" @click="chatTA()">
			<image class="icon" src="../../static/icon/icon_chat_white.png" mode="widthFix"></image>
			私聊
		</view> -->
		<view class="thread2"></view>
		<view class="thread2"></view>

		<previewImage ref="previewImage" :opacity="0.8" :circular="true" :imgs="imgs" :descs="descs"></previewImage>

		<!-- 评论区域 -->
		<CommentSection ref="commentSection" @totalNumberOfComments="totalNumberOfComments" :myInfo="myInfo" :userInfo="userInfo" :articleId="arcID" :type="'article'">
		</CommentSection>

		<view class="thread2"></view>

	</view>
</template>

<script>
import htmlParser from '../../common/html-parser'
import CommentSection from "@/components/CommentSection/CommentSection.vue";
import previewImage from '@/components/kxj-previewImage/kxj-previewImage.vue'; //引用插件
function parseImgs(nodes) {
	nodes.forEach(node => {
		if (
			node.name === 'img' &&
			node.attrs &&
			node.attrs['data-img-size-val']
		) {
			const sizes = node.attrs['data-img-size-val'].split(',')
			const width = uni.upx2px(720 * 0.9)
			const height = parseInt(width * (sizes[1] / sizes[0]))
			node.attrs.style = `width:${width};height:${height};`
		}
		if (Array.isArray(node.children)) {
			parseImgs(node.children)
		}
	})
	return nodes
}
export default {
	components: {
		previewImage,
		CommentSection
	},
	data() {
		return {
			title: '',
			arcID: 0,
			selImg: 0,
			home_image: '',
			myinfo: {},
			tag_list: [],
			image_list: [],
			imgs: [],
			descs: [],
			list_wish: [],
			content: '',
			tableTotal: 0,
			// 添加文章信息字段
			articleInfo: {
				title: '',
				content: '',
				create_time: '',
				images: '',
				view_count: 0,
				author: '',
				like_count: 0,
				is_like: false
			},

			myInfo: {
				user_id: 1, // 用户id
				user_name: "", // 用户名
				user_avatar: "", // 用户头像地址
			},
			// 文章作者信息(提示: 一般来自localstorage, 如果是实时获取的话, 那么获取到数据后再v-if显示评论组件)
			userInfo: {
				user_id: 2, // 用户id
				user_name: "", // 用户名
				user_avatar: "", // 用户头像地址
			},
		}
	},
	onLoad(parms) {
		let self = this;
		this.arcID = parms.id || 133;
	},
	onShow() {
		uni.$emit('check_update');
		this.$nextTick(() => {
			if (this.$refs.commentSection) {
				this.$refs.commentSection.loadCommentData();
			}
		});
		this.loadData(); 
	},
	methods: {
		totalNumberOfComments(tableTotal) { 
		 this.tableTotal = tableTotal;
		},
		onLinqu(item) {
			uni.navigateTo({
				url: '/pages/my/wishHelp?id=' + item.myid,
			})
		},
		selPhoto(item, sel) {
			this.selImg = sel;
			this.home_image = this.image_list[sel];
		},
		toArr(imgs) {
			let arr = imgs.split("|");
			return arr;
		},
		previewOpen(imgs1, index) {
			this.imgs = imgs1.split("|");
			setTimeout(() => this.$refs.previewImage.open(index), 0)
			return; //如需测试和uni原生预览差别可注释这两行
		},
		loadData() {
			uni.request({
				url: this.$apiHost + '/Article/getinfo',
				data: {
					uuid: getApp().globalData.uuid,
					id: this.arcID
				},
				header: {
					"content-type": "application/json",
					'sign': getApp().globalData.headerSign
				},
				success: (res) => {
					console.log("文章信息:", res.data);
					if (res.data.success === "yes") {
						// 更新文章信息
						this.articleInfo = res.data.article;
						const nodes = htmlParser(res.data.article.content);
						// #ifdef APP-PLUS-NVUE
						parseImgs(nodes)
						// #endif
						this.content = nodes

						// 更新图片列表
						if (res.data.article.images && res.data.article.images !== "") {
							this.image_list = res.data.article.images.split(",");
							this.home_image = this.image_list[0];
						} else {
							this.home_image = "../../static/home/avator.png";
						}
						console.log("img", this.home_image);

						// 更新标签列表
						// if (res.data.data.tags && res.data.data.tags !== "") {
						// 	this.tag_list = res.data.data.tags.split(",");
						// }
					} else {
						uni.showToast({
							title: '获取文章信息失败',
							icon: 'none'
						});
					}
				},
				complete: (com) => {
					// uni.hideLoading();
				},
				fail: (e) => {
					console.log("请求失败:", e);
					uni.showToast({
						title: '网络请求失败',
						icon: 'none'
					});
				}
			});
		},
		// 评论相关方法已移至CommentSection组件

		// 唤起新评论弹框
		openComment() {
			if (this.$refs.commentSection) {
				this.$refs.commentSection.openComment();
			}
		},
		// 文章点赞
		likeArticle() {
			uni.request({
				url: this.$apiHost + '/Article/like',
				data: {
					uuid: getApp().globalData.uuid,
					id: this.arcID
				},
				header: {
					"content-type": "application/json",
					'sign': getApp().globalData.headerSign
				},
				success: (res) => {
					console.log("点赞结果:", res.data);
					if (res.data.success === "yes") {
						// 更新点赞状态
						if (!this.articleInfo.is_like) {
							this.articleInfo.like_count = (this.articleInfo.like_count || 0) + 1;
							this.articleInfo.is_like = true;
							uni.showToast({
								title: '点赞成功',
								icon: 'none'
							});
						} else {
							this.articleInfo.like_count = (this.articleInfo.like_count || 0) - 1;
							this.articleInfo.is_like = false;
							uni.showToast({
								title: '取消点赞',
								icon: 'none'
							});
						}
					} else {
						uni.showToast({
							title: '点赞失败',
							icon: 'none'
						});
					}
				},
				fail: (e) => {
					console.log("点赞失败:", e);
					uni.showToast({
						title: '网络请求失败',
						icon: 'none'
					});
				}
			});
		},

		// 分享文章
		shareArticle() {
			// 如果在微信小程序环境
			if (uni.getSystemInfoSync().platform === 'mp-weixin') {
				uni.showShareMenu({
					withShareTicket: true,
					menus: ['shareAppMessage', 'shareTimeline']
				});
			} else {
				// 其他环境，如APP
				uni.share({
					provider: "weixin",
					scene: "WXSceneSession",
					type: 0,
					title: this.articleInfo.title,
					summary: this.articleInfo.content.substring(0, 40) + "...",
					imageUrl: this.home_image,
					success: function (res) {
						console.log("分享成功：" + JSON.stringify(res));
					},
					fail: function (err) {
						console.log("分享失败：" + JSON.stringify(err));
					}
				});
			}
		},
		// 评论回调事件
		replyFun({
			params
		}, callback) {
			// params = {
			// 	...params,
			// 	user_id: this.myInfo.user_id, // 用户id
			// 	user_name: this.myInfo.user_name, // 用户名
			// 	user_avatar: this.myInfo.user_avatar, // 用户头像地址
			// 	user_content: this.commentValue, // 用户评论内容
			// 	is_like: false, // 是否点赞
			// 	like_count: 0, // 点赞数统计
			// 	create_time: "刚刚", // 创建时间
			// 	owner: true, // 是否为所有者 所有者可以进行删除 管理员默认true
			// };
			console.log("replyFun", {
				uuid: getApp().globalData.uuid,
				article_id: this.arcID, // 文章ID
				content: params.user_content, // 评论内容
				parent_id: params.parent_id || 0, // 父评论ID
				reply_id: params.reply_id || 0, // 回复的评论ID
				reply_name: params.reply_name || '' // 被回复人名称
			});
			uni.request({
				url: this.$apiHost + '/Article/newComment',
				data: {
					uuid: getApp().globalData.uuid,
					type: 'article',
					article_id: this.arcID, // 文章ID
					content: params.user_content, // 评论内容
					parent_id: params.parent_id || 0, // 父评论ID
					reply_id: params.reply_id || 0, // 回复的评论ID
					reply_name: params.reply_name || '' // 被回复人名称
				},
				header: {
					"content-type": "application/json",
					'sign': getApp().globalData.headerSign
				},
				success: (res) => {
					console.log("评论结果:", res.data);
					if (res.data.success === "yes") {
						callback(res.data); // 评论成功，传入后端返回的数据
					}
				},
				fail: (e) => {
					console.log("评论失败:", e);
					uni.showToast({
						title: '评论失败，请重试',
						icon: 'none'
					});
				}
			});
		},
		/** 删除回调事件
		 * mode 删除模式
		 * -- bind: 当被删除的一级评论存在回复评论, 那么该评论内容变更显示为[当前评论内容已被移除]
		 * -- only: 仅删除当前评论(后端删除相关联的回复评论, 否则总数显示不对)
		 * -- all : 删除所有评论包括回复评论 前端遍历子评论上报
		 */

		deleteFun({
			params,
			mode
		}, callback) {
			console.log("deleteFun", {
				params,
				mode
			});
			// 将params转换为逗号分隔的字符串
			const idsString = Array.isArray(params) ? params.join(',') : params.toString();

			console.log("删除评论", idsString, mode)
			uni.request({
				url: this.$apiHost + '/Article/delComment',
				data: {
					uuid: getApp().globalData.uuid,
					ids: idsString, // 将params转换为逗号分隔的字符串传递给ids
					mode: mode
				},
				header: {
					"content-type": "application/json",
					'sign': getApp().globalData.headerSign
				},
				success: (res) => {
					console.log("删除结果:", res.data);
					if (res.data.success === "yes") {
						callback(res);
					}
				},
				fail: (e) => { }
			});
			// switch (mode) {
			// 	case "bind":
			// 		// 逻辑: 调用接口进行评论内容修改 update
			// 		setTimeout(() => callback(), 500); // 目前为了展示效果, 直接执行callback
			// 		break;
			// 	case "only":
			// 		// 逻辑: 调用接口删除一个评论 delete
			// 		setTimeout(() => callback(), 500); // 目前为了展示效果, 直接执行callback
			// 		break;
			// 	default:
			// 		// all
			// 		// 逻辑: 调用接口删除多个评论 [delete]
			// 		setTimeout(() => callback(), 500); // 目前为了展示效果, 直接执行callback
			// 		break;
			// }
		},




	}
}
</script>

<style scoped lang="scss">
@import 'articleDetail.scss';
</style>