赵忠林
e57fe8810a
- 在客户签约页面实现签约时间和合同日期的选择功能 - 使用 NutUI 的 DatePicker组件提供友好的日期选择体验- 添加日期格式化和选择处理逻辑 - 优化界面显示，增加日历图标提示和禁用编辑模式 - 确保日期数据正确提交和持久化
210 lines
6.5 KiB
Markdown
210 lines
6.5 KiB
Markdown
# 签约时间和合同日期选择功能实现说明
|
|
|
|
## 功能概述
|
|
为客户签约页面实现了签约时间和合同日期的选择功能，使用 NutUI 的 DatePicker 组件提供友好的日期选择体验。
|
|
|
|
## 实现特性
|
|
|
|
### ✅ 日期选择器
|
|
- **签约时间选择**：支持选择具体的签约日期
|
|
- **合同日期选择**：支持选择合同生效日期
|
|
- **弹窗式选择**：使用 Popup + DatePicker 组合，提供良好的用户体验
|
|
|
|
### ✅ 界面优化
|
|
- **图标提示**：使用日历图标提示用户可以选择日期
|
|
- **状态显示**：清晰显示已选择的日期或提示文本
|
|
- **禁用状态**：编辑模式下禁用日期选择，防止误操作
|
|
|
|
### ✅ 数据处理
|
|
- **格式化**：自动格式化日期为 YYYY-MM-DD 格式
|
|
- **表单同步**：选择日期后自动更新表单数据
|
|
- **数据持久化**：正确保存和加载日期数据
|
|
|
|
## 技术实现
|
|
|
|
### 1. 组件导入
|
|
```typescript
|
|
import {Loading, CellGroup, Cell, Input, Form, DatePicker, Popup} from '@nutui/nutui-react-taro'
|
|
import {Edit, Calendar} from '@nutui/icons-react-taro'
|
|
```
|
|
|
|
### 2. 状态管理
|
|
```typescript
|
|
// 日期选择器状态
|
|
const [showApplyTimePicker, setShowApplyTimePicker] = useState<boolean>(false)
|
|
const [showContractDatePicker, setShowContractDatePicker] = useState<boolean>(false)
|
|
const [applyTime, setApplyTime] = useState<string>('')
|
|
const [contractDate, setContractDate] = useState<string>('')
|
|
```
|
|
|
|
### 3. 日期格式化函数
|
|
```typescript
|
|
// 格式化日期为 YYYY-MM-DD
|
|
const formatDate = (date: Date): string => {
|
|
const year = date.getFullYear()
|
|
const month = String(date.getMonth() + 1).padStart(2, '0')
|
|
const day = String(date.getDate()).padStart(2, '0')
|
|
return `${year}-${month}-${day}`
|
|
}
|
|
```
|
|
|
|
### 4. 日期选择处理
|
|
```typescript
|
|
// 处理签约时间选择
|
|
const handleApplyTimeConfirm = (options: any, values: Date[]) => {
|
|
const selectedDate = values[0]
|
|
const formattedDate = formatDate(selectedDate)
|
|
setApplyTime(formattedDate)
|
|
setShowApplyTimePicker(false)
|
|
|
|
// 更新表单数据
|
|
if (formRef.current) {
|
|
formRef.current.setFieldsValue({
|
|
applyTime: formattedDate
|
|
})
|
|
}
|
|
}
|
|
```
|
|
|
|
### 5. 界面组件
|
|
```typescript
|
|
<Form.Item name="applyTime" label="签约时间" initialValue={FormData?.applyTime} required>
|
|
<View
|
|
className="flex items-center justify-between py-2"
|
|
onClick={() => !isEditMode && setShowApplyTimePicker(true)}
|
|
style={{
|
|
cursor: isEditMode ? 'not-allowed' : 'pointer',
|
|
opacity: isEditMode ? 0.6 : 1
|
|
}}
|
|
>
|
|
<View className="flex items-center">
|
|
<Calendar size={16} color="#999" className="mr-2" />
|
|
<Text style={{ color: applyTime ? '#333' : '#999' }}>
|
|
{applyTime || '请选择签约时间'}
|
|
</Text>
|
|
</View>
|
|
</View>
|
|
</Form.Item>
|
|
```
|
|
|
|
### 6. 弹窗选择器
|
|
```typescript
|
|
{/* 签约时间选择器 */}
|
|
<Popup
|
|
visible={showApplyTimePicker}
|
|
position="bottom"
|
|
onClose={() => setShowApplyTimePicker(false)}
|
|
>
|
|
<DatePicker
|
|
title="选择签约时间"
|
|
type="date"
|
|
onConfirm={handleApplyTimeConfirm}
|
|
onClose={() => setShowApplyTimePicker(false)}
|
|
/>
|
|
</Popup>
|
|
```
|
|
|
|
## 核心功能
|
|
|
|
### 📅 日期选择流程
|
|
1. **点击触发**：用户点击日期字段
|
|
2. **弹窗显示**：底部弹出日期选择器
|
|
3. **日期选择**：用户滚动选择年月日
|
|
4. **确认选择**：点击确认按钮
|
|
5. **数据更新**：自动更新界面显示和表单数据
|
|
6. **弹窗关闭**：选择完成后自动关闭
|
|
|
|
### 🔒 编辑模式控制
|
|
- **新增模式**：可以自由选择日期
|
|
- **编辑模式**：禁用日期选择，防止修改已确定的日期
|
|
- **视觉反馈**：通过透明度和鼠标样式提示状态
|
|
|
|
### 💾 数据同步
|
|
- **表单同步**：选择日期后立即更新表单字段值
|
|
- **状态同步**：本地状态与表单数据保持一致
|
|
- **提交处理**：确保日期数据正确提交到服务器
|
|
|
|
## 用户体验优化
|
|
|
|
### 🎨 界面设计
|
|
- **图标指示**：日历图标清晰表明可以选择日期
|
|
- **状态区分**：已选择日期显示为深色，提示文本显示为灰色
|
|
- **点击区域**：整个字段区域都可点击，提高操作便利性
|
|
|
|
### 📱 交互体验
|
|
- **底部弹窗**：符合移动端操作习惯
|
|
- **滚动选择**：直观的日期滚动选择方式
|
|
- **即时反馈**：选择后立即显示结果
|
|
|
|
### 🚫 错误防护
|
|
- **编辑限制**：编辑模式下禁用选择，避免误操作
|
|
- **数据验证**：确保日期格式正确
|
|
- **状态管理**：防止状态不一致问题
|
|
|
|
## 文件修改清单
|
|
|
|
### src/dealer/customer/add.tsx
|
|
1. **导入组件**：添加 DatePicker、Popup、Calendar 组件
|
|
2. **状态管理**：添加日期选择器相关状态
|
|
3. **处理函数**：实现日期格式化和选择处理逻辑
|
|
4. **界面更新**：替换输入框为可点击的日期选择区域
|
|
5. **弹窗组件**：添加日期选择器弹窗
|
|
6. **数据初始化**：在 reload 函数中初始化日期数据
|
|
7. **提交处理**：确保日期数据正确提交
|
|
|
|
## 技术栈
|
|
|
|
### 核心技术
|
|
- **React + TypeScript**：类型安全的组件开发
|
|
- **Taro 框架**：跨平台小程序开发
|
|
- **NutUI 组件库**：提供 DatePicker 和 Popup 组件
|
|
|
|
### 关键组件
|
|
- **DatePicker**：日期选择核心组件
|
|
- **Popup**：弹窗容器组件
|
|
- **Calendar**：日历图标组件
|
|
- **Form.Item**：表单项容器
|
|
|
|
## 使用方式
|
|
|
|
### 用户操作流程
|
|
1. 进入客户签约页面
|
|
2. 点击"签约时间"字段
|
|
3. 在弹出的日期选择器中选择日期
|
|
4. 点击确认完成选择
|
|
5. 重复步骤选择"合同日期"
|
|
6. 填写其他信息后提交表单
|
|
|
|
### 开发者扩展
|
|
- 可以轻松添加更多日期字段
|
|
- 支持自定义日期格式
|
|
- 可以添加日期范围限制
|
|
- 支持国际化配置
|
|
|
|
## 注意事项
|
|
|
|
### 兼容性
|
|
- 确保 NutUI 版本支持 DatePicker 组件
|
|
- 测试不同设备上的显示效果
|
|
- 验证日期格式在不同环境下的一致性
|
|
|
|
### 性能优化
|
|
- 合理使用 useState 避免不必要的重渲染
|
|
- 日期格式化函数可以考虑缓存
|
|
- 弹窗组件按需渲染
|
|
|
|
### 用户体验
|
|
- 提供清晰的操作提示
|
|
- 确保在编辑模式下的正确禁用
|
|
- 考虑添加日期范围验证
|
|
|
|
## 总结
|
|
成功实现了签约时间和合同日期的选择功能，提供了：
|
|
|
|
1. **直观的操作界面**：图标提示 + 点击选择
|
|
2. **友好的选择体验**：底部弹窗 + 滚动选择
|
|
3. **完整的数据处理**：格式化 + 同步 + 提交
|
|
4. **合理的状态控制**：编辑模式禁用 + 视觉反馈
|
|
|
|
这个实现为用户提供了便捷的日期选择体验，同时保证了数据的准确性和一致性。
|