pet-front-order/pages_order/components/RecentReviews

RecentReviews 近期评价组件

组件说明

近期评价组件用于显示用户对服务的评价信息，包含用户头像、姓名、评价时间、星级评分和评价内容。

功能特性

• 📱 符合微信小程序开发规范
• 🎨 与项目整体UI风格保持一致
• 🔄 支持uniapp跨平台开发
• 📊 支持星级评分显示
• 🖼️ 支持用户头像展示
• 📝 支持评价内容展示
• 🎯 支持点击事件处理
• 📱 响应式布局设计

使用方法

1. 引入组件

import RecentReviews from '@/components/RecentReviews/RecentReviews.vue'

export default {
  components: {
    RecentReviews
  }
}

2. 在模板中使用

<template>
  <view>
    <RecentReviews 
      :reviewList="reviewData" 
      :defaultAvatar="defaultAvatar"
      @reviewClick="handleReviewClick"
      @avatarClick="handleAvatarClick" />
  </view>
</template>

3. 数据格式

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 数组项结构

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

• 初始版本发布
• 支持基础评价展示功能
• 支持点击事件处理
• 支持空状态显示