template-10584/src/components/GoodsList.tsx

import {Avatar, Cell, Space, Tabs, Button, TabPane, Swiper} from '@nutui/nutui-react-taro'
import {useEffect, useState, CSSProperties, useRef} from "react";
import {BszxPay} from "@/api/bszx/bszxPay/model";
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: '警戒库存'
  },
  {
    index: 5,
    key: '回收站',
    title: '回收站'
  },
]

function GoodsList(props: any) {
  const [list, setList] = useState<ShopOrder[]>([])
  const [page, setPage] = useState(1)
  const [hasMore, setHasMore] = useState(true)
  const swiperRef = useRef<React.ElementRef<typeof Swiper> | null>(null)
  const [tabIndex, setTabIndex] = useState<string | number>(0)

  console.log(props.statusBarHeight, 'ppp')
  const reload = async () => {
    pageShopOrder({page}).then(res => {
      let newList: BszxPay[] | undefined = []
      if (res?.list && res?.list.length > 0) {
        newList = list?.concat(res.list)
        setHasMore(true)
      } else {
        newList = res?.list
        setHasMore(false)
      }
      setList(newList || []);
    })
  }

  const reloadMore = async () => {
    setPage(page + 1)
    reload().then();
  }

  useEffect(() => {
    setPage(2)
    reload().then()
  }, [])

  return (
    <>
      <Tabs
        align={'left'}
        className={'fixed left-0'}
        style={{ top: '84px'}}
        value={tabIndex}
        onChange={(page) => {
          swiperRef.current?.to(page)
          setTabIndex(page)
        }}
      >
        {
          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={
            <>
              没有更多了
            </>
          }
        >
          {list?.map(item => {
            return (
              <Cell style={{padding: '16px'}}>
                <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={() => copyText(`${item.orderNo}`)}>{item.orderNo}</span>
                    <span className={'text-orange-500'}>待付款</span>
                  </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>
                    <Button size={'small'}>发货</Button>
                  </Space>
                </Space>
              </Cell>
            )
          })}
        </InfiniteLoading>
      </div>
    </>
  )
}

export default GoodsList