feat(src): 新增文章、经销商申请、用户地址和礼物添加功能
- 新增文章添加页面，支持文章基本信息、设置、高级设置和图片上传 - 新增经销商申请页面，支持申请信息填写和审核状态显示 - 新增用户地址添加页面，支持地址信息填写和地址识别功能 - 新增礼物添加页面，功能与文章添加类似 - 统一使用 .tsx 文件格式 - 添加 .editorconfig、.eslintrc 和 .gitignore 文件，规范代码风格和项目结构
This commit is contained in:
184
src/components/GiftCard.md
Normal file
184
src/components/GiftCard.md
Normal file
@@ -0,0 +1,184 @@
|
||||
# GiftCard 礼品卡组件
|
||||
|
||||
一个功能丰富、设计精美的礼品卡组件，支持多种类型的礼品卡展示和交互。
|
||||
|
||||
## 功能特性
|
||||
|
||||
### 🎨 视觉设计
|
||||
- **多主题支持**：金色、银色、铜色、蓝色、绿色、紫色六种主题
|
||||
- **响应式设计**：适配不同屏幕尺寸
|
||||
- **状态指示**：清晰的可用、已使用、已过期状态展示
|
||||
- **折扣标识**：自动计算并显示折扣百分比
|
||||
|
||||
### 🖼️ 图片展示
|
||||
- **单图模式**：支持单张商品图片展示
|
||||
- **轮播模式**：支持多张图片轮播展示
|
||||
- **自适应尺寸**：图片自动适配容器大小
|
||||
|
||||
### 💰 价格信息
|
||||
- **面值显示**：突出显示礼品卡面值
|
||||
- **原价对比**：显示原价和折扣信息
|
||||
- **优惠活动**：展示当前优惠活动信息
|
||||
|
||||
### ⭐ 商品详情
|
||||
- **品牌分类**：显示商品品牌和分类信息
|
||||
- **评分评价**：展示用户评分和评价数量
|
||||
- **规格库存**：显示商品规格和库存状态
|
||||
- **商品标签**：支持多个商品特色标签
|
||||
|
||||
### 📋 使用指南
|
||||
- **使用说明**：详细的使用步骤说明
|
||||
- **注意事项**：重要的使用注意事项
|
||||
- **适用门店**：显示可使用的门店列表
|
||||
|
||||
### 🔧 交互功能
|
||||
- **兑换码展示**：支持兑换码的显示和隐藏
|
||||
- **操作按钮**：使用、详情等操作按钮
|
||||
- **点击事件**：支持整卡点击事件
|
||||
|
||||
## 使用方法
|
||||
|
||||
### 基础用法
|
||||
|
||||
```tsx
|
||||
import GiftCard from '@/components/GiftCard'
|
||||
|
||||
const MyComponent = () => {
|
||||
return (
|
||||
<GiftCard
|
||||
id={1}
|
||||
name="星巴克咖啡礼品卡"
|
||||
description="享受醇香咖啡时光"
|
||||
goodsImage="https://example.com/starbucks.jpg"
|
||||
faceValue="100"
|
||||
type={20}
|
||||
useStatus={0}
|
||||
theme="green"
|
||||
showUseBtn={true}
|
||||
onUse={() => console.log('使用礼品卡')}
|
||||
/>
|
||||
)
|
||||
}
|
||||
```
|
||||
|
||||
### 完整功能展示
|
||||
|
||||
```tsx
|
||||
import GiftCard from '@/components/GiftCard'
|
||||
|
||||
const FullFeatureCard = () => {
|
||||
const cardData = {
|
||||
id: 1,
|
||||
name: '星巴克咖啡礼品卡',
|
||||
description: '享受醇香咖啡时光，适用于全国星巴克门店',
|
||||
code: 'SB2024001234567890',
|
||||
goodsImages: [
|
||||
'https://example.com/image1.jpg',
|
||||
'https://example.com/image2.jpg'
|
||||
],
|
||||
faceValue: '100',
|
||||
originalPrice: '120',
|
||||
type: 20,
|
||||
useStatus: 0,
|
||||
expireTime: '2024-12-31 23:59:59',
|
||||
goodsInfo: {
|
||||
brand: '星巴克',
|
||||
category: '餐饮美食',
|
||||
rating: 4.8,
|
||||
reviewCount: 1256,
|
||||
tags: ['热门', '全国通用'],
|
||||
instructions: [
|
||||
'出示兑换码至门店收银台即可使用',
|
||||
'可用于购买任意饮品和食品'
|
||||
],
|
||||
notices: [
|
||||
'礼品卡一经售出，不可退换',
|
||||
'请妥善保管兑换码'
|
||||
],
|
||||
applicableStores: ['全国星巴克门店', '机场店']
|
||||
},
|
||||
promotionInfo: {
|
||||
type: 'discount',
|
||||
description: '限时优惠：满100减20',
|
||||
validUntil: '2024-09-30 23:59:59'
|
||||
},
|
||||
showCode: true,
|
||||
showUseBtn: true,
|
||||
showGoodsDetail: true,
|
||||
theme: 'green'
|
||||
}
|
||||
|
||||
return (
|
||||
<GiftCard
|
||||
{...cardData}
|
||||
onUse={() => console.log('使用')}
|
||||
onDetail={() => console.log('详情')}
|
||||
onClick={() => console.log('点击')}
|
||||
/>
|
||||
)
|
||||
}
|
||||
```
|
||||
|
||||
## 属性说明
|
||||
|
||||
### 基础属性
|
||||
| 属性 | 类型 | 默认值 | 说明 |
|
||||
|------|------|--------|------|
|
||||
| id | number | - | 礼品卡ID |
|
||||
| name | string | - | 礼品卡名称 |
|
||||
| description | string | - | 礼品卡描述 |
|
||||
| faceValue | string | - | 礼品卡面值 |
|
||||
| type | number | 10 | 类型：10-实物 20-虚拟 30-服务 |
|
||||
| useStatus | number | 0 | 状态：0-可用 1-已使用 2-已过期 |
|
||||
| theme | string | 'gold' | 主题色 |
|
||||
|
||||
### 商品信息
|
||||
| 属性 | 类型 | 说明 |
|
||||
|------|------|------|
|
||||
| goodsInfo.brand | string | 商品品牌 |
|
||||
| goodsInfo.category | string | 商品分类 |
|
||||
| goodsInfo.rating | number | 商品评分 |
|
||||
| goodsInfo.reviewCount | number | 评价数量 |
|
||||
| goodsInfo.tags | string[] | 商品标签 |
|
||||
| goodsInfo.instructions | string[] | 使用说明 |
|
||||
| goodsInfo.notices | string[] | 注意事项 |
|
||||
|
||||
### 事件回调
|
||||
| 事件 | 类型 | 说明 |
|
||||
|------|------|------|
|
||||
| onUse | () => void | 使用按钮点击 |
|
||||
| onDetail | () => void | 详情按钮点击 |
|
||||
| onClick | () => void | 卡片点击 |
|
||||
|
||||
## 主题配置
|
||||
|
||||
组件支持6种预设主题：
|
||||
|
||||
- `gold` - 金色主题（默认）
|
||||
- `silver` - 银色主题
|
||||
- `bronze` - 铜色主题
|
||||
- `blue` - 蓝色主题
|
||||
- `green` - 绿色主题
|
||||
- `purple` - 紫色主题
|
||||
|
||||
## 样式定制
|
||||
|
||||
可以通过覆盖CSS类名来自定义样式：
|
||||
|
||||
```scss
|
||||
.gift-card {
|
||||
// 自定义卡片样式
|
||||
}
|
||||
|
||||
.gift-card-gold {
|
||||
// 自定义金色主题
|
||||
}
|
||||
```
|
||||
|
||||
## 注意事项
|
||||
|
||||
1. 确保传入的图片URL有效且可访问
|
||||
2. 价格相关字段建议使用字符串类型，避免精度问题
|
||||
3. 时间字段请使用标准的日期时间格式
|
||||
4. 商品标签数量建议控制在5个以内，避免布局混乱
|
||||
5. 使用说明和注意事项条目建议简洁明了
|
||||
Reference in New Issue
Block a user