发布页开发
This commit is contained in:
筱野
178
docs/PublishBall使用说明.md
Normal file
178
docs/PublishBall使用说明.md
Normal file
@@ -0,0 +1,178 @@
|
||||
# 发布球局功能使用说明
|
||||
|
||||
## 功能概述
|
||||
|
||||
发布球局功能允许用户创建和发布体育活动，包括图片上传、详细信息填写等完整流程。
|
||||
|
||||
## 主要特性
|
||||
|
||||
### 1. 图片上传组件 (UploadImages)
|
||||
- ✅ 支持最多9张图片上传
|
||||
- ✅ 6张以内显示网格布局，超过6张自动分页滑动
|
||||
- ✅ 支持图片预览和删除
|
||||
- ✅ 拍照或从相册选择
|
||||
- ✅ 响应式设计，支持暗色模式
|
||||
|
||||
### 2. 动态表单系统 (DynamicForm)
|
||||
- ✅ 基于配置的动态表单渲染
|
||||
- ✅ 支持多种字段类型：文本、数字、选择器、日期时间、开关、单选、多选、位置选择
|
||||
- ✅ 完整的表单验证
|
||||
- ✅ 实时错误提示
|
||||
- ✅ 美观的UI设计
|
||||
|
||||
### 3. 位置选择功能
|
||||
- ✅ 支持地图选择位置
|
||||
- ✅ 一键获取当前位置
|
||||
- ✅ 地址显示和验证
|
||||
|
||||
### 4. 草稿保存系统
|
||||
- ✅ 自动保存草稿（2秒延迟）
|
||||
- ✅ 页面刷新后自动恢复
|
||||
- ✅ 草稿过期管理（7天）
|
||||
- ✅ 提交成功后自动清除
|
||||
|
||||
## 文件结构
|
||||
|
||||
```
|
||||
src/
|
||||
├── components/
|
||||
│ ├── UploadImages/
|
||||
│ │ ├── index.tsx # 图片上传组件
|
||||
│ │ └── index.scss # 组件样式
|
||||
│ └── DynamicForm/
|
||||
│ ├── index.tsx # 动态表单组件
|
||||
│ └── index.scss # 组件样式
|
||||
├── config/
|
||||
│ └── formSchema/
|
||||
│ └── publishBallFormSchema.ts # 表单配置
|
||||
├── pages/
|
||||
│ └── publishBall/
|
||||
│ ├── index.tsx # 发布页面
|
||||
│ ├── index.scss # 页面样式
|
||||
│ └── index.config.ts # 页面配置
|
||||
└── utils/
|
||||
└── locationUtils.ts # 位置相关工具函数
|
||||
```
|
||||
|
||||
## 使用方法
|
||||
|
||||
### 1. 页面导航
|
||||
```typescript
|
||||
// 跳转到发布页面
|
||||
Taro.navigateTo({
|
||||
url: '/pages/publishBall/index'
|
||||
})
|
||||
```
|
||||
|
||||
### 2. 组件使用
|
||||
|
||||
#### UploadImages组件
|
||||
```tsx
|
||||
import UploadImages from '../../components/UploadImages/index'
|
||||
|
||||
<UploadImages
|
||||
value={images}
|
||||
onChange={handleImagesChange}
|
||||
maxCount={9}
|
||||
className="custom-class"
|
||||
/>
|
||||
```
|
||||
|
||||
#### DynamicForm组件
|
||||
```tsx
|
||||
import DynamicForm from '../../components/DynamicForm/index'
|
||||
import { publishBallFormSchema } from '../../config/formSchema/publishBallFormSchema'
|
||||
|
||||
<DynamicForm
|
||||
schema={publishBallFormSchema}
|
||||
initialValues={initialValues}
|
||||
onValuesChange={handleFormValuesChange}
|
||||
onSubmit={handleSubmit}
|
||||
/>
|
||||
```
|
||||
|
||||
### 3. 自定义表单配置
|
||||
```typescript
|
||||
// 在 publishBallFormSchema.ts 中添加新字段
|
||||
{
|
||||
key: 'customField',
|
||||
label: '自定义字段',
|
||||
type: FieldType.TEXT,
|
||||
placeholder: '请输入',
|
||||
required: true,
|
||||
rules: [
|
||||
{ required: true, message: '此字段为必填' }
|
||||
]
|
||||
}
|
||||
```
|
||||
|
||||
## 支持的表单字段类型
|
||||
|
||||
| 类型 | 说明 | 示例 |
|
||||
|------|------|------|
|
||||
| TEXT | 文本输入 | 活动标题 |
|
||||
| TEXTAREA | 多行文本 | 活动描述 |
|
||||
| SELECT | 下拉选择 | 运动类型 |
|
||||
| DATE | 日期选择 | 活动日期 |
|
||||
| TIME | 时间选择 | 开始时间 |
|
||||
| NUMBER | 数字输入 | 人数限制 |
|
||||
| SWITCH | 开关按钮 | 公开活动 |
|
||||
| RADIO | 单选按钮 | 技能要求 |
|
||||
| CHECKBOX | 多选框 | 活动标签 |
|
||||
| LOCATION | 位置选择 | 活动地点 |
|
||||
|
||||
## 样式特性
|
||||
|
||||
### 设计系统
|
||||
- 🎨 统一的色彩方案
|
||||
- 📱 响应式设计
|
||||
- 🌙 深色模式支持
|
||||
- ✨ 流畅的动画效果
|
||||
- 🔧 可定制的主题
|
||||
|
||||
### 交互体验
|
||||
- 👆 触感反馈
|
||||
- 🔄 加载状态
|
||||
- ⚠️ 错误提示
|
||||
- 💾 自动保存
|
||||
- 🎯 焦点管理
|
||||
|
||||
## 开发注意事项
|
||||
|
||||
1. **图片上传**: 实际项目中需要实现真实的图片上传API
|
||||
2. **位置服务**: 需要配置地图服务的API密钥
|
||||
3. **表单验证**: 可根据业务需求扩展验证规则
|
||||
4. **草稿存储**: 使用本地存储，注意存储容量限制
|
||||
5. **权限管理**: 需要申请相册、相机、位置等权限
|
||||
|
||||
## 扩展性
|
||||
|
||||
### 添加新的字段类型
|
||||
1. 在 `FieldType` 枚举中添加新类型
|
||||
2. 在 `DynamicForm` 组件的 `renderField` 方法中添加处理逻辑
|
||||
3. 在样式文件中添加对应样式
|
||||
|
||||
### 自定义验证规则
|
||||
```typescript
|
||||
// 在表单配置中添加自定义验证
|
||||
rules: [
|
||||
{
|
||||
pattern: /^1[3-9]\d{9}$/,
|
||||
message: '请输入正确的手机号'
|
||||
}
|
||||
]
|
||||
```
|
||||
|
||||
### 主题定制
|
||||
通过修改 SCSS 变量来定制主题颜色和样式。
|
||||
|
||||
## 性能优化
|
||||
|
||||
- 图片懒加载和压缩
|
||||
- 表单防抖处理
|
||||
- 组件按需加载
|
||||
- 样式按需引入
|
||||
|
||||
---
|
||||
|
||||
*此功能已完全按照设计稿实现，包括颜色、间距、样式等所有细节。*
|
||||
Reference in New Issue
Block a user