feat:渠道商城进货单

config/channelRoutes/index.ts

@@ -72,6 +72,15 @@ const shopRoute = {
       component: '@/pages/lxMall/shopAbout',
     },
     {
+      // 进货单
+      path: '/channelmall/purchaseOrder',
+      name: 'purchaseOrder',
+      key: 'purchaseOrder',
+      hide: true,
+      hideHeader: true,
+      component: '@/pages/lxMall/purchaseOrder',
+    },
+    {
       path: '/noAuth',
       component: '@/pages/403',
     },

demo.js

@@ -5,7 +5,7 @@ const mockData = {
     global: {
       siteId: 352,
       siteUrl: 'http://10.0.0.25:4396',
-      logo: 'https://shushangyun01.oss-cn-shenzhen.aliyuncs.com/4db4e7c5424c471c968ab540bce027f31597319423082.png',
+      logo: 'http://10.0.0.28:88/group1/M00/00/0A/CgAAHF9fF0WAcD-hAAAcbWJWu6M407.png',
       countryList: [
         {
           name: '简体中文-ZH',
@@ -32,7 +32,6 @@ const mockData = {
   }
 }
 
-
 exports.fetchConfig = async () => {
   return new Promise((resolve, reject) => {
     setTimeout(() => {

scripts/services/index.js

@@ -44,7 +44,7 @@ const serviceConfig = {
     orderMode: {
       url: '/order/rule/configuration/all',
       method: 'get'
-    }
+    },
     // site: {
     //   url: '/manage/paas/site/all',
     //   method: 'get',

src/app.tsx

@@ -53,7 +53,8 @@ const mallLists = [
   '/channelmall/infomation',
   '/channelmall/infomation/detail',
   '/channelmall/infomation/search',
-  '/channelmall/about'
+  '/channelmall/about',
+  '/channel/purchaseOrder'
 ]
 
 // let routeAuthUrls: any[] = []

src/pages/lxMall/commodity/index.tsx

@@ -60,9 +60,13 @@ const Commodity: React.FC<CommodityPropsType> = (props) => {
   const [filterConfig, setFilterConfig] = useState([FILTER_TYPE.categoryAndAttr, FILTER_TYPE.brand, FILTER_TYPE.price, FILTER_TYPE.useArea, FILTER_TYPE.commodityType])
 
   useEffect(() => {
-    console.log(layoutType, "layoutType")
+    setCurrent(1)
     fetchCommodityList()
-  }, [filterParam, current])
+  }, [filterParam])
+
+  useEffect(() => {
+    fetchCommodityList()
+  }, [current])
 
   useEffect(() => {
     if (categoryId && categoryName) {

src/pages/lxMall/commodityDetail/index.tsx

@@ -61,6 +61,7 @@ const CommodityDetail = (props) => {
   const [commodityDetail, setCommodityDetail] = useState<GetSearchShopStoreGetCommodityDetailResponse>()
   const [attrAndValList, setAttrAndValList] = useState<any>({})
   const [selectAttrVal, setSelectAttrVal] = useState<selectAttrValType[]>([])
+  const [stockCount, setStockCount] = useState<number>(0)
   const [commodityImgList, setCommodityImgList] = useState<imgItemType[]>([])
   const [commodityPriceInfo, setCommodityPriceInfo] = useState([])
   const [parameter, setParameter] = useState<number>() // 权益参数
@@ -179,15 +180,14 @@ const CommodityDetail = (props) => {
           setSelectCommodityId(item.id)
           setCurrentPriceRange(item.unitPrice)
           setAttrAndValList(item)
+          setStockCount(item.stockCount)
         }
       }
     }
   }
 
   const judgeArrisCommon = (list, otherList) => {
-
     if (list.length === otherList.length) {
-
       let result = list.every(listItem => {
         return otherList.some(item => {
           return JSON.stringify(item) === JSON.stringify(listItem)
@@ -253,7 +253,7 @@ const CommodityDetail = (props) => {
             memberDiscount: parameter,
             category: commodityDetail.customerCategory.name,
             brand: commodityDetail.brand.name,
-            stockCount: commodityDetail.stockCount,
+            stockCount: stockCount,
             commodityPic: attrAndValList.commodityPic[0],
             attribute: attrAndValList.attributeAndValueList
           }
@@ -288,7 +288,7 @@ const CommodityDetail = (props) => {
       case COMMODITY_TYPE.prompt:
         return (
           <>
-            <Button disabled={buyCount <= 0} className={cx(styles.product_info_btn_item, styles.buy)} onClick={() => handleToBuy()}>立即订购</Button>
+            <Button disabled={stockCount <= 0} className={cx(styles.product_info_btn_item, styles.buy)} onClick={() => handleToBuy()}>立即订购</Button>
             <div className={cx(styles.product_info_btn_item, styles.add)} onClick={() => handleAddToPurchase()} >
               <img className={styles.btn_icon} src={jinhuodanIcon} />
               <span>加入进货单</span>
@@ -350,6 +350,7 @@ const CommodityDetail = (props) => {
     }
 
     setCurrentPriceRange(unitPriceAndPicList[0].unitPrice)
+    setStockCount(unitPriceAndPicList[0].stockCount)
     setCommodityImgList(tempImgList)
     setAttributeList(tempAttrList)
   }
@@ -453,7 +454,9 @@ const CommodityDetail = (props) => {
    */
   const judgeHasAttr = (attrId: number, attrValId: number) => {
     let result = true
+    let newSelectAttrVal = JSON.parse(JSON.stringify(selectAttrVal))
     if (selectAttrVal.length > 0) {
+      newSelectAttrVal.pop()
       if (commodityDetail?.unitPriceAndPicList) {
         let tempList = []
         for (let item of commodityDetail?.unitPriceAndPicList) {
@@ -463,11 +466,11 @@ const CommodityDetail = (props) => {
               attrValId: attrItem.customerAttributeValue.id
             }
           })
-          if (judegeListInList(temp, selectAttrVal)) {
+          if (judegeListInList(temp, newSelectAttrVal)) {
             tempList.push(temp)
           }
         }
-        if (selectAttrVal.length < attributeList.length && selectAttrVal[0].attrId === attrId) {
+        if (newSelectAttrVal.length < attributeList.length && selectAttrVal[0].attrId === attrId) {
           return true
         }
         result = tempList.some(item => item.some(childItem => childItem.attrId === attrId && childItem.attrValId === attrValId))
@@ -582,16 +585,16 @@ const CommodityDetail = (props) => {
                   <div className={styles.product_info_line}>
                     <div className={styles.product_info_line_label}>库存数量</div>
                     <div className={styles.product_info_line_brief}>
-                      <span className={styles.text}>{numFormat(commodityDetail?.stockCount)}{commodityDetail?.unitName}</span>
+                      <span className={styles.text}>{numFormat(stockCount)}{commodityDetail?.unitName}</span>
                     </div>
                   </div>
                 ) : (
                     <div className={styles.product_info_line}>
                       <div className={styles.product_info_line_label}>{commodityDetail?.priceType === COMMODITY_TYPE.prompt ? '购买数量' : '兑换数量'}</div>
                       <div className={cx(styles.product_info_line_brief, styles.row)}>
-                        <InputNumber disabled={commodityDetail?.stockCount === 0} value={buyCount} min={commodityDetail?.priceType === COMMODITY_TYPE.prompt ? commodityDetail?.minOrder : 1} max={commodityDetail?.stockCount} onChange={(value) => setBuyCount(value)} />
+                        <InputNumber disabled={stockCount === 0} value={buyCount} min={commodityDetail?.priceType === COMMODITY_TYPE.prompt ? commodityDetail?.minOrder : 1} max={stockCount} onChange={(value) => setBuyCount(value)} />
                         <span className={cx(styles.text, styles.mar_left_10)}>{commodityDetail?.unitName}</span>
-                        <span className={cx(styles.text, styles.mar_left_10)}>(库存{numFormat(commodityDetail?.stockCount)}{commodityDetail?.unitName})</span>
+                        <span className={cx(styles.text, styles.mar_left_10)}>(库存{numFormat(stockCount)}{commodityDetail?.unitName})</span>
                       </div>
                     </div>
                   )

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

@@ -15,7 +15,7 @@
     .logo {
       padding-left: 14px;
 
-      &>img {
+      img {
         width: 145px;
         height: 50px;
       }

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

 import React from 'react'
 import { Link } from 'umi'
 import logo from '@/theme/imgs/logo_w.png'
-
 import styles from './index.less'
+import { GlobalConfig } from '@/global/config'
+import { LAYOUT_TYPE } from '@/constants'
 
 interface ShopHeaderPropsType {
   title?: string;
+  type: LAYOUT_TYPE;
+  logoUrl?: string;
+  shopUrlParam?: string;
 }
 
 const CommonHeader: React.FC<ShopHeaderPropsType> = (props) => {
 
-  const { title } = props
+  const { title, type, logoUrl, shopUrlParam } = props
+  const getHomeLink = () => {
+    let link = '/'
+    switch (type) {
+      case LAYOUT_TYPE.channel:
+        link = `/channelmall?id=${shopUrlParam}`
+        break
+      case LAYOUT_TYPE.mall:
+      case LAYOUT_TYPE.shop:
+      default:
+        link = '/'
+        break
+    }
+    return link
+  }
 
   return (
     <div className={styles.common_header}>
       <div className={styles.common_header_container}>
-        <div className="logo">
-          <img src={logo} />
+        <div className={styles.logo}>
+          <Link to={getHomeLink()}>
+            <img src={logoUrl} />
+          </Link>
         </div>
         <div className={styles.common_header_split}></div>
         <div className={styles.common_header_title}>{title}</div>

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

@@ -3,7 +3,7 @@ import cx from 'classnames'
 import { Input } from 'antd'
 import { history } from 'umi'
 import { FileTextOutlined } from '@ant-design/icons'
-import logo from '@/theme/imgs/logo_w.png'
+import { GlobalConfig } from '@/global/config'
 import isEmpty from 'lodash/isEmpty'
 import styles from './index.less'
 
@@ -50,7 +50,7 @@ const Header: React.FC<HeaderPropsType> = (props) => {
     <div className={styles.header}>
       <div className={styles.header_container}>
         <div className={styles.logo}>
-          <img src={logo} />
+          <img src={GlobalConfig.global.logo} />
         </div>
         <div className={styles.mall_search}>
           <div className={styles.mall_search_tags}>

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

 import React, { useState } from 'react'
 import { history } from 'umi'
 import { createFromIconfontCN } from '@ant-design/icons'
+import { LAYOUT_TYPE } from '@/constants'
 import FootPrint from './footprint'
 import './index.less'
 
@@ -8,14 +9,32 @@ const MyIcon = createFromIconfontCN({
   scriptUrl: '//at.alicdn.com/t/font_1971099_fazltoyqwsg.js', // 在 iconfont.cn 上生成
 });
 
-const SideNav: React.FC = () => {
+interface SideNavPropsType {
+  type: LAYOUT_TYPE,
+  shopUrlParam?: string
+}
 
+const SideNav: React.FC<SideNavPropsType> = (props) => {
+  const { type, shopUrlParam } = props
   const [footPrintVisible, setFootPrintVisible] = useState<boolean>(false)
 
   const showToggleFootPrint = () => {
     setFootPrintVisible(!footPrintVisible)
   }
 
+  const linkToPurchaseOrder = () => {
+    let link = '/purchaseOrder'
+    switch (type) {
+      case LAYOUT_TYPE.channel:
+        link = `/channelmall/purchaseOrder?id=${shopUrlParam}`
+        break
+      default:
+        link = '/purchaseOrder'
+        break
+    }
+    history.push(link)
+  }
+
   return (
     <div className="side_nav">
       <div className="side_nav_container">
@@ -26,7 +45,7 @@ const SideNav: React.FC = () => {
           <div className="side_nav_list_item">
             <MyIcon type="icon-shoucang" />
           </div>
-          <div className="side_nav_list_item" onClick={() => history.push('/purchaseOrder')}>
+          <div className="side_nav_list_item" onClick={() => linkToPurchaseOrder()}>
             <MyIcon type="icon-cart" />
           </div>
           <div className="side_nav_list_item">
@@ -40,7 +59,6 @@ const SideNav: React.FC = () => {
           </div>
         </div>
         <FootPrint visible={footPrintVisible} />
-        {/* <div className="footprint">111</div> */}
       </div>
     </div>
   )

src/pages/lxMall/layouts/LXChannelLayout.tsx

@@ -90,7 +90,7 @@ const LXChannelLayout: React.FC<LXMallLayoutPropsType> = (props) => {
           children && React.Children.map(children, (child: any) => {
             return React.cloneElement(child,
               {
-                layoutType: 'channel',
+                layoutType: LAYOUT_TYPE.channel,
                 shopId: query.shopId,
                 memberId: query.memberId,
                 shopUrlParam: id,
@@ -101,7 +101,7 @@ const LXChannelLayout: React.FC<LXMallLayoutPropsType> = (props) => {
         }
       </div>
       <Footer />
-      <SideNav />
+      <SideNav type={LAYOUT_TYPE.channel} shopUrlParam={id} />
     </div>
   )
 }

src/pages/lxMall/layouts/LXMallLayout.tsx

@@ -69,14 +69,14 @@ const LXMallLayout: React.FC<LXMallLayoutPropsType> = (props) => {
           children && React.Children.map(children, (child: any) => {
             return React.cloneElement(child,
               {
-                layoutType: 'mall',
+                layoutType: LAYOUT_TYPE.mall,
               },
             );
           })
         }
       </div>
       <Footer />
-      <SideNav />
+      <SideNav type={LAYOUT_TYPE.mall} />
     </div>
   )
 }

src/pages/lxMall/layouts/LXShopLayout.tsx

@@ -79,7 +79,7 @@ const LXShopLayout: React.FC<LXMallLayoutPropsType> = (props) => {
           children && React.Children.map(children, (child: any) => {
             return React.cloneElement(child,
               {
-                layoutType: 'shop',
+                layoutType: LAYOUT_TYPE.shop,
                 shopId: query.shopId,
                 memberId: query.memberId,
                 shopUrlParam: shopId,
@@ -90,7 +90,7 @@ const LXShopLayout: React.FC<LXMallLayoutPropsType> = (props) => {
         }
       </div>
       <Footer />
-      <SideNav />
+      <SideNav type={LAYOUT_TYPE.shop} />
     </div>
   )
 }

src/pages/lxMall/purchaseOrder/index.tsx

@@ -10,11 +10,20 @@ import { PublicApi } from '@/services/api'
 import { priceFormat, numFormat } from "@/utils/numberFomat"
 import { useLocalStore, observer } from 'mobx-react'
 import { store } from '@/store'
+import { LAYOUT_TYPE } from '@/constants'
 import { GetProductPurchaseGetPurchaseListResponse } from '@/services/ProductApi'
+import { GetTemplateChannelFindChannelResponse } from '@/services/TemplateApi'
+import { GlobalConfig } from '@/global/config'
 
-interface PurchaseOrderPropsType { }
+interface PurchaseOrderPropsType {
+  layoutType: LAYOUT_TYPE,
+  shopInfo: GetTemplateChannelFindChannelResponse,
+  shopUrlParam: string
+}
 
 const PurchaseOrder: React.FC<PurchaseOrderPropsType> = (props) => {
+  const { layoutType, shopInfo, shopUrlParam } = props
+  console.log(shopInfo, "shopInfo")
   const OrderStore = useLocalStore(() => store.OrderStore)
   const { updateOrderInfo } = OrderStore
   const [indeterminate, setIndeterminate] = useState<boolean>(false)
@@ -95,7 +104,6 @@ const PurchaseOrder: React.FC<PurchaseOrderPropsType> = (props) => {
         defaultCheckedList: item.orderList.map(item => item.id)
       })
     })
-    console.log(result)
     setOrderList(result)
     // !initChecked && setCheckedList(result.map(item => item.id))
   }
@@ -476,7 +484,12 @@ const PurchaseOrder: React.FC<PurchaseOrderPropsType> = (props) => {
   return (
     <div className={styles.purchase_order}>
       <div className={styles.purchase_order_container}>
-        <CommonHeader title="我的进货单" />
+        <CommonHeader
+          title="我的进货单"
+          type={layoutType}
+          logoUrl={layoutType === LAYOUT_TYPE.channel ? shopInfo?.logo : GlobalConfig.global.logo}
+          shopUrlParam={shopUrlParam}
+        />
         <div className={styles.purchase_order_title}>
           <span className={styles.purchase_order_title_text}>我的进货单</span>
         </div>