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.view_count || 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>

		<!-- 评论区域 -->
		<view class="comment-section">
			<view class="section-header">
				<text class="fa fa-comments"></text>
				<text class="section-title">评论区</text>
				<text class="comment-count">({{ tableTotal }})</text>
			</view>

			<CComment ref="ccRef" :myInfo="myInfo" :userInfo="userInfo" :tableData="tableData"
				:tableTotal.sync="tableTotal" :deleteMode="deleteMode" @likeFun="likeFun" @replyFun="replyFun"
				@deleteFun="deleteFun"></CComment>

			<view class="comment-button" @tap="openComment">
				<text class="fa fa-pencil"></text>
				<text>发表新评论</text>
			</view>
		</view>

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

	</view>
</template>

<script>
	import htmlParser from '../../common/html-parser'
	import CComment from "@/components/cc-comment/cc-comment.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,
			CComment
		},
		data() {
			return {
				title: '',
				arcID: 0,
				selImg: 0,
				home_image: '',
				myinfo: {},
				tag_list: [],
				image_list: [],
				imgs: [],
				descs: [],
				list_wish: [],

				// 添加文章信息字段
				articleInfo: {
					title: '',
					content: '',
					create_time: '',
					images: '',
					view_count: 0,
					author: '',
					like_count: 0,
					is_like: false
				},

				myInfo: {
					user_id: 1, // 用户id
					user_name: "cc", // 用户名
					user_avatar: "https://img0.baidu.com/it/u=2836960144,3650263035&fm=253&fmt=auto&app=138&f=JPEG?w=474&h=474", // 用户头像地址
				},
				// 文章作者信息(提示: 一般来自localstorage, 如果是实时获取的话, 那么获取到数据后再v-if显示评论组件)
				userInfo: {
					user_id: 2, // 用户id
					user_name: "ikun", // 用户名
					user_avatar: "https://pic1.zhimg.com/80/v2-a79071a705f55c5d88f6c74e6111fe84_720w.webp", // 用户头像地址
				},
				deleteMode: "all", //删除模式
				// 评论总数
				tableTotal: 4,
				// 评论表
				tableData: [],


			}
		},
		onLoad(parms) {
			let self = this;
			this.arcID = parms.id || 132;
		},
		onShow() {
			uni.$emit('check_update');
			this.loadData();
			this.loadCommentData();
		},
		methods: {
			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";
							}

							// 更新标签列表
							// 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'
						});
					}
				});
			},
			loadCommentData() {
				uni.request({
					url: this.$apiHost + '/Article/getcomments',
					data: {
						uuid: getApp().globalData.uuid,
						id: this.arcID,
						page: 1,
						limit: 10
					},
					header: {
						"content-type": "application/json",
						'sign': getApp().globalData.headerSign
					},
					success: (res) => {
						console.log("评论列表:", res.data);
						if (res.data.success == "yes") {
							this.$set(this, 'tableData', res.data.list);
							this.tableTotal = res.data.total;
							console.log("tabddd", this.tableData)
						} else {
							uni.showToast({
								title: '获取评论列表失败',
								icon: 'none'
							});
						}
					},
					complete: (com) => {
						// uni.hideLoading();
					},
					fail: (e) => {
						console.log("----e:", e);
					}
				});
			},


			// 唤起新评论弹框
			openComment() {
				let ccRef = this.$refs["ccRef"];
				ccRef.newCommentFun();
			},
			// 点赞回调事件
			likeFun({
				params
			}, callback) {
				console.log("likeFun", params);
				uni.request({
					url: this.$apiHost + '/Article/zanComment',
					data: {
						uuid: getApp().globalData.uuid,
						id: params.id
					},
					header: {
						"content-type": "application/json",
						'sign': getApp().globalData.headerSign
					},
					success: (res) => {
						console.log("点赞结果:", res.data);
						if (res.data.success !== "yes") {
							callback(res); // 请求失败时重置点赞效果
						}
					},
					fail: (e) => {
						console.log("点赞失败:", e);
						callback(e); // 请求失败时重置点赞效果
					}
				});
			},
			// 文章点赞
			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,
						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';

	/* 确保评论按钮样式 */
	.comment-button {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 650rpx;
		height: 90rpx;
		background-color: #2979ff;
		color: #fff;
		border-radius: 45rpx;
		margin: 40rpx auto 20rpx;
		font-size: 30rpx;
		box-shadow: 0 4rpx 12rpx rgba(41, 121, 255, 0.3);
	}

	.comment-button .fa {
		margin-right: 10rpx;
	}

	.comment-button:active {
		opacity: 0.9;
		transform: scale(0.98);
	}
</style>