新增：余额支付、微信支付、下单确认功能

src/pages/order/components/OrderList.tsx

@@ -0,0 +1,181 @@
+import {Avatar, Cell, Space, Tabs, Button, TabPane} from '@nutui/nutui-react-taro'
+import {useEffect, useState, CSSProperties} from "react";
+import Taro from '@tarojs/taro';
+import {InfiniteLoading} from '@nutui/nutui-react-taro'
+import dayjs from "dayjs";
+import {pageShopOrder} from "@/api/shop/shopOrder";
+import {ShopOrder} from "@/api/shop/shopOrder/model";
+import {copyText} from "@/utils/common";
+
+const InfiniteUlStyle: CSSProperties = {
+  marginTop: '84px',
+  height: '82vh',
+  width: '100%',
+  padding: '0',
+  overflowY: 'auto',
+  overflowX: 'hidden',
+}
+const tabs = [
+  {
+    index: 0,
+    key: '全部',
+    title: '全部'
+  },
+  {
+    index: 1,
+    key: '待付款',
+    title: '待付款'
+  },
+  {
+    index: 2,
+    key: '待发货',
+    title: '待发货'
+  },
+  {
+    index: 3,
+    key: '已收货',
+    title: '已收货'
+  },
+  {
+    index: 4,
+    key: '已完成',
+    title: '已完成'
+  }
+]
+
+function OrderList(props: any) {
+  const [list, setList] = useState<ShopOrder[]>([])
+  const [page, setPage] = useState(1)
+  const [hasMore, setHasMore] = useState(true)
+  const [tapIndex, setTapIndex] = useState<string | number>('0')
+
+  console.log(props.statusBarHeight, 'ppp')
+
+  const getOrderStatusParams = (index: string | number) => {
+    let params: { payStatus?: number; deliveryStatus?: number; orderStatus?: number } = {};
+    switch (index) {
+      case '1': // 待付款
+        params.payStatus = 0;
+        break;
+      case '2': // 待发货
+        params.payStatus = 1;
+        params.deliveryStatus = 10;
+        break;
+      case '3': // 已收货
+        params.deliveryStatus = 30;
+        break;
+      case '4': // 已完成
+        params.orderStatus = 1;
+        break;
+      case '0': // 全部
+      default:
+        break;
+    }
+    return params;
+  };
+
+  const reload = async (resetPage = false) => {
+    const currentPage = resetPage ? 1 : page;
+    const params = getOrderStatusParams(tapIndex);
+    pageShopOrder({ page: currentPage, ...params }).then(res => {
+      let newList: ShopOrder[] | undefined = [];
+      if (res?.list && res?.list.length > 0) {
+        newList = resetPage ? res.list : list?.concat(res.list);
+        setHasMore(true);
+      } else {
+        newList = res?.list;
+        setHasMore(false);
+      }
+      setList(newList || []);
+      setPage(currentPage);
+    });
+  };
+
+  const reloadMore = async () => {
+    setPage(page + 1);
+    reload();
+  };
+
+  useEffect(() => {
+    reload(true); // 首次加载或tab切换时重置页码
+  }, [tapIndex]); // 监听tapIndex变化
+
+  return (
+    <>
+      <Tabs
+        align={'left'}
+        className={'fixed left-0'}
+        style={{ top: '84px'}}
+        tabStyle={{ backgroundColor: 'transparent'}}
+        value={tapIndex}
+        onChange={(paneKey) => {
+          setTapIndex(paneKey)
+        }}
+      >
+        {
+          tabs?.map((item, index) => {
+            return <TabPane key={index} title={item.title}></TabPane>
+          })
+        }
+      </Tabs>
+      <div style={InfiniteUlStyle} id="scroll">
+        <InfiniteLoading
+          target="scroll"
+          hasMore={hasMore}
+          onLoadMore={reloadMore}
+          onScroll={() => {
+
+          }}
+          onScrollToUpper={() => {
+
+          }}
+          loadingText={
+            <>
+              加载中
+            </>
+          }
+          loadMoreText={
+            <>
+              没有更多了
+            </>
+          }
+        >
+          {props.data?.map(item => {
+            return (
+              <Cell style={{padding: '16px'}} onClick={() => Taro.navigateTo({url: `/shop/orderDetail/index?orderId=${item.orderId}`})}>
+                <Space direction={'vertical'} className={'w-full flex flex-col'}>
+                  <div className={'order-no flex justify-between'}>
+                    <span className={'text-gray-700 font-bold text-sm'}
+                          onClick={(e) => {e.stopPropagation(); copyText(`${item.orderNo}`)}}>{item.orderNo}</span>
+                    <span className={'text-orange-500'}>待付款</span> {/* 这里可以根据item.orderStatus显示不同的状态 */}
+                  </div>
+                  <div
+                    className={'create-time text-gray-400 text-xs'}>{dayjs(item.createTime).format('YYYY年MM月DD日 HH:mm:ss')}</div>
+                  <div className={'goods-info'}>
+                    <div className={'flex items-center'}>
+                      <div className={'flex items-center'}>
+                        <Avatar
+                          src='34'
+                          size={'45'}
+                          shape={'square'}
+                        />
+                        <div className={'ml-2'}>{item.realName}</div>
+                      </div>
+                      <div className={'text-gray-400 text-xs'}>{item.totalNum}件商品</div>
+                    </div>
+                  </div>
+                  <div className={' w-full text-right'}>实付金额：￥{item.payPrice}</div>
+                  <Space className={'btn flex justify-end'}>
+                    <Button size={'small'}>发货</Button>
+                  </Space>
+                </Space>
+              </Cell>
+            )
+          })}
+        </InfiniteLoading>
+      </div>
+    </>
+  )
+}
+
+export default OrderList

