AlgerMusicPlayer/src/views/mv/index.vue

<template>
  <div class="mv-list">
    <div class="mv-list-title">
      <h2>推荐MV</h2>
    </div>
    <n-scrollbar :size="100">
      <div v-loading="loading" class="mv-list-content" :class="setAnimationClass('animate__bounceInLeft')">
        <div
          v-for="(item, index) in mvList"
          :key="item.id"
          class="mv-item"
          :class="setAnimationClass('animate__bounceIn')"
          :style="setAnimationDelay(index, 30)"
        >
          <div class="mv-item-img" @click="handleShowMv(item)">
            <n-image
              class="mv-item-img-img"
              :src="getImgUrl(item.cover, '200y112')"
              lazy
              preview-disabled
              width="200"
              height="112"
            />
            <div class="top">
              <div class="play-count">{{ formatNumber(item.playCount) }}</div>
              <i class="iconfont icon-videofill"></i>
            </div>
          </div>
          <div class="mv-item-title">{{ item.name }}</div>
        </div>
      </div>
    </n-scrollbar>

    <n-drawer :show="showMv" height="100vh" placement="bottom" :z-index="999999999">
      <div v-loading="mvLoading" class="mv-detail">
        <video :src="playMvUrl" controls autoplay></video>
        <div class="mv-detail-title">
          <div class="title">{{ playMvItem?.name }}</div>
          <button @click="close">
            <i class="iconfont icon-xiasanjiaoxing"></i>
          </button>
        </div>
      </div>
    </n-drawer>
  </div>
</template>

<script setup lang="ts">
import { onMounted } from 'vue';
import { useStore } from 'vuex';

import { getMvUrl, getTopMv } from '@/api/mv';
import { IMvItem } from '@/type/mv';
import { formatNumber, getImgUrl, setAnimationClass, setAnimationDelay } from '@/utils';

defineOptions({
  name: 'Mv',
});

const showMv = ref(false);
const mvList = ref<Array<IMvItem>>([]);
const playMvItem = ref<IMvItem>();
const playMvUrl = ref<string>();
const store = useStore();
const loading = ref(false);

onMounted(async () => {
  loading.value = true;
  const res = await getTopMv(30);
  mvList.value = res.data.data;
  loading.value = false;
});

const mvLoading = ref(false);
const handleShowMv = async (item: IMvItem) => {
  mvLoading.value = true;
  store.commit('setIsPlay', false);
  store.commit('setPlayMusic', false);
  showMv.value = true;
  const res = await getMvUrl(item.id);
  playMvItem.value = item;
  playMvUrl.value = res.data.data.url;
  mvLoading.value = false;
};

const close = () => {
  showMv.value = false;
  if (store.state.playMusicUrl) {
    store.commit('setIsPlay', true);
  }
};
</script>

<style scoped lang="scss">
.mv-list {
  @apply relative h-full w-full px-4;

  &-title {
    @apply text-xl font-bold;
  }

  &-content {
    @apply grid gap-6 pb-28 mt-2;
    grid-template-columns: repeat(auto-fill, minmax(14%, 1fr));
  }

  .mv-item {
    @apply p-2 rounded-lg;
    background-color: #1f1f1f;
    &-img {
      @apply rounded-lg overflow-hidden relative;
      line-height: 0;

      &:hover img {
        @apply hover:scale-110 transition-all duration-300 ease-in-out object-top;
      }

      &-img {
        @apply w-full rounded-lg overflow-hidden;
      }

      .top {
        @apply absolute w-full h-full top-0 left-0 flex justify-center items-center transition-all duration-300 ease-in-out cursor-pointer;
        background-color: #0000009b;
        opacity: 0;

        i {
          font-size: 40px;
          transition: all 0.5s ease-in-out;
          opacity: 0;
        }

        &:hover {
          @apply opacity-100;
        }

        &:hover i {
          @apply transform scale-150 opacity-80;
        }

        .play-count {
          position: absolute;
          top: 20px;
          left: 10px;
          font-size: 14px;
        }
      }
    }

    &-title {
      @apply p-2 text-sm text-white truncate;
    }
  }
}

.mv-detail {
  @apply w-full h-full bg-black relative;

  &-title {
    @apply absolute w-full left-0 flex justify-between h-16 px-6 py-2 text-xl font-bold items-center z-50 transition-all duration-300 ease-in-out -top-24;
    background: linear-gradient(0, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 1) 100%);
    button .icon-xiasanjiaoxing {
      @apply text-3xl;
    }

    button:hover {
      @apply text-green-400;
    }
  }

  video {
    @apply w-full h-full;
  }
  video:hover + .mv-detail-title {
    @apply top-0;
  }

  .mv-detail-title:hover {
    @apply top-0;
  }
}

.mobile {
  .mv-list-content {
    grid-template-columns: repeat(auto-fill, minmax(30%, 1fr));
  }
}
</style>