feat(dealer): 添加客户列表功能并优化邀请流程
- 新增客户列表页面，实现客户数据获取和筛选功能 - 添加客户状态管理工具函数 - 优化邀请流程，支持绑定推荐关系 - 调整提现功能，增加调试组件 - 修复申请经销商功能中的推荐人ID逻辑
This commit is contained in:
@@ -4,54 +4,14 @@ import {View, Text} from '@tarojs/components';
|
||||
import {Space, Tabs, Button, Empty} from '@nutui/nutui-react-taro';
|
||||
import {Phone} from '@nutui/icons-react-taro';
|
||||
import './list.scss';
|
||||
import {pageUsers} from "@/api/system/user";
|
||||
import {ShopDealerUser} from "@/api/shop/shopDealerUser/model";
|
||||
|
||||
// 客户数据类型定义
|
||||
interface Customer {
|
||||
id: string;
|
||||
companyName: string;
|
||||
contactPerson: string;
|
||||
phone: string;
|
||||
address: string;
|
||||
addTime: string;
|
||||
status: 'pending' | 'confirmed' | 'cancelled';
|
||||
}
|
||||
|
||||
const CustomerList = () => {
|
||||
const [statusBarHeight, setStatusBarHeight] = useState<number>(0);
|
||||
const [activeTab, setActiveTab] = useState<string>('all');
|
||||
const [customers, setCustomers] = useState<Customer[]>([]);
|
||||
const [loading, setLoading] = useState<boolean>(false);
|
||||
|
||||
// 模拟客户数据
|
||||
const mockCustomers: Customer[] = [
|
||||
{
|
||||
id: '1',
|
||||
companyName: '广州雅虎信息科技公司',
|
||||
contactPerson: 'XXX',
|
||||
phone: '13882223433',
|
||||
address: '广西南宁市良庆区五象大道401号五象新城1号楼1226室XXXXXX',
|
||||
addTime: '2025-08-15 10:23:33',
|
||||
status: 'pending'
|
||||
},
|
||||
{
|
||||
id: '2',
|
||||
companyName: '广州雅虎信息科技公司',
|
||||
contactPerson: 'XXX',
|
||||
phone: '13882223433',
|
||||
address: '广西南宁市良庆区五象大道401号五象新城1号楼1226室XXXXXX',
|
||||
addTime: '2025-08-15 10:23:33',
|
||||
status: 'confirmed'
|
||||
},
|
||||
{
|
||||
id: '3',
|
||||
companyName: '广州雅虎信息科技公司',
|
||||
contactPerson: 'XXX',
|
||||
phone: '13882223433',
|
||||
address: '广西南宁市良庆区五象大道401号五象新城1号楼1226室XXXXXX',
|
||||
addTime: '2025-08-15 10:23:33',
|
||||
status: 'cancelled'
|
||||
}
|
||||
];
|
||||
const [list, setList] = useState<ShopDealerUser[]>([]);
|
||||
|
||||
const tabList = [
|
||||
{title: '全部', value: 'all'},
|
||||
@@ -62,18 +22,26 @@ const CustomerList = () => {
|
||||
|
||||
const reload = async () => {
|
||||
setLoading(true);
|
||||
// 模拟API调用
|
||||
setTimeout(() => {
|
||||
setCustomers(mockCustomers);
|
||||
try {
|
||||
const res = await pageUsers({status: 0});
|
||||
console.log(res, '客户列表');
|
||||
if(res?.list){
|
||||
// 为每个用户添加默认状态
|
||||
const customersWithStatus: ShopDealerUser[] = res.list.map(user => ({
|
||||
...user,
|
||||
status: 'pending' // 默认状态为跟进中
|
||||
}));
|
||||
setList(customersWithStatus);
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('获取客户列表失败:', error);
|
||||
Taro.showToast({
|
||||
title: '获取客户列表失败',
|
||||
icon: 'error'
|
||||
});
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}, 500);
|
||||
};
|
||||
|
||||
const getFilteredCustomers = () => {
|
||||
if (activeTab === 'all') {
|
||||
return customers;
|
||||
}
|
||||
return customers.filter(customer => customer.status === activeTab);
|
||||
};
|
||||
|
||||
const getStatusText = (status: string) => {
|
||||
@@ -108,12 +76,12 @@ const CustomerList = () => {
|
||||
});
|
||||
};
|
||||
|
||||
const handleAction = (customer: Customer, action: 'sign' | 'cancel' | 'detail') => {
|
||||
const handleAction = (customer: ShopDealerUser, action: 'sign' | 'cancel' | 'detail') => {
|
||||
switch (action) {
|
||||
case 'sign':
|
||||
// 跳转到签约页面
|
||||
Taro.navigateTo({
|
||||
url: `/pages/customer/sign?customerId=${customer.id}`
|
||||
url: `/pages/customer/sign?customerId=${customer.userId}`
|
||||
});
|
||||
break;
|
||||
case 'cancel':
|
||||
@@ -136,7 +104,7 @@ const CustomerList = () => {
|
||||
case 'detail':
|
||||
// 跳转到客户详情页面
|
||||
Taro.navigateTo({
|
||||
url: `/pages/customer/detail?customerId=${customer.id}`
|
||||
url: `/pages/customer/detail?customerId=${customer.userId}`
|
||||
});
|
||||
break;
|
||||
}
|
||||
@@ -149,19 +117,7 @@ const CustomerList = () => {
|
||||
});
|
||||
};
|
||||
|
||||
const handleTrading = () => {
|
||||
// 跳转到入市交易页面
|
||||
Taro.navigateTo({
|
||||
url: '/pages/customer/trading'
|
||||
});
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
Taro.getSystemInfo({
|
||||
success: (res) => {
|
||||
setStatusBarHeight(Number(res.statusBarHeight));
|
||||
},
|
||||
});
|
||||
reload().then();
|
||||
}, []);
|
||||
|
||||
@@ -190,67 +146,67 @@ const CustomerList = () => {
|
||||
<View className="loading-container">
|
||||
<Text>加载中...</Text>
|
||||
</View>
|
||||
) : getFilteredCustomers().length > 0 ? (
|
||||
getFilteredCustomers().map((customer) => (
|
||||
<View key={customer.id} className="customer-item">
|
||||
) : list.length > 0 ? (
|
||||
list.map((record) => (
|
||||
<View key={record.userId} className="customer-item">
|
||||
<View className="customer-header">
|
||||
<Text className="company-name">{customer.companyName}</Text>
|
||||
<Text className="company-name">{record.realName || '未知客户'}</Text>
|
||||
<Text
|
||||
className="status-tag"
|
||||
style={{color: getStatusColor(customer.status)}}
|
||||
style={{color: getStatusColor('pending')}}
|
||||
>
|
||||
{getStatusText(customer.status)}
|
||||
{getStatusText('pending')}
|
||||
</Text>
|
||||
</View>
|
||||
|
||||
<View className="customer-info">
|
||||
<View className="info-row">
|
||||
<Text className="label">联系人：</Text>
|
||||
<Text className="value">{customer.contactPerson}</Text>
|
||||
<Text className="value">{record.realName || '未知'}</Text>
|
||||
<Text className="label contact-label">联系电话：</Text>
|
||||
<Text className="value">{customer.phone}</Text>
|
||||
<Text className="value">{record.mobile || '未提供'}</Text>
|
||||
<Phone
|
||||
size={14}
|
||||
className={'text-green-500'}
|
||||
onClick={() => handleCall(customer.phone)}
|
||||
onClick={() => handleCall(`${record?.mobile}`)}
|
||||
/>
|
||||
</View>
|
||||
|
||||
<View className="address-row">
|
||||
<Text className="label">地址：</Text>
|
||||
<Text className="address">{customer.address}</Text>
|
||||
<Text className="address">{'地址未提供'}</Text>
|
||||
</View>
|
||||
|
||||
<View className="time-row">
|
||||
<Text className="time">添加时间：{customer.addTime}</Text>
|
||||
<Text className="time">添加时间：{record.createTime || '未知'}</Text>
|
||||
</View>
|
||||
</View>
|
||||
|
||||
{/* 操作按钮 */}
|
||||
<View className="action-buttons">
|
||||
{customer.status === 'pending' && (
|
||||
{record.payPassword === 'pending' && (
|
||||
<Space>
|
||||
<Button
|
||||
className="action-btn sign-btn"
|
||||
size="small"
|
||||
onClick={() => handleAction(customer, 'sign')}
|
||||
onClick={() => handleAction(record, 'sign')}
|
||||
>
|
||||
签约
|
||||
</Button>
|
||||
<Button
|
||||
className="action-btn cancel-btn"
|
||||
size="small"
|
||||
onClick={() => handleAction(customer, 'cancel')}
|
||||
onClick={() => handleAction(record, 'cancel')}
|
||||
>
|
||||
取消
|
||||
</Button>
|
||||
</Space>
|
||||
)}
|
||||
{customer.status === 'confirmed' && (
|
||||
{record.payPassword === 'confirmed' && (
|
||||
<Button
|
||||
className="action-btn detail-btn"
|
||||
size="small"
|
||||
onClick={() => handleAction(customer, 'detail')}
|
||||
onClick={() => handleAction(record, 'detail')}
|
||||
>
|
||||
查看详情
|
||||
</Button>
|
||||
|
||||
Reference in New Issue
Block a user