baby-app/src/pages/music/component/musicRecommend.vue

<template>
  <!-- Header -->
  <view class="header">
    <view class="header-left">
      <!-- 播放按钮 -->
      <view class="play-circle">
        <image
          @click="palyBtn"
          style="width: 48rpx; height: 48rpx"
          src="/src/static//icon/fi-rr-play-alt.svg"
        ></image>
      </view>
      <text class="text-gray">播放全部 (22首)</text>
    </view>

    <!-- 循环播放 -->
    <view class="header-right">
      <image
        @click="cycleBtn"
        style="width: 32rpx; height: 32rpx"
        src="/src/static/icon/fi-rr-refresh.svg"
      ></image>
      <image style="width: 32rpx; height: 32rpx" src="/src/static/icon/fi-rr-shuffle.svg"></image>
    </view>
  </view>

  <!-- 当前播放 -->
  <view class="currently-playing">
    <view class="currently-playing-left">
      <view class="play-circle">
        <image
          @click="palyBtn"
          style="width: 28rpx; height: 28rpx"
          src="/src/static//icon/fi-rr-play.svg"
          v-if="type === 0"
        ></image>
        <image
          @click="palyBtn"
          style="width: 28rpx; height: 28rpx"
          src="/src/static//icon/fi-rr-play.svg"
          v-else
        ></image>
      </view>
      <text class="text-gray">继续播放: 小燕子(供暖版) - 贝乐虎儿歌贝乐虎儿歌贝乐虎儿歌</text>
    </view>
    <!-- 循环播放 -->
    <view style="display: flex; gap: 80rpx">
      <image
        @click="cycleBtn"
        style="width: 32rpx; height: 32rpx"
        src="/src/static/icon/fi-rr-pause.svg"
      ></image>
      <image
        style="width: 32rpx; height: 32rpx"
        src="/src/static/icon/fi-rr-cross-small.svg"
      ></image>
    </view>
  </view>

  <!-- 播放列表 -->
  <view class="playlist">
    <view v-for="(song, index) in songs" :key="index" class="playlist-item">
      <view class="album-cover">
        <view class="cover-inner">
          <image
            style="width: 100rpx; height: 100rpx"
            src="/src/static/icon/fi-rr-big-play.svg"
          ></image>
        </view>
      </view>
      <view class="song-details" @click="playFavoriteBtn(song, index)">
        <text class="song-name">{{ song.name }}</text>
      </view>
      <view class="song-controls">
        <text>{{ song.duration }}</text>
        <image
          style="width: 40rpx; height: 40rpx"
          v-if="type === 0"
          :src="
            song.favorite
              ? '/src/static/icon/fi-rr-heart-grey.svg'
              : '/src/static/icon/fi-rr-heart.svg'
          "
          @click="toggleFavorite(song)"
        ></image>

        <image
          v-else
          style="width: 40rpx; height: 40rpx"
          src="/src/static/icon/fi-rr-heart.svg"
          @click="toggHeartCancel(song)"
        ></image>
      </view>
    </view>
  </view>
</template>

<script setup>
  import { ref } from 'vue'
  import musicPlayback from './musicPlayback.vue'
  const props = defineProps({
    type: {
      type: Number,
      // eslint-disable-next-line vue/require-valid-default-prop
      default: true,
    },
  })
  const songs = ref([
    { name: '玛卡巴卡', duration: '3:35', favorite: false },
    { name: '海绵宝宝主题曲', duration: '3:35', favorite: true },
    { name: '开心超人', duration: '3:35', favorite: false },
    { name: '小燕子', duration: '3:35', favorite: true },
    { name: '小燕子 (哄睡版)', duration: '3:35', favorite: true },
    { name: '小兔子乖乖', duration: '3:35', favorite: false },
    { name: '两只老虎', duration: '3:35', favorite: false },
    { name: '小毛驴', duration: '3:35', favorite: true },
    { name: '我是一只小小鸟', duration: '3:35', favorite: false },
    { name: '小星星', duration: '3:35', favorite: true },
    { name: '世上只有妈妈好', duration: '3:35', favorite: false },
    { name: '蜗牛与黄鹂鸟', duration: '3:35', favorite: true },
  ])
  // 播放
  const palyBtn = () => {
    console.log(111, '播放')
  }
  // 循环播放
  const cycleBtn = () => {
    console.log(111, '循环播放')
  }
  // 当前列表
  const playFavoriteBtn = (song, index) => {
    const songData = encodeURIComponent(JSON.stringify(song))
    uni.navigateTo({
      url: `/pages/music/component/musicPlayback?songDate=${songData}`,
    })
  }
  //  切换歌曲的收藏状态
  const toggleFavorite = (song) => {
    console.log(song, 'indexindex')
    song.isFavorite = !song.isFavorite
  }
  //  点击取消收藏
  const toggHeartCancel = (song) => {
    console.log(song, 'songsong')
  }
  onLoad(() => {
    console.log(props, '111111')
  })
</script>

<style scoped>
  .header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 2rpx solid #f0f0f0;
  }

  .header-left {
    display: flex;
    align-items: center;
  }
  .play-circle {
    display: flex;
    /* justify-content: center; */
    align-items: center;
    width: 70rpx;
    height: 100rpx;
  }
  .orange-icon {
    margin-right: 16rpx;
    color: #f97316;
  }

  .text-gray {
    display: flex;
    align-items: center;
    width: 440rpx;
    overflow: hidden;
    font-family: 'PingFang SC';
    font-size: 24rpx;
    font-style: normal;
    font-weight: 400;
    color: #333;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .header-right {
    display: flex;
    gap: 32rpx;
  }

  .gray-icon {
    color: #6b7280;
    cursor: pointer;
  }
  /* 播发 */
  .currently-playing {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  .currently-playing-left {
    display: flex;
    align-items: center;
  }
  /* 列表 */
  .playlist {
    height: calc(100vh - 630rpx);
    overflow: auto;
  }
  .playlist::-webkit-scrollbar {
    display: none;
  }
  .playlist-item {
    display: flex;
    align-items: center;
    padding: 24rpx 0px;
    cursor: pointer;
    border-bottom: 2rpx solid #f0f0f0;
  }

  .playlist-item:hover {
    background-color: #f9fafb;
  }

  .album-cover {
    width: 100rpx;
    height: 100rpx;
    margin-right: 24rpx;
    overflow: hidden;
  }

  .cover-inner {
    display: flex;
    align-items: center;
    width: 100%;
    height: 100%;
  }

  .song-details {
    flex: 1;
  }

  .song-name {
    font-family: 'PingFang SC';
    font-size: 32rpx;
    font-style: normal;
    font-weight: 400;
    color: #333;
  }

  .song-controls {
    display: flex;
    gap: 32rpx;
    align-items: center;
    font-size: 24rpx;
    font-style: normal;
    font-weight: 400;
    color: var(--999, #999);
  }
</style>