YGChatCS/pages/goods/components/GoodInfo

GoodInfo 商品信息组件

概述

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

功能特性

🎯 核心功能

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

⚡ 性能优化

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

🎨 UI特性

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

基础用法

简单使用

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

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

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

完整配置

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

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

样式定制

CSS 变量

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

.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. 数据结构优化

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

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

2. 设施列表优化

// ✅ 推荐：预定义设施列表
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. 图标优化

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

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

最佳实践

1. 数据验证

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

2. 错误处理

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

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

3. 无障碍访问

<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