(二十三)、实现评论功能(3)【uniapp+uinicloud多用户社区博客实战项目(完整开发文档-从零到完整项目)】

有目标就不怕路远。年轻人.无论你现在身在何方.重要的是你将要向何处去。只有明确的目标才能助你成功。没有目标的航船.任何方向的风对他来说都是逆风。因此,再遥远的旅程,只要有目标.就不怕路远。没有目标,哪来的劲头?一车尔尼雷夫斯基

导读:本篇文章讲解 (二十三)、实现评论功能(3)【uniapp+uinicloud多用户社区博客实战项目(完整开发文档-从零到完整项目)】,希望对大家有帮助,欢迎收藏,转发!站点地址:www.bmabk.com,来源:原文

1,删除评论的样式和实现逻辑

1.1 添加删除评论的样式

在comment-item组件中:

			<view class="username">
					{{giveName(item)}}
					<text class="iconfont icon-a-43-guanbi" @click.stop="delComment"></text>
				</view>

添加样式:

        .iconfont {
          font-size: 20rpx;
          padding: 10rpx;
          color: #999;
        }

效果:
在这里插入图片描述

1.2 实现删除功能

添加delcomment方法:

 //点击删除评论方法
      delComment() {
        let uid = uniCloud.getCurrentUserInfo().uid
        if (uid == this.item.user_id[0]._id ||
          this.uniIDHasRole('admin') ||
          this.uniIDHasRole('role01')) {
          uni.showModal({
            title: "是否确认删除",
            success: res => {
              if (res.confirm) {
                this.removeComment();
              }
            }
          })
          return;
        }
        uni.showToast({
          title: "权限不够",
          icon: "error"
        })
      },
      //删除评论方法
      removeComment() {
        db.collection("quanzi_comment").doc(this.item._id).remove()
          .then(res => {
            uni.showToast({
              title: "删除成功"
            })
          })
      }
1.3 实现无感删除

业务逻辑:在子组件comment-item 删除方法中,当执行删除某条评论后,用$emit方法把所删除的文章id传递到父组件detail,然后在detail父组件做无感删除操作——通过从子组件传递过来的id,使用findindex函数查询索引,再通过splice函数,通过索引删除detail组件中的对应的数值。

detail组件:

    <!-- 评论输入框子组件 -->
    <comment-frame :commentObj="commentObj" @commentEnv="PcommentEnv" @removeEnv="PremoveEnv"></comment-frame>

comment-item子组件:

            //向父组件detail传递方法
            this.$emit("removeEnv", {
              id: this.item._id
            })

detail组件:

      //删除评论的回调
      PremoveEnv(e) {
        console.log(e);
        //通过已删除的文章id找到数组中的索引 findindex方法返回值就是索引
        let index = this.commentList.findIndex(item => {
          return item._id == e.id
        })
        //删除索引值对应的值
        this.commentList.splice(index, 1)
      },

2,判断删除权限以及增减评论数量

2.1 在评论表的schema中:
  "permission": {
    "read": true,
    "create": "auth.uid != null",
    "update": "doc.user_id == auth.uid || 'role01' in auth.role",
    "delete": "doc.user_id == auth.uid || 'role01' in auth.role"
  },

删除操作的权限是:只有当前用户和拥有role01角色的用户才可以进行删除操作。

2.2 权限校验
 if (uid == this.item.user_id[0]._id ||
          this.uniIDHasRole('admin') ||
          this.uniIDHasRole('role01'))

在这里插入图片描述

2.3 使用云对象实现增减评论数量
  1. 增加评论数量

在comment-frame组件中引入云对象:

	const utilsObj=uniCloud.importObject("utilsObj",{
		customUI: true
	});	

在发布评论方法中使用云对象方法:

utilsObj.operation("quanzi_article","comment_count",this.commentObj.article_id,1)
  1. 减少评论数量

在comment-item组件中引入云对象:

	const utilsObj=uniCloud.importObject("utilsObj",{
		customUI: true
	});	

在发布评论方法中使用云对象方法:

            //调用云对象方法
            if (this.item.comment_count > 0) {
              utilsObj.operation("quanzi_articles", "comment_count", this.item.article_id, -1)
            }

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

文章由半码博客整理,本文链接:https://www.bmabk.com/index.php/post/135720.html

(0)

相关推荐

发表回复

登录后才能评论
半码博客——专业性很强的中文编程技术网站,欢迎收藏到浏览器,订阅我们!