feat:渠道商城首页,支付页面和店铺列表页面

config/channelRoutes/index.ts

+
+
+const shopRoute = {
+  path: '/channelmall',
+  component: '@/pages/lxMall/layouts/LXChannelLayout',
+  routes: [
+    {
+      // 店铺（渠道商城）
+      path: `/channelmall`,
+      name: 'shopHome',
+      key: 'shopHome',
+      component: '@/pages/lxMall/channel',
+    },
+    {
+      // 商品商城
+      path: `/channelmall/commodity`,
+      name: 'shopCommodity',
+      key: 'shopCommodity',
+      component: '@/pages/lxMall/commodity',
+    },
+    {
+      // 商品详情
+      path: `/channelmall/commodity/detail`,
+      name: 'commodityDetail',
+      key: 'commodityDetail',
+      hide: true,
+      component: '@/pages/lxMall/commodityDetail',
+    },
+    {
+      path: '/noAuth',
+      component: '@/pages/403',
+    },
+    // 商城页的404
+    {
+      component: '@/pages/404',
+    },
+
+  ],
+}
+
+export default shopRoute
\ No newline at end of file

config/mallRoutes/index.ts

@@ -36,25 +36,34 @@ const mallRoute = {
       component: '@/pages/lxMall/purchaseOrder',
     },
     {
+      // 支付页面
+      path: '/pay',
+      name: 'pay',
+      key: 'pay',
+      hide: true,
+      hideHeader: true,
+      component: '@/pages/lxMall/pay',
+    },
+    {
       // 在线求购
-      path: `/buy`,
-      name: 'onlineshopping',
-      key: 'onlineshopping',
-      component: '@/pages/lxMall/commodity',
+      path: `/purchaseOnline`,
+      name: 'purchaseOnline',
+      key: 'purchaseOnline',
+      component: '@/pages/lxMall/purchaseOnline',
     },
     {
       // 积分商城
       path: `/pointsMall`,
       name: 'pointsMall',
       key: 'pointsMall',
-      component: '@/pages/lxMall/commodity',
+      component: '@/pages/lxMall/pointsMall',
     },
     {
       // 店铺
       path: `/shops`,
       name: 'shops',
       key: 'shops',
-      component: '@/pages/lxMall/commodity',
+      component: '@/pages/lxMall/shopList',
     },
     {
       // 资讯

config/router.ts

@@ -2,6 +2,7 @@
 import memberCenterRoute from './routes'
 import mallRoute from './mallRoutes'
 import shopRoute from './shopRoutes'
+import channelRoute from './channelRoutes'
 
 /**
  * @description 路由配置页, 更多配置可查看 https://umijs.org/zh-CN/docs/routing#routes
@@ -36,6 +37,7 @@ const router = [
       },
       memberCenterRoute,
       shopRoute,
+      channelRoute,
       mallRoute,
       {
         component: '@/pages/404',

package.json

@@ -37,6 +37,7 @@
     "bizcharts": "^4.0.7",
     "copy-to-clipboard": "^3.3.1",
     "god": "^0.1.18",
+    "lingxi-design-ui": "^1.0.6",
     "lint-staged": "^10.0.7",
     "mobx": "^5.15.4",
     "mobx-react": "^6.2.2",

src/app.tsx

@@ -84,15 +84,12 @@ export function render(oldRender: Function) {
  * @param {*} { routes, matchedRoutes, location, action }
  */
 export function onRouteChange({ routes, matchedRoutes, location, action }) {
-  console.log(`当前可访问的路由为`)
-  console.log(routes, matchedRoutes, location)
+
   if (isDev) {
     return;
   }
   if (whiteLists.includes(location.pathname)) return;
-
   const routeAuthUrls = getRouters()
-  console.log(routeAuthUrls, "routeAuthUrls")
   // 是否登录
   if (getAuth()) {
     if (routeAuthUrls.includes(location.pathname)) {

src/global/styles/reset.less

@@ -34,6 +34,10 @@
       }
     }
 
+    .ant-checkbox-indeterminate.ant-checkbox-checked .ant-checkbox-inner {
+      background-color: transparent;
+    }
+
     .ant-checkbox-indeterminate .ant-checkbox-inner {
 
       &:hover,

src/locales/zh-CN/menu.ts

@@ -12,7 +12,7 @@ export default {
   'menu.shopHome': '首页',
   'menu.mallCommodity': '商品商城',
   'menu.shopCommodity': '商品',
-  'menu.onlineshopping': '在线求购',
+  'menu.purchaseOnline': '在线求购',
   'menu.pointsMall': '积分商城',
   'menu.shops': '店铺',
   'menu.infomation': '资讯',

src/pages/lxMall/channel/index.less

+@import '../../../theme/style/common.less';
+@import '../../../theme/style/colors.less';
+
+
+.channel_index {
+  background-color: #FFF;
+
+}
+
+.banner {
+  position: relative;
+
+  .banner_list {
+
+    .banner_list_item {
+      height: 460px;
+
+      &_img {
+        height: 460px;
+      }
+    }
+  }
+}
+
+.channel_floor_title {
+
+
+  &_split {
+    width: 527px;
+    height: 4px;
+    background: rgba(245, 245, 245, 1);
+  }
+
+  &_text {
+    font-size: 24px;
+    margin: 0 20px;
+
+    &>.primary {
+      color: #D32F2F;
+      margin-left: 3px;
+    }
+  }
+
+  .channel_floor_container {
+    width: 1200px;
+    margin: 0 auto;
+    display: flex;
+    align-items: center;
+    padding-top: 40px;
+  }
+
+
+}
+
+.channel_info_about {
+  padding-top: 36px;
+
+  &_container {
+    width: 1200px;
+    margin: 0 auto;
+    position: relative;
+    display: flex;
+
+    .channel_info_about_img {
+      width: 600px;
+
+      &_list {
+        position: relative;
+        height: 460px;
+        // background-color: cyan;
+
+      }
+
+      .channel_info_about_img_item {
+
+        &_body {
+          .channel_info_about_img_item_img {
+            width: 600px;
+            height: 400px;
+            background-repeat: no-repeat;
+            background-position: center center;
+            background-size: 100% auto;
+          }
+        }
+      }
+
+      :global {
+        .ant-carousel .slick-dots li button {
+          background: rgba(0, 0, 0, 0.2);
+        }
+
+        .ant-carousel .slick-dots li {
+          &.slick-active {
+            button {
+              background: rgba(0, 0, 0, 1);
+            }
+          }
+        }
+
+        .ant-carousel .slick-dots li {
+          width: 30px;
+        }
+      }
+    }
+
+    .channel_info_about_info {
+      position: relative;
+      margin-left: 55px;
+      flex: 1;
+      width: 0;
+      padding-right: 68px;
+
+      &_tabs {
+        display: flex;
+
+        &_item {
+          width: 100px;
+          height: 36px;
+          line-height: 34px;
+          text-align: center;
+          border: 1px solid #FFF;
+          margin-right: 20px;
+          cursor: pointer;
+
+          &.active {
+            border: 1px solid rgba(238, 238, 238, 1);
+          }
+        }
+      }
+
+      &_title {
+        font-size: 24px;
+        font-weight: 500;
+        margin-top: 48px;
+        margin-bottom: 20px;
+      }
+
+      &_brief {
+        color: #666666;
+      }
+
+      &_more {
+        margin-top: 25px;
+
+        &>span {
+          cursor: pointer;
+          margin-right: 8px;
+        }
+      }
+    }
+  }
+
+}
+
+
+.interact_list {
+  display: flex;
+  width: 1200px;
+  margin: 20px auto;
+  margin-bottom: 0;
+  justify-content: space-between;
+
+  &_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/channel/index.tsx

+import React, { Fragment, useEffect, useMemo, useState } from 'react'
+import { Carousel } from 'antd'
+import { ArrowRightOutlined } from '@ant-design/icons'
+import ShopFloorLine from '../components/ShopFloorLine'
+import Information from '../components/Information'
+import FloorAnchor from '../components/FloorAnchor'
+import { Advert } from 'lingxi-design-ui'
+import cx from 'classnames'
+import companyImg from '@/assets/imgs/company_img.png'
+import styles from './index.less'
+
+const ChannelIndex: React.FC = () => {
+  const [aboutTab, setAboutTab] = useState<number>(1) //1:公司简介 2：资质荣誉 
+
+  const category_list = [
+    {
+      id: 1,
+      title: '灯饰照明'
+    },
+    {
+      id: 2,
+      title: '家装建材'
+    },
+    {
+      id: 3,
+      title: '电工电气'
+    },
+  ]
+
+  let data: any = [
+    {
+      id: 1,
+      picUrl: 'https://img.alicdn.com/tps/i4/TB1ICgYL.H1gK0jSZSySuttlpXa.jpg'
+    },
+    {
+      id: 2,
+      picUrl: 'https://img.alicdn.com/imgextra/i4/81/O1CN01VT5ViO1CT8h4sY7qc_!!81-0-luban.jpg'
+    }
+  ]
+
+  const handleChangeAboutTab = (tab: number) => {
+    if (aboutTab !== tab) {
+      setAboutTab(tab)
+    }
+  }
+
+  return (
+    <div className={styles.channel_index}>
+      <div className={styles.banner}>
+        {
+          useMemo(() => <Advert type="banner" advertList={data} />, [])
+        }
+        {/* 
+        <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> 
+        */}
+      </div>
+      <FloorAnchor anchorList={category_list} type="shop" />
+      <div className={styles.channel_floor_title}>
+        <div className={styles.channel_floor_container}>
+          <div className={styles.channel_floor_title_split}></div>
+          <div className={styles.channel_floor_title_text}>
+            <span>热销</span>
+            <span className={styles.primary}>商品</span>
+          </div>
+          <div className={styles.channel_floor_title_split}></div>
+        </div>
+
+      </div>
+      {
+        category_list.map(item => (
+          <ShopFloorLine
+            anchor={`floorline_${item.id}`}
+            key={item.id}
+            title={item.title}
+          >
+            <ShopFloorLine.Category />
+            <ShopFloorLine.Goods />
+          </ShopFloorLine>
+        ))
+      }
+      <div className={styles.channel_floor_title}>
+        <div className={styles.channel_floor_container}>
+          <div className={styles.channel_floor_title_split}></div>
+          <div className={styles.channel_floor_title_text}>
+            <span>关于</span>
+            <span className={styles.primary}>我们</span>
+          </div>
+          <div className={styles.channel_floor_title_split}></div>
+        </div>
+
+      </div>
+      <div className={styles.channel_info_about}>
+        <div className={styles.channel_info_about_container}>
+          <div className={styles.channel_info_about_img}>
+            <Carousel className={styles.channel_info_about_img_list} pauseOnDotsHover>
+              <div className={styles.channel_info_about_img_item} >
+                <div className={styles.channel_info_about_img_item_body}>
+                  <a href="">
+                    <div className={styles.channel_info_about_img_item_img} style={{ backgroundImage: `url(${companyImg})` }}></div>
+                  </a>
+                </div>
+              </div>
+              <div className={styles.channel_info_about_img_item} >
+                <div className={styles.channel_info_about_img_item_body}>
+                  <a href="">
+                    <div className={styles.channel_info_about_img_item_img} style={{ backgroundImage: `url(${companyImg})` }}></div>
+                  </a>
+                </div>
+              </div>
+            </Carousel>
+          </div>
+          <div className={styles.channel_info_about_info}>
+            <div className={styles.channel_info_about_info_tabs}>
+              <div className={cx(styles.channel_info_about_info_tabs_item, aboutTab === 1 ? styles.active : '')} onClick={() => handleChangeAboutTab(1)}>公司简介</div>
+              <div className={cx(styles.channel_info_about_info_tabs_item, aboutTab === 2 ? styles.active : '')} onClick={() => handleChangeAboutTab(2)}>资质荣誉</div>
+            </div>
+            <div className={styles.channel_info_about_info_title}>温州市龙昌皮具有限公司</div>
+            <p className={styles.channel_info_about_info_brief}>
+              公司位于温州，多年行业经验，专业经营各种成品真皮，包括全粒面牛皮，修面皮，漆色皮，打腊皮，水腊皮……二层皮胚，硅胶二层等,产品主要用于时尚女鞋、男鞋、箱包、皮带、服装、汽车内饰等高端皮具制品行业。
+              本着质量保证，品种多样，现货充足，款式新颖的经营特色和薄利多销的原则，为客户提供长期优质的服务！
+            </p>
+            <p>
+              同时公司长期寻找各皮厂合作，要求皮厂有自已的生产线及高性价比特色产品，可作为普通供应商合作，也可作为其核心经销商战略合作。欢迎来人来样，当面洽谈。
+            </p>
+            <div className={styles.channel_info_about_info_more}>
+              <span>查看更多</span>
+              <ArrowRightOutlined />
+            </div>
+          </div>
+        </div>
+
+      </div>
+      <Information />
+    </div >
+  )
+}
+
+export default ChannelIndex

src/pages/lxMall/commodity/index.less

-body {
-  background-color: #ffffff;
-}
-
 .commodity {
+  padding-bottom: 52px;
+  background-color: #ffffff;
 
   .commodity_container {
     display: flex;

src/pages/lxMall/commodity/list.less

 .commodity_list {
   display: flex;
   flex-wrap: wrap;
+  margin-top: 10px;
 
   &.column {
     flex-direction: column;
@@ -13,7 +14,7 @@
 
   &_item {
     width: 25%;
-    padding: 20px 10px 0 10px;
+    padding: 10px 0;
 
     &.column {
       width: 100%;
@@ -89,6 +90,12 @@
     }
 
     &.row {
+      border: 1px solid #FFF;
+
+      &:hover {
+        border: 1px solid var(--mall_main_color);
+      }
+
       &:hover {
         .info_box .company_info {
           display: block;
@@ -107,7 +114,7 @@
 
     .info_box {
       position: relative;
-      padding-top: 15px;
+      padding: 15px 10px 0 10px;
 
       .company_info {
         position: absolute;
@@ -115,6 +122,7 @@
         top: 0;
         left: 0;
         width: 100%;
+        padding: 0 10px;
         height: 100%;
         background-color: #ffffff;
 

src/pages/lxMall/components/ChannelHeader/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 130px 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/ChannelHeader/index.tsx

+import React, { useState } from 'react'
+import cx from 'classnames'
+import { Link, history } 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">
+          <img src={logo} />
+        </div>
+        <div className="mall_search">
+          <div className="mall_search_box">
+            <input className="mall_search_input" placeholder="请输入关键词" />
+            <div className="search_btn">搜索</div>
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+}
+
+export default Header

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

@@ -11,6 +11,7 @@
     left: -128px;
     margin-left: 0;
     padding-left: 0;
+    border: 1px solid rgba(238, 238, 238, 1);
 
     .ant-anchor {
       padding-left: 0;
@@ -27,6 +28,15 @@
         padding-left: 11px;
         font-size: 12px;
 
+        &:hover {
+          background-color: var(--mall_main_color);
+          color: #ffffff;
+
+          a {
+            color: #ffffff;
+          }
+        }
+
         &.ant-anchor-link-active {
           background-color: var(--mall_main_color);
           color: #ffffff;

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

 .footer {
   width: 100%;
   background-color: #FAFAFA;
-  margin-top: 52px;
+  // margin-top: 52px;
 
   &_container {
     width: 1200px;

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

 .information {
   position: relative;
+  margin-top: 28px;
 
   .information_container {
     width: 1200px;
     margin: 0 auto;
     background: #ffffff;
+    border: 1px solid rgba(245, 245, 245, 1);
 
     .information_header {
       height: 60px;
       line-height: 60px;
       padding-left: 20px;
+      border-bottom: 1px solid #f5f5f5;
 
       &>span {
         font-size: 16px;

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

 import React from 'react'
 import { Link } from 'umi'
-import './index.less'
+import styles from './index.less'
 
 const Information: React.FC = () => {
 
   return (
-    <div className="information">
-      <div className="information_container">
-        <div className="information_header">
+    <div className={styles.information}>
+      <div className={styles.information_container}>
+        <div className={styles.information_header}>
           <span>行情资讯</span>
           <label>今日热点 | 行业头条 | 专题报道 | 政策法规 ...</label>
         </div>
-        <div className="information_list">
-          <div className="information_list_item">
-            <div className="information_list_item_body">
+        <div className={styles.information_list}>
+          <div className={styles.information_list_item}>
+            <div className={styles.information_list_item_body}>
               <Link to="/">
-                <div className="information_recommand">
-                  <div className="information_recommand_img">
+                <div className={styles.information_recommand}>
+                  <div className={styles.information_recommand_img}>
                     <img src="https://img.alicdn.com/bao/uploaded/i1/691602756/O1CN013mdkHl1WEI92iLR75_!!691602756.jpg_400x400q60.jpg" />
                   </div>
-                  <div className="information_recommand_content">
-                    <div className="information_recommand_content_title">温州国际皮革展开幕预登记倒计时！</div>
-                    <div className="information_recommand_content_subtitle">快捷入场参观，免费领取会刊</div>
-                    <div className="information_recommand_content_date">2020-08-25</div>
-                    <div className="information_recommand_content_content">正文正文正文正文正文正文正文正文正文正文正文正文正文正文正文正文正文正文正文正文正文正文正文正文正文正文正文正文正文正文正文正文正文正文正文正文正文正文正文正</div>
+                  <div className={styles.information_recommand_content}>
+                    <div className={styles.information_recommand_content_title}>温州国际皮革展开幕预登记倒计时！</div>
+                    <div className={styles.information_recommand_content_subtitle}>快捷入场参观，免费领取会刊</div>
+                    <div className={styles.information_recommand_content_date}>2020-08-25</div>
+                    <div className={styles.information_recommand_content_content}>正文正文正文正文正文正文正文正文正文正文正文正文正文正文正文正文正文正文正文正文正文正文正文正文正文正文正文正文正文正文正文正文正文正文正文正文正文正文正文正</div>
                   </div>
                 </div>
               </Link>
-              <div className="news_list">
+              <div className={styles.news_list}>
                 <Link to="/">
-                  <div className="news_list_item">
-                    <div className="news_list_item_title">天生与福气有缘，注定会桃花自来，财运横飞的四大生肖</div>
-                    <div className="news_list_item_date">2020-08-25</div>
+                  <div className={styles.news_list_item}>
+                    <div className={styles.news_list_item_title}>天生与福气有缘，注定会桃花自来，财运横飞的四大生肖</div>
+                    <div className={styles.news_list_item_date}>2020-08-25</div>
                   </div>
                 </Link>
                 <Link to="/">
-                  <div className="news_list_item">
-                    <div className="news_list_item_title">天生与福气有缘，注定会桃花自来，财运横飞的四大生肖</div>
-                    <div className="news_list_item_date">2020-08-25</div>
+                  <div className={styles.news_list_item}>
+                    <div className={styles.news_list_item_title}>天生与福气有缘，注定会桃花自来，财运横飞的四大生肖</div>
+                    <div className={styles.news_list_item_date}>2020-08-25</div>
                   </div>
                 </Link>
                 <Link to="/">
-                  <div className="news_list_item">
-                    <div className="news_list_item_title">天生与福气有缘，注定会桃花自来，财运横飞的四大生肖</div>
-                    <div className="news_list_item_date">2020-08-25</div>
+                  <div className={styles.news_list_item}>
+                    <div className={styles.news_list_item_title}>天生与福气有缘，注定会桃花自来，财运横飞的四大生肖</div>
+                    <div className={styles.news_list_item_date}>2020-08-25</div>
                   </div>
                 </Link>
               </div>
 
             </div>
           </div>
-          <div className="information_list_item">
-            <div className="information_list_item_body">
+          <div className={styles.information_list_item}>
+            <div className={styles.information_list_item_body}>
               <Link to="/">
-                <div className="information_recommand">
-                  <div className="information_recommand_img">
+                <div className={styles.information_recommand}>
+                  <div className={styles.information_recommand_img}>
                     <img src="https://img.alicdn.com/bao/uploaded/i1/691602756/O1CN013mdkHl1WEI92iLR75_!!691602756.jpg_400x400q60.jpg" />
                   </div>
-                  <div className="information_recommand_content">
-                    <div className="information_recommand_content_title">温州国际皮革展开幕预登记倒计时！</div>
-                    <div className="information_recommand_content_subtitle">快捷入场参观，免费领取会刊</div>
-                    <div className="information_recommand_content_date">2020-08-25</div>
-                    <div className="information_recommand_content_content">正文正文正文正文正文正文正文正文正文正文正文正文正文正文正文正文正文正文正文正文正文正文正文正文正文正文正文正文正文正文正文正文正文正文正文正文正文正文正文正</div>
+                  <div className={styles.information_recommand_content}>
+                    <div className={styles.information_recommand_content_title}>温州国际皮革展开幕预登记倒计时！</div>
+                    <div className={styles.information_recommand_content_subtitle}>快捷入场参观，免费领取会刊</div>
+                    <div className={styles.information_recommand_content_date}>2020-08-25</div>
+                    <div className={styles.information_recommand_content_content}>正文正文正文正文正文正文正文正文正文正文正文正文正文正文正文正文正文正文正文正文正文正文正文正文正文正文正文正文正文正文正文正文正文正文正文正文正文正文正文正</div>
                   </div>
                 </div>
               </Link>
-              <div className="news_list">
+              <div className={styles.news_list}>
                 <Link to="/">
-                  <div className="news_list_item">
-                    <div className="news_list_item_title">天生与福气有缘，注定会桃花自来，财运横飞的四大生肖</div>
-                    <div className="news_list_item_date">2020-08-25</div>
+                  <div className={styles.news_list_item}>
+                    <div className={styles.news_list_item_title}>天生与福气有缘，注定会桃花自来，财运横飞的四大生肖</div>
+                    <div className={styles.news_list_item_date}>2020-08-25</div>
                   </div>
                 </Link>
                 <Link to="/">
-                  <div className="news_list_item">
-                    <div className="news_list_item_title">天生与福气有缘，注定会桃花自来，财运横飞的四大生肖</div>
-                    <div className="news_list_item_date">2020-08-25</div>
+                  <div className={styles.news_list_item}>
+                    <div className={styles.news_list_item_title}>天生与福气有缘，注定会桃花自来，财运横飞的四大生肖</div>
+                    <div className={styles.news_list_item_date}>2020-08-25</div>
                   </div>
                 </Link>
                 <Link to="/">
-                  <div className="news_list_item">
-                    <div className="news_list_item_title">天生与福气有缘，注定会桃花自来，财运横飞的四大生肖</div>
-                    <div className="news_list_item_date">2020-08-25</div>
+                  <div className={styles.news_list_item}>
+                    <div className={styles.news_list_item_title}>天生与福气有缘，注定会桃花自来，财运横飞的四大生肖</div>
+                    <div className={styles.news_list_item_date}>2020-08-25</div>
                   </div>
                 </Link>
               </div>

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

@@ -20,9 +20,7 @@ const ShopHeader: React.FC<ShopHeaderPropsType> = (props) => {
     <div className="shop_header">
       <div className="shop_header_container">
         <div className="logo">
-          <Link to="/">
-            <img src={logo} />
-          </Link>
+          <img src={logo} />
         </div>
         <div className="shop_header_split"></div>
         <div className="shop_header_info">

src/pages/lxMall/index/index.less

-@import '../../../theme/style/common.less';
-@import '../../../theme/style/colors.less';
-
-body {
+.mall_index {
   background-color: #F5F5F5;
+  padding-bottom: 52px;
 }
\ No newline at end of file

src/pages/lxMall/index/index.tsx

@@ -50,7 +50,7 @@ const MallIndex: React.FC = () => {
   ]
 
   return (
-    <Fragment>
+    <div className="mall_index">
       <Advert type="banner">
         <QuickNav />
       </Advert>
@@ -81,7 +81,7 @@ const MallIndex: React.FC = () => {
       }
       <FindMore />
       <Information />
-    </Fragment >
+    </div >
   )
 }
 

src/pages/lxMall/layouts/LXChannelLayout.tsx

+import React, { useEffect } from 'react'
+import {
+  BasicLayoutProps as ProLayoutProps,
+  getMenuData
+} from '@ant-design/pro-layout';
+import SelectLang from '@/layouts/components/SelectLang'
+import { useIntl } from 'umi';
+import TopBar from '../components/TopBar'
+import ChannelHeader from '../components/ChannelHeader'
+import MainNav from '../components/MainNav'
+import SideNav from '../components/SideNav'
+import Footer from '../components/Footer'
+import styles from './index.less'
+
+interface LXMallLayoutPropsType {
+  route: ProLayoutProps['route'] & {
+    authority: string[];
+    routes: Array<any>
+  };
+  location: any;
+}
+
+const LXChannelLayout: React.FC<LXMallLayoutPropsType> = (props) => {
+  const { children, location } = props
+
+  const getMenuRouter = (routes: any, pathname: any) => {
+    let list = routes.filter((item: any) => pathname.indexOf(item.key) > -1)
+    return list[0] || {}
+  }
+  const { formatMessage } = useIntl();
+  const basicInfo = getMenuData(props.route.routes, { locale: true }, formatMessage)
+  const menuData = basicInfo.menuData ? basicInfo.menuData.filter(item => !item.redirect) : []
+  const menuRouter = getMenuRouter(menuData, location.pathname)
+
+  useEffect(() => {
+    let body = document.getElementsByTagName('body')[0];
+    body.className = `theme-channel-science`;
+  }, [])
+
+  return (
+    <div className={styles.lxmall_page}>
+      <TopBar langComponent={<SelectLang />} />
+      <div className={styles.content}>
+        {
+          !menuRouter?.hideHeader && (
+            <>
+              <ChannelHeader />
+              <MainNav menuData={menuData} pathname={location.pathname} type="mall" />
+            </>
+          )
+        }
+        {children}
+      </div>
+      <Footer />
+      <SideNav />
+    </div>
+  )
+}
+
+export default LXChannelLayout

src/pages/lxMall/layouts/LXMallLayout.tsx

@@ -32,6 +32,7 @@ const LXMallLayout: React.FC<LXMallLayoutPropsType> = (props) => {
   const menuData = basicInfo.menuData ? basicInfo.menuData.filter(item => !item.redirect) : []
   const menuRouter = getMenuRouter(menuData, location.pathname)
   useEffect(() => {
+    console.log(`tempalteName=theme-mall-science`)
     let body = document.getElementsByTagName('body')[0];
     body.className = `theme-mall-science`;
   }, [])

src/pages/lxMall/pay/components/balance/index.less

+@import '../common.less';
+
+.pay_point {
+
+  padding: 40px 0;
+  border-bottom: 2px solid #EEEEEE;
+
+  &_way_list {
+    display: flex;
+    justify-content: center;
+
+    &_item {
+      width: 400px;
+      border-radius: 16px;
+      border: 2px solid rgba(238, 238, 238, 1);
+      overflow: hidden;
+      cursor: pointer;
+
+      &.active {
+        border: 2px solid #D32F2F;
+      }
+
+      &:not(:last-child) {
+        margin-right: 60px;
+      }
+
+      &_title {
+        height: 80px;
+        background-color: #6B778C;
+        line-height: 80px;
+        text-align: center;
+        color: #ffffff;
+        font-size: 16px;
+
+        &.member {
+          background-color: #C9945D;
+        }
+      }
+
+      &_content {
+        text-align: center;
+        height: 220px;
+        padding: 0 20px;
+
+        .pay_point_way_list_item_point {
+          padding-top: 50px;
+          padding-bottom: 30px;
+
+          &>label {
+
+            font-size: 32px;
+            margin-right: 8px;
+          }
+
+          &>span {
+            font-size: 14px;
+          }
+        }
+
+        .pay_point_way_list_item_split {
+          border-top: 2px dashed #EEEEEE;
+        }
+
+        .pay_point_way_list_item_needpay {
+          color: #999999;
+          font-size: 12px;
+          margin-top: 28px;
+
+          &>span {
+            color: #D32F2F;
+            font-size: 20px;
+            margin: 0 5px;
+          }
+        }
+
+        &>p {
+          margin-top: 20px;
+          color: #999999;
+          font-size: 12px;
+        }
+      }
+    }
+  }
+}
+
+.pay_wray {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+
+  &_title {
+    padding: 20px 0;
+    color: #999999;
+  }
+}
+
+.pay_btn {
+
+  width: 160px;
+  height: 50px;
+  color: #ffffff;
+  text-align: center;
+  line-height: 50px;
+  background-color: #D32F2F;
+  cursor: pointer;
+  margin-top: 20px;
+
+  &:hover {
+    opacity: .9;
+  }
+}
\ No newline at end of file

src/pages/lxMall/pay/components/balance/index.tsx

+import React, { useState } from 'react'
+import cx from 'classnames'
+import PasswordInput from '../passwordInput'
+import styles from './index.less'
+
+interface BablancePayWayPropsType {
+
+}
+
+const BablancePayWay: React.FC<BablancePayWayPropsType> = () => {
+  const [payPassword, setPayPassword] = useState<string>('')
+  const [type, setType] = useState<string>('normal') // normal： 普通；member：会员
+
+  const handlePasswordChange = (value: string) => {
+    setPayPassword(value)
+  }
+
+  return (
+    <>
+      <div className={styles.common_title}>
+        <span>余额支付</span>
+        <div className={styles.common_title_amount}>
+          <label>当前需支付：</label>
+          <span>20,000</span>
+          <label>RMB</label>
+        </div>
+      </div>
+      <div className={styles.pay_point}>
+        <div className={styles.pay_point_way_list}>
+          <div className={cx(styles.pay_point_way_list_item)}>
+            <div className={styles.pay_point_way_list_item_title}>账户可用余额</div>
+            <div className={styles.pay_point_way_list_item_content}>
+              <div className={styles.pay_point_way_list_item_point}>
+                <label>30,000</label>
+                <span>RMB</span>
+              </div>
+              <div className={styles.pay_point_way_list_item_split}></div>
+              <div className={styles.pay_point_way_list_item_needpay}>
+                <label>当前需支付：</label>
+                <span>20,000</span>
+                <label>RMB</label>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div className={styles.pay_wray}>
+        <div className={styles.pay_wray_title}>请输入支付密码</div>
+        <PasswordInput value={payPassword} onChange={handlePasswordChange} />
+        <div className={styles.pay_btn}>立即支付</div>
+      </div>
+    </>
+  )
+}
+
+export default BablancePayWay
\ No newline at end of file

src/pages/lxMall/pay/components/common.less

+    .common_title {
+      font-size: 14px;
+      color: #333333;
+      padding: 15px 0 11px 0;
+      border-bottom: 2px solid #EEEEEE;
+      line-height: 14px;
+      display: flex;
+      margin-bottom: 5px;
+
+      &_icon {
+        color: #999999;
+        margin-left: 6px;
+        cursor: pointer;
+      }
+
+      &>span {
+        font-weight: 500;
+
+      }
+
+      &_amount {
+        margin-left: auto;
+        color: #666666;
+
+        &>span {
+          color: #D32F2F;
+          font-size: 20px;
+          margin: 0 5px;
+        }
+      }
+
+      &_btn {
+        margin-left: auto;
+        cursor: pointer;
+
+        &:hover {
+          opacity: .8;
+        }
+      }
+    }
\ No newline at end of file

src/pages/lxMall/pay/components/credit/index.less

+@import '../common.less';
+
+.pay_point {
+
+  padding: 40px 0;
+  border-bottom: 2px solid #EEEEEE;
+
+  &_way_list {
+    display: flex;
+    justify-content: center;
+
+    &_item {
+      width: 400px;
+      border-radius: 16px;
+      border: 2px solid rgba(238, 238, 238, 1);
+      overflow: hidden;
+      cursor: pointer;
+
+      &.active {
+        border: 2px solid #D32F2F;
+      }
+
+      &:not(:last-child) {
+        margin-right: 60px;
+      }
+
+      &_title {
+        height: 80px;
+        background-color: #6B778C;
+        line-height: 80px;
+        text-align: center;
+        color: #ffffff;
+        font-size: 16px;
+
+        &.member {
+          background-color: #C9945D;
+        }
+      }
+
+      &_content {
+        text-align: center;
+        height: 220px;
+        padding: 0 20px;
+
+        .pay_point_way_list_item_point {
+          padding-top: 50px;
+          padding-bottom: 30px;
+
+          &>label {
+
+            font-size: 32px;
+            margin-right: 8px;
+          }
+
+          &>span {
+            font-size: 14px;
+          }
+        }
+
+        .pay_point_way_list_item_split {
+          border-top: 2px dashed #EEEEEE;
+        }
+
+        .pay_point_way_list_item_needpay {
+          color: #999999;
+          font-size: 12px;
+          margin-top: 28px;
+
+          &>span {
+            color: #D32F2F;
+            font-size: 20px;
+            margin: 0 5px;
+          }
+        }
+
+        &>p {
+          margin-top: 20px;
+          color: #999999;
+          font-size: 12px;
+        }
+      }
+    }
+  }
+}
+
+.pay_wray {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+
+  &_title {
+    padding: 20px 0;
+    color: #999999;
+  }
+}
+
+.pay_btn {
+
+  width: 160px;
+  height: 50px;
+  color: #ffffff;
+  text-align: center;
+  line-height: 50px;
+  background-color: #D32F2F;
+  cursor: pointer;
+  margin-top: 20px;
+
+  &:hover {
+    opacity: .9;
+  }
+}
\ No newline at end of file

src/pages/lxMall/pay/components/credit/index.tsx

+import React, { useState } from 'react'
+import cx from 'classnames'
+import PasswordInput from '../passwordInput'
+import styles from './index.less'
+
+interface CreditPayWayPropsType {
+
+}
+
+const CreditPayWay: React.FC<CreditPayWayPropsType> = () => {
+  const [payPassword, setPayPassword] = useState<string>('')
+  const [type, setType] = useState<string>('normal') // normal： 普通；member：会员
+
+  const handlePasswordChange = (value: string) => {
+    setPayPassword(value)
+  }
+
+  return (
+    <>
+      <div className={styles.common_title}>
+        <span>授信额度支付</span>
+        <div className={styles.common_title_amount}>
+          <label>当前需支付：</label>
+          <span>20,000</span>
+          <label>RMB</label>
+        </div>
+      </div>
+      <div className={styles.pay_point}>
+        <div className={styles.pay_point_way_list}>
+          <div className={cx(styles.pay_point_way_list_item)}>
+            <div className={styles.pay_point_way_list_item_title}>可用授信额度</div>
+            <div className={styles.pay_point_way_list_item_content}>
+              <div className={styles.pay_point_way_list_item_point}>
+                <label>30,000</label>
+                <span>RMB</span>
+              </div>
+              <div className={styles.pay_point_way_list_item_split}></div>
+              <div className={styles.pay_point_way_list_item_needpay}>
+                <label>当前需支付：</label>
+                <span>20,000</span>
+                <label>RMB</label>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div className={styles.pay_wray}>
+        <div className={styles.pay_wray_title}>请输入支付密码</div>
+        <PasswordInput value={payPassword} onChange={handlePasswordChange} />
+        <div className={styles.pay_btn}>立即支付</div>
+      </div>
+    </>
+  )
+}
+
+export default CreditPayWay
\ No newline at end of file

src/pages/lxMall/pay/components/passwordInput/index.less

+.password-input {
+  display: inline-block;
+
+  .password-input-body {
+    position: relative;
+    overflow: hidden;
+
+    .password-input-list {
+      position: relative;
+      display: flex;
+      align-items: center;
+
+      .password-input-item {
+        position: relative;
+        width: 48px;
+        height: 48px;
+        border: 1px solid rgba(235, 236, 240, 1);
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        margin-right: 8px;
+
+        &.flash {
+          &::after {
+            content: '';
+            position: absolute;
+            width: 1px;
+            height: 15px;
+            background-color: #333333;
+            left: 15px;
+            animation: flash 1s infinite;
+          }
+
+        }
+
+        @keyframes flash {
+          0% {
+            opacity: 0;
+          }
+
+          100% {
+            opacity: 1;
+          }
+        }
+
+        .circle {
+          width: 10px;
+          height: 10px;
+          border-radius: 50%;
+          background: black;
+        }
+      }
+
+    }
+
+
+
+    .password-input-box {
+      position: absolute;
+      top: 0;
+      // left: 0;
+      // width: 100%;
+      left: 0;
+      width: 100%;
+      height: 100%;
+      text-align: left;
+      opacity: 0;
+      z-index: 5;
+    }
+  }
+
+  &.modal {
+    padding: 0 56px;
+
+    .password-input-body .password-input-list .password-input-item {
+      &:not(:last-child) {
+        border-right: none;
+      }
+
+    }
+
+  }
+}
\ No newline at end of file

src/pages/lxMall/pay/components/passwordInput/index.tsx

+import React, { useEffect, useState } from 'react'
+import cx from 'classnames'
+import { Input } from 'antd'
+import styles from './index.less'
+
+interface PasswordInputPropsType {
+  onChange: Function;
+  type?: string;
+  value: string;
+  className?: string;
+}
+
+const PasswordInput: React.FC<PasswordInputPropsType> = (props) => {
+  const [focus, setFocus] = useState<boolean>(false)
+  const { value = '', onChange, type = "password", className = "" } = props
+
+  useEffect(() => {
+    console.log(value, "value")
+  }, [value])
+
+  const splitValueFormNum = (num) => {
+    return value.substring(num - 1, num)
+  }
+
+  const handleChange = (e) => {
+    const reg = /^\d*?$/;
+    console.log(e.target.value)
+    if (reg.test(e.target.value)) {
+      onChange(e.target.value)
+    }
+  }
+
+  return (
+    <div className={cx(styles["password-input"], className)}>
+      <div className={styles["password-input-body"]}>
+        <div className={styles["password-input-list"]}>
+          <div className={cx(styles["password-input-item"], (value.length === 0 && focus) ? styles.flash : '')}>
+            {type === "password" ? (value.length >= 1 && <div className={styles.circle}></div>) : value.length >= 1 ? <span>{splitValueFormNum(1)}</span> : ''}
+          </div>
+          <div className={cx(styles["password-input-item"], (value.length === 1 && focus) ? styles.flash : '')}>
+            {type === "password" ? (value.length >= 2 && <div className={styles.circle}></div>) : value.length >= 2 ? <span>{splitValueFormNum(2)}</span> : ''}
+          </div>
+          <div className={cx(styles["password-input-item"], (value.length === 2 && focus) ? styles.flash : '')}>
+            {type === "password" ? (value.length >= 3 && <div className={styles.circle}></div>) : value.length >= 3 ? <span>{splitValueFormNum(3)}</span> : ''}
+          </div>
+          <div className={cx(styles["password-input-item"], (value.length === 3 && focus) ? styles.flash : '')}>
+            {type === "password" ? (value.length >= 4 && <div className={styles.circle}></div>) : value.length >= 4 ? <span>{splitValueFormNum(4)}</span> : ''}
+          </div>
+          <div className={cx(styles["password-input-item"], (value.length === 4 && focus) ? styles.flash : '')}>
+            {type === "password" ? (value.length >= 5 && <div className={styles.circle}></div>) : value.length >= 5 ? <span>{splitValueFormNum(5)}</span> : ''}
+          </div>
+          <div className={cx(styles["password-input-item"], (value.length === 5 && focus) ? styles.flash : '')}>
+            {type === "password" ? (value.length >= 6 && <div className={styles.circle}></div>) : value.length >= 6 ? <span>{splitValueFormNum(6)}</span> : ''}
+          </div>
+        </div>
+        <Input className={styles["password-input-box"]} value={value} maxLength={6} onChange={handleChange} onFocus={() => setFocus(true)} onBlur={() => setFocus(false)} />
+      </div>
+    </div>
+  )
+}
+
+export default PasswordInput

src/pages/lxMall/pay/components/point/index.less

+@import '../common.less';
+
+.pay_point {
+
+  padding: 40px 0;
+  border-bottom: 2px solid #EEEEEE;
+
+  &_way_list {
+    display: flex;
+    justify-content: center;
+
+    &_item {
+      width: 400px;
+      border-radius: 16px;
+      border: 2px solid rgba(238, 238, 238, 1);
+      overflow: hidden;
+      cursor: pointer;
+
+      &.active {
+        border: 2px solid #D32F2F;
+      }
+
+      &:not(:last-child) {
+        margin-right: 60px;
+      }
+
+      &_title {
+        height: 80px;
+        background-color: #6B778C;
+        line-height: 80px;
+        text-align: center;
+        color: #ffffff;
+        font-size: 16px;
+
+        &.member {
+          background-color: #C9945D;
+        }
+      }
+
+      &_content {
+        text-align: center;
+        height: 220px;
+
+        .pay_point_way_list_item_point {
+          padding-top: 50px;
+
+          &>label {
+
+            font-size: 32px;
+            margin-right: 8px;
+          }
+
+          &>span {
+            font-size: 14px;
+          }
+        }
+
+        &>p {
+          margin-top: 20px;
+          color: #999999;
+          font-size: 12px;
+        }
+      }
+    }
+  }
+}
+
+.pay_wray {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+
+  &_title {
+    padding: 20px 0;
+    color: #999999;
+  }
+}
+
+.pay_btn {
+
+  width: 160px;
+  height: 50px;
+  color: #ffffff;
+  text-align: center;
+  line-height: 50px;
+  background-color: #D32F2F;
+  cursor: pointer;
+  margin-top: 20px;
+
+  &:hover {
+    opacity: .9;
+  }
+}
\ No newline at end of file

src/pages/lxMall/pay/components/point/index.tsx

+import React, { useState } from 'react'
+import cx from 'classnames'
+import PasswordInput from '../passwordInput'
+import styles from './index.less'
+
+interface PointPayWayPropsType {
+
+}
+
+const PointPayWay: React.FC<PointPayWayPropsType> = () => {
+  const [payPassword, setPayPassword] = useState<string>('')
+  const [type, setType] = useState<string>('normal') // normal： 普通；member：会员
+
+  const handlePasswordChange = (value: string) => {
+    setPayPassword(value)
+  }
+
+  const handleChangeType = (type: string) => {
+    setType(type)
+  }
+
+  return (
+    <>
+      <div className={styles.common_title}>
+        <span>积分支付</span>
+        <div className={styles.common_title_amount}>
+          <label>当前需支付：</label>
+          <span>20,000</span>
+          <label>积分</label>
+        </div>
+      </div>
+      <div className={styles.pay_point}>
+        <div className={styles.pay_point_way_list}>
+          <div className={cx(styles.pay_point_way_list_item, type === 'normal' ? styles.active : '')} onClick={() => handleChangeType('normal')}>
+            <div className={styles.pay_point_way_list_item_title}>平台通用积分</div>
+            <div className={styles.pay_point_way_list_item_content}>
+              <div className={styles.pay_point_way_list_item_point}>
+                <label>30,000</label>
+                <span>分</span>
+              </div>
+              <p>可用积分</p>
+            </div>
+          </div>
+          <div className={cx(styles.pay_point_way_list_item, type === 'member' ? styles.active : '')} onClick={() => handleChangeType('member')}>
+            <div className={cx(styles.pay_point_way_list_item_title, styles.member)}>会员专有积分</div>
+            <div className={styles.pay_point_way_list_item_content}>
+              <div className={styles.pay_point_way_list_item_point}>
+                <label>40,000</label>
+                <span>分</span>
+              </div>
+              <p>可用积分</p>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div className={styles.pay_wray}>
+        <div className={styles.pay_wray_title}>请输入支付密码</div>
+        <PasswordInput value={payPassword} onChange={handlePasswordChange} />
+        <div className={styles.pay_btn}>立即支付</div>
+      </div>
+    </>
+  )
+}
+
+export default PointPayWay
\ No newline at end of file

src/pages/lxMall/pay/index.less

+.pay {
+  position: relative;
+  background-color: #ffffff;
+  padding-bottom: 60px;
+
+  &_container {
+    width: 1200px;
+    margin: 0 auto;
+
+  }
+}
\ No newline at end of file

src/pages/lxMall/pay/index.tsx

+import React, { useState } from 'react'
+import CommonHeader from '../components/CommonHeader'
+import PointPayWay from './components/point'
+import BablancePayWay from './components/balance'
+import CreditPayWay from './components/credit'
+import styles from './index.less'
+
+interface PayPagePropsType {
+
+}
+
+enum PayWayType {
+  point = 'point', // 积分支付
+  balance = 'balance', // 余额支付
+  credit = 'credit', // 授信额度支付
+  wechat = 'wechat', // 微信支付
+  transfer = 'transfer', // 转战
+}
+
+
+const getPayTypeTitle = (type) => {
+  switch (type) {
+    case PayWayType.point:
+      return "积分支付"
+    case PayWayType.balance:
+      return "余额支付"
+    case PayWayType.credit:
+      return "收银台"
+    default:
+      return ""
+  }
+}
+
+
+const PayPage: React.FC<PayPagePropsType> = (props) => {
+  const [pageTitle, setPageTitle] = useState<string>(getPayTypeTitle(PayWayType.credit))
+  const [payType] = useState<string>(PayWayType.credit)
+
+  const renderPayWay = () => {
+    switch (payType) {
+      case PayWayType.point:
+        return <PointPayWay />
+      case PayWayType.balance:
+        return <BablancePayWay />
+      case PayWayType.credit:
+        return <CreditPayWay />
+      default:
+        return null
+    }
+  }
+
+  return (
+    <div className={styles.pay}>
+      <CommonHeader title={pageTitle} />
+      <div className={styles.pay_container}>
+        {
+          renderPayWay()
+        }
+      </div>
+    </div>
+  )
+}
+
+export default PayPage

src/pages/lxMall/pointsMall/index.less

+.commodity {
+  padding-bottom: 52px;
+  background-color: #ffffff;
+
+  .commodity_container {
+    display: flex;
+    margin-top: 20px;
+
+    .commodity_main {
+      flex: 1;
+
+      .banner {
+        height: 160px;
+        overflow: hidden;
+        margin-bottom: 20px;
+
+        &>img {
+          width: 100%;
+
+        }
+      }
+
+      .tool_bar {
+        display: flex;
+        height: 48px;
+        width: 100%;
+
+
+        .tool_bar_left {
+          display: flex;
+          align-items: center;
+
+          .tool_bar_filter_item {
+            display: flex;
+            align-items: center;
+            color: #666666;
+            margin-right: 30px;
+            font-size: 12px;
+            cursor: pointer;
+
+            &>.icon {
+              width: 20px;
+              height: 20px;
+              display: inline-block;
+              line-height: 1;
+
+              &>img {
+                width: 20px;
+                height: 20px;
+              }
+            }
+
+            .price_filter_box {
+              display: flex;
+              flex-direction: column;
+              margin-left: 6px;
+
+              &>.icon {
+                font-size: 12px;
+                color: #CCCCCC;
+
+                &:last-child {
+                  margin-top: -4px;
+                }
+              }
+            }
+          }
+        }
+
+        .tool_bar_right {
+          margin-left: auto;
+          display: flex;
+          align-items: center;
+          font-size: 12px;
+
+          .count {
+            color: #999999;
+
+
+            &>label {
+              color: #333300;
+              margin: 0 2px;
+            }
+          }
+
+          &>.icon {
+            color: #CCCCCC;
+            margin-left: 25px;
+            font-size: 22px;
+            cursor: pointer;
+
+            &.active {
+              color: #333333;
+            }
+          }
+        }
+      }
+
+      .filter_bar {
+        margin-top: 7px;
+        display: flex;
+        align-items: center;
+
+        .filter_bar_left {
+          display: flex;
+          align-items: center;
+          font-size: 12px;
+          padding-left: 10px;
+
+          &_text {
+            color: #3A3A3A;
+            cursor: pointer;
+          }
+
+          &_split {
+            height: 16px;
+            width: 1px;
+            background-color: #E5E5E5;
+            margin: 0 15px;
+          }
+
+        }
+
+        .filter_bar_list {
+          display: flex;
+          margin-left: 30px;
+
+          .filter_bar_list_item {
+            height: 20px;
+            line-height: 20px;
+            padding: 0 5px;
+            background-color: #F5F5F5;
+            font-size: 12px;
+            color: #333333;
+            border-radius: 4px;
+            margin-right: 15px;
+            // margin-bottom: 8px;
+
+            &_text {
+              &>b {
+                margin-left: 5px;
+                color: #D32F2F;
+              }
+            }
+
+            &_icon {
+              margin-left: 5px;
+              cursor: pointer;
+            }
+          }
+        }
+      }
+
+      .pagination_wrap {
+        margin-top: 60px;
+        text-align: right;
+
+        .ant-pagination-item {
+
+          &:hover,
+          &:active {
+            border-color: var(--mall_main_color);
+
+            &>a {
+              color: var(--mall_main_color);
+            }
+          }
+        }
+
+        .ant-pagination-item-active {
+          background-color: var(--mall_main_color);
+          border-color: var(--mall_main_color);
+
+          &>a {
+            color: #ffffff;
+          }
+        }
+      }
+    }
+  }
+}
+
+.no_result {
+  padding-top: 120px;
+  padding-left: 287px;
+
+  &_tip {
+    font-size: 14px;
+    color: #D32F2F;
+    font-weight: 500;
+    display: flex;
+
+    &_search {
+      color: #333333;
+    }
+
+    &_img {
+      width: 30px;
+      height: 30px;
+      overflow: hidden;
+      margin-right: 16px;
+
+      &>img {
+        width: 30px;
+        height: 30px;
+      }
+    }
+  }
+
+  &_suggest {
+    margin-top: 12px;
+    font-size: 12px;
+    color: #999999;
+    padding-left: 46px;
+
+    &_list {
+      padding: 0;
+      margin: 0;
+
+      &>li {
+        list-style: none;
+      }
+    }
+  }
+}
\ No newline at end of file

src/pages/lxMall/pointsMall/index.tsx

+import React, { useState } from 'react'
+import { CaretUpOutlined, CaretDownOutlined, UnorderedListOutlined, AppstoreOutlined, CloseOutlined } from '@ant-design/icons'
+import Filter from '../components/Filter'
+import cx from 'classnames'
+import { Pagination } from 'antd'
+import CommodityList from './list'
+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'
+import './index.less'
+
+interface filterValueType {
+  key: string;
+  title: string;
+  type: FILTER_TYPE;
+}
+
+enum FILTER_TYPE {
+  category = 'category', // 分类
+  brand = 'brand', // 品牌
+  style = 'style', // 风格
+  price = 'price', // 价格
+  area = 'area', // 适用地区
+  commodityType = 'commodityType', // 商品类型
+}
+
+interface CommodityPropsType {
+  location: any
+}
+
+const PointsMall: React.FC<CommodityPropsType> = (props) => {
+  const { query: { search = "" } } = props.location
+  const [showType, setShowType] = useState<number>(1) // 展示方式：1：矩阵排列； 2:列表排列
+  const [filterList, setFilterList] = useState([])
+
+  const handleFilter = (filterValue: filterValueType) => {
+    let filteState = filterList.some(item => item.type === filterValue.type)
+    let tempFilterList = [...filterList]
+    if (filteState) {
+      tempFilterList = tempFilterList.map(item => {
+        if (item.type === filterValue.type) {
+          return filterValue
+        }
+        return item
+      })
+    } else {
+      tempFilterList = [...tempFilterList, filterValue]
+    }
+    setFilterList(tempFilterList)
+  }
+
+  const handleDeleteFilterItem = (key: string) => {
+    let tempFilterList = [...filterList]
+    tempFilterList = tempFilterList.filter(item => String(item.key) !== String(key))
+    setFilterList(tempFilterList)
+  }
+
+  /**
+   * 重置筛选
+   */
+  const handleResetFilter = () => {
+    setFilterList([])
+  }
+
+  return (
+    <div className="commodity">
+      <div className="mall_container">
+        <div className="commodity_container">
+          <Filter onFilter={handleFilter} />
+          <div className="commodity_main">
+            <div className="banner">
+              <img src={bannerImg} />
+            </div>
+            <div className="tool_bar">
+              <div className="tool_bar_left">
+                <div className="tool_bar_filter_item">
+                  <span>积分</span>
+                  <div className="price_filter_box">
+                    <CaretUpOutlined className="icon" />
+                    <CaretDownOutlined className="icon" />
+                  </div>
+                </div>
+              </div>
+              <div className="tool_bar_right">
+                <div className="count">
+                  <span>共</span>
+                  <label>1,234</label>
+                  <span>个商品</span>
+                </div>
+              </div>
+            </div>
+            <div className="filter_bar">
+              <div className="filter_bar_left">
+                <div className="filter_bar_left_text" onClick={handleResetFilter}>重置</div>
+              </div>
+              <div className="filter_bar_list">
+                {
+                  filterList.map(item => (
+                    <div className="filter_bar_list_item" key={item.key}>
+                      <span className="filter_bar_list_item_text">{item.title}</span>
+                      <CloseOutlined className="filter_bar_list_item_icon" onClick={() => handleDeleteFilterItem(item.key)} />
+                    </div>
+                  ))
+                }
+              </div>
+            </div>
+            {
+
+            }
+            {
+              !!search ? <NoResult search={search} /> : (
+                <>
+                  <CommodityList showType={showType} />
+                  <div className="pagination_wrap">
+                    <Pagination showQuickJumper showSizeChanger={false} defaultCurrent={1} total={100} />
+                  </div>
+                </>
+              )
+            }
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+}
+
+export default PointsMall

src/pages/lxMall/pointsMall/list.less

+.point_commodity_list {
+  display: flex;
+  flex-wrap: wrap;
+  margin-top: 10px;
+
+  &.column {
+    flex-direction: column;
+    margin-top: 20px;
+  }
+
+  &.row {
+    flex-direction: row;
+  }
+
+  &_item {
+    width: 25%;
+    padding: 10px 0;
+
+    &.row {
+      border: 1px solid #FFF;
+
+      &:hover {
+        border: 1px solid var(--mall_main_color);
+      }
+    }
+
+    &.empty {
+      background: #f5f5f5;
+    }
+
+    a {
+      outline: none;
+    }
+
+    .info_box {
+      position: relative;
+      padding: 15px 10px 0 10px;
+
+    }
+
+    .goods_img {
+      width: 220px;
+      height: 220px;
+      overflow: hidden;
+      margin: 0 auto;
+
+      &>img {
+        height: 100%;
+        display: block;
+        margin: 0 auto;
+      }
+    }
+
+    .goods_name {
+      font-size: 12px;
+      color: #333333;
+      text-align: left;
+      margin-top: 12px;
+      display: -webkit-box;
+      -webkit-box-orient: vertical;
+      -webkit-line-clamp: 2;
+      text-overflow: ellipsis;
+      overflow: hidden;
+      -webkit-box-orient: vertical;
+      word-wrap: break-word;
+      word-break: break-all;
+    }
+
+    .count {
+      font-size: 12px;
+      color: #999999;
+      margin-top: 12px;
+    }
+
+    .credit {
+      color: #999999;
+      font-size: 14px;
+      margin-top: 15px;
+      line-height: 20px;
+
+      &_icon {
+        width: 20px;
+        height: 20px;
+        margin-right: 5px;
+      }
+    }
+
+    .goods_price {
+      color: #EA8000;
+      line-height: 14px;
+      display: flex;
+      align-items: center;
+    }
+  }
+
+}
\ No newline at end of file

src/pages/lxMall/pointsMall/list.tsx

+import React from 'react'
+import cx from 'classnames'
+import creditIcon from '@/assets/imgs/credit_icon.png'
+import './list.less'
+
+interface CommodityListPropsType {
+  showType: number
+}
+
+const CommodityList: React.FC<CommodityListPropsType> = (props) => {
+  const { showType } = props
+
+  let dataList = []
+  for (let i = 0; i < 20; i++) {
+    dataList.push(i)
+  }
+
+  return (
+    <div className={cx("point_commodity_list", showType === 2 ? 'column' : 'row')}>
+      {
+        dataList.map((item, index) => (
+          <div key={item} className="point_commodity_list_item row">
+            <a href={`/shop/commodity/detail?id=asdjflewjfe&type=prompt`}>
+              <div className="goods_img">
+                <img src="https://img.alicdn.com/bao/uploaded/i1/691602756/O1CN013mdkHl1WEI92iLR75_!!691602756.jpg_400x400q60.jpg" />
+              </div>
+              <div className="info_box">
+                <div className="goods_price">
+                  2,000~3,000积分
+                </div>
+                <div className="goods_name">Apple iPhone 11 Pro Max (A2220)暗夜绿色 移动联通电信4G手机 双卡双待特</div>
+                <div className="count">库存：20</div>
+              </div>
+            </a>
+          </div>
+
+        ))
+      }
+    </div>
+  )
+}
+
+export default CommodityList

src/pages/lxMall/pointsMall/noResult.tsx

+import React from 'react'
+import styles from './index.less'
+
+interface NoResultPropsType {
+  search?: string
+}
+
+const NoResult: React.FC<NoResultPropsType> = (props) => {
+  const { search } = props
+  return (
+    <div className={styles.no_result}>
+      <div className={styles.no_result_tip}>
+        <div className={styles.no_result_tip_img}></div>
+        <div className={styles.no_result_tip_text}>
+          抱歉，没有找到与“
+          <span className={styles.no_result_tip_search}>{search}</span>
+          ”相关的商品
+        </div>
+      </div>
+      <div className={styles.no_result_suggest}>
+        <ul className={styles.no_result_suggest_list}>
+          <li>建议您：</li>
+          <li>1、尝试其他关键字</li>
+          <li>2、适当减少筛选条件</li>
+          <li>3、调整价格区间</li>
+        </ul>
+      </div>
+    </div>
+  )
+}
+
+export default NoResult

src/pages/lxMall/purchaseOnline/index.less

+.purchaseOnline {
+  padding-bottom: 52px;
+  background-color: #ffffff;
+
+  .commodity_container {
+    display: flex;
+    margin-top: 20px;
+
+    .commodity_main {
+      flex: 1;
+
+      .banner {
+        height: 160px;
+        overflow: hidden;
+        margin-bottom: 20px;
+
+        &>img {
+          width: 100%;
+
+        }
+      }
+
+      .tool_bar {
+        display: flex;
+        height: 48px;
+        width: 100%;
+
+
+        .tool_bar_left {
+          display: flex;
+          align-items: center;
+
+          .tool_bar_filter_item {
+            display: flex;
+            align-items: center;
+            color: #666666;
+            margin-right: 30px;
+            font-size: 12px;
+            cursor: pointer;
+
+            &>.icon {
+              width: 20px;
+              height: 20px;
+              display: inline-block;
+              line-height: 1;
+
+              &>img {
+                width: 20px;
+                height: 20px;
+              }
+            }
+
+            .price_filter_box {
+              display: flex;
+              flex-direction: column;
+              margin-left: 6px;
+
+              &>.icon {
+                font-size: 12px;
+                color: #CCCCCC;
+
+                &:last-child {
+                  margin-top: -4px;
+                }
+              }
+            }
+          }
+        }
+
+        .tool_bar_right {
+          margin-left: auto;
+          display: flex;
+          align-items: center;
+          font-size: 12px;
+
+          .count {
+            color: #999999;
+
+
+            &>label {
+              color: #333300;
+              margin: 0 2px;
+            }
+          }
+
+          &>.icon {
+            color: #CCCCCC;
+            margin-left: 25px;
+            font-size: 22px;
+            cursor: pointer;
+
+            &.active {
+              color: #333333;
+            }
+          }
+        }
+      }
+
+      .filter_bar {
+        margin-top: 7px;
+        display: flex;
+        align-items: center;
+
+        .filter_bar_left {
+          display: flex;
+          align-items: center;
+          font-size: 12px;
+          padding-left: 10px;
+
+          &_text {
+            color: #3A3A3A;
+            cursor: pointer;
+          }
+
+          &_split {
+            height: 16px;
+            width: 1px;
+            background-color: #E5E5E5;
+            margin: 0 15px;
+          }
+
+        }
+
+        .filter_bar_list {
+          display: flex;
+          margin-left: 30px;
+
+          .filter_bar_list_item {
+            height: 20px;
+            line-height: 20px;
+            padding: 0 5px;
+            background-color: #F5F5F5;
+            font-size: 12px;
+            color: #333333;
+            border-radius: 4px;
+            margin-right: 15px;
+            // margin-bottom: 8px;
+
+            &_text {
+              &>b {
+                margin-left: 5px;
+                color: #D32F2F;
+              }
+            }
+
+            &_icon {
+              margin-left: 5px;
+              cursor: pointer;
+            }
+          }
+        }
+      }
+
+      .pagination_wrap {
+        margin-top: 60px;
+        text-align: right;
+
+        .ant-pagination-item {
+
+          &:hover,
+          &:active {
+            border-color: var(--mall_main_color);
+
+            &>a {
+              color: var(--mall_main_color);
+            }
+          }
+        }
+
+        .ant-pagination-item-active {
+          background-color: var(--mall_main_color);
+          border-color: var(--mall_main_color);
+
+          &>a {
+            color: #ffffff;
+          }
+        }
+      }
+    }
+  }
+}
+
+.no_result {
+  padding-top: 120px;
+  padding-left: 287px;
+
+  &_tip {
+    font-size: 14px;
+    color: #D32F2F;
+    font-weight: 500;
+    display: flex;
+
+    &_search {
+      color: #333333;
+    }
+
+    &_img {
+      width: 30px;
+      height: 30px;
+      overflow: hidden;
+      margin-right: 16px;
+
+      &>img {
+        width: 30px;
+        height: 30px;
+      }
+    }
+  }
+
+  &_suggest {
+    margin-top: 12px;
+    font-size: 12px;
+    color: #999999;
+    padding-left: 46px;
+
+    &_list {
+      padding: 0;
+      margin: 0;
+
+      &>li {
+        list-style: none;
+      }
+    }
+  }
+}
\ No newline at end of file

src/pages/lxMall/purchaseOnline/index.tsx

+import React, { useState } from 'react'
+import { CaretUpOutlined, CaretDownOutlined, UnorderedListOutlined, AppstoreOutlined, CloseOutlined } from '@ant-design/icons'
+import Filter from '../components/Filter'
+import cx from 'classnames'
+import { Pagination } from 'antd'
+import CommodityList from './list'
+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'
+import './index.less'
+
+interface filterValueType {
+  key: string;
+  title: string;
+  type: FILTER_TYPE;
+}
+
+enum FILTER_TYPE {
+  category = 'category', // 分类
+  brand = 'brand', // 品牌
+  style = 'style', // 风格
+  price = 'price', // 价格
+  area = 'area', // 适用地区
+  commodityType = 'commodityType', // 商品类型
+}
+
+interface PurchaseOnlinePropsType {
+  location: any
+}
+
+const PurchaseOnline: React.FC<PurchaseOnlinePropsType> = (props) => {
+  const { query: { search = "" } } = props.location
+  const [showType, setShowType] = useState<number>(1) // 展示方式：1：矩阵排列； 2:列表排列
+  const [filterList, setFilterList] = useState([])
+
+  const handleFilter = (filterValue: filterValueType) => {
+    let filteState = filterList.some(item => item.type === filterValue.type)
+    let tempFilterList = [...filterList]
+    if (filteState) {
+      tempFilterList = tempFilterList.map(item => {
+        if (item.type === filterValue.type) {
+          return filterValue
+        }
+        return item
+      })
+    } else {
+      tempFilterList = [...tempFilterList, filterValue]
+    }
+    setFilterList(tempFilterList)
+  }
+
+  const handleDeleteFilterItem = (key: string) => {
+    let tempFilterList = [...filterList]
+    tempFilterList = tempFilterList.filter(item => String(item.key) !== String(key))
+    setFilterList(tempFilterList)
+  }
+
+  /**
+   * 重置筛选
+   */
+  const handleResetFilter = () => {
+    setFilterList([])
+  }
+
+  return (
+    <div className="purchaseOnline">
+      <div className="mall_container">
+        <div className="commodity_container">
+          <Filter onFilter={handleFilter} />
+          <div className="commodity_main">
+            <div className="banner">
+              <img src={bannerImg} />
+            </div>
+            <div className="tool_bar">
+              <div className="tool_bar_left">
+                <div className="tool_bar_filter_item">
+                  <span>时间</span>
+                  <div className="price_filter_box">
+                    <CaretUpOutlined className="icon" />
+                    <CaretDownOutlined className="icon" />
+                  </div>
+                </div>
+                <div className="tool_bar_filter_item">
+                  <span>信用</span>
+                  <div className="price_filter_box">
+                    <CaretUpOutlined className="icon" />
+                    <CaretDownOutlined className="icon" />
+                  </div>
+                </div>
+              </div>
+              <div className="tool_bar_right">
+                <div className="count">
+                  <span>共</span>
+                  <label>43</label>
+                  <span>条求购信息</span>
+                </div>
+              </div>
+            </div>
+            {/* <div className="filter_bar">
+              <div className="filter_bar_left">
+                <div className="filter_bar_left_text">保存为常用筛选</div>
+                <div className="filter_bar_left_split"></div>
+                <div className="filter_bar_left_text" onClick={handleResetFilter}>重置</div>
+              </div>
+              <div className="filter_bar_list">
+                {
+                  filterList.map(item => (
+                    <div className="filter_bar_list_item" key={item.key}>
+                      <span className="filter_bar_list_item_text">{item.title}</span>
+                      <CloseOutlined className="filter_bar_list_item_icon" onClick={() => handleDeleteFilterItem(item.key)} />
+                    </div>
+                  ))
+                }
+              </div>
+            </div> */}
+            {
+              !!search ? <NoResult search={search} /> : (
+                <>
+                  <CommodityList showType={showType} />
+                  <div className="pagination_wrap">
+                    <Pagination showQuickJumper showSizeChanger={false} defaultCurrent={1} total={100} />
+                  </div>
+                </>
+              )
+            }
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+}
+
+export default PurchaseOnline

src/pages/lxMall/purchaseOnline/list.less

+.purchase_list {
+  display: flex;
+  flex-wrap: wrap;
+  margin: 0 -10px;
+
+  &.column {
+    flex-direction: column;
+    margin-top: 20px;
+  }
+
+  &.row {
+    flex-direction: row;
+  }
+
+  &_item {
+    width: 31.1%;
+    margin: 20px 10px 0 10px;
+    border: 1px solid rgba(238, 238, 238, 1);
+
+    &>a {
+      color: #333333;
+    }
+
+    &_title {
+      height: 50px;
+      line-height: 50px;
+      color: #333333;
+      font-size: 14px;
+      font-weight: 500;
+      padding-left: 15px;
+      background-color: #FAFAFA;
+    }
+
+    &_info_box {
+      padding: 20px 15px;
+
+      .purchase_list_item_info_line_split {
+        border-top: 1px dashed #EEEEEE;
+      }
+
+      .purchase_list_item_info_line {
+        font-size: 12px;
+        line-height: 20px;
+        color: #666666;
+        display: flex;
+        margin-bottom: 5px;
+
+        &>label {
+          color: #999999;
+          width: 86px;
+        }
+
+        &>span {
+          flex: 1;
+          width: 0;
+        }
+      }
+
+      .quoted_price_btn {
+        width: 140px;
+        height: 32px;
+        background-color: #D32F2F;
+        color: #ffffff;
+        font-size: 14px;
+        text-align: center;
+        line-height: 32px;
+        margin: 0 auto;
+        margin-top: 20px;
+
+        &:hover {
+          opacity: .9;
+        }
+      }
+
+      .purchase_list_item_info_name {
+        margin-top: 16px;
+        margin-bottom: 12px;
+      }
+
+      .credit_icon {
+        width: 16px;
+        height: 16px;
+        margin-right: 7px;
+      }
+    }
+
+
+    &.empty {
+      background: #f5f5f5;
+    }
+
+    a {
+      outline: none;
+    }
+
+    .info_box {
+      position: relative;
+      padding-top: 15px;
+
+      .company_info {
+        position: absolute;
+        display: none;
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 100%;
+        background-color: #ffffff;
+
+      }
+    }
+
+    .goods_img {
+      width: 220px;
+      height: 220px;
+      overflow: hidden;
+      margin: 0 auto;
+
+      &>img {
+        height: 100%;
+        display: block;
+        margin: 0 auto;
+      }
+    }
+
+    .goods_name {
+      font-size: 12px;
+      color: #333333;
+      text-align: left;
+      margin-top: 12px;
+      display: -webkit-box;
+      -webkit-box-orient: vertical;
+      -webkit-line-clamp: 2;
+      text-overflow: ellipsis;
+      overflow: hidden;
+      -webkit-box-orient: vertical;
+      word-wrap: break-word;
+      word-break: break-all;
+    }
+
+    .count {
+      font-size: 12px;
+      color: #999999;
+      margin-top: 12px;
+    }
+
+    .credit {
+      color: #999999;
+      font-size: 14px;
+      margin-top: 15px;
+      line-height: 20px;
+
+      &_icon {
+        width: 20px;
+        height: 20px;
+        margin-right: 5px;
+      }
+    }
+
+    .goods_price {
+      color: var(--mall_main_color);
+      line-height: 16px;
+      display: flex;
+      font-weight: bold;
+      align-items: center;
+      font-size: 18px;
+
+      &>span {
+        font-size: 14px;
+        font-weight: 400;
+      }
+    }
+  }
+
+}
\ No newline at end of file

src/pages/lxMall/purchaseOnline/list.tsx

+import React from 'react'
+import cx from 'classnames'
+import creditIcon from '@/assets/imgs/credit_icon.png'
+import './list.less'
+
+interface CommodityListPropsType {
+  showType: number
+}
+
+const CommodityList: React.FC<CommodityListPropsType> = (props) => {
+  const { showType } = props
+
+  let dataList = []
+  for (let i = 0; i < 20; i++) {
+    dataList.push(i)
+  }
+
+  return (
+    <div className={cx("purchase_list")}>
+      {
+        dataList.map((item, index) => (
+          <div key={item} className="purchase_list_item row">
+            <a href={`/shop/commodity/detail?id=asdjflewjfe&type=prompt`}>
+              <div className="purchase_list_item_title">头层自然摔牛皮，箱包鞋面料</div>
+              <div className="purchase_list_item_info_box">
+                <div className="purchase_list_item_info_line">
+                  <label>品类：</label>
+                  <span>硬度适中偏软</span>
+                </div>
+                <div className="purchase_list_item_info_line">
+                  <label>发货地：</label>
+                  <span>广东省/广州市、广东省/深圳市、广东省/东莞市</span>
+                </div>
+                <div className="purchase_list_item_info_line">
+                  <label>交付地址：</label>
+                  <span>广东省广州市海珠区新港东路1068号</span>
+                </div>
+                <div className="purchase_list_item_info_line">
+                  <label>交付日期：</label>
+                  <span>2020-08-12</span>
+                </div>
+                <div className="purchase_list_item_info_line">
+                  <label>截止时间：</label>
+                  <span>2020-08-12 11:58:26</span>
+                </div>
+                <div className="purchase_list_item_info_line_split"></div>
+                <div className="purchase_list_item_info_name">温州市龙昌皮业有限公司</div>
+                <div className="purchase_list_item_info_line">
+                  <img className="credit_icon" src={creditIcon} />
+                  <span className="credit_text">1288</span>
+                </div>
+                <div className="quoted_price_btn">立即报价</div>
+              </div>
+
+            </a>
+          </div>
+
+        ))
+      }
+    </div>
+  )
+}
+
+export default CommodityList

src/pages/lxMall/purchaseOnline/noResult.tsx

+import React from 'react'
+import styles from './index.less'
+
+interface NoResultPropsType {
+  search?: string
+}
+
+const NoResult: React.FC<NoResultPropsType> = (props) => {
+  const { search } = props
+  return (
+    <div className={styles.no_result}>
+      <div className={styles.no_result_tip}>
+        <div className={styles.no_result_tip_img}></div>
+        <div className={styles.no_result_tip_text}>
+          暂无求购信息
+        </div>
+      </div>
+    </div>
+  )
+}
+
+export default NoResult

src/pages/lxMall/purchaseOrder/index.less

+body {
+  background: #FFF;
+}
+
 .purchase_order {
   position: relative;
 

src/pages/lxMall/shop/index.less

-@import '../../../theme/style/common.less';
-@import '../../../theme/style/colors.less';
-
-body {
-  background-color: #F5F5F5;
+.shop {
+  padding-bottom: 52px;
+  background-color: #ffffff;
 }
 
+
 .banner {
   position: relative;
 

src/pages/lxMall/shop/index.tsx

@@ -34,7 +34,7 @@ const ShopIndex: React.FC = () => {
   ]
 
   return (
-    <Fragment>
+    <div className="shop">
       <div className="banner">
         <Carousel className="banner_list" autoplay pauseOnDotsHover>
           <div className="banner_list_item" >
@@ -67,7 +67,7 @@ const ShopIndex: React.FC = () => {
         ))
       }
       <Information />
-    </Fragment >
+    </div >
   )
 }
 

src/pages/lxMall/shopList/index.less

+.commodity {
+  padding-bottom: 52px;
+  background-color: #ffffff;
+
+  .commodity_container {
+    display: flex;
+    margin-top: 20px;
+
+    .commodity_main {
+      flex: 1;
+
+      .banner {
+        height: 160px;
+        overflow: hidden;
+        margin-bottom: 20px;
+
+        &>img {
+          width: 100%;
+        }
+      }
+
+      .tool_bar {
+        display: flex;
+        height: 48px;
+        width: 100%;
+
+
+        .tool_bar_left {
+          display: flex;
+          align-items: center;
+
+          .tool_bar_filter_item {
+            display: flex;
+            align-items: center;
+            color: #666666;
+            margin-right: 30px;
+            font-size: 12px;
+            cursor: pointer;
+
+            &>.icon {
+              width: 20px;
+              height: 20px;
+              display: inline-block;
+              line-height: 1;
+
+              &>img {
+                width: 20px;
+                height: 20px;
+              }
+            }
+
+            .price_filter_box {
+              display: flex;
+              flex-direction: column;
+              margin-left: 6px;
+
+              &>.icon {
+                font-size: 12px;
+                color: #CCCCCC;
+
+                &:last-child {
+                  margin-top: -4px;
+                }
+              }
+            }
+          }
+        }
+
+        .tool_bar_right {
+          margin-left: auto;
+          display: flex;
+          align-items: center;
+          font-size: 12px;
+
+          .count {
+            color: #999999;
+
+
+            &>label {
+              color: #333300;
+              margin: 0 2px;
+            }
+          }
+
+          &>.icon {
+            color: #CCCCCC;
+            margin-left: 25px;
+            font-size: 22px;
+            cursor: pointer;
+
+            &.active {
+              color: #333333;
+            }
+          }
+        }
+      }
+
+      .filter_bar {
+        margin-top: 7px;
+        display: flex;
+        align-items: center;
+
+        .filter_bar_left {
+          display: flex;
+          align-items: center;
+          font-size: 12px;
+          padding-left: 10px;
+
+          &_text {
+            color: #3A3A3A;
+            cursor: pointer;
+          }
+
+          &_split {
+            height: 16px;
+            width: 1px;
+            background-color: #E5E5E5;
+            margin: 0 15px;
+          }
+
+        }
+
+        .filter_bar_list {
+          display: flex;
+          margin-left: 30px;
+
+          .filter_bar_list_item {
+            height: 20px;
+            line-height: 20px;
+            padding: 0 5px;
+            background-color: #F5F5F5;
+            font-size: 12px;
+            color: #333333;
+            border-radius: 4px;
+            margin-right: 15px;
+            // margin-bottom: 8px;
+
+            &_text {
+              &>b {
+                margin-left: 5px;
+                color: #D32F2F;
+              }
+            }
+
+            &_icon {
+              margin-left: 5px;
+              cursor: pointer;
+            }
+          }
+        }
+      }
+
+      .pagination_wrap {
+        margin-top: 60px;
+        text-align: right;
+
+        .ant-pagination-item {
+
+          &:hover,
+          &:active {
+            border-color: var(--mall_main_color);
+
+            &>a {
+              color: var(--mall_main_color);
+            }
+          }
+        }
+
+        .ant-pagination-item-active {
+          background-color: var(--mall_main_color);
+          border-color: var(--mall_main_color);
+
+          &>a {
+            color: #ffffff;
+          }
+        }
+      }
+    }
+  }
+}
+
+.no_result {
+  padding-top: 120px;
+  padding-left: 287px;
+
+  &_tip {
+    font-size: 14px;
+    color: #D32F2F;
+    font-weight: 500;
+    display: flex;
+
+    &_search {
+      color: #333333;
+    }
+
+    &_img {
+      width: 30px;
+      height: 30px;
+      overflow: hidden;
+      margin-right: 16px;
+
+      &>img {
+        width: 30px;
+        height: 30px;
+      }
+    }
+  }
+
+  &_suggest {
+    margin-top: 12px;
+    font-size: 12px;
+    color: #999999;
+    padding-left: 46px;
+
+    &_list {
+      padding: 0;
+      margin: 0;
+
+      &>li {
+        list-style: none;
+      }
+    }
+  }
+}
\ No newline at end of file

src/pages/lxMall/shopList/index.tsx

+import React, { useState } from 'react'
+import { CaretUpOutlined, CaretDownOutlined, UnorderedListOutlined, AppstoreOutlined, CloseOutlined } from '@ant-design/icons'
+import Filter from '../components/Filter'
+import cx from 'classnames'
+import { Pagination } from 'antd'
+import CommodityList from './list'
+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'
+import './index.less'
+
+interface filterValueType {
+  key: string;
+  title: string;
+  type: FILTER_TYPE;
+}
+
+enum FILTER_TYPE {
+  category = 'category', // 分类
+  brand = 'brand', // 品牌
+  style = 'style', // 风格
+  price = 'price', // 价格
+  area = 'area', // 适用地区
+  commodityType = 'commodityType', // 商品类型
+}
+
+interface ShopListPropsType {
+  location: any
+}
+
+const ShopList: React.FC<ShopListPropsType> = (props) => {
+  const { query: { search = "" } } = props.location
+  const [showType, setShowType] = useState<number>(1) // 展示方式：1：矩阵排列； 2:列表排列
+  const [filterList, setFilterList] = useState([])
+
+  const handleFilter = (filterValue: filterValueType) => {
+    let filteState = filterList.some(item => item.type === filterValue.type)
+    let tempFilterList = [...filterList]
+    if (filteState) {
+      tempFilterList = tempFilterList.map(item => {
+        if (item.type === filterValue.type) {
+          return filterValue
+        }
+        return item
+      })
+    } else {
+      tempFilterList = [...tempFilterList, filterValue]
+    }
+    setFilterList(tempFilterList)
+  }
+
+  const handleDeleteFilterItem = (key: string) => {
+    let tempFilterList = [...filterList]
+    tempFilterList = tempFilterList.filter(item => String(item.key) !== String(key))
+    setFilterList(tempFilterList)
+  }
+
+  /**
+   * 重置筛选
+   */
+  const handleResetFilter = () => {
+    setFilterList([])
+  }
+
+  return (
+    <div className="commodity">
+      <div className="mall_container">
+        <div className="commodity_container">
+          <Filter onFilter={handleFilter} />
+          <div className="commodity_main">
+            <div className="tool_bar">
+              <div className="tool_bar_left">
+                <div className="tool_bar_filter_item">
+                  <span>信用</span>
+                  <i className="icon">
+                    <img src={arrowDownIcon} />
+                  </i>
+                </div>
+              </div>
+              <div className="tool_bar_right">
+                <div className="count">
+                  <span>共</span>
+                  <label>43</label>
+                  <span>个店铺</span>
+                </div>
+              </div>
+            </div>
+            {/* <div className="filter_bar">
+              <div className="filter_bar_left">
+                <div className="filter_bar_left_text">保存为常用筛选</div>
+                <div className="filter_bar_left_split"></div>
+                <div className="filter_bar_left_text" onClick={handleResetFilter}>重置</div>
+              </div>
+              <div className="filter_bar_list">
+                {
+                  filterList.map(item => (
+                    <div className="filter_bar_list_item" key={item.key}>
+                      <span className="filter_bar_list_item_text">{item.title}</span>
+                      <CloseOutlined className="filter_bar_list_item_icon" onClick={() => handleDeleteFilterItem(item.key)} />
+                    </div>
+                  ))
+                }
+              </div>
+            </div> */}
+            {
+              !!search ? <NoResult search={search} /> : (
+                <>
+                  <CommodityList showType={showType} />
+                  <div className="pagination_wrap">
+                    <Pagination showQuickJumper showSizeChanger={false} defaultCurrent={1} total={100} />
+                  </div>
+                </>
+              )
+            }
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+}
+
+export default ShopList

src/pages/lxMall/shopList/list.less

+.shop_list {
+  position: relative;
+
+  &_item {
+    border: 1px solid rgba(238, 238, 238, 1);
+    margin-bottom: 20px;
+    padding: 18px 20px 12px 20px;
+    display: flex;
+    color: #333333;
+
+    .shop_list_left {
+      flex: 1;
+      width: 0;
+
+      .shop_list_info {
+        display: flex;
+
+        &_imgbox {
+          width: 70px;
+          height: 70px;
+          margin-right: 15px;
+
+          &_img {
+            width: 70px;
+            height: 70px;
+            background-repeat: no-repeat;
+            background-size: 100% auto;
+            background-position: center center;
+          }
+        }
+
+        &_box {
+          width: 100%;
+        }
+
+        &_name {
+          display: flex;
+        }
+
+        &_city {
+          font-size: 12px;
+          margin-left: auto;
+        }
+
+        &_about {
+          display: flex;
+          margin-top: 14px;
+
+          &_item {
+            display: flex;
+            align-items: center;
+            margin-right: 20px;
+
+            &>span {
+              font-size: 14px;
+              color: #333333;
+              line-height: 20px;
+
+              &.red {
+                color: #D32F2F;
+                margin-right: 4px;
+              }
+            }
+
+            &>.icon {
+              position: relative;
+              top: -1px;
+              overflow: hidden;
+              margin-right: 5px;
+
+              &>img {
+                width: 20px;
+                height: 20px;
+
+              }
+            }
+          }
+        }
+
+      }
+
+      .shop_satisfaction {
+        font-size: 12px;
+        margin-top: 6px;
+
+        &_rate {
+          font-size: 16px;
+        }
+      }
+
+      .shop_list_line {
+        display: flex;
+        font-size: 12px;
+        margin-top: 14px;
+
+        &>label {
+          color: #999999;
+          margin-right: 5px;
+        }
+
+        &_link {
+          color: #333333;
+          margin-right: 15px;
+        }
+
+        &_brief {
+          flex: 1;
+          width: 0;
+          overflow: hidden;
+          text-overflow: ellipsis;
+          white-space: nowrap;
+
+        }
+      }
+    }
+
+    .shop_list_goods {
+      display: flex;
+      width: 340px;
+      justify-content: flex-end;
+
+      &_item {
+        margin-left: 20px;
+
+        &_imgbox {
+          &_img {
+            width: 140px;
+            background-repeat: no-repeat;
+            background-size: 100% auto;
+            background-position: center center;
+            height: 140px;
+          }
+        }
+
+        &_price {
+          color: #D32F2F;
+          margin-top: 10px;
+          text-align: center;
+
+          &>.unit {
+            font-size: 12px;
+          }
+        }
+      }
+    }
+  }
+
+}
\ No newline at end of file

src/pages/lxMall/shopList/list.tsx

+import React from 'react'
+import cx from 'classnames'
+import { Link } from 'umi'
+import { Rate } from 'antd'
+import shop_icon from '@/assets/imgs/shop_icon.png'
+import credit_icon from '@/assets/imgs/credit_icon.png'
+import shop_logo from '@/assets/imgs/shop_logo.png'
+import './list.less'
+
+interface CommodityListPropsType {
+  showType: number
+}
+
+const CommodityList: React.FC<CommodityListPropsType> = (props) => {
+  const { showType } = props
+
+  let dataList = []
+  for (let i = 0; i < 10; i++) {
+    dataList.push(i)
+  }
+
+  return (
+    <div className={cx("shop_list")}>
+      {
+        dataList.map((item, index) => (
+          <div key={item} className="shop_list_item row">
+            <div className="shop_list_left">
+              <div className="shop_list_info">
+                <div className="shop_list_info_imgbox">
+                  <div className="shop_list_info_imgbox_img" style={{ backgroundImage: `url(${shop_logo})` }}></div>
+                </div>
+                <div className="shop_list_info_box">
+                  <div className="shop_list_info_name">
+                    <span>温州市龙昌皮业有限公司</span>
+
+                    <span className="shop_list_info_city">广东/广州</span>
+                  </div>
+                  <div className="shop_list_info_about">
+                    <div className="shop_list_info_about_item">
+                      <i className="icon"><img src={credit_icon} /></i>
+                      <span>1288</span>
+                    </div>
+                    <div className="shop_list_info_about_item">
+                      <i className="icon"><img src={shop_icon} /></i>
+                      <span className="red">2</span>
+                      <span>年</span>
+                    </div>
+                  </div>
+                </div>
+              </div>
+              <div className="shop_satisfaction">
+                <label>满意度：</label>
+                <Rate className="shop_satisfaction_rate" disabled defaultValue={2} />
+              </div>
+              <div className="shop_list_line">
+                <label>主营</label>
+                <span className="shop_list_line_brief">全粒面牛皮｜修面皮｜漆色皮｜打腊皮｜水腊皮｜疯马皮｜珠光变色｜水腊皮｜疯马皮｜珠光变色｜珠光变色</span>
+              </div>
+              <div className="shop_list_line">
+                <label>以上信息已通过会员认证｜</label>
+                <Link to="/shop?id=12" className="shop_list_line_link">资质证书 &gt;</Link>
+                <Link to="/shop?id=12" className="shop_list_line_link">公司信息 &gt;</Link>
+              </div>
+            </div>
+            <div className="shop_list_goods">
+              <Link to={`/shop/commodity/detail?id=asdjflewjfe&type=prompt`}>
+                <div className="shop_list_goods_item">
+                  <div className="shop_list_goods_item_imgbox">
+                    <div className="shop_list_goods_item_imgbox_img" style={{ backgroundImage: `url(https://woodmartcdn-cec2.kxcdn.com/wp-content/uploads/2016/09/product-furniture-1.jpg)` }}></div>
+                  </div>
+                  <div className="shop_list_goods_item_price">
+                    <span className="unit">￥</span>
+                    <span>79.00</span>
+                  </div>
+                </div>
+              </Link>
+              <Link to={`/shop/commodity/detail?id=asdjflewjfe&type=prompt`}>
+                <div className="shop_list_goods_item">
+                  <div className="shop_list_goods_item_imgbox">
+                    <div className="shop_list_goods_item_imgbox_img" style={{ backgroundImage: `url(https://woodmartcdn-cec2.kxcdn.com/wp-content/uploads/2016/09/product-furniture-1.jpg)` }}></div>
+                  </div>
+                  <div className="shop_list_goods_item_price">
+                    <span className="unit">￥</span>
+                    <span>79.00</span>
+                  </div>
+                </div>
+              </Link>
+            </div>
+          </div>
+
+        ))
+      }
+    </div>
+  )
+}
+
+export default CommodityList

src/pages/lxMall/shopList/noResult.tsx

+import React from 'react'
+import styles from './index.less'
+
+interface NoResultPropsType {
+  search?: string
+}
+
+const NoResult: React.FC<NoResultPropsType> = (props) => {
+  const { search } = props
+  return (
+    <div className={styles.no_result}>
+      <div className={styles.no_result_tip}>
+        <div className={styles.no_result_tip_img}></div>
+        <div className={styles.no_result_tip_text}>
+          暂无求购信息
+        </div>
+      </div>
+    </div>
+  )
+}
+
+export default NoResult

src/store/category/index.ts

 import { action, computed, observable, runInAction } from 'mobx'
 import { GlobalConfig } from '@/global/config'
 import { PublicApi } from '@/services/api'
-import { GetSearchCommodityTemplateGetCategoryListResponse } from '@/services'
+
+const defaultCategory = [
+  {
+    id: 1,
+    name: '成品皮',
+    categoryTree: [
+      {
+        id: 11,
+        title: '牛皮',
+        children: [
+          {
+            id: 111,
+            title: '黄牛皮'
+          },
+          {
+            id: 112,
+            title: '水牛皮'
+          }
+        ]
+      }
+    ]
+  },
+  {
+    id: 2,
+    name: '成品皮',
+    categoryTree: [
+      {
+        id: 21,
+        title: '牛皮',
+        children: [
+          {
+            id: 211,
+            title: '黄牛皮'
+          },
+          {
+            id: 212,
+            title: '水牛皮'
+          }
+        ]
+      }
+    ]
+  }
+]
 
 class CategoryStore {
-  @observable public categoryList: GetSearchCommodityTemplateGetCategoryListResponse = []; // 品类列表
+  @observable public categoryList = defaultCategory; // 品类列表
 
-  @action.bound
-  public async fetchCategoryList() {
-    let res = await PublicApi.getSearchCommodityTemplateGetCategoryList()
+  // @action.bound
+  // public async fetchCategoryList() {
+  //   let res = await PublicApi.getSearchCommodityTemplateGetCategoryList()
 
-    runInAction(() => {
-      this.categoryList = res.data || []
-    })
-  }
+  //   runInAction(() => {
+  //     this.categoryList = res.data || []
+  //   })
+  // }
 }
 
 export default CategoryStore

src/theme/science/styles/colors.less

+// science下的全局变量在此定义
+// 企业商城科技模板
 .theme-mall-science {
-  // science下的全局变量在此定义
   --mall_main_color: #D32F2F;
   --mall_sub_color: rgba(211, 47, 47, 0.1);
 
@@ -7,13 +8,24 @@
   --category_content_title_text: #333333;
   --category_content_sub_title_text: #666666;
 
-  // 店铺科技类模板颜色配置
-  &.theme-shop-science {
-    --mall_main_color: #D32F2F;
-    --mall_sub_color: rgba(211, 47, 47, 0.1);
+}
 
-    --category_content_bg: #FFFFFF;
-    --category_content_title_text: #333333;
-    --category_content_sub_title_text: #666666;
-  }
+// 渠道科技类模板
+.theme-channel-science {
+  --mall_main_color: #464552;
+  --mall_sub_color: #FFFFFF;
+
+  --category_content_bg: #464552;
+  --category_content_title_text: #FFFFFF;
+  --category_content_sub_title_text: rgba(255, 255, 255, 0.45);
+}
+
+// 店铺科技类模板颜色配置
+.theme-shop-science {
+  --mall_main_color: #D32F2F;
+  --mall_sub_color: rgba(211, 47, 47, 0.1);
+
+  --category_content_bg: #FFFFFF;
+  --category_content_title_text: #333333;
+  --category_content_sub_title_text: #666666;
 }
\ No newline at end of file

src/wrappers/getSiteConfig.tsx

@@ -8,7 +8,7 @@ interface AuthComponentPropsType {
 }
 
 const GetSiteConfig: React.FC<AuthComponentPropsType> = (props) => {
-  const [loading, setLoading] = useState<boolean>(true)
+  const [loading, setLoading] = useState<boolean>(false)
   const { themeName } = props.ThemeStore
   // useMemo(() => {
   //   console.log('当前使用模板', themeName)
@@ -17,20 +17,20 @@ const GetSiteConfig: React.FC<AuthComponentPropsType> = (props) => {
 
   useEffect(() => {
     // 根据当前网站域名加载站点配置和商城配置
-    const domainName = location.href
-    setTimeout(() => {
-      setLoading(false)
-      console.log('当前使用模板', themeName)
-      // document.body.className = `theme-${themeName}`;
-      let body = document.getElementsByTagName('body')[0];
-      let styleLink = document.createElement('link');
-      styleLink.type = 'text/css';
-      styleLink.rel = 'stylesheet';
-      styleLink.id = 'theme-style';
-      styleLink.href = `/theme/${themeName}.css`;
-      body.className = `theme-mall-${themeName}`;
-      document.body.append(styleLink);
-    }, 100);
+    // const domainName = location.href
+    // setTimeout(() => {
+    //   setLoading(false)
+    //   console.log('当前使用模板', themeName)
+    //   // document.body.className = `theme-${themeName}`;
+    //   let body = document.getElementsByTagName('body')[0];
+    //   let styleLink = document.createElement('link');
+    //   styleLink.type = 'text/css';
+    //   styleLink.rel = 'stylesheet';
+    //   styleLink.id = 'theme-style';
+    //   styleLink.href = `/theme/${themeName}.css`;
+    //   body.className = `theme-mall-${themeName}`;
+    //   document.body.append(styleLink);
+    // }, 100);
 
   }, [])