解决搜索代码冲突

src/pages/preview/search/search/components/list.tsx

@@ -39,9 +39,9 @@ const SearchList: FC<Props> = ({name,clear}) => {
       const data = await SearchApi.list(page, 10, name)
       if (page === 1) {
         if (data.data.length < 10) {
-          setText('没有更多了~')
+          setText('没有更多了')
         } else {
-          setText('上拉加载更多~')
+          setText('上拉加载更多')
         }
         setBrands([
           ...data.data
@@ -88,7 +88,7 @@ const SearchList: FC<Props> = ({name,clear}) => {
       setPage(page + 1)
       getData().then()
     } else {
-        setText('没有更多了~')
+      setText('没有更多了')
     }
   }
 
@@ -97,7 +97,7 @@ const SearchList: FC<Props> = ({name,clear}) => {
       className='scrollview'
       scrollY
       scrollWithAnimation
-      style={{height:`${globalData.windowHeight-140}px`,backgroundColor:`#f5f5f5`}}
+      style={{height: `${globalData.pageHeight - 20}px`, backgroundColor: `#f5f5f5`}}
       onScrollToLower={onScrollToLower}
     >
       {loading && <AtLoadMore status={'loading'}/>}
@@ -105,7 +105,8 @@ const SearchList: FC<Props> = ({name,clear}) => {
         brands.length >= 1 && !loading &&
         <>
           {brands.map((d) =>
-              <View onClick={() => jumpInfo(d.data.id,d.data.table,d.data['@data'])} className={styles.box} key={d.data.id}>
+            <View onClick={() => jumpInfo(d.data.id, d.data.table, d.data['@data'])} className={styles.box}
+                  key={d.data.id}>
               {
                 d.data.table === 'brand' &&
                 <>
@@ -121,7 +122,8 @@ const SearchList: FC<Props> = ({name,clear}) => {
                 <>
                   <View className={styles.articleLeftBox}>
                     <View className='font-weight mb-2 font-28 lh-40'>{d.data['@data'].title}</View>
-                      <View className={styles.desc}>{rfc33392time(d.data['@data'].created_at)} {d.data['@data'].page_view}阅读</View>
+                    <View
+                      className={styles.desc}>{rfc33392time(d.data['@data'].created_at)} {d.data['@data'].page_view}阅读</View>
                   </View>
                   <Img width={172} height={128} src={d.data['@data'].logo} mode='aspectFill' className={styles.image}/>
                 </>
@@ -129,7 +131,8 @@ const SearchList: FC<Props> = ({name,clear}) => {
               {
                 d.data.table === 'video_records' &&
                 <>
-                    <Img width={192} height={192} src={d.data['@data'].url_path} mode='aspectFill' className={styles.image}/>
+                  <Img width={192} height={192} src={d.data['@data'].url_path} mode='aspectFill'
+                       className={styles.image}/>
                   <Image src={play} className={styles.play} mode='aspectFit'/>
                   <View className={styles.videoRightBox}>
                     <View className='font-weight mb-2 font-28 lh-40'>{d.data['@data'].title}</View>
@@ -144,18 +147,17 @@ const SearchList: FC<Props> = ({name,clear}) => {
                   <Img width={192} height={138} src={d.data['@data'].thumb} mode='aspectFill' className={styles.image}/>
                   <View className={styles.articleLeftBox}>
                     <View className='font-weight mb-2 font-28 lh-40'>{d.data['@data'].title}</View>
-                      <View className={styles.desc}>课时:{d.data['@data'].class_hour}节   销量：{d.data['@data'].charge}</View>
+                    <View className={styles.desc}>课时:{d.data['@data'].class_hour}节
+                      销量：{d.data['@data'].charge}</View>
                   </View>
                 </>
               }
 
 
-
-
             </View>
           )
           }
-            <View style={{width: '750rpx', textAlign: 'center', color: '#999'}} className="font-28 mt-3 mb-3">{text}</View>
+          <View className='text-center font-24 text-dark mt-3'>{text}</View>
         </>
       }
       {!loading && brands.length === 0 && <Empty name='空空如也'/>}

src/pages/preview/search/search/index.module.scss

@@ -1,42 +1,54 @@
 page {
   background-color: #F2F8F6;
 
-  .navBox{
+  .searchHeader {
-    position: fixed;
+    margin-top: 10px;
-    width:750rpx;
+    padding: 0 20rpx;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    transition: all 200ms;
+    position: sticky;
+    z-index: 200 ;
+    overflow: hidden;
   }
+
   .searchBox {
-    width: 690rpx;
+    flex: 1;
     height: 68rpx;
     background: #FFFFFF;
-    border-radius: 32rpx 32rpx 32rpx 32rpx;
+    border-radius: 32rpx;
     box-sizing: border-box;
     display: flex;
     align-items: center;
     padding: 0 24rpx;
+
     .input {
       font-size: 28rpx;
-      font-weight: 500;
+      margin-left: 20rpx;
-      margin-left: 24rpx;
       flex: 1;
     }
   }
+
   .titleBox {
-    margin-top: 60rpx;
+    margin-top: 40rpx;
     width: 100%;
     display: flex;
     box-sizing: border-box;
     padding-right: 30rpx;
     justify-content: space-between;
+
     .title {
-      font-size: 28rpx;
+      font-size: 30rpx;
       font-weight: bold;
       color: #323635;
     }
   }
+
   .contentBox {
     display: flex;
     flex-wrap: wrap;
+
     .items {
       display: inline-block;
       background: #FFFFFF;

src/pages/preview/search/search/index.tsx

@@ -1,30 +1,26 @@
-import {Input, View, Text, PageContainer} from "@tarojs/components";
+import {Input, View, Text, PageContainer, Image} from "@tarojs/components";
-import {FC, useEffect, useState} from "react";
+import {FC, useEffect, useMemo, useState} from "react";
-import { AtIcon } from 'taro-ui'
 import styles from './index.module.scss'
 import Taro from "@tarojs/taro";
-import { useReady, useDidShow } from '@tarojs/taro'
+import {useDidShow} from '@tarojs/taro'
 import SearchList from './components/list'
+import NavigationBar from "@/components/navigationBar/navigationBar";
+import search from '@/static/img/search.png'
+import del from '@/static/img/del.png'
 
 
 const Search: FC = () => {
-  const globalData = Taro.getApp().globalData
   const [value, setValue] = useState('')
   const [recentSearch, setRecentSearch] = useState<string[]>([])
-  const [hotSearch,setHotSearch] = useState<any[]>([])
+  const [hotSearch] = useState<any[]>([])
   const [show, setShow] = useState(false)
+  const [focus, setFocus] = useState(false)
 
-  useReady(()=>{
+
-    console.log('onReady')
+  useDidShow(getRecentSearch)
-  })
-  useDidShow(()=>{
-    getRecentSearch()
-  })
 
   useEffect(() => {
-    if(!show){
+    !show && getRecentSearch()
-      getRecentSearch()
-    }
   }, [show])
 
   function inpFn(e) {
@@ -34,16 +30,15 @@ const Search:FC = () => {
   function clearSearch() {
     Taro.removeStorageSync('recentSearch')
     getRecentSearch()
+    Taro.showToast({title: '删除成功'})
   }
 
   function getRecentSearch() {
     setRecentSearch(Taro.getStorageSync('recentSearch'))
   }
+
   function getSearchItem(value) {
     setValue(value)
-    // Taro.navigateTo({
-    //   url:`/pages/preview/search/list/index?name=${value}`
-    // })
     setShow(true)
   }
 
@@ -56,50 +51,66 @@ const Search:FC = () => {
     Taro.setStorageSync('recentSearch', [...new Set(recentSearch)])
   }
 
- function navBack(){
+  function cancelSearch(){
-    Taro.navigateBack()
+    setValue('')
+    setShow(false)
+    setFocus(false)
   }
 
 
+  const searchStyles = useMemo((): React.CSSProperties | undefined => {
+    if (focus || show) {
+      return {
+        transform: "translateY(-43px)",
+        width: "70%",
+      }
+    }
+  }, [focus, show])
+
+
   return (
     <View className="flex flex-column">
-        <View className={styles.navBox} style={{height:`${globalData.statusBarHeight+globalData.textBarHeight}px`}}>
+      <NavigationBar text='搜索'/>
-          <View style={{height:`${globalData.statusBarHeight}px`}}></View>
+      <View className={styles.searchHeader} style={searchStyles}>
-          <View  style={{height:`${globalData.textBarHeight}px`,display:'flex',alignItems:'center'}}>
+        <View className={styles.searchBox}>
-            <View className="flex justify-end" style={{width:'40px'}}>
+          <Image src={search} style={{width: '32rpx', height: '32rpx'}} mode='widthFix'/>
-              <AtIcon value='chevron-left' size='25' color='#333' onClick={navBack}></AtIcon>
+          <Input
-            </View>
+            onFocus={() => setFocus(true)}
-            <View className="font-28 font-weight flex-1" style={{display:'flex',justifyContent:'center',paddingRight:'40px',boxSizing:'border-box'}}>搜索</View>
+            onBlur={() => setFocus(false)}
+            className={styles.input}
+            placeholder={(focus || show) ? '' : "输入关键字搜索"}
+            type='text'
+            value={value}
+            confirmType='search'
+            onInput={inpFn}
+            onConfirm={searchInput}/>
+
         </View>
+        {focus || show ? <View className='px-2 text-dark' onClick={cancelSearch}>取消</View> : null}
       </View>
 
-        <View style={{paddingLeft: '30rpx'}}>
-        <View style={{height:`${globalData.statusBarHeight+globalData.textBarHeight}px`}}></View>
-        <View className={styles.searchBox}>
-          <AtIcon value='search' size='20' color='#ccc'></AtIcon>
-          { show ?
-            <Text className={styles.input} >{value}</Text>:
-            <Input className={styles.input} placeholder="输入关键字搜索" type={'text'} confirmType={'search'} onInput={inpFn} onConfirm={searchInput} />
-          }
-        </View>
 
       {
         recentSearch.length >= 1 && !show &&
-        <>
+        <View className='px-2'>
           <View className={styles.titleBox}>
             <Text className={styles.title}>最近搜索</Text>
-            <AtIcon onClick={clearSearch} value='trash' size='16' color='#909795'></AtIcon>
+            <Image
+              src={del}
+              mode='widthFix'
+              style={{width: '16px', height: '16px', padding: '0 20rpx'}}
+              onClick={clearSearch}/>
           </View>
           <View className={styles.contentBox}>
             {
-                recentSearch.length &&
+              recentSearch.length > 0 &&
               recentSearch?.map(d =>
                 <View className={styles.items}>
-                    <View onClick={()=>{getSearchItem(d)}} className="font-28" >{d}</View>
+                  <View onClick={() => getSearchItem(d)} className="font-28">{d}</View>
                 </View>)
             }
           </View>
-        </>
+        </View>
       }
       {
         hotSearch.length >= 1 && !show &&
@@ -114,7 +125,9 @@ const Search:FC = () => {
                 hotSearch.length &&
                 hotSearch.map(d =>
                   <View className="py-1 px-2 rounded-40 mr-2 mb-2 bg-warning text-white">
-                    <View onClick={()=>{getSearchItem(d)}} className="font-28" >{d}</View>
+                    <View onClick={() => {
+                      getSearchItem(d)
+                    }} className="font-28">{d}</View>
                   </View>)
               }
             </View>
@@ -122,12 +135,16 @@ const Search:FC = () => {
         </>
       }
 
-      <PageContainer onBeforeLeave={() => {setShow(false)}}  onClickOverlay={()=>{ setShow(false)}} show={show} round={true} overlay={true} overlayStyle={'background:rgba(0,0,0,0)'} >
+      <PageContainer
+        onBeforeLeave={cancelSearch}
+        onClickOverlay={cancelSearch}
+        show={show}
+        round
+        overlay
+        overlayStyle={'background:rgba(0,0,0,0)'}>
         <SearchList name={value} clear={show}/>
       </PageContainer>
     </View>
-
-    </View>
   )
 }
 export default Search