fix: 渠道商城搜索历史保存和提示

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

@@ -61,12 +61,23 @@
         .mall_search_input {
 
           display: inline-block;
-          width: 521px;
+          width: 510px;
           height: 36px;
           line-height: 36px;
           outline: none;
           border: none;
-          text-indent: 12px;
+          box-shadow: none;
+
+          :global {
+            .ant-input {
+              border: none;
+
+              &:active,
+              &:focus {
+                box-shadow: none;
+              }
+            }
+          }
         }
 
         .search_btn {
@@ -124,4 +135,4 @@
       }
     }
   }
-}
\ No newline at end of file
+}

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

 import React, { useState, useEffect } from 'react'
 import { history } from 'umi'
-import { Input } from 'antd'
+import { Input, AutoComplete } from 'antd'
 import { GetTemplateWebMemberChannelWebMemberChannelMainResponse } from '@/services/TemplateApi'
 import isEmpty from 'lodash/isEmpty'
 import styles from './index.less'
@@ -18,6 +18,7 @@ interface HeaderPropsType {
 const Header: React.FC<HeaderPropsType> = (props) => {
   const { id, shopUrlParam, shopInfo, type } = props
   const [searchValue, setSearchValue] = useState<string>("")
+  const [options, setOptions] = useState<{ value: string }[]>([])
   const { search } = history.location.query
 
   useEffect(() => {
@@ -29,15 +30,32 @@ const Header: React.FC<HeaderPropsType> = (props) => {
   }, [search])
 
   const handleSearchCommodity = () => {
+
     if (!isEmpty(searchValue)) {
+      let key = 'ChannelSearchHistory'
       switch (type) {
         case LAYOUT_TYPE.channel:
           history.push(`${GlobalConfig.channelRootRoute}/commodity/search?channelId=${shopUrlParam}&search=${encodeURIComponent(searchValue)}`)
           break
         case LAYOUT_TYPE.ichannel:
+          key = 'iChannelSearchHistory'
           history.push(`${GlobalConfig.ichannelRootRoute}/commodity/search?channelId=${shopUrlParam}&search=${encodeURIComponent(searchValue)}`)
           break
       }
+      const storageHistory = localStorage.getItem(key)
+      let newSearchHistory: { value: string }[] = []
+      if (storageHistory) {
+        const searchHistory: { value: string }[] = JSON.parse(storageHistory)
+        if(searchHistory.every((item) => item.value !== searchValue)) {
+          newSearchHistory = [...searchHistory, { value: searchValue }]
+        } else {
+          newSearchHistory = [...searchHistory]
+        }
+      } else {
+        newSearchHistory = [{ value: searchValue }]
+      }
+      setOptions(newSearchHistory)
+      localStorage.setItem(key, JSON.stringify(newSearchHistory))
     } else {
       switch (type) {
         case LAYOUT_TYPE.channel:
@@ -50,6 +68,23 @@ const Header: React.FC<HeaderPropsType> = (props) => {
     }
   }
 
+  const onSelect = (data: string) => {
+    setSearchValue(data)
+  }
+
+  const handleSearch = (searchText: string) => {
+    let key = 'ChannelSearchHistory'
+    if(type === LAYOUT_TYPE.ichannel) {
+      key = 'iChannelSearchHistory'
+    }
+    const storageHistory = localStorage.getItem(key)
+    if(storageHistory) {
+      const searchHistory: { value: string }[] = JSON.parse(storageHistory)
+      const result = searchHistory.filter((item) => item.value.indexOf(searchText) > -1)
+      setOptions(result)
+    }
+  }
+
   return (
     <div className={styles.header}>
       <div className={styles.header_container}>
@@ -60,7 +95,15 @@ const Header: React.FC<HeaderPropsType> = (props) => {
         </div>
         <div className={styles.mall_search}>
           <div className={styles.mall_search_box}>
-            <Input className={styles.mall_search_input} value={searchValue} placeholder="请输入关键词" onChange={e => setSearchValue(e.target.value)} onPressEnter={() => handleSearchCommodity()} />
+            <AutoComplete
+              className={styles.mall_search_input}
+              value={searchValue}
+              options={options}
+              onSelect={onSelect}
+              onSearch={handleSearch}
+            >
+              <Input className={styles.mall_search_input} value={searchValue} placeholder="请输入关键词" onChange={e => setSearchValue(e.target.value)} onPressEnter={() => handleSearchCommodity()} />
+            </AutoComplete>
             <div className={styles.search_btn} onClick={() => handleSearchCommodity()}>搜索</div>
           </div>
         </div>

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

@@ -95,7 +95,6 @@ const Header: React.FC<HeaderPropsType> = (props) => {
   }
 
   const handleSearch = (searchText: string) => {
-    console.log(searchText, "searchText")
     const param = {
       name: searchText
     }