Skip to content

肖康 / Europa-web

Go to a project
Commit 4f1f920a by 肖康
Options

404页面

parent b858d2e6
Inline Side-by-side
Showing with 260 additions and 115 deletions
public/index.html
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en"> <html lang="en">
<head>
<meta charset="utf-8" /> <head>
<link rel="icon" href="%PUBLIC_URL%/favicon.ico" /> <meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" /> <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
<meta name="theme-color" content="#000000" /> <meta name="viewport" content="width=device-width, initial-scale=1" />
<meta <meta name="keywords" content="">
name="description" <meta name="description" content="" />
content="Web site created using create-react-app" <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
/>
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" /> <title>麒麟电子商城</title>
</head>
<title>麒麟电子商城</title>
</head> <body>
<body> <noscript>You need to enable JavaScript to run this app.</noscript>
<noscript>You need to enable JavaScript to run this app.</noscript> <div id="root"></div>
<div id="root"></div> </body>
</body>
</html> </html>
\ No newline at end of file
src/components/ListNoData/index.less 0 → 100644
.lists-no-datax{
background: #fff;
text-align: center;
padding: 40px;
height: auto;
img{
width: 116px;
height: 116px;
display: block;
margin: 0 auto;
}
p{
font-size: 14px;
font-weight: bold;
color: #313131;
margin-top: 32px;
}
}
\ No newline at end of file
src/components/ListNoData/index.min.css 0 → 100644
.lists-no-datax{background:#fff;text-align:center;padding:40px;height:auto}.lists-no-datax img{width:116px;height:116px;display:block;margin:0 auto}.lists-no-datax p{font-size:14px;font-weight:bold;color:#313131;margin-top:32px}
\ No newline at end of file
src/components/ListNoData/index.tsx 0 → 100644
import './index.min.css'
const ListNoData=()=>{
return (
<>
<div className='lists-no-datax'>
<img src={require('../../images/nodata.png')} alt="" />
<p>很抱歉！暂无数据</p>
</div>
</>
)
}
export default ListNoData
\ No newline at end of file
src/components/QqIcon/index.tsx
import { useContext } from "react";
import { CommonConfigDataContext } from "../../contexts/CommonConfigDataContext";
const QqIcon = () => { const QqIcon = () => {
const commonConfigData = useContext(CommonConfigDataContext);
return ( return (
<> <>
<a href='/' target='_blank' title='QQ咨询'><img style={{width:'25px',height:'25px'}} src={require('../../images/qq.png')} alt='' /></a> <a href={commonConfigData.qqurl} rel="noreferrer" target='_blank' title='QQ咨询'><img style={{width:'25px',height:'25px'}} src={require('../../images/qq.png')} alt='' /></a>
</> </>
) )
......
src/components/RouterCus/index.tsx
...@@ -11,6 +11,10 @@ import Notice from '../../pages/Notice'; ...@@ -11,6 +11,10 @@ import Notice from '../../pages/Notice';
import GoodsDetail from "../../pages/GoodsDetail"; import GoodsDetail from "../../pages/GoodsDetail";
import Category from "../../pages/Category"; import Category from "../../pages/Category";
import Brand from "../../pages/Brand"; import Brand from "../../pages/Brand";
import Page404 from "../../pages/Page404";
import { useEffect, useState } from 'react';
import { CommonConfigDataContext } from "../../contexts/CommonConfigDataContext";
const router = createHashRouter([ const router = createHashRouter([
{ {
...@@ -57,13 +61,34 @@ const router = createHashRouter([ ...@@ -57,13 +61,34 @@ const router = createHashRouter([
path: '/contact', path: '/contact',
element: <Contact /> element: <Contact />
} }
,
{
path: '*',
element: <Page404 />
}
]) ])
const RouterCus=()=>{ const RouterCus=()=>{
const [commonConfigData, setCommonConfigData] = useState({
qqurl:''
});
useEffect(() => {
console.log("getGlobalData")
setCommonConfigData({
qqurl:'/'
})
}, []);
return ( return (
<> <>
<RouterProvider router={router} /> <CommonConfigDataContext.Provider value={commonConfigData}>
<RouterProvider router={router} />
</CommonConfigDataContext.Provider>
</> </>
) )
......
src/contexts/CommonConfigDataContext.tsx 0 → 100644
import { createContext} from 'react';
export const CommonConfigDataContext = createContext({
qqurl:''
})
\ No newline at end of file
src/pages/BrandMap/index.tsx
...@@ -5,6 +5,7 @@ import { Link } from 'react-router-dom'; ...@@ -5,6 +5,7 @@ import { Link } from 'react-router-dom';
const BrandMap = () => { const BrandMap = () => {
const Helmet = require('react-helmet').Helmet; const Helmet = require('react-helmet').Helmet;
const hotList = [1, 2, 3, 4, 5, 6, 7, 8, 9] const hotList = [1, 2, 3, 4, 5, 6, 7, 8, 9]
......
src/pages/Home/components/HomeBanner.tsx
...@@ -25,7 +25,7 @@ const HomeBanner=()=>{ ...@@ -25,7 +25,7 @@ const HomeBanner=()=>{
bannerList.map((item, index) => { bannerList.map((item, index) => {
return ( return (
<a href={item.url} key={index + item.title}> <a href={item.url} key={index + item.title}>
<img src={item.image} alt={item.title} /> <img src={item.image} alt={item.title} loading="lazy"/>
</a> </a>
) )
}) })
......
src/pages/Home/components/HomeFloor1.tsx
...@@ -6,7 +6,7 @@ const HomeFloor1 = () => { ...@@ -6,7 +6,7 @@ const HomeFloor1 = () => {
<div className='w1226 floor1 bothSide'> <div className='w1226 floor1 bothSide'>
<div className="row bothSide cons"> <div className="row bothSide cons">
<a className='item boxsiz row bothSide' href='/'> <a className='item boxsiz row bothSide' href='/'>
<img src='https://img.ichunt.com/test/images/cms/202405/30/a263b85bf297ae7d85f68a01b5db320d.jpg' alt="" /> <img src='https://img.ichunt.com/test/images/cms/202405/30/a263b85bf297ae7d85f68a01b5db320d.jpg' loading="lazy" alt="" />
<div className='rt boxsiz '> <div className='rt boxsiz '>
<div className='gos'>CRCW20107R5VISHAY CR</div> <div className='gos'>CRCW20107R5VISHAY CR</div>
<div className='nam'>VISHAY</div> <div className='nam'>VISHAY</div>
...@@ -14,7 +14,7 @@ const HomeFloor1 = () => { ...@@ -14,7 +14,7 @@ const HomeFloor1 = () => {
</div> </div>
</a> </a>
<a className='item boxsiz row bothSide' href='/'> <a className='item boxsiz row bothSide' href='/'>
<img src='https://img.ichunt.com/test/images/cms/202405/30/a263b85bf297ae7d85f68a01b5db320d.jpg' alt="" /> <img src='https://img.ichunt.com/test/images/cms/202405/30/a263b85bf297ae7d85f68a01b5db320d.jpg' loading="lazy" alt="" />
<div className='rt boxsiz '> <div className='rt boxsiz '>
<div className='gos'>CRCW20107R5VISHAY CR</div> <div className='gos'>CRCW20107R5VISHAY CR</div>
<div className='nam'>VISHAY</div> <div className='nam'>VISHAY</div>
...@@ -22,7 +22,7 @@ const HomeFloor1 = () => { ...@@ -22,7 +22,7 @@ const HomeFloor1 = () => {
</div> </div>
</a> </a>
<a className='item boxsiz row bothSide' href='/'> <a className='item boxsiz row bothSide' href='/'>
<img src='https://img.ichunt.com/test/images/cms/202405/30/a263b85bf297ae7d85f68a01b5db320d.jpg' alt="" /> <img src='https://img.ichunt.com/test/images/cms/202405/30/a263b85bf297ae7d85f68a01b5db320d.jpg' loading="lazy" alt="" />
<div className='rt boxsiz '> <div className='rt boxsiz '>
<div className='gos'>CRCW20107R5VISHAY CR</div> <div className='gos'>CRCW20107R5VISHAY CR</div>
<div className='nam'>VISHAY</div> <div className='nam'>VISHAY</div>
...@@ -32,7 +32,7 @@ const HomeFloor1 = () => { ...@@ -32,7 +32,7 @@ const HomeFloor1 = () => {
</div> </div>
<a href='/' className='floor1ad'> <a href='/' className='floor1ad'>
<img src="https://img.ichunt.com/test/images/cms/202405/30/a263b85bf297ae7d85f68a01b5db320d.jpg" alt="" /> <img src="https://img.ichunt.com/test/images/cms/202405/30/a263b85bf297ae7d85f68a01b5db320d.jpg" loading="lazy" alt="" />
</a> </a>
</div> </div>
</> </>
......
src/pages/Home/components/HomeFloor2.tsx
...@@ -11,7 +11,7 @@ const HomeFloor2 = () => { ...@@ -11,7 +11,7 @@ const HomeFloor2 = () => {
</div> </div>
<div className='boxsiz itembox row bothSide'> <div className='boxsiz itembox row bothSide'>
<Link to='/detail/1' className='item boxsiz'> <Link to='/detail/1' className='item boxsiz'>
<img src="https://img.ichunt.com/test/images/cms/202405/30/a263b85bf297ae7d85f68a01b5db320d.jpg" alt="" /> <img src="https://img.ichunt.com/test/images/cms/202405/30/a263b85bf297ae7d85f68a01b5db320d.jpg" loading="lazy" alt="" />
<div className='gos'>CRCW20107R5VISHAY CR</div> <div className='gos'>CRCW20107R5VISHAY CR</div>
<div className='row bothSide'> <div className='row bothSide'>
<div className='nam'>VISHAY</div> <div className='nam'>VISHAY</div>
...@@ -19,7 +19,7 @@ const HomeFloor2 = () => { ...@@ -19,7 +19,7 @@ const HomeFloor2 = () => {
</div> </div>
</Link> </Link>
<Link to='/detail/1' className='item boxsiz'> <Link to='/detail/1' className='item boxsiz'>
<img src="https://img.ichunt.com/test/images/cms/202405/30/a263b85bf297ae7d85f68a01b5db320d.jpg" alt="" /> <img src="https://img.ichunt.com/test/images/cms/202405/30/a263b85bf297ae7d85f68a01b5db320d.jpg" loading="lazy" alt="" />
<div className='gos'>CRCW20107R5VISHAY CR</div> <div className='gos'>CRCW20107R5VISHAY CR</div>
<div className='row bothSide'> <div className='row bothSide'>
<div className='nam'>VISHAY</div> <div className='nam'>VISHAY</div>
...@@ -27,7 +27,7 @@ const HomeFloor2 = () => { ...@@ -27,7 +27,7 @@ const HomeFloor2 = () => {
</div> </div>
</Link> </Link>
<Link to='/detail/1' className='item boxsiz'> <Link to='/detail/1' className='item boxsiz'>
<img src="https://img.ichunt.com/test/images/cms/202405/30/a263b85bf297ae7d85f68a01b5db320d.jpg" alt="" /> <img src="https://img.ichunt.com/test/images/cms/202405/30/a263b85bf297ae7d85f68a01b5db320d.jpg" loading="lazy" alt="" />
<div className='gos'>CRCW20107R5VISHAY CR</div> <div className='gos'>CRCW20107R5VISHAY CR</div>
<div className='row bothSide'> <div className='row bothSide'>
<div className='nam'>VISHAY</div> <div className='nam'>VISHAY</div>
...@@ -35,7 +35,7 @@ const HomeFloor2 = () => { ...@@ -35,7 +35,7 @@ const HomeFloor2 = () => {
</div> </div>
</Link> </Link>
<Link to='/detail/1' className='item boxsiz'> <Link to='/detail/1' className='item boxsiz'>
<img src="https://img.ichunt.com/test/images/cms/202405/30/a263b85bf297ae7d85f68a01b5db320d.jpg" alt="" /> <img src="https://img.ichunt.com/test/images/cms/202405/30/a263b85bf297ae7d85f68a01b5db320d.jpg" loading="lazy" alt="" />
<div className='gos'>CRCW20107R5VISHAY CR</div> <div className='gos'>CRCW20107R5VISHAY CR</div>
<div className='row bothSide'> <div className='row bothSide'>
<div className='nam'>VISHAY</div> <div className='nam'>VISHAY</div>
...@@ -43,7 +43,7 @@ const HomeFloor2 = () => { ...@@ -43,7 +43,7 @@ const HomeFloor2 = () => {
</div> </div>
</Link> </Link>
<Link to='/detail/1' className='item boxsiz'> <Link to='/detail/1' className='item boxsiz'>
<img src="https://img.ichunt.com/test/images/cms/202405/30/a263b85bf297ae7d85f68a01b5db320d.jpg" alt="" /> <img src="https://img.ichunt.com/test/images/cms/202405/30/a263b85bf297ae7d85f68a01b5db320d.jpg" loading="lazy" alt="" />
<div className='gos'>CRCW20107R5VISHAY CR</div> <div className='gos'>CRCW20107R5VISHAY CR</div>
<div className='row bothSide'> <div className='row bothSide'>
<div className='nam'>VISHAY</div> <div className='nam'>VISHAY</div>
......
src/pages/Home/components/HomeFloor3.tsx
...@@ -11,35 +11,15 @@ const HomeFloor3 = () => { ...@@ -11,35 +11,15 @@ const HomeFloor3 = () => {
</div> </div>
<div className='boxsiz itembox row bothSide'> <div className='boxsiz itembox row bothSide'>
<Link to='/brand/1' className='item'> <Link to='/brand/1' className='item'>
<img src="https://img.ichunt.com/test/images/cms/202405/30/a263b85bf297ae7d85f68a01b5db320d.jpg" alt="" /> <img src="https://img.ichunt.com/test/images/cms/202405/30/a263b85bf297ae7d85f68a01b5db320d.jpg" loading="lazy" alt="" />
</Link> </Link>
<Link to='/' className='item'> <Link to='/' className='item'>
<img src="https://img.ichunt.com/test/images/cms/202405/30/a263b85bf297ae7d85f68a01b5db320d.jpg" alt="" /> <img src="https://img.ichunt.com/test/images/cms/202405/30/a263b85bf297ae7d85f68a01b5db320d.jpg" loading="lazy" alt="" />
</Link> </Link>
<Link to='/' className='item'> <Link to='/' className='item'>
<img src="https://img.ichunt.com/test/images/cms/202405/30/a263b85bf297ae7d85f68a01b5db320d.jpg" alt="" /> <img src="https://img.ichunt.com/test/images/cms/202405/30/a263b85bf297ae7d85f68a01b5db320d.jpg" loading="lazy" alt="" />
</Link>
<Link to='/' className='item'>
<img src="https://img.ichunt.com/test/images/cms/202405/30/a263b85bf297ae7d85f68a01b5db320d.jpg" alt="" />
</Link>
<Link to='/' className='item'>
<img src="https://img.ichunt.com/test/images/cms/202405/30/a263b85bf297ae7d85f68a01b5db320d.jpg" alt="" />
</Link>
<Link to='/' className='item'>
<img src="https://img.ichunt.com/test/images/cms/202405/30/a263b85bf297ae7d85f68a01b5db320d.jpg" alt="" />
</Link>
<Link to='/' className='item'>
<img src="https://img.ichunt.com/test/images/cms/202405/30/a263b85bf297ae7d85f68a01b5db320d.jpg" alt="" />
</Link>
<Link to='/' className='item'>
<img src="https://img.ichunt.com/test/images/cms/202405/30/a263b85bf297ae7d85f68a01b5db320d.jpg" alt="" />
</Link>
<Link to='/' className='item'>
<img src="https://img.ichunt.com/test/images/cms/202405/30/a263b85bf297ae7d85f68a01b5db320d.jpg" alt="" />
</Link>
<Link to='/' className='item'>
<img src="https://img.ichunt.com/test/images/cms/202405/30/a263b85bf297ae7d85f68a01b5db320d.jpg" alt="" />
</Link> </Link>
</div> </div>
</div> </div>
......
src/pages/Home/index.tsx
...@@ -6,10 +6,9 @@ import HomeFloor1 from './components/HomeFloor1'; ...@@ -6,10 +6,9 @@ import HomeFloor1 from './components/HomeFloor1';
import HomeFloor2 from './components/HomeFloor2'; import HomeFloor2 from './components/HomeFloor2';
import HomeFloor3 from './components/HomeFloor3'; import HomeFloor3 from './components/HomeFloor3';
const Home = () => { const Home = () => {
const Helmet = require('react-helmet').Helmet; const Helmet = require('react-helmet').Helmet;
return ( return (
<> <>
<Helmet><title>麒麟电子商城-首页</title></Helmet> <Helmet><title>麒麟电子商城-首页</title></Helmet>
......
src/pages/Page404/index.less 0 → 100644
.page-404{
background: #fff;
padding:80px 0;
img{
height:296px;
width:360px;
display: block;
margin:0 auto;
}
}
\ No newline at end of file
src/pages/Page404/index.min.css 0 → 100644
.page-404{background:#fff;padding:80px 0}.page-404 img{height:296px;width:360px;display:block;margin:0 auto}
\ No newline at end of file
src/pages/Page404/index.tsx 0 → 100644
import './index.min.css'
import Header from "../../components/Header";
import Footer from "../../components/Footer";
import BreadNav from '../../components/BreadNav';
const Page404 = () => {
const Helmet = require('react-helmet').Helmet;
return (
<>
<Helmet><title>麒麟电子商城-404找不到页面</title></Helmet>
<Header />
<BreadNav><strong>404</strong></BreadNav>
<div className="page-404">
<img src={require('../../images/p404.png')} alt="" />
</div>
<Footer />
</>
)
}
export default Page404
\ No newline at end of file
src/pages/Page404/type.tsx 0 → 100644
export type ResponseType = {
success: boolean,
data: Array<{
shopId: string,
shopName: string,
cartList: Array<{
productId: string,
imgUrl: string,
weight: string,
title: string,
price: number,
count: number
}>
}>
}
\ No newline at end of file
src/pages/Search/index.less
.mv-search-page{ .mv-search-page{
margin-bottom: 70px;
.shift-box{ .shift-box{
padding:24px 30px; padding:24px 30px;
background: #fff; background: #fff;
...@@ -16,6 +17,11 @@ ...@@ -16,6 +17,11 @@
.item-box{ .item-box{
width:1000px; width:1000px;
flex-wrap: wrap; flex-wrap: wrap;
&.overflowheight{
height:40px;
overflow: hidden;
}
.item{ .item{
height: 22px; height: 22px;
border: 1px solid rgba(0,0,0,0); border: 1px solid rgba(0,0,0,0);
......
src/pages/Search/index.min.css
.mv-search-page .shift-box{padding:24px 30px;background:#fff;padding-bottom:6px}.mv-search-page .shift-box .shift-group{border-bottom:1px solid #E7E7E7;margin-bottom:18px}.mv-search-page .shift-box .shift-group span{font-weight:bold;font-size:12px;color:#888888;padding-top:2px}.mv-search-page .shift-box .shift-group:last-child{border-bottom:0px;margin-bottom:0px}.mv-search-page .shift-box .shift-group .item-box{width:1000px;flex-wrap:wrap}.mv-search-page .shift-box .shift-group .item-box .item{height:22px;border:1px solid rgba(0,0,0,0);line-height:20px;box-sizing:border-box;margin-left:45px;margin-bottom:18px;font-size:12px;color:#000;cursor:pointer;text-align:center;padding:0 15px}.mv-search-page .shift-box .shift-group .item-box .item.act{background:#FFFBF5;border:1px solid #FF9A00}.mv-search-page .shift-box .shift-group .shitrankbox{width:130px;justify-content:flex-end}.mv-search-page .shift-box .shift-group .shitrank{margin-left:5px;height:22px;width:58px;border:1px solid #B0B0B0;box-sizing:border-box;color:#919191;font-size:12px;cursor:pointer}.mv-search-page .shift-box .shift-group .shitrank.shows{display:flex}.mv-search-page .shift-box .shift-group .shitrank.hides{display:none}.mv-search-page .shift-box .shift-group .shitrank:first-child{margin-left:0px}.mv-search-page .shift-box .shift-group .shitrank i{color:#919191;font-size:12px}.mv-search-page .databox{padding-top:24px}.mv-search-page .databox .data-group-supplier{border:1px solid #EDEFEF;margin-bottom:30px}.mv-search-page .databox .data-group-supplier .data-list-title{padding:0 33px;height:50px;line-height:50px;font-size:16px;color:#000000;background:#f6f6f6}.mv-search-page .databox .data-group-supplier .data-list-more{height:48px;line-height:48px;color:#000;font-size:12px;text-align:center;background:#fff}.mv-search-page .databox .data-group-supplier .data-list-more b{color:#FF9A00;cursor:pointer} .mv-search-page{margin-bottom:70px}.mv-search-page .shift-box{padding:24px 30px;background:#fff;padding-bottom:6px}.mv-search-page .shift-box .shift-group{border-bottom:1px solid #E7E7E7;margin-bottom:18px}.mv-search-page .shift-box .shift-group span{font-weight:bold;font-size:12px;color:#888888;padding-top:2px}.mv-search-page .shift-box .shift-group:last-child{border-bottom:0px;margin-bottom:0px}.mv-search-page .shift-box .shift-group .item-box{width:1000px;flex-wrap:wrap}.mv-search-page .shift-box .shift-group .item-box.overflowheight{height:40px;overflow:hidden}.mv-search-page .shift-box .shift-group .item-box .item{height:22px;border:1px solid rgba(0,0,0,0);line-height:20px;box-sizing:border-box;margin-left:45px;margin-bottom:18px;font-size:12px;color:#000;cursor:pointer;text-align:center;padding:0 15px}.mv-search-page .shift-box .shift-group .item-box .item.act{background:#FFFBF5;border:1px solid #FF9A00}.mv-search-page .shift-box .shift-group .shitrankbox{width:130px;justify-content:flex-end}.mv-search-page .shift-box .shift-group .shitrank{margin-left:5px;height:22px;width:58px;border:1px solid #B0B0B0;box-sizing:border-box;color:#919191;font-size:12px;cursor:pointer}.mv-search-page .shift-box .shift-group .shitrank.shows{display:flex}.mv-search-page .shift-box .shift-group .shitrank.hides{display:none}.mv-search-page .shift-box .shift-group .shitrank:first-child{margin-left:0px}.mv-search-page .shift-box .shift-group .shitrank i{color:#919191;font-size:12px}.mv-search-page .databox{padding-top:24px}.mv-search-page .databox .data-group-supplier{border:1px solid #EDEFEF;margin-bottom:30px}.mv-search-page .databox .data-group-supplier .data-list-title{padding:0 33px;height:50px;line-height:50px;font-size:16px;color:#000000;background:#f6f6f6}.mv-search-page .databox .data-group-supplier .data-list-more{height:48px;line-height:48px;color:#000;font-size:12px;text-align:center;background:#fff}.mv-search-page .databox .data-group-supplier .data-list-more b{color:#FF9A00;cursor:pointer}
\ No newline at end of file \ No newline at end of file
src/pages/Search/index.tsx
import './index.min.css' import './index.min.css'
import { useEffect, useState } from 'react'; import { useEffect, useReducer, useRef, useState } from 'react';
import type { ListSortType } from '../../components/ListSort/types' import type { ListSortType } from '../../components/ListSort/types'
import type { BrandAndClassType } from './type'
import Header from "../../components/Header"; import Header from "../../components/Header";
import Footer from "../../components/Footer"; import Footer from "../../components/Footer";
import BreadNav from '../../components/BreadNav'; import BreadNav from '../../components/BreadNav';
import ListSort from '../../components/ListSort'; import ListSort from '../../components/ListSort';
import ListOneItem from '../../components/ListOneItem'; import ListOneItem from '../../components/ListOneItem';
import { useLocation } from 'react-router-dom'; import { useLocation } from 'react-router-dom';
import { brandsAndClasssReducer } from './reducer';
const Search = () => { const Search = () => {
...@@ -26,15 +27,19 @@ const Search = () => { ...@@ -26,15 +27,19 @@ const Search = () => {
stockSort: '', stockSort: '',
priceSort: '' priceSort: ''
}) })
const [brands, setBrands] = useState<BrandAndClassType>([]) const [brandsR,dispatchBrands]=useReducer(brandsAndClasssReducer,[])
const [classs, setClasss] = useState<BrandAndClassType>([]) const [classsR,dispatchclasss]=useReducer(brandsAndClasssReducer,[])
//品牌分类盒子 UI
const brandListRef=useRef<HTMLDivElement>(null);
const classListRef=useRef<HTMLDivElement>(null);
const [brandListAll,setBrandListAll]=useState(true)
const [classListAll,setClassListAll]=useState(true)
const [brandListHeight,setBrandListHeight]=useState<number>(0)
const [classListHeight,setClassListHeight]=useState<number>(0)
//获取数据
useEffect(() => { useEffect(() => {
//获取数据
let newBrand: BrandAndClassType = []
let newClass: BrandAndClassType = []
const datasg = [ const datasg = [
{ {
goods_id: 1, goods_id: 1,
...@@ -86,14 +91,7 @@ const Search = () => { ...@@ -86,14 +91,7 @@ const Search = () => {
class_name: 'nxaaaaaaaaap7' class_name: 'nxaaaaaaaaap7'
} }
, ,
{
goods_id: 8,
brand_id: 8,
brand_name: 'taaaaaaaaaaai8',
class_id: 8,
class_name: 'nxaaaaaaap8'
}
,
{ {
goods_id: 5, goods_id: 5,
brand_id: 5, brand_id: 5,
...@@ -102,42 +100,28 @@ const Search = () => { ...@@ -102,42 +100,28 @@ const Search = () => {
class_name: 'nxaaaaaaaaap5' class_name: 'nxaaaaaaaaap5'
} }
] ]
datasg.forEach((item) => { dispatchBrands({type: 'brandsInit',value:datasg})
newBrand = [...newBrand, { id: String(item.brand_id), value: String(item.brand_name), checked: false }] dispatchclasss({type: 'classsInit',value:datasg})
newClass = [...newClass, { id: String(item.class_id), value: String(item.class_name), checked: false }]
})
const uniqueBrand = newBrand.reduce((acc: BrandAndClassType, current) => {
if (!acc.some(item => item.id === current.id)) {
acc.push(current);
}
return acc;
}, []);
const uniqueClass = newClass.reduce((acc: BrandAndClassType, current) => {
if (!acc.some(item => item.id === current.id)) {
acc.push(current);
}
return acc;
}, []);
setBrands(uniqueBrand)
setClasss(uniqueClass)
}, []) }, [])
//品牌,分类,排序发生变化
useEffect(() => {
setBrandListHeight(brandListRef.current?.offsetHeight||0)
setClassListHeight(classListRef.current?.offsetHeight||0)
console.log('品牌,分类,排序发生变化')
}, [brandsR,classsR,sortObj])
const updateBrandAndClass = (type: number, id?: string) => { const updateBrandAndClass = (type: number, id?: string) => {
const newList = type === 1 ? [...brands] : [...classs] if(type===1){
if (!id) { dispatchBrands({type: 'brandsUpdate',value:id})
newList.forEach((item) => {
item.checked = false
})
} else {
const brandToUpdate = newList.find(item => item.id === id)
if (brandToUpdate) {
brandToUpdate.checked = !brandToUpdate.checked;
}
} }
type === 1 ? setBrands(newList) : setClasss(newList) if(type===2){
dispatchclasss({type: 'classsUpdate',value:id})
}
} }
return ( return (
<> <>
<Helmet><title>麒麟电子商城-搜索结果</title></Helmet> <Helmet><title>麒麟电子商城-搜索结果</title></Helmet>
...@@ -147,9 +131,9 @@ const Search = () => { ...@@ -147,9 +131,9 @@ const Search = () => {
<div className='shift-box'> <div className='shift-box'>
<div className='shift-group row'> <div className='shift-group row'>
<span>品牌：</span> <span>品牌：</span>
<div className='item-box row'> <div className={brandListAll?'item-box row':'item-box row overflowheight'} ref={brandListRef}>
{ {
brands.map(item => { brandsR.map(item => {
return ( return (
<div key={item.id} onClick={() => { updateBrandAndClass(1, item.id) }} className={item.checked ? 'item act' : 'item'} >{item.value}</div> <div key={item.id} onClick={() => { updateBrandAndClass(1, item.id) }} className={item.checked ? 'item act' : 'item'} >{item.value}</div>
) )
...@@ -157,15 +141,22 @@ const Search = () => { ...@@ -157,15 +141,22 @@ const Search = () => {
} }
</div> </div>
<div className='row shitrankbox'> <div className='row shitrankbox'>
<div className={brands.find(item => item.checked === true)?'more row verCenter rowCenter shitrank shows':'more row verCenter rowCenter shitrank hides'} onClick={() => { updateBrandAndClass(1) }}>清除条件</div> <div className={brandsR.find(item => item.checked === true)?'more row verCenter rowCenter shitrank shows':'more row verCenter rowCenter shitrank hides'} onClick={() => { updateBrandAndClass(1) }}>清除条件</div>
<div className='more row verCenter rowCenter shitrank'>收起<i className='icon iconfont icon-xiangshang2'></i></div> {
brandListHeight>40&&
<div className='more row verCenter rowCenter shitrank' onClick={()=>{setBrandListAll(!brandListAll)}}>
{brandListAll?(<>收起<i className='icon iconfont icon-xiangshang2'></i></>):(<>展开<i className='icon iconfont icon-xiangxia2'></i></>)}
</div>
}
</div> </div>
</div> </div>
<div className='shift-group row'> <div className='shift-group row'>
<span>分类：</span> <span>分类：</span>
<div className='item-box row'> <div className={classListAll?'item-box row':'item-box row overflowheight'} ref={classListRef}>
{ {
classs.map(item => { classsR.map(item => {
return ( return (
<div onClick={() => { updateBrandAndClass(2, item.id) }} key={item.id} className={item.checked ? 'item act' : 'item'} >{item.value}</div> <div onClick={() => { updateBrandAndClass(2, item.id) }} key={item.id} className={item.checked ? 'item act' : 'item'} >{item.value}</div>
) )
...@@ -173,8 +164,14 @@ const Search = () => { ...@@ -173,8 +164,14 @@ const Search = () => {
} }
</div> </div>
<div className='row shitrankbox'> <div className='row shitrankbox'>
<div className={classs.find(item => item.checked === true)?'more row verCenter rowCenter shitrank shows':'more row verCenter rowCenter shitrank hides'} onClick={() => { updateBrandAndClass(2) }}>清除条件</div> <div className={classsR.find(item => item.checked === true)?'more row verCenter rowCenter shitrank shows':'more row verCenter rowCenter shitrank hides'} onClick={() => { updateBrandAndClass(2) }}>清除条件</div>
<div className='more row verCenter rowCenter shitrank'>收起<i className='icon iconfont icon-xiangshang2'></i></div> {
classListHeight>40&&
<div className='more row verCenter rowCenter shitrank' onClick={()=>{setClassListAll(!classListAll)}}>
{classListAll?(<>收起<i className='icon iconfont icon-xiangshang2'></i></>):(<>展开<i className='icon iconfont icon-xiangxia2'></i></>)}
</div>
}
</div> </div>
</div> </div>
</div> </div>
......
src/pages/Search/reducer.tsx 0 → 100644
import type { BrandAndClassType } from './type'
export const brandsAndClasssReducer = (state: BrandAndClassType, action: any) => {
if (action.type === 'brandsInit' || action.type === 'classsInit') {
let newBrand: BrandAndClassType = []
const datasg = [...action.value]
datasg.forEach((item) => {
const id_ = action.type === 'brandsInit' ? String(item.brand_id) : String(item.class_id)
const name_ = action.type === 'brandsInit' ? String(item.brand_name) : String(item.class_name)
newBrand = [...newBrand, { id: id_, value: name_, checked: false }]
})
const uniqueBrand = newBrand.reduce((acc: BrandAndClassType, current) => {
if (!acc.some(item => item.id === current.id)) {
acc.push(current);
}
return acc;
}, []);
return uniqueBrand
}
if (action.type === 'brandsUpdate' || action.type === 'classsUpdate') {
let newList = [...state]
if (!action.value) {
newList.forEach((item) => {
item.checked = false
})
} else {
const brandToUpdate = newList.find(item => item.id === action.value)
if (brandToUpdate) {
brandToUpdate.checked = !brandToUpdate.checked;
}
}
return newList
}
return state
}
\ No newline at end of file
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or sign in to comment