文件大小写

config/base.config.json

-{"userRegister":{"useType":{"memberType":[{"id":1,"typeName":"企业会员"},{"id":3,"typeName":"渠道企业会员"},{"id":4,"typeName":"渠道个人会员"},{"id":2,"typeName":"个人会员"}],"businessType":[{"id":1,"typeName":"采购"},{"id":2,"typeName":"商品销售"},{"id":3,"typeName":"加工服务"},{"id":4,"typeName":"物流服务"},{"id":5,"typeName":"金融服务"},{"id":6,"typeName":"保险服务"},{"id":22,"typeName":"别删"},{"id":23,"typeName":"测试"},{"id":24,"typeName":"供应"},{"id":26,"typeName":"业务"},{"id":27,"typeName":"test"},{"id":28,"typeName":"123"},{"id":29,"typeName":"21321"}]},"useDetail":null},"global":{"logo":"http://lingxi-frontend-test.oss-cn-hangzhou.aliyuncs.com/images/logo.png","countryList":[{"name":"简体中文-ZH","key":"zh-CN","icon":"http://lingxi-frontend-test.oss-cn-hangzhou.aliyuncs.com/images/china.png"},{"name":"English-EN","key":"en-US","icon":"http://lingxi-frontend-test.oss-cn-hangzhou.aliyuncs.com/images/us.png"},{"name":"日本語-JP","key":"jp","icon":"http://lingxi-frontend-test.oss-cn-hangzhou.aliyuncs.com/images/japen.png"},{"name":"한국어-KO","key":"ko","icon":"http://lingxi-frontend-test.oss-cn-hangzhou.aliyuncs.com/images/koren.png"}],"menuList":[{"code":"/memberCenter/commodityAbility","children":[{"code":"/mem"}]},{"code":"/memberCenter/commodityAbility/classAndProperty/class"}]}}
+{"userRegister":{"useType":{"memberType":[{"id":1,"typeName":"企业会员"},{"id":3,"typeName":"渠道企业会员"},{"id":4,"typeName":"渠道个人会员"},{"id":2,"typeName":"个人会员"}],"businessType":[{"id":1,"typeName":"采购"},{"id":2,"typeName":"商品销售"},{"id":3,"typeName":"加工服务"},{"id":4,"typeName":"物流服务"},{"id":5,"typeName":"金融服务"},{"id":6,"typeName":"保险服务"},{"id":22,"typeName":"别删"},{"id":23,"typeName":"测试"},{"id":24,"typeName":"供应"},{"id":26,"typeName":"业务"},{"id":27,"typeName":"test"},{"id":28,"typeName":"123"},{"id":29,"typeName":"21321"}]}},"global":{"logo":"http://lingxi-frontend-test.oss-cn-hangzhou.aliyuncs.com/images/logo.png","countryList":[{"name":"简体中文-ZH","key":"zh-CN","icon":"http://lingxi-frontend-test.oss-cn-hangzhou.aliyuncs.com/images/china.png"},{"name":"English-EN","key":"en-US","icon":"http://lingxi-frontend-test.oss-cn-hangzhou.aliyuncs.com/images/us.png"},{"name":"日本語-JP","key":"jp","icon":"http://lingxi-frontend-test.oss-cn-hangzhou.aliyuncs.com/images/japen.png"},{"name":"한국어-KO","key":"ko","icon":"http://lingxi-frontend-test.oss-cn-hangzhou.aliyuncs.com/images/koren.png"}],"menuList":[{"code":"/memberCenter/commodityAbility","children":[{"code":"/mem"}]},{"code":"/memberCenter/commodityAbility/classAndProperty/class"}]}}

src/pages/lxMall/commodity/index.tsx

@@ -4,7 +4,7 @@ import Filter from '../components/Filter'
 import cx from 'classnames'
 import { Pagination } from 'antd'
 import CommodityList from './list'
-import NoResult from './noresult'
+import NoResult from './noResult'
 import bannerImg from '@/assets/imgs/banner_2.png'
 import arrowDownIcon from '@/assets/imgs/arrow_down.png'
 import arrowDownActiveIcon from '@/assets/imgs/arrow_down_active.png'

src/pages/lxMall/components/Advert/index.less

+.lingxi-advert {
+  width: 100%;
+  height: 70px;
+  overflow: hidden;
+  background-color: #ffffff;
+
+  img {
+    width: 100%;
+  }
+}
+
+.lingxi-banner {
+  position: relative;
+
+  .banner_list {
+
+    .banner_list_item {
+      height: 460px;
+
+      &_img {
+        height: 460px;
+      }
+    }
+  }
+
+  .ant-carousel .slick-slide {
+    text-align: center;
+    height: 460px;
+    overflow: hidden;
+  }
+
+  .ant-carousel .slick-slide h3 {
+    color: #fff;
+  }
+}
+
+.lingxi-interact_list {
+  display: flex;
+  width: 1200px;
+  margin: 20px auto;
+  margin-bottom: 0;
+  justify-content: space-between;
+
+  .interact_list_item {
+    width: 285px;
+    height: 120px;
+    overflow: hidden;
+
+    &>a {
+      outline: none;
+      text-decoration: none;
+
+      &>img {
+        width: 100%;
+        height: auto;
+      }
+    }
+
+  }
+}
\ No newline at end of file

