Kelly

package.json

@@ -1,4 +1,3 @@
-
 {
   "name": "my-app",
   "version": "0.1.0",
@@ -8,15 +7,20 @@
     "@testing-library/jest-dom": "^5.16.1",
     "@testing-library/react": "^11.2.7",
     "@testing-library/user-event": "^12.8.3",
-    "antd-mobile": "^2.3.4",
+    "antd": "^4.20.0",
+    "antd-mobile": "^5.10.4",
     "antd-mobile-icons": "^0.2.2",
+    "antd-mobile-v2": "^2.3.4",
     "axios": "^0.25.0",
     "less": "^4.1.2",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
     "react-redux": "^7.2.6",
     "react-router-dom": "^6.2.1",
     "react-scripts": "4.0.3",
+    "redux-devtools-extension": "^2.13.9",
+    "redux-logger": "^3.0.6",
+    "redux-thunk": "^2.4.1",
     "web-vitals": "^1.1.2",
     "zent": "^9.12.4"
   },
@@ -51,4 +55,4 @@
     "gh-pages": "^3.2.3",
     "mockjs": "^1.1.0"
   }
-}
+}

src/App.js

@@ -1,16 +1,16 @@
 
-import logo from './logo.svg';
+import logo from './assets/logo.png';
 import Shop from './Components/Shop/Shop'
 import SearchResult from './Components/SearchResult/SearchResult'
 import Home from './Components/Home/Home'
 import Cart from './views/Cart/Cart'
 import Me from './views/Me/Me'
 import Product from './views/Product/Product.jsx'
-import Shop from './views/Shop/Shop'
+//import Shop from './views/Shop/Shop'
 import Pay from './views/Pay/Pay'
 import SearchField from './Components/SearchField/SearchField'
 import React, { Component } from 'react';
-import './App.css';
+import './App.less';
 import { Link, Route, BrowserRouter, Routes, Navigate } from 'react-router-dom'
 import { HashRouter, Switch } from 'react-router-dom'
 import TabDivide from 'zent/es/tabs/components/TabDivide';
@@ -22,18 +22,18 @@ function App() {
         <Route path="/" element={<Home />} />
         <Route path="/searchfield" element={<SearchField />} />
         <Route path="/shop" element={<Shop />} />
-        <Route path="/cart" element={<Cart/>}/>
-        <Route path="/me" element={<Me/>}/>
-        <Route path="/productinfo/:id" element={<Product/>}/>
-        <Route path="/shopinfo/:shopname" element={<Shop/>}/>
-        <Route path="/pay" element={<Pay/>}/>
+        <Route path="/cart" element={<Cart />} />
+        <Route path="/me" element={<Me />} />
+        <Route path="/productinfo/:id" element={<Product />} />
+        <Route path="/shopinfo/:shopname" element={<Shop />} />
+        <Route path="/pay" element={<Pay />} />
         <Route path="*" element={<Navigate to="/" />} />
         <Route path="/searchresult" element={<SearchResult />} />
         {/* <Route path="/test" element={<Test />} /> */}
       </Routes>
     </HashRouter>
     // <div>
-    //   <SearchResult />
+    //   <Home />
     // </div>
   );
 }

src/Components/Home/Home.css

@@ -24,6 +24,7 @@
     position:sticky;
     top:44px;
     z-index: 10;
+    touch-action: none;
   }
   .goods-list-bottom {
     height: 1.066667rem;
@@ -95,6 +96,7 @@
     padding: .266667rem .133333rem;
   }
   .goodsList .goods .good .good_content .price {
+    margin-top:10px ;
     font-size: .346667rem;
     color: red;
   }

src/Components/Home/Home.js

@@ -1,10 +1,10 @@
 import React, { Component } from 'react'
