提交代码

src/bszx/pay-log/pay-log.tsx

@@ -0,0 +1,104 @@
+import {Avatar, Button, Cell, Space} from '@nutui/nutui-react-taro'
+import {useEffect, useState, CSSProperties} from "react";
+import {BszxPay} from "@/api/bszx/bszxPay/model";
+import {myPageBszxPay} from "@/api/bszx/bszxPay";
+import {InfiniteLoading} from '@nutui/nutui-react-taro'
+import dayjs from "dayjs";
+import navTo from "@/utils/common";
+
+const InfiniteUlStyle: CSSProperties = {
+  height: '80vh',
+  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 reload = async () => {
+    myPageBszxPay({page}).then(res => {
+      if (res?.list && res?.list.length > 0) {
+        const newList = list?.concat(res.list)
+        setList(newList);
+        setHasMore(true)
+      } else {
+        setHasMore(false)
+      }
+    })
+  }
+
+  const reloadMore = async () => {
+    setPage(page + 1)
+    reload();
+  }
+
+  useEffect(() => {
+    setPage(2)
+    reload()
+  }, [])
+
+  return (
+    <div className={'px-2'}>
+      <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: '200px'}} 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'}>
+                      <span className={' text-red-500 text-xl text-center font-bold'}>￥{item.price}</span>
+                      <Button className={'whitespace-nowrap'} onClick={() => {
+                        navTo('/bszx/pay-cert/pay-cert?id=' + item.id, true)
+                      }}>
+                        查看证书
+                      </Button>
+                    </div>
+                  </div>
+                </Cell>
+              )
+            })}
+          </InfiniteLoading>
+        </ul>
+      </Cell>
+    </div>
+  )
+}
+
+export default PayRecord