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

<template>
  <view class="bg">
    <!-- 播放全部 -->
    <view class="header">
      <view class="header-left">
        <!-- 播放按钮 -->
        <view class="play-circle" @click="palyHeaderBtn">
          <image
            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" @click="cycleBtn">
        <image v-if="isRefresh" class="imgIcon" src="/src/static/icon/fi-rr-refresh.svg"></image>
        <image v-else class="imgIcon" src="/src/static/icon/fi-rr-shuffle.svg"></image>
      </view>
    </view>

    <!-- 当前播放   循环播放-->
    <view class="currently-playing" v-show="playDom">
      <view class="currently-playing-left">
        <view class="play-circle" @click="palyBtn">
          <image v-if="isRePaly" class="palyIcon" src="/src/static/icon/fi-rr-play.svg"></image>
          <image v-else class="imgIcon" src="/src/static/icon/fi-rr-pause.svg"></image>
        </view>
        <text class="text-paly">继续播放: {{ songTitle }}</text>
      </view>
      <view style="display: flex; gap: 80rpx">
        <image
          @click="cleanBtn"
          class="imgIcon"
          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">
          <image
            style="width: 100rpx; height: 100rpx"
            src="/src/static/icon/fi-rr-big-play.svg"
          ></image>
        </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>
  </view>
</template>

<script setup>
  import { ref } from 'vue'

  // 综合还是收藏
  const props = defineProps({
    type: {
      type: Number,
      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 isRefresh = ref(true) // 循环
  const isRePaly = ref(true) // 播放暂停切换
  const playDom = ref(true)
  const songTitle = ref('')
  // 播放 暂停
  const palyHeaderBtn = () => {
    console.log(111, '播放', '暂停')
  }
  // 播放 暂停
  const palyBtn = () => {
    isRePaly.value = !isRePaly.value
    console.log(111, '播放', '暂停')
  }
  // 循环播放
  const cycleBtn = () => {
    isRefresh.value = !isRefresh.value
    console.log(111, '循环播放')
  }
  // 清除当前播放DOM
  const cleanBtn = () => {
    playDom.value = false
  }
  // 当前列表
  const playFavoriteBtn = (song, index) => {
    console.log(222)

    playDom.value = true
    songTitle.value = song.name
    console.log(song, 'songsong')
    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 lang="scss">
  .header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 2rpx solid #f0f0f0;
    padding: 16rpx 32rpx;
    background: #fff;

    .header-left {
      display: flex;
      align-items: center;
    }
  }
  .play-circle {
    display: flex;
    align-items: center;
    height: 100rpx;
  }

  .text-gray {
    padding-left: 25rpx;
    font-size: 32rpx;
    color: #333;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .text-paly {
    padding-left: 25rpx;
    font-size: 24rpx;
    color: #333;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  /* 播放 */
  .currently-playing {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0rpx 32rpx;
    background: #fff;
    border-bottom: 2rpx solid #f0f0f0;
    .currently-playing-left {
      display: flex;
      align-items: center;
    }
  }

  /* 列表 */
  .playlist {
    height: calc(100vh - 620rpx);
    overflow: auto;
  }
  .playlist::-webkit-scrollbar {
    display: none;
  }
  .playlist-item {
    display: flex;
    align-items: center;
    border-bottom: 2rpx solid #f0f0f0;
    padding: 16rpx 32rpx;
    background: #fff;
  }

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

  .song-details {
    flex: 1;
  }

  .song-name {
    font-size: 32rpx;
    color: #333;
  }

  .song-controls {
    display: flex;
    gap: 32rpx;
    align-items: center;
    font-size: 24rpx;
    color: #999;
  }
  .imgIcon {
    width: 32rpx;
    height: 32rpx;
  }
  .palyIcon {
    width: 28rpx;
    height: 28rpx;
  }
</style>