个人中心基础框架建设

components/NavHeader/index.tsx

@@ -2,7 +2,7 @@ import React, { useContext, useEffect, useState } from "react";
 import { Avatar, Button, Dropdown, Space, Tabs } from "antd";
 import type { TabsProps } from "antd";
 import styles from "./index.module.scss";
-import { useRouter } from "next/router";
+import { Router, useRouter } from "next/router";
 import LoginModal from "~/components/loginModal";
 import PublishModal from "./publishModal";
 import JoinModal from "./joinModal";
@@ -120,6 +120,14 @@ export default function NavHeader() {
             <Dropdown
               menu={{
                 items: [
+                  {
+                    key: "2",
+                    label: (
+                      <div onClick={() => router.push("/personalCenter/mallOrders")}>
+                        我的订单
+                      </div>
+                    ),
+                  },
                   { key: "1", label: <div onClick={onLogout}>退出登录</div> },
                 ],
               }}

components/layout/index.tsx

@@ -41,6 +41,7 @@ const footerStyle: React.CSSProperties = {
 type Props = {
   children?: React.ReactNode;
   layoutStyle?: React.CSSProperties;
+  contentStyle?: React.CSSProperties;
   hideFooter?: boolean;
 };
 
@@ -57,9 +58,17 @@ export default function LayoutView(props: Props) {
         <Header style={headerStyle}>
           <NavHeader />
         </Header>
-        <Content className={styles.content}>{props.children}</Content>
+        <Content className={styles.content} style={props.contentStyle}>
+          {props.children}
+        </Content>
         {!props.hideFooter && (
-          <Footer style={ includesPage.includes(router.pathname) ? {...footerStyle,...homeStyle} : footerStyle}>
+          <Footer
+            style={
+              includesPage.includes(router.pathname)
+                ? { ...footerStyle, ...homeStyle }
+                : footerStyle
+            }
+          >
             <FooterView></FooterView>
           </Footer>
         )}

pages/personalCenter/components/sider/index.module.scss

+.Sider {
+  width: 129px;
+  background: #fafafa;
+}
+
+.menu {
+  width: 128px;
+  min-height: 507px;
+  background: #fafafa;
+  border-right: 0 !important;
+
+  :global .ant-menu-title-content {
+    font-size: 12px;
+  }
+}
+
+.title {
+  font-size: 14px;
+  font-family: MicrosoftYaHei;
+  color: #000;
+  line-height: 19px;
+  padding-top: 18px;
+  padding-left: 27px;
+  padding-bottom: 8px;
+  border-bottom: 1px solid #e5e5e5;
+}

pages/personalCenter/components/sider/index.tsx

+import LayoutView from "~/components/layout";
+import React, { useState } from "react";
+import type { MenuProps } from "antd";
+import { Button, Menu } from "antd";
+import styles from "./index.module.scss";
+import Router from "next/router";
+
+function getItem(
+  label: React.ReactNode,
+  key: React.Key,
+  icon?: React.ReactNode,
+  children?: MenuItem[],
+  type?: "group"
+): MenuItem {
+  return {
+    key,
+    icon,
+    children,
+    label,
+    type,
+  } as MenuItem;
+}
+
+const items: MenuItem[] = [
+  getItem("我的订单", "1", undefined, [
+    getItem("服务订单", "/personalCenter/servicesOrders"),
+    getItem("租赁订单", "1-1"),
+    getItem("商城订单", "/personalCenter/mallOrders"),
+    getItem("培训订单", "1-2"),
+  ]),
+  getItem("账户信息", "2"),
+  getItem("优惠券卡包", "3"),
+  getItem("福利活动", "4"),
+  getItem("身份认证", "5"),
+  getItem("客服中心", "6"),
+  getItem("推广海报", "7"),
+  getItem("副业赚钱", "8"),
+];
+
+type MenuItem = Required<MenuProps>["items"][number];
+
+type Props = {
+  style?: React.CSSProperties;
+  selectedKeys?: string[];
+};
+
+export default function Sider(props: Props) {
+  return (
+    <div className={styles.Sider} style={props.style}>
+      <div className={styles.title}>个人中心</div>
+      <Menu
+        selectedKeys={props.selectedKeys}
+        openKeys={["1"]}
+        mode="inline"
+        items={items}
+        className={styles.menu}
+        onClick={(info) => {
+          Router.push(info.key);
+        }}
+      />
+    </div>
+  );
+}

pages/personalCenter/mallOrders/index.module.scss

+.font1 {
+  font-size: 14px;
+  font-family: MicrosoftYaHei;
+  color: #9b9b9b;
+  line-height: 19px;
+}

pages/personalCenter/mallOrders/index.page.tsx

+import { TabsProps, Tabs } from "antd";
+import {useRouter} from "next/router";
+import { useEffect, useState } from "react";
+import LayoutView from "~/components/layout";
+import Sider from "../components/sider";
+import styles from "./index.module.scss";
+
+const onChange = (key: string) => {
+  console.log(key);
+};
+
+const items: TabsProps["items"] = [
+  {
+    key: "1",
+    label: `Tab 1`,
+    children: `Content of Tab Pane 1`,
+  },
+  {
+    key: "2",
+    label: `Tab 2`,
+    children: `Content of Tab Pane 2`,
+  },
+  {
+    key: "3",
+    label: `Tab 3`,
+    children: `Content of Tab Pane 3`,
+  },
+];
+
+export default function MallOrder() {
+  const router = useRouter();
+
+  return (
+    <>
+      <LayoutView
+        layoutStyle={{ backgroundColor: "#fff" }}
+        contentStyle={{ width: 1000, marginLeft: 526 }}
+      >
+        <Sider
+          style={{
+            position: "absolute",
+            left: -37,
+            transform: "translateX(-100%)",
+          }}
+          selectedKeys={[router.pathname]}
+        ></Sider>
+        <div>
+          <div className={styles.font1}>商城订单</div>
+          <Tabs defaultActiveKey="1" items={items} onChange={onChange} />
+        </div>
+      </LayoutView>
+    </>
+  );
+}

pages/personalCenter/servicesOrders/index.module.scss

+.font1 {
+  font-size: 14px;
+  font-family: MicrosoftYaHei;
+  color: #9b9b9b;
+  line-height: 19px;
+}

pages/personalCenter/servicesOrders/index.page.tsx

+import { TabsProps, Tabs } from "antd";
+import {useRouter} from "next/router";
+import { useEffect, useState } from "react";
+import LayoutView from "~/components/layout";
+import Sider from "../components/sider";
+import styles from "./index.module.scss";
+
+const onChange = (key: string) => {
+  console.log(key);
+};
+
+const items: TabsProps["items"] = [
+  {
+    key: "1",
+    label: `Tab 1`,
+    children: `Content of Tab Pane 1`,
+  },
+  {
+    key: "2",
+    label: `Tab 2`,
+    children: `Content of Tab Pane 2`,
+  },
+  {
+    key: "3",
+    label: `Tab 3`,
+    children: `Content of Tab Pane 3`,
+  },
+];
+
+export default function ServicesOrder() {
+  const router = useRouter();
+
+  return (
+    <>
+      <LayoutView
+        layoutStyle={{ backgroundColor: "#fff" }}
+        contentStyle={{ width: 1000, marginLeft: 526 }}
+      >
+        <Sider
+          style={{
+            position: "absolute",
+            left: -37,
+            transform: "translateX(-100%)",
+          }}
+          selectedKeys={[router.pathname]}
+        ></Sider>
+        <div>
+          <div className={styles.font1}>服务订单</div>
+          <Tabs defaultActiveKey="1" items={items} onChange={onChange} />
+        </div>
+      </LayoutView>
+    </>
+  );
+}