xinlong-shop-taro/src/pages/user/points-record.tsx

import React, { useState, useEffect } from 'react'
import { View, Text, ScrollView } from '@tarojs/components'
import Taro from '@tarojs/taro'
import { useRequest } from '@/hooks/useRequest'
import { pageUserPointsLog, getUserPointsInfo, type UserPointsInfo } from '@/api/system/user/points'

definePageConfig({
  navigationBarTitleText: '积分明细',
  enablePullDownRefresh: true,
})

// 积分类型映射
const TYPE_MAP: Record<number, { label: string; icon: string; color: string; bgColor: string }> = {
  1: { label: '获得', icon: '📈', color: 'text-green-600', bgColor: 'bg-green-50' },
  2: { label: '消费', icon: '📉', color: 'text-red-500', bgColor: 'bg-red-50' },
  3: { label: '过期', icon: '⏰', color: 'text-gray-500', bgColor: 'bg-gray-50' },
  4: { label: '调整', icon: '🔧', color: 'text-blue-500', bgColor: 'bg-blue-50' },
}

const tabs = [
  { label: '全部', value: -1 },
  { label: '获得', value: 1 },
  { label: '消费', value: 2 },
  { label: '过期', value: 3 },
]

const PointsRecordPage: React.FC = () => {
  const [activeTab, setActiveTab] = useState(-1)
  const [page, setPage] = useState(1)
  const [logs, setLogs] = useState<UserPointsLog[]>([])
  const [hasMore, setHasMore] = useState(true)
  const [pointsInfo, setPointsInfo] = useState<UserPointsInfo>({ points: 0, totalEarned: 0, totalUsed: 0, expiringSoon: 0 })

  // 获取积分统计信息
  const { run: fetchPointsInfo, loading: infoLoading } = useRequest(getUserPointsInfo, {
    manual: true,
    onSuccess: (data) => {
      setPointsInfo(data)
    },
    onError: (err) => {
      console.error('获取积分信息失败:', err)
    }
  })

  // 获取积分记录
  const { run: fetchLogs, loading } = useRequest(pageUserPointsLog, {
    manual: true,
    onSuccess: (data) => {
      if (data?.list) {
        if (page === 1) {
          setLogs(data.list)
        } else {
          setLogs(prev => [...prev, ...data.list])
        }
        setHasMore(data.list.length >= 20)
      }
      Taro.stopPullDownRefresh()
    },
    onError: (err) => {
      Taro.showToast({ title: err.message || '加载失败', icon: 'none' })
      Taro.stopPullDownRefresh()
    }
  })

  // 加载数据
  const loadData = (pageNum: number = 1) => {
    const params: any = { page: pageNum, limit: 20 }
    if (activeTab !== -1) {
      params.type = activeTab
    }
    fetchLogs(params)
  }

  // 初始化加载
  useEffect(() => {
    setPage(1)
    loadData(1)
    fetchPointsInfo() // 加载积分统计信息
  }, [activeTab])

  // 下拉刷新（Taro 自动识别此函数）
  function onPullDownRefresh() {
    setPage(1)
    loadData(1)
  }

  // 加载更多
  const loadMore = () => {
    if (loading || !hasMore) return
    const nextPage = page + 1
    setPage(nextPage)
    loadData(nextPage)
  }

  // 格式化积分
  const formatPoints = (points?: number) => {
    if (!points && points !== 0) return '0'
    return points > 0 ? `+${points}` : String(points)
  }

  // 获取类型信息
  const getTypeInfo = (type?: number) => {
    return TYPE_MAP[type || 0] || { label: '未知', icon: '❓', color: 'text-gray-500', bgColor: 'bg-gray-50' }
  }

  // 格式化时间
  const formatTime = (timeStr?: string) => {
    if (!timeStr) return ''
    const date = new Date(timeStr)
    const month = (date.getMonth() + 1).toString().padStart(2, '0')
    const day = date.getDate().toString().padStart(2, '0')
    const hour = date.getHours().toString().padStart(2, '0')
    const minute = date.getMinutes().toString().padStart(2, '0')
    return `${month}-${day} ${hour}:${minute}`
  }

  // 按日期分组
  const groupLogsByDate = () => {
    const groups: { date: string; logs: UserPointsLog[] }[] = []
    let currentDate = ''
    let currentGroup: UserPointsLog[] = []

    logs.forEach(log => {
      const date = log.createTime ? log.createTime.split(' ')[0] : ''
      if (date !== currentDate) {
        if (currentGroup.length > 0) {
          groups.push({ date: currentDate, logs: currentGroup })
        }
        currentDate = date
        currentGroup = [log]
      } else {
        currentGroup.push(log)
      }
    })

    if (currentGroup.length > 0) {
      groups.push({ date: currentDate, logs: currentGroup })
    }

    return groups
  }

  const groupedLogs = groupLogsByDate()

  return (
    <View className='min-h-screen' style={{ background: 'linear-gradient(to bottom, #fff7ed, #ffffff)' }}>
      {/* 顶部统计卡片 */}
      <View className='bg-white mx-3 mt-3 rounded-xl p-4 shadow-sm'>
        <View className='flex items-center justify-between'>
          <View className='text-center flex-1'>
            <Text className='text-2xl font-bold text-orange-500 block'>{infoLoading ? '-' : pointsInfo.points.toLocaleString()}</Text>
            <Text className='text-xs text-gray-400 mt-1 block'>当前积分</Text>
          </View>
          <View className='h-10 w-px bg-gray-200' />
          <View className='text-center flex-1'>
            <Text className='text-2xl font-bold text-green-500 block'>{infoLoading ? '-' : `+${pointsInfo.totalEarned.toLocaleString()}`}</Text>
            <Text className='text-xs text-gray-400 mt-1 block'>累计获得</Text>
          </View>
          <View className='h-10 w-px bg-gray-200' />
          <View className='text-center flex-1'>
            <Text className='text-2xl font-bold text-red-500 block'>{infoLoading ? '-' : `-${pointsInfo.totalUsed.toLocaleString()}`}</Text>
            <Text className='text-xs text-gray-400 mt-1 block'>累计使用</Text>
          </View>
        </View>
      </View>

      {/* Tab 栏 */}
      <View className='bg-white flex mt-3'>
        {tabs.map(tab => (
          <View
            key={tab.value}
            className={`flex-1 text-center py-3 relative ${
              activeTab === tab.value ? 'text-orange-500 font-medium' : 'text-gray-600'
            }`}
            onClick={() => setActiveTab(tab.value)}
          >
            <Text className='text-sm'>{tab.label}</Text>
            {activeTab === tab.value && (
              <View className='absolute bottom-0 w-8 h-px bg-orange-500 rounded' style={{ left: '50%', transform: 'translateX(-50%)' }} />
            )}
          </View>
        ))}
      </View>

      {/* 日志列表 */}
      <ScrollView
        scrollY
        className='h-full'
        onScrollToLower={loadMore}
      >
        {logs.length === 0 && !loading ? (
          <View className='text-center py-16'>
            <Text className='text-6xl mb-4 block'>📊</Text>
            <Text className='text-base text-gray-400 mb-2 block'>暂无积分记录</Text>
            <Text className='text-sm text-gray-300'>快去购物、签到获取积分吧</Text>
          </View>
        ) : (
          <View className='p-3'>
            {groupedLogs.map(group => (
              <View key={group.date} className='mb-3'>
                {/* 日期分隔 */}
                <View className='flex items-center mb-2'>
                  <View className='flex-1 h-px bg-gray-200' />
                  <Text className='text-xs text-gray-400 mx-3'>{group.date}</Text>
                  <View className='flex-1 h-px bg-gray-200' />
                </View>

                {/* 当日记录 */}
                {group.logs.map(log => {
                  const typeInfo = getTypeInfo(log.type)
                  return (
                    <View key={log.logId} className='bg-white rounded-lg p-4 mb-2 shadow-sm'>
                      <View className='flex justify-between items-center'>
                        <View className='flex-1'>
                          <View className='flex items-center gap-2'>
                            <View className={`w-8 h-8 rounded-full ${typeInfo.bgColor} flex items-center justify-center`}>
                              <Text className='text-base'>{typeInfo.icon}</Text>
                            </View>
                            <View className='flex-1'>
                              <Text className='text-sm text-gray-800 block font-medium'>{log.reason || typeInfo.label}</Text>
                              <Text className='text-xs text-gray-400 mt-1 block'>{formatTime(log.createTime)}</Text>
                              {log.orderId && (
                                <Text className='text-xs text-gray-400 mt-0 block'>订单: {log.orderId}</Text>
                              )}
                            </View>
                          </View>
                        </View>
                        <View className='text-right ml-3'>
                          <Text className={`text-lg font-bold ${typeInfo.color}`}>
                            {formatPoints(log.points)}
                          </Text>
                        </View>
                      </View>
                    </View>
                  )
                })}
              </View>
            ))}
            
            {/* 加载更多 */}
            {hasMore && (
              <View className='text-center py-4'>
                <Text className='text-xs text-gray-400'>
                  {loading ? '加载中...' : '上拉加载更多'}
                </Text>
              </View>
            )}
            {!hasMore && logs.length > 0 && (
              <View className='text-center py-4'>
                <Text className='text-xs text-gray-400'>— 已经到底了 —</Text>
              </View>
            )}
          </View>
        )}
      </ScrollView>
    </View>
  )
}

export default PointsRecordPage