pet-front-order/pages_order/components/RecentReviews/README.md

# RecentReviews 近期评价组件

## 组件说明

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

## 功能特性

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

## 使用方法

### 1. 引入组件

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

export default {
  components: {
    RecentReviews
  }
}
```

### 2. 在模板中使用

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

### 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
- 初始版本发布
- 支持基础评价展示功能
- 支持点击事件处理
- 支持空状态显示