feat:商品搜索

src/global/config/global.d.ts~9fd9e0c42f4f7acd87288c2a6cbbf656aae80311 → src/global/config/global.d.ts

@@ -17,8 +17,23 @@ export interface UserRegister {
 	useType: UseType;
 }
 
+export interface ShopInfo {
+	id: number;
+	name: string;
+	type: number;
+	environment: number;
+	logoUrl: string;
+	describe: string;
+	state: number;
+	url: string;
+}
+
 export interface Web {
-	shopInfo: any[];
+	shopInfo: ShopInfo[];
+}
+
+export interface PayConfig {
+	paymemberConfig?: any;
 }
 
 export interface CountryList {
@@ -37,5 +52,6 @@ export interface Global {
 export interface RootObject {
 	userRegister: UserRegister;
 	web: Web;
+	payConfig: PayConfig;
 	global: Global;
 }
\ No newline at end of file

src/pages/lxMall/commodity/index.tsx

@@ -61,13 +61,18 @@ const Commodity: React.FC<CommodityPropsType> = (props) => {
 
   useEffect(() => {
     fetchCommodityList()
-  }, [filterParam, current])
+
+  }, [filterParam, current, search])
 
   const fetchCommodityList = () => {
-    let param = {
+    let param: filterQuery = {
       current,
       pageSize
     }
+    if (!!search) {
+      param.name = search
+    }
+
     if (!isEmpty(filterParam)) {
       param = Object.assign(param, filterParam)
     }
@@ -77,13 +82,11 @@ const Commodity: React.FC<CommodityPropsType> = (props) => {
         setCommodityList(res.data.data)
         setTotalCount(res.data.totalCount)
       }
-
     })
-
-
   }
 
   const handleFilter = (filterValue: filterValueType) => {
+
     let filteState = filterList.some(item => item.type === filterValue.type)
     let tempFilterList = [...filterList]
     if (filteState) {
@@ -96,6 +99,7 @@ const Commodity: React.FC<CommodityPropsType> = (props) => {
     } else {
       tempFilterList = [...tempFilterList, filterValue]
     }
+    console.log(tempFilterList, "tempFilterList")
     setFilterList(tempFilterList)
   }
 
@@ -175,7 +179,7 @@ const Commodity: React.FC<CommodityPropsType> = (props) => {
               </div>
             </div>
             {
-              !!search ? <NoResult search={search} /> : (
+              (commodityList.length === 0 || !commodityList) ? <NoResult search={search} /> : (
                 <>
                   <CommodityList showType={showType} commodityList={commodityList} />
                   <div className={styles.pagination_wrap}>

src/pages/lxMall/commodityDetail/index.tsx

@@ -31,6 +31,12 @@ enum COMMODITY_TYPE {
   integral = 3
 }
 
+const Logistics_Type = {
+  1: '物流',
+  2: '自提',
+  3: '无需配送'
+}
+
 const colorList = [
   {
     name: '红色',
@@ -312,7 +318,7 @@ const CommodityDetail = (props) => {
               <div className={cx(styles.product_info_line, styles.mar_top_10)}>
                 <div className={styles.product_info_line_label}>配送方式</div>
                 <div className={styles.product_info_line_brief}>
-                  <span className={styles.text}>物流</span>
+                  <span className={styles.text}>{Logistics_Type[commodityDetail?.logistics.carriageType]}</span>
                 </div>
               </div>
             </div>

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

@@ -69,44 +69,32 @@ const Filter: React.FC<FilterPropsType> = (props) => {
 
   const renderFilter = () => {
     if (!isEmpty(filterConfig)) {
-      let result = []
-      for (let type of filterConfig) {
+      return filterConfig.map(type => {
         switch (type) {
           case FilterType.commonlyUsed:
-            result.push(<CommonlyUsed />)
-            break
+            return <CommonlyUsed key={type} />
           case FilterType.category:
-            result.push(<Category onFilter={handleFilter} />)
-            break
+            return <Category onFilter={handleFilter} key={type} />
           case FilterType.style:
-            result.push(<Style onFilter={handleFilter} />)
-            break
+            return <Style onFilter={handleFilter} key={type} />
           case FilterType.brand:
-            result.push(<Brand onFilter={handleFilter} />)
-            break
+            return <Brand onFilter={handleFilter} key={type} />
           case FilterType.price:
-            result.push(<Price />)
-            break
+            return <Price key={type} />
           case FilterType.useArea:
-            result.push(<UseArea onFilter={handleFilter} />)
-            break
+            return <UseArea onFilter={handleFilter} key={type} />
           case FilterType.commodityType:
-            result.push(<CommodityType />)
-            break
+            return <CommodityType key={type} />
           case FilterType.activeStores:
-            result.push(<ActiveStores />)
-            break
+            return <ActiveStores key={type} />
           case FilterType.newJoin:
-            result.push(<NewJoin />)
-            break
+            return <NewJoin key={type} />
           case FilterType.points:
-            result.push(<Points />)
-            break
+            return <Points key={type} />
           default:
             break
         }
-      }
-      return result
+      })
     } else {
       return null
     }

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

@@ -61,7 +61,6 @@
           line-height: 36px;
           outline: none;
           border: none;
-          text-indent: 12px;
         }
 
         .search_btn {

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

-import React, { useState } from 'react'
+import React, { useState, useEffect } from 'react'
 import cx from 'classnames'
+import { Input } from 'antd'
 import { Link, history } from 'umi'
 import { FileTextOutlined } from '@ant-design/icons'
 import logo from '@/theme/imgs/logo_w.png'
+import isEmpty from 'lodash/isEmpty'
 import './index.less'
 
 interface HeaderPropsType {
@@ -11,6 +13,14 @@ interface HeaderPropsType {
 
 const Header: React.FC<HeaderPropsType> = (props) => {
   const [searchType, setSearchType] = useState<number>(1) // 1:商品； 2：店铺
+  const [searchValue, setSearchValue] = useState<string>("")
+
+  useEffect(() => {
+    const { search } = history.location.query
+    if (!!search) {
+      setSearchValue(search)
+    }
+  }, [])
 
   const handleChangeSearchType = (type: number) => {
     if (searchType !== type) {
@@ -18,6 +28,15 @@ const Header: React.FC<HeaderPropsType> = (props) => {
     }
   }
 
+  const handleSearchCommodity = () => {
+    if (!isEmpty(searchValue)) {
+      history.push(`/commodity?search=${encodeURIComponent(searchValue)}`)
+
+    } else {
+      history.push(`/commodity`)
+    }
+  }
+
   return (
     <div className="header">
       <div className="header_container">
@@ -32,8 +51,8 @@ const Header: React.FC<HeaderPropsType> = (props) => {
             <div className={cx("mall_search_tags_item", searchType === 2 ? 'active' : '')} onClick={() => handleChangeSearchType(2)}>店铺</div>
           </div>
           <div className="mall_search_box">
-            <input className="mall_search_input" placeholder="请输入关键词" />
-            <div className="search_btn">搜索</div>
+            <Input className="mall_search_input" value={searchValue} placeholder="请输入关键词" onChange={e => setSearchValue(e.target.value)} onPressEnter={() => handleSearchCommodity()} />
+            <div className="search_btn" onClick={() => handleSearchCommodity()}>搜索</div>
           </div>
         </div>
         <div className="shopping_cart mall" onClick={() => history.push('/purchaseOrder')}>