MoeNovaClient/pages/index/articleDetail.vue

<template>
	<view class="page">
		<view class="topUser">
			<image :src="home_image" class="home_image" mode="aspectFill"></image>
			<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="item">
				<view class="title">
					标题标题标题标题标题
				</view>
				<view class="title2">
					时间：2025-02-20
				</view>
			</view>
			<view class="item">
				<view class="content">内容内容内容内容内容</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>

		<CComment ref="ccRef" :myInfo="myInfo" :userInfo="userInfo" :tableData="tableData" :tableTotal.sync="tableTotal"
			:deleteMode="deleteMode" @likeFun="likeFun" @replyFun="replyFun" @deleteFun="deleteFun"></CComment>
		<view class="btn" @tap="openComment">发表新评论</view>
		<view class="thread2"></view>

	</view>
</template>

<script>
	import CComment from "@/components/cc-comment/cc-comment.vue";
	import previewImage from '@/components/kxj-previewImage/kxj-previewImage.vue'; //引用插件
	export default {
		components: {
			previewImage,
			CComment
		},
		data() {
			return {
				title: '',
				userID: 0,
				selImg: 0,
				home_image: '',
				myinfo: {},
				tag_list: [],
				image_list: [],
				imgs: [],
				descs: [],
				list_wish: [],



				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: [{
						id: 120, // 评论id
						parent_id: null, // 评论父级的id
						reply_id: null, // 被回复评论的id
						reply_name: null, // 被回复人的名称
						user_id: 2, // 用户id
						user_name: "ikun", // 用户名
						user_avatar: "https://pic1.zhimg.com/80/v2-a79071a705f55c5d88f6c74e6111fe84_720w.webp", // 用户头像地址
						user_content: "唱,跳,rap,篮球", // 用户评论内容
						is_like: false, // 用户是否点赞
						like_count: 120, // 点赞数统计
						create_time: "2025-02-19 09:16", // 创建时间
					},
					{
						id: 130, // 评论id
						parent_id: 120, // 评论父级的id
						reply_id: 120, // 被回复评论的id
						reply_name: "ikun", // 被回复人的名称
						user_id: 3, // 用户id
						user_name: "小黑子", // 用户名
						user_avatar: "https://pic2.zhimg.com/80/v2-06eade66ec837713d765b1557bf20b25_720w.webp", // 用户头像地址
						user_content: "姬霓太美~祝自己生日快乐~~", // 用户评论内容
						is_like: false, // 用户是否点赞
						like_count: 67, // 点赞数统计
						create_time: "2025-03-07 00:06", // 创建时间
					},
					{
						id: 140, // 评论id
						parent_id: 120, // 评论父级的id
						reply_id: 130, // 被回复评论的id
						reply_name: "小黑子", // 被回复人的名称
						user_id: 4, // 用户id
						user_name: "守护宗主维护宗门", // 用户名
						user_avatar: "https://pic3.zhimg.com/80/v2-244696a62fa750b8570cf56bfaa5b26a_720w.webp", // 用户头像地址
						user_content: "你露出鸡脚了", // 用户评论内容
						is_like: false, // 用户是否点赞
						like_count: 16, // 点赞数统计
						create_time: "2025-05-10 17:08", // 创建时间
					},
					{
						id: 150, // 评论id
						parent_id: null, // 评论父级的id
						reply_id: null, // 被回复评论的id
						reply_name: null, // 被回复人的名称
						user_id: 5, // 用户id
						user_name: "音乐制作人", // 用户名
						user_avatar: "https://pic2.zhimg.com/80/v2-88ec6f8c6d3305122664dd18a28730e5_720w.webp", // 用户头像地址
						user_content: "只因你太美baby 只因你太美baby 只因你实在是太美baby 只因你太美baby 迎面走来的你让我如此蠢蠢欲动 这种感觉我从未有 Cause I got a crush on you who you 你是我的 我是你的 谁 再多一眼看一眼就会爆炸 再近一点靠近点快被融化", // 用户评论内容
						is_like: true, // 用户是否点赞
						like_count: 8, // 点赞数统计
						create_time: "2025-12-21 00:45", // 创建时间
					},
				],


			}
		},
		onLoad(parms) {
			let self = this;
			this.userID = parms.uid || 1069;
		},
		onShow() {
			uni.$emit('check_update');
			this.loadData();
			this.loadWishData();
		},
		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];
			},
			chatTA() {
				// uni.navigateTo({
				// 	url: '/pages/chat/detail?userID=1&nickName=' + encodeURIComponent("昵称") +
				// 		"&conversationType=C2C"
				// });
				let conversationID = "";
				let conversationType = "C2C";
				let userID = "" + this.myinfo.userID;
				let nickName = this.myinfo.nickname;

				var jsonConversationID = encodeURIComponent(JSON.stringify(conversationID));
				var jsonConversationType = encodeURIComponent(JSON.stringify(conversationType));

				var jsonUserID = encodeURIComponent(JSON.stringify(userID));
				var jsonNickName = encodeURIComponent(JSON.stringify(nickName));

				uni.navigateTo({
					url: "/pages/chat/detail?userID=" + jsonUserID + "&nickName=" + jsonNickName +
						"&conversationID=" + jsonConversationID + "&conversationType=" + jsonConversationType
				})
			},
			toArr(imgs) {
				let arr = imgs.split("|");
				return arr;
			},
			previewOpen(imgs1, index) {
				this.imgs = imgs1.split("|");
				setTimeout(() => this.$refs.previewImage.open(index), 0)
				// 传入当前选中的图片地址或序号
				return; //如需测试和uni原生预览差别可注释这两行
			},
			loadWishData() {
				uni.request({
					url: this.$apiHost + '/Wish/getMyList',
					data: {
						uuid: getApp().globalData.uuid,
						userID: this.userID
					},
					header: {
						'content-type': 'application/json'
					},
					success: (res) => {
						console.log("res", res.data)
						this.list_wish = res.data.list;
					}
				});
			},
			loadData() {
				// console.log({
				// 	uuid: getApp().globalData.uuid,
				// 	skey: getApp().globalData.skey
				// });
				uni.request({
					url: this.$apiHost + '/Member/getHomeInfo',
					data: {
						uuid: getApp().globalData.uuid,
						userID: this.userID
					},
					header: {
						"content-type": "application/json",
						'sign': getApp().globalData.headerSign
					},
					success: (res) => {
						console.log("----:", res.data);
						this.myinfo = res.data;
						if (res.data.tags != "") {
							this.tag_list = res.data.tags.split(",");
						}
						if (res.data.images != "") {
							this.image_list = res.data.images.split(",");
							this.home_image = this.image_list[0];
						} else {
							this.home_image = "../../static/home/avator.png";
						}
					},
					complete: (com) => {
						// uni.hideLoading();
					},
					fail: (e) => {
						console.log("----e:", e);
					}
				});
			},

			ZhanTA(item, index) {
				// this.list[index].is_like = 1;
				// this.list[index].num_like++;
				// return;
				let that = this;
				uni.request({
					url: this.$apiHost + '/Article/zanTA',
					data: {
						uuid: getApp().globalData.uuid,
						id: item.id
					},
					header: {
						"content-type": "application/json",
						'sign': getApp().globalData.headerSign
					},
					success: (res) => {
						console.log("----:", res.data);
						if (res.data.success == "yes") {
							that.myinfo.article_list[index].is_like = 1;
							that.myinfo.article_list[index].num_like++;
						}
					},
					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 + '/ArticleReply/zanTA',
					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); // 请求失败时重置点赞效果
					}
				});
			},
			// 评论回调事件
			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", params);
				uni.request({
					url: this.$apiHost + '/ArticleReply/new',
					data: {
						uuid: getApp().globalData.uuid,
						article_id: this.userID, // 文章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
				});
				// 当请求成功, 调用callback执行评论删除;
				// Demo如下:
				// axios.post("http://xxx/delete", { ids: params, mode }).then((res) => {
				//   if (res.code === 0) {
				//     callback(res);
				//   }
				// });
				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>