歌单的收藏取消收藏操作

IFmiss · Nov 26, 2018 · ba31da4 · ba31da4
1 parent 7a1acc1
commit ba31da4
Show file tree

Hide file tree

Showing 5 changed files with 34 additions and 11 deletions.
diff --git a/src/api/index.js b/src/api/index.js
@@ -70,7 +70,11 @@ const API = {
  RANK_SHEET_LISTS: `/toplist/detail`,
 
  // 获取专辑列表信息 参数id
- SHEET_ALBUM_LISTS: `/album`
+ SHEET_ALBUM_LISTS: `/album`,
+
+ // 歌单收藏 | 取消收藏
+ // t : 类型,1:收藏,2:取消收藏 id : 歌单 id
+ SHEET_SUBSCRIBE: `/playlist/subscribe`
  },
 
  /**

diff --git a/src/components/touchbar/index.vue b/src/components/touchbar/index.vue
@@ -4,10 +4,11 @@
  .bar
  .progress(ref="bar")
  .current(ref="current", :style="{background: color}")
- .range(ref="range" class="{'music', type === 'progress'}"
+ .range(ref="range" :class="type === 'progress' ? 'music' : ''"
  @touchstart="rangeTouchStart"
  @touchmove="rangeTouchMove"
  @touchend="rangeTouchEnd")
+ .icon(v-if="type === 'progress'", :style="{background: color}")
  slot.right-sider(name="right-sider")
 </template>
 <script>
@@ -118,15 +119,18 @@ export default {
  left: 0;
  transform: translate(-50%, -50%);
  &.music{
- &::before{
+ width: p2r(0.3rem);
+ height: p2r(0.3rem);
+ border-radius: p2r(0.3rem) / 2;
+ .icon{
  position: absolute;
  top: 50%;
  left: 50%;
  background: $primary_color;
  transform: translate(-50%, -50%);
- width: p2r(0.08rem);
- height: p2r(0.08rem);
- border-radius: p2r(0.08rem) / 2;
+ width: p2r(0.09rem);
+ height: p2r(0.09rem);
+ border-radius: p2r(0.09rem) / 2;
  }
  }
  }

diff --git a/src/utils/http.js b/src/utils/http.js
@@ -24,7 +24,6 @@ http.interceptors.request.use(function (config) {
  * 响应拦截
  */
 http.interceptors.response.use(res => {
- console.log(res)
  if (res.data.code === 200) {
  return res
  }

diff --git a/src/views/find/play/index.vue b/src/views/find/play/index.vue
@@ -16,7 +16,7 @@
  .lrc(v-if="isShowLrc" @click="toggleType")
  .vol
  TouthBar(@setProgress="setVol"
- color="rgba(77, 77, 77, 0.7)"
+ color="rgba(77, 77, 77, 0.2)"
  :progress="audioVol")
  .left-sider(slot="left-sider")
  i.icon-menu
@@ -39,6 +39,7 @@
  TouthBar(@setProgress="setProgress"
  :color="musicColor"
  :progress="percent"
+ type='progress'
  @setPercent="setPercent")
  .left(slot="left-sider")
  span {{currentTime | parseMusicTime}}

diff --git a/src/views/find/sheet/sheet-detail/index.vue b/src/views/find/sheet/sheet-detail/index.vue
@@ -48,7 +48,8 @@
  span.label 播放全部
  span.count (共{{detail.trackCount}}首)
  .collect
- span + 收藏 ({{detail.subscribedCount | parseNumber}})
+ span(v-if="!detail.subscribed" @click="subscribe") + 收藏 ({{detail.subscribedCount | parseNumber}})
+ span(v-else @click="subscribe") 已收藏
  .list-content
  MusicList(v-for="(item, index) in tracks" :index="index" :name="item.name", :singer="item.ar", :id="item.id", :list="item", :playSheet="playSheet(item.id)", @play="playMusic")
  transition(name="fade")
@@ -109,8 +110,10 @@ export default {
  let res = await this.$mutils.fetchData(fetchUrl, {
  id: this.sheetId
  })
- this.detail = this.isAlbum ? res.data.album : res.data.playlist
- this.tracks = this.isAlbum ? res.data.songs : res.data.playlist.tracks
+ let detail = this.isAlbum ? res.data.album : res.data.playlist
+ this.$set(this, 'detail', detail)
+ let tracks = this.isAlbum ? res.data.songs : res.data.playlist.tracks
+ this.$set(this, 'tracks', tracks)
  },
 
  playSheet (id) {
@@ -131,6 +134,18 @@ export default {
  this.showAvatar = false
  },
 
+ /**
+ * 歌单收藏
+ */
+ subscribe () {
+ this.$mutils.fetchData(API.sheet.SHEET_SUBSCRIBE, {
+ t: this.detail.subscribed ? 2 : 1,
+ id: this.detail.id
+ }).then(res => {
+ this.$set(this.detail, 'subscribed', !this.detail.subscribed)
+ })
+ },
+
  /**
  * 播放音乐
  * 在播放之前，需要进行一下操作