70 lines
2.1 KiB
TypeScript
70 lines
2.1 KiB
TypeScript
import React, { useEffect } from "react";
|
|
import { View, Text } from "@tarojs/components";
|
|
import { useGlobalState } from "@/store/global";
|
|
import "./index.scss";
|
|
|
|
interface LocationConfirmDialogProps {
|
|
visible: boolean;
|
|
currentCity: string; // 缓存的城市
|
|
detectedCity: string; // 定位的城市
|
|
onConfirm: () => void;
|
|
onCancel: () => void;
|
|
}
|
|
|
|
const LocationConfirmDialog: React.FC<LocationConfirmDialogProps> = ({
|
|
visible,
|
|
currentCity,
|
|
detectedCity,
|
|
onConfirm,
|
|
onCancel,
|
|
}) => {
|
|
const { setShowGuideBar } = useGlobalState();
|
|
|
|
// 当弹窗显示/隐藏时，控制 GuideBar
|
|
useEffect(() => {
|
|
console.log('[LocationConfirmDialog] visible 变化:', visible);
|
|
if (visible) {
|
|
console.log('[LocationConfirmDialog] 弹窗显示，隐藏 GuideBar');
|
|
setShowGuideBar(false);
|
|
} else {
|
|
console.log('[LocationConfirmDialog] 弹窗隐藏，显示 GuideBar');
|
|
setShowGuideBar(true);
|
|
}
|
|
}, [visible, setShowGuideBar]);
|
|
|
|
if (!visible) return null;
|
|
|
|
return (
|
|
<View className="locationDialogMask" onClick={onCancel}>
|
|
<View className="locationDialogContainer" onClick={(e) => e.stopPropagation()}>
|
|
<View className="locationDialogContent">
|
|
<Text className="locationDialogTitle">定位显示您在{detectedCity}</Text>
|
|
<View className="locationDialogButtons">
|
|
<View
|
|
className="locationDialogButton primary"
|
|
onClick={(e) => {
|
|
e.stopPropagation();
|
|
onConfirm();
|
|
}}
|
|
>
|
|
<Text className="locationDialogButtonText primary">切换到{detectedCity}</Text>
|
|
</View>
|
|
<View
|
|
className="locationDialogButton secondary"
|
|
onClick={(e) => {
|
|
e.stopPropagation();
|
|
onCancel();
|
|
}}
|
|
>
|
|
<Text className="locationDialogButtonText secondary">继续浏览{currentCity}</Text>
|
|
</View>
|
|
</View>
|
|
</View>
|
|
</View>
|
|
</View>
|
|
);
|
|
};
|
|
|
|
export default LocationConfirmDialog;
|
|
|