lyf/frontend-miniapp
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

调整导览讲解为底部主导航

Browse Source
This commit is contained in:
lyf
2026-06-29 20:55:13 +08:00
parent 81b9eac2f7
commit 4c9d480cce
12 changed files with 271 additions and 64 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
src/pages/explain/list.vue
View File

@@ -2,6 +2,8 @@
<GuidePageFrame
active-tab="explain"
variant="static"
:show-top-tabs="false"
show-bottom-nav
show-back
back-label="讲解首页"
@tab-change="handleTopTabChange"
@@ -27,6 +29,7 @@
:visible="showAudioPlayer"
:audio="currentAudio"
:auto-play="true"
avoid-bottom-nav
@update:visible="handleAudioVisibleChange"
@play="handleAudioPlay"
@pause="handleAudioPause"

8
src/pages/facility/detail.vue
View File

@@ -2,6 +2,8 @@
<GuidePageFrame
active-tab="guide"
variant="overlay"
:show-top-tabs="false"
show-bottom-nav
show-back
:show-cancel="isStartPanelOpen"
@tab-change="handleTopTabChange"
@@ -283,7 +285,7 @@ const handleStartNavigation = () => {
const handleModeChange = (mode: '2d' | '3d') => {
activeMode.value = mode
uni.showToast({
title: mode === '2d' ? '已切换室外入口参考' : '已切换室内三维位置',
title: mode === '2d' ? '已切换馆外入口参考' : '已切换馆内三维位置',
icon: 'none'
})
}
@@ -335,7 +337,7 @@ const handlePageBack = () => {
position: absolute;
left: 0;
right: 0;
bottom: calc(env(safe-area-inset-bottom) + 34px);
bottom: calc(env(safe-area-inset-bottom) + 116px);
height: 252px;
padding: 22px 20px 20px;
box-sizing: border-box;
@@ -478,7 +480,7 @@ const handlePageBack = () => {
position: absolute;
left: 0;
right: 0;
bottom: calc(env(safe-area-inset-bottom) + 34px);
bottom: calc(env(safe-area-inset-bottom) + 116px);
height: 276px;
padding: 22px 20px 16px;
box-sizing: border-box;

61
src/pages/index/index.vue
View File

@@ -2,9 +2,8 @@
<GuidePageFrame
:active-tab="currentTab"
variant="overlay"
:top-tabs-variant="currentTab === 'guide' ? 'segmented' : 'underline'"
:top-tabs-top="currentTab === 'guide' ? '80px' : '0'"
:show-top-tabs="currentTab === 'guide'"
:show-top-tabs="false"
show-bottom-nav
@tab-change="handleTabChange"
>
<GuideMapShell
@@ -38,11 +37,12 @@
:show-floor="is3DMode"
:tools="indoorCameraTools"
tools-top=""
tools-bottom="54px"
tools-bottom="138px"
show-zoom-controls
zoom-controls-top="calc(100vh - 284px)"
:route-preview="activeRoutePreview"
:show-route="Boolean(activeRoutePreview)"
:disable-auto-exit="disableIndoorAutoExit"
:auto-switch-threshold-low="0.58"
:auto-switch-threshold-high="1.18"
:outdoor-nav-polylines="outdoorNavPolylines"
@@ -171,14 +171,14 @@
<view v-if="guideOutdoorState === 'entrance' && !is3DMode" class="entrance-bottom-card">
<text class="entrance-card-title">主入口</text>
<text class="entrance-card-desc">
可参考主入口位置，也可手动进入室内3D并选择楼层/区域。
可参考主入口位置，也可手动进入馆内3D并选择楼层/区域。
</text>
<view class="entrance-actions">
<view class="entrance-btn secondary" @tap="handleSwitchEntrance">
<text class="entrance-btn-text">切换入口</text>
</view>
<view class="entrance-btn primary" @tap="handleEnter3DMode">
<text class="entrance-btn-text">进入室内3D</text>
<text class="entrance-btn-text">进入馆内3D</text>
</view>
</view>
</view>
@@ -320,7 +320,7 @@ const guideMapShellRef = ref<{
clearRoute?: () => void
} | null>(null)
// 室外导航相关状态
// 馆外导航相关状态
const showOutdoorNavPanel = ref(false)
const outdoorNavLoading = ref(false)
const outdoorNavError = ref('')
@@ -373,6 +373,13 @@ const routePlanSummary = computed(() => {
const routePanelError = computed(() => routePlanError.value)
const disableIndoorAutoExit = computed(() => (
Boolean(selectedGuidePoi.value)
|| Boolean(activeRoutePreview.value)
|| showRoutePlanner.value
|| isSimulatingRoute.value
))
const showGuideQuickActions = computed(() => (
currentTab.value === 'guide'
&& !showRoutePlanner.value
@@ -398,12 +405,12 @@ const selectedGuidePoiSubtitle = computed(() => {
})
const routeSimulationStepText = computed(() => {
if (!activeRoutePreview.value) return routeReady.value ? '室内导览 · 查看路线' : '室内导览 · 查看位置'
if (!activeRoutePreview.value) return routeReady.value ? '馆内导览 · 查看路线' : '馆内导览 · 查看位置'
const hasConnector = activeRoutePreview.value.connectorPoints.length > 0
if (routeReady.value) {
return hasConnector ? '室内导览 · 跨楼层路线' : '室内导览 · 同层路线'
return hasConnector ? '馆内导览 · 跨楼层路线' : '馆内导览 · 同层路线'
}
return hasConnector ? '室内导览 · 跨楼层位置关系' : '室内导览 · 同层位置关系'
return hasConnector ? '馆内导览 · 跨楼层位置关系' : '馆内导览 · 同层位置关系'
})
const explainHallItems = ref<ExplainHallSelectItem[]>([])
@@ -868,7 +875,7 @@ const handleRouteView = async ({ startPoint, endPoint }: { startPoint: RoutePoin
if (!result.route) {
activeRoutePreview.value = null
routePlanError.value = result.error || '室内导览位置关系生成失败'
routePlanError.value = result.error || '馆内导览位置关系生成失败'
return
}
@@ -876,9 +883,9 @@ const handleRouteView = async ({ startPoint, endPoint }: { startPoint: RoutePoin
focusRouteFloor(result.route)
showRoutePlanner.value = true
} catch (error) {
console.error('室内导览位置关系生成失败:', error)
console.error('馆内导览位置关系生成失败:', error)
activeRoutePreview.value = null
routePlanError.value = error instanceof Error ? error.message : '室内导览位置关系生成失败'
routePlanError.value = error instanceof Error ? error.message : '馆内导览位置关系生成失败'
} finally {
routePlanning.value = false
}
@@ -892,9 +899,9 @@ const handleRouteSimulate = () => {
isSimulatingRoute.value = true
}
// 进入 3D 室内模式
// 进入 3D 馆内模式
const handleEnter3DMode = () => {
console.log('进入 3D 室内模式')
console.log('进入 3D 馆内模式')
indoorView.value = 'overview'
is3DMode.value = true
guideOutdoorState.value = 'home'
@@ -927,15 +934,15 @@ const handleModeChange = (mode: '2d' | '3d') => {
const guideStatusLabel = computed(() => {
if (is3DMode.value) {
if (indoorView.value === 'overview') return '建筑外观'
if (indoorView.value === 'multi') return '室内多层'
return '室内单层'
if (indoorView.value === 'multi') return '馆内多层'
return '馆内单层'
}
if (guideOutdoorState.value === 'entrance') {
return '推荐入口'
}
return '室外参考'
return '馆外参考'
})
const handleSwitchEntrance = () => {
@@ -946,13 +953,13 @@ const handleMoreRouteGuide = () => {
openRoutePlanner()
}
// 室外导航处理函数
// 馆外导航处理函数
const openOutdoorNavPanel = () => {
showOutdoorNavPanel.value = true
showRoutePlanner.value = false
selectedGuidePoi.value = null
isPoiCardCollapsed.value = false
// 切换到室外 2D 地图
// 切换到馆外 2D 地图
is3DMode.value = false
clearOutdoorNavState()
}
@@ -1163,7 +1170,7 @@ const handleExplainBack = () => {
position: absolute;
left: 12px;
right: 12px;
bottom: calc(env(safe-area-inset-bottom) + 30px);
bottom: calc(env(safe-area-inset-bottom) + 112px);
box-sizing: border-box;
background: rgba(255, 255, 255, 0.96);
border: 1px solid #e5e6de;
@@ -1325,7 +1332,7 @@ const handleExplainBack = () => {
.guide-quick-actions {
position: absolute;
right: 18px;
bottom: calc(env(safe-area-inset-bottom) + 54px);
bottom: calc(env(safe-area-inset-bottom) + 136px);
display: flex;
flex-direction: column;
align-items: stretch;
@@ -1454,7 +1461,7 @@ const handleExplainBack = () => {
position: absolute;
left: 12px;
right: 12px;
bottom: calc(env(safe-area-inset-bottom) + 30px);
bottom: calc(env(safe-area-inset-bottom) + 112px);
min-height: 54px;
padding: 10px 10px 10px 14px;
display: flex;
@@ -1556,7 +1563,7 @@ const handleExplainBack = () => {
position: absolute;
left: 12px;
right: 12px;
bottom: calc(env(safe-area-inset-bottom) + 134px);
bottom: calc(env(safe-area-inset-bottom) + 216px);
height: 84px;
padding: 16px 10px 8px;
display: flex;
@@ -1694,7 +1701,7 @@ const handleExplainBack = () => {
position: absolute;
left: 12px;
right: 12px;
bottom: calc(env(safe-area-inset-bottom) + 134px);
bottom: calc(env(safe-area-inset-bottom) + 216px);
z-index: 1003;
}
@@ -1702,7 +1709,7 @@ const handleExplainBack = () => {
position: absolute;
left: 12px;
right: 12px;
bottom: calc(env(safe-area-inset-bottom) + 30px);
bottom: calc(env(safe-area-inset-bottom) + 112px);
height: 94px;
padding: 16px 16px 10px;
display: flex;
@@ -1758,7 +1765,7 @@ const handleExplainBack = () => {
position: absolute;
left: 12px;
right: 12px;
bottom: calc(env(safe-area-inset-bottom) + 34px);
bottom: calc(env(safe-area-inset-bottom) + 116px);
height: 158px;
padding: 18px 16px 14px;
box-sizing: border-box;

28
src/pages/route/detail.vue
View File

@@ -2,6 +2,8 @@
<GuidePageFrame
active-tab="guide"
variant="overlay"
:show-top-tabs="false"
show-bottom-nav
show-back
:show-cancel="isManualLocationPanelOpen"
@tab-change="handleTopTabChange"
@@ -97,16 +99,16 @@
</view>
<view v-else-if="routeViewState === 'outdoor-preview'" class="outdoor-preview-card">
<text class="outdoor-preview-title">室外地图预览：{{ route.target }}</text>
<text class="outdoor-preview-title">馆外地图预览：{{ route.target }}</text>
<text class="outdoor-preview-desc">
室外地图仅作入口参考；馆内当前支持三维位置预览。
馆外地图仅作入口参考；馆内当前支持三维位置预览。
</text>
<view class="outdoor-preview-actions">
<view class="outdoor-preview-btn secondary" @tap="handleReturnToPreview">
<text class="outdoor-preview-btn-text">返回预览</text>
</view>
<view class="outdoor-preview-btn primary" @tap="handleReturnToPreview">
<text class="outdoor-preview-btn-text">返回室内3D</text>
<text class="outdoor-preview-btn-text">返回馆内3D</text>
</view>
</view>
</view>
@@ -283,7 +285,7 @@ const shellConfig = computed(() => {
if (routeViewState.value === 'outdoor-preview') {
return {
searchText: `室外地图参考：${route.value.target}`,
searchText: `馆外地图参考：${route.value.target}`,
searchTop: '60px',
activeMode: '2d' as GuideMode,
activeFloor: activeFloor.value,
@@ -295,14 +297,14 @@ const shellConfig = computed(() => {
showModeRow: false,
modeTop: '104px',
modeLayout: 'status' as const,
modeStatus: '室外参考',
modeStatus: '馆外参考',
mapType: 'outdoor' as const,
outdoorVariant: 'entrance' as const
}
}
return {
searchText: routeReady.value ? `室内导览：${route.value.target}` : `位置预览：${route.value.target}`,
searchText: routeReady.value ? `馆内导览：${route.value.target}` : `位置预览：${route.value.target}`,
searchTop: '60px',
activeMode: '3d' as GuideMode,
activeFloor: activeFloor.value,
@@ -321,7 +323,7 @@ const shellConfig = computed(() => {
})
const indoorGuideTitle = computed(() => (
routeReady.value ? `室内导览：${route.value.target}` : `位置预览：${route.value.target}`
routeReady.value ? `馆内导览：${route.value.target}` : `位置预览：${route.value.target}`
))
const indoorGuideDesc = computed(() => {
@@ -643,7 +645,7 @@ const handleStartIndoorGuide = async () => {
})
if (!result.route) {
routePlanError.value = result.error || '室内导览路线规划失败'
routePlanError.value = result.error || '馆内导览路线规划失败'
activeRoutePreview.value = null
return
}
@@ -651,7 +653,7 @@ const handleStartIndoorGuide = async () => {
activeRoutePreview.value = result.route
activeFloor.value = result.route.start.floorLabel
} catch (error) {
routePlanError.value = error instanceof Error ? error.message : '室内导览路线规划失败'
routePlanError.value = error instanceof Error ? error.message : '馆内导览路线规划失败'
activeRoutePreview.value = null
} finally {
routePlanning.value = false
@@ -719,7 +721,7 @@ const handlePageBack = () => {
position: absolute;
left: 16px;
right: 16px;
bottom: calc(env(safe-area-inset-bottom) + 34px);
bottom: calc(env(safe-area-inset-bottom) + 116px);
min-height: 170px;
padding: 22px 20px 20px;
display: flex;
@@ -736,7 +738,7 @@ const handlePageBack = () => {
position: absolute;
left: 16px;
right: 16px;
bottom: calc(env(safe-area-inset-bottom) + 34px);
bottom: calc(env(safe-area-inset-bottom) + 116px);
min-height: 156px;
padding: 18px 18px 16px;
display: flex;
@@ -958,7 +960,7 @@ const handlePageBack = () => {
position: absolute;
left: 0;
right: 0;
bottom: calc(env(safe-area-inset-bottom) + 34px);
bottom: calc(env(safe-area-inset-bottom) + 116px);
height: 196px;
padding: 21px 20px 14px;
box-sizing: border-box;
@@ -1098,7 +1100,7 @@ const handlePageBack = () => {
position: absolute;
left: 12px;
right: 12px;
bottom: calc(env(safe-area-inset-bottom) + 34px);
bottom: calc(env(safe-area-inset-bottom) + 116px);
height: 158px;
padding: 18px 16px 14px;
box-sizing: border-box;