新增：优惠券、积分明细

src/user/coupon/coupon.tsx

@@ -1,13 +1,22 @@
-import {useEffect, useState} from "react";
+import {useState, useEffect, CSSProperties} from 'react'
 import Taro from '@tarojs/taro'
-import {Button, Cell, Space, Empty, ConfigProvider, Tabs, TabPane, Tag} from '@nutui/nutui-react-taro'
-import {View} from '@tarojs/components'
+import {Cell, InfiniteLoading, Tabs, TabPane, Tag, Empty, ConfigProvider} from '@nutui/nutui-react-taro'
 import {pageUserCoupon, getUserCouponCount} from "@/api/user/coupon";
 import {UserCoupon as UserCouponType} from "@/api/user/coupon/model";
+import {View} from '@tarojs/components'
+
+const InfiniteUlStyle: CSSProperties = {
+  height: '100vh',
+  width: '100%',
+  padding: '0',
+  overflowY: 'auto',
+  overflowX: 'hidden',
+}
 
 const UserCoupon = () => {
   const [list, setList] = useState<UserCouponType[]>([])
-  const [loading, setLoading] = useState(false)
+  const [page, setPage] = useState(1)
+  const [hasMore, setHasMore] = useState(true)
   const [activeTab, setActiveTab] = useState('0')
   const [couponCount, setCouponCount] = useState({
     total: 0,
@@ -23,42 +32,43 @@ const UserCoupon = () => {
     { key: '3', title: '已过期', status: 2 }
   ]
 
-  const reload = (status?: number) => {
-    setLoading(true)
+  useEffect(() => {
+    reload()
+    loadCouponCount()
+  }, [])
+
+  const loadMore = async () => {
+    setPage(page + 1)
+    reload();
+  }
+
+  const reload = () => {
     const userId = Taro.getStorageSync('UserId')
-
-    console.log('Loading coupons for userId:', userId, 'status:', status)
-
     if (!userId) {
-      console.warn('No userId found in storage')
       Taro.showToast({
         title: '请先登录',
         icon: 'error'
       });
-      setLoading(false)
       return
     }
 
+    const tab = tabs.find(t => t.key === activeTab)
     pageUserCoupon({
       userId: parseInt(userId),
-      status: status,
-      page: 1,
-      limit: 20
+      status: tab?.status,
+      page
+    }).then(res => {
+      console.log(res)
+      const newList = res?.list || [];
+      setList([...list, ...newList])
+      setHasMore(newList.length > 0)
+    }).catch(error => {
+      console.error('Coupon error:', error)
+      Taro.showToast({
+        title: error?.message || '获取失败',
+        icon: 'error'
+      });
     })
-      .then((res: any) => {
-        console.log('Coupon response:', res)
-        setList(res?.list || [])
-      })
-      .catch((error: any) => {
-        console.error('Coupon error:', error)
-        Taro.showToast({
-          title: error?.message || '获取失败',
-          icon: 'error'
-        });
-      })
-      .finally(() => {
-        setLoading(false)
-      })
   }
 
   const loadCouponCount = () => {
@@ -74,15 +84,15 @@ const UserCoupon = () => {
       })
   }
 
-  useEffect(() => {
-    reload()
-    loadCouponCount()
-  }, []);
-
   const onTabChange = (index: string) => {
     setActiveTab(index)
-    const tab = tabs.find(t => t.key === index)
-    reload(tab?.status)
+    setList([]) // 清空列表
+    setPage(1) // 重置页码
+    setHasMore(true) // 重置hasMore
+    // 延迟执行reload，确保状态更新完成
+    setTimeout(() => {
+      reload()
+    }, 0)
   }
 
   const getCouponTypeText = (type?: number) => {
@@ -122,86 +132,91 @@ const UserCoupon = () => {
     }
   }
 
-  if (loading) {
-    return (
-      <ConfigProvider>
-        <div className={'h-full flex flex-col justify-center items-center'} style={{
-          height: 'calc(100vh - 300px)',
-        }}>
-          <div>加载中...</div>
-        </div>
-      </ConfigProvider>
-    )
-  }
-
-  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>
-    )
-  }
-
   return (
     <ConfigProvider>
-      <View>
+      <View className="h-screen">
         <Tabs value={activeTab} onChange={onTabChange}>
           {tabs.map(tab => (
             <TabPane key={tab.key} title={tab.title}>
-              <View className="p-4">
-                {list.map((item, index) => (
-                  <Cell.Group key={index} className="mb-4">
-                    <Cell className="coupon-item p-4">
-                      <View className="flex justify-between items-center">
-                        <View className="flex-1">
-                          <View className="flex items-center mb-2">
-                            <View className="coupon-value text-2xl font-bold text-red-500 mr-3">
-                              {formatCouponValue(item.type, item.value)}
-                            </View>
-                            <View className="flex flex-col">
-                              <View className="text-base font-medium text-gray-800">
-                                {item.name || getCouponTypeText(item.type)}
-                              </View>
-                              {item.minAmount && parseFloat(item.minAmount) > 0 && (
-                                <View className="text-sm text-gray-500">
-                                  满¥{item.minAmount}可用
+              <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.length === 0 ? (
+                      <div className={'h-full flex flex-col justify-center items-center'} style={{
+                        height: 'calc(100vh - 400px)',
+                      }}>
+                        <Empty
+                          style={{
+                            backgroundColor: 'transparent'
+                          }}
+                          description="您还没有优惠券"
+                        />
+                      </div>
+                    ) : (
+                      list.map((item, index) => (
+                        <Cell.Group key={`${item.couponId}-${index}`} className="mb-4">
+                          <Cell className="coupon-item p-4">
+                            <View className="flex justify-between items-center">
+                              <View className="flex-1">
+                                <View className="flex items-center mb-2">
+                                  <View className="coupon-value text-2xl font-bold text-red-500 mr-3">
+                                    {formatCouponValue(item.type, item.value)}
+                                  </View>
+                                  <View className="flex flex-col">
+                                    <View className="text-base font-medium text-gray-800">
+                                      {item.name || getCouponTypeText(item.type)}
+                                    </View>
+                                    {item.minAmount && parseFloat(item.minAmount) > 0 && (
+                                      <View className="text-sm text-gray-500">
+                                        满¥{item.minAmount}可用
+                                      </View>
+                                    )}
+                                  </View>
                                 </View>
-                              )}
-                            </View>
-                          </View>
 
-                          <View className="flex justify-between items-center text-xs text-gray-400">
-                            <View>
-                              有效期: {item.startTime ? new Date(item.startTime).toLocaleDateString() : ''} - {item.endTime ? new Date(item.endTime).toLocaleDateString() : ''}
-                            </View>
-                            <Tag type={getCouponStatusColor(item.status)} size="small">
-                              {getCouponStatusText(item.status)}
-                            </Tag>
-                          </View>
+                                <View className="flex justify-between items-center text-xs text-gray-400">
+                                  <View>
+                                    有效期: {item.startTime ? new Date(item.startTime).toLocaleDateString() : ''} - {item.endTime ? new Date(item.endTime).toLocaleDateString() : ''}
+                                  </View>
+                                  <Tag type={getCouponStatusColor(item.status)} size="small">
+                                    {getCouponStatusText(item.status)}
+                                  </Tag>
+                                </View>
 
-                          {item.comments && (
-                            <View className="text-xs text-gray-500 mt-2 p-2 bg-gray-50 rounded">
-                              {item.comments}
+                                {item.comments && (
+                                  <View className="text-xs text-gray-500 mt-2 p-2 bg-gray-50 rounded">
+                                    {item.comments}
+                                  </View>
+                                )}
+                              </View>
                             </View>
-                          )}
-                        </View>
-                      </View>
-                    </Cell>
-                  </Cell.Group>
-                ))}
-              </View>
+                          </Cell>
+                        </Cell.Group>
+                      ))
+                    )}
+                  </View>
+                </InfiniteLoading>
+              </ul>
             </TabPane>
           ))}
         </Tabs>