From 8cd7d857f422024dbad3082a799011963b28aa94 Mon Sep 17 00:00:00 2001
From: zyronon <zyronon@163.com>
Date: Thu, 30 Sep 2021 00:53:00 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BC=98=E5=8C=96=E9=9F=B3=E4=B9=90=E6=94=B6?=
 =?UTF-8?q?=E8=97=8F=E9=A1=B5=E9=9D=A2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/pages/home/Music.vue              | 35 ++++++++++++++++++---------
 src/pages/home/MusicRankList.vue      |  1 +
 src/pages/me/collect/MusicCollect.vue | 12 ++++++---
 3 files changed, 34 insertions(+), 14 deletions(-)

diff --git a/src/pages/home/Music.vue b/src/pages/home/Music.vue
index 63a54a3..3c83c87 100644
--- a/src/pages/home/Music.vue
+++ b/src/pages/home/Music.vue
@@ -4,7 +4,7 @@
       <back mode="light" @click="$back"/>
       <transition name="fade">
         <div class="center" v-if="isFixed">
-          <span class="f16">MT创作的原声</span>
+          <span class="f16">{{ music.name }}</span>
         </div>
       </transition>
       <div class="right">
@@ -24,15 +24,15 @@
               @pulldown="loadData">
         <div class="desc">
           <div class="cover-wrapper" @click="togglePlay()">
-            <img class="cover" src="../../assets/img/poster/src1-bg.png" alt="">
+            <img class="cover" :src="$imgPreview(music.cover)" alt="">
             <img v-if="!isPlay" src="../../assets/img/icon/play-white.png" alt="" class="play">
             <img v-if="isPlay" src="../../assets/img/icon/pause-white.png" alt="" class="play">
           </div>
           <div class="info">
-            <div class="name">MT创作的原声</div>
+            <div class="name">{{ music.name }}</div>
             <div>
-              <div class="user">NT</div>
-              <div class="peoples">>5585 人使用</div>
+              <div class="user">{{ music.author }}</div>
+              <div class="peoples">>{{ $likeNum(music.use_count) }} 人使用</div>
             </div>
             <div class="collection" @click.stop="toggleCollect()">
               <img v-if="isCollect" src="../../assets/img/icon/star-yellow.png">
@@ -2479,7 +2479,18 @@ export default {
             "status": 1
           }
         }
-      ]
+      ],
+
+      music: {
+        name: '发如雪',
+        mp3: 'https://m3.8js.net:99/2014/211204142150965.mp3',
+        cover: require('../../assets/img/music-cover/7.png'),
+        author: '周杰伦',
+        duration: 60,
+        use_count: 37441000,
+        is_collect: false,
+        is_play: false,
+      }
     }
   },
   watch: {
@@ -2499,6 +2510,9 @@ export default {
     }
   },
   created() {
+    if (this.$route.query.name) {
+      this.music = this.$route.query
+    }
     this.videos = this.videos.concat(this.videos2).concat(this.videos3)
   },
   computed: {},
@@ -2513,12 +2527,11 @@ export default {
       this.loading = false
     },
     togglePlay() {
-      let src = 'https://m3.8js.net:99/2014/211204142150965.mp3'
       this.isPlay = !this.isPlay
       if (this.isPlay) {
-        this.audio.pause()
-        this.audio.src = src
-        this.audio.currentTime = 0
+        if (!this.audio.src) {
+          this.audio.src = this.music.mp3
+        }
         this.audio.play();
         this.audio.addEventListener('ended', () => this.isPlay = false)
       } else {
@@ -2532,7 +2545,6 @@ export default {
     },
     stopPlay() {
       this.audio.pause()
-      this.audio.currentTime = 0
       this.audio.removeEventListener('ended', null)
     }
   },
@@ -2629,6 +2641,7 @@ export default {
 
         .cover {
           width: 12rem;
+          object-fit: cover;
           height: 100%;
           border-radius: .3rem;
         }
diff --git a/src/pages/home/MusicRankList.vue b/src/pages/home/MusicRankList.vue
index 6ce5fdc..4a09e30 100644
--- a/src/pages/home/MusicRankList.vue
+++ b/src/pages/home/MusicRankList.vue
@@ -526,6 +526,7 @@ export default {
                   border-radius: .2rem;
                   @width: 6rem;
                   width: @width;
+                  object-fit: cover;
                   height: @width;
                 }
               }
diff --git a/src/pages/me/collect/MusicCollect.vue b/src/pages/me/collect/MusicCollect.vue
index a77ea37..b33d19b 100644
--- a/src/pages/me/collect/MusicCollect.vue
+++ b/src/pages/me/collect/MusicCollect.vue
@@ -23,11 +23,12 @@
             </div>
           </div>
           <div class="option">
-            <img src="@/assets/img/icon/menu2-white.png" alt="" @click.stop="$nav('/home/music')">
+            <img src="@/assets/img/icon/menu2-white.png" alt="" @click.stop="$nav('/home/music', item)">
           </div>
         </div>
       </div>
-      <no-more class="mb7r"/>
+      <Loading v-if="loading" :is-full-screen="false"/>
+      <no-more v-else class="mb7r"/>
     </div>
     <div class="float-play-music" v-if="currentItem">
       <div class="process" :style="{width : process + 'px'}"></div>
@@ -46,7 +47,7 @@
           </div>
         </div>
         <div class="option">
-          <b-button type="primary" size="small">使用</b-button>
+          <b-button type="primary" size="small" @click="$no">使用</b-button>
         </div>
       </div>
     </div>
@@ -61,6 +62,7 @@ export default {
   props: {},
   data() {
     return {
+      loading: false,
       list: [],
       audio: new Audio(),
       currentItem: null,
@@ -85,7 +87,9 @@ export default {
   },
   methods: {
     async getData() {
+      this.loading = true
       let res = await this.$api.videos.collect()
+      this.loading = false
       if (res.code === this.SUCCESS) {
         this.list = res.data.music.list
       }
@@ -172,6 +176,7 @@ export default {
               border-radius: .2rem;
               @width: 6rem;
               width: @width;
+              object-fit: cover;
               height: @width;
             }
           }
@@ -260,6 +265,7 @@ export default {
 
           .cover {
             border-radius: .2rem;
+            object-fit: cover;
             @width: 5rem;
             width: @width;
             height: @width;