hms/apps/miniprogram/src/pages/mall/orders/index.tsx

import React, { useState, useCallback, useRef } from 'react';
import { View, Text } from '@tarojs/components';
import Taro, { useDidShow, useReachBottom, usePullDownRefresh } from '@tarojs/taro';
import { listMyOrders } from '../../../services/points';
import type { PointsOrder } from '../../../services/points';
import EmptyState from '../../../components/EmptyState';
import Loading from '../../../components/Loading';
import './index.scss';

const STATUS_TABS = [
  { key: '', label: '全部' },
  { key: 'pending', label: '待核销' },
  { key: 'verified', label: '已核销' },
  { key: 'expired', label: '已过期' },
];

const STATUS_CONFIG: Record<string, { label: string; tagBg: string; tagColor: string }> = {
  pending: { label: '待核销', tagBg: '#FFF3E0', tagColor: '#C4873A' },
  verified: { label: '已核销', tagBg: '#E8F0E8', tagColor: '#5B7A5E' },
  cancelled: { label: '已取消', tagBg: '#FDEAEA', tagColor: '#B54A4A' },
  expired: { label: '已过期', tagBg: '#F0EBE5', tagColor: '#A8A29E' },
};

export default function MallOrders() {
  const [orders, setOrders] = useState<PointsOrder[]>([]);
  const [activeTab, setActiveTab] = useState('');
  const [page, setPage] = useState(1);
  const [total, setTotal] = useState(0);
  const [loading, setLoading] = useState(false);
  const loadingRef = useRef(false);

  const fetchOrders = useCallback(
    async (pageNum: number, status: string, isRefresh = false) => {
      if (loadingRef.current) return;
      loadingRef.current = true;
      setLoading(true);
      try {
        const res = await listMyOrders({
          page: pageNum,
          page_size: 10,
        });
        let list = res.data || [];
        if (status) {
          list = list.filter((o) => o.status === status);
        }
        if (isRefresh) {
          setOrders(list);
        } else {
          setOrders((prev) => [...prev, ...list]);
        }
        setTotal(res.total);
        setPage(pageNum);
      } catch {
        Taro.showToast({ title: '加载失败', icon: 'none' });
      } finally {
        loadingRef.current = false;
        setLoading(false);
      }
    },
    [],
  );

  const loadAll = useCallback(
    async (status?: string) => {
      const s = status !== undefined ? status : activeTab;
      await fetchOrders(1, s, true);
    },
    [fetchOrders, activeTab],
  );

  useDidShow(() => {
    Taro.setNavigationBarTitle({ title: '我的订单' });
    loadAll();
  });

  usePullDownRefresh(() => {
    loadAll().finally(() => {
      Taro.stopPullDownRefresh();
    });
  });

  useReachBottom(() => {
    if (!loading && orders.length < total) {
      fetchOrders(page + 1, activeTab);
    }
  });

  const handleTabChange = (key: string) => {
    setActiveTab(key);
    fetchOrders(1, key, true);
  };

  const handleShowQrCode = (qrCode: string) => {
    Taro.showModal({
      title: '核销码',
      content: qrCode,
      showCancel: false,
      confirmText: '知道了',
    });
  };

  const getStatusConfig = (status: string) => {
    return STATUS_CONFIG[status] || { label: status, tagBg: '#F0EBE5', tagColor: '#A8A29E' };
  };

  const formatDate = (dateStr: string) => {
    if (!dateStr) return '';
    const d = new Date(dateStr);
    return `${d.getFullYear()}-${String(d.getMonth() + 1).padStart(2, '0')}-${String(d.getDate()).padStart(2, '0')} ${String(d.getHours()).padStart(2, '0')}:${String(d.getMinutes()).padStart(2, '0')}`;
  };

  return (
    <View className='orders-page'>
      {/* 状态筛选标签 */}
      <View className='status-tabs'>
        {STATUS_TABS.map((tab) => (
          <View
            key={tab.key}
            className={`status-tab ${activeTab === tab.key ? 'active' : ''}`}
            onClick={() => handleTabChange(tab.key)}
          >
            <Text className='status-tab-text'>{tab.label}</Text>
          </View>
        ))}
      </View>

      {/* 订单列表 */}
      {orders.length === 0 && !loading ? (
        <EmptyState
          icon=''
          text='暂无订单'
          hint='去商城兑换心仪商品吧'
          actionText='去商城'
          onAction={() => Taro.switchTab({ url: '/pages/mall/index' })}
        />
      ) : (
        <View className='order-list'>
          {orders.map((order) => {
            const statusCfg = getStatusConfig(order.status);
            return (
              <View className='order-card' key={order.id}>
                <View className='order-header'>
                  <Text className='order-product'>商品 {order.product_id.slice(0, 8)}</Text>
                  <View
                    className='order-status-tag'
                    style={{ background: statusCfg.tagBg, color: statusCfg.tagColor }}
                  >
                    <Text className='order-status-text'>{statusCfg.label}</Text>
                  </View>
                </View>

                <View className='order-body'>
                  <View className='order-row'>
                    <Text className='order-row-label'>消耗积分</Text>
                    <Text className='order-row-value order-cost'>
                      {order.points_cost.toLocaleString()}
                    </Text>
                  </View>
                  <View className='order-row'>
                    <Text className='order-row-label'>兑换时间</Text>
                    <Text className='order-row-value'>
                      {formatDate(order.created_at)}
                    </Text>
                  </View>
                  {order.status === 'pending' && (
                    <View className='order-qrcode' onClick={() => handleShowQrCode(order.qr_code)}>
                      <Text className='qrcode-label'>核销码</Text>
                      <Text className='qrcode-value'>{order.qr_code}</Text>
                      <Text className='qrcode-tap'>查看</Text>
                    </View>
                  )}
                </View>
              </View>
            );
          })}
          {loading && <Loading />}
          {!loading && orders.length >= total && total > 0 && (
            <Loading text='没有更多了' />
          )}
        </View>
      )}
    </View>
  );
}