feat: 歌曲详情页相似推荐

sl1673495 · Jul 30, 2019 · a0e160a · a0e160a
1 parent 8b89d64
commit a0e160a
Show file tree

Hide file tree

Showing 16 changed files with 389 additions and 95 deletions.
diff --git a/src/api/comment.js b/src/api/comment.js
@@ -1,7 +1,7 @@
-import { request } from '@/utils/axios'
+import { request, requestWithoutLoading } from '@/utils/axios'
 
 // 歌曲评论
-export const getSongComment = params => request.get(`/comment/music`, { params })
+export const getSongComment = (params, option) => requestWithoutLoading.get(`/comment/music`, { params, ...option })
 
 // 热门评论
 export const getHotComment = params => request.get(`/comment/hot`, { params })
diff --git a/src/api/playlist.js b/src/api/playlist.js
@@ -1,6 +1,8 @@
-import { request } from '@/utils/axios'
+import { request, requestWithoutLoading } from '@/utils/axios'
 
 // 获取歌单
 export const getPlaylists = (params) => request.get('/top/playlist', { params })
 // 精品歌单
-export const getTopPlaylists = (params) => request.get('/top/playlist/highquality', { params })
+export const getTopPlaylists = (params) => request.get('/top/playlist/highquality', { params })
+// 获取相似歌单
+export const getSimiPlaylists = (id, option) => requestWithoutLoading.get(`/simi/playlist?id=${id}`, option)
diff --git a/src/api/song.js b/src/api/song.js
@@ -1,4 +1,4 @@
-import { request } from '@/utils/axios'
+import { request, requestWithoutLoading } from '@/utils/axios'
 
 // 获取音乐url
 export const getSongUrl = id => request.get(`/song/url?id=${id}`)
@@ -9,5 +9,8 @@ export const getSongDetail = ids => request.get(`/song/detail?ids=${ids}`)
 // 新歌速递
 export const getTopSongs = (type) => request.get(`/top/song?type=${type}`)
 
+// 相似音乐
+export const getSimiSongs = (id, option) => requestWithoutLoading.get(`/simi/song?id=${id}`, option)
+
 // 歌词
 export const getLyric = (id) => request.get(`/lyric?id=${id}`)
