新增：优惠券、积分明细

src/user/points/points.tsx

@@ -1,50 +1,59 @@
-import {useEffect, useState} from "react";
+import {useState, useEffect, CSSProperties} from 'react'
 import Taro from '@tarojs/taro'
-import {Button, Cell, Space, Empty, ConfigProvider, Card} from '@nutui/nutui-react-taro'
-import {View} from '@tarojs/components'
+import {Cell, InfiniteLoading, Card, Empty, ConfigProvider} from '@nutui/nutui-react-taro'
 import {pageUserPointsLog, getUserPointsStats} from "@/api/user/points";
 import {UserPointsLog as UserPointsLogType, UserPointsStats} from "@/api/user/points/model";
+import {View} from '@tarojs/components'
+
+const InfiniteUlStyle: CSSProperties = {
+  height: '100vh',
+  width: '100%',
+  padding: '0',
+  overflowY: 'auto',
+  overflowX: 'hidden',
+}
 
 const UserPoints = () => {
   const [list, setList] = useState<UserPointsLogType[]>([])
-  const [loading, setLoading] = useState(false)
+  const [page, setPage] = useState(1)
+  const [hasMore, setHasMore] = useState(true)
   const [stats, setStats] = useState<UserPointsStats>({})
 
+  useEffect(() => {
+    reload()
+    loadPointsStats()
+  }, [])
+
+  const loadMore = async () => {
+    setPage(page + 1)
+    reload();
+  }
+
   const reload = () => {
-    setLoading(true)
     const userId = Taro.getStorageSync('UserId')
-
-    console.log('Loading points log for userId:', userId)
-
     if (!userId) {
-      console.warn('No userId found in storage')
       Taro.showToast({
         title: '请先登录',
         icon: 'error'
       });
-      setLoading(false)
       return
     }
 
     pageUserPointsLog({
       userId: parseInt(userId),
-      page: 1,
-      limit: 20
+      page
+    }).then(res => {
+      console.log(res)
+      const newList = res?.list || [];
+      setList([...list, ...newList])
+      setHasMore(newList.length > 0)
+    }).catch(error => {
+      console.error('Points log error:', error)
+      Taro.showToast({
+        title: error?.message || '获取失败',
+        icon: 'error'
+      });
     })
-      .then((res: any) => {
-        console.log('Points log response:', res)
-        setList(res?.list || [])
-      })
-      .catch((error: any) => {
-        console.error('Points log error:', error)
-        Taro.showToast({
-          title: error?.message || '获取失败',
-          icon: 'error'
-        });
-      })
-      .finally(() => {
-        setLoading(false)
-      })
   }
 
   const loadPointsStats = () => {
@@ -60,11 +69,6 @@ const UserPoints = () => {
       })
   }
 