-import { SearchBar, Button, WhiteSpace, WingBlank, Carousel, Flex } from 'antd-mobile';
-import { Link, Route, BrowserRouter, Routes, Navigate } from 'react-router-dom'
-import { NavBar, Icon } from 'antd-mobile';
+import { SearchBar, Button, WhiteSpace, WingBlank, Carousel, Flex } from 'antd-mobile-v2';
+import { Link, Route, BrowserRouter, Routes, Navigate, useNavigate, useLocation } from 'react-router-dom'
+import { NavBar, Icon } from 'antd-mobile-v2';
 import Layout from '../Layout/Layout'
 import ProductList from '../ProductList/ProductList'
-import 'antd-mobile/dist/antd-mobile.css';  // or 'antd-mobile/dist/antd-mobile.less'
+import 'antd-mobile-v2/dist/antd-mobile.css';  // or 'antd-mobile-v2/dist/antd-mobile.css'
 import './Home.css'
 import '../../mock/user.js'
 import axios from 'axios'
@@ -18,15 +18,26 @@ import category4 from '../../assets/category4.png'
 
 const pages = [1, 2, 3, 4, 5];
 
-export default class Home extends Component {
+//高阶组件封装类组件使用router v6
+export function withRouter(Child) {
+    return (props) => {
+        const location = useLocation();
+        const navigate = useNavigate();
+        return <Child {...props} navigate={navigate} location={location} />;
+    }
+}
+
+
+class Home extends Component {
     state = {
         data: [banner1, banner2, banner3],
-        imgHeight: 176,
-        goodsList: []
+        imgHeight: 176,//轮播图的高度
+        goodsList: []//商品列表数据
 
     };
     constructor(props) {
         super(props);
+        console.log("constructor");
         this.searchtext = React.createRef();
     }
     UNSAFE_componentWillMount() {
@@ -46,6 +57,7 @@ export default class Home extends Component {
     loadProductdata() {
         axios.get('/').then(res => {
             //输出商品信息
+            console.log("loadProductdata");
             console.log(res.data);
             console.log(res.data.data.goodsList);
             this.setState({ goodsList: res.data.data.goodsList });
@@ -58,20 +70,33 @@ export default class Home extends Component {
             this.handleBtnClick()
         }
     }
+    //搜索框事件处理
     searchBarhandle = () => {
-        this.props.history.push('/searchfield');
+        //跳转至搜索页面
+        this.props.navigate('/searchfield');
     }
-    beforeChange = (from, to) => {
+    beforechange(from, to) {
         console.log(`slide from ${from} to ${to}`)
     }
-    afterChange = (index) => {
+    afterchange(index) {
         console.log('slide to', index)
     }
+    //轮播图片加载事件
+    imgonload() {
+        window.dispatchEvent(new Event('resize'));
+        this.setState({ imgHeight: 'auto' });
+    }
+    //商品卡片点击事件
+    handleBtnClick(goods_id) {
+        console.log(goods_id);
+        //跳转至商品详情页面
+        //this.props.navigate(`/goodsdetails${goods_id}`);
+    }
     render() {
         return (
             <div>
                 <SearchBar placeholder="请输入您想要查找的商品"
-                    onFocus={this.searchBarhandle}
+                    onFocus={() => { this.searchBarhandle() }}
                     className="searchbar"
                 />
 
@@ -82,7 +107,9 @@ export default class Home extends Component {
                         autoplay={false}
                         infinite
                         beforeChange={(from, to) => console.log(`slide from ${from} to ${to}`)}
+                        //beforeChange={(from, to) => { this.beforechange(from, to) }}
                         afterChange={index => console.log('slide to', index)}
+                    //afterChange={(index) => { this.afterchange(index) }}
                     >
                         {this.state.data.map(val => (
                             <a
@@ -95,11 +122,7 @@ export default class Home extends Component {
                                     src={val}
                                     alt=""
                                     style={{ width: '100%', verticalAlign: 'top' }}
-                                    onLoad={() => {
-                                        // fire window resize event to change height
-                                        window.dispatchEvent(new Event('resize'));
-                                        this.setState({ imgHeight: 'auto' });
-                                    }}
+                                    onLoad={() => { this.imgonload() }}
                                 />
                             </a>
                         ))}
@@ -142,7 +165,9 @@ export default class Home extends Component {
                                     {item.goods.map(v => (
                                         <div key={v.goods_id} className="good">
                                             <div className="good_content"
-                                                onClick={() => this.props.history.push(`/goodsdetail/${v.goods_id}`)}
+                                                //onClick={() => this.props.history.push(`/goodsdetail/${v.goods_id}`)}
+                                                //箭头函数绑定方式进行传参
+                                                onClick={() => this.handleBtnClick(v.goods_id)}
                                             >
                                                 <img src={v.goods_img_replace} alt="" />
                                                 <div className="describe ellipsis-1">{v.goods_name}</div>
@@ -174,3 +199,4 @@ export default class Home extends Component {
         )
     }
 }
+export default withRouter(Home);

src/Components/Layout/Layout.js

@@ -1,5 +1,5 @@
 import React, { Component } from 'react'
-import { NavBar, TabBar } from 'antd-mobile'
+import { NavBar, TabBar } from 'antd-mobile-v2'
 import {
     AppOutline,
     MessageOutline,

src/Components/SearchField/SearchField.js

@@ -1,20 +1,85 @@
 import React, { Component } from 'react'
-import { SearchBar } from 'antd-mobile';
+import { SearchBar } from 'antd-mobile-v2';
+import { Link, Route, BrowserRouter, Routes, Navigate, useNavigate, useLocation } from 'react-router-dom'
 import axios from 'axios'
 
-export default class SearchField extends Component {
+//高阶组件封装类组件使用router v6
+export function withRouter(Child) {
+    return (props) => {
+        const location = useLocation();
+        const navigate = useNavigate();
+        return <Child {...props} navigate={navigate} location={location} />;
+    }
+}
+
+class SearchField extends Component {
+    //受控组件方式获取ref
+    state = {
+        value: '',
+    };
+    componentDidMount() {
+        this.autoFocusInst.focus();
+    }
+    onFocus = () => {
+        console.log('onFocus');
+    }
+    onChange = (value) => {
+        this.setState({ value });
+        //console.log(value);
+    };
+    onBlur = () => {
+        console.log("onBlur");
+    }
+    onClear = (value) => {
+        console.log(value, 'onClear')
+    }
+    onSubmit = (value) => {
+        //获取到用户要搜索的关键词
+        console.log(value, 'onSubmit');
+        //页面跳转
+        this.props.navigate("/searchresult", { state: value });
+    }
+    onCancel = () => {
+        console.log('onCancel');
+    }
+    searchBarhandle() {
+        const inpVal = this.input.value;
+        console.log(inpVal);
+    }
+    clear = () => {
+        this.setState({ value: '' });
+    };
+    handleClick = () => {
+        this.manualFocusInst.focus();
+    }
+
     render() {
         return (
             <div>
-                <SearchBar placeholder="请输入您想要查找的商品"
-                    onFocus={this.searchBarhandle}
+                <SearchBar
+                    //ref={input => this.input = input}
+                    placeholder="请输入您想要查找的商品"
+                    //onFocus={() => { this.searchBarhandle() }}
+                    //onFocus={this.search.bind(this)}
+                    ref={ref => this.autoFocusInst = ref}
                     className="searchbar"
+                    value={this.state.value}
+                    //placeholder="Search"
+                    onSubmit={this.onSubmit}
+                    onClear={value => console.log(value, 'onClear')}
+                    onFocus={this.onFocus}
+                    onBlur={this.onBlur}
+                    onCancel={this.onCancel}
+                    showCancelButton
+                    onChange={this.onChange}
                 />
             </div>
         )
     }
 }
 
+export default withRouter(SearchField);
+