MoeNovaClient/pages/index/articleDetail.vue

<template>
	<view class="page">


		<!-- 顶部导航栏 -->
		<view class="custom-navbar">
			<view class="navbar-left" @click="goBack">
				<text class="fa fa-angle-left"></text>
			</view>
			<view class="navbar-center">
				<view class="navbar-title" v-if="isMessage" @click="goToUserHomepage(author.id)">
					<image class="navbar-avatar" :src="author.avator" mode="aspectFill"></image>
					<text class="navbar-text">{{ author.nickname }}</text>
					<!-- <text class="navbar-badge" v-if="author.is_vip > 0">VIP</text> -->
				</view>
			</view>
			<view class="navbar-right">
				<template v-if="!isItMe">
					<text class="followTheAuthor followTheAuthor1" v-if="author.is_attention == 0"
						@click="followTheAuthor(1)">+关注</text>
					<text class="followTheAuthor followTheAuthor0" v-if="author.is_attention == 1"
						@click="followTheAuthor(0)">已关注</text>
				</template>

				<template v-if="isMessage">
					<image v-if="!isItMe" @click="showActionSheet(0)" src="@/static/icon/sy_icon_fenxiang.png"
						mode="widthFix"></image>
					<view v-else class="navbar-right" @click="showActionSheet(1)">
						<image src="@/static/icon/more2.png" style="width: 64rpx;height: 64rpx;  margin-top: 15rpx;"
							mode="widthFix"></image>
					</view>
				</template>
				<image v-else @click="showActionSheet(2)" src="@/static/icon/sy_icon_fenxiang.png" mode="widthFix">
				</image>
			</view>
		</view>
		<view class="topStatusBar inProgress" v-if="articleInfo.status == 2">
			审核中</view>
		<view class="topStatusBar fail" v-else-if="articleInfo.status == 3" @click="openConfirmationBox">
			审核未通过，点击查看原因</view>

		<template v-if="isMessage">
			<!--  轮播图部分 -->
			<uv-swiper class="swiper-box" height="1048rpx" :list="swperImages" indicator indicatorMode="dot"
				bgColor="#fff" :autoplay="false" @click="previewImage">
			</uv-swiper>

			<!-- 文章内容区域 -->
			<view class="body">
				<!-- 文章标题与元信息 -->
				<view class="article-header">
					<view class="title">
						{{ articleInfo.title || "暂无标题" }}
					</view>
					<view class="article-content">
						<view class="content">
							<!-- <rich-text :nodes="content" style="font-size: 14px"></rich-text> -->
							<uv-parse :content="articleInfo.content"></uv-parse>
						</view>
					</view>
					<view class="cardLink" v-if="workInfo.id" @click="goToDetails(workInfo.id)">
						<image :src="workInfo.images" mode="heightFix"></image>
						<view class="content">
							<view class="tit">{{ workInfo.title || "暂无标题" }}</view>
							<view class="tex">{{
								cutTime(workInfo.create_time) || "暂无时间"
							}}</view>
						</view>
					</view>
					<view v-if="false" 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="article-footer" v-if="false">
					<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>

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

			<previewImage ref="previewImage" :opacity="0.8" :circular="true" :imgs="imgs" :descs="descs"></previewImage>
		</template>
		<template v-else>
			<!-- <rich-text :nodes="content" style="font-size: 14px"></rich-text> -->
			<uv-parse :content="articleInfo.content"></uv-parse>
		</template>

		<block v-for="(item, idx) in articleInfo.content_images" :key="idx">
			<image class="intro-img" :src="item" mode="widthFix" />
		</block>

		<!-- 评论区域 -->
		<template v-if="articleInfo.status == 1">
			<CommentSection style="background: #fff; border-top: #F2F6F2 2rpx solid;" v-if="userInfo.id != 0"
				ref="commentSection" @totalNumberOfComments="totalNumberOfComments" :articleInfo="articleInfo"
				:myInfo="myInfo" :userInfo="userInfo" :author="author" :articleId="arcID" :type="'article'">
			</CommentSection>
		</template>
		<view class="thread2"></view>
		<!-- 自定义 ActionSheet -->
		<ActionSheet ref="actionSheet" :items="items" @select="handleActionSelect" @cancel="handleActionCancel" />
		<CustomPopup ref="confirmationBox">
			<view class="failureReason">
				<view class="title"> 审核未通关</view>
				<view class="reviewContent">
					<!-- {{ fileInformation.reason }} -->
					<uv-parse :content="articleInfo.reason"></uv-parse>
				</view>
				<view class="btn-box" @click="closeConfirmationBox">知道了</view>
			</view>
		</CustomPopup>
		<DialogBox ref="DialogBox"></DialogBox>
		<SharePopup :visible="showShare" :userId="userId" :share-title="shareTitle" :share-desc="shareDesc"
			:share-img="shareImg" view="makeDetail" @close="showShare = false" />
	</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"; //引用插件
	import CustomPopup from "@/components/CustomPopup/CustomPopup.vue";
	import SharePopup from "@/components/SharePopup/SharePopup.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,
			CustomPopup,
			SharePopup,
		},
		data() {
			return {
				swperImages: [],
				items: [],
				title: "",
				arcID: 0,
				selImg: 0,
				home_image: "",
				myinfo: {},
				tag_list: [],
				image_list: [],
				imgs: [],
				descs: [],
				list_wish: [],
				content: "",
				tableTotal: 0,
				author: {},
				// 添加文章信息字段
				articleInfo: {
					title: "",
					content: "",
					create_time: "",
					images: "",
					view_count: 0,
					author: "",
					like_count: 0,
					is_like: false,
				},
				workInfo: {},
				myInfo: {
					user_id: getApp().globalData.user_id, // 用户id
					user_name: getApp().globalData.nickname, // 用户名
					user_avatar: getApp().globalData.avator, // 用户头像地址
				},
				// 文章作者信息(提示: 一般来自localstorage, 如果是实时获取的话, 那么获取到数据后再v-if显示评论组件)
				userInfo: {
					user_id: 0, // 用户id
					user_name: "", // 用户名
					user_avatar: "", // 用户头像地址
				},
				isItMe: false,
				sms_id: 0,
				isMessage: true,
				showShare: false,
				shareTitle: "",
				shareDesc: "",
				shareImg: "",
				userId: 0,
			};
		},
		onLoad(parms) {
			let self = this;
			this.arcID = parms.id || 529;
			if (parms.type == "sms") {
				this.isMessage = false;
			}
			if (parms.sms_id) {
				this.sms_id = parms.sms_id;
			}
		},
		onShow() {
			uni.$emit("check_update");
			this.$nextTick(() => {
				if (this.$refs.commentSection) {
					this.$refs.commentSection.loadCommentData();
				}
			});

			this.loadData();
		},
		methods: {
			openConfirmationBox() {
				this.$refs.confirmationBox.open();
			},
			closeConfirmationBox() {
				this.$refs.confirmationBox.close();
			},
			// 返回上一页
			goBack() {
				uni.navigateBack({
					delta: 1,
				});
			},

			// 文章点赞
			likeArticle() {
				uni.request({
					url: this.$apiHost + "/Work/zanTA",
					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: res.data.str,
									icon: "none",
								});
							}
						} else {
							uni.showToast({
								title: res.data.str,
								icon: "none",
							});
						}
					},
					fail: (e) => {
						console.log("点赞失败:", e);
						uni.showToast({
							title: "网络请求失败",
							icon: "none",
						});
					},
				});
			},
			// 关注作者
			followTheAuthor(n) {
				uni.$emit('check_login', () => {
					uni.request({
						url: this.$apiHost + "/Member/attention",
						data: {
							uuid: getApp().globalData.uuid,
							id: this.author.id,
						},
						header: {
							"content-type": "application/json",
							sign: getApp().globalData.headerSign,
						},
						success: (res) => {
							console.log("点赞结果:", res.data);
							uni.showToast({
								title: res.data.str,
								icon: "none",
							});
							if (res.data.success === "yes") {
								console.log("关注结果:", res.data, n);

								this.author.is_attention = n;
							}
						},
						fail: (e) => {
							console.log("关注失败:", e);
							uni.showToast({
								title: "网络请求失败",
								icon: "none",
							});
						},
					});
				})
			},
			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];
			},
			goToDetails(id) {
				console.log("goToDetails", id);
				uni.navigateTo({
					url: "/pages/index/workDetail?id=" + id,
				});
				console.log("goToDetails", id);
			},
			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") {
							// 更新文章信息
							if (res.data.article) {
								this.articleInfo = res.data.article;
							}
							this.articleInfo.sms_id = this.sms_id;
							this.swperImages = this.imageString(res.data.article.images);
							console.log("swperImages", this.swperImages);
							this.userInfo.user_id = res.data.id; // 用户id
							this.userInfo.user_name = res.data.nickname; // 用户名
							this.userInfo.user_avatar = res.data.avator; // 用户头像地址
							this.author = res.data.author;
							this.workInfo = res.data.work_info;
							this.isItMe =
								res.data.article.userID == getApp().globalData.user_id ?
								true :
								false;

							// 更新分享相关数据
							this.shareTitle = this.articleInfo.title || '萌创星球';
							this.shareDesc = this.articleInfo.content;
							this.shareImg = this.articleInfo.images;
							this.userId = this.articleInfo.userID;
							this.articleInfo.content_images = this.articleInfo.content_images.split('|') || [];

							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();
				}
			},
			// 文章点赞
			// 分享文章
			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;
				// }
			},

			showActionSheet(n) {
				uni.$emit('check_login', () => {
					if (n == 0) {
						// this.items = [
						//     {
						//         text: "分享作品",
						//         icon: "../../static/icon/cz_icon_fenxiangzuopin.png",
						//     },
						// ];
						// 如果只有一个分享按钮，直接唤醒分享弹窗
						this.showShare = true;
						return;
					}
					if (n == 1) {
						this.items = [{
								text: "分享作品",
								icon: "../../static/icon/cz_icon_fenxiangzuopin.png",
							},
							{
								text: "修改帖子",
								icon: "../../static/icon/cz_icon_xiugaifengmian.png",
							},
							{
								text: "举报",
								icon: "../../static/icon/jubao.png",
							},
							{
								text: "删除作品",
								icon: "../../static/icon/sy_icon_shanchu.png",
								danger: true,
							},
						];
					}
					if (n == 2) {
						// this.items = [
						//     {
						//         text: "分享消息",
						//         icon: "../../static/icon/cz_icon_fenxiangzuopin.png",
						//     },
						// ];
						// 如果只有一个分享按钮，直接唤醒分享弹窗
						this.showShare = true;
						return;
					}
					this.$refs.actionSheet.show();
				})
			},
			handleActionCancel() {
				console.log("ActionSheet cancelled");
			},
			handleActionSelect(index, item) {
				console.log("ActionSheet selected index:", item.text);
				if (item.text === "分享作品") {
					this.showShare = true;
				} else if (item.text === "修改帖子") {
					uni.navigateTo({
						url: "/pages/make/fabuArticle?id=" + this.articleInfo.id,
					});
				} else if (item.text === "删除作品") {
					this.deleteArticle();
				} else if (item.text === "举报") {
					this.handleReport();
				}
			},
			handleReport() {
				// 实现举报功能
				uni.$emit('check_login', () => {
					uni.navigateTo({
						url: '/pages/my/feedback'
					})
				})

			},
			imageString(str) {
				if (!str) {
					return [];
				}
				return str.split("|");
			},
			cutTime(time) {
				if (!time) {
					return "";
				}
				return time.split(" ")[0];
			},
			deleteArticle() {
				this.$refs["DialogBox"]
					.confirm({
						title: "提示",
						content: "确定删除该文章吗",
						DialogType: "inquiry",
						btn1: "取消",
						btn2: "确定",
						animation: 0,
					})
					.then(() => {
						uni.showLoading({
							title: '删除中...'
						});
						uni.request({
							url: this.$apiHost + "/Article/doAct",
							data: {
								uuid: getApp().globalData.uuid,
								act: "del",
								id: this.articleInfo.id,
							},
							header: {
								"content-type": "application/json",
								sign: getApp().globalData.headerSign,
							},
							success: (res) => {
								uni.hideLoading();
								if (res.data.success === "yes") {
									uni.showToast({
										title: "删除成功",
										icon: "success",
									});
									// 删除成功后返回上一页
									setTimeout(() => {
										uni.navigateBack({
											delta: 1
										});
									}, 1500);
								} else {
									uni.showToast({
										title: res.data.str || "删除失败",
										icon: "none",
									});
								}
							},
							fail: () => {
								uni.hideLoading();
								uni.showToast({
									title: "删除失败",
									icon: "none",
								});
							}
						});
					})
					.catch(() => {
						// 用户取消删除
					});
			},
			goToUserHomepage(id) {
				uni.$emit('check_login', () => {
					if (!id) {
						return;
					}
					uni.navigateTo({
						url: "/pages/my/userHomepage?id=" + id,
					});
				})
			},
			// 预览图片
			previewImage(index) {
				if (!this.swperImages || this.swperImages.length === 0) return;
				uni.previewImage({
					urls: this.swperImages,
					current: index,
					indicator: 'number',
					loop: true,
					showmenu: false
				});
			},
		},
	};
</script>

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