提交代码

src/components/GoodsList.tsx

@@ -0,0 +1,162 @@
+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();
+  }
+
+  useEffect(() => {
+    setPage(2)
+    reload()
+  }, [])
+
+  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