weapp-online/pages/note_detail/note_detail.vue

<template>
	<view class="note_detail">
		<custom-nav :bgColor="bgColor">
			<view class="current" @click="goBack">
				<text class="iconfont iconzuojiantou"></text>
				<text>便签详情</text>
			</view>
		</custom-nav>
		<view class="note_title">{{ note.title }}</view>
		<view class="note_con"><rich-text :nodes="note.content"></rich-text></view>
		<view class="comment">
			<view class="comment_title">精选评论</view>
			<view v-if="showNo" class="no_com">
				<image src="../../static/imgs/no_comment.png"></image>
				<view>暂未评论，赶快做第一个评论的吧~</view>
			</view>
			<view class="eva_con" v-for="item in evaList" :key="item.id">
				<image :src="item.get_user.avatar"></image>
				<view class="eva_detail">
					<view style="font-weight: bold;padding:15rpx 0 30rpx;">{{ item.get_user.nickname }}</view>
					<view>{{ item.content }}</view>
					<view class="reply_count">
						<text>{{ item.created_at }}</text>
						<text style="margin:0 15rpx;" v-if="note.user_id == userInfo.user_id && !item.get_reply">·</text>
						<text style="color:#F44545" @click="getId(item.id, item.get_user.nickname)" v-if="note.user_id == userInfo.user_id && !item.get_reply">回复</text>
					</view>
					<view class="reply" v-if="item.get_reply">
						<view class="reply_photo flexS">
							<image :src="item.reply_user.avatar"></image>
							<text>{{ item.reply_user.nickname }}</text>
						</view>
						<view class="reply_con">
							<text>回复</text>
							<text style="color:#F44545;">{{ item.get_user.nickname }}</text>
							<text>：{{ item.get_reply.content }}</text>
						</view>
					</view>
				</view>
			</view>
			<view class="eval flexA">
				<input type="text" :placeholder="isReply ? '@' + replyName + '...' : '我来说两句..'" v-model="content" />
				<view class="flexC" @click="isReply ? replay() : comment()">{{ isReply ? '回复' : '发送' }}</view>
			</view>
		</view>
	</view>
</template>

