feat(dialog):完成了订阅弹窗的基本功能

src/app/_components/dialog/dialog.tsx

@@ -0,0 +1,33 @@
+import React from 'react'; // 引入 React
+
+// 定义 GeneralModal 组件，接收 isOpen 和 children 作为 props
+const GeneralModal = ({ isOpen, onClick, children }: { isOpen: boolean, onClick: () => void | null, children: React.ReactNode }) => {
+    // 如果 isOpen 是 false，则不显示模态框，直接返回 null
+    if (!isOpen) {
+        return null;
+    }
+
+    // 定义 modalClass 函数，返回模态框的样式类名字符串
+    const modalClass = (): string => {
+        // 返回样式类名字符串
+        return "w-80 h-80";
+    }
+
+    // 渲染模态框
+    return (
+        <div className="fixed top-0 left-0 w-full h-full flex justify-center items-center bg-white z-101">
+            {/* 模态框 */}
+            <div className={"rounded-3px border border-gray-300 shadow-md relative " + modalClass()}>
+                {/* 返回按钮 */}
+
+                {/* 模态框的内容 */}
+                {children}
+                <div className='w-15 shrink-0 b-1 border-black flex mt-100% ml-80% border-rd-10 justify-center'>
+                    <button onClick={onClick}  className='text-4'>返回</button>
+                </div>
+            </div>
+        </div>
+    );
+};
+
+export default GeneralModal; // 导出 GeneralModal 组件

src/app/dialog/book-dialog/page.tsx

@@ -0,0 +1,54 @@
+"use client";
+
+import React, { useState } from "react";
+import Image from "next/image";
+
+const Reserved = () => {
+    const [selectedButton, setSelectedButton] = useState<number | null>(null); // 追踪选中的按钮
+
+    const handleButtonClick = (button:number) => {
+        if (selectedButton === button) {
+            // 如果点击的是当前选中的按钮，则取消选中状态
+            setSelectedButton(null);
+        } else {
+            // 否则设置点击的按钮为选中状态
+            setSelectedButton(button);
+        }
+    };
+
+    return (
+        <div className="flex flex-col items-center justify-center">
+            <div className="w-36.75 text-[#252525] text-3.75 font-500 lh-6 m-auto mt-2">「心智与阅读系列」</div>
+            <div className="mt-6">
+                <button className={`w-84.25 h-10 shrink-0 border-rd-1.25 border-1 border-solid bg-[#F5F7FB] justify-center ${selectedButton === 1 ? 'border-[#45E1B8]' : ''}`} onClick={() => handleButtonClick(1)}>
+                    <div className="flex ml-2.5 items-center ">
+                        <div className="w-4.25 h-6.158 shrink-0 text-[#252525] text-3.5 font-700 lh-6">¥10</div>
+                        <div className="w-29.25 ml-1 h-6.158 shrink-0 text-[#B5B5B5] text-3 font-500 lh-6">一次购买，永久有效</div>
+                        {selectedButton === 1 && (
+                        <Image src="/images/dialog/check.png" alt="check" width={20} height={20} className="ml-39 w-5 h-5" />
+                    )}
+                    </div>
+
+                </button>
+                <button className={`block w-84.25 h-10 shrink-0 border-rd-1.25 border-1 mt-2 border-solid bg-[#F5F7FB] ${selectedButton === 2 ? 'border-[#45E1B8]' : ''}`} onClick={() => handleButtonClick(2)}>
+                    <div className="flex ml-2.5 items-center  ">
+                        <div className="w-5 text-[#252525] text-3.5 font-700 lh-6">¥20</div>
+                        <div className="w-33.5 ml-1 text-[#B5B5B5] text-3 font-500 lh-6 ">限时购买，有效期30天</div>
+                        {selectedButton === 2 && (
+                        <Image src="/images/dialog/check.png" alt="check" width={20} height={20} className="right-8 absolute w-5 h-5" />
+                    )}
+                    </div>
+                </button>
+            </div>
+            <div className="w-85 mt-4 text-[#666] text-2.5 font-not-italic font-500 lh-6 m-auto">*内容为第三方个人创建，购买前请知晓内容，服务及相关风险，购买后 24 小时内可申请退款</div>
+            <div className="w-85.75 h-10 shrink-0 mt-8">
+                <button>
+                    {/* 支付跳转 */}
+                    <Image src="/images/dialog/pay.png" alt="pay" width={343} height={40} className="h-10 w-85.75" />
+                </button>
+            </div>
+        </div>
+    );
+}
+
+export default Reserved;

src/app/dialog/layout.tsx

@@ -0,0 +1,36 @@
+"use client";
+
+
+import Image from "next/image";
+import React from "react";
+import { useRouter } from "next/navigation";
+import { TRPCReactProvider } from "@/trpc/react";
+
+
+const dialogLayout=({children}:{children:React.ReactNode})=>{
+    const router = useRouter();
+
+    const closeModal = () => {
+        router.back();
+    }
+
+    return(
+
+        <html>
+            <body>
+
+                <div className="flex items-center w-93.75 h-203 bg-[#606062] z-1">
+                    <div className="w-93.75 h-82.25 mt-120.75 shrink-0 border-rd-[20px_20px_0px_0px] bg-[#FFF]">
+                        <button className="w-6 h-6 shrink-0 ml-83.75 mt-4" onClick={closeModal}>
+                            <Image src={"/images/dialog/close-small.png"} alt={"close"} width={24} height={24}></Image>
+                        </button>
+                        <TRPCReactProvider>{children}</TRPCReactProvider>
+                    </div>
+                </div>
+            </body>
+        </html>
+    );
+
+}
+
+export default dialogLayout;

src/app/login/page.tsx

@@ -2,16 +2,19 @@
 
 import React, { useState } from "react";
 import Image from "next/image";
-import GeneralModal from "../dialog/dialog"; // 引入GeneralModal组件
+import GeneralModal from "../_components/dialog/dialog"; // 引入GeneralModal组件
+import { useRouter } from "next/navigation";
 
 const Login = () => {
     const [checked, setChecked] = useState(false);
     const [modalVisible, setModalVisible] = useState(false); // 用于管理模态框可见性的状态
+    const router = useRouter();
 
 
     const handleCancel = () => {
         // 处理模态框取消/关闭的函数
         setModalVisible(false); // 当取消时隐藏模态框
+        router.back();
     };
 
       // 定义关闭模态框的函数
@@ -27,7 +30,7 @@ const Login = () => {
         alert("请先勾选同意!");
     }
     };
-    
+
     // const [scanning, setScanning] = useState(false);
     // const handleScanLogin = () => {
     //      // 在此处可以触发后端请求，以获取微信用户的授权信息

src/app/wallet/page.tsx

@@ -0,0 +1,20 @@
+
+import Image from "next/image"
+import React from "react"
+
+const wallet=()=>{
+    return(
+        <div>
+            <div className="flex items-center mt-8 justify-center ">
+                <Image src={"/images/wallet/bg.png"} alt={"bg"} width={343} height={164}></Image>
+                {/* <div>
+                    <div className="w-16 text-[#FFF] text-4 font-not-italic font-400 lh-6 ml-0">
+                        账户余额
+                    </div>
+                </div> */}
+            </div>
+        </div>
+    );
+}
+
+export default wallet;