uniProject/pages/newEnglish/components/1111.vue

<template>
  <view class="container">
    <!-- 加载状态 -->
    <view v-if="loading" class="loading">加载中...</view>
    
    <!-- 单词主信息 -->
    <view v-if="wordData" class="word-card">
      <view class="word-header">
        <text class="word-name">{{ wordData.name }}</text>
        <text class="word-phonetic">{{ wordData.yinbiao }}</text>
        
        <!-- 主音频播放按钮 -->
        <button 
          v-if="wordData.yinpin"
          class="play-btn"
          @click="playMainAudio">
          播放单词
        </button>
      </view>
      
      <!-- 单词释义 -->
      <view class="word-meaning">
        <text v-for="(meaning, index) in wordData.xiangyi" :key="index">
          {{ meaning }}
        </text>
      </view>
      
      <!-- 音节部分 -->
      <view v-if="wordData.yinjie" class="section">
        <text class="section-title">音节分解</text>
        <view class="syllable-list">
          <view 
            v-for="(syllable, index) in wordData.yinjie" 
            :key="index"
            class="syllable-item"
            @click="playSyllableAudio(index)">
            <text>{{ syllable.cigen }}</text>
            <text>{{ syllable.yinbiao }}</text>
          </view>
        </view>
      </view>
      
      <!-- 频度部分 -->
      <view v-if="wordData.pindu" class="section">
        <text class="section-title">频度发音</text>
        <view class="frequency-list">
          <view 
            v-for="(frequency, index) in wordData.pindu" 
            :key="index"
            class="frequency-item"
            @click="playFrequencyAudio(index)">
            <text>{{ frequency.cigen }}</text>
            <text>{{ frequency.yinbiao }}</text>
          </view>
        </view>
      </view>
    </view>
    
    <!-- 清理缓存按钮 -->
    <button class="clean-btn" @click="audioManager.clearCache">
      清理音频缓存
    </button>
  </view>
</template>
<script setup>
import { ref, onMounted } from 'vue'
import audioManager from '@/utils/audioManager'

const wordData = ref(null)
const loading = ref(false)

// 加载单词数据
const loadWordData = async (wordId) => {
  try {
    loading.value = true
    wordData.value = await audioManager.fetchAndCacheData(wordId)
  } catch (error) {
    uni.showToast({ title: '加载失败', icon: 'none' })
  } finally {
    loading.value = false
  }
}

// 播放主音频
const playMainAudio = () => {
  if (!wordData.value?.yinpin) return
  audioManager.playAudio(`main_${wordData.value.id}`, wordData.value.yinpin)
}

// 播放音节音频
const playSyllableAudio = (index) => {
  const syllable = wordData.value?.yinjie?.[index]
  if (!syllable?.yinpin) return
  audioManager.playAudio(`syllable_${wordData.value.id}_${index}`, syllable.yinpin)
}

// 播放频度音频
const playFrequencyAudio = (index) => {
  const frequency = wordData.value?.pindu?.[index]
  if (!frequency?.yinpin) return
  audioManager.playAudio(`frequency_${wordData.value.id}_${index}`, frequency.yinpin)
}

onMounted(() => {
  // 示例：加载ID为42的单词数据
  loadWordData(42)
})
</script>



<style>
.container {
  padding: 20rpx;
}

.loading {
  text-align: center;
  padding: 20rpx;
  color: #888;
}

.word-card {
  background: #fff;
  border-radius: 16rpx;
  padding: 30rpx;
  margin-bottom: 30rpx;
  box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.1);
}

.word-header {
  display: flex;
  align-items: center;
  margin-bottom: 20rpx;
}

.word-name {
  font-size: 40rpx;
  font-weight: bold;
  margin-right: 20rpx;
}

.word-phonetic {
  color: #666;
  margin-right: 20rpx;
}

.play-btn {
  background: #4a90e2;
  color: white;
  border-radius: 8rpx;
  padding: 8rpx 16rpx;
  font-size: 24rpx;
}

.word-meaning {
  margin-bottom: 30rpx;
}

.section {
  margin-bottom: 30rpx;
}

.section-title {
  display: block;
  font-weight: bold;
  margin-bottom: 15rpx;
  color: #333;
}

.syllable-list, .frequency-list {
  display: flex;
  flex-wrap: wrap;
  gap: 20rpx;
}

.syllable-item, .frequency-item {
  background: #f5f5f5;
  padding: 15rpx 25rpx;
  border-radius: 8rpx;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.clean-btn {
  background: #f8f8f8;
  color: #333;
  margin-top: 40rpx;
}
</style>