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

import { React, useState, useRef } from 'react'
// .就是当前路径
import iconsearch from '../../assets/icons/housemantj/search.png'
import CustomNav from '@/components/CustomNav'
import Taro from '@tarojs/taro'
import { View } from '@tarojs/components';
import Card from '../index/components/Card'
import { getResourceList } from '@/services/home'
import NoData from '@/components/NoData'
import List from '@/components/List';
import withLayout from '@/layouts'
import './searchResult.less'



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

  // 横向tab
  const [activeTab, setActiveTab] = useState(0)
  const [queryParams, setQueryParams] = useState({ q: q, location: location, pageNum: 1, pageSize: 10, typeId: '' })

  // 获取资源表信息
  const [alllist, setAllList] = useState([])
  const tabs = [
    {
      title: '全部',
    },
    {
      title: '美食',
    },
    {
      title: '景点',
    },
  ]
  const listRef = useRef()

  const handleTabChange = (e) => {
    const { index } = e.detail
    setActiveTab(index)
    if (index == 0) {
      setQueryParams({ q: q, location: location, pageNum: 1, pageSize: 10, typeId: '' })
    }
    else if (index == 1) {
      setQueryParams({ q: q, targetType: 'shop', location: location, pageNum: 1, pageSize: 10, typeId: '' })
    }
    else {
      setQueryParams({ q: q, targetType: 'tourist', location: location, pageNum: 1, pageSize: 10, typeId: '' })
    }
    //如果context有的话代表他滚动了   那么切换tab页就置顶
    if (listRef.current?.context) {
      listRef.current.context.scrollTo({ top: 0 })
    }
  }



  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='搜索景点/店铺' disabled onClick={onSearch} />
          <image className='searchicon' src={iconsearch} />
          <view className='lineSearch'></view>
        </view>
        <view className='index-tabs'>
          <mp-tabs
            tabClass='tabs-Unselected'
            swiperClass='tabs-swiper'
            activeClass='tabs-Selected'
            tabs={tabs}
            current={activeTab}
            onChange={handleTabChange}
            activeTab={activeTab}
          >
          </mp-tabs>
        </view>
        <View style={{ flex: 'auto', overflow: 'hidden', position: 'relative' }}>
          <List
            style={{ height: '100%' }}
            request={getResourceList}
            params={queryParams}
            onDataChange={setAllList}
            refresherEnabled={false}
          >
            {
              alllist.length == 0 ?
                <NoData /> :
                <view className='waterfall'>
                  {
                    alllist.map((item) => <Card key={item.resourceNo} item={item} />)
                  }
                </view>
            }
          </List>
        </View>
      </view>
    </view>
  )
})