onecric_h5/components/comment-community/comment-community.vue

<template>
	<view class="comment-eg">
		<!-- 确认删除 -->
		<hb-comment ref="hbComment" @add="add" @del="del" @like="like" @focusOn="focusOn" :deleteTip="$t('common.delete1')"
			:cmData="commentData" v-if="commentData"></hb-comment>
	</view>
</template>

<script>
	export default {
		name: 'comment-eg',
		props: {
			articleId: {
				type: String,
				default: () => {
					return null;
				}
			}
		},
		watch: {
			articleId: {
				handler: function(newVal, oldVal) {
					if (newVal) {
						this.getComment(newVal);
					}
				},
				immediate: true
			}
		},
		data() {
			return {
				"commentData": null,
				"reqFlag": false // 请求标志，防止重复操作，true表示请求中

			}
		},
		methods: {
			
			showCom() {
				this.$refs.hbComment.commentInput()
			},
			// 登录校验
			checkLogin() {
				// TODO 此处填写登录校验逻辑
				if (true) {
					return true;
				} else {
					uni.showModal({
						title: '提示',
						content: '请先登录',
						confirmText: '前往登录',
						success: function(res) {
							if (res.confirm) {
								uni.redirectTo({
									url: '/pages/login/login'
								});
							}
						}
					});
					return false;
				}
			},
			// 输入框聚焦
			focusOn() {
				if (this.$store.state.isLogin != 1) {
					this.$toUrl('/pages/login/login')
					return
				}
			},
			// 获取评论
			getComment(articleId) {
				console.log('--=');
				// TODO 接入真实接口
				// this.$u.api.commentList(articleId).then(res => {
				// this.commentData = {
				// 	"readNumer": res.readNumer,
				// 	"commentSize": res.commentList.length,
				// 	"comment": this.getTree(res.commentList)
				// };
				// }).catch(res => {})
				
				uni.$u.http.get('/api/circle/info', {params:{id:articleId}}).then(res => {
					 this.commentData = {
						"readNumer": 0,
						"commentSize": res.list.total,
						"comment": this.getTree(res.list.data)
					};
				})
			},
			// 新增评论
			add(req) {
				if (this.$store.state.isLogin != 1) {
					this.$toUrl('/pages/login/login')
					return
				}
				if (this.reqFlag) {
					uni.showToast({
						title: this.$t('common.frequent'),
						duration: 1000
					});
					return
				}
				this.reqFlag = true;
				console.log(req);
				// TODO 接入真实接口
				let params = {
					"id": this.articleId,
					"cid": req.pId,
					"content": req.content
				}
				uni.$u.http.post('api/Circleuser/comment', params).then(res => {
					this.getComment(this.articleId);
					this.$refs.hbComment.addComplete();
					this.reqFlag = false;
				}).catch(res=>{
					this.reqFlag = false;
				})
				
			},
			// 点赞评论
			like(commentId) {
				if (this.$store.state.isLogin != 1) {
					this.$toUrl('/pages/login/login')
					return
				}
				if (this.reqFlag) {
					uni.showToast({
						title: this.$t('common.frequent'),
						duration: 1000
					});
					return
				}
				this.reqFlag = true;
				uni.$u.http.post('api/Circleuser/commentLikes', {id:commentId}).then(res => {
					this.$refs.hbComment.likeComplete(commentId);
					this.reqFlag = false;
				}).catch(res=>{
					this.reqFlag = false;
				})
				
				
				// TODO 接入真实接口
				// this.$u.api.commentLike(commentId).then(res => {
				// 	this.$refs.hbComment.likeComplete(commentId);
				// 	this.reqFlag = false;
				// }).catch(res => {
				// 	this.reqFlag = false;
				// })
				// 下边假装请求成功
				// this.reqFlag = false;
				// this.$refs.hbComment.likeComplete(commentId);
			},
			// 删除评论
			del(commentId) {
				if (this.$store.state.isLogin != 1) {
					this.$toUrl('/pages/login/login')
					return
				}
				if (this.reqFlag) {
					uni.showToast({
						title: this.$t('common.frequent'),
						duration: 1000
					});
					return
				}
				this.reqFlag = true;
				// TODO 接入真实接口
				// this.$u.api.commentDelete(commentId).then(res => {
				// 	this.reqFlag = false;
				// 	this.$refs.hbComment.deleteComplete(commentId);
				// }).catch(res => {
				// 	this.reqFlag = false;
				// })
				// 下边假装请求成功
				this.reqFlag = false;
				this.$refs.hbComment.deleteComplete(commentId);
			},
			// 列表按照父子转换成树
			getTree(data) {
				let result = [];
				let map = {};
				data.forEach(item => {
					map[item.id] = item;
				});
				data.forEach(item => {
					let parent = map[item.parentId];
					if (parent) {
						(parent.children || (parent.children = [])).push(item);
					} else {
						result.push(item);
					}
				});
				return result;
			}
		}
	};
</script>

<style>
</style>