feat(dealer): 优化客户列表展示和搜索功能

-调整客户信息展示布局,增加报备人和推荐人名称- 添加编辑跟进情况功能,只有报备人可编辑
-优化搜索功能,增加最小字符限制
- 修复昵称字段大小写错误
This commit is contained in:
2025-09-15 23:40:25 +08:00
parent 08354c5adf
commit c17957122e
3 changed files with 82 additions and 15 deletions

View File

@@ -8,8 +8,6 @@ export interface ShopDealerApply {
applyId?: number;
// 用户ID
userId?: number;
// 昵称
nickname?: string;
// 姓名
realName?: string;
// 分销商名称
@@ -46,6 +44,10 @@ export interface ShopDealerApply {
expirationTime?: string;
// 备注
comments?: string;
// 昵称
nickName?: string;
// 推荐人名称
refereeName?: string;
}
/**

View File

@@ -2,7 +2,7 @@ import {useState, useEffect, useCallback} from 'react'
import {View, Text} from '@tarojs/components'
import Taro, {useDidShow} from '@tarojs/taro'
import {Loading, InfiniteLoading, Empty, Space, Tabs, TabPane, Tag, Button} from '@nutui/nutui-react-taro'
import {Phone} from '@nutui/icons-react-taro'
import {Phone, AngleDoubleLeft} from '@nutui/icons-react-taro'
import type {ShopDealerApply, ShopDealerApply as UserType} from "@/api/shop/shopDealerApply/model";
import {
CustomerStatus,
@@ -60,6 +60,51 @@ const CustomerIndex = () => {
});
};
// 编辑跟进情况
const editComments = (customer: CustomerUser) => {
Taro.showModal({
title: '编辑跟进情况',
editable: true,
placeholderText: '请输入跟进情况',
content: customer.comments || '',
success: async (res) => {
if (res.confirm && res.content !== undefined) {
try {
// 更新跟进情况
await updateShopDealerApply({
...customer,
comments: res.content.trim()
});
Taro.showToast({
title: '更新成功',
icon: 'success'
});
// 刷新列表
setList([]);
setPage(1);
setHasMore(true);
fetchCustomerData(activeTab, true);
} catch (error) {
console.error('更新跟进情况失败:', error);
Taro.showToast({
title: '更新失败,请重试',
icon: 'error'
});
}
}
}
});
};
// 检查是否有编辑权限
const canEditComments = (customer: CustomerUser): boolean => {
const currentUserId = Taro.getStorageSync('UserId');
// 只有客户的报备人可以编辑跟进情况
return customer.userId === currentUserId;
};
// 计算剩余保护天数(基于过期时间)
const calculateProtectDays = (expirationTime?: string, applyTime?: string): number => {
try {
@@ -321,7 +366,7 @@ const CustomerIndex = () => {
}}>{customer.mobile}</Text>
<View className="flex items-center ml-2">
<Phone
size={14}
size={12}
className="text-green-500 mr-2"
onClick={(e) => {
e.stopPropagation();
@@ -339,9 +384,6 @@ const CustomerIndex = () => {
</Text>
</View>
</View>
{/* 显示 comments 字段 */}
<Space><Text className="text-xs text-gray-500">{customer.comments || '暂无'}</Text><Text className={'text-xs text-blue-500 cursor-pointer'}></Text></Space>
{customer.userId && <Text className="text-xs text-gray-500">{ customer?.nickname }</Text>}
<Text className="text-xs text-gray-500">
{customer.createTime}
</Text>
@@ -350,7 +392,7 @@ const CustomerIndex = () => {
{/* 保护天数显示 */}
{customer.applyStatus === 10 && (
<View className="flex items-center mt-1">
<View className="flex items-center my-1">
<Text className="text-xs text-gray-500 mr-2"></Text>
{customer.protectDays && customer.protectDays > 0 ? (
<Text className={`text-xs px-2 py-1 rounded ${
@@ -369,6 +411,28 @@ const CustomerIndex = () => {
)}
</View>
)}
<View className={'flex items-center gap-2'}>
<Text className="text-xs text-gray-500">{customer?.nickName}</Text>
<AngleDoubleLeft size={12} className={'text-blue-500'} />
<Text className={'text-xs text-gray-500'}>{customer?.refereeName}</Text>
</View>
{/* 显示 comments 字段 */}
<Space className="flex items-center">
<Text className="text-xs text-gray-500">{customer.comments || '暂无'}</Text>
{canEditComments(customer) && (
<Text
className="text-xs text-blue-500 cursor-pointer"
onClick={(e) => {
e.stopPropagation();
editComments(customer);
}}
>
</Text>
)}
</Space>
</View>
</View>

View File

@@ -1,4 +1,4 @@
import {useState, useEffect, useCallback} from 'react'
import {useState, useCallback} from 'react'
import {View, Text} from '@tarojs/components'
import Taro from '@tarojs/taro'
import {Loading, InfiniteLoading, Empty, Space, SearchBar} from '@nutui/nutui-react-taro'
@@ -88,13 +88,15 @@ const CustomerTrading = () => {
return list;
};
// 初始化数据
useEffect(() => {
fetchCustomerData(true).then();
}, []);
// 搜索处理函数
const handleSearch = (keyword: string) => {
if(keyword.length < 3){
Taro.showToast({
title: '请输入至少3个字符',
icon: 'none'
});
return;
}
setSearchValue(keyword);
setList([]);
setPage(1);
@@ -190,7 +192,6 @@ const CustomerTrading = () => {
<SearchBar
placeholder="请输入搜索关键词"
value={searchValue}
onChange={(value) => setSearchValue(value)}
onSearch={(value) => handleSearch(value)}
onClear={() => handleClearSearch()}
/>