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;