Skip to content

肖康 / Europa-web

Go to a project
Commit 2559ee11 by 肖康
Options

分类结果页

parent d0be8401
Inline Side-by-side
Showing with 941 additions and 595 deletions
package-lock.json
...@@ -18,8 +18,10 @@ ...@@ -18,8 +18,10 @@
"antd": "^5.18.3", "antd": "^5.18.3",
"axios": "^1.7.2", "axios": "^1.7.2",
"react": "^18.3.1", "react": "^18.3.1",
"react-activation": "^0.12.4",
"react-dom": "^18.3.1", "react-dom": "^18.3.1",
"react-helmet": "^6.1.0", "react-helmet": "^6.1.0",
"react-keep-alive": "^2.5.2",
"react-router-dom": "^6.24.0", "react-router-dom": "^6.24.0",
"react-scripts": "5.0.1", "react-scripts": "5.0.1",
"typescript": "^4.9.5", "typescript": "^4.9.5",
...@@ -4657,6 +4659,12 @@ ...@@ -4657,6 +4659,12 @@
"pretty-format": "^27.0.0" "pretty-format": "^27.0.0"
} }
}, },
"node_modules/@types/js-md5": {
"version": "0.4.3",
"resolved": "https://registry.npmmirror.com/@types/js-md5/-/js-md5-0.4.3.tgz",
"integrity": "sha512-BIga/WEqTi35ccnGysOuO4RmwVnpajv9oDB/sDQSY2b7/Ac7RyYR30bv7otZwByMvOJV9Vqq6/O1DFAnOzE4Pg==",
"license": "MIT"
},
"node_modules/@types/json-schema": { "node_modules/@types/json-schema": {
"version": "7.0.15", "version": "7.0.15",
"resolved": "https://registry.npmmirror.com/@types/json-schema/-/json-schema-7.0.15.tgz", "resolved": "https://registry.npmmirror.com/@types/json-schema/-/json-schema-7.0.15.tgz",
...@@ -9867,6 +9875,12 @@ ...@@ -9867,6 +9875,12 @@
"integrity": "sha512-EtKwoO6kxCL9WO5xipiHTZlSzBm7WLT627TqC/uVRd0HKmq8NXyebnNYxDoBi7wt8eTWrUrKXCOVaFq9x1kgag==", "integrity": "sha512-EtKwoO6kxCL9WO5xipiHTZlSzBm7WLT627TqC/uVRd0HKmq8NXyebnNYxDoBi7wt8eTWrUrKXCOVaFq9x1kgag==",
"license": "MIT" "license": "MIT"
}, },
"node_modules/gud": {
"version": "1.0.0",
"resolved": "https://registry.npmmirror.com/gud/-/gud-1.0.0.tgz",
"integrity": "sha512-zGEOVKFM5sVPPrYs7J5/hYEw2Pof8KCyOwyhG8sAF26mCAeUFAcYPu1mwB7hhpIP29zOIBaDqwuHdLp0jvZXjw==",
"license": "MIT"
},
"node_modules/gzip-size": { "node_modules/gzip-size": {
"version": "6.0.0", "version": "6.0.0",
"resolved": "https://registry.npmmirror.com/gzip-size/-/gzip-size-6.0.0.tgz", "resolved": "https://registry.npmmirror.com/gzip-size/-/gzip-size-6.0.0.tgz",
...@@ -9984,6 +9998,21 @@ ...@@ -9984,6 +9998,21 @@
"he": "bin/he" "he": "bin/he"
} }
}, },
"node_modules/hoist-non-react-statics": {
"version": "3.3.2",
"resolved": "https://registry.npmmirror.com/hoist-non-react-statics/-/hoist-non-react-statics-3.3.2.tgz",
"integrity": "sha512-/gGivxi8JPKWNm/W0jSmzcMPpfpPLc3dY/6GxhX2hQ9iGj3aDfklV4ET7NjKpSinLpJ5vafa9iiGIEZg10SfBw==",
"license": "BSD-3-Clause",
"dependencies": {
"react-is": "^16.7.0"
}
},
"node_modules/hoist-non-react-statics/node_modules/react-is": {
"version": "16.13.1",
"resolved": "https://registry.npmmirror.com/react-is/-/react-is-16.13.1.tgz",
"integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==",
"license": "MIT"
},
"node_modules/hoopy": { "node_modules/hoopy": {
"version": "0.1.4", "version": "0.1.4",
"resolved": "https://registry.npmmirror.com/hoopy/-/hoopy-0.1.4.tgz", "resolved": "https://registry.npmmirror.com/hoopy/-/hoopy-0.1.4.tgz",
...@@ -13201,6 +13230,12 @@ ...@@ -13201,6 +13230,12 @@
"jiti": "bin/jiti.js" "jiti": "bin/jiti.js"
} }
}, },
"node_modules/js-md5": {
"version": "0.7.3",
"resolved": "https://registry.npmmirror.com/js-md5/-/js-md5-0.7.3.tgz",
"integrity": "sha512-ZC41vPSTLKGwIRjqDh8DfXoCrdQIyBgspJVPXHBGu4nZlAEvG3nf+jO9avM9RmLiGakg7vz974ms99nEV0tmTQ==",
"license": "MIT"
},
"node_modules/js-tokens": { "node_modules/js-tokens": {
"version": "4.0.0", "version": "4.0.0",
"resolved": "https://registry.npmmirror.com/js-tokens/-/js-tokens-4.0.0.tgz", "resolved": "https://registry.npmmirror.com/js-tokens/-/js-tokens-4.0.0.tgz",
...@@ -16736,6 +16771,35 @@ ...@@ -16736,6 +16771,35 @@
"node": ">=0.10.0" "node": ">=0.10.0"
} }
}, },
"node_modules/react-activation": {
"version": "0.12.4",
"resolved": "https://registry.npmmirror.com/react-activation/-/react-activation-0.12.4.tgz",
"integrity": "sha512-6jJtnUnQBKCrWgvHkzCJP3QZAtthnhDuoPa5LJnj1+1TxS5qkh3Z74zdNZY40wMbkTsLbo6CYoS51Fx/bTM3/w==",
"license": "ISC",
"dependencies": {
"create-react-context": "^0.3.0",
"hoist-non-react-statics": "^3.3.0",
"react-node-key": "^0.4.0",
"szfe-tools": "^0.0.0-beta.7"
},
"peerDependencies": {
"react": ">=16"
}
},
"node_modules/react-activation/node_modules/create-react-context": {
"version": "0.3.0",
"resolved": "https://registry.npmmirror.com/create-react-context/-/create-react-context-0.3.0.tgz",
"integrity": "sha512-dNldIoSuNSvlTJ7slIKC/ZFGKexBMBrrcc+TTe1NdmROnaASuLPvqpwj9v4XS4uXZ8+YPu0sNmShX2rXI5LNsw==",
"license": "MIT",
"dependencies": {
"gud": "^1.0.0",
"warning": "^4.0.3"
},
"peerDependencies": {
"prop-types": "^15.0.0",
"react": "^0.14.0 || ^15.0.0 || ^16.0.0"
}
},
"node_modules/react-app-polyfill": { "node_modules/react-app-polyfill": {
"version": "3.0.0", "version": "3.0.0",
"resolved": "https://registry.npmmirror.com/react-app-polyfill/-/react-app-polyfill-3.0.0.tgz", "resolved": "https://registry.npmmirror.com/react-app-polyfill/-/react-app-polyfill-3.0.0.tgz",
...@@ -16992,6 +17056,48 @@ ...@@ -16992,6 +17056,48 @@
"integrity": "sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w==", "integrity": "sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w==",
"license": "MIT" "license": "MIT"
}, },
"node_modules/react-keep-alive": {
"version": "2.5.2",
"resolved": "https://registry.npmmirror.com/react-keep-alive/-/react-keep-alive-2.5.2.tgz",
"integrity": "sha512-CoEsY5xE6rT31Z4p4UGZ/Crp0nZN+CY61ZflKzBGKB3D315jQMe2l8G5OrSEJ86V4stua7lSeFDIeG3DCuY2Rg==",
"license": "MIT",
"dependencies": {
"@types/js-md5": "^0.4.2",
"hoist-non-react-statics": "^3.3.0",
"js-md5": "^0.7.3"
},
"peerDependencies": {
"react": ">=16.3.0",
"react-dom": ">=16.3.0",
"react-router-dom": ">=5.0.0"
}
},
"node_modules/react-node-key": {
"version": "0.4.0",
"resolved": "https://registry.npmmirror.com/react-node-key/-/react-node-key-0.4.0.tgz",
"integrity": "sha512-puiuP2QYEuNBVVvcjpUE8d8/jdAhiXHBHMmjZzQT4+fe276RMYea/tY7JoZoYlrhAX8DORLPvjySjXYJZ1m6/A==",
"license": "ISC",
"dependencies": {
"jsx-ast-utils": "^2.2.1",
"szfe-tools": "^0.0.0-beta.7"
},
"peerDependencies": {
"react": ">=16"
}
},
"node_modules/react-node-key/node_modules/jsx-ast-utils": {
"version": "2.4.1",
"resolved": "https://registry.npmmirror.com/jsx-ast-utils/-/jsx-ast-utils-2.4.1.tgz",
"integrity": "sha512-z1xSldJ6imESSzOjd3NNkieVJKRlKYSOtMG8SFyCj2FIrvSaSuli/WjpBkEzCBoR9bYYYFgqJw61Xhu7Lcgk+w==",
"license": "MIT",
"dependencies": {
"array-includes": "^3.1.1",
"object.assign": "^4.1.0"
},
"engines": {
"node": ">=4.0"
}
},
"node_modules/react-refresh": { "node_modules/react-refresh": {
"version": "0.11.0", "version": "0.11.0",
"resolved": "https://registry.npmmirror.com/react-refresh/-/react-refresh-0.11.0.tgz", "resolved": "https://registry.npmmirror.com/react-refresh/-/react-refresh-0.11.0.tgz",
...@@ -18863,6 +18969,15 @@ ...@@ -18863,6 +18969,15 @@
"integrity": "sha512-9QNk5KwDF+Bvz+PyObkmSYjI5ksVUYtjW7AU22r2NKcfLJcXp96hkDWU3+XndOsUb+AQ9QhfzfCT2O+CNWT5Tw==", "integrity": "sha512-9QNk5KwDF+Bvz+PyObkmSYjI5ksVUYtjW7AU22r2NKcfLJcXp96hkDWU3+XndOsUb+AQ9QhfzfCT2O+CNWT5Tw==",
"license": "MIT" "license": "MIT"
}, },
"node_modules/szfe-tools": {
"version": "0.0.0-beta.7",
"resolved": "https://registry.npmmirror.com/szfe-tools/-/szfe-tools-0.0.0-beta.7.tgz",
"integrity": "sha512-/M7+Tel2G8zapfDYZlz17hf9ViqAi/loZMfM81b5iZMyaWL/t5dajBszEBI2kyIDFzlLT4btBcq+BimFgmAHug==",
"license": "ISC",
"dependencies": {
"@babel/runtime": "^7.10.2"
}
},
"node_modules/tailwindcss": { "node_modules/tailwindcss": {
"version": "3.4.4", "version": "3.4.4",
"resolved": "https://registry.npmmirror.com/tailwindcss/-/tailwindcss-3.4.4.tgz", "resolved": "https://registry.npmmirror.com/tailwindcss/-/tailwindcss-3.4.4.tgz",
...@@ -19654,6 +19769,15 @@ ...@@ -19654,6 +19769,15 @@
"makeerror": "1.0.12" "makeerror": "1.0.12"
} }
}, },
"node_modules/warning": {
"version": "4.0.3",
"resolved": "https://registry.npmmirror.com/warning/-/warning-4.0.3.tgz",
"integrity": "sha512-rpJyN222KWIvHJ/F53XSZv0Zl/accqHR8et1kpaMTD/fLCRxtV8iX8czMzY7sVZupTI3zcUTg8eycS2kNF9l6w==",
"license": "MIT",
"dependencies": {
"loose-envify": "^1.0.0"
}
},
"node_modules/watchpack": { "node_modules/watchpack": {
"version": "2.4.1", "version": "2.4.1",
"resolved": "https://registry.npmmirror.com/watchpack/-/watchpack-2.4.1.tgz", "resolved": "https://registry.npmmirror.com/watchpack/-/watchpack-2.4.1.tgz",
......
package.json
...@@ -2,7 +2,7 @@ ...@@ -2,7 +2,7 @@
"name": "react-ts-demos", "name": "react-ts-demos",
"version": "0.1.0", "version": "0.1.0",
"private": true, "private": true,
"proxy": "http://jsonxk.com", "proxy": "http://erpweb.liexindev.net",
"dependencies": { "dependencies": {
"@testing-library/jest-dom": "^5.17.0", "@testing-library/jest-dom": "^5.17.0",
"@testing-library/react": "^13.4.0", "@testing-library/react": "^13.4.0",
...@@ -14,8 +14,10 @@ ...@@ -14,8 +14,10 @@
"antd": "^5.18.3", "antd": "^5.18.3",
"axios": "^1.7.2", "axios": "^1.7.2",
"react": "^18.3.1", "react": "^18.3.1",
"react-activation": "^0.12.4",
"react-dom": "^18.3.1", "react-dom": "^18.3.1",
"react-helmet": "^6.1.0", "react-helmet": "^6.1.0",
"react-keep-alive": "^2.5.2",
"react-router-dom": "^6.24.0", "react-router-dom": "^6.24.0",
"react-scripts": "5.0.1", "react-scripts": "5.0.1",
"typescript": "^4.9.5", "typescript": "^4.9.5",
......
src/App.tsx
import './styles/base.min.css' import './styles/base.min.css'
import './styles/font/iconfont.css' import './styles/font/iconfont.css'
import RouterCus from './components/RouterCus';
const App=()=>{ import { createHashRouter, Outlet, RouterProvider } from "react-router-dom"
import { useEffect, useState } from 'react';
import { CommonConfigDataContext } from "./contexts/CommonConfigDataContext";
import Home from './pages/Home';
import Search from './pages/Search';
import BrandMap from './pages/BrandMap';
import ClassMap from './pages/ClassMap';
import About from './pages/About';
import Contact from './pages/Contact';
import Notice from './pages/Notice';
import GoodsDetail from "./pages/GoodsDetail";
import Category from "./pages/Category";
import Brand from "./pages/Brand";
import Page404 from "./pages/Page404";
import Header from "./components/Header";
import Footer from "./components/Footer";
const Index = () => {
return (
<>
<Header />
<Outlet />
<Footer />
</>
);
}
const router = createHashRouter([
{
path: '',
element: <Index />,
children: [
{
path: '/',
element: <Home />
},
{
path: '/search',
element: <Search />
},
{
path: '/detail/:sku_id',
element: <GoodsDetail />
},
{
path: '/brandMap',
element: <BrandMap />
},
{
path: '/brand/:brand_id',
element: <Brand />
},
{
path: '/classMap',
element: <ClassMap />
},
{
path: '/category/:class_id1/:class_id2?',
element: <Category />
},
{
path: '/about',
element: <About />
},
{
path: '/notice',
element: <Notice />
},
{
path: '/contact',
element: <Contact />
}
,
{
path: '*',
element: <Page404 />
}
]
},
]);
const App = () => {
const [commonConfigData, setCommonConfigData] = useState({
qqurl: '',
});
useEffect(() => {
setCommonConfigData({
qqurl: '/'
})
}, []);
return ( return (
<> <>
<RouterCus /> <CommonConfigDataContext.Provider value={commonConfigData}>
<RouterProvider router={router} ></RouterProvider>
</CommonConfigDataContext.Provider>
</> </>
); );
} }
......
src/components/Header/components/NavBig/index.less
...@@ -36,7 +36,9 @@ ...@@ -36,7 +36,9 @@
box-sizing : border-box; box-sizing : border-box;
z-index : 3; z-index : 3;
border-left: 1px solid rgba(255, 255, 255, 0); border-left: 1px solid rgba(255, 255, 255, 0);
&.index-pages{
display: block;
}
.classleftcons { .classleftcons {
width : 234px; width : 234px;
......
src/components/Header/components/NavBig/index.min.css
.mv-nav-big{height:38px;border-bottom:1px solid #FF9A00;background:#fff}.mv-nav-big .navbox{margin:0 auto;width:1226px}.mv-nav-big .navbox .class-boxs{position:relative;height:38px}.mv-nav-big .navbox .class-boxs .title-lc{line-height:38px;width:234px;height:38px;background:#FF9A00;color:#fff;font-weight:bold;font-size:18px;cursor:pointer;box-sizing:border-box;padding-left:14px;display:block}.mv-nav-big .navbox .class-boxs .box-one-left{width:234px;height:460px;position:absolute;left:0px;top:39px;background:rgba(255,255,255,0.98);display:none;box-sizing:border-box;z-index:3;border-left:1px solid rgba(255,255,255,0)}.mv-nav-big .navbox .class-boxs .box-one-left .classleftcons{width:234px;padding:20px 0;box-sizing:border-box;position:relative}.mv-nav-big .navbox .class-boxs .box-one-left .classleftcons .one-class-group{color:#313131;font-size:14px;padding-left:17px;padding-right:17px}.mv-nav-big .navbox .class-boxs .box-one-left .classleftcons .one-class-group .one-class-link{display:block;width:100%;cursor:pointer;padding-bottom:5px}.mv-nav-big .navbox .class-boxs .box-one-left .classleftcons .one-class-group .one-class-link .spann{color:#000;font-size:16px;display:block;height:35px;line-height:35px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.mv-nav-big .navbox .class-boxs .box-one-left .classleftcons .one-class-group .one-class-link .spann span{transition:all .5s;display:inline-block;vertical-align:middle;width:0px;overflow:hidden}.mv-nav-big .navbox .class-boxs .box-one-left .classleftcons .one-class-group .one-class-link .spann span i{font-size:11px;color:#FF9A00;position:relative;top:-2px}.mv-nav-big .navbox .class-boxs .box-one-left .classleftcons .one-class-group:hover .spann{color:#FF9A00}.mv-nav-big .navbox .class-boxs .box-one-left .classleftcons .one-class-group:hover .spann span{width:25px}.mv-nav-big .navbox .class-boxs .box-one-left .classleftcons .one-class-group .box-two-right{background:#fff;display:block;height:460px;width:775px;position:absolute;left:234px;padding-top:25px;box-sizing:border-box;top:0px;display:none;border-left:0px}.mv-nav-big .navbox .class-boxs .box-one-left .classleftcons .one-class-group .box-two-right .classconsjk{width:775px;height:410px;box-sizing:border-box;overflow-y:auto;padding:0 24px}.mv-nav-big .navbox .class-boxs .box-one-left .classleftcons .one-class-group .box-two-right .classconsjk::-webkit-scrollbar{width:8px}.mv-nav-big .navbox .class-boxs .box-one-left .classleftcons .one-class-group .box-two-right .classconsjk::-webkit-scrollbar-thumb{border-radius:6px;background:#fff;-webkit-box-shadow:inset 0 0 8px rgba(0,0,0,0.2)}.mv-nav-big .navbox .class-boxs .box-one-left .classleftcons .one-class-group .box-two-right .classconsjk::-webkit-scrollbar-track{border-radius:0;background:#f4f4f4}.mv-nav-big .navbox .class-boxs .box-one-left .classleftcons .one-class-group .box-two-right .two-class-group{margin-bottom:10px}.mv-nav-big .navbox .class-boxs .box-one-left .classleftcons .one-class-group .box-two-right .two-class-group .two-class-link{width:130px;color:#000;font-weight:bold;font-size:14px;height:35px;line-height:35px;flex-shrink:0;padding-right:10px;box-sizing:border-box;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.mv-nav-big .navbox .class-boxs .box-one-left .classleftcons .one-class-group .box-two-right .two-class-group .two-class-link:hover{color:#FF9A00}.mv-nav-big .navbox .class-boxs .box-one-left .classleftcons .one-class-group .box-two-right .two-class-group .three-class-group{flex-wrap:wrap;margin-bottom:5px}.mv-nav-big .navbox .class-boxs .box-one-left .classleftcons .one-class-group .box-two-right .two-class-group .three-class-group .three-class-link{flex-shrink:0;padding-right:20px;box-sizing:border-box;margin-bottom:5px;height:30px;line-height:30px;color:#888888;font-size:12px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.mv-nav-big .navbox .class-boxs .box-one-left .classleftcons .one-class-group .box-two-right .two-class-group .three-class-group .three-class-link:hover{color:#FF9A00}.mv-nav-big .navbox .class-boxs .box-one-left .classleftcons .one-class-group:hover .box-two-right{display:block}.mv-nav-big .navbox .class-boxs:hover .box-one-left{display:block}.mv-nav-big .navbox .haed-nav-box{height:38px;line-height:38px}.mv-nav-big .navbox .haed-nav-box ul{box-sizing:border-box;padding-left:34px}.mv-nav-big .navbox .haed-nav-box li{margin-right:75px}.mv-nav-big .navbox .haed-nav-box li a{font-size:18px;color:#000}.mv-nav-big .navbox .haed-nav-box li.act a,.mv-nav-big .navbox .haed-nav-box li:hover a{color:#FF9A00} .mv-nav-big{height:38px;border-bottom:1px solid #FF9A00;background:#fff}.mv-nav-big .navbox{margin:0 auto;width:1226px}.mv-nav-big .navbox .class-boxs{position:relative;height:38px}.mv-nav-big .navbox .class-boxs .title-lc{line-height:38px;width:234px;height:38px;background:#FF9A00;color:#fff;font-weight:bold;font-size:18px;cursor:pointer;box-sizing:border-box;padding-left:14px;display:block}.mv-nav-big .navbox .class-boxs .box-one-left{width:234px;height:460px;position:absolute;left:0px;top:39px;background:rgba(255,255,255,0.98);display:none;box-sizing:border-box;z-index:3;border-left:1px solid rgba(255,255,255,0)}.mv-nav-big .navbox .class-boxs .box-one-left.index-pages{display:block}.mv-nav-big .navbox .class-boxs .box-one-left .classleftcons{width:234px;padding:20px 0;box-sizing:border-box;position:relative}.mv-nav-big .navbox .class-boxs .box-one-left .classleftcons .one-class-group{color:#313131;font-size:14px;padding-left:17px;padding-right:17px}.mv-nav-big .navbox .class-boxs .box-one-left .classleftcons .one-class-group .one-class-link{display:block;width:100%;cursor:pointer;padding-bottom:5px}.mv-nav-big .navbox .class-boxs .box-one-left .classleftcons .one-class-group .one-class-link .spann{color:#000;font-size:16px;display:block;height:35px;line-height:35px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.mv-nav-big .navbox .class-boxs .box-one-left .classleftcons .one-class-group .one-class-link .spann span{transition:all .5s;display:inline-block;vertical-align:middle;width:0px;overflow:hidden}.mv-nav-big .navbox .class-boxs .box-one-left .classleftcons .one-class-group .one-class-link .spann span i{font-size:11px;color:#FF9A00;position:relative;top:-2px}.mv-nav-big .navbox .class-boxs .box-one-left .classleftcons .one-class-group:hover .spann{color:#FF9A00}.mv-nav-big .navbox .class-boxs .box-one-left .classleftcons .one-class-group:hover .spann span{width:25px}.mv-nav-big .navbox .class-boxs .box-one-left .classleftcons .one-class-group .box-two-right{background:#fff;display:block;height:460px;width:775px;position:absolute;left:234px;padding-top:25px;box-sizing:border-box;top:0px;display:none;border-left:0px}.mv-nav-big .navbox .class-boxs .box-one-left .classleftcons .one-class-group .box-two-right .classconsjk{width:775px;height:410px;box-sizing:border-box;overflow-y:auto;padding:0 24px}.mv-nav-big .navbox .class-boxs .box-one-left .classleftcons .one-class-group .box-two-right .classconsjk::-webkit-scrollbar{width:8px}.mv-nav-big .navbox .class-boxs .box-one-left .classleftcons .one-class-group .box-two-right .classconsjk::-webkit-scrollbar-thumb{border-radius:6px;background:#fff;-webkit-box-shadow:inset 0 0 8px rgba(0,0,0,0.2)}.mv-nav-big .navbox .class-boxs .box-one-left .classleftcons .one-class-group .box-two-right .classconsjk::-webkit-scrollbar-track{border-radius:0;background:#f4f4f4}.mv-nav-big .navbox .class-boxs .box-one-left .classleftcons .one-class-group .box-two-right .two-class-group{margin-bottom:10px}.mv-nav-big .navbox .class-boxs .box-one-left .classleftcons .one-class-group .box-two-right .two-class-group .two-class-link{width:130px;color:#000;font-weight:bold;font-size:14px;height:35px;line-height:35px;flex-shrink:0;padding-right:10px;box-sizing:border-box;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.mv-nav-big .navbox .class-boxs .box-one-left .classleftcons .one-class-group .box-two-right .two-class-group .two-class-link:hover{color:#FF9A00}.mv-nav-big .navbox .class-boxs .box-one-left .classleftcons .one-class-group .box-two-right .two-class-group .three-class-group{flex-wrap:wrap;margin-bottom:5px}.mv-nav-big .navbox .class-boxs .box-one-left .classleftcons .one-class-group .box-two-right .two-class-group .three-class-group .three-class-link{flex-shrink:0;padding-right:20px;box-sizing:border-box;margin-bottom:5px;height:30px;line-height:30px;color:#888888;font-size:12px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.mv-nav-big .navbox .class-boxs .box-one-left .classleftcons .one-class-group .box-two-right .two-class-group .three-class-group .three-class-link:hover{color:#FF9A00}.mv-nav-big .navbox .class-boxs .box-one-left .classleftcons .one-class-group:hover .box-two-right{display:block}.mv-nav-big .navbox .class-boxs:hover .box-one-left{display:block}.mv-nav-big .navbox .haed-nav-box{height:38px;line-height:38px}.mv-nav-big .navbox .haed-nav-box ul{box-sizing:border-box;padding-left:34px}.mv-nav-big .navbox .haed-nav-box li{margin-right:75px}.mv-nav-big .navbox .haed-nav-box li a{font-size:18px;color:#000}.mv-nav-big .navbox .haed-nav-box li.act a,.mv-nav-big .navbox .haed-nav-box li:hover a{color:#FF9A00}
\ No newline at end of file \ No newline at end of file
src/components/Header/components/NavBig/index.tsx
import { Link } from 'react-router-dom' import { Link, useLocation } from 'react-router-dom'
import './index.min.css' import './index.min.css'
const NavBig = (props:{navname:string|undefined}) => {
import type { ResponseTypeCateList,classListType } from './types'
import { useEffect, useState } from 'react'
import useRequest from '../../../../hooks/useRequest'
const NavBig = () => {
const location=useLocation()
const items = [{ const items = [{
url: '/', url: '/',
name: '首页' name: '首页'
}, { }, {
url: '/brandMap', url: '/brandMap',
name: '品牌馆' name: '品牌馆'
},{ }, {
url: '/about', url: '/about',
name: '关于我们' name: '关于我们'
}, { }, {
url: '/contact', url: '/contact',
name: '联系我们' name: '联系我们'
}] }]
const {navname}=props
const { request:classListRequest } = useRequest<ResponseTypeCateList>({manual:true})
const [classLists,setClassLists]=useState<classListType[]>([])
useEffect(()=>{
classListRequest({url: '/api/home/getCateList'}).then(res=>{
if(res?.code===0){
setClassLists(res.data?.nav_list||[])
}
})
},[classListRequest])
return ( return (
<> <>
<div className='mv-nav-big'> <div className='mv-nav-big'>
<div className='navbox row'> <div className='navbox row'>
<div className='class-boxs'> <div className='class-boxs'>
<Link className='title-lc' to='/classMap'>查看全部</Link> <Link className='title-lc' to='/classMap'>查看全部</Link>
<div className='box-one-left'> <div className={location.pathname==='/'?'box-one-left index-pages':'box-one-left'} >
<div className='classleftcons'> <div className='classleftcons'>
<div className='one-class-group'> {
<div className='one-class-link'> classLists.map(item => {
<Link className='spann' to='/category/1'> return (
<span><i className='icon iconfont icon-sanjiaoxing'></i></span> <div className='one-class-group' key={item.goods_type_id}>
工业控制 <div className='one-class-link'>
</Link> <Link className='spann' to={`/category/${item.goods_type_id}`}>
</div> <span><i className='icon iconfont icon-sanjiaoxing'></i></span>
{item.goods_type_name}
<div className='box-two-right '> </Link>
<div className='classconsjk'>
<div className='two-class-group '>
<Link to='/category/1' className='two-class-link'>工控机</Link>
<div className='three-class-group row'>
<Link className='three-class-link' to='/category/1/11'>4U工控机</Link>
<Link className='three-class-link' to='/category/1/11'>4U工控机</Link>
</div> </div>
</div>
<div className='two-class-group '> <div className='box-two-right '>
<Link to='/category/1' className='two-class-link'>工控机</Link> <div className='classconsjk'>
<div className='three-class-group row'>
<Link className='three-class-link' to='/category/1/11'>4U工控机</Link> <div className='two-class-group '>
<Link className='three-class-link' to='/category/1/11'>4U工控机</Link> <Link to={`/category/${item.goods_type_id}`} key={item.goods_type_id} className='two-class-link'>{item.goods_type_name}</Link>
<div className='three-class-group row'>
{
(item.child||[]).map((itemChild,index)=>{
return (
<Link key={itemChild.goods_type_id+index} className='three-class-link' to={`/category/${item.goods_type_id}/${itemChild.goods_type_id}`}>{itemChild.goods_type_name}</Link>
)
})
}
</div>
</div>
</div>
</div> </div>
</div> </div>
</div> )
</div> })
</div> }
</div> </div>
</div> </div>
...@@ -58,9 +87,9 @@ const NavBig = (props:{navname:string|undefined}) => { ...@@ -58,9 +87,9 @@ const NavBig = (props:{navname:string|undefined}) => {
<div className='haed-nav-box'> <div className='haed-nav-box'>
<ul className='row'> <ul className='row'>
{ {
items.map((item,index)=>{ items.map((item, index) => {
return ( return (
<li className={navname===item.name?'act':''} key={item.name+index}> <li className={location.pathname === item.url ? 'act' : ''} key={item.name + index}>
<Link to={item.url}>{item.name}</Link> <Link to={item.url}>{item.name}</Link>
</li> </li>
) )
......
src/components/Header/components/NavBig/types.tsx 0 → 100644
export type ResponseTypeCateList = {
code: number | string,
data: {
nav_list: Array<classListType>
} | null,
msg: string
}
export type classListType = {
goods_type_id: string,
goods_type_name: string,
child?: Array<{
goods_type_id: string,
goods_type_name: string,
}>
}
src/components/Header/components/TopH/index.tsx
...@@ -4,6 +4,7 @@ import { Link } from 'react-router-dom' ...@@ -4,6 +4,7 @@ import { Link } from 'react-router-dom'
import QqIcon from '../../../QqIcon' import QqIcon from '../../../QqIcon'
const TopH=()=>{ const TopH=()=>{
return ( return (
......
src/components/Header/index.tsx
import TopH from "./components/TopH" import TopH from "./components/TopH"
import SearchH from "./components/SearchH" import SearchH from "./components/SearchH"
import NavBig from "./components/NavBig" import NavBig from "./components/NavBig"
import { useSeoTitle } from "../../hooks/useSeoTitle"
const Header=(props:{navname?:string})=>{ const Header = () => {
const {navname}=props
const seoTitle=useSeoTitle()
return ( return (
<> <>
<div className="head-box"> {seoTitle}
<TopH /> <div className="head-box">
<SearchH /> <TopH />
<NavBig navname={navname}/> <SearchH />
</div> <NavBig />
</div>
</> </>
) )
} }
......
src/components/ListOneItem/index.less
.list-group-one-item{ .list-group-one-item{
padding:0px 33px; padding:0px 27px;
background: #fff; background: #fff;
.cons{ .cons{
border-bottom: 1px solid #e7e7e7; border-top: 1px solid #e7e7e7;
padding:10px 0px; padding:10px 0px;
.item{ .item{
margin-right: 20px; margin-right: 20px;
......
src/components/ListOneItem/index.min.css
.list-group-one-item{padding:0px 33px;background:#fff}.list-group-one-item .cons{border-bottom:1px solid #e7e7e7;padding:10px 0px}.list-group-one-item .cons .item{margin-right:20px;box-sizing:border-box;flex-shrink:0}.list-group-one-item .cons .item:last-child{margin-right:0px}.list-group-one-item .cons .item .goods-img{width:92px;height:92px}.list-group-one-item .cons .item .goods-name{font-weight:bold;font-size:14px;color:#000000;line-height:19px;height:38px;word-break:break-all;text-overflow:ellipsis;overflow:hidden;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;margin-bottom:10px}.list-group-one-item .cons .item .goods-name:hover{color:#FF9A00;cursor:pointer}.list-group-one-item .cons .item p{font-size:12px;color:#000000;line-height:23px}.list-group-one-item .cons .item .jtgroup{font-size:12px;color:#000000;line-height:23px}.list-group-one-item .cons .item .jtgroup span,.list-group-one-item .cons .item .jtgroup strong{width:33.33%}.list-group-one-item .cons .item .ljxunj{cursor:pointer;width:80px;height:30px;background:#FF9A00;color:#fff;font-size:14px;margin-right:30px;text-align:center;line-height:30px}.list-group-one-item .cons .item.pt48{padding-top:48px}.list-group-one-item .cons .item.w-198{width:198px}.list-group-one-item .cons .item.w-345{width:345px}.list-group-one-item .cons .item.w-322{width:322px} .list-group-one-item{padding:0px 27px;background:#fff}.list-group-one-item .cons{border-top:1px solid #e7e7e7;padding:10px 0px}.list-group-one-item .cons .item{margin-right:20px;box-sizing:border-box;flex-shrink:0}.list-group-one-item .cons .item:last-child{margin-right:0px}.list-group-one-item .cons .item .goods-img{width:92px;height:92px}.list-group-one-item .cons .item .goods-name{font-weight:bold;font-size:14px;color:#000000;line-height:19px;height:38px;word-break:break-all;text-overflow:ellipsis;overflow:hidden;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;margin-bottom:10px}.list-group-one-item .cons .item .goods-name:hover{color:#FF9A00;cursor:pointer}.list-group-one-item .cons .item p{font-size:12px;color:#000000;line-height:23px}.list-group-one-item .cons .item .jtgroup{font-size:12px;color:#000000;line-height:23px}.list-group-one-item .cons .item .jtgroup span,.list-group-one-item .cons .item .jtgroup strong{width:33.33%}.list-group-one-item .cons .item .ljxunj{cursor:pointer;width:80px;height:30px;background:#FF9A00;color:#fff;font-size:14px;margin-right:30px;text-align:center;line-height:30px}.list-group-one-item .cons .item.pt48{padding-top:48px}.list-group-one-item .cons .item.w-198{width:198px}.list-group-one-item .cons .item.w-345{width:345px}.list-group-one-item .cons .item.w-322{width:322px}
\ No newline at end of file \ No newline at end of file
src/components/ListOneItem/index.tsx
...@@ -4,29 +4,36 @@ import QqIcon from '../QqIcon' ...@@ -4,29 +4,36 @@ import QqIcon from '../QqIcon'
import './index.min.css' import './index.min.css'
import { useContext } from 'react' import { useContext } from 'react'
import { CommonConfigDataContext } from '../../contexts/CommonConfigDataContext' import { CommonConfigDataContext } from '../../contexts/CommonConfigDataContext'
import type {dataListItemType} from './types'
const ListOneItem = () => { const ListOneItem = (props:dataListItemType) => {
const itemInfo={...props!}
const commonConfigData=useContext(CommonConfigDataContext) const commonConfigData=useContext(CommonConfigDataContext)
return ( return (
<> <>
<div className='list-group-one-item'> <div className='list-group-one-item'>
<div className='cons row'> <div className='cons row'>
<div className='item'> <div className='item'>
<Link to='/detail/1'><img src="https://img.ichunt.com/images/cms/202406/28/c33dc02613a1659c2d76d478c2c683ea.jpg" className='goods-img' alt="" /></Link> <Link to={`/detail/${itemInfo.goods_id}`}><img src={itemInfo.goods_images||'http://static.ichunt.com//dist/res/home/images/goods_default.png'} className='goods-img' alt="" /></Link>
</div> </div>
<div className='item w-198'> <div className='item w-198'>
<Link className='goods-name' to='/detail/1'>X5043PIZX5043PIZX5043PIZX5043PIZX5043PIZX5043PIZX5043PIZX5043PIZ</Link> <Link className='goods-name' to={`/detail/${itemInfo.goods_id}`}>{itemInfo.goods_name}</Link>
<p>品牌：研华</p> <p>品牌：{itemInfo.brand_name}</p>
<p>参数：PCI-11654</p> <p>参数：{itemInfo.class_name}</p>
</div> </div>
<div className='item w-345 pt48'> <div className='item w-345 pt48'>
<p>库存：8551</p> <p>库存：{itemInfo.stock}</p>
<p>起订量：1000 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 递增：10</p> <p>起订量：{itemInfo.moq} &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 递增：{itemInfo.multiple}</p>
</div> </div>
<div className='item w-322 '> <div className='item w-322 '>
<div className='jtgroup row'><span>5000+</span><strong>¥18.2365</strong><strong>¥18.2365</strong></div> {
<div className='jtgroup row'><span>5000+</span><strong>¥18.2365</strong><strong>¥18.2365</strong></div> itemInfo.ladder_price.map((item,index)=>{
<div className='jtgroup row'><span>5000+</span><strong>¥18.2365</strong><strong>¥18.2365</strong></div> return (
<div key={index+item.price_cn} className='jtgroup row'><span>{item.purchases}+</span><strong>¥{item.price_cn}</strong><strong>¥{item.price_us}</strong></div>
)
})
}
</div> </div>
<div className='item row'> <div className='item row'>
<a href={commonConfigData.qqurl} rel="noreferrer" className='ljxunj' target='_blank'>立即询价</a> <a href={commonConfigData.qqurl} rel="noreferrer" className='ljxunj' target='_blank'>立即询价</a>
......
src/components/ListOneItem/types.tsx
export type ListSortType = {
sortType:number,//1 综合排序 2库存排序 3价格排序 export type dataListItemType = {
isStock:boolean,//true 仅有货 false 全部 sku_name: string;
stockSort?:string, // top 升序 bottom 降序 brand_name: string;
priceSort?:string // top 升序 bottom 降序 class_name: string;
cn_delivery_time: string;
hk_delivery_time: string;
goods_id: string;
goods_images: string;
goods_name: string;
moq: number;
multiple: number;
stock: number;
supplier_name: string;
ladder_price: Array<{
price_cn: number;
price_cost_cn: number;
price_us: number;
purchases: number;
price_cost_us: number;
}>
} }
src/components/RouterCus/index.tsx deleted 100644 → 0
import { createHashRouter ,RouterProvider} from "react-router-dom"
import Home from '../../pages/Home';
import Search from '../../pages/Search';
import BrandMap from '../../pages/BrandMap';
import ClassMap from '../../pages/ClassMap';
import About from '../../pages/About';
import Contact from '../../pages/Contact';
import Notice from '../../pages/Notice';
import GoodsDetail from "../../pages/GoodsDetail";
import Category from "../../pages/Category";
import Brand from "../../pages/Brand";
import Page404 from "../../pages/Page404";
import { useEffect, useState } from 'react';
import { CommonConfigDataContext } from "../../contexts/CommonConfigDataContext";
const router = createHashRouter([
{
path: '/',
element: <Home />,
},
{
path: '/search',
element: <Search />
},
{
path: '/detail/:goods_id',
element: <GoodsDetail />
},
{
path: '/brandMap',
element: <BrandMap />
},
{
path: '/brand/:brand_id',
element: <Brand />
},
{
path: '/classMap',
element: <ClassMap />
},
{
path: '/category/:class_id1/:class_id2?',
element: <Category />
},
{
path: '/about',
element: <About />
},
{
path: '/notice',
element: <Notice />
},
{
path: '/contact',
element: <Contact />
}
,
{
path: '*',
element: <Page404 />
}
])
const RouterCus=()=>{
const [commonConfigData, setCommonConfigData] = useState({
qqurl:''
});
useEffect(() => {
console.log("getGlobalData")
setCommonConfigData({
qqurl:'/'
})
}, []);
return (
<>
<CommonConfigDataContext.Provider value={commonConfigData}>
<RouterProvider router={router} />
</CommonConfigDataContext.Provider>
</>
)
}
export default RouterCus
\ No newline at end of file
src/contexts/CommonConfigDataContext.tsx
import { createContext} from 'react'; import { createContext} from 'react';
export const CommonConfigDataContext = createContext({
qqurl:'' export const CommonConfigDataContext = createContext({qqurl:''})
}) \ No newline at end of file
\ No newline at end of file
src/hooks/useRequest.tsx
...@@ -53,6 +53,7 @@ function useRequest<T>(options: AxiosRequestConfig & { manual?: boolean,loading? ...@@ -53,6 +53,7 @@ function useRequest<T>(options: AxiosRequestConfig & { manual?: boolean,loading?
} }
}, [options, request]) }, [options, request])
return { data,loaded, request, cancel } return { data,loaded, request, cancel }
} }
......
src/hooks/useSeoTitle.tsx 0 → 100644
import { useLocation } from "react-router-dom"
export const useSeoTitle = () => {
const Helmet = require('react-helmet').Helmet;
const location = useLocation()
let titlestr='404'
const titleKeywords:any = {
'/': { title: '首页', keyword: '' },
'/search': { title: '搜索结果' },
'/detail': { title: '商品详情' },
'/brandMap': { title: '品牌馆' },
'/Brand': { title: '品牌结果' },
'/classMap': { title: '分类地图' },
'/category': { title: '分类结果' },
'/about': { title: '关于我们' },
'/contact': { title: '联系我们' },
'/notice': { title: '公告' },
}
if (Object.keys(titleKeywords).indexOf(location.pathname) !== -1) {
titlestr=titleKeywords[location.pathname]['title']
}
if(location.pathname.indexOf('/detail/')!==-1){
titlestr='商品详情'
}
if(location.pathname.indexOf('/brand/')!==-1){
titlestr='品牌结果'
}
if(location.pathname.indexOf('/category/')!==-1){
titlestr='分类结果'
}
return <Helmet><title>麒麟电子商城-{titlestr}</title></Helmet>
}
src/pages/About/index.tsx
import './index.min.css' import './index.min.css'
import Header from "../../components/Header";
import Footer from "../../components/Footer";
const About = () => { const About = () => {
const Helmet = require('react-helmet').Helmet;
return ( return (
<> <>
<Helmet><title>麒麟电子商城-关于我们'</title></Helmet>
<Header navname='关于我们' />
<div className='mv-about-page'> <div className='mv-about-page'>
<div className='banner'></div> <div className='banner'></div>
<div className='section'> <div className='section'>
...@@ -32,7 +30,7 @@ const About = () => { ...@@ -32,7 +30,7 @@ const About = () => {
</div> </div>
</div> </div>
</div> </div>
<Footer />
</> </>
) )
} }
......
src/pages/Brand/index.less
...@@ -59,23 +59,12 @@ ...@@ -59,23 +59,12 @@
padding-top: 24px; padding-top: 24px;
.data-group-supplier{ .data-group-supplier{
border: 1px solid #EDEFEF; padding-bottom: 20px;
.data-list-title{ background: #fff;
padding:0 33px; min-height: 400px;
height:50px; .sortbixjk{
line-height: 50px; padding:0 27px;
font-size: 16px; padding-top: 25px;
color: #000000;
background: #f6f6f6;
}
.data-list-more{
height:48px;
line-height: 48px;
color:#000;
font-size: 12px;
text-align: center;
background: #fff;
b{color:#FF9A00;cursor: pointer;}
} }
} }
......
src/pages/Brand/index.min.css
.mv-brandlist-page{margin-bottom:56px}.mv-brandlist-page .brandheadsl{min-height:275px;background:#fff;padding:26px 60px}.mv-brandlist-page .brandheadsl .brandimg{width:222px;height:222px;background:#FFFFFF;border:1px solid #EDEFEF;margin-right:60px}.mv-brandlist-page .brandheadsl .brand-info{width:822px}.mv-brandlist-page .brandheadsl .brand-info h2{font-weight:bold;font-size:22px;color:#000000;line-height:29px;text-align:center;margin-bottom:20px}.mv-brandlist-page .brandheadsl .brand-info .textBf{font-size:14px;color:#000000;line-height:25px;height:100px;word-break:break-all;text-overflow:ellipsis;overflow:hidden;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:4}.mv-brandlist-page .brandheadsl .brand-info .brandbox span{font-size:12px;color:#888;line-height:20px;width:80px;flex-shrink:0}.mv-brandlist-page .brandheadsl .brand-info .brandbox .itembox{flex-wrap:wrap}.mv-brandlist-page .brandheadsl .brand-info .brandbox .itembox .item{height:20px;line-height:20px;font-size:12px;color:#000000;margin-right:40px;margin-bottom:15px}.mv-brandlist-page .databox{padding-top:24px}.mv-brandlist-page .databox .data-group-supplier{border:1px solid #EDEFEF}.mv-brandlist-page .databox .data-group-supplier .data-list-title{padding:0 33px;height:50px;line-height:50px;font-size:16px;color:#000000;background:#f6f6f6}.mv-brandlist-page .databox .data-group-supplier .data-list-more{height:48px;line-height:48px;color:#000;font-size:12px;text-align:center;background:#fff}.mv-brandlist-page .databox .data-group-supplier .data-list-more b{color:#FF9A00;cursor:pointer} .mv-brandlist-page{margin-bottom:56px}.mv-brandlist-page .brandheadsl{min-height:275px;background:#fff;padding:26px 60px}.mv-brandlist-page .brandheadsl .brandimg{width:222px;height:222px;background:#FFFFFF;border:1px solid #EDEFEF;margin-right:60px}.mv-brandlist-page .brandheadsl .brand-info{width:822px}.mv-brandlist-page .brandheadsl .brand-info h2{font-weight:bold;font-size:22px;color:#000000;line-height:29px;text-align:center;margin-bottom:20px}.mv-brandlist-page .brandheadsl .brand-info .textBf{font-size:14px;color:#000000;line-height:25px;height:100px;word-break:break-all;text-overflow:ellipsis;overflow:hidden;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:4}.mv-brandlist-page .brandheadsl .brand-info .brandbox span{font-size:12px;color:#888;line-height:20px;width:80px;flex-shrink:0}.mv-brandlist-page .brandheadsl .brand-info .brandbox .itembox{flex-wrap:wrap}.mv-brandlist-page .brandheadsl .brand-info .brandbox .itembox .item{height:20px;line-height:20px;font-size:12px;color:#000000;margin-right:40px;margin-bottom:15px}.mv-brandlist-page .databox{padding-top:24px}.mv-brandlist-page .databox .data-group-supplier{padding-bottom:20px;background:#fff;min-height:400px}.mv-brandlist-page .databox .data-group-supplier .sortbixjk{padding:0 27px;padding-top:25px}
\ No newline at end of file \ No newline at end of file
src/pages/Brand/index.tsx
import './index.min.css' import './index.min.css'
import Header from "../../components/Header";
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 { useState } from 'react'; import { useState } from 'react';
import type { ListSortType } from '../../components/ListSort/types' import type { ListSortType } from '../../components/ListSort/types'
import ListOneItem from '../../components/ListOneItem'; //import ListOneItem from '../../components/ListOneItem';
const Brand=()=>{ const Brand=()=>{
const Helmet = require('react-helmet').Helmet;
const [sortObj, setSortObj] = useState<ListSortType>({ const [sortObj, setSortObj] = useState<ListSortType>({
sortType: 1, sortType: 1,
isStock: false, isStock: false,
...@@ -20,8 +19,7 @@ const Brand=()=>{ ...@@ -20,8 +19,7 @@ const Brand=()=>{
return ( return (
<> <>
<Helmet><title>麒麟电子商城-品牌结果</title></Helmet>
<Header navname='品牌结果' />
<BreadNav><strong>"ti"的型号搜索结果</strong></BreadNav> <BreadNav><strong>"ti"的型号搜索结果</strong></BreadNav>
<div className='mv-brandlist-page w1226' > <div className='mv-brandlist-page w1226' >
<div className='brandheadsl row boxsiz'> <div className='brandheadsl row boxsiz'>
...@@ -44,13 +42,12 @@ const Brand=()=>{ ...@@ -44,13 +42,12 @@ const Brand=()=>{
<ListSort sortObj={sortObj} setSortObj={setSortObj}/> <ListSort sortObj={sortObj} setSortObj={setSortObj}/>
<div className='data-group-supplier'> <div className='data-group-supplier'>
<div className='data-list-title'>商品信息</div> <div className='data-list-title'>商品信息</div>
<ListOneItem />
<ListOneItem />
<div className='data-list-more'>还有<b>32</b>个商品未显示，<b>点击加载更多</b></div> <div className='data-list-more'>还有<b>32</b>个商品未显示，<b>点击加载更多</b></div>
</div> </div>
</div> </div>
</div> </div>
<Footer />
</> </>
) )
......
src/pages/BrandMap/index.tsx
import { useRef } from 'react';
import useRequest from '../../hooks/useRequest';
import './index.min.css' import './index.min.css'
import Header from "../../components/Header";
import Footer from "../../components/Footer";
import { Link } from 'react-router-dom';
import { Link } from 'react-router-dom';
import type { ResponseType } from './types';
const BrandMap = () => { const BrandMap = () => {
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]
console.log("brand")
const defaultRequestData = useRef({ url: '/api/brand/getBrandList' })
const { data } = useRequest<ResponseType>(defaultRequestData.current)
const result: ResponseType = data!
console.log(result)
return ( return (
<> <>
<Helmet><title>麒麟电子商城-品牌馆</title></Helmet>
<Header navname='品牌馆' />
<div className='mv-brand-page'> <div className='mv-brand-page'>
<div className='section w1226'> <div className='section w1226'>
...@@ -54,7 +60,7 @@ const BrandMap = () => { ...@@ -54,7 +60,7 @@ const BrandMap = () => {
</div> </div>
</div> </div>
</div> </div>
<Footer />
</> </>
) )
......
src/pages/Category/index.less
...@@ -48,32 +48,15 @@ ...@@ -48,32 +48,15 @@
} }
.databox{ .databox{
padding-top: 24px;
.data-group-supplier{ .data-group-supplier{
border: 1px solid #EDEFEF; padding-bottom: 20px;
.data-list-title{ background: #fff;
padding:0 33px; min-height: 400px;
height:50px; .sortbixjk{
line-height: 50px; padding:0 27px;
font-size: 16px; padding-top: 25px;
color: #000000;
background: #f6f6f6;
}
.data-list-more{
height:48px;
line-height: 48px;
color:#000;
font-size: 12px;
text-align: center;
background: #fff;
b{color:#FF9A00;cursor: pointer;}
} }
} }
} }
} }
\ No newline at end of file
src/pages/Category/index.min.css
.mv-category-page{padding-bottom:54px}.mv-category-page .categoryHead{min-height:245px;background:#fff;padding:30px 50px}.mv-category-page .categoryHead h2{font-weight:bold;font-size:22px;color:#000000;line-height:29px;text-align:center;margin-bottom:20px}.mv-category-page .categoryHead .textBf{font-size:14px;color:#000000;line-height:25px;height:100px;word-break:break-all;text-overflow:ellipsis;overflow:hidden;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:4}.mv-category-page .categoryHead .brandbox span{font-weight:bold;font-size:14px;color:#000000;line-height:20px;width:80px;flex-shrink:0}.mv-category-page .categoryHead .brandbox .itembox{flex-wrap:wrap}.mv-category-page .categoryHead .brandbox .itembox .item{height:20px;line-height:20px;font-size:14px;color:#000000;margin-right:40px;margin-bottom:15px}.mv-category-page .databox{padding-top:24px}.mv-category-page .databox .data-group-supplier{border:1px solid #EDEFEF}.mv-category-page .databox .data-group-supplier .data-list-title{padding:0 33px;height:50px;line-height:50px;font-size:16px;color:#000000;background:#f6f6f6}.mv-category-page .databox .data-group-supplier .data-list-more{height:48px;line-height:48px;color:#000;font-size:12px;text-align:center;background:#fff}.mv-category-page .databox .data-group-supplier .data-list-more b{color:#FF9A00;cursor:pointer} .mv-category-page{padding-bottom:54px}.mv-category-page .categoryHead{min-height:245px;background:#fff;padding:30px 50px}.mv-category-page .categoryHead h2{font-weight:bold;font-size:22px;color:#000000;line-height:29px;text-align:center;margin-bottom:20px}.mv-category-page .categoryHead .textBf{font-size:14px;color:#000000;line-height:25px;height:100px;word-break:break-all;text-overflow:ellipsis;overflow:hidden;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:4}.mv-category-page .categoryHead .brandbox span{font-weight:bold;font-size:14px;color:#000000;line-height:20px;width:80px;flex-shrink:0}.mv-category-page .categoryHead .brandbox .itembox{flex-wrap:wrap}.mv-category-page .categoryHead .brandbox .itembox .item{height:20px;line-height:20px;font-size:14px;color:#000000;margin-right:40px;margin-bottom:15px}.mv-category-page .databox .data-group-supplier{padding-bottom:20px;background:#fff;min-height:400px}.mv-category-page .databox .data-group-supplier .sortbixjk{padding:0 27px;padding-top:25px}
\ No newline at end of file \ No newline at end of file
src/pages/Category/index.tsx
import './index.min.css' import './index.min.css'
import Header from "../../components/Header";
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 { useState } from 'react'; import { useEffect, useRef, useState } from 'react';
import type { ListSortType } from '../../components/ListSort/types' import type { ListSortType } from '../../components/ListSort/types'
import type { dataListItemType } from '../../components/ListOneItem/types'
import type { classResponseType, requestDataType } from './types'
import ListOneItem from '../../components/ListOneItem'; import ListOneItem from '../../components/ListOneItem';
import useRequest from '../../hooks/useRequest';
import { useParams } from 'react-router-dom';
import { Pagination } from 'antd';
import ListNoData from '../../components/ListNoData';
const Category = () => { const Category = () => {
const Helmet = require('react-helmet').Helmet;
const params = useParams()
const [shouNoData, setShouNoData] = useState(false)
const [page, setPage] = useState(1)
const [total, setTotal] = useState(0)
const [dataList, setDataList] = useState<dataListItemType[]>([])
const [sortObj, setSortObj] = useState<ListSortType>({ const [sortObj, setSortObj] = useState<ListSortType>({
sortType: 1, sortType: 1,
isStock: false, isStock: false,
stockSort: '', stockSort: '',
priceSort: '' priceSort: ''
}) })
const { request: classInfoRequest } = useRequest<classResponseType>({ manual: true })
const shouldResetPage = useRef(false);
useEffect(() => {
shouldResetPage.current = true;
setPage(1);
}, [sortObj]);
useEffect(() => {
if(shouldResetPage.current&&page!==1){
return
}
shouldResetPage.current = false;
let obj_: requestDataType = { page_size: 10, page: page, class_id1: params.class_id1, class_id2: (params.class_id2 || '') }
if (sortObj.isStock) {
obj_['stock/gt'] = 0
}
if (sortObj.sortType === 2) {
obj_['stock/sort'] = sortObj.stockSort === 'top' ? 'asc' : 'desc'
}
if (sortObj.sortType === 3) {
obj_['single_price/sort'] = sortObj.priceSort === 'top' ? 'asc' : 'desc'
}
classInfoRequest({
url: '/api/search/searchByClass',
method: 'post',
data: obj_,
}).then(res => {
if (res?.code === 0) {
setTotal(res.data?.total)
setDataList(res.data?.lists || [])
if (res.data?.lists.length > 0) {
setShouNoData(false)
} else {
setShouNoData(true)
}
} else {
setShouNoData(true)
}
})
}, [classInfoRequest, params.class_id2, params.class_id1, page,sortObj])
const onChange = (page: number) => {
setPage(page)
}
return ( return (
<> <>
<Helmet><title>麒麟电子商城-分类结果</title></Helmet>
<Header navname='分类结果' /> <BreadNav><strong>分类搜索结果</strong></BreadNav>
<BreadNav><strong>"MPX5700ASX"的型号搜索结果</strong></BreadNav>
<div className='mv-category-page w1226' > <div className='mv-category-page w1226' >
<div className='categoryHead boxsiz'> {/* <div className='categoryHead boxsiz'>
<h2>陶瓷电容</h2> <h2>陶瓷电容</h2>
<div className='textBf'> <div className='textBf'>
Lorem ipsum dolor sit amet, ci, sed rhoncus pronin sapien nunc accuan eget. Lorem ipsum dolor sit amet, ci, sed rhoncus pronin sapien nunc accuan eget.
...@@ -37,19 +94,28 @@ const Category = () => { ...@@ -37,19 +94,28 @@ const Category = () => {
<div className='item'>NPX</div> <div className='item'>NPX</div>
</div> </div>
</div> </div>
</div> </div> */}
<div className='databox w1226'> <div className='databox w1226'>
<ListSort sortObj={sortObj} setSortObj={setSortObj}/>
<div className='data-group-supplier'> <div className='data-group-supplier'>
<div className='data-list-title'>商品信息</div> <div className='sortbixjk'>
<ListOneItem /> <ListSort sortObj={sortObj} setSortObj={setSortObj} />
<ListOneItem /> </div>
<div className='data-list-more'>还有<b>32</b>个商品未显示，<b>点击加载更多</b></div> {
dataList.map(item => {
return (
<ListOneItem key={item.goods_id} {...item} />
)
})
}
{shouNoData ? <ListNoData /> : ''}
</div> </div>
<Pagination style={{ 'marginTop': '30px' }} current={page} hideOnSinglePage={true} onChange={onChange} total={total} pageSize={10} showSizeChanger={false} />
</div> </div>
</div> </div>
<Footer />
</> </>
) )
......
src/pages/Category/type.tsx deleted 100644 → 0
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/Category/types.tsx 0 → 100644
import type { dataListItemType } from '../../components/ListOneItem/types'
export type classResponseType = {
code: number|string,
data: {
lists:Array<dataListItemType>,
total:number
},
msg:string
}
export type requestDataType={
page_size:number,
page:number,
class_id1:string|undefined,
class_id2?:string|undefined,
'stock/gt'?:number|string,
'stock/sort'?:'asc'|'desc',
'single_price/sort'?:'asc'|'desc'
}
src/pages/ClassMap/index.tsx
import './index.min.css' import './index.min.css'
import Header from "../../components/Header";
import Footer from "../../components/Footer";
import { Link } from 'react-router-dom'; import { Link } from 'react-router-dom';
const ClassMap = () => { const ClassMap = () => {
const Helmet = require('react-helmet').Helmet;
return ( return (
<> <>
<Helmet><title>麒麟电子商城-分类地图</title></Helmet>
<Header navname='分类地图' />
<div className='mv-class-page'> <div className='mv-class-page'>
<div className='w1226'> <div className='w1226'>
<h1>全部商品（2266）</h1> <h1>全部商品（2266）</h1>
...@@ -26,7 +24,7 @@ const ClassMap = () => { ...@@ -26,7 +24,7 @@ const ClassMap = () => {
</div> </div>
</div> </div>
</div> </div>
<Footer />
</> </>
) )
......
src/pages/Contact/index.tsx
import './index.min.css' import './index.min.css'
import Header from "../../components/Header";
import Footer from "../../components/Footer";
const Contact = () => { const Contact = () => {
const Helmet = require('react-helmet').Helmet;
return ( return (
<> <>
<Helmet><title>麒麟电子商城-联系我们'</title></Helmet>
<Header navname='联系我们' />
<div className='mv-contact-page'> <div className='mv-contact-page'>
<div className='banner'></div> <div className='banner'></div>
<div className='section'> <div className='section'>
...@@ -34,7 +32,7 @@ const Contact = () => { ...@@ -34,7 +32,7 @@ const Contact = () => {
</div> </div>
</div> </div>
</div> </div>
<Footer />
</> </>
) )
} }
......
src/pages/GoodsDetail/components/DetailHead.tsx
import QqIcon from "../../../components/QqIcon" import QqIcon from "../../../components/QqIcon"
import type { DetailResponseType } from '../types'
import { CommonConfigDataContext } from "../../../contexts/CommonConfigDataContext";
import { useContext } from "react";
const DetailHead = (props: DetailResponseType) => {
const DetailHead = () => { const commonConfigData = useContext(CommonConfigDataContext);
const sku_info = props.data?.sku_info!
return ( return (
<> <>
<div className='detail-headers w1226 row bothSide boxsiz'> <div className='detail-headers w1226 row bothSide boxsiz'>
<div className='l row'> <div className='l row'>
<img src="https://img.ichunt.com/images/cms/202302/13/18a3e095443643eaf5afd7ea108e2479.jpg" className='goodsimg' alt="" /> <img src={sku_info?.goods_images || 'http://static.ichunt.com//dist/res/home/images/goods_default.png'} className='goodsimg' alt="" />
<div className='info'> <div className='info'>
<div className='box'> <div className='box'>
<h1>DPS310XTSA1</h1> <h1>{sku_info.sku_name}</h1>
<p> 品牌： Universal Lighting Technologies</p> <p> 品牌： {sku_info.brand_name}</p>
<p>商品类别：低压差线性稳压(LDO)</p> <p>商品类别：低压差线性稳压(LDO)</p>
<p>封装规格： DO-214AC，SMA</p> <p>封装规格：{sku_info.encap}</p>
<p>描述：TVS-DIODE BI 0,4KW 18V SMA RoHSconf</p> <p>描述：{sku_info.remark}</p>
</div> </div>
<div className='handle row bothSide verCenter'> <div className='handle row bothSide verCenter'>
<QqIcon /> <QqIcon />
<a href="/" className='btn' target='_blank'>立即询价</a> <a href={commonConfigData.qqurl} rel="noreferrer" className='btn' target='_blank'>立即询价</a>
</div> </div>
</div> </div>
</div> </div>
<div className='r boxsiz'> <div className='r boxsiz'>
<p className='row'> <p className='row'>
<span className='items'>库存：8000 </span> <span className='items'>库存：{sku_info.stock} </span>
<span className='items'>交期：HK 6-9工作日</span> <span className='items'>交期：HK {sku_info.hk_delivery_time}</span>
</p> </p>
<p className='row'> <p className='row'>
<span className='items'> 批次：/</span> <span className='items'> 批次：{sku_info.batch_sn}</span>
<span className='items'>交期：大陆 6-9工作日</span> <span className='items'>交期：大陆 {sku_info.cn_delivery_time}</span>
</p> </p>
<p className='row mb23'> <p className='row mb23'>
<span className='items'> 起订量：1</span> <span className='items'> 起订量： {sku_info.moq}</span>
<span className='items'>递增：1</span> <span className='items'>递增： {sku_info.multiple}</span>
</p>
<p className='row'>
<span className='items'> 50000+</span>
<span className='items'>¥ 17.4015&nbsp;&nbsp;&nbsp;&nbsp;$ 1.4015</span>
</p>
<p className='row'>
<span className='items'> 50000+</span>
<span className='items'>¥ 17.4015&nbsp;&nbsp;&nbsp;&nbsp;$ 1.4015</span>
</p> </p>
{
sku_info.ladder_price.map((item,index) => {
return (
<p className='row' key={index}>
<span className='items'> {item.purchase}+</span>
<span className='items row'><span>¥ {item.price_cn||0}</span><span>$ {item.price_us||0}</span></span>
</p>
)
})
}
</div> </div>
</div> </div>
......
src/pages/GoodsDetail/components/DetailSection.tsx
import { Link } from "react-router-dom" import { Link } from "react-router-dom"
import type { DetailResponseType } from '../types'
const DetailSection = (props: DetailResponseType) => {
const DetailSection = () => { //const sku_info = props.data?.sku_info!
const other_sku_list = props.data?.other_sku_list || []
return ( return (
<> <>
<div className='detail-section w1226 row bothSide'> <div className='detail-section w1226 row bothSide'>
...@@ -43,15 +43,21 @@ const DetailSection = () => { ...@@ -43,15 +43,21 @@ const DetailSection = () => {
</div> </div>
<div className="secr"> <div className="secr">
<Link to='/detail/1' className='item boxsiz'> {
<img src="https://img.ichunt.com/test/images/cms/202405/30/a263b85bf297ae7d85f68a01b5db320d.jpg" alt="" /> other_sku_list.map(item => {
<div className='gos'>CRCW20107R5VISHAY CR</div> return (
<div className='row bothSide'> <Link to={`/detail/${item.sku_id}`} className='item boxsiz' key={item.sku_id}>
<div className='nam'>VISHAY</div> <img src={item.goods_images || 'http://static.ichunt.com//dist/res/home/images/goods_default.png'} alt="" />
<div className='prs'>¥ 0.2255</div> <div className='gos'>{item.sku_name}</div>
</div> <div className='row bothSide'>
</Link> <div className='nam'>{item.brand_name}</div>
<div className='prs'>¥{item.single_price}</div>
</div>
</Link>
)
})
}
</div> </div>
</div> </div>
</> </>
......
src/pages/GoodsDetail/index.less
...@@ -58,6 +58,9 @@ ...@@ -58,6 +58,9 @@
font-size: 12px; font-size: 12px;
color: #000000; color: #000000;
line-height: 25px; line-height: 25px;
span{
width:50%;
}
} }
} }
} }
......
src/pages/GoodsDetail/index.min.css
.mv-detail-page{margin-bottom:47px}.mv-detail-page .detail-headers{min-height:304px;padding:40px 35px;background:#fff}.mv-detail-page .detail-headers .goodsimg{width:222px;height:222px;margin-right:20px}.mv-detail-page .detail-headers .info .box{height:192px;width:420px}.mv-detail-page .detail-headers .info .box h1{font-weight:bold;font-size:18px;color:#313131;line-height:24px;margin-bottom:12px}.mv-detail-page .detail-headers .info .box p{font-size:12px;color:#000000;line-height:25px;max-height:50px;word-break:break-all;text-overflow:ellipsis;overflow:hidden;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2}.mv-detail-page .detail-headers .info .handle .btn{width:80px;height:30px;background:#FF9A00;line-height:30px;text-align:center;color:#fff}.mv-detail-page .detail-headers .r{width:452px;min-height:222px;background:#FFFCF8;padding:10px 50px}.mv-detail-page .detail-headers .r .mb23{margin-bottom:24px}.mv-detail-page .detail-headers .r .items{width:50%;font-size:12px;color:#000000;line-height:25px}.mv-detail-page .detail-section{margin-top:20px}.mv-detail-page .detail-section .secl{width:978px;min-height:330px;background:#FFFFFF;padding:30px}.mv-detail-page .detail-section .secl .lilist-box{border-top:1px solid #e5e5e5;font-size:14px;color:#313131;flex-shrink:0;flex-wrap:wrap;border-left:1px solid #e5e5e5}.mv-detail-page .detail-section .secl .lilist-box p{line-height:36px;width:50%;box-sizing:border-box;height:36px;border-right:1px solid #e5e5e5;border-bottom:1px solid #e5e5e5;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.mv-detail-page .detail-section .secl .lilist-box p b{width:130px;float:left;display:block;border-right:1px solid #e5e5e5;padding-left:20px;background:#F5F5F5;margin-right:1px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.mv-detail-page .detail-section .secl .lilist-box p span{padding-left:10px}.mv-detail-page .detail-section .secl .lilist-box p .ple0 span{padding-left:0px !important}.mv-detail-page .detail-section .secl .goods-mask{height:60px;line-height:30px;color:#313131;font-size:14px}.mv-detail-page .detail-section .secl .goods-mask div{width:130px;float:left;border-right:1px solid #e5e5e5;border-left:1px solid #e5e5e5;border-bottom:1px solid #e5e5e5;padding-left:20px;background:#F5F5F5;height:90px}.mv-detail-page .detail-section .secl .goods-mask h4{background:#fff;width:745px;height:90px;padding-left:10px;padding-right:10px;border-right:1px solid #e5e5e5;border-bottom:1px solid #e5e5e5;word-break:break-all;text-overflow:ellipsis;overflow:hidden;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3}.mv-detail-page .detail-section .secr .item{padding:34px 18px;width:233px;height:330px;transition:all .5s;background:#fff;display:block;margin-bottom:20px}.mv-detail-page .detail-section .secr .item:last-child{margin-bottom:0px}.mv-detail-page .detail-section .secr .item:hover{box-shadow:4px 6px 7px 1px rgba(154,151,149,0.18);transform:translateY(-1px)}.mv-detail-page .detail-section .secr .item img{width:150px;height:109px;display:block;margin:0 auto;margin-bottom:60px}.mv-detail-page .detail-section .secr .item .gos{font-size:14px;color:#000000;line-height:25px;word-break:break-all;text-overflow:ellipsis;overflow:hidden;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;height:50px;margin-bottom:30px}.mv-detail-page .detail-section .secr .item .nam{font-weight:normal;font-size:16px;color:#000000;line-height:18px;text-overflow:ellipsis;overflow:hidden;height:18px;max-width:110px}.mv-detail-page .detail-section .secr .item .prs{font-size:16px;color:#FF0006;line-height:18px} .mv-detail-page{margin-bottom:47px}.mv-detail-page .detail-headers{min-height:304px;padding:40px 35px;background:#fff}.mv-detail-page .detail-headers .goodsimg{width:222px;height:222px;margin-right:20px}.mv-detail-page .detail-headers .info .box{height:192px;width:420px}.mv-detail-page .detail-headers .info .box h1{font-weight:bold;font-size:18px;color:#313131;line-height:24px;margin-bottom:12px}.mv-detail-page .detail-headers .info .box p{font-size:12px;color:#000000;line-height:25px;max-height:50px;word-break:break-all;text-overflow:ellipsis;overflow:hidden;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2}.mv-detail-page .detail-headers .info .handle .btn{width:80px;height:30px;background:#FF9A00;line-height:30px;text-align:center;color:#fff}.mv-detail-page .detail-headers .r{width:452px;min-height:222px;background:#FFFCF8;padding:10px 50px}.mv-detail-page .detail-headers .r .mb23{margin-bottom:24px}.mv-detail-page .detail-headers .r .items{width:50%;font-size:12px;color:#000000;line-height:25px}.mv-detail-page .detail-headers .r .items span{width:50%}.mv-detail-page .detail-section{margin-top:20px}.mv-detail-page .detail-section .secl{width:978px;min-height:330px;background:#FFFFFF;padding:30px}.mv-detail-page .detail-section .secl .lilist-box{border-top:1px solid #e5e5e5;font-size:14px;color:#313131;flex-shrink:0;flex-wrap:wrap;border-left:1px solid #e5e5e5}.mv-detail-page .detail-section .secl .lilist-box p{line-height:36px;width:50%;box-sizing:border-box;height:36px;border-right:1px solid #e5e5e5;border-bottom:1px solid #e5e5e5;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.mv-detail-page .detail-section .secl .lilist-box p b{width:130px;float:left;display:block;border-right:1px solid #e5e5e5;padding-left:20px;background:#F5F5F5;margin-right:1px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.mv-detail-page .detail-section .secl .lilist-box p span{padding-left:10px}.mv-detail-page .detail-section .secl .lilist-box p .ple0 span{padding-left:0px !important}.mv-detail-page .detail-section .secl .goods-mask{height:60px;line-height:30px;color:#313131;font-size:14px}.mv-detail-page .detail-section .secl .goods-mask div{width:130px;float:left;border-right:1px solid #e5e5e5;border-left:1px solid #e5e5e5;border-bottom:1px solid #e5e5e5;padding-left:20px;background:#F5F5F5;height:90px}.mv-detail-page .detail-section .secl .goods-mask h4{background:#fff;width:745px;height:90px;padding-left:10px;padding-right:10px;border-right:1px solid #e5e5e5;border-bottom:1px solid #e5e5e5;word-break:break-all;text-overflow:ellipsis;overflow:hidden;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3}.mv-detail-page .detail-section .secr .item{padding:34px 18px;width:233px;height:330px;transition:all .5s;background:#fff;display:block;margin-bottom:20px}.mv-detail-page .detail-section .secr .item:last-child{margin-bottom:0px}.mv-detail-page .detail-section .secr .item:hover{box-shadow:4px 6px 7px 1px rgba(154,151,149,0.18);transform:translateY(-1px)}.mv-detail-page .detail-section .secr .item img{width:150px;height:109px;display:block;margin:0 auto;margin-bottom:60px}.mv-detail-page .detail-section .secr .item .gos{font-size:14px;color:#000000;line-height:25px;word-break:break-all;text-overflow:ellipsis;overflow:hidden;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;height:50px;margin-bottom:30px}.mv-detail-page .detail-section .secr .item .nam{font-weight:normal;font-size:16px;color:#000000;line-height:18px;text-overflow:ellipsis;overflow:hidden;height:18px;max-width:110px}.mv-detail-page .detail-section .secr .item .prs{font-size:16px;color:#FF0006;line-height:18px}
\ No newline at end of file \ No newline at end of file
src/pages/GoodsDetail/index.tsx
import './index.min.css' import './index.min.css'
import Footer from "../../components/Footer";
import Header from "../../components/Header";
import DetailHead from './components/DetailHead'; import DetailHead from './components/DetailHead';
import DetailSection from './components/DetailSection'; import DetailSection from './components/DetailSection';
import BreadNav from '../../components/BreadNav'; import BreadNav from '../../components/BreadNav';
import {useParams } from 'react-router-dom'; import { useNavigate, useParams } from 'react-router-dom';
import useRequest from '../../hooks/useRequest';
import { useEffect, useState } from 'react';
import type { DetailResponseType } from './types'
const GoodsDetail=()=>{ const GoodsDetail = () => {
const Helmet = require('react-helmet').Helmet; const navigate=useNavigate()
const params=useParams() const params = useParams()
console.log(params) const [detailData,setDetailData]=useState<DetailResponseType>()
const { request:detailRequest} = useRequest<DetailResponseType>({manual:true})
useEffect(()=>{
detailRequest({ url: '/api/goodsSku/getGoodsSkuDetail', params:{sku_id:params.sku_id} }).then(res=>{
if(res?.code===0){
setDetailData(res)
if( res?.data?.sku_info===null){
navigate('/404')
}
}else{
navigate('/404')
}
})
},[detailRequest,params.sku_id,navigate])
return ( return (
<> <>
<Helmet><title>麒麟电子商城-商品详情</title></Helmet>
<Header /> {
<div className="mv-detail-page"> detailData&&detailData.data?.sku_info ?
<BreadNav > <strong>aaaa</strong></BreadNav> <div className="mv-detail-page">
<DetailHead /> <BreadNav > <strong>{detailData.data?.sku_info?.sku_name}</strong></BreadNav>
<DetailSection /> <DetailHead {...detailData}/>
<DetailSection {...detailData}/>
</div>
: ''
}
</div>
<Footer />
</> </>
) )
......
src/pages/GoodsDetail/type.tsx deleted 100644 → 0
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/GoodsDetail/types.tsx 0 → 100644
export type DetailResponseType = {
code: number|string,
data: {
sku_info:skuInfoResponseType|null,
other_sku_list:Array<{
sku_name:string,
sku_id:string|number,
brand_name:string,
goods_images:string,
single_price:string
}>
}|null,
msg:string
}
export type skuInfoResponseType = {
sku_name:string,
brand_name?:string,
goods_images:string,
encap:string,
batch_sn:string,
remark:string,
goods_type_name:string,
moq:number,
multiple:number,
stock:number,
cn_delivery_time:string,
hk_delivery_time:string,
ladder_price:Array<{
price_cn:number,
price_us:number,
purchase:number
}>
}
\ No newline at end of file
src/pages/Home/components/HomeBanner.tsx
import { Carousel } from 'antd'; import { Carousel } from 'antd';
import { StyleProvider, legacyLogicalPropertiesTransformer } from '@ant-design/cssinjs'; import { StyleProvider, legacyLogicalPropertiesTransformer } from '@ant-design/cssinjs';
import { memo } from 'react';
const HomeBanner=()=>{ const HomeBanner=memo(function HomeBanner(){
const bannerList = [ const bannerList = [
{ {
title: '图片1', title: '图片1',
...@@ -40,6 +41,8 @@ const HomeBanner=()=>{ ...@@ -40,6 +41,8 @@ const HomeBanner=()=>{
</> </>
) )
} })
export default HomeBanner export default HomeBanner
\ No newline at end of file
src/pages/Home/components/HomeFloor1.tsx
const HomeFloor1 = () => { import { Link } from "react-router-dom"
import type { ResponseTypeHome } from '../types';
const HomeFloor1 = (props: ResponseTypeHome) => {
const on_sale_list = props.data?.on_sale_list || []
return ( return (
<> <>
<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='/'> {
<img src='https://img.ichunt.com/test/images/cms/202405/30/a263b85bf297ae7d85f68a01b5db320d.jpg' loading="lazy" alt="" /> on_sale_list.map(item => {
<div className='rt boxsiz '> return (
<div className='gos'>CRCW20107R5VISHAY CR</div> <Link to={`/detail/${item.sku_id}`} key={item.sku_id} className='item boxsiz row bothSide'>
<div className='nam'>VISHAY</div> <img src={item.goods_images || 'http://static.ichunt.com//dist/res/home/images/goods_default.png'} alt="" />
<div className='prs'>¥ 0.2255</div> <div className='rt boxsiz '>
</div> <div className='gos'>{item.sku_name}</div>
</a> <div className='nam'>{item.brand_name}</div>
<a className='item boxsiz row bothSide' href='/'> <div className='prs'>¥{item.single_price}</div>
<img src='https://img.ichunt.com/test/images/cms/202405/30/a263b85bf297ae7d85f68a01b5db320d.jpg' loading="lazy" alt="" /> </div>
<div className='rt boxsiz '> </Link>
<div className='gos'>CRCW20107R5VISHAY CR</div> )
<div className='nam'>VISHAY</div> })
<div className='prs'>¥ 0.2255</div> }
</div>
</a>
<a className='item boxsiz row bothSide' href='/'>
<img src='https://img.ichunt.com/test/images/cms/202405/30/a263b85bf297ae7d85f68a01b5db320d.jpg' loading="lazy" alt="" />
<div className='rt boxsiz '>
<div className='gos'>CRCW20107R5VISHAY CR</div>
<div className='nam'>VISHAY</div>
<div className='prs'>¥ 0.2255</div>
</div>
</a>
</div> </div>
<a href='/' className='floor1ad'> <a href='/' className='floor1ad'>
<img src="https://img.ichunt.com/test/images/cms/202405/30/a263b85bf297ae7d85f68a01b5db320d.jpg" loading="lazy" alt="" /> <img src="https://img.ichunt.com/test/images/cms/202405/30/a263b85bf297ae7d85f68a01b5db320d.jpg" alt="" />
</a> </a>
</div> </div>
</> </>
......
src/pages/Home/components/HomeFloor2.tsx
import { Link } from "react-router-dom" import { Link } from "react-router-dom"
import type { ResponseTypeHome } from '../types';
const HomeFloor2 = () => { const HomeFloor2 = (props: ResponseTypeHome) => {
const recommend_goods_list = props.data?.recommend_goods_list || []
return ( return (
<> <>
<div className='w1226 floor2 boxsiz'> <div className='w1226 floor2 boxsiz'>
...@@ -10,46 +10,23 @@ const HomeFloor2 = () => { ...@@ -10,46 +10,23 @@ const HomeFloor2 = () => {
<Link to='/' className="more">更多<i className="icon iconfont icon-xiangyou1"></i></Link> <Link to='/' className="more">更多<i className="icon iconfont icon-xiangyou1"></i></Link>
</div> </div>
<div className='boxsiz itembox row bothSide'> <div className='boxsiz itembox row bothSide'>
<Link to='/detail/1' className='item boxsiz'> {
<img src="https://img.ichunt.com/test/images/cms/202405/30/a263b85bf297ae7d85f68a01b5db320d.jpg" loading="lazy" alt="" /> recommend_goods_list.map(item => {
<div className='gos'>CRCW20107R5VISHAY CR</div> return (
<div className='row bothSide'> <Link to={`/detail/${item.sku_id}`} className='item boxsiz' key={item.sku_id}>
<div className='nam'>VISHAY</div> <img src={item.goods_images || 'http://static.ichunt.com//dist/res/home/images/goods_default.png'} alt="" />
<div className='prs'>¥ 0.2255</div> <div className='gos'>{item.sku_name}</div>
</div> <div className='row bothSide'>
</Link> <div className='nam'>{item.brand_name}</div>
<Link to='/detail/1' className='item boxsiz'> <div className='prs'>¥{item.single_price}</div>
<img src="https://img.ichunt.com/test/images/cms/202405/30/a263b85bf297ae7d85f68a01b5db320d.jpg" loading="lazy" alt="" /> </div>
<div className='gos'>CRCW20107R5VISHAY CR</div>
<div className='row bothSide'> </Link>
<div className='nam'>VISHAY</div> )
<div className='prs'>¥ 0.2255</div> })
</div> }
</Link>
<Link to='/detail/1' className='item boxsiz'>
<img src="https://img.ichunt.com/test/images/cms/202405/30/a263b85bf297ae7d85f68a01b5db320d.jpg" loading="lazy" alt="" />
<div className='gos'>CRCW20107R5VISHAY CR</div>
<div className='row bothSide'>
<div className='nam'>VISHAY</div>
<div className='prs'>¥ 0.2255</div>
</div>
</Link>
<Link to='/detail/1' className='item boxsiz'>
<img src="https://img.ichunt.com/test/images/cms/202405/30/a263b85bf297ae7d85f68a01b5db320d.jpg" loading="lazy" alt="" />
<div className='gos'>CRCW20107R5VISHAY CR</div>
<div className='row bothSide'>
<div className='nam'>VISHAY</div>
<div className='prs'>¥ 0.2255</div>
</div>
</Link>
<Link to='/detail/1' className='item boxsiz'>
<img src="https://img.ichunt.com/test/images/cms/202405/30/a263b85bf297ae7d85f68a01b5db320d.jpg" loading="lazy" alt="" />
<div className='gos'>CRCW20107R5VISHAY CR</div>
<div className='row bothSide'>
<div className='nam'>VISHAY</div>
<div className='prs'>¥ 0.2255</div>
</div>
</Link>
</div> </div>
</div> </div>
</> </>
......
src/pages/Home/components/HomeFloor3.tsx
import { Link } from "react-router-dom" import { Link } from "react-router-dom"
import type { ResponseTypeHome } from '../types';
const HomeFloor3 = () => { const HomeFloor3 = (props: ResponseTypeHome) => {
const recommend_brand_list = props.data?.recommend_brand_list || []
return ( return (
<> <>
<div className='w1226 floor3 boxsiz'> <div className='w1226 floor3 boxsiz'>
<div className="title row bothSide verCenter"> <div className="title row bothSide verCenter">
<span>推荐品牌</span> <span>推荐品牌</span>
<Link to='/' className="more">更多<i className="icon iconfont icon-xiangyou1"></i></Link> <Link to='/brandMap' className="more">更多<i className="icon iconfont icon-xiangyou1"></i></Link>
</div> </div>
<div className='boxsiz itembox row bothSide'> <div className='boxsiz itembox row bothSide'>
<Link to='/brand/1' className='item'> {
<img src="https://img.ichunt.com/test/images/cms/202405/30/a263b85bf297ae7d85f68a01b5db320d.jpg" loading="lazy" alt="" /> recommend_brand_list.map(item => {
</Link> return (
<Link to='/' className='item'> <Link to={`/brand/${item.goods_brand_id}`} className='item' key={item.goods_brand_id}>
<img src="https://img.ichunt.com/test/images/cms/202405/30/a263b85bf297ae7d85f68a01b5db320d.jpg" loading="lazy" alt="" /> <img src={item.brand_logo} alt="" />
</Link> </Link>
<Link to='/' className='item'> )
<img src="https://img.ichunt.com/test/images/cms/202405/30/a263b85bf297ae7d85f68a01b5db320d.jpg" loading="lazy" alt="" /> })
</Link> }
</div> </div>
</div> </div>
</> </>
......
src/pages/Home/index.less
...@@ -205,6 +205,3 @@ ...@@ -205,6 +205,3 @@
} }
} }
} }
.indexPage .class-boxs .box-one-left {
display: block !important;
}
\ No newline at end of file
src/pages/Home/index.min.css
.mv-home-page .banner-box{padding-left:234px}.mv-home-page .banner-box .swipers{height:460px;background:#ccc}.mv-home-page .banner-box .swipers img{height:460px;width:992px}.mv-home-page .banner-box .swipers .slick-dots{justify-content:end;bottom:17px;right:10px;left:auto}.mv-home-page .banner-box .swipers .slick-dots li{width:6px;height:6px;border:1px solid #FFFFFF;border-radius:6px}.mv-home-page .banner-box .swipers .slick-dots li.slick-active,.mv-home-page .banner-box .swipers .slick-dots li:hover{background:#FFFFFF}.mv-home-page .floor1{margin-top:20px}.mv-home-page .floor1 .cons{height:252px}.mv-home-page .floor1 .item{width:398px;height:252px;background:linear-gradient(155deg, #F6F6F6 0%, #E9F6FC 100%);border:1px solid #EDEFEF;cursor:pointer;transition:all .5s;padding:35px 20px}.mv-home-page .floor1 .item:hover{box-shadow:4px 6px 7px 1px rgba(154,151,149,0.18);transform:translateY(-1px)}.mv-home-page .floor1 .item:first-child{background:linear-gradient(155deg, #F6F6F6 0%, #FCF5E9 100%)}.mv-home-page .floor1 .item:last-child{background:linear-gradient(147deg, #F6F6F6 0%, #FCE9E9 100%)}.mv-home-page .floor1 .item img{width:182px;height:182px}.mv-home-page .floor1 .item .rt{width:158px;height:182px;padding:20px 0}.mv-home-page .floor1 .item .rt .gos{font-size:14px;color:#000000;line-height:25px;word-break:break-all;text-overflow:ellipsis;overflow:hidden;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;height:50px;margin-bottom:40px}.mv-home-page .floor1 .item .rt .nam{font-weight:normal;font-size:16px;color:#000000;line-height:18px;text-overflow:ellipsis;overflow:hidden;height:18px}.mv-home-page .floor1 .item .rt .prs{font-size:16px;color:#FF0006;line-height:18px;margin-top:12px}.mv-home-page .floor1 .floor1ad{display:block;height:118px;margin-top:20px}.mv-home-page .floor1 .floor1ad img{width:1226px;height:118px}.mv-home-page .floor2{margin-top:50px}.mv-home-page .floor2 .title{margin-bottom:30px}.mv-home-page .floor2 .title span{font-size:24px;color:#000000;line-height:31px}.mv-home-page .floor2 .title .more{font-size:16px;color:#888888}.mv-home-page .floor2 .title .more:hover{color:#FF9A00}.mv-home-page .floor2 .itembox{flex-wrap:wrap}.mv-home-page .floor2 .itembox .item{padding:34px 18px;width:233px;height:330px;background:#FFFFFF;transition:all .5s}.mv-home-page .floor2 .itembox .item:hover{box-shadow:4px 6px 7px 1px rgba(154,151,149,0.18);transform:translateY(-1px)}.mv-home-page .floor2 .itembox .item img{width:150px;height:109px;display:block;margin:0 auto;margin-bottom:60px}.mv-home-page .floor2 .itembox .item .gos{font-size:14px;color:#000000;line-height:25px;word-break:break-all;text-overflow:ellipsis;overflow:hidden;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;height:50px;margin-bottom:30px}.mv-home-page .floor2 .itembox .item .nam{font-weight:normal;font-size:16px;color:#000000;line-height:18px;text-overflow:ellipsis;overflow:hidden;height:18px;max-width:110px}.mv-home-page .floor2 .itembox .item .prs{font-size:16px;color:#FF0006;line-height:18px}.mv-home-page .floor3{margin-top:50px;margin-bottom:65px}.mv-home-page .floor3 .title{margin-bottom:30px}.mv-home-page .floor3 .title span{font-size:24px;color:#000000;line-height:31px}.mv-home-page .floor3 .title .more{font-size:16px;color:#888888}.mv-home-page .floor3 .title .more:hover{color:#FF9A00}.mv-home-page .floor3 .itembox{flex-wrap:wrap}.mv-home-page .floor3 .itembox .item{width:233px;height:80px;transition:all .5s;margin-bottom:15px}.mv-home-page .floor3 .itembox .item:hover{box-shadow:4px 6px 7px 1px rgba(154,151,149,0.18);transform:translateY(-1px)}.mv-home-page .floor3 .itembox .item img{width:233px;height:80px;object-fit:contain}.indexPage .class-boxs .box-one-left{display:block !important} .mv-home-page .banner-box{padding-left:234px}.mv-home-page .banner-box .swipers{height:460px;background:#ccc}.mv-home-page .banner-box .swipers img{height:460px;width:992px}.mv-home-page .banner-box .swipers .slick-dots{justify-content:end;bottom:17px;right:10px;left:auto}.mv-home-page .banner-box .swipers .slick-dots li{width:6px;height:6px;border:1px solid #FFFFFF;border-radius:6px}.mv-home-page .banner-box .swipers .slick-dots li.slick-active,.mv-home-page .banner-box .swipers .slick-dots li:hover{background:#FFFFFF}.mv-home-page .floor1{margin-top:20px}.mv-home-page .floor1 .cons{height:252px}.mv-home-page .floor1 .item{width:398px;height:252px;background:linear-gradient(155deg, #F6F6F6 0%, #E9F6FC 100%);border:1px solid #EDEFEF;cursor:pointer;transition:all .5s;padding:35px 20px}.mv-home-page .floor1 .item:hover{box-shadow:4px 6px 7px 1px rgba(154,151,149,0.18);transform:translateY(-1px)}.mv-home-page .floor1 .item:first-child{background:linear-gradient(155deg, #F6F6F6 0%, #FCF5E9 100%)}.mv-home-page .floor1 .item:last-child{background:linear-gradient(147deg, #F6F6F6 0%, #FCE9E9 100%)}.mv-home-page .floor1 .item img{width:182px;height:182px}.mv-home-page .floor1 .item .rt{width:158px;height:182px;padding:20px 0}.mv-home-page .floor1 .item .rt .gos{font-size:14px;color:#000000;line-height:25px;word-break:break-all;text-overflow:ellipsis;overflow:hidden;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;height:50px;margin-bottom:40px}.mv-home-page .floor1 .item .rt .nam{font-weight:normal;font-size:16px;color:#000000;line-height:18px;text-overflow:ellipsis;overflow:hidden;height:18px}.mv-home-page .floor1 .item .rt .prs{font-size:16px;color:#FF0006;line-height:18px;margin-top:12px}.mv-home-page .floor1 .floor1ad{display:block;height:118px;margin-top:20px}.mv-home-page .floor1 .floor1ad img{width:1226px;height:118px}.mv-home-page .floor2{margin-top:50px}.mv-home-page .floor2 .title{margin-bottom:30px}.mv-home-page .floor2 .title span{font-size:24px;color:#000000;line-height:31px}.mv-home-page .floor2 .title .more{font-size:16px;color:#888888}.mv-home-page .floor2 .title .more:hover{color:#FF9A00}.mv-home-page .floor2 .itembox{flex-wrap:wrap}.mv-home-page .floor2 .itembox .item{padding:34px 18px;width:233px;height:330px;background:#FFFFFF;transition:all .5s}.mv-home-page .floor2 .itembox .item:hover{box-shadow:4px 6px 7px 1px rgba(154,151,149,0.18);transform:translateY(-1px)}.mv-home-page .floor2 .itembox .item img{width:150px;height:109px;display:block;margin:0 auto;margin-bottom:60px}.mv-home-page .floor2 .itembox .item .gos{font-size:14px;color:#000000;line-height:25px;word-break:break-all;text-overflow:ellipsis;overflow:hidden;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;height:50px;margin-bottom:30px}.mv-home-page .floor2 .itembox .item .nam{font-weight:normal;font-size:16px;color:#000000;line-height:18px;text-overflow:ellipsis;overflow:hidden;height:18px;max-width:110px}.mv-home-page .floor2 .itembox .item .prs{font-size:16px;color:#FF0006;line-height:18px}.mv-home-page .floor3{margin-top:50px;margin-bottom:65px}.mv-home-page .floor3 .title{margin-bottom:30px}.mv-home-page .floor3 .title span{font-size:24px;color:#000000;line-height:31px}.mv-home-page .floor3 .title .more{font-size:16px;color:#888888}.mv-home-page .floor3 .title .more:hover{color:#FF9A00}.mv-home-page .floor3 .itembox{flex-wrap:wrap}.mv-home-page .floor3 .itembox .item{width:233px;height:80px;transition:all .5s;margin-bottom:15px}.mv-home-page .floor3 .itembox .item:hover{box-shadow:4px 6px 7px 1px rgba(154,151,149,0.18);transform:translateY(-1px)}.mv-home-page .floor3 .itembox .item img{width:233px;height:80px;object-fit:contain}
\ No newline at end of file \ No newline at end of file
src/pages/Home/index.tsx
import './index.min.css' import './index.min.css'
import Header from "../../components/Header";
import Footer from "../../components/Footer";
import HomeBanner from './components/HomeBanner'; import HomeBanner from './components/HomeBanner';
import HomeFloor1 from './components/HomeFloor1'; 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';
import useRequest from '../../hooks/useRequest'; import useRequest from '../../hooks/useRequest';
import type {ResponseTypeHome } from './types'; import type { ResponseTypeHome } from './types';
import { useRef } from 'react'; import { useRef } from 'react';
const Home = () => { const Home = () => {
const Helmet = require('react-helmet').Helmet;
const defaultRequestData=useRef({url: '/home.json'}) const defaultRequestData = useRef({ url: '/api/home/getHomepageList' })
const {data}=useRequest<ResponseTypeHome>(defaultRequestData.current) const { data } = useRequest<ResponseTypeHome>(defaultRequestData.current)
console.log(data) const result: ResponseTypeHome = data!
return ( return (
<> <>
<Helmet><title>麒麟电子商城-首页</title></Helmet>
<div className='indexPage'> <div className='indexPage'>
<Header navname='首页' />
<div className='mv-home-page'> <div className='mv-home-page'>
<HomeBanner /> <HomeBanner />
<HomeFloor1 /> <HomeFloor1 {...result} />
<HomeFloor2 /> <HomeFloor2 {...result} />
<HomeFloor3 /> <HomeFloor3 {...result} />
</div> </div>
<Footer />
</div> </div>
</> </>
) )
} }
export default Home export default Home
\ No newline at end of file
src/pages/Home/types.tsx
export type ResponseTypeHome = { export type ResponseTypeHome = {
success: boolean, code: number|string,
data: { data: {
location: { on_sale_list?:Array<onSaleListType>,
id: string, recommend_brand_list?:Array<recommendBrandListType>,
address: string recommend_goods_list?:Array<recommendGoodsListType>
}, }|null,
banners:Array<{ msg:string
id: string, }
imgUrl:string,
name:string export type onSaleListType = {
}>, goods_images:string,
categories:Array<{ sku_id:string|number,
id: string, sku_name:string,
imgUrl:string, single_price:string,
name:string brand_name:string
}>, }
freshes:{ export type recommendBrandListType = {
title:string, brand_logo:string,
url:string, brand_name:string,
list:Array<{ goods_brand_id:string|number
id: string, }
imgUrl:string, export type recommendGoodsListType = {
name:string, goods_images:string,
price:string brand_name:string,
}> sku_id:string|number,
} single_price:string|number,
} sku_name:string
} }
\ No newline at end of file
src/pages/Notice/index.tsx
import './index.min.css' import './index.min.css'
import Header from "../../components/Header";
import Footer from "../../components/Footer";
import { useEffect, useState } from 'react'; import { useEffect, useState } from 'react';
import FilterDate from './FilterDate'; import FilterDate from './FilterDate';
type listType = Array<{ import useRequest from '../../hooks/useRequest';
title: string, import type { NoticeResponseType,listType } from './types'
context: string, import { Pagination } from 'antd';
time: string,
isAuto: boolean,
id:string
}>
const Notice = () => { const Notice = () => {
const Helmet = require('react-helmet').Helmet;
const [ntList, setNtList] = useState<listType>([]) const [ntList, setNtList] = useState<listType>([])
const [page,setPage]=useState(1)
const [total,setTotal]=useState(0)
const { request:noticeRequest} = useRequest<NoticeResponseType>({manual:true})
useEffect(() => { useEffect(() => {
setNtList([ noticeRequest({url:'/api/article/articleList',params:{page:page,limit:10}}).then(res=>{
{ if(res?.code===0){
title: '2024年慕尼黑上海电子展(electr)', const list_=res.data.list||[]
context: '2024年慕尼黑上海电子展(electronica China)将于7月8-10日在上海新国际博览中心举办，猎芯携手罗彻斯特电子诚邀您观展，我们在E5馆5130展台等你来！2024年慕尼黑上海电子展(electronica China)将于7月8-10日在上海新国际博览中心举办，猎芯携手罗彻斯特电子诚邀您观展，我们在E5馆5130展台等你来！2024年慕尼黑上海电子展(electronica China)将于7月8-10日在上海新国际博览中心举办，猎芯携手罗彻斯特电子诚邀您观展，我们在E5馆5130展台等你来！2024年慕尼黑上海电子展(electronica China)将于7月8-10日在上海新国际博览中心举办，猎芯携手罗彻斯特电子诚邀您观展，我们在E5馆5130展台等你来！2024年慕尼黑上海电子展(electronica China)将于7月8-10日在上海新国际博览中心举办，猎芯携手罗彻斯特电子诚邀您观展，我们在E5馆5130展台等你来！2024年慕尼黑上海电子展(electronica China)将于7月8-10日在上海新国际博览中心举办，猎芯携手罗彻斯特电子诚邀您观展，我们在E5馆5130展台等你来！2024年慕尼黑上海电子展(electronica China)将于7月8-10日在上海新国际博览中心举办，猎芯携手罗彻斯特电子诚邀您观展，我们在E5馆5130展台等你来！2024年慕尼黑上海电子展(electronica China)将于7月8-10日在上海新国际博览中心举办，猎芯携手罗彻斯特电子诚邀您观展，我们在E5馆5130展台等你来！2024年慕尼黑上海电子展(electronica China)将于7月8-10日在上海新国际博览中心举办，猎芯携手罗彻斯特电子诚邀您观展，我们在E5馆5130展台等你来！', list_.forEach(item=>{
time: '2024-05-30 09:33:35', item.isAuto=false
isAuto: false, })
id:"1" setTotal(res.data?.total)
setNtList(list_)
} }
]) })
}, []) }, [noticeRequest,page])
const changeStatus=(id:string)=>{ const changeStatus=(article_id:number)=>{
const newList=[...ntList] const newList=[...ntList]
newList.forEach((item)=>{ newList.forEach((item)=>{
if(item.id===id){ if(item.article_id===article_id){
item.isAuto=!item.isAuto item.isAuto=!item.isAuto
} }
}) })
setNtList(newList) setNtList(newList)
} }
const onChange=(page:number)=>{
setPage(page)
}
return ( return (
<> <>
<Helmet><title>麒麟电子商城-公告</title></Helmet>
<Header navname='公告' />
<div className='mv-notice-page'> <div className='mv-notice-page'>
<h1 className='w1226'>公告</h1> <h1 className='w1226'>公告</h1>
<div className='itembox w1226'> <div className='itembox w1226'>
{ {
ntList.map((item, index) => { ntList.map((item, index) => {
return ( return (
<div className='item row boxsiz' key={index+item.id}> <div className='item row boxsiz' key={index+item.article_id}>
<div className='date row verCenter'> <div className='date row verCenter'>
<FilterDate time={item.time}/> <FilterDate time={item.create_time_cn}/>
</div> </div>
<div className='sxc boxsiz'> <div className='sxc boxsiz'>
<div className='titleo'>{item.title}</div> <div className='titleo'>{item.article_title}</div>
<div className={item.isAuto?'htmlbox boxsiz auto':'htmlbox boxsiz'}> <div className={item.isAuto?'htmlbox boxsiz auto':'htmlbox boxsiz'} dangerouslySetInnerHTML={{__html: item.article_desc}}></div>
{item.context} <div className='ckmore' onClick={()=>{changeStatus(item.article_id)}}>{item.isAuto?'收起':'查看详情'}</div>
</div>
<div className='ckmore' onClick={()=>{changeStatus(item.id)}}>{item.isAuto?'收起':'查看详情'}</div>
</div> </div>
</div> </div>
) )
}) })
} }
<Pagination current={page} hideOnSinglePage={true} onChange={onChange} total={total} pageSize={10} showSizeChanger={false}/>
</div> </div>
</div> </div>
<Footer />
</> </>
) )
......
src/pages/Notice/type.tsx deleted 100644 → 0
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/Notice/types.tsx 0 → 100644
export type NoticeResponseType = {
code: number,
data: {list:listType,total:number},
msg:string
}
export type listType = Array<{
article_desc: string,
article_title: string,
article_id: number,
cat_id:number
isAuto?: boolean,
create_time_cn:string
}>
src/pages/Page404/index.tsx
import './index.min.css' import './index.min.css'
import Header from "../../components/Header";
import Footer from "../../components/Footer";
import BreadNav from '../../components/BreadNav'; import BreadNav from '../../components/BreadNav';
const Page404 = () => { const Page404 = () => {
const Helmet = require('react-helmet').Helmet;
return ( return (
<> <>
<Helmet><title>麒麟电子商城-404找不到页面</title></Helmet>
<Header />
<BreadNav><strong>404</strong></BreadNav> <BreadNav><strong>404</strong></BreadNav>
<div className="page-404"> <div className="page-404">
<img src={require('../../images/p404.png')} alt="" /> <img src={require('../../images/p404.png')} alt="" />
</div> </div>
<Footer />
</> </>
) )
......
src/pages/Search/index.tsx
...@@ -2,11 +2,10 @@ import './index.min.css' ...@@ -2,11 +2,10 @@ import './index.min.css'
import { useEffect, useReducer, useRef, 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 Header from "../../components/Header";
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'; import { brandsAndClasssReducer } from './reducer';
import type {ResponseTypeHome} from './types' import type {ResponseTypeHome} from './types'
...@@ -14,7 +13,7 @@ import useRequest from '../../hooks/useRequest'; ...@@ -14,7 +13,7 @@ import useRequest from '../../hooks/useRequest';
const Search = () => { const Search = () => {
const Helmet = require('react-helmet').Helmet;
const location = useLocation(); const location = useLocation();
const params = new URLSearchParams(location.search); const params = new URLSearchParams(location.search);
const keyword = params.get('keyword'); const keyword = params.get('keyword');
...@@ -25,7 +24,8 @@ const Search = () => { ...@@ -25,7 +24,8 @@ const Search = () => {
useEffect(()=>{ useEffect(()=>{
getListRequest({url: '/home.json',params:{keyword:keyword,num:num}}).then((response)=>{ getListRequest({url: '/api/home/getHomepageList',params:{keyword:keyword,num:num}}).then((res)=>{
console.log(res)
const datasg = [ const datasg = [
{ {
goods_id: 1, goods_id: 1,
...@@ -88,7 +88,7 @@ const Search = () => { ...@@ -88,7 +88,7 @@ const Search = () => {
] ]
dispatchBrands({type: 'brandsInit',value:datasg}) dispatchBrands({type: 'brandsInit',value:datasg})
dispatchclasss({type: 'classsInit',value:datasg}) dispatchclasss({type: 'classsInit',value:datasg})
console.log(response)
}) })
},[getListRequest,keyword,num]) },[getListRequest,keyword,num])
...@@ -131,8 +131,7 @@ const Search = () => { ...@@ -131,8 +131,7 @@ const Search = () => {
return ( return (
<> <>
<Helmet><title>麒麟电子商城-搜索结果</title></Helmet>
<Header navname='搜索结果' />
<BreadNav><strong>"MPX5700ASX"的型号搜索结果</strong></BreadNav> <BreadNav><strong>"MPX5700ASX"的型号搜索结果</strong></BreadNav>
<div className='mv-search-page w1226' > <div className='mv-search-page w1226' >
<div className='shift-box'> <div className='shift-box'>
...@@ -186,19 +185,19 @@ const Search = () => { ...@@ -186,19 +185,19 @@ const Search = () => {
<ListSort sortObj={sortObj} setSortObj={setSortObj} /> <ListSort sortObj={sortObj} setSortObj={setSortObj} />
<div className='data-group-supplier'> <div className='data-group-supplier'>
<div className='data-list-title'>djk</div> <div className='data-list-title'>djk</div>
<ListOneItem /> {/* <ListOneItem />
<ListOneItem /> <ListOneItem /> */}
<div className='data-list-more'>还有<b>32</b>个商品未显示，<b>点击加载更多</b></div> <div className='data-list-more'>还有<b>32</b>个商品未显示，<b>点击加载更多</b></div>
</div> </div>
<div className='data-group-supplier'> <div className='data-group-supplier'>
<div className='data-list-title'>djk</div> <div className='data-list-title'>djk</div>
<ListOneItem /> {/* <ListOneItem />
<ListOneItem /> <ListOneItem /> */}
<div className='data-list-more'>还有<b>32</b>个商品未显示，<b>点击加载更多</b></div> <div className='data-list-more'>还有<b>32</b>个商品未显示，<b>点击加载更多</b></div>
</div> </div>
</div> </div>
</div> </div>
<Footer />
</> </>
) )
......
src/pages/Search/types.tsx
export type ResponseType = { export type ResponseType = {
success: boolean, success: boolean,
data: Array<{ data: Array<{
shopId: string, shopId: string,
shopName: string, shopName: string,
cartList: Array<{ cartList: Array<{
productId: string, productId: string,
imgUrl: string, imgUrl: string,
weight: string, weight: string,
title: string, title: string,
price: number, price: number,
count: number count: number
}>
}> }>
}>
} }
export type BrandAndClassType = Array<{ export type BrandAndClassType = Array<{
id: string, id: string,
value: string, value: string,
checked:boolean checked: boolean
}> }>
export type ResponseTypeHome = { export type ResponseTypeHome = {
success: boolean, code: number | string,
data: { data: {
location: { on_sale_list?: Array<onSaleListType>,
id: string, recommend_brand_list?: Array<recommendBrandListType>,
address: string recommend_goods_list?: Array<recommendGoodsListType>
}, } | null,
banners:Array<{ msg: string
id: string, }
imgUrl:string,
name:string export type onSaleListType = {
}>, goods_images: string,
categories:Array<{ sku_id: string | number,
id: string, sku_name: string,
imgUrl:string, single_price: string,
name:string brand_name: string
}>, }
freshes:{ export type recommendBrandListType = {
title:string, brand_logo: string,
url:string, brand_name: string,
list:Array<{ goods_brand_id: string | number
id: string, }
imgUrl:string, export type recommendGoodsListType = {
name:string, goods_images: string,
price:string brand_name: string,
}> sku_id: string | number,
} single_price: string | number,
} sku_name: string
} }
\ No newline at end of file
src/styles/base.less
...@@ -207,5 +207,41 @@ body,html{ ...@@ -207,5 +207,41 @@ body,html{
} }
.ant-pagination{
display: flex;
justify-content: end;
.ant-pagination-item,.ant-pagination-prev,.ant-pagination-next{
display: block;
box-sizing: border-box;
height: 25px;
min-width: 25px;
min-height: 25px;
background: #FBFBFB;
border-radius: 2px;
border: 1px solid #E8E8E8;
text-align: center;
line-height: 25px;
color:#616161;
position: relative;
transition: all 0.5s;
border-radius: 1px;
font-size: 12px;
a,button{padding:0px!important;border-radius: 0px!important;}
button{line-height: 23px;}
&.ant-pagination-item-active,&:hover{
background-color:none;
background: linear-gradient(180deg, #FDFDFD 0%, #E2E2E2 100%)!important;
border: 1px solid #A1A1A1!important;
color:#313131;
a{
color:#313131;
background: none;
}
}
}
}
src/styles/base.min.css
@charset "utf-8";html,body,div,iframe,em,img,p,a,strong,b,i,form,label,span,h1,h2,h3,h4,h5,h6,dl,dt,dd,ol,ul,li,applet,object,blockquote,big,cite,code,del,dfn,abbr,acronym,address,pre,time,mark,audio,video,article,aside,canvas,details,embed,figure,figcaption,footer,header,nav,section,menu,button,input,textarea{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline;font-weight:normal;list-style:none;outline:none;resize:none}table,tbody,tfoot,thead,tr,th,td{margin:0;padding:0;font-size:100%;font:inherit}a{text-decoration:none}a:hover{color:#FF9A00}table{border-color:#ccc !important}body,html,button,input{font-family:Arial,helvetica,PingFangSC-Regular,PingFang SC,"微软雅黑"}input::-webkit-input-placeholder{color:#808080}.fw{font-weight:bold}.clr:after{visibility:hidden;display:block;font-size:0;content:" ";clear:both;height:0}.clr{display:block;min-height:1%}.clr{clear:both}.clr:after{content:" ";display:table;clear:both}.fl{float:left}.fr{float:right}.fw{font-weight:bold}.ta-c{text-align:center}.ta-r{text-align:right}.ta-l{text-align:left}.flex{display:flex}.column{display:flex;flex-direction:column}.row{display:flex;flex-direction:row}.boxsiz{-webkit-box-sizing:border-box;box-sizing:border-box}.bothSide{justify-content:space-between}.avarage{justify-content:space-around}.rowCenter{justify-content:center}.verCenter{align-items:center}body,html{background:#fafafa;font-size:14px;color:#333}.w1226{width:1226px;margin:0 auto} @charset "utf-8";html,body,div,iframe,em,img,p,a,strong,b,i,form,label,span,h1,h2,h3,h4,h5,h6,dl,dt,dd,ol,ul,li,applet,object,blockquote,big,cite,code,del,dfn,abbr,acronym,address,pre,time,mark,audio,video,article,aside,canvas,details,embed,figure,figcaption,footer,header,nav,section,menu,button,input,textarea{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline;font-weight:normal;list-style:none;outline:none;resize:none}table,tbody,tfoot,thead,tr,th,td{margin:0;padding:0;font-size:100%;font:inherit}a{text-decoration:none}a:hover{color:#FF9A00}table{border-color:#ccc !important}body,html,button,input{font-family:Arial,helvetica,PingFangSC-Regular,PingFang SC,"微软雅黑"}input::-webkit-input-placeholder{color:#808080}.fw{font-weight:bold}.clr:after{visibility:hidden;display:block;font-size:0;content:" ";clear:both;height:0}.clr{display:block;min-height:1%}.clr{clear:both}.clr:after{content:" ";display:table;clear:both}.fl{float:left}.fr{float:right}.fw{font-weight:bold}.ta-c{text-align:center}.ta-r{text-align:right}.ta-l{text-align:left}.flex{display:flex}.column{display:flex;flex-direction:column}.row{display:flex;flex-direction:row}.boxsiz{-webkit-box-sizing:border-box;box-sizing:border-box}.bothSide{justify-content:space-between}.avarage{justify-content:space-around}.rowCenter{justify-content:center}.verCenter{align-items:center}body,html{background:#fafafa;font-size:14px;color:#333}.w1226{width:1226px;margin:0 auto}.ant-pagination{display:flex;justify-content:end}.ant-pagination .ant-pagination-item,.ant-pagination .ant-pagination-prev,.ant-pagination .ant-pagination-next{display:block;box-sizing:border-box;height:25px;min-width:25px;min-height:25px;background:#FBFBFB;border-radius:2px;border:1px solid #E8E8E8;text-align:center;line-height:25px;color:#616161;position:relative;transition:all .5s;border-radius:1px;font-size:12px}.ant-pagination .ant-pagination-item a,.ant-pagination .ant-pagination-prev a,.ant-pagination .ant-pagination-next a,.ant-pagination .ant-pagination-item button,.ant-pagination .ant-pagination-prev button,.ant-pagination .ant-pagination-next button{padding:0px!important;border-radius:0px!important}.ant-pagination .ant-pagination-item button,.ant-pagination .ant-pagination-prev button,.ant-pagination .ant-pagination-next button{line-height:23px}.ant-pagination .ant-pagination-item.ant-pagination-item-active,.ant-pagination .ant-pagination-prev.ant-pagination-item-active,.ant-pagination .ant-pagination-next.ant-pagination-item-active,.ant-pagination .ant-pagination-item:hover,.ant-pagination .ant-pagination-prev:hover,.ant-pagination .ant-pagination-next:hover{background-color:none;background:linear-gradient(180deg, #FDFDFD 0%, #E2E2E2 100%) !important;border:1px solid #A1A1A1 !important;color:#313131}.ant-pagination .ant-pagination-item.ant-pagination-item-active a,.ant-pagination .ant-pagination-prev.ant-pagination-item-active a,.ant-pagination .ant-pagination-next.ant-pagination-item-active a,.ant-pagination .ant-pagination-item:hover a,.ant-pagination .ant-pagination-prev:hover a,.ant-pagination .ant-pagination-next:hover a{color:#313131;background:none}
\ No newline at end of file \ 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