调整讲解详情播放器为常驻样式
This commit is contained in:
@@ -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;
|
||||||
|
|||||||
Reference in New Issue
Block a user