# RecentReviews 近期评价组件 ## 组件说明 近期评价组件用于显示用户对服务的评价信息,包含用户头像、姓名、评价时间、星级评分和评价内容。 ## 功能特性 - 📱 符合微信小程序开发规范 - 🎨 与项目整体UI风格保持一致 - 🔄 支持uniapp跨平台开发 - 📊 支持星级评分显示 - 🖼️ 支持用户头像展示 - 📝 支持评价内容展示 - 🎯 支持点击事件处理 - 📱 响应式布局设计 ## 使用方法 ### 1. 引入组件 ```javascript import RecentReviews from '@/components/RecentReviews/RecentReviews.vue' export default { components: { RecentReviews } } ``` ### 2. 在模板中使用 ```vue ``` ### 3. 数据格式 ```javascript data() { return { reviewData: [ { userName: '用户名', userImage: '用户头像URL', rating: 5, // 评分 1-5 reviewDate: '2024-11-01 18:09:32', comment: '评价内容' } ], defaultAvatar: 'https://example.com/default-avatar.png' } } ``` ## Props 属性 | 属性名 | 类型 | 默认值 | 说明 | |--------|------|--------|------| | reviewList | Array | [] | 评价数据列表 | | defaultAvatar | String | 默认头像URL | 默认用户头像 | | showCount | Boolean | true | 是否显示评价数量 | ## Events 事件 | 事件名 | 说明 | 回调参数 | |--------|------|----------| | reviewClick | 点击评价项时触发 | { review, index } | | avatarClick | 点击用户头像时触发 | { review, index } | ## 数据结构说明 ### reviewList 数组项结构 ```typescript interface ReviewItem { userName: string; // 用户名 userImage?: string; // 用户头像URL(可选) rating: number; // 评分(1-5) reviewDate: string; // 评价时间 comment: string; // 评价内容 } ``` ## 样式说明 组件使用了项目统一的设计规范: - 主色调:#FFB13F(橙色) - 文字颜色:#333333(深灰)、#7D8196(浅灰) - 分割线:#EFEFEF - 圆角:使用rpx单位,适配不同屏幕 ## 注意事项 1. 确保项目中已安装 `uni-rate` 和 `u-avatar` 组件 2. 评分值应在 1-5 之间 3. 头像URL建议使用HTTPS协议 4. 组件内部已处理空状态显示 5. 支持微信小程序、H5、APP等多端运行 ## 更新日志 ### v1.0.0 - 初始版本发布 - 支持基础评价展示功能 - 支持点击事件处理 - 支持空状态显示