From 8b19ec2432b5fdeefc4d981a33eb47fb3b2f615f Mon Sep 17 00:00:00 2001 From: opacity <2807268479@qq.com> Date: Thu, 4 Apr 2024 15:38:20 +0800 Subject: [PATCH 1/3] =?UTF-8?q?feat(wallet):=E5=AE=8C=E6=88=90=E4=BA=86?= =?UTF-8?q?=E9=92=B1=E5=8C=85=E7=9A=84=E5=9F=BA=E6=9C=AC=E5=8A=9F=E8=83=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- public/images/wallet/bg.svg | 52 +++++++++++++++++ src/app/wallet/page.tsx | 108 ++++++++++++++++++++++++++++++++---- 2 files changed, 148 insertions(+), 12 deletions(-) create mode 100644 public/images/wallet/bg.svg 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/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 From 6515ac02c2594a70aedb716c48358b53862dafb4 Mon Sep 17 00:00:00 2001 From: opacity <2513473008@qq.com> Date: Thu, 4 Apr 2024 21:39:52 +0800 Subject: [PATCH 2/3] =?UTF-8?q?fix(user)=E4=BF=AE=E6=94=B9=E9=83=A8?= =?UTF-8?q?=E5=88=86=E6=A0=B7=E5=BC=8F?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/app/user/page.tsx | 8 ++++++-- 1 file changed, 6 insertions(+), 2 deletions(-) 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() {
专栏 - 小课 +
+ 小课 +
+
+
{/* 内容区域 */} From 07220d6f57c42322fbba4b14076cf4eb2067bcce Mon Sep 17 00:00:00 2001 From: opacity <2513473008@qq.com> Date: Thu, 4 Apr 2024 21:40:20 +0800 Subject: [PATCH 3/3] =?UTF-8?q?fix(user-detail)=E4=BF=AE=E6=94=B9=E9=83=A8?= =?UTF-8?q?=E5=88=86=E6=A0=B7=E5=BC=8F?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/app/user-detailed/page.tsx | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) 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() {
-
更多优质内容
- -