glt-taro/src/user/order/order.tsx

import {useState} from "react";
import Taro, {useDidShow} from '@tarojs/taro'
import {Space, NavBar, Empty, Button, ConfigProvider, Input} from '@nutui/nutui-react-taro'
import {Search, Filter, ArrowLeft} from '@nutui/icons-react-taro'
import {View} from '@tarojs/components';
import OrderList from "./components/OrderList";
// import OrderSearch from "./components/OrderSearch";
import {ShopOrder, ShopOrderParam} 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[]>([])
  const [searchParams, setSearchParams] = useState<ShopOrderParam>({})
  const [showSearch, setShowSearch] = useState(false)
  const [searchKeyword, setSearchKeyword] = useState('')

  const reload = async (params?: ShopOrderParam) => {
    const searchConditions = {
      userId: Taro.getStorageSync('UserId'),
      ...params
    }
    const orders = await pageShopOrder(searchConditions)
    if (orders) {
      setList(orders.list || [])
    }
  }

  // 处理搜索
  const handleSearch = (params: ShopOrderParam) => {
    setSearchParams(params)
    reload(params)
  }

  // 重置搜索
  const handleResetSearch = () => {
    setSearchParams({})
    reload()
  }

  useDidShow(() => {
    // 获取状态栏高度
    Taro.getSystemInfo({
      success: (res) => {
        setStatusBarHeight(res.statusBarHeight)
      },
    })
    // 设置导航栏标题
    Taro.setNavigationBarTitle({
      title: '我的订单'
    });

    Taro.setNavigationBarColor({
      backgroundColor: '#ffffff',
      frontColor: '#000000',
    });

    reload().then()
  });

  return (
    <View className="bg-gray-50 min-h-screen">
      <View style={{height: `${statusBarHeight}px`, backgroundColor: '#ffffff'}}></View>
      <NavBar
        fixed={true}
        style={{marginTop: `${statusBarHeight}px`, backgroundColor: '#ffffff'}}
        left={
          <>
            <div className={'flex justify-between items-center w-full'}>
              <Space>
                <ArrowLeft onClick={() => Taro.navigateBack()}/>
                <Search
                  size={18}
                  className={'mx-4'}
                  onClick={() => setShowSearch(!showSearch)}
                />
              </Space>
            </div>
          </>
        }
      >
        <span>我的订单</span>
      </NavBar>
      {/* 搜索和筛选工具栏 */}
      <View className="bg-white px-4 py-3 flex justify-between items-center border-b border-gray-100">
        <View className="flex items-center">
          <Search
            size={18}
            className="mr-3 text-gray-600"
            onClick={() => setShowSearch(!showSearch)}
          />
          <Filter
            size={18}
            className="text-gray-600"
            onClick={() => setShowSearch(!showSearch)}
          />
        </View>
        <View className="text-sm text-gray-500">
          共{list.length}个订单
        </View>
      </View>

      {/* 搜索组件 */}
      {showSearch && (
        <View className="bg-white p-3 shadow-sm border-b border-gray-100">
          <View className="flex items-center">
            <View className="flex-1 mr-2">
              <Input
                placeholder="搜索订单号、商品名称"
                value={searchKeyword}
                onChange={setSearchKeyword}
                onConfirm={() => {
                  if (searchKeyword.trim()) {
                    handleSearch({keywords: searchKeyword.trim()});
                  }
                }}
                style={{
                  padding: '8px 12px',
                  border: '1px solid #e5e5e5',
                  borderRadius: '4px',
                  backgroundColor: '#f8f9fa'
                }}
              />
            </View>
            <Space>
              <Button
                type="primary"
                onClick={() => {
                  if (searchKeyword.trim()) {
                    handleSearch({keywords: searchKeyword.trim()});
                  }
                }}
              >
                搜索
              </Button>
              <Button
                onClick={() => {
                  setSearchKeyword('');
                  handleResetSearch();
                }}
              >
                重置
              </Button>
            </Space>
          </View>
        </View>
      )}
      {/*暂无订单*/}
      {list.length == 0 && (
        <ConfigProvider>
          <div className={'h-full flex flex-col justify-center items-center'} style={{
            height: showSearch ? 'calc(100vh - 200px)' : 'calc(100vh - 150px)',
            marginTop: showSearch ? '60px' : '0'
          }}>
            <Empty
              style={{
                backgroundColor: 'transparent'
              }}
              description="您还没有订单哦"
            />
            <Space>
              <Button type="success" fill="dashed"
                      onClick={() => Taro.switchTab({url: '/pages/index/index'})}>去挑选商品</Button>
            </Space>
          </div>
        </ConfigProvider>
      )}
      {/*订单列表*/}
      {
        list.length > 0 && (
          <OrderList
            data={list}
            onReload={() => reload(searchParams)}
            searchParams={searchParams}
            showSearch={showSearch}
          />
        )
      }
    </View>
  );
}

export default Order;