init

.eslintrc.json

+{
+  "extends": "next/core-web-vitals"
+}

.gitignore

+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+.yarn/install-state.gz
+
+# testing
+/coverage
+
+# next.js
+/.next
+#/out/
+
+# production
+/build
+
+# misc
+.DS_Store
+*.pem
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# local env files
+.env*.local
+
+# vercel
+.vercel
+
+# typescript
+*.tsbuildinfo
+#next-env.d.ts
+
+/.next

README.md

-a
\ No newline at end of file
+This is a [Next.js](https://nextjs.org/) project bootstrapped with [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app).
+
+## Getting Started
+
+First, run the development server:
+
+```bash
+npm run dev
+# or
+yarn dev
+# or
+pnpm dev
+# or
+bun dev
+```
+
+Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
+
+You can start editing the page by modifying `app/page.tsx`. The page auto-updates as you edit the file.
+
+This project uses [`next/font`](https://nextjs.org/docs/basic-features/font-optimization) to automatically optimize and load Inter, a custom Google Font.
+
+## Learn More
+
+To learn more about Next.js, take a look at the following resources:
+
+- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
+- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
+
+You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js/) - your feedback and contributions are welcome!
+
+## Deploy on Vercel
+
+The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.
+
+Check out our [Next.js deployment documentation](https://nextjs.org/docs/deployment) for more details.

components/AddressSelector/index.tsx

+import { useState, useEffect } from 'react'
+import useRequest from "@/hooks/useRequest"
+import { Modal, Table, TableColumnsType, Button } from 'antd';
+
+// 定义子组件 props 类型
+interface ChildComponentProps {
+    status: any;
+    onMessageChange: (data:any) => void;
+  }
+
+const AddressSelector: React.FC<ChildComponentProps> = ({status, onMessageChange}) =>{
+    const [open, setOpen] = useState<any>('')
+    const { request: userRequest } = useRequest<any>({ manual: true, loading: true })
+    const [invoiceList, setInvoiceList] = useState<any>()
+
+    const columns: TableColumnsType<any> = [
+        { title: '序号', dataIndex: 'name', key: 'name', render:(text, record, index) => { return <span>{index + 1}</span>}},
+        { title: '联系人', dataIndex: 'consignee', key: 'consignee'},
+        { title: '联系电话', dataIndex: 'telphone', key: 'telphone' },
+        { title: '邮箱', dataIndex: 'email', key: 'email' },
+        { 
+            title: '联系地址', 
+            dataIndex: 'email', 
+            key: 'email',
+            render:(text, record, index) => { 
+                return <span>{record?.nation_id_cn}{record?.province_cn}{record?.city_cn}{record?.district_cn}{record?.detail_address}</span>
+            }
+        },
+        { 
+            title: '操作', 
+            dataIndex: 'goods_number', 
+            key: 'goods_number',
+            width: 70,
+            render:(text, record, index) => { 
+                return (
+                    <Button
+                        color="default"
+                        size="small" 
+                        variant="text" onClick={() => handleLineDelete(record)}>
+                        选择
+                    </Button>
+                )
+            }
+         }
+    ]
+
+    useEffect(() => {
+        setOpen(status)
+    }, [status])
+
+    useEffect(() => {
+        if(open){
+            handleInvoiceInit()
+        }
+    }, [open])
+
+    const handleInvoiceInit = async () => {
+        const res = await userRequest({
+            url: `/api/userInfo/userAddressList?limit=30&page=1`,
+            method: 'get'
+        })
+        if (res?.code === 0 && res.data.list.length) {
+            // setInvoiceList(res.data.list.filter((i:any) => i.audit_status))
+            setInvoiceList(res.data.list)
+        }
+    }
+
+    const handleLineDelete = (data: any) => {
+        onMessageChange(data)
+    }
+
+    const handleModal = (show:boolean) => {
+        setOpen(show)
+        onMessageChange(null)
+    }
+
+    return (
+        <>
+           <Modal
+                title="更改地址"
+                style={{maxHeight: "500px",overflowY: "auto"}}
+                open={open}
+                destroyOnClose
+                footer={null}
+                closeIcon={null}
+                centered
+                width={980}
+                onCancel={() => handleModal(false)}
+            >
+                <Table<any>
+                    size="small"
+                    bordered={true}
+                    rowKey={(record) => record?.web_user_invoice_id}
+                    columns={columns}
+                    pagination={false}
+                    dataSource={invoiceList}
+                />
+            </Modal>
+        </>
+    )
+
+}
+
+export default AddressSelector
\ No newline at end of file

components/BreadNav/index.module.scss

+.breadcrumbs{
+    height:47px;
+    line-height: 47px;
+    font-size: 12px;
+    color: #000000;
+    a {
+        margin: 0 10px;
+        color: #000000;
+        &:first-child {
+            margin-left: 0;
+        }
+        &:hover{
+            color:#FF9A00;
+        }
+       
+    }
+    i{
+        color: #000000;
+        font-size: 12px;
+    }
+    strong {
+        margin: 0 10px;
+        color: #919191;
+        font-weight: normal !important;
+    }
+}
+
+

components/BreadNav/index.tsx

+import { ReactNode } from 'react'
+import styles from './index.module.scss'
+import Link from 'next/link'
+
+
+
+
+const BreadNav = (props:{children:ReactNode}) => {
+ 
+    return (
+        <>
+            <div className={`${styles.breadcrumbs} w1226`}>
+                <Link href='/'>首页</Link>
+                <i className="icon iconfont icon-xiangyou1"></i>
+                 {props.children}
+            </div>
+        </>
+    )
+
+}
+
+export default BreadNav
\ No newline at end of file

components/FixedSearchTop/index.module.min.css

+.fixedBox{position:fixed;top:0px;left:0px;right:0px;height:60px;background:#fff;z-index:4;box-shadow:-3px 3px 7px 1px rgba(154,151,149,0.18)}.fixedBox .cons{width:1226px;height:60px;margin:0 auto;box-sizing:border-box;align-items:center;padding-left:80px}.fixedBox .cons .logoImg{height:50px;width:50px}.fixedBox .cons .searchInputBox{width:630px;height:40px;background:#FFFFFF;border-radius:2px;border:1px solid #FF9A00;margin-left:80px}.fixedBox .cons .searchInputBox .inputGoods{width:451px;height:38px;line-height:38px;padding:0 15px;border-right:1px solid #FF9A00}.fixedBox .cons .searchInputBox .inputNums{width:108px;height:38px;line-height:38px;padding:0 15px;border-right:1px solid #FF9A00}.fixedBox .cons .searchInputBox .searchbtn{width:70px;height:38px;cursor:pointer;background:#FF9A00}.fixedBox .cons .searchInputBox .searchbtn i{font-size:26px;color:#fff}.fixedBox .cons .searchInputBox .searchbtn:hover{background:#E18800}.fixedBox .cons .loginInfoBox{padding-left:50px}.fixedBox .cons .loginInfoBox .line{height:18px;background:#d1d1d1;width:1px;margin:0px 15px}.fixedBox .cons .loginInfoBox a{font-size:12px;color:#000}.fixedBox .cons .loginInfoBox a:hover{color:#FF9A00}

components/FixedSearchTop/index.module.scss

+.fixedBox{
+    position: fixed;
+    top:0px;
+    left:0px;
+    right:0px;
+    height:60px;
+    background: #fff;
+    z-index: 4;
+    box-shadow: -3px 3px 7px 1px rgba(154,151,149,0.18);
+    .cons{
+        width:1226px;
+        height:60px;
+        margin:0 auto;
+        box-sizing: border-box;
+        align-items: center;
+        padding-left:80px;
+        .logoImg{
+            height:50px;
+            width:50px;
+        }
+        .searchInputBox{
+            width: 630px;
+            height: 40px;
+            background: #FFFFFF;
+            border-radius: 2px;
+            border: 1px solid #FF9A00;
+            margin-left: 80px;
+            .inputGoods{
+                width:451px;
+                height:38px;
+                line-height: 38px;
+                padding: 0 15px;
+                border-right: 1px solid #FF9A00;
+            }
+            .inputNums{
+                width:108px;
+                height:38px;
+                line-height: 38px;
+                padding: 0 15px;
+                border-right: 1px solid #FF9A00;
+            }
+            .searchbtn{
+                width:70px;
+                height:38px;
+                cursor: pointer;
+                background: #FF9A00;
+                i{
+                    font-size: 26px;
+                    color:#fff;
+                }
+                &:hover{
+                    background: #E18800;
+                }
+            }
+        }
+        .loginInfoBox{
+            padding-left:50px;
+            .line {
+                height: 18px;
+                background: #d1d1d1;
+                width: 1px;
+                margin: 0px 15px;
+            }
+            a{
+                font-size: 12px;
+                color:#000;
+                &:hover{
+                    color: #FF9A00;
+                }
+            }
+        }
+    }
+}
\ No newline at end of file

components/FixedSearchTop/index.tsx

+import styles from './index.module.scss'
+import { use, useEffect, useState } from 'react'
+import { useToast } from '@/hooks/useToast'
+import Link from 'next/link'
+import { useRouter } from 'next/router'
+import { useCookies } from '@/hooks/useCookies'
+
+const FixedSearchTop = () => {
+
+    const router = useRouter()
+    const { query } = router
+    const { setCookie, getCookie } = useCookies()
+    let keywords = ''
+    let nums = '';
+    const [backUrl, setBackUrl] = useState('');
+    const [isFixed, setIsFixed] = useState(false);
+
+    useEffect(() => {
+        const handleScroll = () => {
+            if (window.scrollY > 200) {
+                setIsFixed(true);
+                document.querySelector('#cartFloatBoxs')!.classList.add('searchFixedTopC')
+            } else {
+                setIsFixed(false);
+                document.querySelector('#cartFloatBoxs')!.classList.remove('searchFixedTopC')
+            }
+        };
+        window.addEventListener('scroll', handleScroll);
+        // 清除事件监听器
+        return () => {
+            window.removeEventListener('scroll', handleScroll);
+        };
+    }, []);
+    useEffect(() => {
+        setBackUrl(encodeURIComponent(window.location.href));
+    }, [router.asPath]);
+
+    if (router.pathname === '/search/[keyword]') {
+        keywords = String(query.keyword) || ''
+
+        if (query.num) {
+            nums = String(query.num) || ''
+        }
+    }
+    const [key, setKey] = useState<string>(keywords)
+    const [num, setNum] = useState<string>(nums)
+
+
+
+    const { message } = useToast()
+
+    const goSearch = () => {
+        //encodeURIComponent()
+        //decodeURIComponent()
+        const keywordsStr = key.replace(/^\s+/, "").replace(/\s+$/, "")
+        if (keywordsStr.length < 2) {
+            message("请输入至少2个字符")
+            return
+        }
+        const words_ = encodeURIComponent(keywordsStr)
+        if (num) {
+            router.push(`/search/${words_}.html?num=${num}`)
+        } else {
+            router.push(`/search/${words_}.html`)
+        }
+
+    }
+    const handleKeyPress = (key: string) => {
+        if (key === 'Enter') {
+            goSearch()
+        }
+    };
+    const changeNum = ((e: React.ChangeEvent<HTMLInputElement>) => {
+        const value = e.target.value;
+        const numericValue = value.replace(/[^0-9]/g, '');
+        setNum(numericValue)
+    })
+
+
+    return (
+        <>
+            {
+                isFixed &&
+                <div className={styles.fixedBox}>
+                    <div className={`${styles.cons} row botnSide`}>
+                        <Link href='/'><img className={styles.logoImg} src='/images/logo.png' alt='' /></Link>
+                        <div className={`${styles.searchInputBox} row  boxsiz`}>
+                            <input type='text' className={`${styles.inputGoods}   boxsiz`} value={key} onKeyPress={(e) => { handleKeyPress(e.key) }} onChange={(e) => { setKey(e.target.value) }} placeholder='请输入元器件型号、参数查找' />
+                            <input type='text' className={`${styles.inputNums}   boxsiz`} value={num} placeholder='需求数量' onKeyPress={(e) => { handleKeyPress(e.key) }} onChange={(e) => { changeNum(e) }} />
+                            <div className={`${styles.searchbtn} row rowCenter verCenter`} onClick={goSearch}><i className='icon iconfont icon-iconfontsousuo '></i></div>
+                        </div>
+                        <div className={`${styles.loginInfoBox} row`}>
+
+                            {
+                                getCookie("userId") ? <Link href='/customer'>{getCookie("userName")}</Link> :
+                                    <>
+                                        <Link href={'/login?type=1&backUrl=' + backUrl}>登录</Link>
+                                        <span className={styles.line}></span>
+                                        <Link href={'/login?type=2&backUrl=' + backUrl}>注册</Link>
+                                    </>
+                            }
+
+                        </div>
+                    </div>
+
+                </div>
+            }
+
+        </>
+    )
+
+}
+
+export default FixedSearchTop
\ No newline at end of file

components/Footer/index.module.min.css

+.mvFooterBox{height:160px;background:#F4F4F4}.mvFooterBox .cons{width:1226px;height:120px;margin:0 auto;padding-top:25px}.mvFooterBox .cons .img{height:90px;width:90px}.mvFooterBox .cons .navlink{margin-top:24px}.mvFooterBox .cons .navlink a{padding:0 40px;border-left:1px solid #d1d1d1;font-size:14px;color:#000;height:19px}.mvFooterBox .cons .navlink a:hover{color:#FF9A00}.mvFooterBox .cons .navlink a:first-child{border-left:0px}.mvFooterBox .cons .navlink a:last-child{padding-right:0px}.mvFooterBox .footerBot{height:40px;background:#FF9A00}.mvFooterBox .footerBot .consp{width:1226px;margin:0 auto;height:40px;line-height:40px;color:#FF9A00;font-size:14px;color:#fff}.mvFooterBox .footerBot .consp a{color:#fff;margin-left:30px}

components/Footer/index.module.scss

+.mvFooterBox {
+    height: 160px;
+    background: #F4F4F4;
+    .cons {
+        width: 1226px;
+        height: 120px;
+        margin: 0 auto;
+        padding-top: 25px;
+        .img {
+            height: 90px;
+            width: 90px;
+        }
+        .navlink {
+            margin-top: 24px;
+            a {
+                padding: 0 40px;
+                border-left: 1px solid #d1d1d1;
+                font-size: 14px;
+                color: #000;
+                height: 19px;
+                &:hover {
+                    color: #FF9A00;
+                }
+                &:first-child {
+                    border-left: 0px;
+                }
+                &:last-child {
+                    padding-right: 0px;
+                }
+            }
+        }
+    }
+    .footerBot {
+        height: 40px;
+        background: #FF9A00;
+        .consp {
+            width: 1226px;
+            margin: 0 auto;
+            height: 40px;
+            line-height: 40px;
+            color: #FF9A00;
+            font-size: 14px;
+            color: #fff;
+            a {
+                color: #fff;
+                margin-left: 30px;
+            }
+        }
+    }
+}
\ No newline at end of file

components/Footer/index.tsx

+import footerCss from './index.module.scss'
+import Link from "next/link"
+
+
+const Footer = () => {
+    return (
+       
+        <>
+            <div className={`${footerCss.mvFooterBox} `}>
+                <div className={`${footerCss.cons}  boxsiz row bothSide`} >
+                    <img src='/images/logo.png' alt='' className={`${footerCss.img} `}/>
+                    <div className={`${footerCss.navlink} cons boxsiz row bothSide`}>
+                        <Link  href='/brands.html'>品牌馆</Link>
+                        <Link  href='/about.html'>关于我们</Link>
+                        <Link  href='/contact.html'>联系我们</Link>
+                    </div>
+                </div>
+                <div className={footerCss.footerBot}>
+                    <div className={`${footerCss.consp}  row bothSide`}>
+                       
+                        <span>©2024北京安捷高科电子有限公司  ALL RIGHTS RESERVED  <a rel='noopener noreferrer' target='_blank' href='https://beian.miit.gov.cn/#/Integrated/index'>京ICP备2024055716号</a></span>
+                        {/* <span>增值电信业务经营许可证：粤B2-20160350</span> */}
+                    </div>
+                </div>
+            </div>
+        </>
+    )
+
+}
+
+export default Footer
\ No newline at end of file

components/Footer/type.tsx

+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

components/Header/components/NavBig/bignav.module.min.css

+.mvNavBig{height:38px;border-bottom:1px solid #FF9A00;background:#fff}.mvNavBig .navbox{margin:0 auto;width:1226px}.mvNavBig .navbox .classBoxs{position:relative;height:38px}.mvNavBig .navbox .classBoxs .titleLc{line-height:38px;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}.mvNavBig .navbox .classBoxs .boxOneLeft{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)}.mvNavBig .navbox .classBoxs .boxOneLeft.indexPages{display:block}.mvNavBig .navbox .classBoxs .boxOneLeft .classleftcons{width:234px;padding:20px 0;box-sizing:border-box;position:relative}.mvNavBig .navbox .classBoxs .boxOneLeft .classleftcons .oneClassGroup{color:#313131;font-size:14px;padding-left:17px;padding-right:17px}.mvNavBig .navbox .classBoxs .boxOneLeft .classleftcons .oneClassGroup .oneClassLink{display:block;width:100%;cursor:pointer;padding-bottom:5px}.mvNavBig .navbox .classBoxs .boxOneLeft .classleftcons .oneClassGroup .oneClassLink .spann{color:#000;font-size:16px;display:block;height:35px;line-height:35px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.mvNavBig .navbox .classBoxs .boxOneLeft .classleftcons .oneClassGroup .oneClassLink .spann span{transition:all 0.5s;display:inline-block;vertical-align:middle;width:0px;overflow:hidden}.mvNavBig .navbox .classBoxs .boxOneLeft .classleftcons .oneClassGroup .oneClassLink .spann span i{font-size:11px;color:#FF9A00;position:relative;top:-2px}.mvNavBig .navbox .classBoxs .boxOneLeft .classleftcons .oneClassGroup:hover .spann{color:#FF9A00}.mvNavBig .navbox .classBoxs .boxOneLeft .classleftcons .oneClassGroup:hover .spann span{width:25px}.mvNavBig .navbox .classBoxs .boxOneLeft .classleftcons .oneClassGroup .boxTwoRight{background:#fff;box-sizing:border-box;display:block;height:460px;width:775px;position:absolute;left:234px;padding-top:25px;box-sizing:border-box;top:0px;display:none;border-left:0px}.mvNavBig .navbox .classBoxs .boxOneLeft .classleftcons .oneClassGroup .boxTwoRight .classconsjk{width:775px;height:410px;box-sizing:border-box;overflow-y:auto;padding:0 24px}.mvNavBig .navbox .classBoxs .boxOneLeft .classleftcons .oneClassGroup .boxTwoRight .classconsjk::-webkit-scrollbar{width:8px}.mvNavBig .navbox .classBoxs .boxOneLeft .classleftcons .oneClassGroup .boxTwoRight .classconsjk::-webkit-scrollbar-thumb{border-radius:6px;background:#fff;-webkit-box-shadow:inset 0 0 8px rgba(0,0,0,0.2)}.mvNavBig .navbox .classBoxs .boxOneLeft .classleftcons .oneClassGroup .boxTwoRight .classconsjk::-webkit-scrollbar-track{border-radius:0;background:#f4f4f4}.mvNavBig .navbox .classBoxs .boxOneLeft .classleftcons .oneClassGroup .boxTwoRight .twoClassGroup{margin-bottom:10px}.mvNavBig .navbox .classBoxs .boxOneLeft .classleftcons .oneClassGroup .boxTwoRight .twoClassGroup .twoClassLink{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}.mvNavBig .navbox .classBoxs .boxOneLeft .classleftcons .oneClassGroup .boxTwoRight .twoClassGroup .twoClassLink:hover{color:#FF9A00}.mvNavBig .navbox .classBoxs .boxOneLeft .classleftcons .oneClassGroup .boxTwoRight .twoClassGroup .threeClassGroup{flex-wrap:wrap;margin-bottom:5px}.mvNavBig .navbox .classBoxs .boxOneLeft .classleftcons .oneClassGroup .boxTwoRight .twoClassGroup .threeClassGroup .threeClassLink{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}.mvNavBig .navbox .classBoxs .boxOneLeft .classleftcons .oneClassGroup .boxTwoRight .twoClassGroup .threeClassGroup .threeClassLink:hover{color:#FF9A00}.mvNavBig .navbox .classBoxs .boxOneLeft .classleftcons .oneClassGroup:hover .boxTwoRight{display:block}.mvNavBig .navbox .classBoxs:hover .boxOneLeft{display:block}.mvNavBig .navbox .haedNavBox{height:38px;line-height:38px}.mvNavBig .navbox .haedNavBox ul{box-sizing:border-box;padding-left:34px}.mvNavBig .navbox .haedNavBox li{margin-right:75px}.mvNavBig .navbox .haedNavBox li a{font-size:18px;color:#000}.mvNavBig .navbox .haedNavBox li.act a,.mvNavBig .navbox .haedNavBox li:hover a{color:#FF9A00}

components/Header/components/NavBig/index.module.min.css

+.mvNavBig{height:38px;border-bottom:1px solid #FF9A00;background:#fff}.mvNavBig .navbox{margin:0 auto;width:1226px}.mvNavBig .navbox .classBoxs{position:relative;height:38px}.mvNavBig .navbox .classBoxs .titleLc{line-height:38px;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}.mvNavBig .navbox .classBoxs .boxOneLeft{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)}.mvNavBig .navbox .classBoxs .boxOneLeft.indexPages{display:block}.mvNavBig .navbox .classBoxs .boxOneLeft .classleftcons{width:234px;padding:20px 0;box-sizing:border-box;position:relative}.mvNavBig .navbox .classBoxs .boxOneLeft .classleftcons .oneClassGroup{color:#313131;font-size:14px;padding-left:17px;padding-right:17px}.mvNavBig .navbox .classBoxs .boxOneLeft .classleftcons .oneClassGroup .oneClassLink{display:block;width:100%;cursor:pointer;padding-bottom:5px}.mvNavBig .navbox .classBoxs .boxOneLeft .classleftcons .oneClassGroup .oneClassLink .spann{color:#000;font-size:16px;display:block;height:35px;line-height:35px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;transition:all 0.5s}.mvNavBig .navbox .classBoxs .boxOneLeft .classleftcons .oneClassGroup:hover .spann{color:#FF9A00;padding-left:15px}.mvNavBig .navbox .classBoxs .boxOneLeft .classleftcons .oneClassGroup .boxTwoRight{background:#fff;box-sizing:border-box;display:block;height:460px;width:775px;position:absolute;left:234px;padding-top:25px;box-sizing:border-box;top:0px;display:none;border-left:0px}.mvNavBig .navbox .classBoxs .boxOneLeft .classleftcons .oneClassGroup .boxTwoRight .classconsjk{width:775px;height:410px;box-sizing:border-box;overflow-y:auto;padding:0 24px}.mvNavBig .navbox .classBoxs .boxOneLeft .classleftcons .oneClassGroup .boxTwoRight .classconsjk::-webkit-scrollbar{width:8px}.mvNavBig .navbox .classBoxs .boxOneLeft .classleftcons .oneClassGroup .boxTwoRight .classconsjk::-webkit-scrollbar-thumb{border-radius:6px;background:#fff;-webkit-box-shadow:inset 0 0 8px rgba(0,0,0,0.2)}.mvNavBig .navbox .classBoxs .boxOneLeft .classleftcons .oneClassGroup .boxTwoRight .classconsjk::-webkit-scrollbar-track{border-radius:0;background:#f4f4f4}.mvNavBig .navbox .classBoxs .boxOneLeft .classleftcons .oneClassGroup .boxTwoRight .twoClassGroup{margin-bottom:10px}.mvNavBig .navbox .classBoxs .boxOneLeft .classleftcons .oneClassGroup .boxTwoRight .twoClassGroup .twoClassLink{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}.mvNavBig .navbox .classBoxs .boxOneLeft .classleftcons .oneClassGroup .boxTwoRight .twoClassGroup .twoClassLink:hover{color:#FF9A00}.mvNavBig .navbox .classBoxs .boxOneLeft .classleftcons .oneClassGroup .boxTwoRight .twoClassGroup .threeClassGroup{flex-wrap:wrap;margin-bottom:5px}.mvNavBig .navbox .classBoxs .boxOneLeft .classleftcons .oneClassGroup .boxTwoRight .twoClassGroup .threeClassGroup .threeClassLink{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}.mvNavBig .navbox .classBoxs .boxOneLeft .classleftcons .oneClassGroup .boxTwoRight .twoClassGroup .threeClassGroup .threeClassLink:hover{color:#FF9A00}.mvNavBig .navbox .classBoxs .boxOneLeft .classleftcons .oneClassGroup:hover .boxTwoRight{display:block}.mvNavBig .navbox .classBoxs:hover .boxOneLeft{display:block}.mvNavBig .navbox .haedNavBox{height:38px;line-height:38px}.mvNavBig .navbox .haedNavBox ul{box-sizing:border-box;padding-left:34px}.mvNavBig .navbox .haedNavBox li{margin-right:75px}.mvNavBig .navbox .haedNavBox li a{font-size:18px;color:#000}.mvNavBig .navbox .haedNavBox li.act a,.mvNavBig .navbox .haedNavBox li:hover a{color:#FF9A00}

components/Header/components/NavBig/index.module.scss

+.mvNavBig {
+    height:38px;
+    border-bottom: 1px solid #FF9A00;
+    background: #fff;
+    .navbox {
+        margin    : 0 auto;
+        width     : 1226px;
+        .classBoxs {
+            position: relative;
+            height  : 38px;
+
+            .titleLc {
+                line-height : 38px;
+                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;
+            }
+
+            .boxOneLeft {
+                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);
+                &.indexPages{
+                    display: block;
+                }
+
+                .classleftcons {
+                    width     : 234px;
+                    padding   : 20px 0;
+                    box-sizing: border-box;
+                    position  : relative;
+
+                    .oneClassGroup {
+                        color        : #313131;
+                        font-size    : 14px;
+                        padding-left : 17px;
+                        padding-right: 17px;
+
+                        .oneClassLink {
+                            display       : block;
+                            width         : 100%;
+                            cursor        : pointer;
+                            padding-bottom: 5px;
+
+                            .spann {
+                                color        : #000;
+                                font-size    : 16px;
+                                display      : block;
+                                height       : 35px;
+                                line-height  : 35px;
+                                overflow     : hidden;
+                                text-overflow: ellipsis;
+                                white-space  : nowrap;
+                                transition: all 0.5s;
+                              
+                            }
+                   
+                        }
+
+                        &:hover {
+                            .spann {
+                                color: #FF9A00;
+                                padding-left: 15px;
+                            }
+                        }
+
+                        .boxTwoRight {
+                            background : #fff;
+                            box-sizing : border-box;
+                            display    : block;
+                            height     : 460px;
+                            width      : 775px;
+                            position   : absolute;
+                            left       : 234px;
+                            padding-top: 25px;
+                            box-sizing : border-box;
+                            top        : 0px;
+                            display    : none;
+                            border-left: 0px;
+
+                            .classconsjk {
+                                width      : 775px;
+                                height     : 410px;
+                                box-sizing  : border-box;
+                                overflow-y  : auto;
+                                padding:0 24px;
+
+                                &::-webkit-scrollbar {
+                                    width: 8px;
+                                }
+
+                                &::-webkit-scrollbar-thumb {
+                                    border-radius     : 6px;
+                                    background        : #fff;
+                                    -webkit-box-shadow: inset 0 0 8px rgba(0, 0, 0, 0.2)
+                                }
+
+                                &::-webkit-scrollbar-track {
+                                    border-radius: 0;
+                                    background   : #f4f4f4
+                                }
+                            }
+
+                            .twoClassGroup {
+                                margin-bottom: 10px;
+
+                                .twoClassLink {
+                                    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;
+
+                                    &:hover {
+                                        color: #FF9A00;
+                                    }
+                                }
+
+                                .threeClassGroup {
+                                    flex-wrap    : wrap;
+                                    margin-bottom: 5px;
+
+                                    .threeClassLink {
+                                        flex-shrink  : 0;
+                                        // width:120px;
+                                        padding-right: 20px;
+                                        box-sizing   : border-box;
+                                        margin-bottom: 5px;
+                                        height       : 30px;
+                                        line-height  : 30px;
+                                        color        : #888888;
+                                        font-size    : 12px;
+
+                                        &:hover {
+                                            color: #FF9A00;
+                                        }
+
+                                        overflow     : hidden;
+                                        text-overflow: ellipsis;
+                                        white-space  : nowrap;
+                                    }
+                                }
+                            }
+                        }
+
+                        &:hover {
+                            .boxTwoRight {
+                                display: block;
+                            }
+                        }
+                    }
+                }
+
+            }
+
+            &:hover {
+                .boxOneLeft {
+                    display: block;
+                }
+            }
+
+        }
+
+        .haedNavBox {
+            height     : 38px;
+            line-height: 38px;
+
+            ul {
+                box-sizing  : border-box;
+                padding-left: 34px;
+            }
+
+            li {
+                margin-right: 75px;
+
+                a {
+                    font-size: 18px;
+                    color    : #000;
+                }
+
+                &.act,
+                &:hover {
+                    a {
+                        color: #FF9A00;
+                    }
+                }
+
+            }
+        }
+    }
+}
\ No newline at end of file

components/Header/components/NavBig/index.tsx

+
+import styles from './index.module.scss'
+
+import type { ResponseTypeCateList, classListType } from './types'
+
+import { useRouter } from 'next/router'
+import Link from 'next/link'
+import { useAuth } from '@/hooks/useAuth'
+
+
+const NavBig = (props: ResponseTypeCateList) => {
+
+    const router = useRouter()
+    const { userId }=useAuth()
+    const items = [{
+        url: '/',
+        name: '首页'
+    }, {
+        url: '/brands.html',
+        name: '品牌馆'
+    }, {
+        url: '/about.html',
+        name: '关于我们'
+    }, {
+        url: '/contact.html',
+        name: '联系我们'
+    }]
+
+    if (userId) items.push({
+        url: '/customer',
+        name: '会员中心'
+    })
+    const classLists = props.data?.nav_list || []
+    const userUrlArr=["/myOrder","/orderDetail","/basicData","/invoice","/address"]
+    const pathnameStr=userUrlArr.indexOf(router.pathname)!=-1?"/customer":router.pathname
+    
+    
+    return (
+        <>
+            <div className={styles.mvNavBig}>
+                <div className={`${styles.navbox} row`}>
+                    <div className={styles.classBoxs}>
+                        <Link className={styles.titleLc} href='/list.html'>查看全部</Link>
+                        <div className={router.pathname === '/' ? `${styles.boxOneLeft} ${styles.indexPages}` : `${styles.boxOneLeft}`} >
+                            <div className={styles.classleftcons}>
+                                {
+                                    classLists.map(item => {
+                                        return (
+                                            <div className={styles.oneClassGroup} key={item.goods_type_id}>
+                                                <div className={styles.oneClassLink}>
+                                                    <Link className={styles.spann} href={`/list/${item.goods_type_id}`}>
+                                                    {item.goods_type_name}
+                                                    </Link>
+                                                </div>
+
+                                                <div className={styles.boxTwoRight}>
+                                                    <div className={styles.classconsjk}>
+
+                                                        <div className={styles.twoClassGroup}>
+                                                            <Link href={`/list/${item.goods_type_id}`} key={item.goods_type_id} className={styles.twoClassLink}>{item.goods_type_name}</Link>
+                                                            <div  className={`${styles.threeClassGroup} row`}>
+                                                                {
+                                                                    (item.child || []).map((itemChild, index) => {
+                                                                        return (
+                                                                            <Link key={itemChild.goods_type_id + index} className={styles.threeClassLink} href={`/list/${item.goods_type_id}_${itemChild.goods_type_id}`}>{itemChild.goods_type_name}</Link>
+
+                                                                        )
+                                                                    })
+                                                                }
+
+                                                            </div>
+                                                        </div>
+
+
+                                                    </div>
+                                                </div>
+                                            </div>
+                                        )
+                                    })
+                                }
+
+
+                            </div>
+                        </div>
+                    </div>
+                    <div className={styles.haedNavBox}>
+                        <ul className='row'>
+                            {
+                                items.map((item, index) => {
+                                    return (
+                                        <li className={pathnameStr === item.url ? styles.act : ''} key={item.name + index}>
+                                            <Link href={item.url} >{item.name}</Link>
+                                        </li>
+                                    )
+                                })
+                            }
+                        </ul>
+                    </div>
+                </div>
+            </div>
+
+        </>
+    )
+
+}
+
+export default NavBig
\ No newline at end of file

components/Header/components/NavBig/types.tsx

+export type ResponseTypeCateList = {
+    code: number | string;
+    data: {
+        nav_list: Array<classListType>
+    } | null;
+    msg: string;
+    titlex?:any;
+    keywordsx?:string;
+    descriptionx?:string;
+}
+export type classListType = {
+    goods_type_id: string,
+    goods_type_name: string,
+    child?: Array<{
+        goods_type_id: string,
+        goods_type_name: string,
+    }>
+}
+

components/Header/components/Pagination/index.tsx

+import ReactPaginate  from 'react-paginate';
+
+type paginateTy={
+    total:number,
+    currentPage:number,
+    limit?:number,
+    onPageChange:(selectedItem: { selected: number; })=>void
+}
+
+
+const Paginate = (props:paginateTy) => {
+    const limit=props.limit||10
+    const pageCount= Math.ceil(props. total/ limit)||0;
+    const currentPage=props.currentPage||1
+    return (
+        pageCount>1&&
+        <ReactPaginate
+        previousLabel={'<上一页'}
+        nextLabel={'下一页>'}
+        breakLabel={'...'}
+        pageCount={pageCount}
+        marginPagesDisplayed={5}
+        pageRangeDisplayed={5}
+        onPageChange={props.onPageChange}
+        forcePage={  pageCount > 0 ? currentPage - 1 : undefined}
+        containerClassName={'paginationxk'}
+        activeClassName={'activexk'}
+    />
+  
+    );
+  };
+
+  export default Paginate
\ No newline at end of file

components/Header/components/SearchH/index.module.min.css

+.mvSearchBox{height:146px;background:#FFFFFF}.mvSearchBox .cons{width:1226px;margin:0 auto;padding-top:22px}.mvSearchBox .cons .logoImg{width:118px;height:118px;margin-left:54px;margin-top:-5px}.mvSearchBox .cons .searchInputBox{width:630px;height:40px;background:#FFFFFF;border-radius:2px;border:1px solid #FF9A00;margin-top:13px;margin-left:103px}.mvSearchBox .cons .searchInputBox .inputGoods{width:451px;height:38px;line-height:38px;padding:0 15px;border-right:1px solid #FF9A00}.mvSearchBox .cons .searchInputBox .inputNums{width:108px;height:38px;line-height:38px;padding:0 15px;border-right:1px solid #FF9A00}.mvSearchBox .cons .searchInputBox .searchbtn{width:70px;height:38px;cursor:pointer;background:#FF9A00}.mvSearchBox .cons .searchInputBox .searchbtn i{font-size:26px;color:#fff}.mvSearchBox .cons .searchInputBox .searchbtn:hover{background:#E18800}.mvSearchBox .cons .collectButton{width:70px;height:40px;background:#FFFFFF;border-radius:2px;margin-top:15px;border:1px solid #E0E0E0}

components/Header/components/SearchH/index.module.scss

+.mvSearchBox{
+    height: 146px;
+    background: #FFFFFF;
+    .cons{
+        width:1226px;
+        margin:0 auto;
+        padding-top: 22px;
+        .logoImg{
+            width: 118px;
+            height: 118px;
+            margin-left: 54px;
+            margin-top: -5px;
+        }
+
+        .searchInputBox{
+            width: 630px;
+            height: 40px;
+            background: #FFFFFF;
+            border-radius: 2px;
+            border: 1px solid #FF9A00;
+            margin-top: 13px;
+            margin-left: 103px;
+            .inputGoods{
+                width:451px;
+                height:38px;
+                line-height: 38px;
+                padding: 0 15px;
+                border-right: 1px solid #FF9A00;
+            }
+            .inputNums{
+                width:108px;
+                height:38px;
+                line-height: 38px;
+                padding: 0 15px;
+                border-right: 1px solid #FF9A00;
+            }
+            .searchbtn{
+                width:70px;
+                height:38px;
+                cursor: pointer;
+                background: #FF9A00;
+                i{
+                    font-size: 26px;
+                    color:#fff;
+                }
+                &:hover{
+                    background: #E18800;
+                }
+            }
+        }
+
+        .collectButton {
+            width: 70px;
+            height: 40px;
+            background: #FFFFFF;
+            border-radius: 2px;
+            margin-top: 15px;
+            border: 1px solid #E0E0E0;
+        }
+    }
+}
\ No newline at end of file

components/Header/components/SearchH/index.tsx

+
+import styles from './index.module.scss'
+import { useState } from 'react'
+import { useToast } from '@/hooks/useToast'
+import Link from 'next/link'
+import { useRouter } from 'next/router'
+import ShopCart from '../ShoppingCart'
+import { useAuth } from '@/hooks/useAuth'
+
+
+const SearchH = () => {
+    const router = useRouter()
+    const { query } = router
+    let keywords = ''
+    let nums = '';
+    if (router.pathname === '/search/[keyword]') {
+        keywords = String(query.keyword) || ''
+
+        if (query.num) {
+            nums = String(query.num) || ''
+        }
+    }
+    const [key, setKey] = useState<string>(keywords)
+    const [num, setNum] = useState<string>(nums)
+
+    const { userId } = useAuth()
+
+    const { message } = useToast()
+
+    const goSearch = () => {
+        //encodeURIComponent()
+        //decodeURIComponent()
+        const keywordsStr = key.replace(/^\s+/, "").replace(/\s+$/, "")
+        if (keywordsStr.length < 2) {
+            message("请输入至少2个字符")
+            return
+        }
+        const words_ = encodeURIComponent(keywordsStr)
+        if (num) {
+            router.push(`/search/${words_}.html?num=${num}`)
+        } else {
+            router.push(`/search/${words_}.html`)
+        }
+
+    }
+    const handleKeyPress = (key: string) => {
+        if (key === 'Enter') {
+            goSearch()
+        }
+    };
+    const changeNum = ((e: React.ChangeEvent<HTMLInputElement>) => {
+        const value = e.target.value;
+        const numericValue = value.replace(/[^0-9]/g, '');
+        setNum(numericValue)
+    })
+    return (
+        <>
+            <div className={styles.mvSearchBox}>
+
+                <div className={`${styles.cons} row bothSide boxsiz`}>
+                    <Link href='/'><img className={styles.logoImg} src='/images/logo.png' alt='' /></Link>
+                    <div className={`${styles.searchInputBox} row  boxsiz`}>
+                        <input type='text' className={`${styles.inputGoods}   boxsiz`} value={key} onKeyPress={(e) => { handleKeyPress(e.key) }} onChange={(e) => { setKey(e.target.value) }} placeholder='请输入元器件型号、参数查找' />
+                        <input type='text' className={`${styles.inputNums}   boxsiz`} value={num} placeholder='需求数量' onKeyPress={(e) => { handleKeyPress(e.key) }} onChange={(e) => { changeNum(e) }} />
+                        <div className={`${styles.searchbtn} row rowCenter verCenter`} onClick={goSearch}><i className='icon iconfont icon-iconfontsousuo '></i></div>
+                    </div>
+                    <>
+                        <ShopCart></ShopCart>
+                        {/* <div>
+                            <button className={styles.collectButton}>我的收藏</button>
+                        </div> */}
+                    </>
+
+                </div>
+            </div>
+        </>
+    )
+
+}
+
+export default SearchH
\ No newline at end of file

components/Header/components/ShoppingCart/index.module.min.css

+.shopBox{width:115px;height:40px;margin-top:15px;position:relative}.shopBox :global .nodataTable .ant-table-cell{border-bottom:0px !important}.shopBox .shopButton{width:115px;height:40px;line-height:40px;background:#FFFFFF;font-size:12px;color:#000;border-radius:2px;text-align:left;padding:0 10px;box-sizing:border-box;border:1px solid #E0E0E0;cursor:pointer}.shopBox .shopButton span{width:31px;height:16px;background:#E3030E;border-radius:10px;font-size:12px;color:#FFFFFF;line-height:16px;text-align:center;position:relative;top:11px;left:3px}.shopBox .shopLayer{display:none;height:450px;width:790px;border:1px solid #FF9A00;position:absolute;right:calc(100% - 115px);background-color:#fff;box-sizing:border-box;padding:30px 25px;z-index:10}.shopBox .shopLayer .layerTop{height:30px;display:flex;align-items:center;margin-bottom:20px;position:relative}.shopBox .shopLayer .layerTop .placeButton{width:80px;height:26px;line-height:24px;background:#FFFFFF;border-radius:1px;border:1px solid #B0B0B0;cursor:pointer;margin-right:10px}.shopBox .shopLayer .layerTop .placeButton:hover{color:#fff;background-color:#FF9A00;border-color:#FF9A00}.shopBox .shopLayer .layerTop .sePlaceButton{color:#fff;background-color:#FF9A00;border-color:#FF9A00}.shopBox .shopLayer .layerTop .shopTotal{position:absolute;right:0;top:20px}.shopBox .shopLayer .layerFooter{width:calc(100% - 50px);position:absolute;bottom:30px;display:flex;align-items:center}.shopBox .shopLayer .layerFooter .replaceButton{width:86px;height:25px;background:#FFFFFF;border-radius:15px;border:1px solid #919191;margin-right:30px;cursor:pointer;color:#919191;font-size:12px}.shopBox .shopLayer .layerFooter .accountButton{position:absolute;right:0;width:102px;height:34px;color:#fff;background:#D0121B;border-radius:1px;cursor:pointer}.shopBox .shopLayer .keyNumbers{color:#CC0000}.shopBox:hover .shopButton{border-color:#FF9A00;border-bottom-color:#fff}.shopBox:hover .shopButton::after{content:"";position:absolute;position:absolute;top:39px;width:115px;height:2px;z-index:99;left:0;border-right:1px solid #FF9A00;border-left:1px solid #FF9A00;box-sizing:border-box;background-color:#fff}.shopBox:hover .shopLayer{display:block}

components/Header/components/ShoppingCart/index.module.scss

+.shopBox {
+    width: 115px;
+    height: 40px;
+    margin-top: 15px;
+    position: relative;
+    :global {
+        .nodataTable .ant-table-cell{
+            border-bottom: 0px!important;
+          }
+     }
+    .shopButton {
+        width: 115px;
+        height: 40px;
+        line-height: 40px;
+        background: #FFFFFF;
+        font-size: 12px;
+        color:#000;
+        border-radius: 2px;
+        text-align: left;
+        padding: 0 10px;
+        box-sizing: border-box;
+        border: 1px solid #E0E0E0;
+        cursor: pointer;
+        span{
+            width: 31px;
+            height: 16px;
+            background: #E3030E;
+            border-radius: 10px;
+            font-size: 12px;
+            color: #FFFFFF;
+            line-height: 16px;
+            text-align: center;
+            position: relative;
+            top: 11px;
+            left: 3px;
+        }
+    }
+    
+
+    .shopLayer {
+        display: none;
+        height: 450px;
+        width: 790px;
+        border: 1px solid #FF9A00;
+        position: absolute;
+        right: calc(100% - 115px);
+        background-color: #fff;
+        box-sizing: border-box;
+        padding: 30px 25px;
+        z-index: 10;
+
+        .layerTop {
+            height: 30px;
+            display: flex;
+            align-items: center;
+            margin-bottom: 20px;
+            position: relative;
+
+            .placeButton {
+                width: 80px;
+                height: 26px;
+                line-height: 24px;
+                background: #FFFFFF;
+                border-radius: 1px;
+                border: 1px solid #B0B0B0;
+                cursor: pointer;
+                margin-right: 10px;
+
+                &:hover {
+                    color: #fff;
+                    background-color: #FF9A00;
+                    border-color:#FF9A00;
+                }
+            }
+
+            .sePlaceButton {
+                color: #fff;
+                background-color: #FF9A00;
+                border-color:#FF9A00;
+            }
+
+            .shopTotal {
+                position: absolute;
+                right: 0;
+                top: 20px;
+            }
+        }
+
+        .layerFooter {
+            width: calc(100% - 50px);
+            position: absolute;
+            bottom: 30px;
+            display: flex;
+            align-items: center;
+
+            .replaceButton {
+                width: 86px;
+                height: 25px;
+                background: #FFFFFF;
+                border-radius: 15px;
+                border: 1px solid #919191;
+                margin-right: 30px;
+                cursor: pointer;
+                color: #919191;
+                font-size: 12px;
+            }
+
+            .accountButton {
+                position: absolute;
+                right: 0;
+                width: 102px;
+                height: 34px;
+                color: #fff;
+                background: #D0121B;
+                border-radius: 1px;
+                cursor: pointer;
+            }
+        }
+
+        .keyNumbers {
+            color: #CC0000;
+        }
+    }
+
+    &:hover {
+        .shopButton {
+            border-color: #FF9A00;
+            border-bottom-color: #fff;
+            
+            &::after {
+                content: "";
+                position: absolute;
+                position: absolute;
+                top: 39px;
+                width: 115px;
+                height: 2px;
+                z-index: 99;
+                left: 0;
+                border-right: 1px solid #FF9A00;
+                border-left: 1px solid #FF9A00;
+                box-sizing: border-box;
+                background-color: #fff;
+            }
+        }
+
+        .shopLayer {
+            display: block;
+        }
+    }
+}
\ No newline at end of file

components/Header/components/ShoppingCart/index.tsx

+import styles from  './index.module.scss'
+import Link from 'next/link'
+import { Table, TableColumnsType, TableProps } from "antd"
+import { useState, useEffect } from 'react'
+import { DataType } from "@/types/orderTypes"
+import useRequest from "@/hooks/useRequest"
+import { useToast }  from '@/hooks/useToast'
+import { useRouter } from 'next/router'
+import { useCookies } from '@/hooks/useCookies'
+
+const TopH=()=>{
+    const { message } = useToast()
+    const {  getCookie } = useCookies()
+    const router = useRouter()
+    const [sePlace, setSePlace] = useState<any>('1')
+    const [shopList, setShopList] = useState<any>([])
+    const [disList, setDisList] = useState<any>([])
+    const [disCn, setDisCn] = useState<any>([])
+    const [disUs, setDisUs] = useState<any>([])
+    const [isHover, setIsHover] = useState<any>(false)
+    const [selectList, setSelectList] = useState<any>([])
+    const { request: userRequest } = useRequest<any>({ manual: true, loading: false })
+    const [selectedRowKeys, setSelectedRowKeys] = useState<React.Key[]>([])
+
+    const columns: TableColumnsType<DataType> = [
+        { title: '型号/品牌', dataIndex: 'sku_name', key: 'sku_name', 
+            render:(text, record, index) => { 
+                return <span>{record.sku_name || record.goods_name}/{record.brand_name}</span>}
+        },
+        { title: '渠道', dataIndex: 'supplier_name', key: 'supplier_name' },
+        { title: '交货地', dataIndex: 'delivery_place_type_text', key: 'delivery_place_type_text' },
+        { title: '单价', dataIndex: 'goods_price', key: 'goods_price',
+            render:(text, record, index) => {
+                const isHk = record.delivery_place_type === '2'
+                return <span style={{paddingLeft: isHk ? '3px' : ''}}>{isHk ? ' $ ' : '￥'}{record.goods_price}</span>
+            }
+        },
+        { title: '购买量', dataIndex: 'goods_number', key: 'goods_number' },
+        { title: '小计', dataIndex: 'goods_amount', key: 'goods_amount',
+            render:(text, record, index) => {
+                const isHk = record.delivery_place_type === '2'
+                return <span style={{paddingLeft: isHk ? '3px' : ''}}>{isHk ? ' $ ' : '￥'}{record.goods_amount}</span>
+            }
+        }
+    ]
+
+    const rowSelection: TableProps<DataType>['rowSelection'] = {
+        selectedRowKeys,
+        onChange: (selectedRowKeys: React.Key[], selectedRows: DataType[]) => {
+            setSelectList(selectedRows)
+            setSelectedRowKeys(selectedRowKeys)
+        }
+    }
+
+    useEffect(() => {
+        if(getCookie("userId")){
+            handleDataInit()
+        }
+    }, [])
+
+    useEffect(() => {
+        if (isHover) handleDataInit()
+    }, [isHover])
+
+    useEffect(() => {
+        let dataList:any = []
+        let keyList:any = []
+        shopList.forEach((shopItem:any) => {
+            if (sePlace == '0' || shopItem?.delivery_place_type == sePlace) {
+                dataList.push(
+                    {
+                        ...shopItem,
+                        key: `${shopItem.sku_id}_${shopItem.delivery_place_type}`
+                    }
+                )
+                keyList.push(`${shopItem.sku_id}_${shopItem.delivery_place_type}`)
+            }
+        })
+        setDisList(dataList)
+        setSelectList(dataList)
+        setSelectedRowKeys(keyList)
+    }, [shopList, sePlace])
+
+    const handleSelectPlace = (place: any) => setSePlace(place)
+
+    const handleMouseEnter = (e: any) => {
+        setIsHover(true)
+    }
+
+    const handleMouseLeave = (e: any) => {
+        setIsHover(false)
+    }
+
+    const handleDataInit = async () => {
+        const shopListResopnse = await userRequest({
+            url: '/api/cart/cartList',
+            method: 'post'
+        })
+        if (shopListResopnse?.code === 0) {
+            setShopList(shopListResopnse.data.cart_list)
+            setDisCn(shopListResopnse.data.cart_amount_cn)
+            setDisUs(shopListResopnse.data.cart_amount_hk)
+        }
+    }
+
+    const handleDataRemove = async () => {
+        if (!selectList.length) return message('请选择商品！')
+        const shopListResopnse = await userRequest({
+            url: '/api/cart/cartEdit',
+            method: 'post',
+            data: {
+                goods_list: selectList.map((seItem:any) => {
+                    return {
+                        sku_id: seItem.sku_id,
+                        status: -1,
+                        delivery_place_type: seItem.delivery_place_type
+                    }
+                })
+            }
+        })
+        if (shopListResopnse?.code === 0) message('删除成功！')
+        else message(shopListResopnse?.msg)
+        handleDataInit()
+    }
+
+    const handleToSettle = () => {
+        if (!selectList.length) return message('请选择商品！')
+        const idList:any[] = []
+        const noStockList:any[] = []
+        let areaArray:any[] = []
+        selectList.forEach((seItem:any) => {
+            if (Number(seItem.goods_number || 0) > seItem.stock) noStockList.push(seItem.sku_name || seItem.goods_name)
+            idList.push(seItem.sku_id)
+            areaArray.push(Number(seItem.delivery_place_type))
+        })
+        if (noStockList.length) {
+            return message(`${noStockList.join('，')}型号不能购买，库存不足！`)
+        }
+        const disArea = [...new Set(areaArray)]
+        if (disArea.length && disArea.length > 1) {
+            return message(`不同交货地不能一起结算，请重新选择！`)
+        }
+        router.push(`/orderSettle?sourceType=2&id=${idList.join(',')}&deliveryPlaceType=${disArea[0]}`)
+    }
+
+    return (
+        <div className={styles.shopBox} id="cartFloatBoxs" onMouseEnter={handleMouseEnter} onMouseLeave={handleMouseLeave}>
+            <Link href='/shoppingCart' >
+                    <button className={`${styles.shopButton} row`}>我的购物车<span id="cartNumx">{shopList.length}</span></button>
+                    
+            </Link>
+            <div className={styles.shopLayer}>
+                <div className={styles.layerTop}>
+                    交货地：
+                    {/* <button 
+                            className={`${styles.placeButton} ${(sePlace ==='0') && styles.sePlaceButton}`} 
+                            onClick={() => handleSelectPlace('0')}>
+                                全部
+                            </button> */}
+                    <button 
+                        className={`${styles.placeButton} ${(sePlace ==='1') && styles.sePlaceButton}`} 
+                        onClick={() => handleSelectPlace('1')}>
+                        大陆
+                    </button>
+                    <button
+                        className={`${styles.placeButton} ${(sePlace ==='2') && styles.sePlaceButton}`} 
+                        onClick={() => handleSelectPlace('2')}>
+                        香港
+                    </button>
+                    <div className={styles.shopTotal}>
+                        共
+                        <span className={styles.keyNumbers}> {disList.length} </span>
+                        件商品
+                    </div>
+                </div>
+                <div className={styles.layerContain} key={isHover}>
+                    <Table<DataType>
+                        size="small"
+                        bordered={ false }
+                        rowKey={(record) => `${record?.sku_id}_${record?.delivery_place_type}`}
+                        pagination={ false }
+                        columns={columns}
+                        scroll={
+                           { y: 260}
+                        }
+                        rowSelection={{ ...rowSelection }}
+                        dataSource={disList}
+
+                        className={disList.length==0?'nodataTable':''}
+                    />
+                </div>
+                <div className={styles.layerFooter}>
+                    <button className={styles.replaceButton} onClick={handleDataRemove}>移除商品</button>
+                    <div>
+                        {(['0', '1'].includes(sePlace)) && 
+                            (
+                                <> 
+                                    大陆总金额：
+                                    <span className={styles.keyNumbers} style={{marginRight: '20px'}}>
+                                        ¥{disCn}
+                                    </span>
+                                </>
+                            )
+                        }
+                        {(['0', '2'].includes(sePlace)) && 
+                            (
+                                <>
+                                    香港总金额：
+                                    <span className={styles.keyNumbers}>
+                                        ${disUs}
+                                    </span>
+                                </>
+                            )
+                        }
+                    </div>
+                    <button className={styles.accountButton} onClick={handleToSettle}>去结算</button>
+                </div>
+            </div>
+        </div>
+    )
+
+}
+
+export default TopH
\ No newline at end of file

components/Header/components/TopH/index.module.min.css

+.mvTopBox{height:40px;background:#F4F4F4}.mvTopBox .con{width:1226px;margin:0 auto;height:40px}.mvTopBox .con .line{height:18px;background:#d1d1d1;width:1px;margin:0px 15px}.mvTopBox .con a{font-size:12px;color:#666}.mvTopBox .con a:hover{color:#FF9A00}.mvTopBox .con .rqq{margin-left:25px}

components/Header/components/TopH/index.module.scss

+.mvTopBox{
+    height: 40px;
+    background: #F4F4F4;
+    .con{
+        width:1226px;
+        margin:0 auto;
+        height:40px;
+        .line {
+            height: 18px;
+            background: #d1d1d1;
+            width: 1px;
+            margin: 0px 15px;
+        }
+        a{
+            font-size: 12px;
+            color:#666;
+            &:hover{
+                color: #FF9A00;
+            }
+        }
+        .rqq{
+            margin-left: 25px;
+        }
+    }
+}
\ No newline at end of file

components/Header/components/TopH/index.tsx

+import styles from  './index.module.scss'
+
+import QqIcon from '../../../QqIcon'
+import Link from 'next/link'
+import { useQq } from '@/hooks/useQq'
+import { useAuth } from '@/hooks/useAuth'
+import { useCookies } from '@/hooks/useCookies'
+import { useToast } from '@/hooks/useToast';
+import { useRouter } from 'next/router'
+import { useEffect, useState } from 'react'
+
+const TopH=()=>{
+    const { QQURL} = useQq()
+    const { userId } = useAuth()
+    const { setCookie, getCookie } = useCookies()
+    const { message } = useToast()
+    const router = useRouter()
+    const [backUrl, setBackUrl] = useState('');
+    const [topheadtype, setTopheadtype] = useState('');
+   
+   
+    useEffect(() => {
+        setBackUrl(encodeURIComponent(window.location.href));
+        if(router.pathname=="/login"||router.pathname=="/passwordRecover"){
+            setTopheadtype("1")
+        }
+    }, [router.asPath]);
+    const handleLogOut = () => {
+        setCookie('token', '', 1)
+        setCookie('userId', '', 1)
+        setCookie('userName', '', 1)
+        message('退出账号成功！')
+        history.go(0)
+    }
+
+    return (
+        <>
+            <div className={styles.mvTopBox}>
+               <div className={`${styles.con} row bothSide verCenter`}>
+                    <div ></div>
+                    {
+                        topheadtype=="1"?
+                        <div  className='row verCenter'>
+                            <Link href='/about.html'>关于我们</Link>
+                            <span className={styles.line}></span>
+                            <Link href='/contact.html'>联系我们</Link>
+                            <span className={styles.line}></span>
+                            <Link href='/notice.html'>公告</Link>
+                            <span  className={styles.rqq}><QqIcon QQURL={QQURL}/></span>
+                        </div>
+                        :
+                        <div  className='row verCenter'>
+                            {(!userId) ? (
+                                <>
+                                    <Link href={'/login?type=1&backUrl='+backUrl}>立即登录</Link>
+                                    <span className={styles.line}></span>
+                                    <Link href={'/login?type=2&backUrl='+backUrl}>立即注册</Link>
+                                    <span className={styles.line}></span>
+                                </>   
+                            ) : (
+                                <>
+                                    <Link href='/customer'>{getCookie("userName")}</Link>
+                                    <span className={styles.line}></span>
+                                    <span 
+                                        onClick={handleLogOut} 
+                                        style={{cursor: 'pointer', fontSize: '12px', color: '#666666'}}>
+                                            退出账号
+                                    </span>
+                                    <span className={styles.line}></span>
+                                    
+                                </>
+                            )
+                            }
+                            <Link href='/about.html'>关于我们</Link>
+                            <span className={styles.line}></span>
+                            <Link href='/contact.html'>联系我们</Link>
+                            <span className={styles.line}></span>
+                            <Link href='/notice.html'>公告</Link>
+                            <span  className={styles.rqq}><QqIcon QQURL={QQURL}/></span>
+                        </div>
+                    }
+                    
+               </div>
+            </div>
+        </>
+    )
+
+}
+
+export default TopH
\ No newline at end of file

components/Header/index.tsx

+import TopH from "./components/TopH"
+import SearchH from "./components/SearchH"
+import NavBig from "./components/NavBig"
+
+import { useSeoTitle } from "@/hooks/useSeoTitle"
+
+import type {ResponseTypeCateList} from '@/components/Header/components/NavBig/types'
+
+
+
+
+const Header = (props:ResponseTypeCateList) => {
+    
+    const seoTitle=useSeoTitle({...props})
+    return (
+        <>
+        {seoTitle}
+        <div className="head-box">
+            <TopH />
+            <SearchH />
+            <NavBig {...props!}/>
+
+        </div>
+        </>
+        
+
+    )
+
+}
+
+export default Header
\ No newline at end of file

components/Header/type.tsx

+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

components/InvoiceSelector/index.tsx

+import { useState, useEffect } from 'react'
+import useRequest from "@/hooks/useRequest"
+import { Modal, Table, TableColumnsType, Button } from 'antd';
+
+// 定义子组件 props 类型
+interface ChildComponentProps {
+    status: any;
+    onMessageChange: (data:any) => void;
+  }
+
+const InvoiceSelector: React.FC<ChildComponentProps> = ({status, onMessageChange}) =>{
+    const [open, setOpen] = useState<any>('')
+    const { request: userRequest } = useRequest<any>({ manual: true, loading: true })
+    const [invoiceList, setInvoiceList] = useState<any>()
+
+    const columns: TableColumnsType<any> = [
+        { title: '序号', dataIndex: 'name', key: 'name', render:(text, record, index) => { return <span>{index + 1}</span>}},
+        { title: '发票抬头', dataIndex: 'tax_title', key: 'tax_title'},
+        { title: '税务登记号', dataIndex: 'tax_no', key: 'tax_no' },
+        { title: '注册电话', dataIndex: 'company_phone', key: 'company_phone' },
+        { 
+            title: '开户银行', 
+            dataIndex: 'bank_name', 
+            key: 'bank_name'
+        },
+        { title: '开户账号', dataIndex: 'bank_account', key: 'bank_account' },
+        { 
+            title: '注册地址', 
+            dataIndex: 'company_address', 
+            key: 'company_address'
+        },
+        { 
+            title: '操作', 
+            dataIndex: 'goods_number', 
+            key: 'goods_number',
+            width: 70,
+            render:(text, record, index) => { 
+                return (
+                    <Button
+                        color="default"
+                        size="small" 
+                        variant="text" onClick={() => handleLineDelete(record)}>
+                        选择
+                    </Button>
+                )
+            }
+         }
+    ]
+
+    useEffect(() => {
+        setOpen(status)
+    }, [status])
+
+    useEffect(() => {
+        if(open){
+            handleInvoiceInit()
+        }
+    }, [open])
+
+    const handleInvoiceInit = async () => {
+        const res = await userRequest({
+            url: `/api/userInfo/userInvoiceList?limit=30&page=1`,
+            method: 'get'
+        })
+        if (res?.code === 0 && res.data.list.length) {
+            setInvoiceList(res.data.list)
+        }
+    }
+
+    const handleLineDelete = (data: any) => {
+        onMessageChange(data)
+    }
+
+    const handleModal = (show:boolean) => {
+        setOpen(show)
+        onMessageChange(null)
+    }
+
+    return (
+        <>
+           <Modal
+                style={{maxHeight: "500px",overflowY: "auto"}}
+                title="选择发票"
+                open={open}
+                destroyOnClose
+                footer={null}
+                closeIcon={null}
+                centered
+                width={980}
+                onCancel={() => handleModal(false)}
+            >
+                <Table<any>
+                    size="small"
+                    bordered={true}
+                    rowKey={(record) => record?.web_user_invoice_id}
+                    columns={columns}
+                    dataSource={invoiceList}
+                    pagination={false}
+                />
+            </Modal>
+        </>
+    )
+
+}
+
+export default InvoiceSelector
\ No newline at end of file

components/ListNoData/index.module.min.css

+.listsNoDatax{background:#fff;text-align:center;padding:40px;height:auto}.listsNoDatax img{width:116px;height:116px;display:block;margin:0 auto}.listsNoDatax p{font-size:14px;font-weight:bold;color:#313131;margin-top:32px}

components/ListNoData/index.module.scss

+.listsNoDatax{
+    background: #fff;
+    text-align: center;
+    padding: 40px;
+    height: auto;
+    img{
+        width: 116px;
+        height: 116px;
+        display: block;
+        margin: 0 auto;
+    }
+    p{
+        font-size: 14px;
+        font-weight: bold;
+        color: #313131;
+        margin-top: 32px;
+    }
+}
\ No newline at end of file

components/ListNoData/index.tsx

+import  Styles from './index.module.scss'
+
+const ListNoData=()=>{
+
+    return (
+        <>
+           <div className={Styles.listsNoDatax}>
+                <img src='/images/nodata.png' alt="" />
+                <p>很抱歉！暂无数据</p>
+           </div>
+        </>
+    )
+
+}
+
+export default ListNoData
\ No newline at end of file

components/ListOneItem/index.module.min.css

+.listGroupOneItem{padding:0px 27px;background:#fff}.listGroupOneItem .cons{border-top:1px solid #e7e7e7;padding:10px 0px}.listGroupOneItem .cons .item{margin-right:15px;box-sizing:border-box;flex-shrink:0}.listGroupOneItem .cons .item .phonecons{position:relative;cursor:pointer}.listGroupOneItem .cons .item .phonecons img{width:25px;height:25px}.listGroupOneItem .cons .item .phonecons div{position:absolute;background:#fff;top:28px;right:2px;border:1px solid #FF9A00;padding:4px 6px;border-radius:3px;display:none}.listGroupOneItem .cons .item .phonecons:hover div{display:block}.listGroupOneItem .cons .item:last-child{margin-right:0px}.listGroupOneItem .cons .item .goodsImg{width:92px;height:92px}.listGroupOneItem .cons .item .goodsName{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}.listGroupOneItem .cons .item .goodsName:hover{color:#FF9A00;cursor:pointer}.listGroupOneItem .cons .item .goodsName:hover b{color:#FF9A00 !important}.listGroupOneItem .cons .item p{font-size:12px;color:#000000;line-height:23px}.listGroupOneItem .cons .item .jtgroup{font-size:12px;color:#000000;line-height:23px}.listGroupOneItem .cons .item .jtgroup span,.listGroupOneItem .cons .item .jtgroup strong{width:33.33%}.listGroupOneItem .cons .item .actjt{color:#FF9A00}.listGroupOneItem .cons .item .ljxunj{display:block;cursor:pointer;width:100px;height:30px;background:#FF9A00;color:#fff;font-size:14px;text-align:center;line-height:30px}.listGroupOneItem .cons .item.w198{width:198px}.listGroupOneItem .cons .item.w345{width:345px}.listGroupOneItem .cons .item.w200{width:200px}.listGroupOneItem .cons .item.w145{width:145px}.listGroupOneItem .cons .item.w298{width:298px}.listGroupOneItem .cons .item .collectButton{display:block;width:100px;height:30px;font-size:14px;color:#FFFFFF;background:#FF9A00;cursor:pointer}.listGroupOneItem .cons .item .collectButton:hover{background:#E18800}.listGroupOneItem .cons .item .buyBtn{display:block;width:100px;height:30px;font-size:14px;color:#FF9A00;border:1px solid #FF9A00;margin-top:20px;cursor:pointer;background-color:#fff}.listGroupOneItem .cons .item .buyBtn:hover{background:#FFF7EC}

components/ListOneItem/index.module.scss

+.listGroupOneItem{
+    padding:0px 27px;
+    background: #fff;
+    .cons{
+        border-top: 1px solid #e7e7e7;
+        padding:10px 0px;
+        .item{
+            margin-right: 15px;
+            box-sizing: border-box;
+            flex-shrink: 0;
+            .phonecons{
+                position: relative;
+                cursor: pointer;
+                img{
+                    width:25px;
+                    height:25px;
+                }
+                div{
+                    position: absolute;
+                    background: #fff;
+                    top: 28px;
+                    right: 2px;
+                    border: 1px solid #FF9A00;
+                    padding: 4px 6px;
+                    border-radius: 3px;
+                    display: none;
+                }
+                &:hover{
+                    div{
+                        display: block;
+                    }
+                }
+            }
+            &:last-child{margin-right: 0px;}
+            .goodsImg{
+                width: 92px;
+                height: 92px;
+            }
+            .goodsName{
+                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;
+                
+                &:hover{
+                    color:#FF9A00;
+                    b{
+                        color:#FF9A00!important;
+                    }
+                    cursor: pointer;
+                }
+                margin-bottom: 10px;
+            }
+            p{
+                font-size: 12px;
+                color: #000000;
+                line-height: 23px;
+            }
+            .jtgroup{
+                font-size: 12px;
+                color: #000000;
+                line-height: 23px;
+                span,strong{width:33.33%;}
+            }
+            .actjt{
+                color:#FF9A00;
+            }
+            .ljxunj{
+                display: block;
+                cursor: pointer;
+                width: 100px;
+                height: 30px;
+                background: #FF9A00;
+                color:#fff;
+                font-size: 14px;
+                text-align: center;
+                line-height: 30px;
+            }
+            &.w198{width:198px;}
+            &.w345{width:345px;}
+            &.w200{width:200px;}
+            &.w145{width:145px;}
+            &.w298{width:298px;}
+
+            .collectButton {
+                display: block;
+                width: 100px;
+                height: 30px;
+                font-size: 14px;
+                color: #FFFFFF;
+                background: #FF9A00;
+                cursor: pointer;
+
+                &:hover {
+                    background: #E18800;
+                }
+            }
+
+            .buyBtn {
+                display: block;
+                width: 100px;
+                height: 30px;
+                font-size: 14px;
+                color: #FF9A00;
+                border: 1px solid #FF9A00;
+                margin-top: 20px;
+                cursor: pointer;
+                background-color: #fff;
+
+                &:hover {
+                    background: #FFF7EC;
+                }
+            }
+        }
+        
+    }
+}
\ No newline at end of file

components/ListOneItem/types.tsx

+
+export type dataListItemType = {
+       QQURL:string;
+       PHONE:string;
+       sku_id:string|number;
+       sku_name: string;
+       sku_name_show?:string;
+       goods_name_show?:string; 
+       brand_name: string;
+       brand_id: string|number;
+       supplier_brand_name:string;
+       supplier_brand_id:string|number;
+
+       goods_type_id?:string|number;
+       goods_type_id2?:string|number;
+       goods_type_name?:string;
+       goods_type_name2?:string;
+
+       batch_sn?:string,
+       cn_delivery_time: string;
+       hk_delivery_time: string;
+       goods_id: string|number;
+       goods_images: string;
+       goods_name: string;
+       moq: number;
+       multiple: number;
+       stock: number;
+       supplier_name: string;
+       ladder_price: Array<{
+              checked?:boolean;
+              price_cn: number;
+              price_cost_cn?: number;
+              price_us: number;
+              purchase?: string|number;
+              purchases?: string|number;
+              price_cost_us?: number;
+       }>
+}

components/ListSort/index.module.min.css

+.sortRanksx{font-size:14px;color:#000000;padding:20px 0px}.sortRanksx .left .item{height:18px;line-height:18px;padding:0 30px;border-left:1px solid #d1d1d1;cursor:pointer;position:relative}.sortRanksx .left .item:first-child{padding-left:0px;border-left:0px}.sortRanksx .left .item .bottomiconx{width:0px;height:0px;border-style:solid;border-width:6px;border-color:#D8D8D8 transparent transparent transparent;position:absolute;top:10px;right:14px}.sortRanksx .left .item .topiconx{width:0px;height:0px;border-style:solid;border-width:6px;border-color:transparent transparent #D8D8D8 transparent;position:absolute;top:-4px;right:14px}.sortRanksx .left .item.act{color:#FF9A00}.sortRanksx .left .item.act.top .topiconx{border-color:transparent transparent #FF9A00 transparent}.sortRanksx .left .item.act.bottom .bottomiconx{border-color:#FF9A00 transparent transparent transparent}.sortRanksx .right .checkbox{height:18px;width:18px;border-radius:2px;background:#FFF;border:1px solid #ededed;position:relative;top:2px;margin-right:6px;text-align:center;line-height:18px;cursor:pointer}.sortRanksx .right .checkbox i{font-size:21px;position:relative;top:1px;left:-1px;color:transparent}.sortRanksx .right .checkbox.act{border-color:#FF9A00}.sortRanksx .right .checkbox.act i{color:#FF9A00}.sortRanksx .right span{margin-left:6px;cursor:pointer}.sortRanksx .right span.act{color:#FF9A00;cursor:pointer}

components/ListSort/index.module.scss

+.sortRanksx {
+    font-size: 14px;
+    color    : #000000;
+    padding  : 20px 0px;
+
+    .left {
+        .item {
+            height     : 18px;
+            line-height: 18px;
+            padding    : 0 30px;
+            border-left: 1px solid #d1d1d1;
+            cursor     : pointer;
+            position   : relative;
+
+            &:first-child {
+                padding-left: 0px;
+                border-left : 0px;
+            }
+
+            .bottomiconx {
+                width       : 0px;
+                height      : 0px;
+                border-style: solid;
+                border-width: 6px;
+                border-color: #D8D8D8 transparent transparent transparent;
+                position    : absolute;
+                top         : 10px;
+                right       : 14px;
+            }
+
+            .topiconx {
+                width       : 0px;
+                height      : 0px;
+                border-style: solid;
+                border-width: 6px;
+                border-color: transparent transparent #D8D8D8 transparent;
+                position    : absolute;
+                top         : -4px;
+                right       : 14px;
+            }
+
+            &.act {
+                color: #FF9A00;
+
+                &.top {
+                    .topiconx {
+                        border-color: transparent transparent #FF9A00 transparent;
+                    }
+                }
+
+                &.bottom {
+                    .bottomiconx{
+                        border-color: #FF9A00 transparent transparent transparent;
+                    }
+                }
+            }
+        }
+    }
+
+    .right {
+        .checkbox {
+            height       : 18px;
+            width        : 18px;
+            border-radius: 2px;
+            background   : #FFF;
+            border       : 1px solid #ededed;
+            position     : relative;
+            top          : 2px;
+            margin-right : 6px;
+            text-align   : center;
+            line-height  : 18px;
+            cursor       : pointer;
+
+            i {
+                font-size: 21px;
+                position : relative;
+                top      : 1px;
+                left     : -1px;
+                color    : rgba(0, 0, 0, 0)
+            }
+
+            &.act {
+                i {
+                    color: #FF9A00;
+                }
+
+                border-color:#FF9A00;
+            }
+        }
+
+        span {
+            margin-left: 6px;
+            cursor     : pointer;
+
+            &.act {
+                color : #FF9A00;
+                cursor: pointer;
+            }
+        }
+    }
+}
\ No newline at end of file

components/ListSort/index.tsx

+
+import { Dispatch, SetStateAction } from 'react';
+import styles from './index.module.scss'
+import type { ListSortType } from './types'
+
+interface ListSortProps {
+    sortObj: ListSortType;
+    onChangeSort?: (T: ListSortType) => void; //自定义函数
+    setSortObj?: Dispatch<SetStateAction<ListSortType>>
+}
+const ListSort = (props: ListSortProps) => {
+    const { sortType, isStock, stockSort, priceSort } = props.sortObj
+    const changeSort = (sortType?: number) => {
+        const obj_ = { ...props.sortObj }
+        if (sortType) {
+            obj_.sortType = sortType
+        }
+        if (sortType === 2) {
+            if (obj_.stockSort === 'top') {
+                obj_.stockSort = 'bottom'
+            } else {
+                obj_.stockSort = 'top'
+            }
+        }
+        if (sortType === 3) {
+            if (obj_.priceSort === 'top') {
+                obj_.priceSort = 'bottom'
+            } else {
+                obj_.priceSort = 'top'
+            }
+        }
+        if (!sortType) {
+            obj_.isStock = !obj_.isStock
+        }
+        props.setSortObj && props.setSortObj(obj_)
+        props.onChangeSort && props.onChangeSort(obj_)
+    }
+    return (
+        <>
+            <div className={`${styles.sortRanksx} row bothSide`}>
+                <div className={`${styles.left} row`}>
+                    <div className={sortType === 1 ? `${styles.item} ${styles.act}` : `${styles.item}`} onClick={() => { changeSort(1) }}>综合排序</div>
+                    <div className={sortType === 2 ? (stockSort === `top` ? `${styles.item} ${styles.act} ${styles.top}` : `${styles.item} ${styles.act} ${styles.bottom}`) : `${styles.item}`} onClick={() => { changeSort(2) }}>库存<i className={styles.topiconx}></i><i className={styles.bottomiconx}></i></div>
+                    <div className={sortType === 3 ? (priceSort === `bottom` ? `${styles.item} ${styles.act} ${styles.top}` : `${styles.item} ${styles.act} ${styles.bottom}`) : `${styles.item}`} onClick={() => { changeSort(3) }}>价格<i className={styles.topiconx}></i><i className={styles.bottomiconx}></i></div>
+                </div>
+                <div className={`${styles.right} row verCenter`}>
+                    <div className={isStock ? `${styles.checkbox} ${styles.act}` : `${styles.checkbox} `} onClick={() => { changeSort() }}>
+                        <i className='icon iconfont icon-B-fuxuankuang'></i>
+                    </div>
+                    <span className={isStock ? `${styles.act}` : ''} onClick={() => { changeSort() }}>仅显示有货</span>
+                </div>
+            </div>
+        </>
+    )
+
+}
+
+export default ListSort
\ No newline at end of file

components/ListSort/types.tsx

+export type ListSortType = {
+       sortType:number,//1 综合排序 2库存排序 3价格排序
+       isStock:boolean,//true 仅有货 false  全部
+       stockSort?:string, // top 升序  bottom 降序
+       priceSort?:string // top 升序  bottom 降序
+}

components/QqIcon/index.tsx

+const QqIcon = (props:{QQURL:string}) => {
+    const {QQURL}=props
+    return (
+        <>
+            <a href={QQURL} rel="noreferrer" target='_blank' title='QQ咨询'><img style={{width:'25px',height:'25px'}} src='/images/qq.png' alt='' /></a>
+        </>
+    )
+
+}
+
+export default QqIcon
\ No newline at end of file

components/navigation/index.module.min.css

+.navigation{width:190px;padding-top:20px;background:#fff;overflow-x:hidden;box-sizing:border-box}.navigation .navTitle{height:36px;padding-left:15px;font-size:16px;line-height:20px;border-bottom:1px solid #F4F4F4;margin-bottom:25px;position:relative;cursor:pointer}.navigation .navTitle .title{padding-left:15px}.navigation .item{font-size:16px;margin-bottom:35px}.navigation .item .itemText{padding-left:25px}.navigation .item .itemChild{padding-left:40px;font-size:14px;color:#808080;cursor:pointer;margin-top:15px;position:relative}.navigation .item .itemChild:hover{color:#FF9A00}.navigation .itemSelected{color:#FF9A00 !important}.navigation .itemSelected::after{content:"";display:block;position:absolute;width:3px;height:20px;left:0;top:0;background-color:#FF9A00}

components/navigation/index.module.scss

+.navigation {
+    width: 190px;
+    padding-top: 20px;
+    background: #fff;
+    overflow-x: hidden;
+    box-sizing: border-box;
+    .navTitle {
+        height: 36px;
+        padding-left: 15px;
+        font-size: 16px;
+        line-height: 20px;
+        border-bottom: 1px solid #F4F4F4;
+        margin-bottom: 25px;
+        position: relative;
+        cursor: pointer;
+
+        .title {
+            padding-left: 15px;
+        }
+    }
+
+    .item {
+        font-size: 16px;
+        margin-bottom: 35px;
+
+        .itemText {
+            padding-left: 25px;
+        }
+
+        .itemChild {
+            padding-left: 40px;
+            font-size: 14px;
+            color: #808080;
+            cursor: pointer;
+            margin-top: 15px;
+            position: relative;
+
+            &:hover {
+                color: #FF9A00;
+            }
+        }
+       
+    } 
+    
+    
+    .itemSelected {
+        color: #FF9A00 !important;
+
+        &::after {
+            content: "";
+            display: block;
+            position: absolute;
+            width: 3px;
+            height: 20px;
+            left: 0;
+            top: 0;
+            background-color: #FF9A00;
+        }
+    }
+}
\ No newline at end of file

components/navigation/index.tsx

+const NavList = [
+    {
+        title: '订单中心',
+        key: 'orderCenter',
+        children: [
+            {
+                title: '我的订单',
+                key: 'OrderPage',
+                url: 'myOrder'
+            },
+            // {
+            //     title: '我的售后',
+            //     key: 'AfterSales'
+            // }
+        ]
+    },
+    // {
+    //     title: '我的钱包',
+    //     key: 'myWallet',
+    //     children: [
+    //         {
+    //             title: '我的优惠券',
+    //             key: 'MyCoupons'
+    //         }
+    //     ]
+    // },
+    // {
+    //     title: '我的信息',
+    //     key: 'myInformation',
+    //     children: [
+    //         {
+    //             title: '站内信',
+    //             key: 'Mail'
+    //         }
+    //     ]
+    // },
+    {
+        title: '资料中心',
+        key: 'dataCenter',
+        children: [
+            {
+                title: '基础信息',
+                key: 'BasicData',
+                url: 'basicData'
+            },
+            {
+                title: '我的发票',
+                key: 'InvoicePage',
+                url: 'invoice'
+            },
+            {
+                title: '我的地址',
+                key: 'AddressPage',
+                url: 'address'
+            }
+        ]
+    },
+    // {
+    //     title: '我的关注',
+    //     key: 'myFollow',
+    //     children: [
+    //         {
+    //             title: '我的收藏',
+    //             key: 'MyCollection'
+    //         }
+    //     ]
+    // }
+]
+
+import styles from './index.module.scss'
+import {useState, useEffect} from 'react'
+import { useRouter } from 'next/router'
+
+const Nav = () => {
+    const router = useRouter()
+    const [ selectObj, setSelectObj ] = useState<any>();
+
+    const handleSelected = (url: any) => {
+        url && router.push(url)
+    }
+
+    useEffect(() => {
+        if (router.pathname !== '/orderDetail') setSelectObj(router.pathname)
+        else setSelectObj('/myOrder')
+    }, [router.pathname])
+
+    return (
+        <>
+            <div className={styles.navigation}>
+                <div className={`${styles.navTitle} ${(selectObj === '/customer') && styles.itemSelected}`}
+                    onClick={() => handleSelected('customer')}>
+                    <span className={styles.title}>首页</span>
+                </div>
+                {
+                    NavList.map((item) => {
+                        return (
+                            <div className={styles.item} key={item.key}>
+                                <span className={styles.itemText}>{item.title}</span>
+                                {
+                                    item.children.map((itemChild) => {
+                                        return (
+                                            <div className={`${styles.itemChild} ${(selectObj === `/${itemChild.url}`) && styles.itemSelected}`} 
+                                                key={itemChild.key} onClick={() => handleSelected(itemChild.url)}>
+                                                <span className={styles.childText}>{itemChild.title}</span>
+                                            </div>
+                                        )
+                                    })
+                                }
+                            </div>
+                        )
+
+                    })
+                }
+            </div>
+        </>
+    )
+}
+
+export default Nav
\ No newline at end of file

configReact.tsx

+const os = require('os');
+
+export const  QQURL='https://wpa.qq.com/msgrd?v=3&uin=1908059998&site=qq&menu=yes'
+export const  API_URL='http://api.chiplinks.net'
+//export const  API_URL='http://erpwebback.com'
\ No newline at end of file

hooks/useAuth.tsx

+import { useState, useEffect } from 'react'
+import { useCookies } from "./useCookies"
+
+
+export const useAuth = () => {
+    const [userId, setUserId] = useState<any>(null);
+    const {getCookie} = useCookies()
+
+    useEffect(() => {
+        setUserId(getCookie('userId'))
+    }, [])
+    
+    return { userId, setUserId };
+};
+
+

hooks/useCookies.tsx

+
+export const useCookies = () => {
+
+  const setCookie = (
+    name: string,
+    value: string | number,
+    time: number,
+    domain?: string
+  ) => {
+
+
+    try {
+      let domainStr = domain ? `;domain=${domain}` : '';
+      const exp = new Date(); // 当前时间
+      exp.setTime(exp.getTime() + time * 24 * 60 * 60 * 1000); // 设置过期时间
+      document.cookie = `${name}=${encodeURIComponent(value)};expires=${exp.toUTCString()};path=/${domainStr}`;
+      return true;
+    } catch (error) {
+      return true;
+    }
+
+
+  }
+  const getCookie = (name: string): string | null => {
+    try {
+      const cookiesArray = document.cookie.split(';');
+      for (let i = 0; i < cookiesArray.length; i++) {
+        let cookiePair = cookiesArray[i].trim();
+        let cookieRegex = new RegExp(`${name}=`);
+        if (cookieRegex.test(cookiePair)) {
+          return decodeURIComponent(cookiePair.replace(cookieRegex, ''));
+        }
+      }
+      return null;
+    } catch (error) {
+      return null;
+    }
+
+  }
+  return { setCookie, getCookie }
+}
+

hooks/useQq.tsx

+import { useEffect, useState } from "react"
+import useRequest from "./useRequest"
+import { useCookies } from "./useCookies"
+
+type getQQTypeResponse = {
+    code: number | string,
+    data: {
+        qq: number | string,
+        mobile:number | string,
+    },
+    msg: string
+}
+
+export const useQq = () => {
+    const { request: qqUrlRequest } = useRequest<getQQTypeResponse>({ manual: true,loading:false })
+    const {setCookie,getCookie}=useCookies()
+    const [QQURL,setQQURL]=useState<string>('')
+    const [PHONE,setPHONE]=useState<string>('')
+    useEffect(() => {
+        if(getCookie("QQMOBILEs")){
+            const aurl_:any=JSON.parse(getCookie("QQMOBILEs")!)
+            setQQURL(aurl_.qq)
+            setPHONE(aurl_.mobile)
+        }else{
+            qqUrlRequest({ url: '/api/contact/list' }).then(res => {
+                if (res?.code === 0) {
+                    setQQURL(`${res.data.qq}`)
+                    setPHONE(`${res.data.mobile}`)
+                    setCookie('QQMOBILEs',`${JSON.stringify(res.data)}`,0.01)
+                }
+                
+            })
+        }
+    }, [qqUrlRequest])
+
+    return { QQURL,PHONE }
+}
+

hooks/useRequest.tsx

+
+import { useCallback, useEffect, useRef, useState } from 'react';
+import axios, { AxiosRequestConfig } from "axios"
+import { useToast } from './useToast';
+import {API_URL} from '@/configReact'
+import { useCookies } from "@/hooks/useCookies"
+import { useRouter } from 'next/router';
+
+// 默认请求参数
+const defaultRequestConfig = {
+    url: '/', method: 'GET', data: {}, params: {}
+}
+
+function useRequest<T>(options: AxiosRequestConfig & { manual?: boolean,loading?:boolean|undefined } = defaultRequestConfig) {
+    const [data, setData] = useState<T | null>(null)
+    const [loaded, setLoaded] = useState(false)
+    const {loading,message}=useToast()
+    const loadingRef = useRef(loading);
+    const messageRef = useRef(message);
+
+    const {getCookie} = useCookies()
+    
+    const router = useRouter()
+
+    const request = useCallback((requestOption?: AxiosRequestConfig) => {
+        setData(null)
+        setLoaded(false)
+        if(options.loading!==false){
+            loadingRef.current()
+        }
+        const headers = requestOption?.headers
+        const userId = getCookie("userId")
+        const token = getCookie("token")
+        return axios.request<T>({
+            baseURL:API_URL,
+            ...requestOption,
+            headers: {
+                Authorization: token,
+                webUserId: userId,
+                ...headers
+            }
+        }).then((response) => {
+            // if (response.data['code' as keyof typeof data] && response.data['code' as keyof typeof data] === 101) {
+            //     router.push('login?type=1')
+            //     return
+            // }
+            setData(response.data)
+            return response.data
+        }).catch((e: any) => {
+            messageRef.current(e.message)
+        }).finally(() => {
+            loadingRef.current(false)
+            setLoaded(true)
+        })
+    }, [options.loading])
+
+    useEffect(() => {
+        if (!options.manual) {
+            request(options).catch(e=> {
+                messageRef.current(e.message)
+            })
+        }
+
+    }, [options, request])
+    
+
+    return { data,loaded,  request }
+}
+
+export default useRequest
\ No newline at end of file

hooks/useSeoTitle.tsx

+import Head from "next/head";
+import { useRouter } from "next/router";
+import { useEffect } from "react";
+import { useCookies } from "./useCookies";
+
+
+export const useSeoTitle = (props?:any) => {
+    const {  getCookie } = useCookies()
+    const router=useRouter()
+
+    const getClassNameStr=(data:any, idStr:any)=> {
+    
+        const ids = idStr.split('_');
+        const parentId = parseInt(ids[0], 10); 
+        const childId = ids.length > 1 ? parseInt(ids[1], 10) : null; 
+      
+      
+        for (let i = 0; i < data.length; i++) {
+          const item = data[i];
+          
+          if (item.goods_type_id === parentId) {
+            
+            if (childId !== null) {
+              const child = item.child.find((childItem:any )=> childItem.goods_type_id === childId);
+              if (child) {
+                return child.goods_type_name; 
+              }
+            } else {
+              return item.goods_type_name; 
+            }
+          }
+        }
+        return ""; 
+    }
+    let titlestr='404'
+    const titleKeywords:any = {
+        '/': { title: '首页' },
+        '/search/[keyword]': { title: '搜索结果' },
+        '/item/[sku_id]': { title: '商品详情' },
+        '/brands.html': { title: '品牌馆' },
+        '/brand/[brand_id]': { title: '品牌结果' },
+        '/list.html': { title: '分类地图' },
+        '/list/[class_id]': { title: '分类结果' },
+        '/about.html': { title: '关于我们' },
+        '/contact.html': { title: '联系我们' },
+        '/notice.html': { title: '公告' },
+        '/login': { title: '登录/注册' },
+        '/regChoose': { title: '注册发票' },
+        '/customer': { title: '会员中心' ,needLogin:true},
+        '/myOrder': { title: '我的订单',needLogin:true },
+        '/orderSettle': { title: '提交订单',needLogin:true },
+        '/orderResult':{ title: '提交订单成功',needLogin:true },
+        '/orderDetail': { title: '订单详情',needLogin:true },
+        '/basicData': { title: '基础信息',needLogin:true },
+        '/invoice': { title: '我的发票',needLogin:true },
+        '/address': { title: '我的地址' ,needLogin:true},
+        '/shoppingCart': { title: '购物车',needLogin:true },
+        
+        
+    }
+    if (Object.keys(titleKeywords).indexOf(router.pathname) !== -1) {
+        titlestr=titleKeywords[router.pathname]['title']
+        if(router.route=="/search/[keyword]"){
+            titlestr=`${router.query.keyword}现货_${router.query.keyword}期货_${router.query.keyword}报价`
+        }
+        if(router.route=="/list/[class_id]"){
+            let arr_=props?.data!.nav_list
+            const class_name_strs=getClassNameStr(arr_,router.query.class_id)
+            titlestr=`${class_name_strs}价格查询,${class_name_strs}库存查询`
+        }
+
+    }
+    
+    
+    useEffect(()=>{
+        if(titleKeywords[router.pathname]['needLogin']){
+            if(!getCookie("userId")){
+                window.location.href='/login?type=1&backUrl='+encodeURIComponent(window.location.href)
+            }
+        }
+    },[])
+    
+    return (
+        <Head>
+            <title>{`${titlestr}_麒麟电子商城`}</title>
+            <link rel="icon" href="/images/logo.png" />
+            <meta name="keywords" content={`${titlestr}_麒麟电子商城`} />
+            <meta name="description" content={`${titlestr}_麒麟电子商城`} />
+        </Head>
+    )
+}
+
+
+
+

hooks/useToast.tsx

+import { createRoot } from "react-dom/client";
+const tipStyle = {
+
+    textAlign: 'center' as const,
+    fontSize: '14px',
+    lineHeight: '32px',
+    fontWeight: 'bold',
+    position: 'fixed' as const,
+    top: '170px',
+    color: '#fff',
+    zIndex: '99999',
+    width: '500px',
+    left: '50%',
+    marginLeft: '-250px'
+
+}
+
+const tipTextStyle = {
+    background: 'rgba(0,0,0,0.5)',
+    paddingLeft: '20px',
+    paddingRight: '20px',
+    minWidth: '84px'
+}
+const loadindStyle = {
+    position: 'fixed' as const,
+    top: '0px',
+    left: '0px',
+    right: '0px',
+    bottom: '0px',
+    zIndex: '999999'
+}
+const loadindImgStyle = {
+    position: 'absolute' as const,
+    top: '50%',
+    left: '50%',
+    marginLeft: '-18px',
+    marginTop: '-18px',
+
+}
+
+
+
+
+export const useToast = () => {
+    const message = (message: string, timeout = 2000) => {
+        try {
+            let element = document.getElementById('toastmessagexk4600');
+            if (element) {
+                element.parentNode?.removeChild(element);
+            }
+            const elementMessage = document.createElement('div');
+            elementMessage.id = 'toastmessagexk4600'
+            const rootMessage = createRoot(elementMessage)
+            rootMessage.render(
+                <div style={tipStyle} className="row rowCenter">
+                    <div style={tipTextStyle}>{message}</div>
+                </div>
+            );
+            if (!elementMessage.parentNode) {
+                document.body.appendChild(elementMessage);
+                setTimeout(() => {
+                    elementMessage.parentNode && document.body.removeChild(elementMessage);
+                }, timeout);
+            }
+        } catch (error) {
+
+        }
+
+    }
+    const loading = ((show = true) => {
+        try {
+            let element = document.getElementById('toastloadingxk4600');
+            element && element.parentNode?.removeChild(element);
+            const elementLoading = document.createElement('div');
+            elementLoading.id = 'toastloadingxk4600'
+            const rootLoading = createRoot(elementLoading)
+            rootLoading.render(
+                <div style={loadindStyle} >
+                    <img src='/images/loading.gif' alt="" style={loadindImgStyle} />
+                </div>
+            );
+            if (show) {
+                if (!elementLoading.parentNode) {
+                    document.body.appendChild(elementLoading);
+                }
+            } else {
+                if (elementLoading.parentNode) {
+                    document.body.removeChild(elementLoading);
+                }
+
+            }
+        } catch (error) {
+
+        }
+
+
+    })
+    return { message, loading };
+}
+
+
+
+
+

next-env.d.ts

+/// <reference types="next" />
+/// <reference types="next/image-types/global" />
+
+// NOTE: This file should not be edited
+// see https://nextjs.org/docs/basic-features/typescript for more information.

next.config.mjs

+/** @type {import('next').NextConfig} */
+
+const nextConfig = {
+  // output: 'standalone',
+    // experimental: {
+    //     prefetch: false,
+    //   },
+    reactStrictMode: false, // 关闭 React 严格模式
+    // 配置代理
+    async rewrites() {
+        return [
+          // {
+          //   source: '/api/:path*',
+          //   destination: 'http://erpweb.liexindev.net/api/:path*',
+          // },
+          {
+            source: '/brand/:brand_id.html',
+            destination: '/brand/:brand_id', 
+          },
+          {
+            source: '/item/:sku_id.html',
+            destination: '/item/:sku_id',
+          },
+          {
+            source: '/search/:keyword.html',
+            destination: '/search/:keyword', 
+          },
+      ];
+    },
+ 
+    async headers() {
+        return [
+          {
+            source: '/_next/data/:path*',
+            headers: [
+              {
+                key: 'Cache-Control',
+                value: 'public, max-age=3600, immutable'
+              },
+            ],
+          },
+        ];
+      },
+};
+
+export default nextConfig;
\ No newline at end of file

package.json

+{
+  "name": "europa-web",
+  "version": "0.1.0",
+  "private": true,
+  "scripts": {
+    "dev": "next dev",
+    "build": "next build",
+    "start": "next start",
+    "lint": "next lint"
+  },
+  "dependencies": {
+    "@ant-design/cssinjs": "^1.22.0",
+    "antd": "^5.21.6",
+    "axios": "^1.7.2",
+    "lodash": "^4.17.21",
+    "next": "^13.0.5",
+    "react": "^18",
+    "react-dom": "^18",
+    "react-paginate": "^8.2.0",
+    "react-redux": "^9.1.2",
+    "react-router-dom": "^6.27.0",
+    "redux": "^5.0.1",
+    "sass": "^1.77.8",
+    "swiper": "^11.1.5"
+  },
+  "devDependencies": {
+    "@types/node": "^20",
+    "@types/react": "^18",
+    "@types/react-dom": "^18",
+    "eslint": "^8",
+    "eslint-config-next": "12",
+    "typescript": "^5"
+  }
+}

pages/404/index.module.min.css

+.page404{background:#fff;padding:80px 0}.page404 img{height:296px;width:360px;display:block;margin:0 auto}

pages/404/index.module.scss

+.page404{
+    background: #fff;
+    padding:80px 0;
+    img{
+        height:296px;
+        width:360px;
+        display: block;
+        margin:0 auto;
+    }
+}
\ No newline at end of file

pages/404/index.tsx

+import styles from './index.module.scss'
+
+
+import BreadNav from '@/components/BreadNav';
+import Footer from "@/components/Footer";
+import Header from "@/components/Header";
+import { GetServerSideProps } from 'next';
+import { getCateList } from "@/server/getCateList";
+import type { ResponseTypeCateList } from '@/components/Header/components/NavBig/types'
+
+
+export const getStaticProps: GetServerSideProps = async () => {
+    return getCateList()
+}
+
+const Page = (props: { cateList: ResponseTypeCateList }) => {
+    
+    return (
+        <>
+            <main>
+                <Header {...props.cateList} />
+                <BreadNav><strong>404</strong></BreadNav>
+                <div className={styles.page404}>
+                    <img src='/images/p404.png' alt="" />
+                </div>
+
+                <Footer />
+            </main>
+
+
+        </>
+    )
+
+}
+
+export default Page
\ No newline at end of file

pages/_app.tsx

+
+import '../public/styles/font/iconfont.css'
+import '../public/styles/base.scss'
+import type { AppProps } from 'next/app';
+
+
+//antd中英输入框组件文组件
+import zhCN from 'antd/locale/zh_CN';
+import { ConfigProvider, Empty } from 'antd'
+import theme from '@/public/antvTheme/theme'
+import dayjs from 'dayjs';
+import 'dayjs/locale/zh-cn';
+import type { GetProp } from 'antd';
+
+dayjs.locale('zh-cn')
+
+//组件CSS降级兼容
+import { StyleProvider, legacyLogicalPropertiesTransformer } from '@ant-design/cssinjs';
+
+
+
+
+const renderEmpty: GetProp<typeof ConfigProvider, 'renderEmpty'> = (componentName) => {
+    return <Empty image='/images/empty.png' description="数据为空" imageStyle={{width: '240px', margin: '20px auto 0'}} />
+};
+
+const MyApp= ({ Component, pageProps }:AppProps) => {
+  return  (
+    <StyleProvider hashPriority="high" transformers={[legacyLogicalPropertiesTransformer]}>
+        <ConfigProvider locale={ zhCN } theme={theme} renderEmpty={renderEmpty}>
+          <Component {...pageProps} />
+      </ConfigProvider>
+    </StyleProvider>
+      
+  )
+};
+
+export default MyApp;
\ No newline at end of file

pages/about.html/index.module.min.css

+.mvAboutPage .banner{height:231px;background:url(../../public/images/aboutUsBanner.png) no-repeat top center}.mvAboutPage .section{background:#fff}.mvAboutPage .section .cons{padding:0 143px;padding-top:111px;padding-bottom:119px}.mvAboutPage .section .cons .left{width:267px}.mvAboutPage .section .cons .left .title{border-bottom:1px solid #E7E7E7;font-weight:bold;font-size:20px;color:#313131}.mvAboutPage .section .cons .left .title span{display:inline-block;position:relative;border-bottom:3px solid #00C69F;padding-bottom:22px;top:2px}.mvAboutPage .section .cons .left p{padding-top:22px;font-weight:400;font-size:14px;color:#000000;line-height:30px}.mvAboutPage .section .cons img{width:245px;height:245px;position:relative;top:58px}

pages/about.html/index.module.scss

+.mvAboutPage{
+    .banner{
+        height:231px;
+        background: url(../../public/images/aboutUsBanner.png) no-repeat top center;
+    }
+    .section{
+        background: #fff;
+        .cons{
+            padding: 0 143px;
+            padding-top: 111px;
+            padding-bottom: 119px;
+            .left{
+                width: 267px;
+                .title{
+                    border-bottom: 1px solid #E7E7E7;
+                    font-weight: bold;
+                    font-size: 20px;
+                    color: #313131;
+                    span{
+                        display: inline-block;
+                        position: relative;
+                        border-bottom: 3px solid #00C69F;
+                        padding-bottom: 22px;
+                        top:2px;
+                    }
+                }
+                p{
+                    padding-top: 22px;
+                    font-weight: 400;
+                    font-size: 14px;
+                    color: #000000;
+                    line-height: 30px;
+                }
+            }
+            img{
+                width: 245px;
+                height: 245px;
+                position: relative;
+                top:58px;
+            }
+        }
+    }
+}
\ No newline at end of file

pages/about.html/index.tsx

+import style from './index.module.scss'
+
+import Footer from "@/components/Footer";
+import Header from "@/components/Header";
+import { GetServerSideProps } from 'next';
+import { getCateList } from "@/server/getCateList";
+import type { ResponseTypeCateList } from '@/components/Header/components/NavBig/types'
+
+export const getServerSideProps: GetServerSideProps = async (context) => {
+    return getCateList()
+}
+
+const Page = (props: { cateList: ResponseTypeCateList }) => {
+    const { cateList } = props
+
+    return (
+        <>
+        <main>
+            <Header {...cateList} />
+            <div className={style.mvAboutPage}>
+                <div className={style.banner}></div>
+                <div className={style.section}>
+                    <div className={`${style.cons} boxsiz w1226 row bothSide`}>
+                        <div className={style.left}>
+                            <div className={`${style.title} boxsiz`}><span>关于我们</span></div>
+                            <p>
+                                麒麟电子商城（www.chiplinks.net）<br />
+                                我们是一家小型的电子元器件商城 <br />
+                                我们是龙年诞生哒！<br />
+                                我们想为朋友们提供一些帮助，<br />
+                                虽然可能只是一点点，<br />
+                                但请给予我们小小的机会，<br />
+                                请相信我们，<br />
+                                我们会竭尽全力地成长，<br />
+                                成为你们希望的模样哦！
+                            </p>
+                        </div>
+                        <img src="/images/aboutad.png" alt="" />
+                    </div>
+                </div>
+            </div>
+
+            <Footer />
+        </main>
+
+
+
+        </>
+    )
+}
+
+export default Page
\ No newline at end of file

pages/address/component/index.module.min.css

+.invoiceBox{width:1022px;margin-left:12px;box-sizing:border-box;background:#fff;padding:20px 30px 100px;position:relative}.invoiceBox .invoiceTitle{font-size:16px;height:32px;color:#1A1A1A;line-height:21px;width:100%;border-bottom:1px solid #F4F4F4}.invoiceBox .invoiceButton{left:120px;top:18px;position:absolute;width:80px;height:26px;background:#FFFFFF;border-radius:1px;color:#FF9A00;border:1px solid #FF9A00;cursor:pointer}.invoiceBox .invoiceButton:hover{color:#fff;background-color:#FF9A00}.invoiceBox .invoiceItem{height:240px;padding-top:20px;box-sizing:border-box;border-bottom:1px solid #F4F4F4}.invoiceBox .invoiceItem .invoiceStatus{width:100%;height:20px;display:flex;line-height:20px;text-align:center;justify-content:space-between}.invoiceBox .invoiceItem .invoiceStatus .invoiceCheck{display:flex;align-items:center}.invoiceBox .invoiceItem .invoiceStatus .invoiceCheck input{cursor:pointer;margin-right:8px}.invoiceBox .invoiceItem .invoiceStatus .rightPart{display:flex;align-items:center}.invoiceBox .invoiceItem .invoiceStatus .rightPart .editButton{width:75px;height:20px;font-size:12px;color:#595959;background:#FFFFFF;border-radius:1px;border:1px solid #B0B0B0;cursor:pointer}.invoiceBox .invoiceItem .invoiceStatus .rightPart .invalid{width:60px;height:20px;font-size:12px;color:#D0121B;background:#FDF5F5;border-radius:1px;margin-left:25px;border:1px solid #D0121B;cursor:pointer}.invoiceBox .invoiceItem .invoiceStatus .rightPart .invalid:hover{color:#fff;background-color:#D0121B}.invoiceBox .invoiceItem .invoiceDetail{margin-top:20px;font-size:14px;width:100%}.invoiceBox .invoiceItem .invoiceDetail .lineItem{width:calc(100% - 50px);margin-bottom:15px;margin-left:50px}.invoiceBox .pagination{position:absolute;right:30px;bottom:30px}.modalContent{padding:45px 0 !important;box-sizing:border-box;padding-top:15px}.modalContent :global .ant-form-item{margin-bottom:20px}.modalFooter{width:100%;display:flex;margin-top:40px;padding-bottom:25px;justify-content:space-around}.modalFooter .saveButton{width:195px;height:45px;color:#fff;background:#FF9A00;border-radius:1px;cursor:pointer}.modalFooter .cancelButton{width:195px;height:45px;color:#FF9A00;background:#fff;border-radius:1px;cursor:pointer;border:1px solid #FF9A00}

pages/address/component/index.module.scss

+.invoiceBox {
+    width: 1022px;
+    margin-left: 12px;
+    box-sizing: border-box;
+    background: #fff;
+    padding: 20px 30px 100px;
+    position: relative;
+
+    .invoiceTitle {
+        font-size: 16px;
+        height: 32px;
+        color: #1A1A1A;
+        line-height: 21px;
+        width: 100%;
+        border-bottom: 1px solid #F4F4F4;
+    }
+
+    .invoiceButton {
+        left: 120px;
+        top: 18px;
+        position: absolute;
+        width: 80px;
+        height: 26px;
+        background: #FFFFFF;
+        border-radius: 1px;
+        color: #FF9A00;
+        border: 1px solid #FF9A00;
+        cursor: pointer;
+
+        &:hover {
+            color: #fff;
+            background-color: #FF9A00;
+        }
+    }
+
+    .invoiceItem {
+        height: 240px;
+        padding-top: 20px;
+        box-sizing: border-box;
+        border-bottom: 1px solid #F4F4F4;
+
+        .invoiceStatus {
+            width: 100%;
+            height: 20px;
+            display: flex;
+            line-height: 20px;
+            text-align: center;
+            justify-content: space-between;
+
+            .invoiceCheck {
+                display: flex;
+                align-items: center;
+
+                input {
+                    cursor: pointer;
+                    margin-right: 8px;
+                }
+            }
+
+            .rightPart {
+                display: flex;
+                align-items: center;
+
+                .editButton {
+                    width: 75px;
+                    height: 20px;
+                    font-size: 12px;
+                    color: #595959;
+                    background: #FFFFFF;
+                    border-radius: 1px;
+                    border: 1px solid #B0B0B0;
+                    cursor: pointer;
+                }
+    
+                .invalid {
+                    width: 60px;
+                    height: 20px;
+                    font-size: 12px;
+                    color: #D0121B;
+                    background: #FDF5F5;
+                    border-radius: 1px;
+                    margin-left: 25px;
+                    border: 1px solid #D0121B;
+                    cursor: pointer;
+
+                    &:hover {
+                        color: #fff;
+                        background-color: #D0121B;
+                    }
+                }
+            }
+        }
+        .invoiceDetail {
+            margin-top: 20px;
+            font-size: 14px;
+            width: 100%;
+
+            .lineItem {
+                width: calc(100% - 50px);
+                margin-bottom: 15px;
+                margin-left: 50px;
+            }
+        }
+    }
+
+    .pagination {
+        position: absolute;
+        right: 30px;
+        bottom: 30px;
+    }
+}
+
+.modalContent {
+    padding: 45px 0!important;
+    box-sizing: border-box;
+    padding-top: 15px;
+    :global {
+       .ant-form-item {
+          margin-bottom:20px;
+       }
+    }
+}
+
+.modalFooter {
+    width: 100%;
+    display: flex;
+    margin-top: 40px;
+    padding-bottom: 25px;
+    justify-content: space-around;
+
+    .saveButton {
+        width: 195px;
+        height: 45px;
+        color: #fff;
+        background: #FF9A00;
+        border-radius: 1px;
+        cursor: pointer;
+    }
+    .cancelButton {
+        width: 195px;
+        height: 45px;
+        color: #FF9A00;
+        background: #fff;
+        border-radius: 1px;
+        cursor: pointer;
+        border: 1px solid #FF9A00;
+    }
+}
\ No newline at end of file

pages/address/index.module.min.css

+.userCenter{padding:10px;width:1226px;margin:0 auto;display:flex}

pages/address/index.module.scss

+.userCenter {
+    padding: 10px;
+    width: 1226px;
+    margin: 0 auto;
+    display: flex;
+}

pages/address/index.tsx

+
+import Footer from "@/components/Footer";
+import Header from "@/components/Header";
+import Nav from "@/components/navigation";
+import style from './index.module.scss'
+import { GetServerSideProps } from 'next';
+import { getCateList } from "@/server/getCateList";
+import BasicData from './component'
+import type {ResponseTypeCateList} from '@/components/Header/components/NavBig/types'
+
+export const getStaticProps: GetServerSideProps = async () => {
+    return getCateList()
+}
+
+const Page = (props:{cateList:ResponseTypeCateList}) => {
+    const {cateList}=props
+
+    return (
+        <> 
+            <Header {...cateList}/>
+            <div className={style.userCenter}>
+                <Nav></Nav>
+                <BasicData/>
+            </div>
+            <Footer />
+        </>
+    )
+}
+
+export default Page
\ No newline at end of file

pages/basicData/component/index.module.min.css

+.basicBox{width:1022px;margin-left:12px;box-sizing:border-box}.basicBox .basicModule{width:100%;height:265px;background-color:#fff;box-sizing:border-box;margin-bottom:10px;padding:20px 30px}.basicBox .basicModule .basicTitle{height:32px;font-size:16px;line-height:20px;border-bottom:1px solid #F4F4F4}.basicBox .basicModule .basicContent{padding:20px 30px;box-sizing:border-box;height:100%;display:flex;flex-direction:column;flex-wrap:wrap}.basicBox .basicModule .basicContent .basicItem{width:calc(50% - 5px);display:inline-flex;height:40px;align-items:center}.basicBox .basicModule .basicContent .basicItem .basicButton{width:75px;font-size:12px;height:20px;color:#595959;background:#FFFFFF;border-radius:1px;border:1px solid #B0B0B0;margin-left:10px;cursor:pointer}.basicBox .basicModule .basicContent .basicItem .basicButton:hover{color:#000}.basicBox .basicModule .basicInput{width:99px;height:30px;background:#FFFFFF;border-radius:2px;border:1px solid #000000;padding-left:5px}.basicBox .basicModule .basicConfirm{width:75px;height:20px;font-size:12px;color:#FF9A00;background:#FFF7EC;border-radius:1px;margin-left:5px;border:1px solid #FF9A00}.basicBox .basicHeight{height:340px}.editBox{width:1022px;height:630px;margin-left:12px;box-sizing:border-box;background-color:#fff;display:flex;flex-direction:column;justify-content:center;align-items:center}.editBox .editTitle{width:400px;font-size:20px;margin-bottom:80px;margin-top:-60px;text-align:center}.editBox .editInput{width:400px;height:45px;border-radius:1px;border:1px solid #e0e0e0;padding:0 50px 0 20px;box-sizing:border-box}.editBox .editInput:focus{border:1px solid #000}.editBox .editType{width:400px;height:45px;background:#F4F4F4;border-radius:1px;margin-bottom:25px;color:#808080;display:flex;align-items:center;position:relative}.editBox .editType .typeLeft{width:70px;height:23px;line-height:23px;text-align:center;position:relative;border-right:1px solid #E2E2E2}.editBox .editType .typRight{padding-left:20px}.editBox .editLines{margin-bottom:25px;position:relative}.editBox .editButtons{margin-top:55px}.editBox .inputButton{position:absolute;top:13px;right:15px;font-size:14px;color:#1969F9;cursor:pointer}.editBox .inputButton.dis{cursor:not-allowed;color:#999}.editBox .comfirmButton{font-size:14px;color:#FFFFFF;width:195px;height:45px;background:#FF9A00;border-radius:1px;margin-right:10px;cursor:pointer}.editBox .comfirmButton:hover{background:#E18800}.editBox .cancelButton{width:195px;height:45px;font-size:14px;color:#FF9A00;border-radius:1px;border:1px solid #FF9A00;cursor:pointer;background-color:#fff}.editBox .cancelButton:hover{background:#FFF7EC}

pages/basicData/component/index.module.scss

+.basicBox {
+    width: 1022px;
+    margin-left: 12px;
+    box-sizing: border-box;
+
+    .basicModule {
+        width: 100%;
+        height: 265px;
+        background-color: #fff;
+        box-sizing: border-box;
+        margin-bottom: 10px;
+        padding: 20px 30px;
+
+        .basicTitle {
+            height: 32px;
+            font-size: 16px;
+            line-height: 20px;
+            border-bottom: 1px solid #F4F4F4;
+        }
+
+        .basicContent {
+            padding: 20px 30px;
+            box-sizing: border-box;
+            height: 100%;
+            display: flex;
+            flex-direction: column;
+            flex-wrap: wrap;
+
+            .basicItem {
+                width: calc(50% - 5px);
+                display: inline-flex;
+                height: 40px;
+                align-items: center;
+
+                .basicButton {
+                    width: 75px;
+                    font-size: 12px;
+                    height: 20px;
+                    color: #595959;
+                    background: #FFFFFF;
+                    border-radius: 1px;
+                    border: 1px solid #B0B0B0;
+                    margin-left: 10px;
+                    cursor: pointer;
+
+                    &:hover {
+                        color: #000;
+                    }
+                }
+            }
+        }
+
+        .basicInput {
+            width: 99px;
+            height: 30px;
+            background: #FFFFFF;
+            border-radius: 2px;
+            border: 1px solid #000000;
+            padding-left: 5px;
+        }
+
+        .basicConfirm {
+            width: 75px;
+            height: 20px;
+            font-size: 12px;
+            color: #FF9A00;
+            background: #FFF7EC;
+            border-radius: 1px;
+            margin-left: 5px;
+            border: 1px solid #FF9A00;
+        }
+    }
+
+    .basicHeight {
+        height: 340px;
+    }
+}
+.editBox {
+    width: 1022px;
+    height: 630px;
+    margin-left: 12px;
+    box-sizing: border-box;
+    background-color: #fff;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+
+    .editTitle {
+        width: 400px;
+        font-size: 20px;
+        margin-bottom: 80px;
+        margin-top: -60px;
+        text-align: center;
+    }
+
+    .editInput {
+        width: 400px;
+        height: 45px;
+        border-radius: 1px;
+        border: 1px solid #e0e0e0;
+        padding: 0 50px 0 20px;
+        box-sizing: border-box;
+        &:focus{border: 1px solid #000;}
+    }
+
+    .editType {
+        width: 400px;
+        height: 45px;
+        background: #F4F4F4;
+        border-radius: 1px;
+        margin-bottom: 25px;
+        color: #808080;
+        display: flex;
+        align-items: center;
+        position: relative;
+        
+        .typeLeft {
+            width: 70px;
+            height: 23px;
+            line-height: 23px;
+            text-align: center;
+            position: relative;
+            border-right: 1px solid #E2E2E2;
+        }
+        .typRight {
+            padding-left: 20px;
+        }
+    }
+    .editLines {
+        margin-bottom: 25px;
+        position: relative;
+       
+    }
+
+    .editButtons {
+        margin-top: 55px;
+    }
+
+    .inputButton {
+        position: absolute;
+        top: 13px;
+        right: 15px;
+        font-size: 14px;
+        color: #1969F9;
+        cursor: pointer;
+        &.dis{
+            cursor: not-allowed;
+            color:#999;
+        }
+    }
+
+   
+   
+
+    .comfirmButton {
+        font-size: 14px;
+        color: #FFFFFF;
+        width: 195px;
+        height: 45px;
+        background: #FF9A00;
+        border-radius: 1px;
+        margin-right: 10px;
+        cursor: pointer;
+        &:hover {
+            background: #E18800;
+        }
+    }
+
+    .cancelButton {
+        width: 195px;
+        height: 45px;
+        font-size: 14px;
+        color: #FF9A00;
+        border-radius: 1px;
+        border: 1px solid #FF9A00;
+        cursor: pointer;
+        background-color: #fff;
+        &:hover {
+            background: #FFF7EC;
+        }
+    }
+}
\ No newline at end of file

pages/basicData/index.module.scss

+.userCenter {
+    padding: 10px;
+    width: 1226px;
+    margin: 0 auto;
+    display: flex;
+}
\ No newline at end of file

pages/basicData/index.tsx

+
+import Footer from "@/components/Footer";
+import Header from "@/components/Header";
+import Nav from "@/components/navigation";
+import style from './index.module.scss'
+import { GetServerSideProps } from 'next';
+import { getCateList } from "@/server/getCateList";
+import BasicData from './component/basicData'
+import type {ResponseTypeCateList} from '@/components/Header/components/NavBig/types'
+
+export const getStaticProps: GetServerSideProps = async () => {
+    return getCateList()
+}
+
+
+
+const Page = (props:{cateList:ResponseTypeCateList}) => {
+    const {cateList}=props
+
+    return (
+        <> 
+            <Header {...cateList}/>
+            <div className={style.userCenter}>
+                <Nav></Nav>
+                <BasicData/>
+            </div>
+            <Footer />
+        </>
+    )
+}
+
+export default Page
\ No newline at end of file

pages/brand/[brand_id].tsx

+import styles from './index.module.scss'
+
+import BreadNav from '@/components/BreadNav';
+import ListSort from '@/components/ListSort';
+import { useEffect, useRef, useState } from 'react';
+
+import type { ListSortType } from '@/components/ListSort/types'
+import type { dataListItemType } from '@/components/ListOneItem/types'
+import type { brandResponseType, requestDataType, brandInfoResponseType } from '@/types/brandTypes'
+import ListOneItem from '@/components/ListOneItem';
+import useRequest from '@/hooks/useRequest';
+
+
+import { useRouter } from 'next/router';
+
+
+import Footer from "@/components/Footer";
+import Header from "@/components/Header";
+import { GetServerSideProps } from 'next';
+import { getBrandListData } from "@/server/getBrandListData";
+import type { ResponseTypeCateList } from '@/components/Header/components/NavBig/types'
+
+import { useQq } from '@/hooks/useQq';
+import { Empty,Pagination } from 'antd';
+
+export const getServerSideProps: GetServerSideProps = async (context) => {
+    const { query } = context;
+    return getBrandListData(query.brand_id)
+}
+
+const Page = (props: { cateList: ResponseTypeCateList,brandInfoData:brandInfoResponseType }) => {
+    const { QQURL,PHONE}=useQq()
+    const router = useRouter()
+    const { query } = router
+   
+    const brandInfo=props.brandInfoData.data
+    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>({
+        sortType: 1,
+        isStock: false,
+        stockSort: '',
+        priceSort: ''
+    })
+
+    const { request: brandListRequest } = useRequest<brandResponseType>({ manual: true })
+    const shouldResetPage = useRef(false);
+
+    useEffect(() => {
+        shouldResetPage.current = true;
+        setPage(1);
+    }, [sortObj,query.brand_id]);
+    useEffect(() => {
+        if (shouldResetPage.current && page !== 1) {
+            return
+        }
+        shouldResetPage.current = false;
+
+        let obj_: requestDataType = { page_size: 10, page: page, standard_brand_id: query.brand_id }
+        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'
+
+        }
+        brandListRequest({
+            url: '/api/search/searchByBrand',
+            method: 'post',
+            data: obj_,
+        }).then(res => {
+            if (res?.code === 0) {
+                setTotal(Number(res.data?.total))
+                setDataList(res.data?.lists || [])
+                if (res.data?.lists.length > 0) {
+                    setShouNoData(false)
+                } else {
+                    setShouNoData(true)
+                }
+            } else {
+                setShouNoData(true)
+            }
+        })
+    }, [brandListRequest, query.brand_id, page, sortObj])
+
+    const handlePageChange = (page:number, pageSize:number) => {
+        setPage(page)
+       
+    }
+
+
+
+
+    return (
+        <>
+            <main>
+                <Header {...props.cateList} />
+                <BreadNav><strong>&quot;{brandInfo?.brand_name}&quot;的型号搜索结果</strong></BreadNav>
+                <div className={`${styles.mvBrandlistPage} w1226`}  >
+                    <div className={`${styles.brandheadsl} row boxsiz`}>
+                        <img src={brandInfo?.brand_logo || '/images/default.jpg'} alt='' className={styles.brandimg} />
+                        <div className={styles.brandInfo} >
+                            <h2>{brandInfo?.brand_name}</h2>
+                            <div className={styles.textBf}>
+                                {brandInfo?.brand_desc}
+                            </div>
+                            {/* <div className='brandbox row '>
+                            <span>分类：</span>
+                            <div className='itembox row'>
+                                <div className='item'>逻辑芯片（200）</div>
+                                <div className='item'>逻辑芯片（200）</div>
+                            </div>
+                        </div> */}
+                        </div>
+                    </div>
+                    <div className={styles.databox}>
+
+                        <div className={styles.dataGroupSupplier}>
+                            <div className={styles.sortbixjk}>
+                                <ListSort sortObj={sortObj} setSortObj={setSortObj} />
+                            </div>
+                            {
+                                dataList.map(item => {
+                                    return (
+                                        <ListOneItem key={item.sku_id} {...item} QQURL={QQURL} PHONE={PHONE} />
+                                        
+                                    )
+                                })
+                            }
+                            {shouNoData ? <Empty image='/images/emptyorder.png' description="数据为空！" imageStyle={{height: '183px', margin: '30px auto 0'}} /> : ''}
+                        </div>
+                        <Pagination 
+                            className='paginationxkant'
+                            showQuickJumper
+                            showSizeChanger
+                            hideOnSinglePage={true}
+                            current={page}
+                            pageSize={10}
+                            pageSizeOptions={[5, 10]}
+                            total={total} 
+                            showTotal={(total) => `共 ${total} 条记录`}
+                            onChange={handlePageChange}/>
+                    </div>
+                </div>
+                <Footer />
+            </main>
+
+
+
+
+        </>
+    )
+
+}
+
+export default Page
\ No newline at end of file

pages/brand/index.module.min.css

+.mvBrandlistPage{margin-bottom:56px}.mvBrandlistPage .brandheadsl{min-height:275px;background:#fff;padding:26px 60px}.mvBrandlistPage .brandheadsl .brandimg{width:222px;height:222px;background:#FFFFFF;border:1px solid #EDEFEF;margin-right:60px}.mvBrandlistPage .brandheadsl .brandinfo{width:822px}.mvBrandlistPage .brandheadsl .brandinfo h2{font-weight:bold;font-size:22px;color:#000000;line-height:29px;text-align:center;margin-bottom:20px}.mvBrandlistPage .brandheadsl .brandinfo .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}.mvBrandlistPage .brandheadsl .brandinfo .brandbox span{font-size:12px;color:#888;line-height:20px;width:80px;flex-shrink:0}.mvBrandlistPage .brandheadsl .brandinfo .brandbox .itembox{flex-wrap:wrap}.mvBrandlistPage .brandheadsl .brandinfo .brandbox .itembox .item{height:20px;line-height:20px;font-size:12px;color:#000000;margin-right:40px;margin-bottom:15px}.mvBrandlistPage .databox{padding-top:24px}.mvBrandlistPage .databox .dataGroupSupplier{padding-bottom:20px;background:#fff;min-height:400px}.mvBrandlistPage .databox .dataGroupSupplier .sortbixjk{padding:0 27px;padding-top:25px}

pages/brand/index.module.scss

+.mvBrandlistPage{
+    margin-bottom: 56px;
+    .brandheadsl{
+        min-height: 275px;
+        background: #fff;
+        padding:26px 60px;
+        .brandimg{
+            width: 222px;
+            height: 222px;
+            background: #FFFFFF;
+            border: 1px solid #EDEFEF;
+            margin-right: 60px;
+        }
+        .brandinfo{
+            width:822px;
+            h2{
+                font-weight: bold;
+                font-size: 22px;
+                color: #000000;
+                line-height: 29px;
+                text-align: center;
+                margin-bottom: 20px;
+            }
+            .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;
+            }
+            .brandbox{
+               span{
+                font-size: 12px;
+                color: #888;
+                line-height: 20px;
+                width:80px;
+                flex-shrink: 0;
+               }
+                .itembox{
+                    flex-wrap: wrap;
+                    .item{
+                        height:20px;
+                        line-height: 20px;
+                        font-size: 12px;
+                        color: #000000;
+                        margin-right: 40px;
+                        margin-bottom: 15px;
+                    }
+                }
+            }
+        }
+    }
+    .databox{
+        padding-top: 24px;
+        
+        .dataGroupSupplier{
+            padding-bottom: 20px;
+            background: #fff;
+            min-height: 400px;
+            .sortbixjk{
+                padding:0 27px;
+                padding-top: 25px;
+            }
+        }
+
+
+        
+        
+    }
+   
+}
\ No newline at end of file

pages/brands.html/index.module.min.css

+.mvBrandPage{padding-top:63px;margin-bottom:98px}.mvBrandPage .section{margin-bottom:70px}.mvBrandPage .section .title{text-align:center;font-size:24px;color:#000000;line-height:31px;margin-bottom:45px}.mvBrandPage .section .title img{display:block;margin:0  auto;margin-top:2px}.mvBrandPage .section .itembox{flex-wrap:wrap}.mvBrandPage .section .itembox .item{width:233px;height:80px;margin-bottom:15px;transition:all 0.5s;margin-right:15px;background:#fff}.mvBrandPage .section .itembox .item:nth-child(5n){margin-right:0px}.mvBrandPage .section .itembox .item:hover{box-shadow:4px 6px 7px 1px rgba(154,151,149,0.18);transform:translateY(-1px)}.mvBrandPage .section .itembox .item img{width:233px;height:80px;object-fit:contain;transform:scale(0.8)}

pages/brands.html/index.module.scss

+.mvBrandPage{
+    padding-top: 63px;
+    margin-bottom: 98px;
+    .section{
+        margin-bottom: 70px;
+        .title{
+            text-align: center;
+            font-size: 24px;
+            color: #000000;
+            line-height: 31px;
+            margin-bottom: 45px;
+            img{
+                display: block;
+                margin:0  auto;
+                margin-top: 2px;
+            }
+        }
+        .itembox{
+            flex-wrap: wrap;
+            .item{
+                width: 233px;
+                height: 80px;
+                margin-bottom: 15px;
+                transition: all 0.5s;
+                margin-right: 15px;
+                background: #fff;
+                &:nth-child(5n){
+                    margin-right: 0px;
+                }
+                &:hover{
+                    box-shadow: 4px 6px 7px 1px rgba(154,151,149,0.18);
+                    transform: translateY(-1px);
+                }
+                img{
+                    width: 233px;
+                    height: 80px;
+                    object-fit: contain;
+                    transform: scale(0.8);
+                }
+                
+            }
+        }
+    }
+}
\ No newline at end of file

pages/brands.html/index.tsx

+import styles from './index.module.scss'
+import Footer from "@/components/Footer";
+import Header from "@/components/Header";
+
+import { GetServerSideProps } from 'next';
+import { getBrandMapData } from "@/server/getBrandMapData";
+
+
+import type { ResponseTypeCateList } from '@/components/Header/components/NavBig/types'
+import type { brandMapResponseType } from '@/types/brandMapTypes';
+import Link from 'next/link';
+
+export const getServerSideProps: GetServerSideProps = async () => {
+    return getBrandMapData()
+}
+const BrandMap = (props: { cateList: ResponseTypeCateList, brandMapData: brandMapResponseType }) => {
+    const more_brand_list = props.brandMapData.data.more_brand_list
+    const popular_brand_list = props.brandMapData.data.popular_brand_list
+    return (
+        <>
+            <main>
+                <Header {...props.cateList} />
+
+                <div className={styles.mvBrandPage}>
+
+                    <div  className={`${styles.section} w1226`}>
+                        <div  className={styles.title}>
+                            热门品牌
+                            <img src='/images/Popular.png' alt="" />
+                        </div>
+                        <div className={`${styles.itembox} row`}>
+                            {
+                                more_brand_list.map((item, index) => {
+                                    return (
+                                        <Link href={`/brand/${item.goods_brand_id}.html`}  className={styles.item} key={index + String(item.goods_brand_id)}>
+                                            <img src={item.brand_logo} alt={item.brand_name} />
+                                        </Link>
+                                    )
+
+                                })
+                            }
+
+                        </div>
+                    </div>
+                    <div  className={`${styles.section} w1226`}>
+                        <div  className={styles.title}>
+                            更多品牌
+                            <img src='images/More.png' alt="" />
+                        </div>
+                        <div className={`${styles.itembox} row`}>
+                            {
+                                popular_brand_list.map((item, index) => {
+                                    return (
+                                        <Link href={`/brand/${item.goods_brand_id}.html`} className={styles.item} key={index + String(item.goods_brand_id)}>
+                                            <img src={item.brand_logo} alt={item.brand_name} />
+                                        </Link>
+                                    )
+
+                                })
+                            }
+
+                        </div>
+                    </div>
+                </div>
+
+                <Footer />
+            </main>
+
+
+        </>
+
+    )
+
+}
+
+export default BrandMap
\ No newline at end of file

pages/contact.html/index.module.min.css

+.mvContactPage .banner{height:231px;background:url(../../public/images/contactUsBanner.png) no-repeat top center}.mvContactPage .section{background:#fff}.mvContactPage .section .cons{padding:0 143px;padding-top:111px;padding-bottom:119px}.mvContactPage .section .cons .left .title{border-bottom:1px solid #E7E7E7;font-weight:bold;font-size:20px;color:#313131}.mvContactPage .section .cons .left .title span{display:inline-block;position:relative;border-bottom:3px solid #00C69F;padding-bottom:22px;top:2px}.mvContactPage .section .cons .left .lxbox{padding-top:30px;margin-bottom:25px}.mvContactPage .section .cons .left .lxbox span{width:44px;height:44px;border:1px solid #00C69F;margin-right:33px}.mvContactPage .section .cons .left .lxbox span i{color:#00C69F;font-size:40px}.mvContactPage .section .cons .left .lxbox span i.font30{font-size:22px}.mvContactPage .section .cons .left .lxbox .rxs{font-size:16px;color:#888888}.mvContactPage .section .cons .left .lxbox .rxs p{color:#000000;font-weight:bold;margin-top:7px}.mvContactPage .section .cons img{width:245px;height:245px;position:relative;top:58px}

pages/contact.html/index.module.scss

+.mvContactPage{
+    .banner{
+        height:231px;
+        background: url(../../public/images/contactUsBanner.png) no-repeat top center;
+    }
+    .section{
+        background: #fff;
+        .cons{
+            padding: 0 143px;
+            padding-top: 111px;
+            padding-bottom: 119px;
+            .left{
+                // width: 267px;
+                .title{
+                    border-bottom: 1px solid #E7E7E7;
+                    font-weight: bold;
+                    font-size: 20px;
+                    color: #313131;
+                    span{
+                        display: inline-block;
+                        position: relative;
+                        border-bottom: 3px solid #00C69F;
+                        padding-bottom: 22px;
+                        top:2px;
+                    }
+                }
+                .lxbox{
+                    padding-top: 30px;
+                    margin-bottom: 25px;
+                    span{
+                        width:44px;
+                        height:44px;
+                        border:1px solid #00C69F;
+                        i{
+                            color:#00C69F;
+                            font-size: 40px;
+                            &.font30{
+                                font-size: 22px;
+                            }
+                        }
+                        margin-right: 33px;
+                    }
+                    .rxs{
+                        font-size: 16px;
+                        color: #888888;
+                        p{
+                            color:#000000;
+                            font-weight: bold;
+                            margin-top: 7px;
+                        }
+                    }
+                }
+            }
+            img{
+                width: 245px;
+                height: 245px;
+                position: relative;
+                top:58px;
+            }
+        }
+    }
+}
\ No newline at end of file

pages/contact.html/index.tsx

+
+import styles from './index.module.scss'
+
+import Footer from "@/components/Footer";
+import Header from "@/components/Header";
+import { GetServerSideProps } from 'next';
+import { getCateList } from "@/server/getCateList";
+import type { ResponseTypeCateList } from '@/components/Header/components/NavBig/types'
+
+export const getServerSideProps: GetServerSideProps = async (context) => {
+    return getCateList()
+}
+
+const Page = (props: { cateList: ResponseTypeCateList }) => {
+    const { cateList } = props
+
+    return (
+        <>
+        <main>
+            <Header {...cateList} />
+            <div className={styles.mvContactPage}>
+                <div className={styles.banner}></div>
+                <div className={styles.section}>
+                    <div className={`${styles.cons} boxsiz w1226 row bothSide`}>
+                        <div className={styles.left}>
+                            <div className={`${styles.title} boxsiz`}><span>联系我们</span></div>
+                            <div className={`${styles.lxbox} boxsiz flex`}>
+                                <span className='row  verCenter rowCenter'><i className='icon iconfont icon-phone '></i></span>
+                                <div className={styles.rxs}>
+                                    热线<p>010-53680391</p>
+                                </div>
+                            </div>
+                            <div className={`${styles.lxbox}  flex`}>
+                                <span className='row  verCenter rowCenter'><i className='icon iconfont icon-email '></i></span>
+                                <div className={styles.rxs}>
+                                    邮箱<p>sales@chiplinks.net</p>
+                                </div>
+                            </div>
+                            <div className={`${styles.lxbox}  flex`}>
+                                <span className='row  verCenter rowCenter'><i className={`${styles.font30}  icon iconfont icon-dizhi`}></i></span>
+                                <div className={styles.rxs}>
+                                地址
+                                <p>北京：北京市丰台区榴乡路88号院2号楼2005室</p>
+                                <p> 廊坊：河北省廊坊市广阳区新开路街道永丰道122号新朝阳2期2号办公楼1603-1605室</p>      
+                                </div>
+                            </div>
+                             
+                        </div>
+                        <img src="/images/aboutad.png" alt="" />
+                    </div>
+                </div>
+            </div>
+
+            <Footer />
+        </main>
+
+
+
+        </>
+    )
+}
+
+export default Page
\ No newline at end of file

pages/customer/centerHome/index.module.min.css

+.centerBox{width:1022px;margin-left:12px;box-sizing:border-box}.centerBox .baseTitle{font-size:16px;color:#808080}.centerBox .headImgBox{cursor:pointer;width:130px;height:130px;border:1px solid #E0E0E0;margin:20px 30px;position:relative}.centerBox .headImgBox .headImgUptext{width:110px;height:110px;line-height:110px;text-align:center;background:rgba(83,83,83,0.75);border:1px solid #E0E0E0;position:absolute;left:10px;top:10px;color:#fff;font-size:12px;display:none;border-radius:110px}.centerBox .headImgBox:hover .headImgUptext{display:block}.centerBox .contentBox{width:100%;height:calc(100% - 60px);display:flex}.centerBox .basicBox{width:100%;height:226px;padding:20px 15px;background-color:#fff;box-sizing:border-box;position:relative}.centerBox .basicBox .headImg{width:130px;height:130px}.centerBox .basicBox .editButton{width:75px;height:20px;background:#FFFFFF;border-radius:1px;border:1px solid #B0B0B0;font-size:12px;color:#595959;cursor:pointer;margin-left:12px}.centerBox .basicBox .editButton:hover{color:#000000}.centerBox .basicBox .detailLines{margin-top:20px;font-size:14px;width:calc(100% - 150px)}.centerBox .basicBox .detailLines .lineItem{width:calc(50% - 5px);display:inline-block;margin-bottom:15px;color:#000}.centerBox .basicBox .detailLines .lineItem:nth-child(odd){margin-right:10px}.centerBox .basicBox .detailLines .linkItemone{color:#000;cursor:pointer;font-weight:bold}.centerBox .basicBox .detailLines .linkItemone:hover{color:#FF9A00}.centerBox .basicBox .myService{position:absolute;right:15px;top:15px;color:#808080;font-size:12px;cursor:pointer}.centerBox .basicBox .myService span{position:relative;top:-6px}.centerBox .basicBox .myService:hover span{color:#FF9A00}.centerBox .basicBox .myService img{margin-right:3px}.centerBox .bottomBox{display:flex;margin-top:10px}.centerBox .bottomBox .orderBox{width:660px;padding:30px 15px 100px;background-color:#fff;box-sizing:border-box;position:relative}.centerBox .bottomBox .orderBox :global .ant-table-container{border-top:0px !important}.centerBox .bottomBox .orderBox .statusBox{width:100%;height:114px;display:flex;box-sizing:border-box;margin-top:30px;margin-left:25px}.centerBox .bottomBox .orderBox .statusBox .statusItem{width:106px;height:100%;border-radius:18px;margin-right:20px;padding:15px;box-sizing:border-box;cursor:pointer}.centerBox .bottomBox .orderBox .statusBox .pendPreview{background:linear-gradient(348deg, #F4F5F8 0%, #F3F8FF 100%)}.centerBox .bottomBox .orderBox .statusBox .pendPay{background:linear-gradient(348deg, #FFF0EE 0%, #FBF8F6 100%)}.centerBox .bottomBox .orderBox .statusBox .pendDiliver{background:linear-gradient(348deg, #F9F4FC 0%, #FDF8FF 100%)}.centerBox .bottomBox .orderBox .statusBox .completed{background:linear-gradient(348deg, #F4F5F8 0%, #F3F8FF 100%)}.centerBox .bottomBox .orderBox .orderTitle{height:32px;line-height:20px;font-weight:bold;font-size:14px;color:#313131;text-decoration-line:underline;margin-top:25px;cursor:pointer}.centerBox .bottomBox .orderBox .orderTitle::after{content:"";display:block;width:100%;height:1px;margin-top:10px;background-color:#F4F4F4}.centerBox .bottomBox .infoBox{width:354px;padding:30px 15px;background-color:#fff;box-sizing:border-box;position:relative;margin-left:10px}.centerBox .bottomBox .infoBox .messageTable{margin-top:20px}.centerBox .bottomBox .moreButton{position:absolute;right:10px;top:30px;color:#888888;cursor:pointer}.centerBox .bottomBox .moreButton:hover{color:#FF9A00}.centerBox .pagination{position:absolute;right:30px;bottom:30px}

pages/customer/centerHome/index.module.scss

+.centerBox {
+    width: 1022px;
+    margin-left: 12px;
+    box-sizing: border-box;
+
+    .baseTitle {
+        font-size: 16px;
+        color: #808080;
+    }
+    .headImgBox{
+        cursor: pointer;
+        width: 130px;
+        height: 130px;
+        border: 1px solid #E0E0E0;
+        margin: 20px 30px;
+        position: relative;
+        .headImgUptext{
+            width: 110px;
+            height: 110px;
+            line-height: 110px;
+            text-align: center;
+            background: rgba(83,83,83,0.75);
+            border: 1px solid #E0E0E0;
+            position: absolute;
+            left:10px;
+            top:10px;
+            color:#fff;
+            font-size: 12px;
+            display: none;
+            border-radius: 110px;
+        }
+        &:hover{
+            .headImgUptext{display: block;}
+        }
+    }
+    
+    .contentBox {
+        width: 100%;
+        height: calc(100% - 60px);
+        display: flex;
+    }
+    
+    .basicBox {
+        width: 100%;
+        height: 226px;
+        padding: 20px 15px;
+        background-color: #fff;
+        box-sizing: border-box;
+        position: relative;
+
+        .headImg {
+            width: 130px;
+            height: 130px;
+        }
+        .editButton {
+            width: 75px;
+            height: 20px;
+            background: #FFFFFF;
+            border-radius: 1px;
+            border: 1px solid #B0B0B0;
+            font-size: 12px;
+            color: #595959;
+            cursor: pointer;
+            margin-left:12px;
+            &:hover {
+                color: #000000;
+            }
+        }
+        .detailLines {
+            margin-top: 20px;
+            font-size: 14px;
+            width: calc(100% - 150px);
+
+            .lineItem {
+                width: calc(50% - 5px);
+                display: inline-block;
+                margin-bottom: 15px;
+                color:#000;
+                &:nth-child(odd) {
+                    margin-right: 10px;
+                }
+            }
+            .linkItemone{
+                color:#000;
+                cursor: pointer;
+                font-weight: bold;
+                &:hover{
+                    color:#FF9A00;
+                }
+            }
+        }
+
+        .myService {
+            position: absolute; 
+            right: 15px;
+            top: 15px; 
+            color: #808080;
+            font-size: 12px;
+            cursor: pointer;
+            span{
+                position: relative;
+                top:-6px;
+            }
+            &:hover{
+                span{
+                    color:#FF9A00;
+                }
+            }
+            img{
+                margin-right: 3px;
+            }
+        }
+        
+    }
+
+    .bottomBox{
+        display: flex;
+        margin-top: 10px;
+        .orderBox {
+            width: 660px;
+            padding: 30px 15px 100px;
+            background-color: #fff;
+            box-sizing: border-box;
+            position: relative;
+            :global {
+                .ant-table-container{
+                    border-top:0px!important;
+                }
+             }
+            .statusBox {
+                width: 100%;
+                height: 114px;
+                display: flex;
+                box-sizing: border-box;
+                margin-top: 30px;
+                margin-left: 25px;
+
+                .statusItem {
+                    width: 106px;
+                    height: 100%;
+                    border-radius: 18px;
+                    margin-right: 20px;
+                    padding: 15px;
+                    box-sizing: border-box;
+                    cursor: pointer;
+                }
+
+                .pendPreview {
+                    background: linear-gradient( 348deg, #F4F5F8 0%, #F3F8FF 100%);
+                }
+
+                .pendPay {
+                    background: linear-gradient( 348deg, #FFF0EE 0%, #FBF8F6 100%);
+                }
+
+                .pendDiliver {
+                    background: linear-gradient( 348deg, #F9F4FC 0%, #FDF8FF 100%);
+                }
+
+                .completed {
+                    background: linear-gradient( 348deg, #F4F5F8 0%, #F3F8FF 100%);
+                }
+            }
+            
+            .orderTitle {
+                height: 32px;
+                line-height: 20px;
+                font-weight: bold;
+                font-size: 14px;
+                color: #313131;
+                text-decoration-line: underline;
+                margin-top: 25px;
+                cursor: pointer;
+                
+                &::after {
+                    content: "";
+                    display: block;
+                    width: 100%;
+                    height: 1px;
+                    margin-top: 10px;
+                    background-color: #F4F4F4;
+                }
+            }
+        }
+
+        .infoBox {
+            width: 354px;
+            padding: 30px 15px;
+            background-color: #fff;
+            box-sizing: border-box;
+            position: relative;
+            margin-left: 10px;
+
+            .messageTable {
+                margin-top: 20px;
+            }
+        }
+
+        .moreButton {
+            position: absolute;
+            right: 10px;
+            top: 30px;
+            color: #888888;
+            cursor: pointer;
+            &:hover{
+                color:#FF9A00;
+            }
+        }
+    }
+
+    .pagination {
+        position: absolute;
+        right: 30px;
+        bottom: 30px;
+    }
+}
\ No newline at end of file

pages/customer/index.module.scss

+.userCenter {
+    padding: 10px;
+    width: 1226px;
+    margin: 0 auto;
+    display: flex;
+}
\ No newline at end of file

pages/customer/index.tsx

+
+import Footer from "@/components/Footer";
+import Header from "@/components/Header";
+import Nav from "@/components/navigation";
+import style from './index.module.scss'
+import { GetServerSideProps } from 'next';
+import { getCateList } from "@/server/getCateList";
+import CenterHome from './centerHome/centerHome'
+import type {ResponseTypeCateList} from '@/components/Header/components/NavBig/types'
+
+export const getStaticProps: GetServerSideProps = async () => {
+    return getCateList()
+}
+
+
+const Page = (props:{cateList:ResponseTypeCateList}) => {
+    const {cateList}=props
+
+    return (
+        <> 
+            <Header {...cateList}/>
+            <div className={style.userCenter}>
+                <Nav></Nav>
+                <CenterHome/>
+            </div>
+            <Footer />
+        </>
+    )
+}
+
+export default Page
\ No newline at end of file

pages/index.tsx

+
+
+
+import Footer from "@/components/Footer";
+import Header from "@/components/Header";
+import HomeFloor1 from './index/components/HomeFloor1';
+import HomeFloor2 from './index/components/HomeFloor2';
+import HomeFloor3 from './index/components/HomeFloor3';
+import HomeBanner from './index/components/HomeBanner';
+
+import { GetServerSideProps } from 'next';
+import { getHomeData } from "../server/getHomeData";
+
+
+
+import type {ResponseTypeCateList} from '@/components/Header/components/NavBig/types'
+import type {ResponseTypeHome} from '@/types/indexTypes'
+
+
+const Page=(props:{cateList:ResponseTypeCateList,homepageList:ResponseTypeHome})=>{
+  const {cateList,homepageList}=props
+ 
+  return (
+    <main>
+      <Header {...cateList} />
+      <div className='indexPage'>
+                <div className='mvHomePage'>
+                    <HomeBanner />
+                    <HomeFloor1  {...homepageList!}/>
+                    <HomeFloor2  {...homepageList!}/>
+                    <HomeFloor3  {...homepageList!}/>
+                </div>
+            </div>
+                   
+       <Footer/>
+    </main>
+  );
+}
+
+
+
+
+//pro
+export const getServerSideProps: GetServerSideProps = async () => {
+   return getHomeData()
+}
+  
+
+export default Page
\ No newline at end of file

pages/index/components/HomeBanner.tsx

+
+import styles from '../index.module.scss'
+import { Swiper, SwiperSlide } from 'swiper/react';
+import { Autoplay, Pagination } from 'swiper/modules';
+import 'swiper/css';
+import 'swiper/css/pagination';
+import Image from 'next/image';
+
+const HomeBanner = () => {
+    const bannerList = [
+        {
+            title: '麒麟电子商城',
+            url: '/',
+            image: 'https://img.ichunt.com/images/cms/202407/23/bf5066643b4ea643b8384999f6a98215.jpg',
+        },
+        {
+            title: '麒麟电子商城',
+            url: '/',
+            image: 'https://img.ichunt.com/images/cms/202407/23/7e700a9a1b4b2066738fce110d22f8d7.jpg',
+        },
+    ]
+    return (
+        <>
+            <div className={`${styles.banneBox} w1226 boxsiz`}>
+                <div className={styles.swipers}>
+                    <Swiper
+
+                        modules={[Pagination, Autoplay]}
+                        spaceBetween={50}
+                        slidesPerView={1}
+                        pagination={{ clickable: true, }}
+                        autoplay={{ delay: 2500 }}
+                    >
+
+                        {
+                            bannerList.map((item, index) => {
+                                return (
+                                    <SwiperSlide key={index}>
+                                        <a href={item.url} key={index + item.title}>
+                                            <img src={item.image} alt={item.title} />
+                                        </a>
+                                    </SwiperSlide>
+
+                                )
+                            })
+                        }
+                    </Swiper>
+
+
+                </div>
+
+            </div>
+        </>
+    )
+
+}
+
+
+
+export default HomeBanner
\ No newline at end of file

pages/index/components/HomeFloor1.tsx

+
+import styles from '../index.module.scss'
+import Link from 'next/link';
+import type { ResponseTypeHome } from '@/types/indexTypes';
+
+const HomeFloor1 = (props: ResponseTypeHome) => {
+    const on_sale_list = props!.data?.on_sale_list || []
+  
+    return (
+        <>
+            <div className={`${styles.floor1} w1226 bothSide`}>
+                <div className={`${styles.cons} row bothSide`}>
+                    {
+                        on_sale_list.map(item => {
+                            return (
+                                <Link href={`/item/${item.sku_id}.html`} key={item.sku_id} className={`${styles.item} boxsiz row bothSide`}>
+                                    <img src={item.goods_images || '/images/default.jpg'} alt="" />
+                                    <div className={`${styles.rt} boxsiz `}>
+                                        <div className={styles.gos}>{item.sku_name}</div>
+                                        <div className={styles.nam}>{item.brand_name}</div>
+                                        <div className={styles.prs}>¥{item.single_price}</div>
+                                    </div>
+                                </Link>
+                            )
+                        })
+                    }
+
+                </div>
+
+                <Link href='/' className={styles.floor1ad}>
+                    <img src="https://img.ichunt.com/images/cms/202407/23/3f69491bab8057ee2411eb09c0fb4f39.jpg" alt="" />
+                </Link>
+            </div>
+        </>
+    )
+
+}
+
+export default HomeFloor1
\ No newline at end of file

pages/index/components/HomeFloor2.tsx

+import Link from 'next/link';
+import styles from '../index.module.scss'
+import type { ResponseTypeHome } from '@/types/indexTypes';
+const HomeFloor2 = (props: ResponseTypeHome) => {
+    const recommend_goods_list = props!.data?.recommend_goods_list || []
+    return (
+        <>
+            <div className={`${styles.floor2} w1226 boxsiz`}>
+                <div className={`${styles.title} row bothSide verCenter`}>
+                    <span>力推型号</span>
+                    {/* <Link to='/' className="more">更多<i className="icon iconfont icon-xiangyou1"></i></Link> */}
+                </div>
+                <div className={`${styles.itembox} row boxsiz bothSide`}>
+                    {
+                        recommend_goods_list.map(item => {
+                            return (
+                                <Link href={`/item/${item.sku_id}.html`}  className={`${styles.item} boxsiz`} key={item.sku_id}>
+                                    <img src={item.goods_images || '/images/default1.jpg'} alt="" />
+                                    <div className={styles.gos}>{item.sku_name}</div>
+                                    <div className='row bothSide'>
+                                        <div className={styles.nam}>{item.brand_name}</div>
+                                        <div className={styles.prs}>¥{item.single_price}</div>
+                                    </div>
+
+                                </Link>
+                            )
+                        })
+                    }
+
+
+                </div>
+            </div>
+        </>
+    )
+
+}
+
+export default HomeFloor2
\ No newline at end of file

pages/index/components/HomeFloor3.tsx

+
+import Link from 'next/link';
+import styles from '../index.module.scss'
+import type { ResponseTypeHome } from '@/types/indexTypes';
+
+const HomeFloor3 = (props: ResponseTypeHome) => {
+    const recommend_brand_list = props!.data?.recommend_brand_list || []
+    return (
+        <>
+            <div className={`${styles.floor3} boxsiz w1226`}>
+                <div className={`${styles.title} row bothSide verCenter`}>
+                    <span>推荐品牌</span>
+                    <Link href='/brands.html' className={styles.more}>更多<i className="icon iconfont icon-xiangyou1"></i></Link>
+                </div>
+                <div className={`${styles.itembox} row bothSide boxsiz`}>
+                    {
+                        recommend_brand_list.map(item => {
+                            return (
+                                <Link href={`/brand/${item.goods_brand_id}.html`} className={styles.item} key={item.goods_brand_id}>
+                                    <img src={item.brand_logo} alt="" />
+                                </Link>
+                            )
+                        })
+                    }
+
+                </div>
+            </div>
+        </>
+    )
+
+}
+
+export default HomeFloor3
\ No newline at end of file

pages/index/index.module.min.css

+.banneBox{padding-left:234px}.banneBox .swipers{height:460px;background:#ccc}.banneBox .swipers img{height:460px;width:992px}.banneBox .swipers .slick-dots{justify-content:end;bottom:17px;right:10px;left:auto}.banneBox .swipers .slick-dots li{width:6px;height:6px;border:1px solid #FFFFFF;border-radius:6px}.banneBox .swipers .slick-dots li.slick-active,.banneBox .swipers .slick-dots li:hover{background:#FFFFFF}.floor1{margin-top:20px}.floor1 .cons{height:252px}.floor1 .item{width:398px;height:252px;background:linear-gradient(155deg, #F6F6F6 0%, #E9F6FC 100%);border:1px solid #EDEFEF;cursor:pointer;transition:all 0.5s;padding:35px 20px}.floor1 .item:hover{box-shadow:4px 6px 7px 1px rgba(154,151,149,0.18);transform:translateY(-1px)}.floor1 .item:first-child{background:linear-gradient(155deg, #F6F6F6 0%, #FCF5E9 100%)}.floor1 .item:last-child{background:linear-gradient(147deg, #F6F6F6 0%, #FCE9E9 100%)}.floor1 .item img{width:182px;height:182px}.floor1 .item .rt{width:158px;height:182px;padding:20px 0}.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}.floor1 .item .rt .nam{font-weight:normal;font-size:16px;color:#000000;line-height:18px;text-overflow:ellipsis;overflow:hidden;height:18px}.floor1 .item .rt .prs{font-size:16px;color:#FF0006;line-height:18px;margin-top:12px}.floor1 .floor1ad{display:block;height:118px;margin-top:20px}.floor1 .floor1ad img{width:1226px;height:118px}.floor2{margin-top:50px}.floor2 .title{margin-bottom:30px}.floor2 .title span{font-size:24px;color:#000000;line-height:31px}.floor2 .title .more{font-size:16px;color:#888888}.floor2 .title .more:hover{color:#FF9A00}.floor2 .itembox{flex-wrap:wrap}.floor2 .itembox .item{padding:34px 18px;width:233px;height:330px;background:#FFFFFF;transition:all 0.5s;margin-bottom:10px}.floor2 .itembox .item:hover{box-shadow:4px 6px 7px 1px rgba(154,151,149,0.18);transform:translateY(-1px)}.floor2 .itembox .item img{width:150px;height:109px;display:block;margin:0 auto;margin-bottom:60px}.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}.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}.floor2 .itembox .item .prs{font-size:16px;color:#FF0006;line-height:18px}.floor3{margin-top:50px;margin-bottom:65px}.floor3 .title{margin-bottom:30px}.floor3 .title span{font-size:24px;color:#000000;line-height:31px}.floor3 .title .more{font-size:16px;color:#888888}.floor3 .title .more:hover{color:#FF9A00}.floor3 .itembox{flex-wrap:wrap}.floor3 .itembox .item{width:233px;height:80px;transition:all 0.5s;margin-bottom:15px;background:#fff}.floor3 .itembox .item:hover{box-shadow:4px 6px 7px 1px rgba(154,151,149,0.18);transform:translateY(-1px)}.floor3 .itembox .item img{width:233px;height:80px;object-fit:contain;transform:scale(0.8)}

pages/index/index.module.scss

+.banneBox{
+    padding-left: 234px;
+    .swipers{
+        height:460px;
+        background: #ccc;
+        img{
+            height:460px;
+            width:992px;
+        }
+        .slick-dots{
+            justify-content: end;
+            bottom:17px;
+            right:10px;
+            left:auto;
+            li{
+                width: 6px;
+                height: 6px;
+                border: 1px solid #FFFFFF;
+                border-radius: 6px;
+                &.slick-active,&:hover{
+                    background: #FFFFFF;
+                }
+            }
+        }
+    }
+}
+.floor1{
+    
+    margin-top: 20px;
+    .cons{
+        height:252px;
+    }
+    .item{
+        width: 398px;
+        height: 252px;
+        background: linear-gradient( 155deg, #F6F6F6 0%, #E9F6FC 100%);
+        border: 1px solid #EDEFEF;
+        cursor: pointer;
+        transition: all 0.5s;
+        &:hover{
+            box-shadow: 4px 6px 7px 1px rgba(154,151,149,0.18);
+            transform: translateY(-1px);
+        }
+        &:first-child{
+            background: linear-gradient( 155deg, #F6F6F6 0%, #FCF5E9 100%);
+        }
+        &:last-child{
+            background: linear-gradient( 147deg, #F6F6F6 0%, #FCE9E9 100%);
+        }
+        padding:35px 20px;
+        img{
+            width:182px;
+            height:182px;
+        }
+        .rt{
+            width:158px;
+            height:182px;
+            padding:20px 0;
+            .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;
+            }
+            .nam{
+                font-weight: normal;
+                font-size: 16px;
+                color: #000000;
+                line-height: 18px;
+                text-overflow: ellipsis;
+                overflow: hidden;
+                height:18px;
+            }
+            .prs{
+                font-size: 16px;
+                color: #FF0006;
+                line-height: 18px;
+                margin-top: 12px;
+            }
+        }
+    }
+    .floor1ad{
+        display: block;
+        height: 118px;
+        margin-top: 20px;
+        img{
+            width:1226px;
+            height: 118px;
+        }
+    }
+}
+
+.floor2{
+    margin-top: 50px;
+    .title{
+        margin-bottom: 30px;
+        span{
+            font-size: 24px;
+            color: #000000;
+            line-height: 31px;
+        }
+        .more{
+            font-size: 16px;
+            color: #888888;
+            &:hover{
+                color:#FF9A00;
+            }
+        }
+    }
+    .itembox{
+        flex-wrap: wrap;
+        .item{
+            padding: 34px 18px;
+            width: 233px;
+            height: 330px;
+            background: #FFFFFF;
+            transition: all 0.5s;
+            margin-bottom: 10px;
+            &:hover{
+                box-shadow: 4px 6px 7px 1px rgba(154,151,149,0.18);
+                transform: translateY(-1px);
+            }
+            img{
+                width: 150px;
+                height: 109px;
+                display: block;
+                margin:  0 auto;
+                margin-bottom: 60px;
+            }
+            .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;
+            }
+            .nam{
+                font-weight: normal;
+                font-size: 16px;
+                color: #000000;
+                line-height: 18px;
+                text-overflow: ellipsis;
+                overflow: hidden;
+                height:18px;
+                max-width: 110px;
+            }
+            .prs{
+                font-size: 16px;
+                color: #FF0006;
+                line-height: 18px;
+            }
+        }
+    }
+}
+.floor3{
+    margin-top: 50px;
+    margin-bottom: 65px;
+    .title{
+        margin-bottom: 30px;
+        span{
+            font-size: 24px;
+            color: #000000;
+            line-height: 31px;
+        }
+        .more{
+            font-size: 16px;
+            color: #888888;
+            &:hover{
+                color:#FF9A00;
+            }
+        }
+    }
+    .itembox{
+        flex-wrap: wrap;
+        .item{
+            width: 233px;
+            height: 80px;
+            transition: all 0.5s;
+            margin-bottom: 15px;
+            background: #fff;
+            &:hover{
+                box-shadow: 4px 6px 7px 1px rgba(154,151,149,0.18);
+                transform: translateY(-1px);
+            }
+            img{
+                width: 233px;
+                height: 80px;
+                object-fit: contain;
+                transform: scale(0.8);
+            }
+          
+        }
+    }
+}
\ No newline at end of file

pages/invoice/component/index.module.min.css

+.invoiceBox{width:1022px;margin-left:12px;box-sizing:border-box;background:#fff;padding:20px 30px 100px;position:relative}.invoiceBox .invoiceTitle{font-size:16px;height:32px;color:#1A1A1A;line-height:21px;width:100%;border-bottom:1px solid #F4F4F4}.invoiceBox .invoiceButton{left:120px;top:18px;position:absolute;width:80px;height:26px;background:#FFFFFF;border-radius:1px;color:#FF9A00;border:1px solid #FF9A00;cursor:pointer}.invoiceBox .invoiceButton:hover{color:#fff;background-color:#FF9A00}.invoiceBox .invoiceItem{padding-top:20px;padding-bottom:5px;box-sizing:border-box;border-bottom:1px solid #F4F4F4}.invoiceBox .invoiceItem .invoiceStatus{width:100%;height:20px;display:flex;line-height:20px;text-align:center;justify-content:space-between}.invoiceBox .invoiceItem .invoiceStatus .invoiceCheck{display:flex;align-items:center}.invoiceBox .invoiceItem .invoiceStatus .invoiceCheck input{cursor:pointer;margin-right:8px}.invoiceBox .invoiceItem .invoiceStatus .rightPart{display:flex;align-items:center}.invoiceBox .invoiceItem .invoiceStatus .rightPart .invoiceimg{display:inline-flex;align-items:center}.invoiceBox .invoiceItem .invoiceStatus .rightPart .invoiceimg img{margin-right:5px}.invoiceBox .invoiceItem .invoiceStatus .rightPart .invalid{width:60px;height:20px;font-size:12px;color:#D0121B;background:#FDF5F5;border-radius:1px;margin-left:25px;border:1px solid #D0121B;cursor:pointer}.invoiceBox .invoiceItem .invoiceStatus .rightPart .invalid:hover{color:#fff;background-color:#D0121B}.invoiceBox .invoiceItem .invoiceDetail{margin-top:20px;font-size:14px;width:100%}.invoiceBox .invoiceItem .invoiceDetail .lineItem{width:calc(50% - 50px);display:inline-block;margin-bottom:15px;margin-left:50px}.invoiceBox .invoiceItem .invoiceDetail .lineItem .itemTitle{display:inline-block;width:90px;text-align:right;margin-right:20px}.invoiceBox .pagination{position:absolute;right:30px;bottom:30px}.modalContent{padding:45px 0;box-sizing:border-box}.modalContent :global .ant-form-item{margin-bottom:20px}.radioBox{padding-top:15px;padding-bottom:40px}.modalFooter{width:100%;display:flex;margin-top:40px;padding-bottom:25px;justify-content:space-around}.modalFooter .saveButton{width:195px;height:45px;color:#fff;background:#FF9A00;border-radius:1px;cursor:pointer}.modalFooter .cancelButton{width:195px;height:45px;color:#FF9A00;background:#fff;border-radius:1px;cursor:pointer;border:1px solid #FF9A00}

pages/invoice/component/index.module.scss

+.invoiceBox {
+    
+    width: 1022px;
+    margin-left: 12px;
+    box-sizing: border-box;
+    background: #fff;
+    padding: 20px 30px 100px;
+    position: relative;
+
+    .invoiceTitle {
+        font-size: 16px;
+        height: 32px;
+        color: #1A1A1A;
+        line-height: 21px;
+        width: 100%;
+        border-bottom: 1px solid #F4F4F4;
+    }
+
+    .invoiceButton {
+        left: 120px;
+        top: 18px;
+        position: absolute;
+        width: 80px;
+        height: 26px;
+        background: #FFFFFF;
+        border-radius: 1px;
+        color: #FF9A00;
+        border: 1px solid #FF9A00;
+        cursor: pointer;
+
+        &:hover {
+            color: #fff;
+            background-color: #FF9A00;
+        }
+    }
+
+    .invoiceItem {
+        //height: 240px;
+        padding-top: 20px;
+        padding-bottom: 5px;
+        box-sizing: border-box;
+        border-bottom: 1px solid #F4F4F4;
+
+        .invoiceStatus {
+            width: 100%;
+            height: 20px;
+            display: flex;
+            line-height: 20px;
+            text-align: center;
+            justify-content: space-between;
+
+            .invoiceCheck {
+                display: flex;
+                align-items: center;
+
+                input {
+                    cursor: pointer;
+                    margin-right: 8px;
+                }
+            }
+
+            .rightPart {
+                display: flex;
+                align-items: center;
+                .invoiceimg {
+                    display: inline-flex;
+                    align-items: center;
+                    img {
+                        margin-right: 5px;
+                    }
+                }
+    
+                .invalid {
+                    width: 60px;
+                    height: 20px;
+                    font-size: 12px;
+                    color: #D0121B;
+                    background: #FDF5F5;
+                    border-radius: 1px;
+                    margin-left: 25px;
+                    border: 1px solid #D0121B;
+                    cursor: pointer;
+
+                    &:hover {
+                        color: #fff;
+                        background-color: #D0121B;
+                    }
+                }
+            }
+        }
+        .invoiceDetail {
+            margin-top: 20px;
+            font-size: 14px;
+            width: 100%;
+
+            .lineItem {
+                width: calc(50% - 50px);
+                display: inline-block;
+                margin-bottom: 15px;
+                margin-left: 50px;
+
+                .itemTitle {
+                    display: inline-block;
+                    width: 90px;
+                    text-align: right;
+                    margin-right: 20px;
+                }
+            }
+        }
+    }
+
+    .pagination {
+        position: absolute;
+        right: 30px;
+        bottom: 30px;
+    }
+}
+
+.modalContent {
+    padding: 45px 0;
+    box-sizing: border-box;
+    :global {
+       .ant-form-item {
+          margin-bottom:20px;
+       }
+    }
+}
+.radioBox{
+    padding-top:15px;
+    padding-bottom: 40px;
+}
+
+.modalFooter {
+    width: 100%;
+    display: flex;
+    margin-top: 40px;
+    padding-bottom: 25px;
+    justify-content: space-around;
+
+    .saveButton {
+        width: 195px;
+        height: 45px;
+        color: #fff;
+        background: #FF9A00;
+        border-radius: 1px;
+        cursor: pointer;
+    }
+    .cancelButton {
+        width: 195px;
+        height: 45px;
+        color: #FF9A00;
+        background: #fff;
+        border-radius: 1px;
+        cursor: pointer;
+        border: 1px solid #FF9A00;
+    }
+}
\ No newline at end of file

pages/invoice/index.module.scss

+.userCenter {
+    padding: 10px;
+    width: 1226px;
+    margin: 0 auto;
+    display: flex;
+}
\ No newline at end of file