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="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)">
						<text class="fa fa-ellipsis-h"></text>
					</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 v-if="articleInfo.type == 'user'" class="swiper-box" height="1032rpx" :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" @click="goToDetails(workInfo.id)">
						<image :src="workInfo.images" mode="heightFix"></image>
						<view class="content">
							<view class="tit">作品一号</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>
		<!-- 评论区域 -->
		<template v-if="articleInfo.status == 1">
			<CommentSection v-if="userInfo.id != 0" ref="commentSection" @totalNumberOfComments="totalNumberOfComments"
				:articleInfo="articleInfo" :myInfo="myInfo" :userInfo="userInfo" :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="articleDetail"
			@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: "https://your-share-image.com/image.jpg",
			userId: 0,
		};
	},
	onLoad(parms) {
		let self = this;
		this.arcID = parms.id;
		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;

						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/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 === "修改帖子") {
				console.log("修改帖子");
				uni.navigateTo({
					url: "/pages/make/fabuArticle?id=" + this.articleInfo.id,
				});
			} else if (item.text === "删除作品") {
				console.log("删除作品");
				this.deleteArticle();
			}
		},
		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
			});
		},
	},
};
</script>

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