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

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;