-  useEffect(() => {
-    reload()
-    loadPointsStats()
-  }, []);
-
   const getPointsTypeText = (type?: number) => {
     switch (type) {
       case 1: return '获得积分'
@@ -85,21 +89,9 @@ const UserPoints = () => {
     }
   }
 
-  if (loading) {
-    return (
-      <ConfigProvider>
-        <div className={'h-full flex flex-col justify-center items-center'} style={{
-          height: 'calc(100vh - 300px)',
-        }}>
-          <div>加载中...</div>
-        </div>
-      </ConfigProvider>
-    )
-  }
-
   return (
     <ConfigProvider>
-      <View className="bg-gray-50 min-h-screen">
+      <View className="bg-gray-50 h-screen">
         {/* 积分统计卡片 */}
         <View className="p-4">
           <Card className="points-stats-card">
@@ -134,62 +126,84 @@ const UserPoints = () => {
         </View>
 
         {/* 积分记录 */}
-        <View className="px-4">
-          <View className="text-base font-medium text-gray-800 mb-3">积分明细</View>
+        <View className="px-4 flex-1">
 
-          {list.length === 0 ? (
-            <div className={'h-full flex flex-col justify-center items-center'} style={{
-              height: 'calc(100vh - 400px)',
-            }}>
-              <Empty
-                style={{
-                  backgroundColor: 'transparent'
-                }}
-                description="您还没有积分记录"
-              />
-              <Space>
-                <Button onClick={() => reload()}>刷新</Button>
-              </Space>
-            </div>
-          ) : (
-            list.map((item, index) => (
-              <Cell.Group key={index} className="mb-3">
-                <Cell className="flex flex-col gap-2 p-4">
-                  <View className="flex justify-between items-start">
-                    <View className="flex-1">
-                      <View className="font-medium text-base text-gray-800 mb-1">
-                        {getPointsTypeText(item.type)}
-                      </View>
-                      <View className="text-sm text-gray-500">
-                        {item.reason || '无备注'}
-                      </View>
-                    </View>
-                    <View className={`text-lg font-bold ${getPointsTypeColor(item.type)}`}>
-                      {item.type === 1 ? '+' : item.type === 2 ? '-' : ''}
-                      {item.points || 0}
-                    </View>
-                  </View>
+          <ul style={{...InfiniteUlStyle, height: 'calc(100vh - 200px)'}} id="scroll">
+            <InfiniteLoading
+              target="scroll"
+              hasMore={hasMore}
+              onLoadMore={loadMore}
+              onScroll={() => {
+                console.log('onScroll')
+              }}
+              onScrollToUpper={() => {
+                console.log('onScrollToUpper')
+              }}
+              loadingText={
+                <>
+                  加载中
+                </>
+              }
+              loadMoreText={
+                <>
+                  没有更多了
+                </>
+              }
+            >
+              <View className="p-4">
+                {list.length === 0 ? (
+                  <div className={'h-full flex flex-col justify-center items-center'} style={{
+                    height: 'calc(100vh - 500px)',
+                  }}>
+                    <Empty
+                      style={{
+                        backgroundColor: 'transparent'
+                      }}
+                      description="您还没有积分记录"
+                    />
+                  </div>
+                ) : (
+                  list.map((item, index) => (
+                    <Cell.Group key={`${item.logId}-${index}`} className="mb-3">
+                      <Cell className="flex flex-col gap-2 p-4">
+                        <View className="flex justify-between items-start">
+                          <View className="flex-1">
+                            <View className="font-medium text-base text-gray-800 mb-1">
+                              {getPointsTypeText(item.type)}
+                            </View>
+                            <View className="text-sm text-gray-500">
+                              {item.reason || '无备注'}
+                            </View>
+                          </View>
+                          <View className={`text-lg font-bold ${getPointsTypeColor(item.type)}`}>
+                            {item.type === 1 ? '+' : item.type === 2 ? '-' : ''}
+                            {item.points || 0}
+                          </View>
+                        </View>
 
-                  <View className="flex justify-between items-center text-xs text-gray-400 mt-2">
-                    <View>
-                      {item.createTime ? new Date(item.createTime).toLocaleString() : ''}
-                    </View>
-                    {item.orderId && (
-                      <View>
-                        订单: {item.orderId}
-                      </View>
-                    )}
-                  </View>
+                        <View className="flex justify-between items-center text-xs text-gray-400 mt-2">
+                          <View>
+                            {item.createTime ? new Date(item.createTime).toLocaleString() : ''}
+                          </View>
+                          {item.orderId && (
+                            <View>
+                              订单: {item.orderId}
+                            </View>
+                          )}
+                        </View>
 
-                  {item.comments && (
-                    <View className="text-xs text-gray-500 mt-1 p-2 bg-gray-50 rounded">
-                      备注: {item.comments}
-                    </View>
-                  )}
-                </Cell>
-              </Cell.Group>
-            ))
-          )}
+                        {item.comments && (
+                          <View className="text-xs text-gray-500 mt-1 p-2 bg-gray-50 rounded">
+                            备注: {item.comments}
+                          </View>
+                        )}
+                      </Cell>
+                    </Cell.Group>
+                  ))
+                )}
+              </View>
+            </InfiniteLoading>
+          </ul>
         </View>
       </View>
     </ConfigProvider>