feat: 商品详情页面交互
This commit is contained in:
duanshuwen
254
pages/goods/components/GoodInfo/README.md
Normal file
254
pages/goods/components/GoodInfo/README.md
Normal file
@@ -0,0 +1,254 @@
|
||||
# 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
|
||||
Reference in New Issue
Block a user