src/pages/lxMall/components/Advert/index.tsx

+import React from 'react'
+import { Carousel } from 'antd'
+import default_ad_img from './default_ad_img.png'
+import default_banner from './banner_1.png'
+import classNames from 'classnames'
+import { ConfigConsumer } from '../Generator'
+import './index.less'
+
+interface AdvertPropsType {
+  className?: string;
+  prefixCls?: string;
+  type?: 'top' | 'banner' | 'interact'; // top: 顶部广告；banner:轮播广告;interact:banner下的广告
+}
+
+const Advert: React.FC<AdvertPropsType> = (props) => {
+
+
+  const renderAdvert = ({ getPrefixCls }: any) => {
+    const { type = 'top', children, className, ...others } = props
+
+
+    switch (type) {
+      case 'top':
+        const topPrefixCls = getPrefixCls('advert', props.prefixCls);
+        const topClassString = classNames(topPrefixCls, className);
+        return (
+          <div className={topClassString}>
+            <Carousel className="topAdvert_list" autoplay pauseOnDotsHover pauseOnHover>
+              <div className="topAdvert_list_item">
+                <a href="javascript:;" >
+                  <img src={default_ad_img} />
+                </a>
+              </div>
+            </Carousel>
+          </div>
+        )
+      case 'banner':
+        const bannerPrefixCls = getPrefixCls('banner', props.prefixCls);
+        const bannerClassString = classNames(bannerPrefixCls, className);
+        return (
+          <div className={bannerClassString}>
+            <Carousel className="banner_list" autoplay pauseOnDotsHover>
+              <div className="banner_list_item" >
+                <div className="banner_list_item_body" style={{ backgroundColor: 'rgb(193, 193, 195)' }}>
+                  <a href="">
+                    <div className="banner_list_item_img" style={{ background: `url(https://img.alicdn.com/tps/i4/TB1ICgYL.H1gK0jSZSySuttlpXa.jpg) center center no-repeat` }}></div>
+                  </a>
+                </div>
+              </div>
+              <div className="banner_list_item" >
+                <div className="banner_list_item_body" style={{ backgroundColor: 'rgb(170, 0, 239)' }}>
+                  <a href="">
+                    <div className="banner_list_item_img" style={{ background: `url(https://img.alicdn.com/imgextra/i4/81/O1CN01VT5ViO1CT8h4sY7qc_!!81-0-luban.jpg_q100.jpg_.webp)  center center no-repeat` }}></div>
+                  </a>
+                </div>
+              </div>
+            </Carousel>
+            {children}
+          </div>
+        )
+      case 'interact':
+        const interactPrefixCls = getPrefixCls('interact_list', props.prefixCls);
+        const interactClassString = classNames(interactPrefixCls, className);
+        return (
+          <div className={interactClassString}>
+            <div className="interact_list_item">
+              <a href="/">
+                <img src={default_banner} />
+              </a>
+            </div>
+            <div className="interact_list_item">
+              <a href="/">
+                <img src={default_banner} />
+              </a>
+            </div>
+            <div className="interact_list_item">
+              <a href="/">
+                <img src={default_banner} />
+              </a>
+            </div>
+            <div className="interact_list_item">
+              <a href="/">
+                <img src={default_banner} />
+              </a>
+            </div>
+          </div>
+        )
+      default:
+        return null
+    }
+  }
+  return <ConfigConsumer>{renderAdvert}</ConfigConsumer>
+}
+
+export default Advert

src/pages/lxMall/components/Header/index.less

+@import '../../../../theme/style/common.less';
+@mall_main_color: var(--mall_main_color);
+
+.header {
+  position: relative;
+  background-color: #FFF;
+  width: 100%;
+  padding-top: 10px;
+
+  .header_container {
+    .common_page_container();
+    height: 110px;
+    display: flex;
+    align-items: center;
+
+    .logo {
+      display: inline-block;
+      padding: 0 95px 0 17px;
+
+      &>img {
+        width: 145px;
+        height: 50px;
+      }
+    }
+
+    .mall_search {
+      display: inline-block;
+      width: 632px;
+      vertical-align: top;
+
+      .mall_search_tags {
+
+        .mall_search_tags_item {
+          display: inline-block;
+          height: 24px;
+          line-height: 24px;
+          color: @mall_main_color;
+          font-size: 12px;
+          padding: 0 9px;
+          cursor: pointer;
+
+          &.active {
+            background-color: @mall_main_color;
+            color: #FFF;
+          }
+        }
+      }
+
+      .mall_search_box {
+        .commone_input_placeholder();
+        position: relative;
+        width: 100%;
+        border: 2px solid @mall_main_color;
+        height: 40px;
+
+        .mall_search_input {
+
+          display: inline-block;
+          width: 521px;
+          height: 36px;
+          line-height: 36px;
+          outline: none;
+          border: none;
+          text-indent: 12px;
+        }
+
+        .search_btn {
+          position: absolute;
+          background-color: @mall_main_color;
+          color: #FFF;
+          width: 120px;
+          height: 100%;
+          line-height: 36px;
+          text-align: center;
+          font-size: 14px;
+          z-index: 1;
+          right: 0;
+          top: 0;
+          cursor: pointer;
+        }
+      }
+
+
+    }
+
+    .shopping_cart {
+      position: relative;
+      vertical-align: top;
+      margin-left: 66px;
+      display: inline-block;
+      width: 110px;
+      height: 40px;
+      border: 1px solid rgba(204, 204, 204, 1);
+      line-height: 38px;
+      color: @mall_main_color;
+      text-align: center;
+      cursor: pointer;
+
+      &.mall {
+        margin-top: 24px;
+      }
+
+      .card_icon {
+        margin-right: 14px;
+      }
+
+      .badge {
+        position: absolute;
+        width: 16px;
+        height: 16px;
+        left: 26px;
+        top: 4px;
+        border-radius: 50%;
+        overflow: hidden;
+        line-height: 16px;
+        font-size: 12px;
+        color: #FFF;
+        background-color: @mall_main_color;
+      }
+    }
+  }
+}
\ No newline at end of file

