优化下单流程

src/pages/order/components/OrderList.tsx

@@ -1,4 +1,4 @@
-import {Avatar, Cell, Space, Tabs, Button, TabPane, Image, Toast} from '@nutui/nutui-react-taro'
+import {Avatar, Cell, Space, Tabs, Button, TabPane, Image} from '@nutui/nutui-react-taro'
 import {useEffect, useState, CSSProperties} from "react";
 import Taro from '@tarojs/taro';
 import {InfiniteLoading} from '@nutui/nutui-react-taro'
@@ -10,12 +10,13 @@ import {ShopOrderGoods} from "@/api/shop/shopOrderGoods/model";
 import {copyText} from "@/utils/common";
 
 const InfiniteUlStyle: CSSProperties = {
-  marginTop: '84px',
+  marginTop: '44px',
   height: '82vh',
   width: '100%',
   padding: '0',
   overflowY: 'auto',
   overflowX: 'hidden',
+  boxShadow: '0 0 10px rgba(0, 0, 0, 0.1)',
 }
 const tabs = [
   {
@@ -61,12 +62,11 @@ function OrderList(props: OrderListProps) {
   const [hasMore, setHasMore] = useState(true)
   const [tapIndex, setTapIndex] = useState<string | number>('0')
 
-  console.log(props.statusBarHeight, 'ppp')
-
   // 获取订单状态文本
   const getOrderStatusText = (order: ShopOrder) => {
-    if (order.payStatus === 0) return '待付款';
-    if (order.payStatus === 1 && order.deliveryStatus === 10) return '待发货';
+    console.log(order,'order')
+    if (!order.payStatus) return '待付款';
+    if (order.payStatus && order.deliveryStatus === 10) return '待发货';
     if (order.deliveryStatus === 20) return '待收货';
     if (order.deliveryStatus === 30) return '已收货';
     if (order.orderStatus === 1) return '已完成';
@@ -151,12 +151,15 @@ function OrderList(props: OrderListProps) {
         deliveryStatus: 30, // 已收货
         orderStatus: 1 // 已完成
       });
-      Toast.show('确认收货成功');
+      Taro.showToast({
+        title: '确认收货成功',
+      });
       reload(true); // 重新加载列表
       props.onReload?.(); // 通知父组件刷新
     } catch (error) {
-      console.error('确认收货失败:', error);
-      Toast.show('确认收货失败');
+      Taro.showToast({
+        title: '确认收货失败',
+      });
     }
   };
 
@@ -167,12 +170,16 @@ function OrderList(props: OrderListProps) {
         ...order,
         orderStatus: 2 // 已取消
       });
-      Toast.show('订单已取消');
+      Taro.showToast({
+        title: '订单已取消',
+      });
       reload(true); // 重新加载列表
       props.onReload?.(); // 通知父组件刷新
     } catch (error) {
       console.error('取消订单失败:', error);
-      Toast.show('取消订单失败');
+      Taro.showToast({
+        title: '取消订单失败',
+      });
     }
   };
 
@@ -185,8 +192,8 @@ function OrderList(props: OrderListProps) {
       <Tabs
         align={'left'}
         className={'fixed left-0'}
-        style={{ top: '84px'}}
-        tabStyle={{ backgroundColor: 'transparent'}}
+        style={{ top: '44px'}}
+        tabStyle={{ backgroundColor: '#ffffff'}}
         value={tapIndex}
         onChange={(paneKey) => {
           setTapIndex(paneKey)
@@ -225,9 +232,9 @@ function OrderList(props: OrderListProps) {
               <Cell key={index} 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'}
+                    <span className={'text-gray-600 font-bold text-sm'}
                           onClick={(e) => {e.stopPropagation(); copyText(`${item.orderNo}`)}}>{item.orderNo}</span>
-                    <span className={'text-orange-500'}>{getOrderStatusText(item)}</span>
+                    <span className={'text-gray-600 font-medium'}>{getOrderStatusText(item)}</span>
                   </div>
                   <div
                     className={'create-time text-gray-400 text-xs'}>{dayjs(item.createTime).format('YYYY年MM月DD日 HH:mm:ss')}</div>
@@ -249,7 +256,7 @@ function OrderList(props: OrderListProps) {
                             {goods.spec && <div className={'text-gray-500 text-xs'}>规格：{goods.spec}</div>}
                             <div className={'text-gray-500 text-xs'}>数量：{goods.totalNum}</div>
                           </div>
-                          <div className={'text-red-500 text-sm'}>￥{goods.price}</div>
+                          <div className={'text-sm'}>￥{goods.price}</div>
                         </div>
                       ))
                     ) : (
@@ -271,11 +278,11 @@ function OrderList(props: OrderListProps) {
 
                   {/* 操作按钮 */}
                   <Space className={'btn flex justify-end'}>
-                    {item.payStatus === 0 && (
-                      <>
+                    {item.payStatus && (
+                      <Space>
                         <Button size={'small'} onClick={(e) => {e.stopPropagation(); cancelOrder(item)}}>取消订单</Button>
                         <Button size={'small'} type="primary" onClick={(e) => {e.stopPropagation(); console.log('立即支付')}}>立即支付</Button>
-                      </>
+                      </Space>
                     )}
                     {item.deliveryStatus === 20 && (
                       <Button size={'small'} type="primary" onClick={(e) => {e.stopPropagation(); confirmReceive(item)}}>确认收货</Button>

src/pages/order/order.scss

@@ -1,4 +1,4 @@
 page {
-  background: linear-gradient(to bottom, #e9fff2, #f9fafb);
+  background: linear-gradient(to bottom, #f3f3f3, #f9fafb);
   background-size: 100%;
 }

src/pages/order/order.tsx

@@ -2,6 +2,7 @@ import {useState} from "react"; // 添加 useCallback 引入
 import Taro, {useDidShow} from '@tarojs/taro'
 import {NavBar, Space, Empty, Button, ConfigProvider} from '@nutui/nutui-react-taro'
 import {Search} from '@nutui/icons-react-taro'
+import { View } from '@tarojs/components';
 import OrderList from "./components/OrderList";
 import {ShopOrder} from "@/api/shop/shopOrder/model";
 import {pageShopOrder} from "@/api/shop/shopOrder";
@@ -25,19 +26,15 @@ function Order() {
         setStatusBarHeight(res.statusBarHeight)
       },
     })
-    // 设置导航栏背景色（含状态栏）
-    Taro.setNavigationBarColor({
-      backgroundColor: '#ffffff', // 状态栏+导航栏背景色
-      frontColor: 'black',       // 状态栏文字颜色（仅支持 black/white）
-    });
     reload().then()
   }); // 新增: 添加滚动事件监听
 
   return (
     <>
+      <View style={{ height: `${statusBarHeight}px`, backgroundColor: '#ffffff'}}></View>
       <NavBar
         fixed={true}
-        style={{marginTop: `${statusBarHeight}px`, backgroundColor: 'transparent'}}
+        style={{marginTop: `${statusBarHeight}px`, backgroundColor: '#ffffff'}}
         left={
           <>
             <div className={'flex justify-between items-center w-full'}>