feat(dealer): 更新分销商资金明细页面实现

- 重构资金明细页面，从列表模式改为详情模式
- 修改API模型字段，将orderId改为orderNo
- 移除下拉刷新和滚动加载功能- 添加路由参数支持，通过id获取具体资金记录-优化UI展示，突出金额和关键信息
- 更新相关页面引用和导出名称

src/api/shop/shopDealerCapital/model/index.ts

@@ -8,8 +8,8 @@ export interface ShopDealerCapital {
   id?: number;
   // 分销商用户ID
   userId?: number;
-  // 订单ID
+  // 订单编号
-  orderId?: number;
+  orderNo?: string;
   // 资金流动类型 (10佣金收入 20提现支出 30转账支出 40转账收入)
   flowType?: number;
   // 金额
@@ -31,5 +31,6 @@ export interface ShopDealerCapital {
  */
 export interface ShopDealerCapitalParam extends PageParam {
   id?: number;
+  orderNo?: string;
   keywords?: string;
 }

src/api/shop/shopDealerOrder/model/index.ts

@@ -8,8 +8,8 @@ export interface ShopDealerOrder {
   id?: number;
   // 买家用户ID
   userId?: number;
-  // 订单ID
+  // 订单编号
-  orderId?: number;
+  orderNo?: string;
   // 订单总金额(不含运费)
   orderPrice?: string;
   // 分销商用户id(一级)

src/dealer/capital/detail.tsx

@@ -1,78 +1,19 @@
-import React, {useState, useEffect, useCallback} from 'react'
+import {useState, useEffect} from 'react'
-import {View, Text, ScrollView} from '@tarojs/components'
+import {View, Text} from '@tarojs/components'
-import {Empty, PullToRefresh, Loading} from '@nutui/nutui-react-taro'
+import {Empty, Loading} from '@nutui/nutui-react-taro'
-import Taro from '@tarojs/taro'
+import {useRouter} from '@tarojs/taro'
-import {pageShopDealerCapital} from '@/api/shop/shopDealerCapital'
+import {getShopDealerCapital} from '@/api/shop/shopDealerCapital'
-import {useDealerUser} from '@/hooks/useDealerUser'
 import type {ShopDealerCapital} from '@/api/shop/shopDealerCapital/model'
 
-const DealerCapital: React.FC = () => {
+const DealerCapitalDetail = () => {
+  const {params} = useRouter();
   const [loading, setLoading] = useState<boolean>(false)
-  const [refreshing, setRefreshing] = useState<boolean>(false)
+  const [item, setItem] = useState<ShopDealerCapital>()
-  const [loadingMore, setLoadingMore] = useState<boolean>(false)
-  const [capital, setCapital] = useState<ShopDealerCapital[]>([])
-  const [currentPage, setCurrentPage] = useState<number>(1)
-  const [hasMore, setHasMore] = useState<boolean>(true)
-
-  const {dealerUser} = useDealerUser()
 
   // 获取订单数据
-  const fetchCapital = useCallback(async (page: number = 1, isRefresh: boolean = false) => {
+  const reload = async () => {
-    if (!dealerUser?.userId) return
+    const data = await getShopDealerCapital(Number(params.id))
-
+    setItem(data)
-    try {
-      if (isRefresh) {
-        setRefreshing(true)
-      } else if (page === 1) {
-        setLoading(true)
-      } else {
-        setLoadingMore(true)
-      }
-
-      const result = await pageShopDealerCapital({
-        page,
-        limit: 10
-      })
-
-      if (result?.list) {
-        const newCapital = result.list.map(item => ({
-          ...item,
-          orderId: item.orderId
-        }))
-
-        if (page === 1) {
-          setCapital(newCapital)
-        } else {
-          setCapital(prev => [...prev, ...newCapital])
-        }
-
-        setHasMore(newCapital.length === 10)
-        setCurrentPage(page)
-      }
-
-    } catch (error) {
-      console.error('获取分销订单失败:', error)
-      Taro.showToast({
-        title: '获取订单失败',
-        icon: 'error'
-      })
-    } finally {
-      setLoading(false)
-      setRefreshing(false)
-      setLoadingMore(false)
-    }
-  }, [dealerUser?.userId])
-
-  // 下拉刷新
-  const handleRefresh = async () => {
-    await fetchCapital(1, true)
-  }
-
-  // 加载更多
-  const handleLoadMore = async () => {
-    if (!loadingMore && hasMore) {
-      await fetchCapital(currentPage + 1)
-    }
   }
 
   const getFlowType = (index?: number) => {
@@ -85,90 +26,51 @@ const DealerCapital: React.FC = () => {
 
   // 初始化加载数据
   useEffect(() => {
-    if (dealerUser?.userId) {
+    reload().then(() => {
-      fetchCapital(1)
+      setLoading(true)
-    }
+    })
-  }, [fetchCapital])
+  }, [])
-
-  const renderCapitalItem = (item: ShopDealerCapital) => (
-    <View key={item.id} className="bg-white rounded-lg p-4 mb-3 shadow-sm">
-      <View className="flex justify-between items-start mb-1">
-        <Text className="font-semibold text-gray-800">
-          {getFlowType(item.flowType)}
-        </Text>
-        <Text className="text-lg text-orange-500 font-semibold">
-          ¥{Number(item.money).toFixed(2)}
-        </Text>
-      </View>
-
-      {item.comments && (
-        <View className="flex justify-between items-center mb-1">
-          <Text className="text-sm text-gray-400">
-            {item.comments}
-          </Text>
-        </View>
-      )}
-      <View className="flex justify-between items-center mb-1">
-        <Text className="text-sm text-gray-400">
-          订单号：{item.orderId}
-        </Text>
-      </View>
-      <View className="flex justify-between items-center mb-1">
-        <Text className="text-sm text-gray-400">
-          {item.createTime}
-        </Text>
-      </View>
-
-    </View>
-  )
 
   return (
     <View className="min-h-screen bg-gray-50">
-      <PullToRefresh
-        onRefresh={handleRefresh}
-        disabled={refreshing}
-        pullingText="下拉刷新"
-        canReleaseText="释放刷新"
-        refreshingText="刷新中..."
-        completeText="刷新完成"
-      >
-        <ScrollView
-          scrollY
-          className="h-screen"
-          onScrollToLower={handleLoadMore}
-          lowerThreshold={50}
-        >
       <View className="p-4">
-            {loading && capital.length === 0 ? (
+        {loading && !item ? (
           <View className="text-center py-8">
             <Loading/>
             <Text className="text-gray-500 mt-2">加载中...</Text>
           </View>
-            ) : capital.length > 0 ? (
+        ) : item ? (
-              <>
+          <View key={item.id} className="bg-white rounded-lg p-4 mb-3 shadow-sm">
-                {capital.map(renderCapitalItem)}
+            <View className="flex flex-col justify-center items-center py-8">
-                {loadingMore && (
+              <Text className="text-lg text-gray-300">
-                  <View className="text-center py-4">
+                {getFlowType(item.flowType)}
-                    <Loading/>
+              </Text>
-                    <Text className="text-gray-500 mt-1 text-sm">加载更多...</Text>
+              <View className="text-4xl mt-1 font-semibold flex justify-start">
+                <Text className={'subscript text-xl mt-1'}>￥</Text>
+                <Text className={'text-4xl'}>{Number(item.money).toFixed(2)}</Text>
+              </View>
+            </View>
+
+            <View className="flex flex-col justify-between mb-1">
+              <Text className="text-sm my-1 text-gray-500">
+                订单编号：{item.orderNo}
+              </Text>
+              <Text className="text-sm my-1 text-gray-500">
+                收益描述：{item.comments}
+              </Text>
+              <Text className="text-sm my-1 text-gray-500">
+                创建时间：{item.createTime}
+              </Text>
             </View>
-                )}
-                {!hasMore && capital.length > 0 && (
-                  <View className="text-center py-4">
-                    <Text className="text-gray-400 text-sm">没有更多数据了</Text>
           </View>
-                )}
-              </>
         ) : (
-              <Empty description="暂无收益" style={{
+          <Empty description="账单不存在" style={{
             backgroundColor: 'transparent'
           }}/>
         )}
       </View>
-        </ScrollView>
-      </PullToRefresh>
     </View>
   )
 }
 
-export default DealerCapital
+export default DealerCapitalDetail

src/dealer/capital/index.tsx

@@ -1,6 +1,7 @@
 import React, {useState, useEffect, useCallback} from 'react'
 import {View, Text, ScrollView} from '@tarojs/components'
-import {Empty, PullToRefresh, Cell, DatePicker, Loading} from '@nutui/nutui-react-taro'
+import {ArrowDown} from '@nutui/icons-react-taro'
+import {Empty, PullToRefresh, DatePicker,Space, Loading} from '@nutui/nutui-react-taro'
 import Taro from '@tarojs/taro'
 import {pageShopDealerCapital} from '@/api/shop/shopDealerCapital'
 import {useDealerUser} from '@/hooks/useDealerUser'
@@ -42,7 +43,7 @@ const DealerCapital: React.FC = () => {
       if (result?.list) {
         const newCapital = result.list.map(item => ({
           ...item,
-          orderId: item.orderId
+          orderNo: item.orderNo
         }))
 
         if (page === 1) {
@@ -96,7 +97,8 @@ const DealerCapital: React.FC = () => {
   }, [fetchCapital])
 
   const renderCapitalItem = (item: ShopDealerCapital) => (
-    <View key={item.id} className="bg-white rounded-lg p-4 mb-3 shadow-sm" onClick={() => navTo(`/dealer/capital/detail?id=${item.id}`)}>
+    <View key={item.id} className="bg-white rounded-lg p-4 mb-3 shadow-sm"
+          onClick={() => navTo(`/dealer/capital/detail?id=${item.id}`)}>
       <View className="flex justify-between items-start mb-1">
         <Text className="font-semibold text-gray-800">
           {getFlowType(item.flowType)}
@@ -106,13 +108,14 @@ const DealerCapital: React.FC = () => {
         </Text>
       </View>
 
-      {/*{item.comments && (*/}
+      {item.comments && (
-      {/*  <View className="flex justify-between items-center mb-1">*/}
+        <View className="flex justify-between items-center mb-1">
-      {/*    <Text className="text-sm text-gray-400">*/}
+          <Text className="text-sm text-gray-400">
-      {/*      {item.comments}*/}
+            {item.comments}
-      {/*    </Text>*/}
+          </Text>
-      {/*  </View>*/}
+        </View>
-      {/*)}*/}
+      )}
+
       <View className="flex justify-between items-center mb-1">
         <Text className="text-sm text-gray-400">
           {item.createTime}
@@ -127,13 +130,6 @@ const DealerCapital: React.FC = () => {
 
   return (
     <View className="min-h-screen bg-gray-50">
-      <Cell.Group divider={false}>
-        <Cell
-          description={date ? `${date}` : '请选择'}
-          extra={'选择月份'}
-          onClick={() => setShow1(true)}
-        />
-      </Cell.Group>
       <PullToRefresh
         onRefresh={handleRefresh}
         disabled={refreshing}
@@ -144,12 +140,18 @@ const DealerCapital: React.FC = () => {
       >
         <ScrollView
           scrollY
-          style={{
+          className={'h-screen'}
-            height: 'calc(100vh - 110px)',
-          }}
           onScrollToLower={handleLoadMore}
           lowerThreshold={50}
         >
+          {/*筛选工具条*/}
+          <Space
+            className={'px-4 mt-4'}
+          >
+            <Text className={'text-sm'} onClick={() => setShow1(true)}>{date ? `${date}` : '请选择'}</Text>
+            <ArrowDown size={10} className={'text-gray-400'} onClick={() => setShow1(true)}/>
+          </Space>
+          {/*账单列表*/}
           <View className="p-4">
             {loading && capital.length === 0 ? (
               <View className="text-center py-8">
@@ -185,7 +187,6 @@ const DealerCapital: React.FC = () => {
         pickerProps={{
           popupProps: {zIndex: 1220},
         }}
-        type={'year-month'}
         defaultValue={new Date(`${currDate}`)}
         showChinese
         onCancel={() => setShow1(false)}

src/dealer/orders/index.tsx

@@ -1,6 +1,7 @@
 import React, {useState, useEffect, useCallback} from 'react'
 import {View, Text, ScrollView} from '@tarojs/components'
-import {Empty, PullToRefresh, Loading, Cell, DatePicker} from '@nutui/nutui-react-taro'
+import {Empty, PullToRefresh,Space, Loading, DatePicker} from '@nutui/nutui-react-taro'
+import {ArrowDown} from '@nutui/icons-react-taro'
 import Taro from '@tarojs/taro'
 import {pageShopDealerOrder} from '@/api/shop/shopDealerOrder'
 import {useDealerUser} from '@/hooks/useDealerUser'
@@ -51,7 +52,7 @@ const DealerOrder: React.FC = () => {
       if (result?.list) {
         const newOrders = result.list.map(order => ({
           ...order,
-          orderNo: `${order.orderId}`,
+          orderNo: `${order.orderNo}`,
           customerName: `用户${order.userId}`,
           userCommission: order.firstMoney || '0.00'
         }))
@@ -114,7 +115,7 @@ const DealerOrder: React.FC = () => {
     <View key={order.id} className="bg-white rounded-lg p-4 mb-3 shadow-sm">
       <View className="flex justify-between items-start mb-1">
         <Text className="font-semibold text-gray-800">
-          订单号：{order.id}
+          订单号：{order.orderNo}
         </Text>
       </View>
 
@@ -162,13 +163,6 @@ const DealerOrder: React.FC = () => {
 
   return (
     <View className="min-h-screen bg-gray-50">
-      <Cell.Group divider={false}>
-        <Cell
-          description={date ? `${date}` : '请选择'}
-          extra={'选择月份'}
-          onClick={() => setShow1(true)}
-        />
-      </Cell.Group>
       <PullToRefresh
         onRefresh={handleRefresh}
         disabled={refreshing}
@@ -179,12 +173,17 @@ const DealerOrder: React.FC = () => {
       >
         <ScrollView
           scrollY
-          style={{
-            height: 'calc(100vh - 100px)',
-          }}
           onScrollToLower={handleLoadMore}
           lowerThreshold={50}
         >
+          {/*筛选工具条*/}
+          <Space
+            className={'p-4'}
+          >
+            <Text className={'text-sm'} onClick={() => setShow1(true)}>{date ? `${date}` : '请选择'}</Text>
+            <ArrowDown size={10} className={'text-gray-400'} onClick={() => setShow1(true)}/>
+          </Space>
+          {/*账单列表*/}
           <View className="px-4">
             {loading && orders.length === 0 ? (
               <View className="text-center py-8">