备份

package-lock.json

@@ -12,6 +12,7 @@
         "@testing-library/react": "^13.4.0",
         "@testing-library/user-event": "^13.5.0",
         "antd-mobile": "^5.27.0",
+        "axios": "^1.2.2",
         "react": "^18.2.0",
         "react-dom": "^18.2.0",
         "react-router-dom": "^6.6.2",
@@ -4882,6 +4883,29 @@
         "node": ">=4"
       }
     },
+    "node_modules/axios": {
+      "version": "1.2.2",
+      "resolved": "https://registry.npmmirror.com/axios/-/axios-1.2.2.tgz",
+      "integrity": "sha512-bz/J4gS2S3I7mpN/YZfGFTqhXTYzRho8Ay38w2otuuDR322KzFIWm/4W2K6gIwvWaws5n+mnb7D1lN9uD+QH6Q==",
+      "dependencies": {
+        "follow-redirects": "^1.15.0",
+        "form-data": "^4.0.0",
+        "proxy-from-env": "^1.1.0"
+      }
+    },
+    "node_modules/axios/node_modules/form-data": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmmirror.com/form-data/-/form-data-4.0.0.tgz",
+      "integrity": "sha512-ETEklSGi5t0QMZuiXoA/Q6vcnxcLQP5vdugSpuAyi6SVGi2clPPp+xgEhuMaHC+zGgn31Kd235W35f7Hykkaww==",
+      "dependencies": {
+        "asynckit": "^0.4.0",
+        "combined-stream": "^1.0.8",
+        "mime-types": "^2.1.12"
+      },
+      "engines": {
+        "node": ">= 6"
+      }
+    },
     "node_modules/axobject-query": {
       "version": "3.1.1",
       "resolved": "https://registry.npmmirror.com/axobject-query/-/axobject-query-3.1.1.tgz",
@@ -13215,6 +13239,11 @@
         "node": ">= 0.10"
       }
     },
+    "node_modules/proxy-from-env": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmmirror.com/proxy-from-env/-/proxy-from-env-1.1.0.tgz",
+      "integrity": "sha512-D+zkORCbA9f1tdWRK0RaCR3GPv50cMxcrz4X8k5LTSUD1Dkw47mKJEZQNunItRTkWwgtaUSo1RVFRIG9ZXiFYg=="
+    },
     "node_modules/psl": {
       "version": "1.9.0",
       "resolved": "https://registry.npmmirror.com/psl/-/psl-1.9.0.tgz",

package.json

@@ -7,6 +7,7 @@
     "@testing-library/react": "^13.4.0",
     "@testing-library/user-event": "^13.5.0",
     "antd-mobile": "^5.27.0",
+    "axios": "^1.2.2",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-router-dom": "^6.6.2",

src/pages/Bottom/index.css

@@ -1,3 +1,6 @@
+/* *{
+  touch-action:pan-y
+} */
 .app {
   height: 100vh;
   display: flex;
@@ -13,7 +16,7 @@
   flex: 1;
   display: flex;
   justify-content: center;
-  align-items: center;
+  align-items: top;
 }
 
 .adm-tab-bar {

src/pages/Bottom/index.js

@@ -26,35 +26,37 @@ export function Bottom (){
         key: '/home',
         title: '首页',
         icon: <AppOutline />,
+        badge: '1',
       },
       {
         key: '/todo',
         title: '待办',
         icon: <UnorderedListOutline />,
+        badge: '2',
       },
       {
         key: '/message',
         title: '消息',
         icon: <MessageOutline />,
+        badge: '3',
       },
       {
         key: '/me',
         title: '我的',
         icon: <UserOutline />,
+        badge: '4',
       },
     ]
   
     return (
       <TabBar activeKey={pathname} onChange={value => setRouteActive(value)}>
         {tabs.map(item => (
-          <TabBar.Item key={item.key} icon={item.icon} title={item.title} />
+          <TabBar.Item key={item.key} icon={item.icon} title={item.title} badge= {item.badge}/>
         ))}
       </TabBar>
     )
   }
-  export function Home() {
+
-    return <div>首页</div>
-  }
   
   export function Todo() {
     return <div>待办</div>

src/pages/Home/index.css

@@ -0,0 +1,15 @@
+/* .div .context {
+    width: 100%;
+    color: #ffffff;
+    justify-content: center;
+    font-size: 48px;
+    user-select: none;
+    align-items: top;
+} */
+.adm-grid-item {
+    text-align: center;
+}
+.context h2 {
+    margin: 0;
+}
+

src/pages/Home/index.js

@@ -0,0 +1,59 @@
+import React from 'react'
+import { Swiper, CapsuleTabs, Grid } from 'antd-mobile'
+import axios from 'axios';
+import './index.css'
+import ImgZZ from './../../assets/images/nav-1.png'
+import ImgHZ from './../../assets/images/nav-2.png'
+import ImgDTZF from './../../assets/images/nav-3.png'
+import ImgQCZ from './../../assets/images/nav-4.png'
+import { redirect, useNavigate } from 'react-router-dom';
+const localCatalog = [
+    { "imgSrc": ImgZZ, "title": "整租" ,"path":"/todo"},
+    { "imgSrc": ImgHZ, "title": "合租" ,"path":"/todo"},
+    { "imgSrc": ImgDTZF, "title": "地图找房" ,"path":"/message"},
+    { "imgSrc": ImgQCZ, "title": "去出租" ,"path":"/me"}
+]
+export class Home extends React.Component {
+    state = {
+        swipers: []
+    }
+    async getSwitpers() {
+        const res = await axios.get('http://localhost:8080/home/swiper')
+        console.log('轮播图信息' + res.data.body)
+        this.setState(
+            { swipers: res.data.body }
+            //     ()=>{
+            //     return{swipers:res.data.body}
+            // }
+        )
+    }
+    componentDidMount() {
+        this.getSwitpers()
+    }
+
+    renderSwipers() {
+        return this.state.swipers.map(item => (<Swiper.Item key={item.id}>
+            <img
+                src={'http://localhost:8080' + item.imgSrc}
+                style={{ width: '100%', verticalAlign: 'top' }}
+            />
+        </Swiper.Item>))
+    }
+
+    render() {
+        return <div className='context'>
+            <Swiper autoplay loop>{this.renderSwipers()}</Swiper>
+            <Grid columns={4}>
+                {
+                    localCatalog.map((item,index) => (
+                        <Grid.Item key={index} onClick={()=>{
+                            console.log("点击跳转")
+                            this.props.navigate=item.path}}>
+                            <div ><img src={item.imgSrc} /><h2>{item.title}</h2></div>
+                        </Grid.Item>
+                    ))
+                }
+            </Grid>
+        </div>
+    };
+}