englishread-front/subPages/home/music.vue

<template>
  <view class="music-container">

    <!-- 音色列表 -->
    <view class="voice-list">
      <view 
        v-for="(voice, index) in voiceList" 
        :key="voice.id"
        class="voice-item"
        :class="{ 'selected': voice.id === selectedVoiceId }"
        @click="selectVoice(voice.id)"
      >
        <view class="voice-avatar">
          <view class="play-icon">
            <uv-icon 
              :name="voice.id === selectedVoiceId ? 'pause' : 'play-right-fill'" 
              size="24" 
              color="#666666"
            ></uv-icon>
          </view>
        </view>
        <view class="voice-info">
          <view class="voice-name">{{ voice.name }}</view>
          <view class="voice-desc">{{ voice.info }}</view>
        </view>
        <view v-if="voice.id === selectedVoiceId" class="selected-tag">
          已选择
        </view>
      </view>
    </view>

    <!-- 底部固定确认按钮 -->
    <view class="bottom-bar">
      <uv-button 
        type="primary" 
        text="确定" 
        :custom-style="{
          width: '100%',
          height: '82rpx',
          borderRadius: '44rpx',
          backgroundColor: '#06DADC',
          fontSize: '36rpx',
          fontWeight: '500',
          border: '1px solid #06DADC'
        }"
        @click="confirmSelection"
      ></uv-button>
      <uv-safe-bottom></uv-safe-bottom>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      selectedVoiceId: 2, // 默认选择智小虎
      voiceList: [

      ]
    }
  },
  methods: {
    goBack() {
      uni.navigateBack()
    },
    selectVoice(voiceId) {
      this.selectedVoiceId = voiceId
      console.log('选择音色:', voiceId)
      uni.$emit('selectVoice', voiceId)
    },
    confirmSelection() {
      console.log('确认选择音色:', this.selectedVoiceId)
      // 这里可以保存选择的音色到本地存储或发送到服务器
      uni.navigateBack()
    },
    async getVoice(){
      const listRes = await this.$api.music.list()
      if (listRes.code === 200) {
        this.voiceList = listRes.result
      }
    }
  },
  onLoad() {
    this.getVoice()
  }
}

</script>

<style scoped lang="scss">
.music-container {
  background: #fff;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  padding-bottom: 120rpx;
}

.voice-list {
  flex: 1;
  padding: 40rpx 32rpx 120rpx;
  display: flex;
  flex-direction: column;
  gap: 32rpx;
}

.voice-item {
  display: flex;
  align-items: center;
  padding: 32rpx 0;
  border-bottom: 4rpx solid #F8F8F8;
  position: relative;
  background: #F8F8F8;
  gap: 12px;
  opacity: 1;
  border-radius: 8px;
  padding: 8px;
  transition: all 0.3s ease;
  &:last-child {
    border-bottom: none;
  }
  
  &.selected {
    border-bottom: 4rpx solid $primary-color;
  }
}

.voice-avatar {
  width: 136rpx;
  height: 136rpx;
  border-radius: 50%;
  background: #666;
  display: flex;
  align-items: center;
  justify-content: center;
  // margin-right: 32rpx;
  position: relative;
}

.play-icon {
  display: flex;
  width: 60rpx;
  height: 60rpx;
  border-radius: 100rpx;
  background: white;
  align-items: center;
  justify-content: center;
}

.voice-info {
  flex: 1;
}

.voice-name {
  font-family: PingFang SC;
  font-weight: 600;
  font-size: 36rpx;
  color: #262626;
  margin-bottom: 8rpx;
}

.voice-desc {
  font-family: PingFang SC;
  font-weight: 400;
  font-size: 28rpx;
  color: #999;
}

.selected-tag {
  background: $primary-color;
  color: #fff;
  font-size: 24rpx;
  padding: 8rpx 16rpx;
  border-radius: 20rpx;
  font-family: PingFang SC;
  font-weight: 500;
}

.bottom-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: #fff;
  padding: 24rpx 50rpx;
  z-index: 999;
  border-top: 2rpx solid #F1F1F1
}
</style>