feat: 企业商城添加搜索框自动补全功能

src/pages/editor/mobileSettingPanel/propsSettings/components/bottomNavigation/index.tsx

@@ -248,7 +248,7 @@ const BottomNavigation: React.FC<BottomNavigationPropsType> = (props) => {
                     <div className={styles.setting_line_addItem_line}>
                       <div className={styles.setting_line_addItem_line_label}>导航链接：</div>
                       <div className={styles.setting_line_addItem_line_brief}>
-                        <Select style={{ width: '100%' }} value={item.type || undefined} disabled={item.type === 1 || item.type === 4} onChange={(value) => handleTypeChange(value, item.id)}>
+                        <Select style={{ width: '100%' }} value={item.type || undefined}  onChange={(value) => handleTypeChange(value, item.id)}>
                           {
                             RedirectTypeList.map(selectItem => judgedItemNotInList(selectItem, item.type) && (<Select.Option value={selectItem.value} key={`redirect_type_${selectItem.value}`}>{selectItem.label}</Select.Option>))
                           }

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

@@ -162,8 +162,6 @@ const UseArea: React.FC<UseAreaPropsType> = (props) => {
         provinceCode: dataItem.provinceCode,
       })),
     })
-    // setCityList(sortData)
-    console.log(sortData)
     return sortData
   }
 

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

@@ -151,6 +151,17 @@
           outline: none;
           border: none;
           box-shadow: none;
+
+          :global {
+            .ant-input {
+              border: none;
+
+              &:active,
+              &:focus {
+                box-shadow: none;
+              }
+            }
+          }
         }
 
         .search_btn {

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

 import React, { useState, useEffect } from 'react'
 import cx from 'classnames'
-import { Input } from 'antd'
+import { Input, AutoComplete } from 'antd'
 import { history } from 'umi'
 import { FileTextOutlined, DownOutlined } from '@ant-design/icons'
 import isEmpty from 'lodash/isEmpty'
@@ -19,6 +19,7 @@ const Header: React.FC<HeaderPropsType> = (props) => {
   const [searchValue, setSearchValue] = useState<string>("")
   const [count, setCount] = useState<number>(0)
   const { search } = history.location.query
+  const [options, setOptions] = useState<{ value: string }[]>([]);
 
   const handleScroll = () => {
     const scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
@@ -93,6 +94,30 @@ const Header: React.FC<HeaderPropsType> = (props) => {
     }
   }
 
+  const handleSearch = (searchText: string) => {
+    console.log(searchText, "searchText")
+    const param = {
+      name: searchText
+    }
+
+    PublicApi.getSearchShopCommonGetCommodityCompletion(param).then(res => {
+      if (res.code === 1000) {
+        if(res.data) {
+          setOptions(res.data.map(item => {
+            return {
+              value: item
+            }
+          }))
+        }
+      }
+    })
+
+  }
+
+  const onSelect = (data: string) => {
+    setSearchValue(data)
+  }
+
   return (
     <>
       <div className={styles.header}>
@@ -106,7 +131,15 @@ const Header: React.FC<HeaderPropsType> = (props) => {
               <div className={cx(styles.mall_search_tags_item, searchType === 2 ? styles.active : '')} onClick={() => handleChangeSearchType(2)}>店铺</div>
             </div>
             <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 value={searchValue} placeholder="请输入关键词" onChange={e => setSearchValue(e.target.value)} onPressEnter={() => handleSearchCommodity()} />
+              </AutoComplete>
               <div className={styles.search_btn} onClick={() => handleSearchCommodity()}>搜索</div>
             </div>
           </div>
@@ -134,7 +167,15 @@ const Header: React.FC<HeaderPropsType> = (props) => {
                   <span className={styles.search_type_item_text}>{searchType === 1 ? '店铺' : '商品'}</span>
                 </div>
               </div>
-              <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 value={searchValue} placeholder="请输入关键词" onChange={e => setSearchValue(e.target.value)} onPressEnter={() => handleSearchCommodity()} />
+              </AutoComplete>
               <div className={styles.search_btn} onClick={() => handleSearchCommodity()}>搜索</div>
             </div>
           </div>

src/pages/mobileTemplate/channelTemplateEdit/config.ts

@@ -160,6 +160,7 @@ export const mobileBottomNavigation = {
     "canEdit": true,
     "canHide": false,
     "props": {
+      /** 类型：1-首页 2-积分 3-工作台 4-资讯 5-进货单 6-我的 */
       dataList: [
         {
           name: "首页",
@@ -176,19 +177,19 @@ export const mobileBottomNavigation = {
         {
           name: "工作台",
           icon: "https://shushangyun-lingxi.oss-cn-shenzhen.aliyuncs.com/f8492d51f9234c43bf631e9f2482a6751612351036609.png",
-          type: 4,
+          type: 3,
           status: false,
         },
         {
           name: "进货单",
           icon: "https://shushangyun-lingxi.oss-cn-shenzhen.aliyuncs.com/50433de84ee046b19882e21c920b3f6b1612351040608.png",
-          type: 3,
+          type: 5,
           status: false,
         },
         {
           name: "我的",
           icon: "https://shushangyun-lingxi.oss-cn-shenzhen.aliyuncs.com/aa76edefd91f4e82b4f8fa56e169cd3f1612351044724.png",
-          type: 5,
+          type: 6,
           status: false,
         }
       ]