miniapp-v2/src/pages/searchResult/searchResult.jsx

import { React, useState, useRef } from 'react'
// .就是当前路径
import CustomNav from '@/components/CustomNav'
import Taro from '@tarojs/taro'
import { View } from '@tarojs/components';
import { getResourceList } from '@/services/home'
import { getNoteList } from '@/services/note'

import MasonryLayout from '@/components/MasonryLayout';
import NoData from '@/components/NoData'
import List from '@/components/List';
import withLayout from '@/layouts'
import './searchResult.less'
import Card from '../index/components/Card'
import iconsearch from '../../assets/icons/housemantj/search.png'
import RecommendNote from '../index/tabs/RecommendNote/index'


const listStyle = { height: '100%' }

export default withLayout((props) => {
  const { router, person, location } = props
  const { q, targetTypeValue } = props.router.params

  const [listData, setListData] = useState({ list: [], rfTimes: 0 })

  // 横向tab
  // targetType: targetTypeValue 
  const [queryParams, setQueryParams] = useState({ q: q, location, pageNum: 1, pageSize: 10, })
  const rfTimes = useRef(0)


  const listRef = useRef()



  const handleDataChange = (value, e) => {
    if (e.paramsChanged) {
      rfTimes.current += 1
      //如果context有的话代表他滚动了   那么切换tab页就置顶
      if (listRef.current?.context) {
        listRef.current.context.scrollTo({ top: 0 })
      }
    }
    setListData({ list: value, rfTimes: rfTimes.current })
  }

  const onSearch = () => {
    // 用绝对路径
    Taro.navigateTo({ url: '/pages/search/search' });
  }

  return (
    <view className='page-index'>
      <view className='index-navbar'>
        <CustomNav title='搜索' />
      </view>
      <view className='index-container' style={{ display: 'flex', flexDirection: 'column' }}>
        <view className='search'>
          <input className='searchInput' placeholder={`搜索${targetTypeValue}`} value={q} disabled onClick={onSearch} />
          <image className='searchicon' src={iconsearch} />
          <view className='lineSearch'></view>
        </view>

        <View style={{ flex: 1, overflow: 'hidden' }}>
          {
            targetTypeValue == '地点' ?
              <List
                ref={listRef}
                style={listStyle}
                request={getResourceList}
                params={queryParams}
                refresherEnabled={false}
                onDataChange={handleDataChange}
                noData={<NoData />}
              >
                <view style={{ padding: '30rpx 15rpx' }}>
                  <MasonryLayout
                    itemKey='resourceNo'
                    listData={listData}
                    render={(item) => <Card key={item.resourceNo} item={item} />}
                  />
                </view>
              </List>
              : <RecommendNote queryParamsSearch={queryParams} />
          }

        </View>
      </view>
    </view>
  )
})