feat(dealer): 添加签约时间和合同日期选择功能

- 在客户签约页面实现签约时间和合同日期的选择功能
- 使用 NutUI 的 DatePicker组件提供友好的日期选择体验- 添加日期格式化和选择处理逻辑
- 优化界面显示,增加日历图标提示和禁用编辑模式
- 确保日期数据正确提交和持久化
This commit is contained in:
2025-09-06 11:13:49 +08:00
parent d26208ee39
commit e57fe8810a
5 changed files with 506 additions and 10 deletions

View File

@@ -25,7 +25,9 @@ export interface ShopDealerApply {
// 申请方式(10需后台审核 20无需审核)
applyType?: number;
// 申请时间
applyTime?: number;
applyTime?: string;
// 签单时间
contractTime?: string;
// 审核状态 (10待审核 20审核通过 30驳回)
applyStatus?: number;
// 审核时间

View File

@@ -1,9 +1,9 @@
import {useEffect, useState, useRef} from "react";
import {Loading, CellGroup, Cell, Input, Form} from '@nutui/nutui-react-taro'
import {Edit} from '@nutui/icons-react-taro'
import {Loading, CellGroup, Cell, Input, Form, DatePicker, Popup} from '@nutui/nutui-react-taro'
import {Edit, Calendar} from '@nutui/icons-react-taro'
import Taro from '@tarojs/taro'
import {useRouter} from '@tarojs/taro'
import {View} from '@tarojs/components'
import {View,Text} from '@tarojs/components'
import FixedButton from "@/components/FixedButton";
import {useUser} from "@/hooks/useUser";
import {ShopDealerApply} from "@/api/shop/shopDealerApply/model";
@@ -21,6 +21,12 @@ const AddShopDealerApply = () => {
const [isEditMode, setIsEditMode] = useState<boolean>(false)
const [existingApply, setExistingApply] = useState<ShopDealerApply | null>(null)
// 日期选择器状态
const [showApplyTimePicker, setShowApplyTimePicker] = useState<boolean>(false)
const [showContractDatePicker, setShowContractDatePicker] = useState<boolean>(false)
const [applyTime, setApplyTime] = useState<string>('')
const [contractDate, setContractDate] = useState<string>('')
// 获取审核状态文字
const getApplyStatusText = (status?: number) => {
switch (status) {
@@ -35,6 +41,44 @@ const AddShopDealerApply = () => {
}
}
// 格式化日期为 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}`
}
// 处理签约时间选择
const handleApplyTimeConfirm = (_: any, values: Date[]) => {
const selectedDate = values[0]
const formattedDate = formatDate(selectedDate)
setApplyTime(formattedDate)
setShowApplyTimePicker(false)
// 更新表单数据
if (formRef.current) {
formRef.current.setFieldsValue({
applyTime: formattedDate
})
}
}
// 处理合同日期选择
const handleContractDateConfirm = (_: any, values: Date[]) => {
const selectedDate = values[0]
const formattedDate = formatDate(selectedDate)
setContractDate(formattedDate)
setShowContractDatePicker(false)
// 更新表单数据
if (formRef.current) {
formRef.current.setFieldsValue({
contractDate: formattedDate
})
}
}
const reload = async () => {
if(!params.id){
return false;
@@ -46,6 +90,15 @@ const AddShopDealerApply = () => {
setFormData(dealerApply)
setIsEditMode(true);
setExistingApply(dealerApply)
// 初始化日期数据
if (dealerApply.applyTime) {
setApplyTime(dealerApply.applyTime)
}
if (dealerApply.contractTime) {
setContractDate(dealerApply.contractTime)
}
Taro.setNavigationBarTitle({title: '签约'})
}
} catch (error) {
@@ -66,7 +119,10 @@ const AddShopDealerApply = () => {
mobile: user?.phone,
refereeId: 33534,
applyStatus: 10,
auditTime: undefined
auditTime: undefined,
// 确保日期数据正确提交
applyTime: applyTime || values.applyTime,
contractDate: contractDate || values.contractDate
};
// 如果是编辑模式添加现有申请的id
@@ -150,16 +206,73 @@ const AddShopDealerApply = () => {
<Input placeholder="(元/兆瓦时)" disabled={false}/>
</Form.Item>
<Form.Item name="applyTime" label="签约时间" initialValue={FormData?.applyTime} required>
<Input placeholder="请选择签约时间" disabled={isEditMode}/>
<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>
<Form.Item name="contractDate" label="合同日期" initialValue={FormData?.applyTime} required>
<Input placeholder="请选择合同生效起止时间" disabled={isEditMode}/>
<Form.Item name="contractDate" label="合同日期" initialValue={FormData?.contractTime} required>
<View
className="flex items-center justify-between py-2"
onClick={() => !isEditMode && setShowContractDatePicker(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: contractDate ? '#333' : '#999' }}>
{contractDate || '请选择合同生效起止时间'}
</Text>
</View>
</View>
</Form.Item>
{/*<Form.Item name="refereeId" label="邀请人ID" initialValue={FormData?.refereeId} required>*/}
{/* <Input placeholder="邀请人ID"/>*/}
{/*</Form.Item>*/}
</CellGroup>
</Form>
{/* 签约时间选择器 */}
<Popup
visible={showApplyTimePicker}
position="bottom"
onClose={() => setShowApplyTimePicker(false)}
>
<DatePicker
title="选择签约时间"
type="date"
onConfirm={() => handleApplyTimeConfirm}
onClose={() => setShowApplyTimePicker(false)}
/>
</Popup>
{/* 合同日期选择器 */}
<Popup
visible={showContractDatePicker}
position="bottom"
onClose={() => setShowContractDatePicker(false)}
>
<DatePicker
title="选择合同日期"
type="date"
onConfirm={() => handleContractDateConfirm}
onClose={() => setShowContractDatePicker(false)}
/>
</Popup>
{/* 审核状态显示(仅在编辑模式下显示) */}
{isEditMode && (
<CellGroup>

View File

@@ -189,6 +189,13 @@ const Header = (props: any) => {
reload().then()
}, [])
// 监听用户信息变化,当用户信息更新后重新检查
useEffect(() => {
if (isLoggedIn && user) {
console.log('用户信息已更新:', user);
}
}, [user, isLoggedIn])
return (
<>
<View className={'fixed top-0 header-bg'} style={{
@@ -207,9 +214,9 @@ const Header = (props: any) => {
onClick={() => navTo(`/user/profile/profile`, true)}>
<Avatar
size="22"
src={user?.avatar}
src={user?.avatar || Taro.getStorageSync('Avatar')}
/>
<Text className={'text-white'}>{user?.nickname || '已登录'}</Text>
<Text className={'text-white'}>{user?.nickname || Taro.getStorageSync('Nickname') || '已登录'}</Text>
<TriangleDown className={'text-white'} size={9}/>
</View>
) : (