developer/template-10560
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(dealer/team): 实现经销商团队多层级查看功能

Browse Source 
- 添加层级栈管理，支持返回上一层功能
- 增加加载状态显示
- 优化团队成员列表展示，增加可查看下级成员的提示
- 添加返回上一层按钮
- 修复了一些与团队成员数据相关的小问题
This commit is contained in:
赵忠林
2025-09-05 23:36:13 +08:00
parent 408ff13590
commit 92662a869b
5 changed files with 169 additions and 87 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
config/env.ts
View File

@@ -2,7 +2,7 @@
export const ENV_CONFIG = {
// 开发环境
development: {
API_BASE_URL: 'http://127.0.0.1:9200/api',
API_BASE_URL: 'https://cms-api.websoft.top/api',
APP_NAME: '开发环境',
DEBUG: 'true',
},

18
src/components/UniversalScanner.tsx
View File

@@ -27,7 +27,7 @@ export function useUniversalScanner(props: UniversalScannerProps = {}) {
showToast = true
} = props;
const { user, isLoggedIn, isAdmin, loginUser } = useUser();
const { user, isLoggedIn, isAdmin } = useUser();
/**
* 启动扫码
@@ -95,7 +95,7 @@ export function useUniversalScanner(props: UniversalScannerProps = {}) {
} catch (error) {
console.error('处理扫码结果失败:', error);
const errorMsg = error.message || '处理扫码结果失败';
const errorMsg = error instanceof Error ? error.message : '处理扫码结果失败';
if (showToast) {
Taro.showToast({
title: errorMsg,
@@ -157,7 +157,6 @@ export function useUniversalScanner(props: UniversalScannerProps = {}) {
platform: 'miniprogram',
wechatInfo: {
openid: user?.openid,
unionid: user?.unionid,
nickname: user?.nickname || user?.realName,
avatar: user?.avatar
}
@@ -194,12 +193,13 @@ export function useUniversalScanner(props: UniversalScannerProps = {}) {
// 根据错误类型显示不同的提示
let errorMessage = '登录确认失败';
if (error.message?.includes('过期')) {
const errorMsg = error instanceof Error ? error.message : '';
if (errorMsg?.includes('过期')) {
errorMessage = '二维码已过期，请重新生成';
} else if (error.message?.includes('无效')) {
} else if (errorMsg?.includes('无效')) {
errorMessage = '无效的登录二维码';
} else if (error.message) {
errorMessage = error.message;
} else if (errorMsg) {
errorMessage = errorMsg;
}
if (showToast) {
@@ -294,10 +294,12 @@ export function useUniversalScanner(props: UniversalScannerProps = {}) {
*/
const UniversalScanner: React.FC<UniversalScannerProps> = (props) => {
const { startScan } = useUniversalScanner(props);
console.log(startScan,'startScan333')
// 这个组件主要提供Hook，不渲染UI
// 如果需要可以返回一个扫码按钮
return null;
};
export default UniversalScanner;

180
src/dealer/team/index.tsx
View File

@@ -1,6 +1,6 @@
import React, {useState, useEffect, useCallback} from 'react'
import {View, Text} from '@tarojs/components'
import {Space,Empty, Avatar} from '@nutui/nutui-react-taro'
import {Space,Empty, Avatar, Button} from '@nutui/nutui-react-taro'
import Taro from '@tarojs/taro'
import {useDealerUser} from '@/hooks/useDealerUser'
import {listShopDealerReferee} from '@/api/shop/shopDealerReferee'
@@ -24,16 +24,29 @@ interface TeamMemberWithStats extends ShopDealerReferee {
dealerPhone?: string;
}
// 层级信息接口
interface LevelInfo {
dealerId: number
dealerName?: string
level: number
}
const DealerTeam: React.FC = () => {
const [teamMembers, setTeamMembers] = useState<TeamMemberWithStats[]>([])
const {dealerUser} = useDealerUser()
const [dealerId, setDealerId] = useState<number>()
// 层级栈，用于支持返回上一层
const [levelStack, setLevelStack] = useState<LevelInfo[]>([])
const [loading, setLoading] = useState(false)
// 当前查看的用户名称
const [currentDealerName, setCurrentDealerName] = useState<string>('')
// 获取团队数据
const fetchTeamData = useCallback(async () => {
if (!dealerUser?.userId && !dealerId) return
try {
setLoading(true)
console.log(dealerId, 'dealerId>>>>>>>>>')
// 获取团队成员关系
const refereeResult = await listShopDealerReferee({
@@ -52,20 +65,30 @@ const DealerTeam: React.FC = () => {
joinTime: member.createTime
}))
// 并行获取每个成员的订单统计
// 并行获取每个成员的订单统计和下级成员数量
const memberStats = await Promise.all(
processedMembers.map(async (member) => {
try {
// 获取订单统计
const orderResult = await pageShopDealerOrder({
page: 1,
limit: 100,
userId: member.userId
})
// 获取下级成员数量
const subMembersResult = await listShopDealerReferee({
dealerId: member.userId
})
let orderCount = 0
let commission = '0.00'
let status: 'active' | 'inactive' = 'inactive'
if (orderResult?.list) {
const orders = orderResult.list
const orderCount = orders.length
const commission = orders.reduce((sum, order) => {
orderCount = orders.length
commission = orders.reduce((sum, order) => {
const levelCommission = member.level === 1 ? order.firstMoney :
member.level === 2 ? order.secondMoney :
order.thirdMoney
@@ -78,17 +101,18 @@ const DealerTeam: React.FC = () => {
const hasRecentOrder = orders.some(order =>
new Date(order.createTime || '') > thirtyDaysAgo
)
return {
...member,
orderCount,
commission,
status: hasRecentOrder ? 'active' as const : 'inactive' as const
}
status = hasRecentOrder ? 'active' : 'inactive'
}
return {
...member,
orderCount,
commission,
status,
subMembers: subMembersResult?.length || 0
}
return member
} catch (error) {
console.error(`获取成员${member.userId}订单失败:`, error)
console.error(`获取成员${member.userId}数据失败:`, error)
return member
}
})
@@ -103,12 +127,58 @@ const DealerTeam: React.FC = () => {
title: '获取团队数据失败',
icon: 'error'
})
} finally {
setLoading(false)
}
}, [dealerUser?.userId, dealerId])
// 查看下级成员
const getNextUser = (item: TeamMemberWithStats) => {
// 检查层级限制：最多只能查看2层（levelStack.length >= 1 表示已经是第2层了）
if (levelStack.length >= 1) {
return
}
// 如果没有下级成员，不允许点击
if (!item.subMembers || item.subMembers === 0) {
return
}
console.log('点击用户:', item.userId, item.name)
// 将当前层级信息推入栈中
const currentLevel: LevelInfo = {
dealerId: dealerId || dealerUser?.userId || 0,
dealerName: currentDealerName || (dealerId ? '上级' : dealerUser?.realName || '我'),
level: levelStack.length
}
setLevelStack(prev => [...prev, currentLevel])
// 切换到下级
setDealerId(item.userId)
setCurrentDealerName(item.nickname || item.dealerName || `用户${item.userId}`)
}
// 返回上一层
const goBack = () => {
if (levelStack.length === 0) {
// 如果栈为空，返回首页或上一页
Taro.navigateBack()
return
}
// 从栈中弹出上一层信息
const prevLevel = levelStack[levelStack.length - 1]
setLevelStack(prev => prev.slice(0, -1))
if (prevLevel.dealerId === (dealerUser?.userId || 0)) {
// 返回到根层级
setDealerId(undefined)
setCurrentDealerName('')
} else {
setDealerId(prevLevel.dealerId)
setCurrentDealerName(prevLevel.dealerName || '')
}
}
// 监听数据变化，获取团队数据
@@ -118,8 +188,25 @@ const DealerTeam: React.FC = () => {
}
}, [fetchTeamData])
const renderMemberItem = (member: TeamMemberWithStats) => (
<View key={member.id} className="bg-white rounded-lg p-4 mb-3 shadow-sm" onClick={() => getNextUser(member)}>
// 初始化当前用户名称
useEffect(() => {
if (!dealerId && dealerUser?.realName && !currentDealerName) {
setCurrentDealerName(dealerUser.realName)
}
}, [dealerUser, dealerId, currentDealerName])
const renderMemberItem = (member: TeamMemberWithStats) => {
// 判断是否可以点击：有下级成员且未达到层级限制
const canClick = member.subMembers && member.subMembers > 0 && levelStack.length < 1
return (
<View
key={member.id}
className={`bg-white rounded-lg p-4 mb-3 shadow-sm ${
canClick ? 'cursor-pointer' : 'cursor-default opacity-75'
}`}
onClick={() => getNextUser(member)}
>
<View className="flex items-center mb-3">
<Avatar
size="40"
@@ -131,22 +218,17 @@ const DealerTeam: React.FC = () => {
<Text className="font-semibold text-gray-800 mr-2">
{member.nickname}
</Text>
{/*{getLevelIcon(Number(member.level))}*/}
{/*<Text className="text-xs text-gray-500 ml-1">*/}
{/* {member.level}级*/}
{/*</Text>*/}
{canClick && (
<Text className="text-xs text-blue-500">可查看下级</Text>
)}
{!canClick && member.subMembers && member.subMembers > 0 && levelStack.length >= 1 && (
<Text className="text-xs text-red-500">已达层级限制</Text>
)}
</View>
<Text className="text-xs text-gray-500">
加入时间：{member.joinTime}
</Text>
</View>
{/*<View className="text-right">*/}
{/* <Tag*/}
{/* type={member.status === 'active' ? 'success' : 'default'}*/}
{/* >*/}
{/* {member.status === 'active' ? '活跃' : '沉默'}*/}
{/* </Tag>*/}
{/*</View>*/}
</View>
<View className="grid grid-cols-3 gap-4 text-center">
@@ -164,20 +246,48 @@ const DealerTeam: React.FC = () => {
</Space>
<Space>
<Text className="text-xs text-gray-500">团队成员</Text>
<Text className="text-sm font-semibold text-purple-600">
{member.subMembers}
<Text className={`text-sm font-semibold ${
canClick ? 'text-purple-600' : 'text-gray-400'
}`}>
{member.subMembers || 0}
</Text>
</Space>
</View>
</View>
)
)
}
const renderOverview = () => (
<View className="rounded-xl p-4">
{teamMembers.slice(0, 3).map(renderMemberItem)}
{teamMembers.map(renderMemberItem)}
</View>
)
// 渲染顶部导航栏
const renderHeader = () => {
if (levelStack.length === 0) return null
return (
<View className="bg-white p-4 mb-3 shadow-sm">
<View className="flex items-center justify-between">
<View className="flex items-center">
<Text className="text-lg font-semibold">
{currentDealerName}的团队成员
</Text>
</View>
<Button
size="small"
type="primary"
onClick={goBack}
className="bg-blue-500"
>
返回上一层
</Button>
</View>
</View>
)
}
if (!dealerUser) {
return (
<Space className="bg-gray-50 flex items-center justify-center">
@@ -191,7 +301,13 @@ const DealerTeam: React.FC = () => {
return (
<>
{teamMembers.length > 0 ? (
{renderHeader()}
{loading ? (
<View className="flex items-center justify-center mt-20">
<Text className="text-gray-500">加载中...</Text>
</View>
) : teamMembers.length > 0 ? (
renderOverview()
) : (
<View className="flex items-center justify-center mt-20">
@@ -206,4 +322,4 @@ const DealerTeam: React.FC = () => {
)
}
export default DealerTeam
export default DealerTeam;

54
src/pages/user/components/UserCard.tsx
View File

@@ -14,10 +14,10 @@ import {useUniversalScanner} from "@/components/UniversalScanner";
function UserCard() {
const {
user,
isAdmin,
isLoggedIn,
loginUser,
fetchUserInfo,
isAdmin,
getDisplayName,
getRoleName
} = useUser();
@@ -33,6 +33,7 @@ function UserCard() {
}
});
console.log(startScan, 'startScan')
useEffect(() => {
// Taro.getSetting：获取用户的当前设置。返回值中只会出现小程序已经向用户请求过的权限。
Taro.getSetting({
@@ -189,7 +190,7 @@ function UserCard() {
)
}
<View className={'user-info flex flex-col px-2'}>
<View className={'py-1 text-black font-bold'}>{getDisplayName()}</View>
<View className={'py-1 text-black font-bold max-w-28'}>{getDisplayName()}</View>
{isLoggedIn ? (
<View className={'grade text-xs py-1'}>
<Tag type="success" round>
@@ -201,51 +202,12 @@ function UserCard() {
) : ''}
</View>
</View>
{isLoggedIn && (
<View
onClick={() => {
console.log('扫码按钮被点击了');
// 检查 Taro.scanCode 是否存在
if (typeof Taro.scanCode === 'function') {
console.log('Taro.scanCode 函数存在');
// 直接测试 Taro.scanCode
Taro.scanCode({
success: (res) => {
console.log('直接扫码成功:', res.result);
Taro.showModal({
title: '扫码成功',
content: res.result,
showCancel: false
});
},
fail: (err) => {
console.error('直接扫码失败:', err);
Taro.showModal({
title: '扫码失败',
content: `错误信息: ${JSON.stringify(err)}`,
showCancel: false
});
}
});
} else {
console.error('Taro.scanCode 函数不存在');
Taro.showModal({
title: '错误',
content: 'Taro.scanCode 函数不存在，请检查 Taro 版本',
showCancel: false
});
}
}}
className="p-2 bg-blue-100 rounded cursor-pointer"
>
<Scan className="text-blue-500" />
<View className={'gap-2 flex items-center'}>
{isAdmin() && <Scan className={'text-gray-900'} size={24} onClick={() => navTo('/user/store/verification', true)} />}
<View className={'mr-4 text-sm px-3 py-1 text-black border-gray-400 border-solid border-2 rounded-3xl'}
onClick={() => navTo('/user/profile/profile', true)}>
{'个人资料'}
</View>
)}
<View className={'mr-4 text-sm px-3 py-1 text-black border-gray-400 border-solid border-2 rounded-3xl'}
onClick={() => navTo('/user/profile/profile', true)}>
{'个人资料'}
</View>
</View>
<View className={'flex justify-around mt-1'}>

2
src/user/store/verification.tsx
View File

@@ -29,6 +29,8 @@ const StoreVerification: React.FC = () => {
}
});
console.log(startScan,'startScan222')
// 页面加载时检查是否有传递的扫码数据
useEffect(() => {
const handlePageLoad = async () => {