添加程序选择

src/components/LocationConfirmDialog/index.scss

@@ -0,0 +1,122 @@
+.locationDialogMask {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: rgba(0, 0, 0, 0.4);
+  display: flex;
+  align-items: flex-end;
+  justify-content: center;
+  z-index: 10000;
+  animation: fadeIn 0.3s ease-out;
+}
+
+@keyframes fadeIn {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+
+@keyframes slideUp {
+  from {
+    transform: translateY(100%);
+  }
+  to {
+    transform: translateY(0);
+  }
+}
+
+.locationDialogContainer {
+  width: 100%;
+  background: transparent;
+  animation: slideUp 0.3s ease-out;
+  padding-bottom: 20px;
+  background: #ffffff;
+  border-radius: 20px 20px 0px 0px;
+  height: 246px;
+}
+
+.locationDialogContent {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+
+  overflow: hidden;
+  margin-left: 24px;
+  margin-right: 24px;
+}
+
+.locationDialogTitle {
+  padding-top: 48px;
+  padding-bottom: 32px;
+  margin-left: 32px;
+  margin-right: 32px;
+  font-family: "PingFang SC";
+  font-weight: 600;
+  font-size: 20px;
+  line-height: 28px;
+  text-align: center;
+  color: #000000;
+}
+
+.locationDialogButtons {
+  display: flex;
+  flex-direction: column;
+  padding-bottom: 20px;
+  width:  calc(100% - 40px);
+}
+
+.locationDialogButton {
+  width: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 16px;
+  cursor: pointer;
+  transition: opacity 0.2s;
+  margin-top: 20px;
+  
+  &:first-child {
+    margin-top: 0;
+  }
+  
+  &.primary {
+    background: #000000;
+    height: 52px;
+    
+    &:active {
+      opacity: 0.8;
+    }
+  }
+  
+  &.secondary {
+    width: 100%;
+    background: #ffffff;
+    height: 52px;
+    border: 1px solid rgba(0, 0, 0, 0.1);
+    
+    &:active {
+      background: rgba(0, 0, 0, 0.05);
+    }
+  }
+}
+
+.locationDialogButtonText {
+  font-family: "PingFang SC";
+  font-weight: 600;
+  font-size: 16px;
+  line-height: 22px;
+  text-align: center;
+  
+  &.primary {
+    color: #ffffff;
+  }
+  
+  &.secondary {
+    color: #000000;
+  }
+}

src/components/LocationConfirmDialog/index.tsx

@@ -0,0 +1,57 @@
+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={onConfirm}>
+              <Text className="locationDialogButtonText primary">切换到{detectedCity}</Text>
+            </View>
+            <View className="locationDialogButton secondary" onClick={onCancel}>
+              <Text className="locationDialogButtonText secondary">继续浏览{currentCity}</Text>
+            </View>
+          </View>
+        </View>
+      </View>
+    </View>
+  );
+};
+
+export default LocationConfirmDialog;
+