调整讲解详情播放器为常驻样式

This commit is contained in:
lyf
2026-07-10 10:46:10 +08:00
parent 653ec67b14
commit 8758fe66c6

View File

@@ -3,17 +3,12 @@
:active-tab="activeTopTab" :active-tab="activeTopTab"
variant="static" variant="static"
:show-top-tabs="false" :show-top-tabs="false"
:audio-player-avoid-bottom-nav="false"
:audio-player-closable="false"
:audio-player-expandable="false"
:show-audio-player-host="true"
audio-player-mode="mini"
@back="handleBack" @back="handleBack"
> >
<view class="explain-detail-page" :class="{ 'with-audio-player': showAudioPlayer }"> <view class="explain-detail-page">
<scroll-view <scroll-view
class="content" class="content"
:class="{ 'with-fixed-player': isDetailAudioDockVisible || showAudioPlayer }" :class="{ 'with-fixed-player': isDetailAudioDockVisible }"
scroll-y scroll-y
:show-scrollbar="false" :show-scrollbar="false"
> >
@@ -67,7 +62,11 @@
class="detail-audio-dock" class="detail-audio-dock"
> >
<view class="detail-audio-play" @tap="handlePlayAudio"> <view class="detail-audio-play" @tap="handlePlayAudio">
<svg width="26" height="26" viewBox="0 0 24 24" fill="none"> <svg v-if="detailAudioPlaying" width="26" height="26" viewBox="0 0 24 24" fill="none">
<rect x="6" y="5" width="4" height="14" rx="1" fill="currentColor"/>
<rect x="14" y="5" width="4" height="14" rx="1" fill="currentColor"/>
</svg>
<svg v-else width="26" height="26" viewBox="0 0 24 24" fill="none">
<path d="M8 5V19L19 12L8 5Z" fill="currentColor"/> <path d="M8 5V19L19 12L8 5Z" fill="currentColor"/>
</svg> </svg>
</view> </view>
@@ -75,7 +74,10 @@
<text class="detail-audio-title">{{ audioDockTitle }}</text> <text class="detail-audio-title">{{ audioDockTitle }}</text>
<text class="detail-audio-subtitle">{{ audioDockSubtitle }}</text> <text class="detail-audio-subtitle">{{ audioDockSubtitle }}</text>
<view class="detail-audio-progress"> <view class="detail-audio-progress">
<view class="detail-audio-progress-fill"></view> <view
class="detail-audio-progress-fill"
:style="{ width: `${detailAudioProgressPercent}%` }"
></view>
</view> </view>
</view> </view>
</view> </view>
@@ -206,9 +208,7 @@ const currentAudioTarget = computed(() => ({
lang: selectedAudioLanguage.value lang: selectedAudioLanguage.value
})) }))
const isCurrentDetailAudio = computed(() => globalAudioPlayer.isCurrentSource(currentAudioTarget.value)) const isCurrentDetailAudio = computed(() => globalAudioPlayer.isCurrentSource(currentAudioTarget.value))
const showAudioPlayer = computed(() => (
globalAudioPlayer.visible.value && globalAudioPlayer.hasAudio.value
))
const isCurrentDetailAudioTarget = computed(() => { const isCurrentDetailAudioTarget = computed(() => {
const source = globalAudioPlayer.currentSource.value const source = globalAudioPlayer.currentSource.value
const targetType = exhibit.value.audio.playTargetType || 'ITEM' const targetType = exhibit.value.audio.playTargetType || 'ITEM'
@@ -222,13 +222,24 @@ const isCurrentDetailAudioTarget = computed(() => {
}) })
const isDetailAudioDockVisible = computed(() => ( const isDetailAudioDockVisible = computed(() => (
exhibit.value.audio.status === 'playable' exhibit.value.audio.status === 'playable'
&& !isCurrentDetailAudioTarget.value
)) ))
const audioDockTitle = computed(() => exhibit.value.title || '讲解内容') const audioDockTitle = computed(() => exhibit.value.title || '讲解内容')
const audioDockSubtitle = computed(() => [ const audioDockSubtitle = computed(() => [
selectedAudioLanguage.value === 'en-US' ? 'English' : '中文', selectedAudioLanguage.value === 'en-US' ? 'English' : '中文',
exhibit.value.audio.durationLabel exhibit.value.audio.durationLabel
].filter(Boolean).join(' · ') || '讲解') ].filter(Boolean).join(' · ') || '讲解')
const detailAudioPlaying = computed(() => (
isCurrentDetailAudio.value
&& globalAudioPlayer.playing.value
))
const detailAudioProgressPercent = computed(() => {
if (!isCurrentDetailAudioTarget.value) return 0
const total = globalAudioPlayer.duration.value || globalAudioPlayer.currentAudio.value?.duration || 0
if (!total) return 0
return Math.max(0, Math.min(100, (globalAudioPlayer.currentTime.value / total) * 100))
})
// 讲解详情页只定位到所属展厅,不再追踪具体展品点位。 // 讲解详情页只定位到所属展厅,不再追踪具体展品点位。
const resolveHallGuidePoi = async () => { const resolveHallGuidePoi = async () => {
return guideUseCase.resolveContentLocationPreviewTarget({ return guideUseCase.resolveContentLocationPreviewTarget({
@@ -956,9 +967,6 @@ const handleBack = () => {
background: rgba(249, 250, 251, 0.96); background: rgba(249, 250, 251, 0.96);
} }
.explain-detail-page.with-audio-player .action-bar {
bottom: 88px;
}
.location-btn { .location-btn {
height: 52px; height: 52px;
@@ -1308,7 +1316,7 @@ const handleBack = () => {
} }
.detail-audio-progress-fill { .detail-audio-progress-fill {
width: 22%; width: 0;
height: 100%; height: 100%;
background: #e7e900; background: #e7e900;
border-radius: inherit; border-radius: inherit;