95 lines
3.4 KiB
TypeScript
95 lines
3.4 KiB
TypeScript
|
|
import { View } from '@tarojs/components'
|
|
import Search from '@/components/search'
|
|
import { alert, goLink } from '@/common/common';
|
|
import classnames from "classnames";
|
|
import styles from './search.module.scss'
|
|
import { useEffect, useRef, useState } from 'react';
|
|
import {GetHotSearchApi, GetSearchHistoryApi, AddSearchHistoryApi} from "@/api/search"
|
|
import { SCENE } from '@/common/constant';
|
|
import useLogin from '@/use/useLogin';
|
|
import Taro, { useDidShow, useShareAppMessage } from '@tarojs/taro';
|
|
|
|
type searchDataParam = {'search_key':''}
|
|
export default () => {
|
|
const {checkLogin} = useLogin()
|
|
useDidShow(async () => {
|
|
await checkLogin()
|
|
})
|
|
|
|
const [searchData, setSearchData] = useState<{hotField: searchDataParam[], historyField: searchDataParam[]}>({
|
|
hotField: [],
|
|
historyField: []
|
|
})
|
|
|
|
//获取热门搜索数据
|
|
const {fetchData:hotFetchData} = GetHotSearchApi()
|
|
const getHotSearch = async () => {
|
|
let {data} = await hotFetchData()
|
|
setSearchData((val) => ({...val, hotField: data.list}))
|
|
}
|
|
|
|
//获取历史搜索数据
|
|
const {fetchData:HistoryFetchData} = GetSearchHistoryApi()
|
|
const getSearchHistory = async () => {
|
|
let {data} = await HistoryFetchData()
|
|
setSearchData((val) => ({...val, historyField: data.list}))
|
|
}
|
|
|
|
useEffect(() => {
|
|
getHotSearch(),
|
|
getSearchHistory()
|
|
}, [])
|
|
|
|
//添加搜索关键字
|
|
const addSearchField = useRef({key: '', screen: SCENE.SearchScene})
|
|
const {fetchData:addFetchData} = AddSearchHistoryApi()
|
|
const addSearchHistory = async () => {
|
|
await addFetchData(addSearchField.current)
|
|
// goLink('/pages/searchList/searchList', {key: addSearchField.current.key})
|
|
|
|
}
|
|
|
|
//搜索事件, status = true 添加搜索， status = false 直接跳转
|
|
const searchEvent = (e, status = true) => {
|
|
if(e == "") {
|
|
alert.error('请输入关键词')
|
|
return false
|
|
}
|
|
addSearchField.current.key = e
|
|
status&&addSearchHistory()
|
|
Taro.navigateTo({
|
|
url: `/pages/searchList/searchList?key=${addSearchField.current.key}`
|
|
})
|
|
}
|
|
|
|
|
|
return (
|
|
<View className={styles.main}>
|
|
<View className={styles.search}>
|
|
<Search style={{width: '100%'}} placeholder="请输入面料关键词" placeIcon="out" showBtn={true} clickOnSearch={(e) => searchEvent(e)}/>
|
|
</View>
|
|
<View className={styles.up_search} onClick={() => goLink('/pages/searchList/searchList')}>高级搜索</View>
|
|
{searchData?.hotField.length > 0 && <View className={styles.hot}>
|
|
<View className={styles.hot_header}>
|
|
<View className={styles.hot_header_title}>热门面料</View>
|
|
</View>
|
|
<View className={styles.list}>
|
|
{searchData.hotField.map((item, index) => {
|
|
return <View key={index} className={styles.item} onClick={() => searchEvent(item.search_key, false)}>{item.search_key}</View>
|
|
})}
|
|
</View>
|
|
</View>}
|
|
{searchData?.historyField.length > 0 && <View className={styles.history}>
|
|
<View className={styles.history_header}>
|
|
<View className={styles.history_header_title}>历史搜索</View>
|
|
<View className={classnames('iconfont icon-lajixiang', styles.miconfont)}></View>
|
|
</View>
|
|
<View className={styles.list}>
|
|
{searchData?.historyField?.map((item, index) => <View key={index} className={styles.item} onClick={() => searchEvent(item.search_key, false)}>{item.search_key}</View>)}
|
|
</View>
|
|
</View>}
|
|
</View>
|
|
)
|
|
}
|