# GoodInfo 商品信息组件

## 概述

`GoodInfo` 是一个高性能的商品信息展示组件，专为电商、旅游、服务类应用设计。组件采用现代化的UI设计，支持响应式布局和暗色模式，提供优秀的用户体验。

## 功能特性

### 🎯 核心功能
- **价格展示**: 突出显示商品价格，支持货币符号和价格标签
- **商品标题**: 清晰展示商品名称和相关标签
- **地址信息**: 显示商品/服务地址，支持图标和交互
- **设施展示**: 网格布局展示商品特色设施或服务项目

### ⚡ 性能优化
- **计算属性缓存**: 使用 `computed` 优化设施列表渲染
- **按需渲染**: 条件渲染减少不必要的DOM节点
- **轻量级设计**: 最小化组件体积和依赖
- **懒加载支持**: 支持图标和内容的懒加载

### 🎨 UI特性
- **现代化设计**: 圆角卡片、阴影效果、渐变背景
- **响应式布局**: 适配不同屏幕尺寸
- **暗色模式**: 自动适配系统主题
- **交互反馈**: 悬停效果和过渡动画

## 基础用法

### 简单使用

```vue
<template>
  <GoodInfo :goodsInfo="goodsData" />
</template>

<script setup>
import GoodInfo from './components/GoodInfo/index.vue'

const goodsData = {
  price: 399,
  title: '【成人票】云从朵花温泉门票',
  timeTag: '随时可退',
  address: '距您43.1公里 黔南州布依族苗族自治州龙里县'
}
</script>
```

### 完整配置

```vue
<template>
  <GoodInfo :goodsInfo="fullGoodsData" />
</template>

<script setup>
const fullGoodsData = {
  price: 399,
  title: '【成人票】云从朵花温泉门票',
  tag: '热销',
  timeTag: '随时可退',
  address: '距您43.1公里 黔南州布依族苗族自治州龙里县',
  facilities: [
    { icon: 'home', name: '48个泡池' },
    { icon: 'color', name: '11个特色药池' },
    { icon: 'fire', name: '4个汗蒸房' },
    { icon: 'person', name: '儿童充气水上乐园' },
    { icon: 'game', name: '儿童戏水区' },
    { icon: 'home-filled', name: '石板浴' }
  ]
}
</script>
```

## API 文档

### Props

| 参数 | 类型 | 默认值 | 说明 |
|------|------|--------|------|
| goodsInfo | Object | `{}` | 商品信息对象 |

### goodsInfo 对象结构

| 字段 | 类型 | 必填 | 默认值 | 说明 |
|------|------|------|--------|------|
| price | Number/String | 否 | `399` | 商品价格 |
| title | String | 否 | `'【成人票】云从朵花温泉门票'` | 商品标题 |
| tag | String | 否 | - | 价格标签（如：热销、限时优惠） |
| timeTag | String | 否 | `'随时可退'` | 时间相关标签 |
| address | String | 否 | `'距您43.1公里 黔南州布依族苗族自治州龙里县'` | 地址信息 |
| facilities | Array | 否 | 默认设施列表 | 设施/特色列表 |

### facilities 数组结构

```javascript
[
  {
    icon: 'home',        // uni-icons 图标名称
    name: '48个泡池'      // 设施名称
  }
]
```

## 样式定制

### CSS 变量

组件支持通过 CSS 变量进行主题定制：

```scss
.good-info {
  --primary-color: #ff6b35;     // 主色调
  --background-color: #fff;      // 背景色
  --text-color: #333;           // 文字颜色
  --border-radius: 16rpx;       // 圆角大小
  --shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.08); // 阴影
}
```

### 响应式断点

- **小屏设备**: `max-width: 750rpx`
- **暗色模式**: `prefers-color-scheme: dark`

## 性能优化建议

### 1. 数据结构优化

```javascript
// ✅ 推荐：使用 reactive 包装数据
const goodsData = reactive({
  price: 399,
  title: '商品标题'
})

// ❌ 避免：频繁的深层对象更新
const goodsData = ref({
  nested: {
    deep: {
      value: 'data'
    }
  }
})
```

### 2. 设施列表优化

```javascript
// ✅ 推荐：预定义设施列表
const FACILITY_PRESETS = {
  spa: [
    { icon: 'home', name: '48个泡池' },
    { icon: 'water', name: '恒温泳池' }
  ],
  hotel: [
    { icon: 'bed', name: '豪华客房' },
    { icon: 'car', name: '免费停车' }
  ]
}

// 使用预设
const goodsData = {
  facilities: FACILITY_PRESETS.spa
}
```

### 3. 图标优化

```javascript
// ✅ 推荐：使用常见图标
const commonIcons = ['home', 'person', 'heart', 'star']

// ❌ 避免：使用过多不同图标增加包体积
```

## 最佳实践

### 1. 数据验证

```javascript
// 添加数据验证
const validateGoodsInfo = (data) => {
  return {
    price: Number(data.price) || 0,
    title: String(data.title || ''),
    facilities: Array.isArray(data.facilities) ? data.facilities : []
  }
}
```

### 2. 错误处理

```vue
<template>
  <GoodInfo 
    :goodsInfo="goodsData" 
    @error="handleError"
  />
</template>

<script setup>
const handleError = (error) => {
  console.error('GoodInfo Error:', error)
  // 错误上报或用户提示
}
</script>
```

### 3. 无障碍访问

```vue
<template>
  <view 
    class="good-info"
    role="article"
    :aria-label="`商品信息：${goodsInfo.title}`"
  >
    <!-- 组件内容 -->
  </view>
</template>
```

## 注意事项

1. **图标依赖**: 组件依赖 `uni-icons`，请确保项目中已安装
2. **单位适配**: 样式使用 `rpx` 单位，适配小程序和H5
3. **性能考虑**: 设施列表较多时建议分页或虚拟滚动
4. **主题适配**: 支持暗色模式，但需要系统支持

## 更新日志

### v1.0.0 (2024-01-XX)
- ✨ 初始版本发布
- 🎨 现代化UI设计
- ⚡ 性能优化
- 📱 响应式布局
- 🌙 暗色模式支持

## 技术栈

- **框架**: Vue 3 Composition API
- **样式**: SCSS
- **图标**: uni-icons
- **构建**: Vite/Webpack

## 浏览器支持

- ✅ Chrome 80+
- ✅ Firefox 75+
- ✅ Safari 13+
- ✅ Edge 80+
- ✅ 微信小程序
- ✅ 支付宝小程序
- ✅ H5