254 lines
5.7 KiB
Markdown
254 lines
5.7 KiB
Markdown
# 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 |