<script>
import { showNote, sendComment, lookComment, replyComment } from '../../api/note.js';
import customNav from '../../components/custom-nav.vue';
export default {
	data() {
		return {
			note: '', //获取便签内容
			content: '', //评论内容
			id: '', //便签id
			page: 1, //当前页数
			replyName: '', //回复给谁
			isReply: false, //true  回复  false 发送
			commentId: '', //评论的id
			evaList: [], //评论列表
			userInfo: '',
			showNo: false, //无评论的状态
			bgColor: '#fff', //导航栏背景色
			totalPage: '' //总页数
		};
	},
	components: {
		customNav
	},
	onLoad(options) {
		this.id = options.id;
		this.getDetail(options.id);
	},
	onShow() {
		this.userInfo = uni.getStorageSync('userInfo');
	},
	onReachBottom() {
		this.getMore();
	},
	methods: {
		//返回便签页
		goBack() {
			uni.navigateTo({
				url: '../note_pad/note_pad?curTab=' + 1
			});
		},
		//获取回复相关内容
		getId(id, nickname) {
			this.commentId = id;
			this.replyName = nickname;
			this.isReply = true;
		},
		/*
		 * 获取评论列表
		 * @params id当前便签的id
		 * @parmas page 当前是第几页
		 */
		getComment(more) {
			lookComment({ id: this.id, page: this.page }).then(res => {
				if (res.code == 200) {
					if (res.data.list.length == 0) {
						this.showNo = true;
						return false;
					}
					this.totalPage = Math.ceil(res.data.total / 20);
					if (more == 1) {
						this.evaList = this.evaList.concat(res.data.list);
					} else {
						this.evaList = res.data.list;
					}
				} else {
					uni.showModal({
						content: res.message || '获取评论失败',
						showCancel: false
					});
				}
			});
		},
		//加载更多评论列表
		getMore() {
			if (this.page > this.totalPage) {
				uni.showToast({
					title: '没有更多啦~',
					icon: 'none'
				});
				return false;
			}
			this.page++;
			this.getComment(1);
		},
		/*
		 * 评论便签
		 * desc：自己不能评论自己的便签
		 * @params id  当前便签的id
		 * @params content 评论的内容
		 */
		comment() {
			if (this.note.user_id == this.userInfo.user_id) {
				uni.showModal({
					content: '您不能评论自己的便签',
					showCancel: false
				});
				this.content = '';
				return false;
			}
			if (!this.content) {
				uni.showModal({
					content: '请先输入内容...',
					showCancel: false
				});
				return false;
			}
			sendComment({ id: this.id, content: this.content }).then(res => {
				if (res.code == 200) {
					uni.showModal({
						content: '评论成功',
						showCancel: false
					});
					this.content = '';
					this.getComment();
				}
			});
		},
		/*
		 * 回复便签
		 * @params id 当前便签的id
		 * @params content 回复的内容
		 * @params comment_id 词条评论的id
		 * desc：目前只能回复一次，不能重复回复
		 */
		replay() {
			if (!this.content) {
				uni.showModal({
					content: '请先输入内容...',
					showCancel: false
				});
				return false;
			}
			replyComment({ id: this.id, content: this.content, comment_id: this.commentId }).then(res => {
				if (res.code == 200) {
					uni.showModal({
						content: '回复成功',
						showCancel: false
					});
					this.content = '';
					this.isReply = false;
					this.getComment();
				} else {
					uni.showModal({
						content: res.message || '回复失败',
						showCancel: false
					});
				}
			});
		},
		/*
		 * 获取便签详情
		 * @params id 此条便签的id  从便签列表页面带过来的
		 */
		getDetail(id) {
			showNote({ id }).then(res => {
				if (res.code == 200) {
					this.note = res.data;
					this.getComment();
				} else {
					uni.showModal({
						content: res.message || '获取便签详情失败',
						showCancel: false
					});
				}
			});
		}
	}
};
</script>
<style>
page {
	width: 100%;
	min-height: 100%;
	background: #fff;
}
</style>
<style lang="scss">
.current {
	font-size: 36rpx;
	font-weight: bold;
	.iconfont {
		font-size: 40rpx;
		color: #333;
		margin-left: 15rpx;
		vertical-align: -2rpx;
	}
}
.note_detail {
	padding: 150rpx 0 130rpx;
}
.note_title,
.comment_title {
	font-size: 36rpx;
	color: #333;
	font-weight: bold;
	width: 100%;

	padding: 30rpx 0;
}
.note_title {
	text-align: center;
}
.note_con,
.comment {
	width: 690rpx;
	margin: 0 auto;
}
.comment {
	.no_com {
		text-align: center;
		image {
			width: 390rpx;
			height: 282rpx;
		}
		view {
			font-size: 28rpx;
			color: #333;
			margin-top: 40rpx;
		}
	}
	.eva_con {
		display: flex;
		justify-content: flex-start;
		margin-bottom: 30rpx;
		image {
			width: 68rpx;
			height: 68rpx;
			border-radius: 50%;
			flex-shrink: 0;
			margin-right: 20rpx;
		}
		.eva_detail {
			> view {
				view {
					font-size: 28rpx;
					margin-bottom: 15rpx;
				}
				text {
					font-size: 24rpx;
					color: #999;
				}
				.reply_btn {
					width: 116rpx;
					height: 54rpx;
					background: linear-gradient(92deg, #fc9863 0%, #f76454 100%);
					border-radius: 28rpx;
					color: #fff;
					font-size: 28rpx;
				}
			}
			.reply_count {
				margin: 20rpx 0 30rpx;
				text {
					font-size: 24rpx;
					color: #999;
				}
			}
			.reply {
				margin-top: 40rpx;
				.reply_photo {
					image {
						height: 50rpx;
						width: 50rpx;
						margin-right: 20rpx;
					}
					text {
						font-size: 28rpx;
						color: #999;
					}
				}
				.reply_con {
					margin-top: 15rpx;

					text {
						font-size: 28rpx;
						color: #333;
					}
				}
			}
		}
	}
	.eval {
		width: 100%;
		height: 98rpx;
		position: fixed;
		left: 0;
		bottom: 0;
		z-index: 9999;
		background-color: #fff;
		input {
			width: 418rpx;
			height: 68rpx;
			background: #f8f8f8;
			border-radius: 34rpx;
			padding-left: 20rpx;
			color: #333;
		}
		view {
			width: 192rpx;
			height: 68rpx;
			line-height: 68rpx;
			text-align: center;
			background: linear-gradient(142deg, #f97c55 0%, #f44545 100%);
			color: #ffffff;
			font-size: 28rpx;
			border-radius: 34rpx;
		}
		.iconfont {
			font-size: 42rpx;
			color: #999;
			margin: 0 20rpx;
		}
	}
}
</style>