mp-10550/src/pages/user/components/UserOrder.tsx

import navTo from "@/utils/common";
import {View, Text} from '@tarojs/components';
import {Badge} from '@nutui/nutui-react-taro';
import {ArrowRight, Wallet, Comment, Transit, Refund, Package} from '@nutui/icons-react-taro';
import {useOrderStats} from "@/hooks/useOrderStats";

function UserOrder() {
  const { orderStats, refreshOrderStats } = useOrderStats();

  // 处理长按刷新
  const handleLongPress = () => {
    refreshOrderStats();
  };

  return (
    <>
      <View className={'px-4 pb-2'}>
        <View
          className={'user-card w-full flex flex-col justify-around rounded-xl shadow-sm'}
          style={{
            background: 'linear-gradient(to bottom, #ffffff, #ffffff)', // 这种情况建议使用类名来控制样式（引入外联样式）
            // margin: '10px auto 0px auto',
            height: '120px',
            // paddingBottom: '3px'
            // borderRadius: '22px 22px 0 0',
          }}
        >
          <View className={'title-bar flex justify-between pt-2'}>
            <Text className={'title font-medium px-4'}>我的订单</Text>
            <View
              className={'more flex items-center px-2'}
              onClick={() => navTo('/user/order/order', true)}
              onLongPress={handleLongPress}
            >
              <Text className={'text-xs text-gray-500'}>全部订单</Text>
              <ArrowRight color="#cccccc" size={12}/>
            </View>
          </View>
          <View className={'flex justify-around pb-1 mt-4'}>
            {/* 待付款 */}
            {orderStats.pending > 0 ? (
              <Badge value={orderStats.pending} max={99} fill={'outline'}>
                <View className={'item flex justify-center flex-col items-center'}>
                  <Wallet size={26} className={'font-normal text-gray-500'}
                          onClick={() => navTo('/user/order/order?statusFilter=0', true)}/>
                  <Text className={'text-sm text-gray-600 py-1'}>待付款</Text>
                </View>
              </Badge>
            ) : (
              <View className={'item flex justify-center flex-col items-center'}
                    onClick={() => navTo('/user/order/order?statusFilter=0', true)}>
                <Wallet size={26} className={'font-normal text-gray-500'}/>
                <Text className={'text-sm text-gray-600 py-1'}>待付款</Text>
              </View>
            )}

            {/* 待发货 */}
            {orderStats.paid > 0 ? (
              <Badge value={orderStats.paid} max={99} fill={'outline'}>
                <View className={'item flex justify-center flex-col items-center'}
                      onClick={() => navTo('/user/order/order?statusFilter=1', true)}>
                  <Package size={26} className={'text-gray-500 font-normal'}/>
                  <Text className={'text-sm text-gray-600 py-1'}>待发货</Text>
                </View>
              </Badge>
            ) : (
              <View className={'item flex justify-center flex-col items-center'}
                    onClick={() => navTo('/user/order/order?statusFilter=1', true)}>
                <Package size={26} className={'text-gray-500 font-normal'}/>
                <Text className={'text-sm text-gray-600 py-1'}>待发货</Text>
              </View>
            )}

            {/* 待收货 */}
            {orderStats.shipped > 0 ? (
              <Badge value={orderStats.shipped} max={99} fill={'outline'}>
                <View className={'item flex justify-center flex-col items-center'}
                      onClick={() => navTo('/user/order/order?statusFilter=3', true)}>
                  <Transit size={24} className={'text-gray-500 font-normal'}/>
                  <Text className={'text-sm text-gray-600 py-1'}>待收货</Text>
                </View>
              </Badge>
            ) : (
              <View className={'item flex justify-center flex-col items-center'}
                    onClick={() => navTo('/user/order/order?statusFilter=3', true)}>
                <Transit size={24} className={'text-gray-500 font-normal'}/>
                <Text className={'text-sm text-gray-600 py-1'}>待收货</Text>
              </View>
            )}

            {/* 已完成 - 不显示badge */}
            <View className={'item flex justify-center flex-col items-center'}
                  onClick={() => navTo('/user/order/order?statusFilter=5', true)}>
              <Comment size={24} className={'text-gray-500 font-normal'}/>
              <Text className={'text-sm text-gray-600 py-1'}>已完成</Text>
            </View>

            {/* 退货/售后 */}
            {orderStats.refund > 0 ? (
              <Badge value={orderStats.refund} max={99} fill={'outline'}>
                <View className={'item flex justify-center flex-col items-center'}
                      onClick={() => navTo('/user/order/order?statusFilter=6', true)}>
                  <Refund size={26} className={'font-normal text-gray-500'}/>
                  <Text className={'text-sm text-gray-600 py-1'}>退货/售后</Text>
                </View>
              </Badge>
            ) : (
              <View className={'item flex justify-center flex-col items-center'}
                    onClick={() => navTo('/user/order/order?statusFilter=6', true)}>
                <Refund size={26} className={'font-normal text-gray-500'}/>
                <Text className={'text-sm text-gray-600 py-1'}>退货/售后</Text>
              </View>
            )}
          </View>
        </View>
      </View>
    </>

  )
}

export default UserOrder;