diff --git a/src/base/card.vue b/src/base/card.vue
@@ -0,0 +1,71 @@
+<template>
+  <div
+    @click="onClick"
+    class="horizontal-card"
+  >
+    <div class="img-wrap">
+      <img :src="$utils.genImgUrl(img, 50)">
+      <slot name="img-mask"></slot>
+    </div>
+    <div class="content">
+      <div class="name">{{name}}</div>
+      <div class="desc">
+        <slot name="desc">
+          {{desc}}
+        </slot>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script type="text/ecmascript-6">
+export default {
+  name: 'Card',
+  props: ['img', 'name', 'desc'],
+  methods: {
+    onClick(e) {
+      this.$emit('click', e)
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.horizontal-card {
+  display: flex;
+  padding: 6px 4px;
+  cursor: pointer;
+
+  &:hover {
+    background: var(--light-bgcolor);
+  }
+
+  .img-wrap {
+    position: relative;
+    @include img-wrap(50px);
+
+    img {
+      border-radius: 4px;
+    }
+  }
+
+  .content {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    margin-left: 8px;
+    overflow: hidden;
+
+    .name {
+      margin-bottom: 4px;
+      @include text-ellipsis();
+    }
+
+    .desc {
+      font-size: $font-size-sm;
+      color: var(--font-color-grey-shallow);
+      @include text-ellipsis();
+    }
+  }
+}
+</style>
diff --git a/src/base/loading.vue b/src/base/loading.vue
@@ -0,0 +1,22 @@
+<template>
+  <div
+    class="loading"
+    v-loading="loading"
+    element-loading-text="载入中"
+    element-loading-spinner="el-icon-loading"
+    element-loading-background="transparent"
+  ></div>
+</template>
+
+<script type="text/ecmascript-6">
+export default {
+  name: 'Loading',
+  props: ['loading']
+}
+</script>
+
+<style lang="scss" scoped>
+.loading {
+  height: 200px;
+}
+</style>
diff --git a/src/components/comments.vue b/src/components/comments.vue
@@ -1,45 +1,50 @@
 <template>
   <div class="comment">
-    <div
-      class="block"
-      v-if="hotComments.length"
-    >
-      <p class="title">
-        精彩评论
-      </p>
-      <Comment
-        :key="comment.id"
-        :comment="comment"
-        :border="!$utils.isLast(index, hotComments)"
-        v-for="(comment, index) in hotComments"
-      />
-    </div>
-    <div
-      class="block"
-      v-if="comments.length"
-    >
-      <p class="title">
-        最新评论
-      </p>
-      <Comment
-        :key="comment.id"
-        :comment="comment"
-        :border="!$utils.isLast(index, comments)"
-        v-for="(comment,index) in comments"
-      />
-    </div>
-    <div
-      v-if="comments.length"
-      class="pagination"
-    >
-      <el-pagination
-        layout="prev, pager, next"
-        :page-size="PAGE_SIZE"
-        :total="total"
-        :current-page.sync="currentPage"
-        @current-change="onPageChange"
-      />
-    </div>
+    <template v-if="loading">
+      <Loading :loading="loading" />
+    </template>
+    <template v-else>
+      <div
+        class="block"
+        v-if="hotComments.length"
+      >
+        <p class="title">
+          精彩评论
+        </p>
+        <Comment
+          :key="comment.id"
+          :comment="comment"
+          :border="!$utils.isLast(index, hotComments)"
+          v-for="(comment, index) in hotComments"
+        />
+      </div>
+      <div
+        class="block"
+        v-if="comments.length"
+      >
+        <p class="title">
+          最新评论 <span class="count">({{total}})</span>
+        </p>
+        <Comment
+          :key="comment.id"
+          :comment="comment"
+          :border="!$utils.isLast(index, comments)"
+          v-for="(comment,index) in comments"
+        />
+      </div>
+      <div
+        v-if="comments.length"
+        class="pagination"
+      >
+        <el-pagination
+          layout="prev, pager, next"
+          :page-size="PAGE_SIZE"
+          :total="total"
+          :current-page.sync="currentPage"
+          @current-change="onPageChange"
+        />
+      </div>
+    </template>
   </div>
 </template>
 
@@ -55,6 +60,7 @@ export default {
   },
   data() {
     return {
+      loading: false,
       hotComments: [],
       comments: [],
       total: 0,
@@ -63,11 +69,18 @@ export default {
   },
   methods: {
     async getComment() {
-      const { hotComments = [], comments = [], total } = await getSongComment({
-        id: this.id,
-        pageSize: PAGE_SIZE,
-        offset: (this.currentPage - 1) * PAGE_SIZE
-      })
+      this.loading = true
+      const { hotComments = [], comments = [], total } = await getSongComment(
+        {
+          id: this.id,
+          pageSize: PAGE_SIZE,
+          offset: (this.currentPage - 1) * PAGE_SIZE
+        }, {
+          showLoading: false
+        })
+        .finally(() => {
+          this.loading = false
+        })
       this.hotComments = hotComments
       this.comments = comments
       this.total = total
@@ -100,8 +113,13 @@ export default {
   margin-bottom: 48px;
 
   .title {
+    font-size: $font-size-lg;
     font-weight: $font-weight-bold;
     margin-bottom: 4px;
+
+    .count {
+      font-size: $font-size;
+    }
   }
 }
 

diff --git a/src/components/mini-player.vue b/src/components/mini-player.vue
@@ -252,7 +252,7 @@ export default {
 
       img {
         &.blur {
-          filter: blur(4px);
+          filter: blur(2px);
         }
       }
-Original file line number
+Diff line change
@@ Expand Up / @@ -252,7 +252,7 @@ export default { @@
           img {
             &.blur {
-              filter: blur(4px);
+              filter: blur(2px);
             }
           }
@@ Expand Down @@