新增：优惠券、积分明细

src/user/wallet/wallet.tsx

@@ -1,134 +1,105 @@
-import {useEffect, useState} from "react";
-import Taro from '@tarojs/taro'
-import {Button, Cell, Space, Empty, ConfigProvider, InfiniteLoading} from '@nutui/nutui-react-taro'
-import {View, ScrollView} from '@tarojs/components'
+import {useState, useEffect, CSSProperties} from 'react'
+import {Cell, InfiniteLoading} from '@nutui/nutui-react-taro'
 import {pageUserBalanceLog} from "@/api/user/balance-log";
 import {UserBalanceLog} from "@/api/user/balance-log/model";
 import {formatCurrency} from "@/utils/common";
+import {View} from '@tarojs/components'
+
+const InfiniteUlStyle: CSSProperties = {
+  height: '100vh',
+  width: '100%',
+  padding: '0',
+  overflowY: 'auto',
+  overflowX: 'hidden',
+}
 
 const Wallet = () => {
   const [list, setList] = useState<UserBalanceLog[]>([])
-  const [loading, setLoading] = useState(false)
-  const [loadingMore, setLoadingMore] = useState(false)
-  const [refreshing, setRefreshing] = useState(false)
+  const [page, setPage] = useState(1)
   const [hasMore, setHasMore] = useState(true)
-  const [currentPage, setCurrentPage] = useState(1)
-  const [total, setTotal] = useState(0)
-  const pageSize = 20
-
-  const reload = () => {
-    setLoading(true)
-    const userId = Taro.getStorageSync('UserId')
-
-    console.log('Loading balance log for userId:', userId)
-
-    if (!userId) {
-      console.warn('No userId found in storage')
-      Taro.showToast({
-        title: '请先登录',
-        icon: 'error'
-      });
-      setLoading(false)
-      return
-    }
-
-    pageUserBalanceLog({
-      userId: parseInt(userId),
-      page: 1,
-      limit: 20
-    })
-      .then((res: any) => {
-        console.log('Balance log response:', res)
-        setList(res?.list || [])
-      })
-      .catch((error: any) => {
-        console.error('Balance log error:', error)
-        Taro.showToast({
-          title: error?.message || '获取失败',
-          icon: 'error'
-        });
-      })
-      .finally(() => {
-        setLoading(false)
-      })
-  }
 
   useEffect(() => {
     reload()
-  }, []);
+  }, [])
 
-  if (loading) {
-    return (
-      <ConfigProvider>
-        <div className={'h-full flex flex-col justify-center items-center'} style={{
-          height: 'calc(100vh - 300px)',
-        }}>
-          <div>加载中...</div>
-        </div>
-      </ConfigProvider>
-    )
+  const loadMore = async () => {
+    setPage(page + 1)
+    reload();
   }
 
-  if (list.length == 0) {
-    return (
-      <ConfigProvider>
-        <div className={'h-full flex flex-col justify-center items-center'} style={{
-          height: 'calc(100vh - 300px)',
-        }}>
-          <Empty
-            style={{
-              backgroundColor: 'transparent'
-            }}
-            description="您还没有消费记录"
-          />
-          <Space>
-            <Button onClick={() => reload()}>刷新</Button>
-          </Space>
-        </div>
-      </ConfigProvider>
-    )
+  const reload = () => {
+    pageUserBalanceLog({page}).then(res => {
+      console.log(res)
+      const newList = res?.list || [];
+      setList([...list, ...newList])
+      setHasMore(newList.length > 0)
+    })
   }
 
   return (
-    <ConfigProvider>
-      <View className="p-4">
-        {list.map((item, index) => (
-          <Cell.Group key={index} className="mb-4">
-            <Cell className="flex flex-col gap-2 p-4">
-              <View className="flex justify-between items-start w-full">
-                <View className="flex-1">
-                  <View className="font-medium text-base text-gray-800 mb-1">
-                    {item.scene === 10 ? '会员充值' : item.scene === 20 ? '用户消费' : item.scene === 30 ? '管理员操作' : '订单退款'}
+    <>
+      <ul style={InfiniteUlStyle} id="scroll">
+        <InfiniteLoading
+          target="scroll"
+          hasMore={hasMore}
+          onLoadMore={loadMore}
+          onScroll={() => {
+            console.log('onScroll')
+          }}
+          onScrollToUpper={() => {
+            console.log('onScrollToUpper')
+          }}
+          loadingText={
+            <>
+              加载中
+            </>
+          }
+          loadMoreText={
+            <>
+              没有更多了
+            </>
+          }
+        >
+          <View className="p-4">
+            {list.map((item, index) => (
+              <Cell.Group key={`${item.logId}-${index}`} className="mb-4">
+                <Cell className="flex flex-col gap-2 p-4">
+                  <View className="flex justify-between items-start w-full">
+                    <View className="flex-1">
+                      <View className="font-medium text-base text-gray-800 mb-1">
+                        {item.scene === 10 ? '会员充值' : item.scene === 20 ? '用户消费' : item.scene === 30 ? '管理员操作' : '订单退款'}
+                      </View>
+                      <View className="text-sm text-gray-500">
+                        {item.comments}
+                      </View>
+                    </View>
+                    <View className={`text-lg font-bold ${
+                      item.scene === 10 ? 'text-orange-500' : ''
+                    }`}>
+                      {item.scene === 10 ? '+' : '-'}
+                      {formatCurrency(Number(item.money), 'CNY') || '0.00'}
+                    </View>
                   </View>
-                  <View className="text-sm text-gray-500">
-                    {item.comments}
+
+                  <View className="flex justify-between w-full items-center text-xs text-gray-400 mt-2">
+                    <View>
+                      {item.createTime}
+                    </View>
+                    <View>余额：{item?.balance}</View>
                   </View>
-                </View>
-                <View className={`text-lg font-bold ${
-                  item.scene === 10 ? 'text-green-500' : ''
-                }`}>
-                  {item.scene === 10 ? '+' : '-'}
-                  {formatCurrency(Number(item.money), 'CNY') || '0.00'}
-                </View>
-              </View>
 
-              <View className="flex justify-between w-full items-center text-xs text-gray-400 mt-2">
-                <View>
-                  {item.createTime}
-                </View>
-              </View>
-
-              {item.remark && (
-                <View className="text-xs text-gray-500 mt-1 p-2 bg-gray-50 rounded">
-                  备注: {item.remark}
-                </View>
-              )}
-            </Cell>
-          </Cell.Group>
-        ))}
-      </View>
-    </ConfigProvider>
-  );
-};
-
-export default Wallet;
+                  {item.remark && (
+                    <View className="text-xs text-gray-500 mt-1 p-2 bg-gray-50 rounded">
+                      备注: {item.remark}
+                    </View>
+                  )}
+                </Cell>
+              </Cell.Group>
+            ))}
+          </View>
+        </InfiniteLoading>
+      </ul>
+    </>
+  )
+}
+export default Wallet