feat(dealer/customer): 新增客户查询功能并优化客户添加流程- 新增客户查询页面,可按姓名、公司名称、户号、联系方式等条件搜索客户

- 优化客户添加流程,根据模式动态禁用表单字段
- 移除不必要的 API 调用,简化代码结构
- 新增 CustomerTrading 组件,用于展示客户列表和详细信息
This commit is contained in:
2025-09-03 14:04:42 +08:00
parent 74690052c5
commit e4d993548f
4 changed files with 151 additions and 14 deletions

View File

@@ -64,7 +64,8 @@ export default defineAppConfig({
"invite-stats/index",
"info",
"customer/index",
"customer/add"
"customer/add",
"customer/trading"
]
},
// {

View File

@@ -11,7 +11,6 @@ import {
addShopDealerApply, getShopDealerApply,
updateShopDealerApply
} from "@/api/shop/shopDealerApply";
import {getShopDealerUser} from "@/api/shop/shopDealerUser";
const AddShopDealerApply = () => {
const {user} = useUser()
@@ -60,17 +59,15 @@ const AddShopDealerApply = () => {
// 提交表单
const submitSucceed = async (values: any) => {
try {
// 准备提交的数据
const submitData = {
...values,
realName: values.realName || user?.nickname,
mobile: user?.phone,
refereeId: values.refereeId || FormData?.refereeId,
refereeId: Taro.getStorageSync('UserId'),
applyStatus: 10,
auditTime: undefined
};
await getShopDealerUser(submitData.refereeId);
// 如果是编辑模式添加现有申请的id
if (isEditMode && existingApply?.applyId) {
@@ -135,28 +132,28 @@ const AddShopDealerApply = () => {
<View className={'bg-gray-100 h-3'}></View>
<CellGroup style={{padding: '4px 0'}}>
<Form.Item name="dealerName" label="公司名称" initialValue={FormData?.dealerName} required>
<Input placeholder="公司名称" maxLength={10} disabled={true}/>
<Input placeholder="公司名称" maxLength={10} disabled={isEditMode}/>
</Form.Item>
<Form.Item name="realName" label="联系人" initialValue={FormData?.realName} required>
<Input placeholder="请输入联系人" disabled={true}/>
<Input placeholder="请输入联系人" disabled={isEditMode}/>
</Form.Item>
<Form.Item name="mobile" label="联系方式" initialValue={FormData?.mobile} required>
<Input placeholder="请输入手机号" disabled={true} maxLength={11}/>
<Input placeholder="请输入手机号" disabled={isEditMode} maxLength={11}/>
</Form.Item>
<Form.Item name="address" label="公司地址" initialValue={FormData?.address} required>
<Input placeholder="请输入详细地址" disabled={true}/>
<Input placeholder="请输入详细地址" disabled={isEditMode}/>
</Form.Item>
<Form.Item name="dealerCode" label="户号" initialValue={FormData?.dealerCode} required>
<Input placeholder="请填写户号" disabled={true}/>
<Input placeholder="请填写户号" disabled={isEditMode}/>
</Form.Item>
<Form.Item name="money" label="签约价格" initialValue={FormData?.money} required>
<Input placeholder="(元/兆瓦时)"/>
<Input placeholder="(元/兆瓦时)" disabled={false}/>
</Form.Item>
<Form.Item name="applyTime" label="签约时间" initialValue={FormData?.applyTime} required>
<Input placeholder="请选择签约时间" disabled={true}/>
<Input placeholder="请选择签约时间" disabled={isEditMode}/>
</Form.Item>
<Form.Item name="applyTime" label="合同日期" initialValue={FormData?.applyTime} required>
<Input placeholder="请选择合同生效起止时间" disabled={true}/>
<Form.Item name="contractDate" label="合同日期" initialValue={FormData?.applyTime} required>
<Input placeholder="请选择合同生效起止时间" disabled={isEditMode}/>
</Form.Item>
{/*<Form.Item name="refereeId" label="邀请人ID" initialValue={FormData?.refereeId} required>*/}
{/* <Input placeholder="邀请人ID"/>*/}

View File

@@ -0,0 +1,3 @@
export default definePageConfig({
navigationBarTitleText: '入市查询'
})

View File

@@ -0,0 +1,136 @@
import {useState, useEffect, useCallback} from 'react'
import {View, Text} from '@tarojs/components'
import {Loading, Space} from '@nutui/nutui-react-taro'
import type {ShopDealerApply as UserType} from "@/api/shop/shopDealerApply/model";
import {
CustomerStatus,
mapApplyStatusToCustomerStatus,
} from '@/utils/customerStatus';
import navTo from "@/utils/common";
import {pageShopDealerApply} from "@/api/shop/shopDealerApply";
// 扩展User类型添加客户状态
interface CustomerUser extends UserType {
customerStatus?: CustomerStatus;
}
const CustomerTrading = () => {
const [list, setList] = useState<CustomerUser[]>([])
const [loading, setLoading] = useState<boolean>(false)
const [searchValue, _] = useState<string>('')
// 获取客户数据
const fetchCustomerData = useCallback(async () => {
setLoading(true);
try {
// 构建API参数根据状态筛选
const params: any = {};
const res = await pageShopDealerApply(params);
if (res?.list) {
// 正确映射状态
const mappedList = res.list.map(customer => ({
...customer,
customerStatus: mapApplyStatusToCustomerStatus(customer.applyStatus || 10)
}));
setList(mappedList);
}
} catch (error) {
console.error('获取客户数据失败:', error);
} finally {
setLoading(false);
}
}, []);
// 根据搜索条件筛选数据状态筛选已在API层面处理
const getFilteredList = () => {
let filteredList = list;
// 按搜索关键词筛选
if (searchValue.trim()) {
const keyword = searchValue.trim().toLowerCase();
filteredList = filteredList.filter(customer =>
(customer.realName && customer.realName.toLowerCase().includes(keyword)) ||
(customer.dealerName && customer.dealerName.toLowerCase().includes(keyword)) ||
(customer.dealerCode && customer.dealerCode.toLowerCase().includes(keyword)) ||
(customer.mobile && customer.mobile.includes(keyword)) ||
(customer.userId && customer.userId.toString().includes(keyword))
);
}
return filteredList;
};
// 初始化数据
useEffect(() => {
fetchCustomerData().then();
}, [fetchCustomerData]);
// 当activeTab变化时重新获取数据
useEffect(() => {
fetchCustomerData().then();
}, []);
// 渲染客户项
const renderCustomerItem = (customer: CustomerUser) => (
<View key={customer.userId} className="bg-white rounded-lg p-4 mb-3 shadow-sm">
<View className="flex items-center"
onClick={() => navTo(`/dealer/customer/add?id=${customer.applyId}`, true)}>
<View className="flex-1">
<View className="flex items-center justify-between mb-1">
<Text className="font-semibold text-gray-800 mr-2">
{customer.dealerName}
</Text>
</View>
<Space direction={'vertical'}>
<Text className="text-xs text-gray-500">{customer.dealerCode}</Text>
<Text className="text-xs text-gray-500">
{customer.createTime}
</Text>
</Space>
</View>
</View>
</View>
);
// 渲染客户列表
const renderCustomerList = () => {
const filteredList = getFilteredList();
if (loading) {
return (
<Space className="flex items-center justify-center py-8">
<Loading/>
<Text className="text-gray-500 mt-2">...</Text>
</Space>
);
}
if (filteredList.length === 0) {
return (
<View className="flex items-center justify-center py-8">
<Text className="text-gray-500"></Text>
</View>
);
}
return (
<View className="p-4">
{filteredList.map(renderCustomerItem)}
</View>
);
};
return (
<View className="min-h-screen bg-gray-50">
{/* 客户列表 */}
{renderCustomerList()}
</View>
);
};
export default CustomerTrading;