diff --git a/public/images/wallet/bg.svg b/public/images/wallet/bg.svg new file mode 100644 index 0000000..e46d7ee --- /dev/null +++ b/public/images/wallet/bg.svg @@ -0,0 +1,52 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/app/user-detailed/page.tsx b/src/app/user-detailed/page.tsx index 3fc441c..f1bc776 100644 --- a/src/app/user-detailed/page.tsx +++ b/src/app/user-detailed/page.tsx @@ -68,8 +68,11 @@ function User() {
专栏 - 小课 +
+ 小课 +
+
{/* 内容区域 */} @@ -92,15 +95,12 @@ function User() { -
更多优质内容
- - diff --git a/src/app/user/page.tsx b/src/app/user/page.tsx index 24d27ab..a414157 100644 --- a/src/app/user/page.tsx +++ b/src/app/user/page.tsx @@ -47,8 +47,12 @@ function User() {
专栏 - 小课 +
+ 小课 +
+
+
{/* 内容区域 */} diff --git a/src/app/wallet/page.tsx b/src/app/wallet/page.tsx index 949cb7a..7951193 100644 --- a/src/app/wallet/page.tsx +++ b/src/app/wallet/page.tsx @@ -1,28 +1,80 @@ "use client"; +import { time } from "console"; import Image from "next/image" -import React, {useState} from "react" +import React, {useState, useEffect} from "react" +import { string } from "zod"; -const wallet = () => { +const Wallet = () => { let count = 1234.01; let frozen = 1234.22; - let cashable = 1234.78; + let cashable = 12349.8; + const [payments, setPayments] = useState>([]); + const [transactionType, setTransactionType] = useState("expenditure"); // 跟踪交易类型 - const [selectedButton, setSelectedButton] = useState(1); // 追踪选中的按钮 + useEffect(() => { + const fetchData = async () => { + try { + const data = await fetchDataFromDatabase(); + if (Array.isArray(data)) { + const parsedData = data.map(item => ({ + name: item.name as string, + date: item.date as string, + time:item.time as string, + amount: item.amount as number, + sign:item.sign as string, + })); + setPayments(parsedData); + } else { + console.error('Data fetched is not in the expected format.'); + } + } catch (error) { + console.error('Error fetching data:', error); + } + }; + + fetchData(); + }, []); - const handleButtonClick = (button:number) => { + // 模拟从数据库中获取数据的函数 + const fetchDataFromDatabase = () => { + return new Promise((resolve, reject) => { + // 这里可以模拟异步操作，比如从服务器端获取数据 + setTimeout(() => { + // 模拟从数据库中获取的数据 + const data = [ + { name: '《xx》加速计划', date: '2024-09-09', time:'14: 32', sign:'-¥', amount: 1234.01 }, + { name: '《xx》加速计划', date: '2024-09-09', time:'14: 32', sign:'-¥', amount: 1234.02 }, + { name: '《xx》加速计划', date: '2024-09-09', time:'14: 32', sign:'-¥', amount: 1234.03 }, + { name: '提现', date: '2024-09-09', time:'14: 32', sign:'+¥', amount: 1234.01 }, + { name: '提现', date: '2024-09-09', time:'14: 32', sign:'+¥', amount: 1234.02 }, + { name: '提现', date: '2024-09-09', time:'14: 32', sign:'+¥', amount: 1234.03 }, + ]; + resolve(data); + }, 1000); // 模拟延迟 1 秒钟 + }); + }; + + + const [selectedButton, setSelectedButton] = useState(1); // 追踪选中的按钮 + + const handleButtonClick = (button: number, type : string) => { if (selectedButton !== button) { // 如果点击的是当前选中的按钮，则取消选中状态 setSelectedButton(button); + setTransactionType(type); } }; + + return (
- {"bg"} -
+
+ {"bg"} +
账户余额 @@ -43,6 +95,9 @@ const wallet = () => {
+
+ +
@@ -50,18 +105,47 @@ const wallet = () => {
- -
-
-
+
+
+
+ {payments.map((payment, index) => ( +
+ {transactionType === "expenditure" && payment.sign === "-¥" && ( +
+
+
{payment.name}
+
{payment.date} {payment.time}
+
+
{payment.sign}{payment.amount}
+
+
+
+ )} + {transactionType === "income" && payment.sign === "+¥" && ( +
+
+
{payment.name}
+
{payment.date} {payment.time}
+
+
{payment.sign}{payment.amount}
+
+
+
+ )} +
+ ))} +
+
); } -export default wallet; \ No newline at end of file +export default Wallet; \ No newline at end of file