提交代码

src/shop/order/index.tsx

@@ -0,0 +1,118 @@
+import {Avatar, Cell, Space} from '@nutui/nutui-react-taro'
+import {useEffect, useState, CSSProperties} from "react";
+import {BszxPay} from "@/api/bszx/bszxPay/model";
+import {getCount, pageBszxPay} from "@/api/bszx/bszxPay";
+import {InfiniteLoading} from '@nutui/nutui-react-taro'
+import dayjs from "dayjs";
+
+const InfiniteUlStyle: CSSProperties = {
+  height: '70vh',
+  width: '100%',
+  padding: '0',
+  overflowY: 'auto',
+  overflowX: 'hidden',
+}
+function PayRecord() {
+  const [list, setList] = useState<BszxPay[]>([])
+  const [page, setPage] = useState(1)
+  const [hasMore, setHasMore] = useState(true)
+  const [totalMoney, setTotalMoney] = useState()
+  const [numbers, setNumbers] = useState()
+  const reload = async () => {
+    pageBszxPay({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 || []);
+    })
+    getCount().then(res => {
+      setNumbers(res.numbers);
+      setTotalMoney(res.totalMoney);
+    })
+  }
+
+  const reloadMore = async () => {
+    setPage(page + 1)
+    reload();
+  }
+
+  useEffect(() => {
+    setPage(2)
+    reload()
+  }, [])
+
+  return (
+    <div className={'px-2'}>
+      <Cell>
+        <div className={'flex w-full text-center justify-around'}>
+          <div className={'item py-1'}>
+            <span className={'text-gray-400'}>已筹资金(元)</span>
+            <span className={'text-xl py-1 font-bold'}>￥{totalMoney}元</span>
+          </div>
+          <div className={'item py-1'}>
+            <span className={'text-gray-400'}>爱心人次</span>
+            <span className={'text-xl py-1 font-bold'}>{numbers}次</span>
+          </div>
+        </div>
+      </Cell>
+      <Cell>
+        <ul style={InfiniteUlStyle} id="scroll">
+          <InfiniteLoading
+            target="scroll"
+            hasMore={hasMore}
+            onLoadMore={reloadMore}
+            onScroll={() => {
+              console.log('onScroll')
+            }}
+            onScrollToUpper={() => {
+              console.log('onScrollToUpper')
+            }}
+            loadingText={
+              <>
+                加载中
+              </>
+            }
+            loadMoreText={
+              <>
+                没有更多了
+              </>
+            }
+          >
+            {list?.map(item => {
+              return (
+                <Cell style={{padding: '0'}}>
+                  <div className={'flex w-full justify-between items-center'}>
+                    <div className={'flex'}>
+                      <Space>
+                        <Avatar
+                          src={item.avatar}
+                        />
+                        <div className={'flex flex-col'}>
+                          <div className={'real-name text-lg'}>
+                            {item.name || '匿名'}
+                          </div>
+                          <div style={{maxWidth: '240px'}} className={'text-gray-400'}>{item.formName}，{dayjs(item.createTime).format('YYYY-MM-DD HH:mm')}</div>
+                          <div className={'text-green-600 my-1'}>心愿：{item.comments}</div>
+                        </div>
+                      </Space>
+                    </div>
+                    <div className={'price text-red-500 text-xl font-bold'}>
+                      ￥{item.price}
+                    </div>
+                  </div>
+                </Cell>
+              )
+            })}
+          </InfiniteLoading>
+        </ul>
+      </Cell>
+    </div>
+  )
+}
+
+export default PayRecord