Skip to content

Commit

Permalink
<feat>(search):完成搜索页面的样式设置
Browse files Browse the repository at this point in the history
  • Loading branch information
@clara-sq
clara-sq committed Apr 4, 2024
2 parents 6b430ed + 07220d6 commit 670d29f
Show file tree
Hide file tree
Showing 4 changed files with 159 additions and 19 deletions.
52 changes: 52 additions & 0 deletions public/images/wallet/bg.svg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
10 changes: 5 additions & 5 deletions src/app/user-detailed/page.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -68,8 +68,11 @@ function User() {
<div className="flex">
<a href="#"
className="w-7 h-6 mr-8 text-[#B5B5B5] font-source-han-sans-sc text-sm font-normal leading-6">专栏</a>
<a href="#"
className="w-8 h-6 text-gray-900 font-source-han-sans-sc text-base font-medium leading-6 ">小课</a>
<div className={"flex-col"}>
<a href="#"
className="text-[#252525] text-3.5 font-500 lh-6">小课</a>
<div className={"ml-2.25 mt-1 w-2.75 h-1 border-rd-2 bg-[#45E1B8]"}></div>
</div>
</div>

{/* 内容区域 */}
Expand All @@ -92,15 +95,12 @@ function User() {
</div>
</div>
</div>

<div className={"flex justify-center mt-18"}>
<div className={"w-26 h-7 pl-3.44 shrink-0 border-rd-9 bg-[#DAF9F1]"}>
<a href="#"
className={"w-19.12225 h-6.25 shrink-0 text-[#1DB48D] text-3 font-500 lh-6"}>更多优质内容</a>
</div>
</div>


</div>


Expand Down
8 changes: 6 additions & 2 deletions src/app/user/page.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -47,8 +47,12 @@ function User() {
<div className="flex">
<a href="#"
className="w-7 h-6 mr-8 text-[#B5B5B5] font-source-han-sans-sc text-sm font-normal leading-6">专栏</a>
<a href="#"
className="w-8 h-6 text-gray-900 font-source-han-sans-sc text-base font-medium leading-6 ">小课</a>
<div className={"flex-col"}>
<a href="#"
className="text-[#252525] text-3.5 font-500 lh-6">小课</a>
<div className={"ml-2.25 mt-1 w-2.75 h-1 border-rd-2 bg-[#45E1B8]"}></div>
</div>

</div>

{/* 内容区域 */}
Expand Down
108 changes: 96 additions & 12 deletions src/app/wallet/page.tsx
View file
Original file line number Diff line number Diff line change
@@ -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<Array<{ name: string; date: string; time:string; sign:string; amount: number }>>([]);
const [transactionType, setTransactionType] = useState("expenditure"); // 跟踪交易类型

const [selectedButton, setSelectedButton] = useState<number | null>(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 (
<div>
<div className="flex items-center mt-8 justify-center">
<Image src={"/images/wallet/bg.png"} alt={"bg"} width={343} height={164} className="w-85.75 h-41 shrink-0"></Image>
<div className="fixed w-85.75 h-41 shrink-0">
<div className="w-85.75 h-41 relative">
<Image src={"/images/wallet/bg.svg"} alt={"bg"} width={343} height={164} className="w-85.75 h-41 shrink-0"></Image>
<div className=" w-85.75 h-41 shrink-0 absolute top-0">
<div className="flex flex-col">
<div className="w-16 text-[#FFF] text-4 font-not-italic font-400 lh-6 ml-6 mt-6">
账户余额
Expand All @@ -43,25 +95,57 @@ const wallet = () => {
</div>
</div>
</div>
</div>


</div>

<div className="w-14 h-7.75 shrink-0 mt-6 ml-9 flex flex-col justify-center items-center">
<div className="text-[#252525] text-3.5 font-not-italic font-500 lh-6">收支明细</div>
<div className="w-2.75 h-1 shrink-0 border-rd-2 bg-[#45E1B8]"></div>
</div>
<div className="flex mt-4 ml-9">
<button className={`w-15 h-6 shrink-0 border-rd-1 ${selectedButton === 1 ? 'bg-#daf9f1 text-#1db48d' : 'bg-[#F5F7FB] text-[#252525]'}`} onClick={() => handleButtonClick(1) }>
<button className={`w-15 h-6 shrink-0 border-rd-1 ${selectedButton === 1 ? 'bg-#daf9f1 text-#1db48d' : 'bg-[#F5F7FB] text-[#252525]'}`} onClick={() => handleButtonClick(1, "expenditure") }>
支出
</button>
<button className={`w-15 h-6 shrink-0 border-rd-1 ml-6 ${selectedButton === 2 ? 'bg-#daf9f1 text-#1db48d' : ' bg-[#F5F7FB] text-[#252525]'}`} onClick={() => handleButtonClick(2)}>
<button className={`w-15 h-6 shrink-0 border-rd-1 ml-6 ${selectedButton === 2 ? 'bg-#daf9f1 text-#1db48d' : ' bg-[#F5F7FB] text-[#252525]'}`} onClick={() => handleButtonClick(2, "income")}>
收入
</button>
</div>
<div className="flex items-center justify-center">
<div></div>
<div>
<div className="flex items-center justify-center mt-4 ml-6.5 w-80.5 h-14.25 shrink-0 " >
<div className="w-80.5 h-14.25 shrink-0 ">
{payments.map((payment, index) => (
<div key={index} >
{transactionType === "expenditure" && payment.sign === "-¥" && (
<div>
<div className="ml-0">
<div className="w-27 text-[#252525] text-3.25 font-not-italic font-400 lh-6">{payment.name}</div>
<div className="w-26.5 h-6.25 shrink-0 text-[#999] text-2.75 font-not-italic font-400 lh-6 mt--1">{payment.date} {payment.time}</div>
</div>
<div className="w-20.75 h-5.5 shrink-0 text-[#252525] text-3.75 font-700 lh-6 ml-62.75 mt--11">{payment.sign}{payment.amount}</div>
<div className="border-1 mt-5"></div>
<div className="mt-4"> </div>
</div>
)}
{transactionType === "income" && payment.sign === "+¥" && (
<div>
<div className="ml-0">
<div className="w-27 text-[#252525] text-3.25 font-not-italic font-400 lh-6">{payment.name}</div>
<div className="w-26.5 h-6.25 shrink-0 text-[#999] text-2.75 font-not-italic font-400 lh-6 mt--1">{payment.date} {payment.time}</div>
</div>
<div className="w-20.75 h-5.5 shrink-0 text-[#252525] text-3.75 font-700 lh-6 ml-62.75 mt--11">{payment.sign}{payment.amount}</div>
<div className="border-1 mt-5"></div>
<div className="mt-4"> </div>
</div>
)}
</div>
))}
</div>
</div>
</div>
</div>
);
}

export default wallet;
export default Wallet;

0 comments on commit 670d29f

Please sign in to comment.