template-10584/src/user/order/order.tsx

import {useState} from "react";
import Taro, {useDidShow} from '@tarojs/taro'
import {Space, NavBar, Button, 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 {useRouter} from '@tarojs/taro'
import {ShopOrderParam} from "@/api/shop/shopOrder/model";
import './order.scss'

function Order() {
  const {params} = useRouter();
  const [statusBarHeight, setStatusBarHeight] = useState<number>()
  const [searchParams, setSearchParams] = useState<ShopOrderParam>({
    statusFilter: params.statusFilter != undefined && params.statusFilter != '' ? parseInt(params.statusFilter) : -1
  })
  const [showSearch, setShowSearch] = useState(false)
  const [searchKeyword, setSearchKeyword] = useState('')

  const reload = async (where?: ShopOrderParam) => {
    console.log(where,'where...')
    setSearchParams(prev => ({ ...prev, ...where }))
  }

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

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

  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>

      {/* 搜索组件 */}
      {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>*/}
      {/*)}*/}
      {/*订单列表*/}
      <OrderList
        onReload={() => reload(searchParams)}
        searchParams={searchParams}
        showSearch={showSearch}
      />
    </View>
  );
}

export default Order;