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

chore: solidify guide P1 snapshot

Browse Source
This commit is contained in:
lyf
2026-06-11 16:18:57 +08:00
parent a90f63cef0
commit 9790501c3b
32 changed files with 4613 additions and 865 deletions
Download Patch File Download Diff File Expand all files Collapse all files

126
src/pages/exhibit/detail.vue
View File

@@ -1,68 +1,80 @@
<template>
<view class="detail-page">
<scroll-view class="content" scroll-y>
<!-- 展品图片 -->
<view class="exhibit-hero">
<image class="hero-image" :src="exhibit.image" mode="aspectFill" />
<view class="audio-control" @tap="handlePlayAudio">
<text class="audio-icon">{{ isPlaying ? '⏸' : '▶' }}</text>
</view>
</view>
<!-- 展品信息 -->
<view class="exhibit-info">
<text class="exhibit-title">{{ exhibit.name }}</text>
<text v-if="exhibit.artist" class="exhibit-artist">{{ exhibit.artist }}</text>
<view class="info-grid">
<view v-if="exhibit.year" class="info-item">
<text class="info-label">创作年代</text>
<text class="info-value">{{ exhibit.year }}</text>
</view>
<view v-if="exhibit.material" class="info-item">
<text class="info-label">材质</text>
<text class="info-value">{{ exhibit.material }}</text>
</view>
<view v-if="exhibit.size" class="info-item">
<text class="info-label">尺寸</text>
<text class="info-value">{{ exhibit.size }}</text>
</view>
<view v-if="exhibit.hall" class="info-item">
<text class="info-label">展厅位置</text>
<text class="info-value">{{ exhibit.hall }}</text>
<GuidePageFrame
:active-tab="activeTopTab"
variant="static"
@tab-change="handleTopTabChange"
>
<view class="detail-page">
<scroll-view class="content" scroll-y>
<!-- 展品图片 -->
<view class="exhibit-hero">
<image class="hero-image" :src="exhibit.image" mode="aspectFill" />
<view class="audio-control" @tap="handlePlayAudio">
<text class="audio-icon">{{ isPlaying ? '⏸' : '▶' }}</text>
</view>
</view>
<view class="description-section">
<text class="section-title">作品介绍</text>
<text class="description-text">{{ exhibit.description }}</text>
</view>
</view>
</scroll-view>
<!-- 展品信息 -->
<view class="exhibit-info">
<text class="exhibit-title">{{ exhibit.name }}</text>
<text v-if="exhibit.artist" class="exhibit-artist">{{ exhibit.artist }}</text>
<!-- 底部操作栏 -->
<view class="action-bar">
<view class="action-btn-group">
<view class="action-btn" @tap="handleNavigate">
<text class="btn-icon">🗺️</text>
<text class="btn-text">导航</text>
<view class="info-grid">
<view v-if="exhibit.year" class="info-item">
<text class="info-label">创作年代</text>
<text class="info-value">{{ exhibit.year }}</text>
</view>
<view v-if="exhibit.material" class="info-item">
<text class="info-label">材质</text>
<text class="info-value">{{ exhibit.material }}</text>
</view>
<view v-if="exhibit.size" class="info-item">
<text class="info-label">尺寸</text>
<text class="info-value">{{ exhibit.size }}</text>
</view>
<view v-if="exhibit.hall" class="info-item">
<text class="info-label">展厅位置</text>
<text class="info-value">{{ exhibit.hall }}</text>
</view>
</view>
<view class="description-section">
<text class="section-title">作品介绍</text>
<text class="description-text">{{ exhibit.description }}</text>
</view>
</view>
<view class="action-btn" @tap="handleCollect">
<text class="btn-icon">{{ isCollected ? '❤️' : '🤍' }}</text>
<text class="btn-text">收藏</text>
</view>
<view class="action-btn" @tap="handleShare">
<text class="btn-icon">📤</text>
<text class="btn-text">分享</text>
</scroll-view>
<!-- 底部操作栏 -->
<view class="action-bar">
<view class="action-btn-group">
<view class="action-btn" @tap="handleNavigate">
<text class="btn-icon">🗺️</text>
<text class="btn-text">导航</text>
</view>
<view class="action-btn" @tap="handleCollect">
<text class="btn-icon">{{ isCollected ? '❤️' : '🤍' }}</text>
<text class="btn-text">收藏</text>
</view>
<view class="action-btn" @tap="handleShare">
<text class="btn-icon">📤</text>
<text class="btn-text">分享</text>
</view>
</view>
</view>
</view>
</view>
</GuidePageFrame>
</template>
<script setup lang="ts">
import { ref } from 'vue'
import { onLoad } from '@dcloudio/uni-app'
import GuidePageFrame from '@/components/navigation/GuidePageFrame.vue'
import {
isGuideTopTab,
navigateToGuideTopTab,
type GuideTopTab
} from '@/utils/guideTopTabs'
const exhibit = ref({
id: '1',
@@ -78,12 +90,18 @@ const exhibit = ref({
const isPlaying = ref(false)
const isCollected = ref(false)
const activeTopTab = ref<GuideTopTab>('guide')
onLoad((options: any) => {
if (options.id) {
// 根据 ID 加载展品数据
console.log('加载展品:', options.id)
}
const tab = Array.isArray(options.tab) ? options.tab[0] : options.tab
if (isGuideTopTab(tab)) {
activeTopTab.value = tab
}
})
const handlePlayAudio = () => {
@@ -108,12 +126,16 @@ const handleShare = () => {
uni.showShareMenu()
}
const handleTopTabChange = (tab: GuideTopTab) => {
navigateToGuideTopTab(tab)
}
</script>
<style scoped lang="scss">
.detail-page {
width: 100%;
height: 100vh;
height: 100%;
background-color: var(--museum-bg-light);
display: flex;
flex-direction: column;

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

@@ -1,58 +1,136 @@
<template>
<GuideMapShell
:search-text="facility.name"
floor-top="164px"
tools-top="406px"
:tools="['回正', '2D']"
@search-tap="handleSearchTap"
@mode-change="handleModeChange"
@floor-change="handleFloorChange"
@tool-click="handleToolClick"
<GuidePageFrame
active-tab="guide"
variant="overlay"
show-back
:show-cancel="isStartPanelOpen"
@tab-change="handleTopTabChange"
@back="handlePageBack"
@cancel="handleCancelStartSelection"
>
<view class="detail-sheet">
<view class="detail-title-row">
<text class="detail-title">{{ facility.name }}</text>
<text class="open-status">{{ facility.status }}</text>
</view>
<GuideMapShell
:search-text="facility.name"
search-top="60px"
mode-top="104px"
floor-top="208px"
tools-top="450px"
:tools="['回正', '2D']"
@search-tap="handleSearchTap"
@mode-change="handleModeChange"
@floor-change="handleFloorChange"
@tool-click="handleToolClick"
>
<view class="detail-sheet">
<view class="detail-title-row">
<text class="detail-title">{{ facility.name }}</text>
<text class="open-status">{{ facility.status }}</text>
</view>
<view class="detail-lines">
<text class="detail-line">所在区域：{{ facility.location }}</text>
<text class="detail-line">最近垂直交通：{{ facility.traffic }}</text>
</view>
<view class="detail-lines">
<text class="detail-line">所在区域：{{ facility.location }}</text>
<text class="detail-line">最近垂直交通：{{ facility.traffic }}</text>
<text v-if="confirmedStart" class="detail-line">预览起点：{{ confirmedStart.label }}</text>
</view>
<view class="tag-row">
<view
v-for="(tag, index) in facility.tags"
:key="tag"
class="detail-tag"
:class="{ active: index === 0 }"
>
<text class="detail-tag-text">{{ tag }}</text>
<view class="tag-row">
<view
v-for="(tag, index) in facility.tags"
:key="tag"
class="detail-tag"
:class="{ active: index === 0 }"
>
<text class="detail-tag-text">{{ tag }}</text>
</view>
</view>
<view class="action-row">
<view class="action-btn secondary" @tap="handleChooseStart">
<text class="action-text">{{ startButtonLabel }}</text>
</view>
<view class="action-btn primary" @tap="handleStartNavigation">
<text class="action-text">查看位置</text>
</view>
</view>
</view>
<view class="action-row">
<view class="action-btn secondary" @tap="handleChooseStart">
<text class="action-text">选择起点</text>
<view
v-if="isStartPanelOpen"
class="start-panel-mask"
@tap="handleCancelStartSelection"
></view>
<view
v-if="isStartPanelOpen"
class="start-select-sheet"
@tap.stop=""
>
<text class="start-select-title">选择预览起点</text>
<text class="start-select-desc">当前仅用于位置预览，不生成真实馆内路线。</text>
<view class="start-chip-section">
<text class="start-chip-label">楼层</text>
<view class="start-chip-row">
<view
v-for="floor in startFloors"
:key="floor"
class="start-chip"
:class="{ active: floor === selectedStartFloor }"
@tap="handleStartFloorChange(floor)"
>
<text class="start-chip-text">{{ floor }}</text>
</view>
</view>
</view>
<view class="action-btn primary" @tap="handleStartNavigation">
<text class="action-text">查看位置</text>
<view class="start-chip-section area">
<text class="start-chip-label">区域</text>
<view class="start-chip-row">
<view
v-for="area in startAreas"
:key="area"
class="start-chip area"
:class="{ active: area === selectedStartArea }"
@tap="handleStartAreaChange(area)"
>
<text class="start-chip-text">{{ area }}</text>
</view>
</view>
</view>
<view class="start-panel-actions">
<view class="start-panel-btn secondary" @tap="handleCancelStartSelection">
<text class="start-panel-btn-text">取消</text>
</view>
<view class="start-panel-btn primary" @tap="handleConfirmStartSelection">
<text class="start-panel-btn-text">确认起点</text>
</view>
</view>
</view>
</view>
</GuideMapShell>
</GuideMapShell>
</GuidePageFrame>
</template>
<script setup lang="ts">
import { ref } from 'vue'
import { computed, ref } from 'vue'
import { onLoad } from '@dcloudio/uni-app'
import GuidePageFrame from '@/components/navigation/GuidePageFrame.vue'
import GuideMapShell from '@/components/navigation/GuideMapShell.vue'
import {
NAV_FLOOR_OPTIONS,
NAV_ROUTE_UNAVAILABLE_MESSAGE,
formatNavFloorLabel,
isPoiAccessible,
loadCleanNavPoiById
} from '@/services/navAssets'
import {
navigateToGuideTopTab,
type GuideTopTab
} from '@/utils/guideTopTabs'
interface ConfirmedStart {
label: string
floor: string
source: 'facility-detail'
}
const facility = ref({
id: '',
@@ -62,6 +140,30 @@ const facility = ref({
traffic: NAV_ROUTE_UNAVAILABLE_MESSAGE,
tags: ['三维位置', 'clean 数据']
})
const isStartPanelOpen = ref(false)
const selectedStartFloor = ref('1F')
const selectedStartArea = ref('服务台附近')
const confirmedStart = ref<ConfirmedStart | null>(null)
const startFloors = NAV_FLOOR_OPTIONS.map((floor) => floor.label)
const startAreas = ['主入口', '服务台附近', '停车场入口']
const pendingStartLabel = computed(() => `${selectedStartFloor.value} ${selectedStartArea.value}`)
const startButtonLabel = computed(() => confirmedStart.value ? '更换起点' : '选择起点')
const resolveConfirmedStartArea = () => {
if (!confirmedStart.value) return '服务台附近'
const area = confirmedStart.value.floor
? confirmedStart.value.label.replace(`${confirmedStart.value.floor} `, '').trim()
: confirmedStart.value.label.trim()
return startAreas.includes(area) ? area : '服务台附近'
}
const syncDraftStartSelection = () => {
selectedStartFloor.value = confirmedStart.value?.floor || '1F'
selectedStartArea.value = resolveConfirmedStartArea()
}
onLoad(async (options: any) => {
if (options.id) {
@@ -103,15 +205,51 @@ const handleSearchTap = () => {
}
const handleChooseStart = () => {
uni.showToast({
title: '请选择当前位置',
icon: 'none'
})
syncDraftStartSelection()
isStartPanelOpen.value = true
}
const handleStartFloorChange = (floor: string) => {
selectedStartFloor.value = floor
}
const handleStartAreaChange = (area: string) => {
selectedStartArea.value = area
}
const handleCancelStartSelection = () => {
syncDraftStartSelection()
isStartPanelOpen.value = false
}
const handleConfirmStartSelection = () => {
confirmedStart.value = {
label: pendingStartLabel.value,
floor: selectedStartFloor.value,
source: 'facility-detail'
}
isStartPanelOpen.value = false
}
const handleStartNavigation = () => {
const params: Record<string, string> = {
facilityId: facility.value.id,
target: facility.value.name,
state: 'preview'
}
if (confirmedStart.value) {
params.startLabel = confirmedStart.value.label
params.startFloor = confirmedStart.value.floor
params.startSource = confirmedStart.value.source
}
const query = Object.entries(params)
.map(([key, value]) => `${key}=${encodeURIComponent(value)}`)
.join('&')
uni.navigateTo({
url: `/pages/route/detail?facilityId=${facility.value.id}&target=${encodeURIComponent(facility.value.name)}&state=planning`
url: `/pages/route/detail?${query}`
})
}
@@ -127,6 +265,21 @@ const handleToolClick = (tool: string) => {
console.log('设施详情工具:', tool)
}
const handleTopTabChange = (tab: GuideTopTab) => {
navigateToGuideTopTab(tab)
}
const handlePageBack = () => {
uni.navigateBack({
delta: 1,
fail: () => {
uni.reLaunch({
url: '/pages/index/index'
})
}
})
}
</script>
<style scoped lang="scss">
@@ -265,4 +418,151 @@ const handleToolClick = (tool: string) => {
.action-btn.primary .action-text {
color: var(--museum-accent);
}
.start-panel-mask {
position: absolute;
inset: 0;
background: rgba(0, 0, 0, 0.2);
z-index: 52;
}
.start-select-sheet {
position: absolute;
left: 0;
right: 0;
bottom: calc(env(safe-area-inset-bottom) + 34px);
height: 276px;
padding: 22px 20px 16px;
box-sizing: border-box;
background: #ffffff;
border-radius: 20px;
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.16);
z-index: 55;
}
.start-select-title {
display: block;
font-size: 18px;
line-height: 24px;
font-weight: 700;
color: #000000;
}
.start-select-desc {
display: block;
margin-top: 6px;
font-size: 12px;
line-height: 17px;
color: #626970;
}
.start-chip-section {
margin-top: 16px;
}
.start-chip-section.area {
margin-top: 14px;
}
.start-chip-label {
display: block;
margin-bottom: 8px;
font-size: 12px;
line-height: 16px;
font-weight: 500;
color: #60666d;
}
.start-chip-row {
display: flex;
align-items: center;
gap: 8px;
overflow: hidden;
}
.start-chip {
height: 28px;
min-width: 48px;
padding: 0 13px;
display: flex;
align-items: center;
justify-content: center;
box-sizing: border-box;
background: #f4f4ef;
border: 1px solid #e7e8e2;
border-radius: 14px;
}
.start-chip.area {
min-width: 72px;
}
.start-chip.active {
background: #000000;
border-color: #000000;
}
.start-chip-text {
font-size: 12px;
line-height: 16px;
font-weight: 500;
color: #60666d;
}
.start-chip.active .start-chip-text {
color: var(--museum-accent);
}
.start-panel-actions {
position: absolute;
left: 20px;
right: 20px;
bottom: 16px;
display: flex;
gap: 16px;
}
.start-panel-btn {
height: 42px;
display: flex;
align-items: center;
justify-content: center;
box-sizing: border-box;
border-radius: 8px;
}
.start-panel-btn.secondary {
width: 151px;
background: #ffffff;
border: 1px solid #000000;
}
.start-panel-btn.primary {
width: 168px;
background: #000000;
border: 1px solid #000000;
}
.start-panel-btn-text {
font-size: 14px;
line-height: 19px;
font-weight: 500;
color: #000000;
}
.start-panel-btn.primary .start-panel-btn-text {
color: var(--museum-accent);
}
@media (max-width: 360px) {
.start-panel-actions {
gap: 10px;
}
.start-panel-btn.secondary,
.start-panel-btn.primary {
width: auto;
flex: 1;
}
}
</style>

107
src/pages/hall/detail.vue
View File

@@ -1,58 +1,72 @@
<template>
<view class="detail-page">
<scroll-view class="content" scroll-y>
<!-- 展厅封面 -->
<view class="hall-hero">
<image class="hero-image" :src="hall.image" mode="aspectFill" />
<view class="hall-badge">
<text class="badge-text">{{ hall.floor }}</text>
</view>
</view>
<!-- 展厅信息 -->
<view class="hall-info">
<text class="hall-title">{{ hall.name }}</text>
<text class="hall-description">{{ hall.description }}</text>
<view class="stats-row">
<view class="stat-item">
<text class="stat-value">{{ hall.exhibitCount }}</text>
<text class="stat-label">展品数量</text>
</view>
<view class="stat-item">
<text class="stat-value">{{ hall.area }}</text>
<text class="stat-label">展厅面积</text>
<GuidePageFrame
:active-tab="activeTopTab"
variant="static"
@tab-change="handleTopTabChange"
>
<view class="detail-page">
<scroll-view class="content" scroll-y>
<!-- 展厅封面 -->
<view class="hall-hero">
<image class="hero-image" :src="hall.image" mode="aspectFill" />
<view class="hall-badge">
<text class="badge-text">{{ hall.floor }}</text>
</view>
</view>
<!-- 展品列表 -->
<view class="exhibits-section">
<text class="section-title">展厅展品</text>
<view class="exhibits-grid">
<ExhibitCard
v-for="exhibit in exhibits"
:key="exhibit.id"
:exhibit="exhibit"
@click="handleExhibitClick"
/>
<!-- 展厅信息 -->
<view class="hall-info">
<text class="hall-title">{{ hall.name }}</text>
<text class="hall-description">{{ hall.description }}</text>
<view class="stats-row">
<view class="stat-item">
<text class="stat-value">{{ hall.exhibitCount }}</text>
<text class="stat-label">展品数量</text>
</view>
<view class="stat-item">
<text class="stat-value">{{ hall.area }}</text>
<text class="stat-label">展厅面积</text>
</view>
</view>
<!-- 展品列表 -->
<view class="exhibits-section">
<text class="section-title">展厅展品</text>
<view class="exhibits-grid">
<ExhibitCard
v-for="exhibit in exhibits"
:key="exhibit.id"
:exhibit="exhibit"
@click="handleExhibitClick"
/>
</view>
</view>
</view>
</view>
</scroll-view>
</scroll-view>
<!-- 底部操作栏 -->
<view class="action-bar">
<view class="action-btn primary" @tap="handleNavigate">
<text class="btn-text">导航到展厅</text>
<!-- 底部操作栏 -->
<view class="action-bar">
<view class="action-btn primary" @tap="handleNavigate">
<text class="btn-text">导航到展厅</text>
</view>
</view>
</view>
</view>
</GuidePageFrame>
</template>
<script setup lang="ts">
import { ref } from 'vue'
import { onLoad } from '@dcloudio/uni-app'
import GuidePageFrame from '@/components/navigation/GuidePageFrame.vue'
import ExhibitCard from '@/components/content/ExhibitCard.vue'
import {
isGuideTopTab,
navigateToGuideTopTab,
type GuideTopTab
} from '@/utils/guideTopTabs'
const activeTopTab = ref<GuideTopTab>('guide')
const hall = ref({
id: '1',
@@ -73,11 +87,16 @@ onLoad((options: any) => {
if (options.id) {
console.log('加载展厅:', options.id)
}
const tab = Array.isArray(options.tab) ? options.tab[0] : options.tab
if (isGuideTopTab(tab)) {
activeTopTab.value = tab
}
})
const handleExhibitClick = (exhibit: any) => {
uni.navigateTo({
url: `/pages/exhibit/detail?id=${exhibit.id}`
url: `/pages/exhibit/detail?id=${exhibit.id}&tab=${activeTopTab.value}`
})
}
@@ -85,12 +104,16 @@ const handleNavigate = () => {
console.log('导航到展厅')
uni.navigateBack()
}
const handleTopTabChange = (tab: GuideTopTab) => {
navigateToGuideTopTab(tab)
}
</script>
<style scoped lang="scss">
.detail-page {
width: 100%;
height: 100vh;
height: 100%;
overflow-x: hidden;
background-color: var(--museum-bg-light);
display: flex;

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

@@ -1,18 +1,9 @@
<template>
<view class="page-container">
<view class="content-tabs">
<view
v-for="tab in contentTabs"
:key="tab.id"
class="content-tab"
:class="{ active: currentTab === tab.id }"
@tap="handleTabChange(tab.id)"
>
<view v-if="currentTab === tab.id" class="content-tab-indicator"></view>
<text class="content-tab-label">{{ tab.label }}</text>
</view>
</view>
<GuidePageFrame
:active-tab="currentTab"
variant="overlay"
@tab-change="handleTabChange"
>
<GuideMapShell
v-if="currentTab === 'guide'"
:search-text="guideSearchText"
@@ -25,10 +16,18 @@
:map-type="guideMapType"
:outdoor-variant="guideOutdoorVariant"
:indoor-asset-base-url="indoorNavAssetBaseUrl"
:show-floor="false"
indoor-initial-view="overview"
:indoor-view="indoorView"
:active-floor="activeGuideFloor"
indoor-view-toggle-top="154px"
floor-top="244px"
:show-indoor-view-toggle="is3DMode"
:show-floor="is3DMode && indoorView === 'floor'"
:tools="[]"
@search-tap="handleGuideSearchTap"
@mode-change="handleModeChange"
@floor-change="handleFloorChange"
@indoor-view-change="handleIndoorViewChange"
>
<template #overlay>
<view v-if="guideOutdoorState === 'entrance' && !is3DMode" class="entrance-tip">
@@ -66,7 +65,7 @@
<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">
@@ -102,15 +101,21 @@
@pause="handleAudioPause"
@ended="handleAudioEnded"
/>
</view>
</GuidePageFrame>
</template>
<script setup lang="ts">
import { computed, ref } from 'vue'
import { onLoad } from '@dcloudio/uni-app'
import GuidePageFrame from '@/components/navigation/GuidePageFrame.vue'
import GuideMapShell from '@/components/navigation/GuideMapShell.vue'
import ExplainList from '@/components/explain/ExplainList.vue'
import FloatingAudioButton from '@/components/audio/FloatingAudioButton.vue'
import AudioPlayer, { type AudioItem } from '@/components/audio/AudioPlayer.vue'
import {
isGuideTopTab,
type GuideTopTab
} from '@/utils/guideTopTabs'
import {
NAV_ASSET_BASE_URL,
NAV_ROUTE_UNAVAILABLE_MESSAGE
@@ -119,20 +124,17 @@ import {
// 3D 模式状态
const is3DMode = ref(false)
const guideOutdoorState = ref<'home' | 'entrance'>('home')
const indoorView = ref<'overview' | 'floor'>('overview')
const activeGuideFloor = ref('1F')
// 状态
const searchKeyword = ref('')
const currentTab = ref('guide')
const currentTab = ref<GuideTopTab>('guide')
const searchBarFocused = ref(false)
const showMarkerDetail = ref(false)
const showAreaSelector = ref(false)
const selectedAreaId = ref('service')
const contentTabs = [
{ id: 'guide', label: '导览' },
{ id: 'explain', label: '讲解' }
]
const indoorNavAssetBaseUrl = NAV_ASSET_BASE_URL
const shortcutItems = [
@@ -171,7 +173,7 @@ const markerDataMap: Record<string, MarkerDetail> = {
}
// Tab 切换处理
const handleTabChange = (tabId: string) => {
const handleTabChange = (tabId: GuideTopTab) => {
currentTab.value = tabId
console.log('切换标签:', tabId)
@@ -181,6 +183,13 @@ const handleTabChange = (tabId: string) => {
searchBarFocused.value = false
}
onLoad((options: any = {}) => {
const tab = Array.isArray(options.tab) ? options.tab[0] : options.tab
if (isGuideTopTab(tab)) {
currentTab.value = tab
}
})
// 搜索处理
const handleSearchFocus = () => {
searchBarFocused.value = true
@@ -284,12 +293,19 @@ const handleCollectMarker = (marker: MarkerDetail) => {
}
const handleFloorChange = (floor: string) => {
activeGuideFloor.value = floor
indoorView.value = 'floor'
console.log('切换楼层:', floor)
}
const handleIndoorViewChange = (view: 'overview' | 'floor') => {
indoorView.value = view
}
// 进入 3D 室内模式
const handleEnter3DMode = () => {
console.log('进入 3D 室内模式')
indoorView.value = 'overview'
is3DMode.value = true
guideOutdoorState.value = 'home'
}
@@ -298,32 +314,37 @@ const handleModeChange = (mode: '2d' | '3d') => {
is3DMode.value = mode === '3d'
if (mode === '2d') {
indoorView.value = 'overview'
guideOutdoorState.value = 'home'
} else {
indoorView.value = 'overview'
}
}
const guideStatusLabel = computed(() => {
if (is3DMode.value) {
return '馆内定位'
return indoorView.value === 'overview' ? '室内全馆' : '室内楼层'
}
if (guideOutdoorState.value === 'entrance') {
return '推荐入口'
}
return '馆外定位'
return '室外参考'
})
const guideTaskTitle = computed(() => {
if (is3DMode.value) {
return '规划馆内路线'
return indoorView.value === 'overview' ? '查看完整建筑' : '查看楼层位置'
}
return '从室外进入馆内'
})
const guideTaskSubtitle = computed(() => {
if (is3DMode.value) {
return '选择目标设施后，系统会优先推荐最近路径'
return indoorView.value === 'overview'
? '切换到楼层后，可查看 POI 与三维位置预览'
: '选择目标设施后，可查看楼层与三维位置预览'
}
return ''
@@ -413,7 +434,7 @@ const handleAudioEnded = (audio: AudioItem) => {
const handleExplainExhibitClick = (exhibit: any) => {
console.log('点击讲解展品:', exhibit)
uni.navigateTo({
url: `/pages/exhibit/detail?id=${exhibit.id}`
url: `/pages/exhibit/detail?id=${exhibit.id}&tab=explain`
})
}
@@ -438,16 +459,6 @@ const handleExplainFeaturedClick = (exhibit: any) => {
</script>
<style scoped lang="scss">
.page-container {
position: relative;
width: 100%;
height: 100vh;
height: 100dvh;
overflow: hidden;
isolation: isolate;
background: var(--museum-bg-map);
}
.explain-page {
position: absolute;
top: 0;
@@ -546,59 +557,6 @@ const handleExplainFeaturedClick = (exhibit: any) => {
}
}
.content-tabs {
position: absolute;
top: 0;
left: 0;
right: 0;
height: 44px;
display: flex;
align-items: center;
justify-content: center;
background: rgba(255, 255, 255, 0.96);
border-bottom: 1px solid #eceee8;
box-sizing: border-box;
z-index: 2000;
transform: translateZ(0);
backface-visibility: hidden;
will-change: transform;
}
.content-tab {
position: relative;
width: 75px;
height: 44px;
display: flex;
align-items: center;
justify-content: center;
}
.content-tab-label {
position: relative;
z-index: 2;
font-size: 16px;
line-height: 22px;
font-weight: 400;
color: #6b7280;
}
.content-tab.active .content-tab-label {
font-weight: 500;
color: #1f2329;
}
.content-tab-indicator {
position: absolute;
left: 50%;
top: 26px;
width: 39px;
height: 6px;
background: var(--museum-accent);
border-radius: 3px;
transform: translateX(-50%);
z-index: 1;
}
.search-bar-wrapper {
position: absolute;
top: 44px;
@@ -809,11 +767,4 @@ const handleExplainFeaturedClick = (exhibit: any) => {
color: var(--museum-accent);
}
@media (min-width: 768px) {
.page-container {
max-width: 430px;
margin: 0 auto;
box-shadow: 0 12px 36px rgba(36, 49, 42, 0.16);
}
}
</style>

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

File diff suppressed because it is too large Load Diff

277
src/pages/search/index.vue
View File

@@ -1,61 +1,103 @@
<template>
<GuideMapShell
:search-text="searchKeyword || '搜索设施、展厅、入口'"
floor-top="164px"
@search-tap="handleSearchTap"
@mode-change="handleModeChange"
@floor-change="handleFloorChange"
<GuidePageFrame
active-tab="guide"
variant="overlay"
show-back
:show-cancel="isSearchEditing"
@tab-change="handleTopTabChange"
@back="handlePageBack"
@cancel="handleSearchCancel"
>
<template #overlay>
<view class="filter-row">
<GuideMapShell
:search-text="searchKeyword || '搜索设施、展厅、入口'"
search-top="60px"
mode-top="104px"
floor-top="208px"
@search-tap="handleSearchTap"
@mode-change="handleModeChange"
@floor-change="handleFloorChange"
>
<template #overlay>
<view
v-for="filter in filters"
:key="filter.id"
class="filter-chip"
:class="[{ active: currentFilter === filter.id }, `filter-${filter.id}`]"
@tap="handleFilterChange(filter.id)"
v-if="isSearchEditing"
class="search-edit-row"
@tap.stop=""
>
<text class="filter-text">{{ filter.label }}</text>
<view class="search-edit-box">
<input
class="search-edit-input"
type="text"
confirm-type="search"
:focus="searchInputFocused"
:placeholder="searchPlaceholder"
:value="searchDraftKeyword"
@input="handleSearchInput"
@confirm="handleSearchConfirm"
/>
<view
v-if="searchDraftKeyword"
class="search-clear-btn"
@tap.stop="handleSearchClear"
>
<text class="search-clear-text">×</text>
</view>
</view>
<view class="search-confirm-btn" @tap="handleSearchConfirm">
<text class="search-confirm-text">搜索</text>
</view>
</view>
</view>
</template>
<view class="results-sheet">
<view class="sheet-header">
<text class="sheet-title">{{ resultTitle }}</text>
<text class="sort-label">按距离排序</text>
</view>
<view class="result-list">
<view
v-for="item in visibleFacilities"
:key="item.id"
class="result-card"
@tap="handleFacilityClick(item)"
>
<view class="facility-mark">
<text class="facility-mark-text">卫</text>
</view>
<view class="facility-info">
<text class="facility-name">{{ item.name }}</text>
<text class="facility-meta">{{ item.meta }}</text>
</view>
<view class="filter-row">
<view
class="result-action"
:class="{ secondary: item.action === '查看' }"
@tap.stop="handleResultAction(item)"
v-for="filter in filters"
:key="filter.id"
class="filter-chip"
:class="[{ active: currentFilter === filter.id }, `filter-${filter.id}`]"
@tap="handleFilterChange(filter.id)"
>
<text class="result-action-text">{{ item.action }}</text>
<text class="filter-text">{{ filter.label }}</text>
</view>
</view>
</template>
<view class="results-sheet">
<view class="sheet-header">
<text class="sheet-title">{{ resultTitle }}</text>
<text class="sort-label">默认展示</text>
</view>
<view class="result-list">
<view
v-for="item in visibleFacilities"
:key="item.id"
class="result-card"
@tap="handleFacilityClick(item)"
>
<view class="facility-mark">
<text class="facility-mark-text">卫</text>
</view>
<view class="facility-info">
<text class="facility-name">{{ item.name }}</text>
<text class="facility-meta">{{ item.meta }}</text>
</view>
<view
class="result-action"
:class="{ secondary: item.action === '查看' }"
@tap.stop="handleResultAction(item)"
>
<text class="result-action-text">{{ item.action }}</text>
</view>
</view>
</view>
</view>
</view>
</GuideMapShell>
</GuideMapShell>
</GuidePageFrame>
</template>
<script setup lang="ts">
import { computed, ref } from 'vue'
import { computed, nextTick, ref } from 'vue'
import { onLoad } from '@dcloudio/uni-app'
import GuidePageFrame from '@/components/navigation/GuidePageFrame.vue'
import GuideMapShell from '@/components/navigation/GuideMapShell.vue'
import {
formatNavFloorLabel,
@@ -63,9 +105,13 @@ import {
searchCleanNavPois,
type CleanNavPoi
} from '@/services/navAssets'
import {
navigateToGuideTopTab,
type GuideTopTab
} from '@/utils/guideTopTabs'
interface FilterItem {
id: 'all' | 'accessible' | 'floor' | 'nearest'
id: 'all' | 'accessible' | 'floor'
label: string
}
@@ -79,14 +125,17 @@ interface FacilityResult {
}
const searchKeyword = ref('卫生间')
const searchDraftKeyword = ref('')
const currentFilter = ref<FilterItem['id']>('all')
const isLoading = ref(false)
const isSearchEditing = ref(false)
const searchInputFocused = ref(false)
const searchPlaceholder = '搜索设施、展厅、入口'
const filters: FilterItem[] = [
{ id: 'all', label: '全部' },
{ id: 'accessible', label: '无障碍' },
{ id: 'floor', label: '本楼层' },
{ id: 'nearest', label: '最近' }
{ id: 'floor', label: '1F 点位' }
]
const facilities = ref<FacilityResult[]>([])
@@ -141,11 +190,46 @@ onLoad((options: any) => {
if (options.keyword) {
searchKeyword.value = decodeURIComponent(options.keyword)
}
searchDraftKeyword.value = searchKeyword.value
void loadFacilityResults()
})
const handleSearchTap = () => {
console.log('保持搜索结果页')
const handleSearchTap = async () => {
searchDraftKeyword.value = searchKeyword.value
isSearchEditing.value = true
searchInputFocused.value = false
await nextTick()
searchInputFocused.value = true
}
const handleSearchInput = (event: any) => {
searchDraftKeyword.value = event.detail.value
}
const handleSearchClear = async () => {
searchDraftKeyword.value = ''
searchInputFocused.value = false
await nextTick()
searchInputFocused.value = true
}
const handleSearchCancel = () => {
searchDraftKeyword.value = searchKeyword.value
isSearchEditing.value = false
searchInputFocused.value = false
}
const handleSearchConfirm = async (event?: any) => {
const confirmedKeyword = typeof event?.detail?.value === 'string'
? event.detail.value
: searchDraftKeyword.value
searchKeyword.value = confirmedKeyword.trim()
searchDraftKeyword.value = searchKeyword.value
currentFilter.value = 'all'
isSearchEditing.value = false
searchInputFocused.value = false
await loadFacilityResults()
}
const handleFilterChange = (filterId: FilterItem['id']) => {
@@ -160,7 +244,7 @@ const handleFacilityClick = (facility: FacilityResult) => {
const handleResultAction = (facility: FacilityResult) => {
uni.navigateTo({
url: `/pages/route/detail?facilityId=${facility.id}&target=${encodeURIComponent(facility.name)}&state=planning`
url: `/pages/route/detail?facilityId=${facility.id}&target=${encodeURIComponent(facility.name)}&state=preview`
})
}
@@ -172,12 +256,101 @@ const handleFloorChange = (floor: string) => {
console.log('搜索页切换楼层:', floor)
}
const handleTopTabChange = (tab: GuideTopTab) => {
navigateToGuideTopTab(tab)
}
const handlePageBack = () => {
uni.navigateBack({
delta: 1,
fail: () => {
uni.reLaunch({
url: '/pages/index/index'
})
}
})
}
</script>
<style scoped lang="scss">
.search-edit-row {
position: absolute;
top: 60px;
left: 16px;
right: 16px;
height: 36px;
display: flex;
align-items: center;
gap: 8px;
z-index: 48;
}
.search-edit-box {
flex: 1;
min-width: 0;
height: 36px;
padding: 0 10px;
display: flex;
align-items: center;
box-sizing: border-box;
background: #ffffff;
border: 1px solid rgba(224, 223, 0, 0.55);
border-radius: 6px;
box-shadow: 0 0 0 2px rgba(224, 223, 0, 0.16);
}
.search-edit-input {
flex: 1;
min-width: 0;
font-size: 14px;
line-height: 19px;
color: #1f2329;
background: transparent;
}
.search-clear-btn {
width: 22px;
height: 22px;
margin-left: 6px;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
background: #8b8b84;
border-radius: 11px;
}
.search-clear-text {
font-size: 16px;
line-height: 18px;
font-weight: 500;
color: #ffffff;
}
.search-confirm-btn {
width: 52px;
height: 36px;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
box-sizing: border-box;
background: #000000;
border: 1px solid #000000;
border-radius: 8px;
}
.search-confirm-text {
font-size: 14px;
line-height: 19px;
font-weight: 500;
color: var(--museum-accent);
}
.filter-row {
position: absolute;
top: 102px;
top: 146px;
left: 23px;
right: 16px;
display: flex;
@@ -210,10 +383,6 @@ const handleFloorChange = (floor: string) => {
width: 82px;
}
.filter-nearest {
width: 74px;
}
.filter-text {
font-size: 12px;
line-height: 16px;