70 lines
1.9 KiB
TypeScript
70 lines
1.9 KiB
TypeScript
import { View, Text, Image } from "@tarojs/components";
|
|
import img from "@/config/images";
|
|
import { getCurrentLocation } from "@/utils/locationUtils";
|
|
import styles from "./index.module.scss";
|
|
import { useEffect } from "react";
|
|
import { useGlobalState } from "@/store/global";
|
|
import { useListState } from "@/store/listStore";
|
|
import CustomNavbar from '@/components/CustomNavbar'
|
|
|
|
const ListHeader = () => {
|
|
const {
|
|
updateState,
|
|
location,
|
|
getLocationText,
|
|
getLocationLoading,
|
|
statusNavbarHeightInfo,
|
|
} = useGlobalState();
|
|
const { gamesNum } = useListState();
|
|
const { statusBarHeight, navbarHeight } = statusNavbarHeightInfo;
|
|
|
|
// 获取位置信息
|
|
const getCurrentLocal = () => {
|
|
updateState({
|
|
getLocationLoading: true,
|
|
});
|
|
getCurrentLocation().then((res) => {
|
|
updateState({
|
|
getLocationLoading: false,
|
|
location: res || {},
|
|
});
|
|
});
|
|
};
|
|
useEffect(() => {
|
|
getCurrentLocal();
|
|
}, []);
|
|
|
|
const currentAddress = getLocationLoading
|
|
? getLocationText
|
|
: location?.address;
|
|
|
|
return (
|
|
<CustomNavbar>
|
|
<View
|
|
className={styles.container}
|
|
style={{
|
|
height: `${navbarHeight}px`,
|
|
paddingTop: `${statusBarHeight}px`,
|
|
}}
|
|
>
|
|
{/* logo */}
|
|
<Image src={img.ICON_LOGO} className={styles.logo} />
|
|
<View className={styles.line} />
|
|
<View className={styles.content}>
|
|
<View className={styles.cityWrapper}>
|
|
{/* 位置 */}
|
|
<Text className={styles.city}>{currentAddress}</Text>
|
|
{!getLocationLoading && (
|
|
<Image src={img.ICON_CHANGE} className={styles.change} />
|
|
)}
|
|
</View>
|
|
<View className={styles.infoWrapper}>
|
|
<Text className={styles.info}>附近${gamesNum}场球局</Text>
|
|
</View>
|
|
</View>
|
|
</View>
|
|
</CustomNavbar>
|
|
);
|
|
};
|
|
export default ListHeader;
|