src/pages/order/order.tsx

@@ -1,13 +1,25 @@
-import {useEffect, useState} from "react"; // 添加 useCallback 引入
-import Taro from '@tarojs/taro';
+import {useState} from "react"; // 添加 useCallback 引入
+import Taro, {useDidShow} from '@tarojs/taro'
 import {NavBar, Space} from '@nutui/nutui-react-taro'
 import {Search} from '@nutui/icons-react-taro'
-import OrderList from "@/components/OrderList";
+import OrderList from "./components/OrderList";
+import {ShopOrder} from "@/api/shop/shopOrder/model";
+import {pageShopOrder} from "@/api/shop/shopOrder";
 import './order.scss'
+
 function Order() {
   const [statusBarHeight, setStatusBarHeight] = useState<number>()
+  const [list, setList] = useState<ShopOrder[]>([])
 
-  useEffect(() => {
+
+  const reload = async () => {
+    const orders = await pageShopOrder({userId: Taro.getStorageSync('UserId')})
+    if (orders) {
+      setList(orders.list || [])
+    }
+  }
+
+  useDidShow(() => {
     Taro.getSystemInfo({
       success: (res) => {
         setStatusBarHeight(res.statusBarHeight)
@@ -18,7 +30,8 @@ function Order() {
       backgroundColor: '#ffffff', // 状态栏+导航栏背景色
       frontColor: 'black',       // 状态栏文字颜色（仅支持 black/white）
     });
-  }, []); // 新增: 添加滚动事件监听
+    reload().then()
+  }); // 新增: 添加滚动事件监听
 
   return (
     <>
@@ -45,7 +58,7 @@ function Order() {
       >
         <span>订单</span>
       </NavBar>
-      <OrderList/>
+      <OrderList data={list}/>
     </>
   );
 }

src/pages/user/components/UserCard.tsx

@@ -188,7 +188,7 @@ function UserCard() {
           <div className={'flex justify-around mt-5'}>
             <div className={'item flex justify-center flex-col items-center'}>
               <span className={'text-sm text-gray-500'}>余额</span>
-              <span className={'text-xl'}>¥ 0.00</span>
+              <span className={'text-xl'}>¥ {userInfo?.balance}</span>
             </div>
             <div className={'item flex justify-center flex-col items-center'}>
               <span className={'text-sm text-gray-500'}>优惠券</span>