@@ -1,9 +1,14 @@
import { useRef , useState , useEffect } from "react" ;
import { Menu } from "@nutui/nutui-react-taro" ;
import { Image , View , ScrollView } from "@tarojs/components" ;
import Taro from "@tarojs/taro" ;
import img from "@/config/images" ;
import Bubble from "../Bubble" ;
import { useListState } from "@/store/listStore" ;
import { useListState , useListStore } from "@/store/listStore" ;
import { getCurrentLocation } from "@/utils/locationUtils" ;
import { updateUserLocation } from "@/services/userService" ;
import { useGlobalState } from "@/store/global" ;
import { useUserActions } from "@/store/userStore" ;
import "./index.scss" ;
const DistanceQuickFilterV2 = ( props ) = > {
@@ -19,15 +24,19 @@ const DistanceQuickFilterV2 = (props) => {
quickValue ,
districtValue , // 新增:行政区选中值
onMenuVisibleChange , // 菜单展开/收起回调
onRelocate , // 重新定位回调
} = props ;
const cityRef = useRef ( null ) ;
const quickRef = useRef ( null ) ;
const [ changePosition , setChangePosition ] = useState < number [ ] > ( [ ] ) ;
const [ isMenuOpen , setIsMenuOpen ] = useState ( false ) ;
const [ keys , setKeys ] = useState ( 0 ) ;
const [ keys , setKeys ] = useState ( 0 ) ;
const [ isRelocating , setIsRelocating ] = useState ( false ) ;
// 从 store 获取当前城市信息
const { area } = useListState ( ) ;
const currentCity = area ? . at ( - 1 ) || "" ; // 获取省份/城市名称
const { updateState } = useGlobalState ( ) || { } ;
const { fetchUserInfo , updateCache } = useUserActions ( ) ;
// 全城筛选显示的标题 - 如果选择了行政区,显示行政区名称
const getCityTitle = ( ) = > {
@@ -79,6 +88,64 @@ const DistanceQuickFilterV2 = (props) => {
index === 1 && ( quickRef . current as any ) ? . toggle ( false ) ;
} ;
// 重新获取当前位置,调用接口把位置传递后端
const handleRelocate = async ( ) = > {
if ( isRelocating ) return ;
setIsRelocating ( true ) ;
( Taro as any ) . showLoading ( { title : '定位中...' , mask : true } ) ;
try {
// 获取当前位置
const location = await getCurrentLocation ( ) ;
if ( location && location . latitude && location . longitude ) {
// 更新 store 中的位置信息
updateState ? . ( { location } ) ;
// 调用接口把位置传递给后端,传递一个值代表强制更新
const response = await updateUserLocation ( location . latitude , location . longitude , true ) ;
// 如果接口返回成功,重新调用用户信息接口来更新 USER_SELECTED_CITY
if ( response ? . code === 0 ) {
// 删除 缓存
( Taro as any ) . removeStorageSync ( "USER_SELECTED_CITY" ) ;
// 延时一下
await new Promise ( resolve = > setTimeout ( resolve , 600 ) ) ;
// 先清除缓存和 area, 确保使用最新的用户信息
await updateCache ( [ "中国" , response . data . last_location_province ] ) ;
}
( Taro as any ) . showToast ( {
title : '定位成功' ,
icon : 'success' ,
duration : 1500 ,
} ) ;
// 通知父组件位置已更新,可以刷新列表
if ( onRelocate ) {
onRelocate ( location ) ;
}
} else {
throw new Error ( '获取位置信息失败' ) ;
}
} catch ( error : any ) {
console . error ( '重新定位失败:' , error ) ;
( Taro as any ) . showToast ( {
title : error?.message || '定位失败,请检查定位权限' ,
icon : 'none' ,
duration : 2000 ,
} ) ;
} finally {
setIsRelocating ( false ) ;
( Taro as any ) . hideLoading ( ) ;
}
} ;
// 监听菜单状态变化,通知父组件
useEffect ( ( ) = > {
onMenuVisibleChange ? . ( isMenuOpen ) ;
@@ -103,8 +170,11 @@ const DistanceQuickFilterV2 = (props) => {
icon = { < Image src = { img . ICON_MENU_ITEM_SELECTED } / > }
>
< div className = "positionWrap" >
< p className = "title" > 当 前 位 置 < / p >
< p className = "cityName" > { currentCity } < / p >
< p className = "title" > { currentCity } < / p >
< p className = "cityName" onClick = { handleRelocate } >
< img src = { img . ICON_RELOCATE } style = { { width : '12px' , height : "12px" } } / >
< span > 重 新 定 位 < / span >
< / p >
< / div >
< div className = "distanceWrap" >
< Bubble