|
@@ -15,8 +15,9 @@
|
|
|
<view class="nav-btn" @click="showSleepTimerPicker = true">
|
|
<view class="nav-btn" @click="showSleepTimerPicker = true">
|
|
|
<text class="nav-icon">⏰</text>
|
|
<text class="nav-icon">⏰</text>
|
|
|
</view>
|
|
</view>
|
|
|
- <view class="nav-btn" @click="showLyrics = !showLyrics">
|
|
|
|
|
|
|
+ <view class="nav-btn nav-btn-lyrics" @click="showLyrics = !showLyrics">
|
|
|
<text class="nav-icon">{{ showLyrics ? '📖' : '📕' }}</text>
|
|
<text class="nav-icon">{{ showLyrics ? '📖' : '📕' }}</text>
|
|
|
|
|
+ <text class="nav-btn-label">{{ showLyrics ? '隐藏歌词' : '显示歌词' }}</text>
|
|
|
</view>
|
|
</view>
|
|
|
</view>
|
|
</view>
|
|
|
</view>
|
|
</view>
|
|
@@ -81,8 +82,9 @@
|
|
|
<view class="controls">
|
|
<view class="controls">
|
|
|
<!-- 左侧按钮:播放速度、下载 -->
|
|
<!-- 左侧按钮:播放速度、下载 -->
|
|
|
<view class="controls-side">
|
|
<view class="controls-side">
|
|
|
- <view class="control-btn" @click="showRatePicker = true">
|
|
|
|
|
- <text class="control-text">{{ playRate }}x</text>
|
|
|
|
|
|
|
+ <view class="control-btn speed-display-btn" @click="showRatePicker = true">
|
|
|
|
|
+ <text class="speed-label">倍速</text>
|
|
|
|
|
+ <text class="speed-value">{{ playRate }}x</text>
|
|
|
</view>
|
|
</view>
|
|
|
<AudioDownload
|
|
<AudioDownload
|
|
|
:url="getFullUrl(audio?.audioUrl || '')"
|
|
:url="getFullUrl(audio?.audioUrl || '')"
|
|
@@ -194,10 +196,11 @@
|
|
|
</template>
|
|
</template>
|
|
|
|
|
|
|
|
<script setup lang="ts">
|
|
<script setup lang="ts">
|
|
|
-import { ref, computed, watch, onMounted, onUnmounted } from 'vue';
|
|
|
|
|
|
|
+import { ref, watch, onMounted, onUnmounted } from 'vue';
|
|
|
import { onShow } from '@dcloudio/uni-app';
|
|
import { onShow } from '@dcloudio/uni-app';
|
|
|
import { onLoad } from '@dcloudio/uni-app';
|
|
import { onLoad } from '@dcloudio/uni-app';
|
|
|
import { useAudioStore } from '../../store/audio';
|
|
import { useAudioStore } from '../../store/audio';
|
|
|
|
|
+import { storeToRefs } from 'pinia';
|
|
|
import { get, put, post, getFullUrl } from '../../utils/request';
|
|
import { get, put, post, getFullUrl } from '../../utils/request';
|
|
|
import { trackEvent, AnalyticsEvents } from '../../utils/analytics';
|
|
import { trackEvent, AnalyticsEvents } from '../../utils/analytics';
|
|
|
import type { AudioItem } from '../../types';
|
|
import type { AudioItem } from '../../types';
|
|
@@ -388,13 +391,7 @@ watch(() => audioStore.currentTime, (time) => {
|
|
|
});
|
|
});
|
|
|
|
|
|
|
|
// 从 store 获取状态
|
|
// 从 store 获取状态
|
|
|
-const isPlaying = computed(() => audioStore.isPlaying);
|
|
|
|
|
-const currentTime = computed(() => audioStore.currentTime);
|
|
|
|
|
-const duration = computed(() => audioStore.duration);
|
|
|
|
|
-const playRate = computed(() => audioStore.playRate);
|
|
|
|
|
-const hasPrev = computed(() => audioStore.hasPrev);
|
|
|
|
|
-const hasNext = computed(() => audioStore.hasNext);
|
|
|
|
|
-const playlist = computed(() => audioStore.playlist);
|
|
|
|
|
|
|
+const { isPlaying, currentTime, duration, playRate, hasPrev, hasNext, playlist } = storeToRefs(audioStore);
|
|
|
|
|
|
|
|
// 页面加载
|
|
// 页面加载
|
|
|
onMounted(async () => {
|
|
onMounted(async () => {
|
|
@@ -970,6 +967,18 @@ function copyShareLink(): string {
|
|
|
color: #ffffff;
|
|
color: #ffffff;
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
|
|
+.nav-btn-lyrics {
|
|
|
|
|
+ width: auto;
|
|
|
|
|
+ padding: 0 16rpx;
|
|
|
|
|
+ gap: 4rpx;
|
|
|
|
|
+}
|
|
|
|
|
+
|
|
|
|
|
+.nav-btn-label {
|
|
|
|
|
+ font-size: 20rpx;
|
|
|
|
|
+ color: #a5b4fc;
|
|
|
|
|
+ white-space: nowrap;
|
|
|
|
|
+}
|
|
|
|
|
+
|
|
|
.nav-title {
|
|
.nav-title {
|
|
|
font-size: 32rpx;
|
|
font-size: 32rpx;
|
|
|
font-weight: 600;
|
|
font-weight: 600;
|
|
@@ -1095,6 +1104,7 @@ function copyShareLink(): string {
|
|
|
|
|
|
|
|
.controls-side {
|
|
.controls-side {
|
|
|
margin-right: 16rpx;
|
|
margin-right: 16rpx;
|
|
|
|
|
+ gap: 12rpx;
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
.controls-center {
|
|
.controls-center {
|
|
@@ -1134,6 +1144,30 @@ function copyShareLink(): string {
|
|
|
font-weight: 600;
|
|
font-weight: 600;
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
|
|
+/* 播放速度显示按钮 */
|
|
|
|
|
+.speed-display-btn {
|
|
|
|
|
+ width: auto;
|
|
|
|
|
+ min-width: 120rpx;
|
|
|
|
|
+ height: 70rpx;
|
|
|
|
|
+ padding: 0 20rpx;
|
|
|
|
|
+ border-radius: 35rpx;
|
|
|
|
|
+ gap: 6rpx;
|
|
|
|
|
+ background: linear-gradient(135deg, rgba(79, 70, 229, 0.35) 0%, rgba(129, 140, 248, 0.25) 100%);
|
|
|
|
|
+ border: 2rpx solid rgba(129, 140, 248, 0.3);
|
|
|
|
|
+}
|
|
|
|
|
+
|
|
|
|
|
+.speed-label {
|
|
|
|
|
+ font-size: 20rpx;
|
|
|
|
|
+ color: #a5b4fc;
|
|
|
|
|
+ font-weight: 500;
|
|
|
|
|
+}
|
|
|
|
|
+
|
|
|
|
|
+.speed-value {
|
|
|
|
|
+ font-size: 28rpx;
|
|
|
|
|
+ color: #ffffff;
|
|
|
|
|
+ font-weight: 700;
|
|
|
|
|
+}
|
|
|
|
|
+
|
|
|
.control-icon {
|
|
.control-icon {
|
|
|
font-size: 36rpx;
|
|
font-size: 36rpx;
|
|
|
color: #ffffff;
|
|
color: #ffffff;
|