更新记录

1.0.4（2024-03-10）

更新md文档和添加点击更多

1.0.3（2024-03-08）

新增留言按钮，showReply字段控制是否显示

1.0.2（2024-03-07）

添加了图片显示

平台兼容性

留言板组件文档

概述

留言板组件 是一款专为用户展示留言信息并提供留言功能的UniApp组件。它允许用户查看已有的留言列表，点击每条留言可查看详情，同时顶部提供一个“发表”按钮以跳转到留言撰写页面。

主要特性

• 动态展示留言列表：基于传入的list数组属性，组件能够循环渲染出多条留言及其回复信息。
• 点击跳转功能：点击“发表”按钮或留言内容可跳转至指定的留言发表页面 /pages/index/opinion。
• 数据脱敏处理：对留言中的电话号码进行脱敏处理，仅显示部分信息以保护用户隐私。
• 时间格式化：自动将留言创建日期时间格式化为易读的字符串格式。
• 加载更多留言：支持点击“点击查看更多”来加载更多留言数据。

组件属性

• showReply（Boolean）：决定是否显示“发表”按钮，默认值为 true。
• list（Array<Object>）：需要渲染的留言列表，每个对象应包含留言者昵称（contact）、联系方式（mobile）、留言内容（content）以及回复信息（back）等字段。

事件发射

• more（Boolean）：当用户点击“点击查看更多”时，组件会触发此事件并将参数设置为 true。

方法

• more()：用于展开更多留言，更改内部状态并触发 more 事件。
• getMobile(mobile)：对电话号码进行脱敏处理。
• getTime(date)：将日期时间格式化为字符串。
• pad(num)：对数字进行补零操作，确保其为两位数。
• showBoard()：点击后跳转至留言发表页面。

使用示例

import留言板 from '@/components/留言板.vue'

export default {
  components: {
   留言板
  },
  data() {
    return {
      showReply: true,
      list: []
    }
  },
  onShow() {
    // 获取数据库中的留言信息
    let list = await db.collection('opendb-feedback').get()
    list = list.result.data
    this.list = list
  }
}

在页面中引用该组件：

<留言板 :show-reply="showReply" :list="list" @more="fetchMoreData"/>

请注意，在实际使用前，请确保已经正确配置了获取留言信息的相关数据库查询逻辑。

重要提示：本插件需配合opendb-feedback插件一起使用，以实现信息录入与展示功能。在应用启动时，请确保在对应页面的 onShow 生命周期方法内初始化并加载留言列表数据。