src/pages/lxMall/components/Header/index.tsx

+import React, { useState } from 'react'
+import cx from 'classnames'
+import { Link } from 'umi'
+import { FileTextOutlined } from '@ant-design/icons'
+import logo from '@/theme/imgs/logo_w.png'
+import './index.less'
+
+interface HeaderPropsType {
+
+}
+
+const Header: React.FC<HeaderPropsType> = (props) => {
+  const [searchType, setSearchType] = useState<number>(1) // 1:商品； 2：店铺
+
+  const handleChangeSearchType = (type: number) => {
+    if (searchType !== type) {
+      setSearchType(type)
+    }
+  }
+
+  return (
+    <div className="header">
+      <div className="header_container">
+        <div className="logo">
+          <Link to="/">
+            <img src={logo} />
+          </Link>
+        </div>
+        <div className="mall_search">
+          <div className="mall_search_tags">
+            <div className={cx("mall_search_tags_item", searchType === 1 ? 'active' : '')} onClick={() => handleChangeSearchType(1)}>商品</div>
+            <div className={cx("mall_search_tags_item", searchType === 2 ? 'active' : '')} onClick={() => handleChangeSearchType(2)}>店铺</div>
+          </div>
+          <div className="mall_search_box">
+            <input className="mall_search_input" placeholder="请输入关键词" />
+            <div className="search_btn">搜索</div>
+          </div>
+        </div>
+        <div className="shopping_cart mall">
+          <div className="badge">0</div>
+          <FileTextOutlined className="card_icon" />
+          <span>进货单</span>
+        </div>
+      </div>
+    </div>
+  )
+}
+
+export default Header

src/pages/lxMall/components/MainNav/index.less

+@import '../../../../theme/style/common.less';
+@import '../../../../theme/style/colors.less';
+
+@mall_main_color: var(--mall_main_color);
+
+.main_nav {
+  position: relative;
+  border-bottom: 2px solid @mall_main_color;
+  background-color: #FFF;
+
+
+
+  &_container {
+    .common_page_container();
+    height: 40px;
+
+    &>.nav {
+      padding: 0;
+      margin: 0;
+      position: relative;
+      float: left;
+      margin-left: 20px;
+
+      .nav_item {
+        list-style: none;
+        display: inline-block;
+        height: 40px;
+        line-height: 40px;
+        padding: 0 20px;
+        color: #333333;
+        font-weight: bold;
+
+        &>a {
+          color: #333333;
+        }
+
+        &.active {
+          &>a {
+            color: #D32F2F;
+            // color: @mall_main_color;
+          }
+        }
+      }
+    }
+  }
+
+  &.shop {
+    background-color: @mall_main_color;
+
+    .main_nav_container>.nav .nav_item {
+      &.active {
+        a {
+          color: #FFF;
+        }
+      }
+
+      a {
+        color: #FFF;
+      }
+    }
+  }
+}
\ No newline at end of file

src/pages/lxMall/components/MainNav/index.tsx

+import React from 'react'
+import { Link } from 'umi'
+import cx from 'classnames'
+import Category from '../Category'
+import './index.less'
+
+interface MainNavPropsType {
+  menuData: any;
+  pathname: string;
+  type: "shop" | "mall"
+}
+
+const MainNav: React.FC<MainNavPropsType> = (props) => {
+  const { menuData, pathname, type } = props
+  console.log(type, "type")
+
+  return (
+    <div className={cx("main_nav", type === "shop" ? "shop" : "")}>
+      <div className="main_nav_container">
+        <Category />
+        <ul className="nav">
+          {
+            menuData && menuData.map(item => !item.hide && (
+              <li className={cx("nav_item", item.path === pathname ? 'active' : '')} key={item.key}>
+                <Link to={item.path}>{item.name}</Link>
+              </li>
+            ))
+          }
+        </ul>
+      </div>
+
+    </div>
+  )
+}
+
+export default MainNav