更新记录

1.0（2024-04-03）

无评论显示场景 显示评论数量(新增和删除动态更新数量) 发起新评论 回复一级评论 回复二级评论 展开超长评论内容 删除 仅可删除自身评论 可选三类删除模式 点赞 点赞大于100显示99+

平台兼容性

环境

基于vue2和uni-ui开发;

小程序调试基础库: 3.3.0

场景

即拿即用, 组件有详细注释内容, 方便二次开发; 目前在app-vue和小程序使用, 其他平台能否使用请评论留言反馈谢谢, 祝大家使用愉快.

附言

主要是插件市场没找到满意的vue2版本, 诸多用着也不顺, 所以有了XJ-comment, 如有Bug请留言或Email, 开源不易且用且珍惜, 感谢使用.

功能

已实现

• 无评论显示占位场景 √
• 显示评论数量(新增和删除动态更新数量) √
• 发起新评论 √
• 点击评论内容回复 √
• 回复一级评论 √
• 回复二级评论 √
• 展开超长评论内容 √
• 能回复自身评论 √
• 删除 √
• 仅可删除自身评论 √
• 可选三类删除模式 √
• 点赞 √
• 点赞大于100显示99+ √

待实现

• 图片上传 ×

有其他需求的评论区留言

:props 属性

@event 事件

$ref 实例可调用属性&事件

数据说明

// 用户信息
type userInfoKeys = {

      id: number // 用户id
      user_name: string // 用户名
      user_avatar: string // 用户头像地址

}
// 评论表
type tableDataKeys = {

      id: number // 评论id
      parent_id: number // 父级评论id
      reply_id: number // 被回复人评论id
      reply_name: string // 被回复人名称
      user_name: string // 用户名
      user_avatar: string // 评论者头像地址
      user_content: string // 评论内容
      is_like: boolean // 是否点赞
      like_count: number // 点赞数统计
      create_time: string // 创建时间

}

使用方法

// 复制整页代码配合下载的插件, 可正常运作(提示: 注意uni-ui版本, 可能uni-ui不同版本的$变量不一致, 自行配置颜色即可)
<template>
    <div>
        <CComment ref="ccRef" :userInfo="userInfo" :tableData="tableData" :tableTotal="tableTotal" likeFun="likeFun" @replyFun="replyFun" @deleteFun="deleteFun" :deleteMode="deleteMode"></CComment>
        <div class="btn" @click="openComment">发一条新评论</div>
    </div>
</template>

<script>
import CComment from "@/components/XJ-comment/index";
export default {
        components: {
            CComment
        },
        data() {
            return {
                ccRef: null,
                userInfo: {
                    id: 120,
                    user_name: "🍁",
                    user_avatar: "https://pic1.zhimg.com/80/v2-a79071a705f55c5d88f6c74e6111fe84_720w.webp",
                },
                tableTotal: 4,
                tableData: [
                    {
                        id: 120,
                        parent_id: null,
                        reply_id: null,
                        reply_name: null,
                        user_name: "🍁",
                        user_avatar: "https://pic1.zhimg.com/80/v2-a79071a705f55c5d88f6c74e6111fe84_720w.webp",
                        user_content: "我是一名类风湿性关节炎的患者。第一次发病时2019年，27岁。期初我的症状是手指关节和脚趾关节红肿，后来膝盖红肿，手腕关节肿。不到半年，我就出现了晨僵，全身关节疼痛，遇冷疼，劳累疼，刮风下雨疼。",
                        is_like: false,
                        like_count: 120,
                        create_time: "2024-01-01 09:16",

                    },
                    {
                        id: 130,
                        parent_id: 120,
                        reply_id: 120,
                        reply_name: "🍁",
                        user_name: "天道酬勤",
                        user_avatar: "https://pic2.zhimg.com/80/v2-06eade66ec837713d765b1557bf20b25_720w.webp",
                        user_content: "我也是 我也是！",
                        is_like: false,
                        like_count: 67,
                        create_time: "2024-04-01 17:06"
                    },

                    {
                        id: 140,
                        parent_id: null,
                        reply_id: 130,
                        reply_name: "天道酬勤",
                        user_name: "守护宗主维护宗门",
                        user_avatar: "https://pic3.zhimg.com/80/v2-244696a62fa750b8570cf56bfaa5b26a_720w.webp",
                        user_content: "我母亲也有同样的症状",
                        is_like: false,
                        like_count: 16,
                        create_time: "2024-01-02 23:08"
                    },
                    {
                        id: 150,
                        parent_id: null,
                        reply_id: null,
                        reply_name: null,
                        user_name: "音乐制作人",
                        user_avatar: "https://pic2.zhimg.com/80/v2-88ec6f8c6d3305122664dd18a28730e5_720w.webp",
                        user_content: "我现在吃的是艾拉莫得，病症减轻了，现在肌酐指标在上升，我在考虑换药。",
                        is_like: true,
                        like_count: 8,
                        create_time: "2024-01-08 00:45"
                    }
                ],
                deleteMode: "all",

            }

        },

        methods: {
            openComment() {
                this.$refs.ccRef.newCommentFun();
            },
            likeFun(params, callback) {
                console.log("likeFun", params);
                // Implement your logic for likeFun

            },
            replyFun(params, callback) {
                // console.log("replyFun", params);
                // axios.post("http://xxx/reply", { ...params }).then((res) => {
                //   //   if (res.code === 0) {
                //   //     callback(res);
                //   //   }
                //   // });
                  const res = { id: Math.random() }; // 很重要的回参! 必须拿到后端返回评论id! 删除需要!
                  setTimeout(() => callback(res), 500); // 目前为了展示效果, 直接执行callback
            },

            deleteFun({ params, mode }, callback) {

              console.log("deleteFun", { params, mode });
              // 当请求成功, 调用callback执行评论删除;
              switch (this.deleteMode) {
                case "bind":
                  // 逻辑: 调用接口进行评论内容修改 update
                  setTimeout(() => callback(), 500); // 目前为了展示效果, 直接执行callback
                  break;
                case "only":
                  // 逻辑: 调用接口删除一个评论 delete
                  setTimeout(() => callback(), 500); // 目前为了展示效果, 直接执行callback
                  break;
                default:
                  // all
                  // 逻辑: 调用接口删除多个评论 [delete]
                  // Demo如下:
                  // axios.post("http://xxx/delete", { ids: params }).then((res) => {
                  //   if (res.code === 0) {
                  //     callback(res);
                  //   }
                  // });
                  setTimeout(() => callback(), 500); // 目前为了展示效果, 直接执行callback
                  break;
              }
            }
        }
    }
</script>

<style lang="scss" scoped>
.btn {
  text-align: center;
  color: #fff;
  padding: 20rpx;
  margin: 20rpx;
  border-radius: 20rpx;
  background-color: #2979ff;
}
</style>