音乐界面

src/components/Posters.vue

@@ -1,16 +1,21 @@
 <template>
   <div class="posters">
-    <div class="poster-item" v-for="i in list">
-<!--       @click="$nav('/video-detail')"-->
-      <img class="poster"  v-lazy="$imgPreview(i.cover)" alt="">
+    <div class="poster-item" v-for="(i,index) in list">
+      <!--       @click="$nav('/video-detail')"-->
+      <img class="poster" v-lazy="$imgPreview(i.cover)" alt="">
       <div class="num" v-if="mode === 'normal'">
         <img class="love" src="../assets/img/icon/love.svg" alt="">
         <span>{{ $likeNum(i.digg_count) }}</span>
       </div>
-      <div class="date"  v-if="mode === 'date'">
+      <div class="date" v-if="mode === 'date'">
         <div class="day">{{ getDay(i.create_time) }}</div>
         <div class="month">{{ getMonth(i.create_time) }}</div>
       </div>
+      <template v-if="mode === 'music'">
+        <div class="music" v-if="index === 0">
+          首发
+        </div>
+      </template>
     </div>
   </div>
 </template>
@@ -28,7 +33,7 @@ export default {
     },
     mode: {
       type: String,
-      default: 'normal'//date,none
+      default: 'normal'//date,music
     }
   },
   methods: {
@@ -88,6 +93,17 @@ export default {
     display: block;
   }
 
+  .music {
+    position: absolute;
+    font-size: 1.2rem;
+    background: gold;
+    color: black;
+    padding: .2rem .3rem;
+    border-radius: .2rem;
+    top: .7rem;
+    left: .7rem;
+  }
+
   .num {
     color: white;
     position: absolute;
@@ -117,10 +133,11 @@ export default {
     padding: .6rem;
     border-radius: .6rem;
 
-    .day{
+    .day {
       font-weight: bold;
     }
-    .month{
+
+    .month {
       font-size: 1rem;
     }
   }

src/config/index.js

@@ -1,8 +1,8 @@
 export default {
-  // baseUrl: 'http://192.168.0.103/index.php/v1',
-  // filePreview:'http://192.168.0.103/static/uploads/',
-  baseUrl: 'http://192.168.10.164/index.php/v1',
-  filePreview:'http://192.168.10.164/static/uploads/'
+  baseUrl: 'http://192.168.0.103/index.php/v1',
+  filePreview:'http://192.168.0.103/static/uploads/',
+  // baseUrl: 'http://192.168.10.164/index.php/v1',
+  // filePreview:'http://192.168.10.164/static/uploads/'
   // baseUrl: 'http://localhost/index.php/v1',
   // filePreview:'http://localhost/static/uploads/'
 }

src/pages/home/Music.vue

@@ -8,8 +8,11 @@
         </div>
       </transition>
       <div class="right">
-<!--        TODO　没有淡入淡出的特效-->
-        <img class="star" v-if="isFixed" src="../../assets/img/icon/star-white.png" alt="">
+        <!--        TODO　没有淡入淡出的特效-->
+        <template v-if="isFixed">
+          <img class="star" v-if="isCollect" src="../../assets/img/icon/star-yellow.png" @click.stop="toggleCollect()">
+          <img class="star" v-else src="../../assets/img/icon/star-white.png" @click.stop="toggleCollect()">
+        </template>
         <div class="logo" v-if="!isFixed" @click="$nav('/home/music-rank-list')">抖音音乐榜</div>
         <img class="share" src="../../assets/img/icon/share-white.png" alt="">
       </div>
@@ -33,10 +36,20 @@
             </div>
           </div>
         </div>
-        <Posters mode="none" :list="videos"/>
+        <Posters mode="music" :list="videos"/>
         <Loading :is-full-screen="false" v-if="loading"/>
       </Scroll>
     </div>
+    <div class="options">
+      <div class="l-button white" @click="$no">
+        <img src="../../assets/img/icon/home/music3.png" alt="">
+        <span>分享到日常</span>
+      </div>
+      <div class="l-button primary" @click="$no">
+        <img src="../../assets/img/icon/home/record.png" alt="">
+        <span>拍同款</span>
+      </div>
+    </div>
   </div>
 </template>
 <script>
@@ -50,6 +63,7 @@ export default {
   data() {
     return {
       isFixed: false,
+      isCollect: false,
       loading: false,
       videos: [
         {
@@ -2414,6 +2428,9 @@ export default {
   },
   computed: {},
   methods: {
+    toggleCollect() {
+      this.isCollect = !this.isCollect
+    },
     async loadData() {
       this.loading = true
       await this.$sleep(1500)
@@ -2543,6 +2560,42 @@ export default {
     }
 
   }
+
+  .options {
+    font-size: 1.4rem;
+    width: 100vw;
+    position: fixed;
+    bottom: 2rem;
+    display: flex;
+    justify-content: center;
+
+    img {
+      width: 2rem;
+      height: 2rem;
+      margin-right: .5rem;
+    }
+
+    .l-button {
+      margin-left: .5rem;
+      margin-right: .5rem;
+      width: 14rem;
+      border-radius: 5rem;
+      display: flex;
+      padding: 1.5rem 0;
+      align-items: center;
+      justify-content: center;
+    }
+
+    .white {
+      color: black;
+      background: white;
+    }
+
+    .primary {
+      background: @primary-btn-color;
+      color: white;
+    }
+  }
 }
 
 </style>

src/pages/home/MusicRankList.vue

@@ -1,28 +1,32 @@
 <template>
-  <div class="MusicRankList">
-    <BaseHeader>
-      <template v-slot:center>
-        <span class="f16">抖音音乐榜</span>
-      </template>
-    </BaseHeader>
-    <div class="l-header">
-      <img src="../../assets/img/icon/music-rank-list.webp" alt="">
-      <div class="update-time">更新于：{{ $dateFormat(updateTime, 'D') }}</div>
+  <div class="MusicRankList" @scroll="scroll">
+    <back
+        mode="light"
+        img="back"
+        @click="$back()"
+        class="fixed-back"
+        direction="left"/>
+    <div class="fixed-header" :style="fixedStyle">
+      <span class="f16">抖音音乐榜</span>
     </div>
+    <!--    indicator没有像me页面那样做，应该那样做-->
     <div class="content">
+      <div class="l-header">
+        <img src="../../assets/img/icon/music-rank-list.webp" alt="">
+        <div class="update-time">更新于：{{ $dateFormat(updateTime, 'D') }}</div>
+      </div>
       <Indicator
           name="musicRankList"
           tabStyleWidth="33%"
           :tabTexts="['热歌榜','飙升樘','原创榜']"
           v-model:active-index="contentIndex">
       </Indicator>
-      <!--          TODO 点击收藏后，如果歌手在抖音有账号，就在item下面展示歌手条目-->
       <SlideRowList
           name="musicRankList"
           v-model:active-index="contentIndex">
         <SlideItem>
           <div class="list">
-            <div class="item" v-for="(item,index) in hotList" @click="togglePlay(item)">
+            <div class="item" v-for="(item,index) in hotList" @click="togglePlay(item,hotList)">
               <div class="top">
                 <div class="rank-wrapper">
                   <img v-if="index === 0" src="../../assets/img/icon/rank1.webp" alt="" class="rank">
@@ -48,7 +52,7 @@
                   </div>
                   <div class="option">
                     <img v-if="item.is_collect" src="../../assets/img/icon/star-yellow.png" alt=""
-                         @click="toggleCollect(item)">
+                         @click.stop="toggleCollect(item)">
                     <img v-else src="../../assets/img/icon/star-white.png" alt="" @click.stop="toggleCollect(item)">
                     <img src="../../assets/img/icon/menu2-white.png" alt="" @click.stop="$nav('/home/music')">
                   </div>
@@ -56,9 +60,9 @@
               </div>
               <div class="bottom" v-if="item.is_collect">
                 <div class="left">
-                  <img src="../../assets/img/icon/avatar/1.png" alt="" class="avatar">
+                  <img src="../../assets/img/music-cover/2.png" alt="" class="avatar">
                   <div class="desc">
-                    <div class="name">周</div>
+                    <div class="name">{{ item.author }}</div>
                     <div class="follow_count">粉丝：83.4w</div>
                   </div>
                 </div>
@@ -70,7 +74,7 @@
         </SlideItem>
         <SlideItem>
           <div class="list">
-            <div class="item" v-for="(item,index) in hotList" @click="togglePlay(item)">
+            <div class="item" v-for="(item,index) in hotList" @click="togglePlay(item,hotList)">
               <div class="top">
                 <div class="rank-wrapper">
                   <img v-if="index === 0" src="../../assets/img/icon/rank1.webp" alt="" class="rank">
@@ -81,7 +85,7 @@
                 <div class="right">
                   <div class="music">
                     <div class="cover-wrapper">
-                      <img src="../../assets/img/icon/avatar/1.png" alt="" class="cover">
+                      <img v-lazy="$imgPreview(item.cover)" alt="" class="cover">
                       <img v-if="!item.is_play" src="../../assets/img/icon/play-white.png" alt="" class="play">
                       <img v-if="item.is_play" src="../../assets/img/icon/pause-white.png" alt="" class="play">
                     </div>
@@ -96,7 +100,7 @@
                   </div>
                   <div class="option">
                     <img v-if="item.is_collect" src="../../assets/img/icon/star-yellow.png" alt=""
-                         @click="toggleCollect(item)">
+                         @click.stop="toggleCollect(item)">
                     <img v-else src="../../assets/img/icon/star-white.png" alt="" @click.stop="toggleCollect(item)">
                     <img src="../../assets/img/icon/menu2-white.png" alt="" @click.stop="$nav('/home/music')">
                   </div>
@@ -104,9 +108,57 @@
               </div>
               <div class="bottom" v-if="item.is_collect">
                 <div class="left">
-                  <img src="../../assets/img/icon/avatar/1.png" alt="" class="avatar">
+                  <img src="../../assets/img/music-cover/2.png" alt="" class="avatar">
                   <div class="desc">
-                    <div class="name">周</div>
+                    <div class="name">{{ item.author }}</div>
+                    <div class="follow_count">粉丝：83.4w</div>
+                  </div>
+                </div>
+                <b-button type="primary">关注</b-button>
+                <div class="arrow"></div>
+              </div>
+            </div>
+          </div>
+        </SlideItem>
+        <SlideItem>
+          <div class="list">
+            <div class="item" v-for="(item,index) in hotList" @click="togglePlay(item,hotList)">
+              <div class="top">
+                <div class="rank-wrapper">
+                  <img v-if="index === 0" src="../../assets/img/icon/rank1.webp" alt="" class="rank">
+                  <img v-else-if="index === 1" src="../../assets/img/icon/rank2.webp" alt="" class="rank">
+                  <img v-else-if="index === 2" src="../../assets/img/icon/rank3.webp" alt="" class="rank">
+                  <div v-else class="rank">{{ index + 1 }}</div>
+                </div>
+                <div class="right">
+                  <div class="music">
+                    <div class="cover-wrapper">
+                      <img v-lazy="$imgPreview(item.cover)" alt="" class="cover">
+                      <img v-if="!item.is_play" src="../../assets/img/icon/play-white.png" alt="" class="play">
+                      <img v-if="item.is_play" src="../../assets/img/icon/pause-white.png" alt="" class="play">
+                    </div>
+                    <div class="desc">
+                      <span class="name">{{ item.name }}</span>
+                      <div class="author">{{ item.author }}</div>
+                      <div class="desc-bottom">
+                        <div class="duration">{{ $duration(item.duration) }}</div>
+                        <div class="use_count">{{ $likeNum(item.use_count) }}人使用</div>
+                      </div>
+                    </div>
+                  </div>
+                  <div class="option">
+                    <img v-if="item.is_collect" src="../../assets/img/icon/star-yellow.png" alt=""
+                         @click.stop="toggleCollect(item)">
+                    <img v-else src="../../assets/img/icon/star-white.png" alt="" @click.stop="toggleCollect(item)">
+                    <img src="../../assets/img/icon/menu2-white.png" alt="" @click.stop="$nav('/home/music')">
+                  </div>
+                </div>
+              </div>
+              <div class="bottom" v-if="item.is_collect">
+                <div class="left">
+                  <img src="../../assets/img/music-cover/2.png" alt="" class="avatar">
+                  <div class="desc">
+                    <div class="name">{{ item.author }}</div>
                     <div class="follow_count">粉丝：83.4w</div>
                   </div>
                 </div>
@@ -116,7 +168,6 @@
             </div>
           </div>
         </SlideItem>
-        <SlideItem></SlideItem>
       </SlideRowList>
     </div>
   </div>
@@ -125,16 +176,13 @@
 export default {
   name: "MusicRankList",
   components: {},
-  props: {
-    modelValue: false,
-  },
   data() {
     return {
       contentIndex: 0,
       hotList: [
         {
           name: '龙卷风',
-          "mp3": "https://sf3-cdn-tos.douyinstatic.com/obj/ies-music/1658584661080088.mp3",
+          "mp3": "http://im5.tongbu.com/rings/singerring/zt_uunGo_1/5605.mp3",
           cover: require('../../assets/img/music-cover/1.png'),
           author: '周杰伦',
           duration: 99,
@@ -144,6 +192,7 @@ export default {
         },
         {
           name: '爱在西元前',
+          mp3: 'https://m3.8js.net:99/1916/501204165042405.mp3',
           cover: require('../../assets/img/music-cover/2.png'),
           author: '周杰伦',
           duration: 60,
@@ -153,6 +202,7 @@ export default {
         },
         {
           name: '蜗牛',
+          mp3: 'http://im5.tongbu.com/rings/singerring/zt_uunGo_1/3684.mp3',
           cover: require('../../assets/img/music-cover/3.png'),
           author: '周杰伦',
           duration: 60,
@@ -162,6 +212,7 @@ export default {
         },
         {
           name: '半岛铁盒',
+          mp3: 'https://m3.8js.net:99/2016n/46/94745.mp3',
           cover: require('../../assets/img/music-cover/4.png'),
           author: '周杰伦',
           duration: 60,
@@ -171,6 +222,7 @@ export default {
         },
         {
           name: '轨迹',
+          mp3: 'https://m3.8js.net:99/1832/411204324135934.mp3',
           cover: require('../../assets/img/music-cover/5.png'),
           author: '周杰伦',
           duration: 60,
@@ -180,6 +232,7 @@ export default {
         },
         {
           name: '七里香',
+          mp3: 'https://m3.8js.net:99/2016n/14/53717.mp3',
           cover: require('../../assets/img/music-cover/6.png'),
           author: '周杰伦',
           duration: 60,
@@ -189,6 +242,7 @@ export default {
         },
         {
           name: '发如雪',
+          mp3: 'https://m3.8js.net:99/2014/211204142150965.mp3',
           cover: require('../../assets/img/music-cover/7.png'),
           author: '周杰伦',
           duration: 60,
@@ -198,6 +252,7 @@ export default {
         },
         {
           name: '霍元甲',
+          mp3: 'https://m3.8js.net:99/1921/261204212643140.mp3',
           cover: require('../../assets/img/music-cover/8.png'),
           author: '周杰伦',
           duration: 60,
@@ -207,6 +262,7 @@ export default {
         },
         {
           name: '千里之外(周杰伦/费玉清)',
+          mp3: 'http://im5.tongbu.com/rings/singerring/zt_uunGo_1/121.mp3',
           cover: require('../../assets/img/music-cover/9.png'),
           author: '周杰伦',
           duration: 60,
@@ -216,6 +272,7 @@ export default {
         },
         {
           name: '菊花台',
+          mp3: 'http://im5.tongbu.com/rings/singerring/zt_uunGo_1/2022.mp3',
           cover: require('../../assets/img/music-cover/10.png'),
           author: '周杰伦',
           duration: 60,
@@ -225,6 +282,7 @@ export default {
         },
         {
           name: '不能说的秘密',
+          mp3: 'http://im5.tongbu.com/rings/singerring/zt_uunGo_1/165.mp3',
           cover: require('../../assets/img/music-cover/11.png'),
           author: '周杰伦',
           duration: 60,
@@ -234,6 +292,7 @@ export default {
         },
         {
           name: '牛仔很忙',
+          mp3: 'http://im5.tongbu.com/rings/singerring/zt_uunGo_1/219.mp3',
           cover: require('../../assets/img/music-cover/12.png'),
           author: '周杰伦',
           duration: 60,
@@ -243,6 +302,7 @@ export default {
         },
         {
           name: '给我一首歌的时间',
+          mp3: 'https://m3.8js.net:99/1938/041204380445445.mp3',
           cover: require('../../assets/img/music-cover/13.jpg'),
           author: '周杰伦',
           duration: 60,
@@ -252,6 +312,7 @@ export default {
         },
         {
           name: '烟花易冷',
+          mp3: 'https://m3.8js.net:99/1828/051204280535192.mp3',
           cover: require('../../assets/img/music-cover/14.jpg'),
           author: '周杰伦',
           duration: 60,
@@ -261,6 +322,7 @@ export default {
         },
         {
           name: '惊叹号',
+          mp3: 'https://m3.8js.net:99/20111103/150.mp3',
           cover: require('../../assets/img/music-cover/15.jpg'),
           author: '周杰伦',
           duration: 60,
@@ -270,6 +332,7 @@ export default {
         },
         {
           name: '明明就',
+          mp3: 'https://m3.8js.net:99/2016n/27/96537.mp3',
           cover: require('../../assets/img/music-cover/16.jpg'),
           author: '周杰伦',
           duration: 60,
@@ -279,6 +342,7 @@ export default {
         },
         {
           name: '算什么男人',
+          mp3: 'https://m3.8js.net:99/20150107/429.mp3',
           cover: require('../../assets/img/music-cover/17.jpg'),
           author: '周杰伦',
           duration: 60,
@@ -288,6 +352,7 @@ export default {
         },
         {
           name: '告白气球',
+          mp3: 'https://m3.8js.net:99/20161016/481.mp3',
           cover: require('../../assets/img/music-cover/18.jpg'),
           author: '周杰伦',
           duration: 60,
@@ -296,14 +361,26 @@ export default {
           is_play: false,
         },
       ],
-      updateTime: Date.now()
+      updateTime: Date.now(),
+      audio: new Audio(),
+      scrollTop: -1
+    }
+  },
+  computed: {
+    fixedStyle() {
+      return {
+        opacity: this.scrollTop / 120 > 1 ? 1 : this.scrollTop / 120
+      }
     }
   },
-  computed: {},
   created() {
     this.hotList = this.hotList.concat(this.hotList).concat(this.hotList).concat(this.hotList)
+    this.hotList = this.hotList.slice(0, 50)
   },
   methods: {
+    scroll(e) {
+      this.scrollTop = e.target.scrollTop
+    },
     toggleCollect(item) {
       item.is_collect = !item.is_collect
       if (item.is_collect) {
@@ -312,9 +389,34 @@ export default {
         this.$notice('取消收藏')
       }
     },
-    togglePlay(item) {
+    togglePlay(item, list) {
+      list.map(v => {
+        if (v.name !== item.name) {
+          v.is_play = false
+        }
+      })
       item.is_play = !item.is_play
+      if (item.is_play) {
+        this.audio.pause()
+        this.audio.src = item.mp3
+        this.audio.currentTime = 0
+        this.audio.play();
+        this.audio.addEventListener('ended', () => item.is_play = false)
+      } else {
+        this.stopPlay()
+      }
+    },
+    stopPlay() {
+      this.audio.pause()
+      this.audio.currentTime = 0
+      this.audio.removeEventListener('ended', null)
     }
+  },
+  unmounted() {
+    this.stopPlay()
+  },
+  deactivated() {
+    this.stopPlay()
   }
 }
 </script>
@@ -332,8 +434,22 @@ export default {
   color: white;
   font-size: 1.4rem;
 
-  #BaseHeader {
-    opacity: 0;
+  .fixed-back {
+    position: fixed;
+    left: 1rem;
+    top: 2rem;
+    z-index: 3;
+  }
+
+  .fixed-header {
+    background: @main-bg;
+    width: 100%;
+    position: fixed;
+    z-index: 2;
+    height: 6rem;
+    display: flex;
+    align-items: center;
+    justify-content: center;
   }
 
   .l-header {

src/utils/global-methods.js

@@ -251,9 +251,10 @@ export default {
     }
   },
   $imgPreview(url) {
+    // console.log(url)
     if (!url) return
     //本地图片
-    if (url.includes('img')) {
+    if (url.includes('img') ||url.includes('data:image')) {
       return url
     }
     //网络，全路径图片