audio_codebuddy/my-uniapp-vue3/src/components/MiniPlayer.vue

<template>
  <view v-if="showMiniPlayer" class="mini-player" @click="goToPlayer">
    <!-- 封面 -->
    <view class="mini-cover" :style="{ background: coverGradient }">
      <text class="cover-icon">{{ getTitleLetter(audioStore.currentAudio?.title || '') }}</text>
    </view>

    <!-- 信息 -->
    <view class="mini-info">
      <text class="mini-title">{{ audioStore.currentAudio?.title || '未知音频' }}</text>
      <text class="mini-subtitle">{{ formatTime(audioStore.currentTime) }} / {{ formatTime(audioStore.duration) }}</text>
    </view>

    <!-- 控制按钮 -->
    <view class="mini-controls">
      <view class="control-btn" @click.stop="togglePlay">
        <text>{{ audioStore.isPlaying ? '⏸' : '▶' }}</text>
      </view>
      <view class="control-btn" @click.stop="playNext">
        <text>⏭</text>
      </view>
    </view>
  </view>
</template>

<script setup lang="ts">
import { computed } from 'vue';
import { onShow } from '@dcloudio/uni-app';
import { useAudioStore } from '../store/audio';
import { getCoverGradient, getTitleLetter } from '../composables/useCoverStyle';

const audioStore = useAudioStore();

const showMiniPlayer = computed(() => {
  // 获取当前页面路径
  const pages = getCurrentPages();
  const currentPage = pages[pages.length - 1];
  const currentPath = currentPage?.route || '';

  // 如果在播放器页面，不显示迷你播放器
  if (currentPath.includes('player')) {
    return false;
  }

  // 如果有当前音频，显示迷你播放器
  return !!audioStore.currentAudio;
});

// 封面颜色
const coverGradient = computed(() => {
  const voiceId = audioStore.currentAudio?.voiceId || 'voice_01';
  return getCoverGradient(voiceId);
});

// 格式化时间
function formatTime(seconds: number): string {
  if (!seconds || isNaN(seconds)) return '0:00';
  const mins = Math.floor(seconds / 60);
  const secs = Math.floor(seconds % 60);
  return `${mins}:${secs.toString().padStart(2, '0')}`;
}

// 切换播放
function togglePlay() {
  audioStore.togglePlay();
}

// 播放下一首
function playNext() {
  audioStore.playNext();
}

// 跳转到播放器页面
function goToPlayer() {
  uni.navigateTo({ url: '/pages/player/index' });
}
</script>

<style scoped>
.mini-player {
  position: fixed;
  bottom: 120rpx;
  left: 16rpx;
  right: 16rpx;
  height: 96rpx;
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(28px);
  -webkit-backdrop-filter: blur(28px);
  border-radius: 48rpx;
  box-shadow: 0 8rpx 32rpx rgba(0, 0, 0, 0.12), 0 0 0 0.5rpx rgba(0, 0, 0, 0.06);
  display: flex;
  align-items: center;
  padding: 0 16rpx;
  z-index: 999;
  transition: transform 0.3s cubic-bezier(0.22, 0.61, 0.36, 1);
  animation: miniPlayerIn 0.4s cubic-bezier(0.22, 0.61, 0.36, 1);
}

@keyframes miniPlayerIn {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}

.mini-player:active {
  transform: scale(0.98);
}

.mini-cover {
  width: 68rpx;
  height: 68rpx;
  border-radius: 14rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
}

.cover-icon {
  font-size: 28rpx;
  opacity: 0.7;
}

.mini-info {
  flex: 1;
  margin-left: 16rpx;
  overflow: hidden;
}

.mini-title {
  font-size: 26rpx;
  color: #111827;
  font-weight: 600;
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mini-subtitle {
  font-size: 20rpx;
  color: #9ca3af;
  margin-top: 2rpx;
  display: block;
}

.mini-controls {
  display: flex;
  align-items: center;
  gap: 8rpx;
}

.control-btn {
  width: 60rpx;
  height: 60rpx;
  border-radius: 50%;
  background: rgba(79, 70, 229, 0.08);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 26rpx;
  color: #4f46e5;
  transition: all 0.2s;
}
.control-btn:active {
  transform: scale(0.9);
  background: rgba(79, 70, 229, 0.18);
}
</style>