75 lines
1.9 KiB
TypeScript
75 lines
1.9 KiB
TypeScript
import { View, Image } from "@tarojs/components";
|
|
import img from "@/config/images";
|
|
import { getCurrentLocation } from "@/utils/locationUtils";
|
|
import "./index.scss";
|
|
import { useEffect } from "react";
|
|
import { useGlobalState } from "@/store/global";
|
|
import { useListState } from "@/store/listStore";
|
|
import CustomNavbar from "@/components/CustomNavbar";
|
|
import { Input } from "@nutui/nutui-react-taro";
|
|
import Taro from "@tarojs/taro";
|
|
|
|
interface IProps {
|
|
icon: string;
|
|
}
|
|
|
|
const ListHeader = (props: IProps) => {
|
|
const { icon } = props;
|
|
const { updateState, statusNavbarHeightInfo } = useGlobalState();
|
|
const { searchValue } = useListState();
|
|
const { statusBarHeight, navbarHeight } = statusNavbarHeightInfo;
|
|
|
|
// 获取位置信息
|
|
const getCurrentLocal = () => {
|
|
updateState({
|
|
getLocationLoading: true,
|
|
});
|
|
getCurrentLocation().then((res) => {
|
|
updateState({
|
|
getLocationLoading: false,
|
|
location: res || {},
|
|
});
|
|
});
|
|
};
|
|
useEffect(() => {
|
|
getCurrentLocal();
|
|
}, []);
|
|
|
|
const handleInputClick = () => {
|
|
Taro.navigateTo({
|
|
url: "/pages/search/index",
|
|
});
|
|
}
|
|
|
|
return (
|
|
<CustomNavbar>
|
|
<View
|
|
className="inputCustomerNavbarContainer"
|
|
style={{
|
|
height: `${navbarHeight}px`,
|
|
paddingTop: `${statusBarHeight}px`,
|
|
}}
|
|
>
|
|
<View className="navContent">
|
|
{/* logo */}
|
|
<Image src={icon} className="logo" />
|
|
{/* 搜索框 */}
|
|
<View className="searchContainer">
|
|
<Image
|
|
className="searchIcon icon16"
|
|
src={img.ICON_LIST_SEARCH_SEARCH}
|
|
/>
|
|
<Input
|
|
placeholder="搜索上海的球局和场地"
|
|
clearable={false}
|
|
value={searchValue}
|
|
onClick={handleInputClick}
|
|
/>
|
|
</View>
|
|
</View>
|
|
</View>
|
|
</CustomNavbar>
|
|
);
|
|
};
|
|
export default ListHeader;
|