@@ -339,6 +365,7 @@ const audio = useAudio()
const isAutoScroll = ref(true), isDrawerOpen = ref(false), isSubmitted = ref(false)
const isInteracting = ref(false), scrollContainerRef = ref(null), progress = ref(0)
const showIntro = ref(false), introOpening = ref(false), showTrackList = ref(false), showMapOptions = ref(false)
+const showOpenInBrowser = ref(false)
const previewVisible = ref(false), previewIndex = ref(0), albumLoaded = ref(false)
const albumPreviewImages = ref([])
const nineGridActivate = reactive({})
@@ -486,7 +513,7 @@ const openImagePreview = async (src) => {
}
const effectsActive = computed(() =>
- !isDrawerOpen.value && !previewVisible.value && !showMapOptions.value && !showIntro.value
+ !isDrawerOpen.value && !previewVisible.value && !showMapOptions.value && !showOpenInBrowser.value && !showIntro.value
)
const closeDrawer = () => { isDrawerOpen.value = false }
@@ -516,7 +543,7 @@ const clearBottomReturn = () => {
}
const scheduleBottomReturn = (reset = false) => {
- if (!isAtBottom() || !isAutoScroll.value || previewVisible.value || showMapOptions.value) return
+ if (!isAtBottom() || !isAutoScroll.value || previewVisible.value || showMapOptions.value || showOpenInBrowser.value) return
if (bottomReturnTimer && !reset) return
clearBottomReturn()
bottomReturnTimer = setTimeout(() => {
@@ -561,6 +588,7 @@ const canAutoAdvance = () =>
&& !isDrawerOpen.value
&& !previewVisible.value
&& !showMapOptions.value
+ && !showOpenInBrowser.value
&& !nineGridHold.value
const beginNineGridGate = (pIdx) => {
@@ -665,6 +693,7 @@ const selectTrack = (url) => { audio.setActive(url); showTrackList.value = false
const mapKeyword = computed(() => `${data.value.hotel || ''} ${data.value.address || ''}`.replace(/\s+/g, ' ').trim())
const isMobileDevice = () => /Android|iPhone|iPad|iPod|Mobile/i.test(navigator.userAgent)
const isIOSDevice = () => /iPhone|iPad|iPod/i.test(navigator.userAgent)
+const isWeChat = () => /MicroMessenger/i.test(navigator.userAgent)
const mapWebUrl = (provider) => {
const q = encodeURIComponent(mapKeyword.value || data.value.hotel || data.value.address || '')
@@ -697,6 +726,11 @@ const openMap = (provider = 'amap') => {
}
const openNavigation = () => {
+ if (isWeChat()) {
+ showMapOptions.value = false
+ showOpenInBrowser.value = true
+ return
+ }
if (isMobileDevice()) showMapOptions.value = true
else openMap('amap')
}
@@ -785,9 +819,9 @@ watch(
)
watch(freeScrollSignature, restartAutoScroll)
watch(
- () => [isDrawerOpen.value, previewVisible.value, showMapOptions.value],
+ () => [isDrawerOpen.value, previewVisible.value, showMapOptions.value, showOpenInBrowser.value],
() => {
- if (isDrawerOpen.value || previewVisible.value || showMapOptions.value) {
+ if (isDrawerOpen.value || previewVisible.value || showMapOptions.value || showOpenInBrowser.value) {
cancelAnimationFrame(animId)
clearBottomReturn()
}
@@ -1360,6 +1394,39 @@ watch(
.map-sheet button:hover { background: rgba(168,140,107,0.14); color: #8a704f; }
.map-sheet .map-sheet-cancel { color: #8A8680; background: transparent; }
+/* ---------- 微信内打开浏览器引导 ---------- */
+.open-browser-mask {
+ position: fixed; inset: 0; z-index: 90;
+ background: rgba(0, 0, 0, 0.72);
+ backdrop-filter: blur(4px);
+ cursor: pointer;
+}
+.open-browser-arrow {
+ position: absolute; top: 8px; right: 18px;
+ width: 72px; height: 108px; color: #e8d5b5;
+ animation: open-browser-pulse 1.6s ease-in-out infinite;
+}
+.open-browser-arrow svg { width: 100%; height: 100%; display: block; }
+.open-browser-copy {
+ position: absolute; top: 120px; left: 0; right: 0;
+ display: flex; flex-direction: column; align-items: center; gap: 10px;
+ padding: 0 28px; text-align: center; pointer-events: none;
+}
+.open-browser-title {
+ color: #f3e7d3; font-size: 16px; letter-spacing: 0.28em;
+ font-family: var(--font-serif); font-weight: 500;
+}
+.open-browser-desc {
+ color: rgba(232, 213, 181, 0.88); font-size: 13px; letter-spacing: 0.14em; line-height: 1.7;
+}
+.open-browser-hint {
+ margin-top: 18px; color: rgba(168, 140, 107, 0.75); font-size: 10px; letter-spacing: 0.22em;
+}
+@keyframes open-browser-pulse {
+ 0%, 100% { transform: translateY(0); opacity: 0.85; }
+ 50% { transform: translateY(-6px); opacity: 1; }
+}
+
/* ---------- 出席情况单选标签 ---------- */
.rsvp-tag {
flex: 1 1 auto; min-width: 72px; padding: 10px 12px; border-radius: 12px;