message tab

README.md

@@ -13,9 +13,9 @@ https://github.com/Binaryify/NeteaseCloudMusicApi
 ![picture 02](https://github.com/tatoMa/neteast-cloud-music-player/blob/master/02.jpg?raw=true)
 
 - [ ] maybe login?
-- [x] click and play music without wipeout playlist
-- [ ] message tab
 - [ ] download music function
+- [x] message tab with styled component and function
+- [x] click and play music without wipeout playlist
 - [x] audio analyser and synchronizer effect by web api and drawing on canvas
 - [x] playlist tab in player
 - [x] player tabs and sections

src/components/Player.vue

@@ -198,10 +198,10 @@
               <PlayerTabPlaylist/>
             </v-col>
             <v-col v-if="tab === 2" class="scrollY" cols="12">
-              <PlayerTabDownload/>
+              <PlayerTabMessage/>
             </v-col>
             <v-col v-if="tab === 3" class="scrollY" cols="12">
-              <PlayerTabMessage/>
+              <PlayerTabDownload/>
             </v-col>
           </v-row>
           <PlayerBottomNav

src/components/PlayerBottomNav.vue

@@ -17,14 +17,15 @@
     </v-btn>
 
     <v-btn @click.stop="toggleBottomNavTab(2)">
+      <span>Message</span>
+      <v-icon>mdi-message</v-icon>
+    </v-btn>
+
+    <v-btn @click.stop="toggleBottomNavTab(3)">
       <span>Download</span>
       <v-icon>mdi-cloud-download</v-icon>
     </v-btn>
 
-    <v-btn @click.stop="toggleBottomNavTab(3)">
-      <span>Message</span>
-      <v-icon>mdi-message</v-icon>
-    </v-btn>
   </v-bottom-navigation>
 </template>
 

src/components/PlayerTabMessage.vue

@@ -1,5 +1,47 @@
 <template>
-    <div> message working progress</div>
+  <div>
+<!-- {{getCommentsById}} -->
+  <v-card
+    v-for="(item, index) in getCommentsById"
+    :key="index"
+    class="mb-3"
+  >
+      <v-card-text class="pb-0">
+        {{item.content}}
+      </v-card-text>
+
+      <v-card-actions class="px-0">
+        <v-list-item class="grow">
+          <v-list-item-avatar color="grey darken-3">
+            <v-img
+              class="elevation-6"
+              :src="item.user.avatarUrl"
+            ></v-img>
+          </v-list-item-avatar>
+
+          <v-list-item-content>
+            <v-list-item-title>{{item.user.nickname}}</v-list-item-title>
+          </v-list-item-content>
+
+          <!-- <v-row
+            align="center"
+            justify="end"
+          >
+            <v-icon class="mr-1">mdi-heart</v-icon>
+            <span class="subheading mr-2">256</span>
+            <span class="mr-1">·</span>
+            <v-icon class="mr-1">mdi-share-variant</v-icon>
+            <span class="subheading">45</span>
+          </v-row> -->
+        </v-list-item>
+      </v-card-actions>
+    </v-card>
+    <!-- <ul>
+      <li v-for="(item, index) in getCommentsById" :key="index">
+        {{item.content}}
+      </li>
+    </ul> -->
+  </div>
 </template>
 
 <script>
@@ -8,12 +50,17 @@ import { mapGetters } from 'vuex'
 export default {
   computed: {
     ...mapGetters({
-      currentTrack: 'player/getCurrentTrack',
-      paused: 'player/getPaused',
+      // currentTrack: 'player/getCurrentTrack',
+      getCommentsById: 'getCommentsById',
       // songUrl: 'player/getSong',
-      getMusicDetailsList: 'player/getMusicDetailsList',
+      // getMusicDetailsList: 'player/getMusicDetailsList',
       getMusicUrlsListById: 'player/getMusicUrlsListById'
     })
+  },
+  mounted () {
+    // console.log(this.getMusicUrlsListById[0].id)
+
+    this.$store.commit('setCommentsById', this.getMusicUrlsListById[0].id)
   }
 }
 </script>

src/components/PlayerTabPlaylist.vue

@@ -6,21 +6,22 @@
         {{item.name}}
       </li>
     </ul> -->
-    <div>
       <v-list
-        v-for="track in getMusicDetailsList"
-        :key="track.id"
         class="ma-0 pa-0"
         color="transparent"
       >
-        <MusicItem
-          :id="track.id"
-          :artist="track.ar[0].name"
-          :name="track.name"
-          @setMusic="setMusic(track.id)"
-        />
+        <v-subheader>My playlist</v-subheader>
+        <v-list-item-group :value="currentTrack" color="primary">
+          <MusicItem
+            v-for="track in getMusicDetailsList"
+            :key="track.id"
+            :id="track.id"
+            :artist="track.ar[0].name"
+            :name="track.name"
+            @setMusic="setMusic(track.id)"
+          />
+        </v-list-item-group>
       </v-list>
-    </div>
 </template>
 
 <script>
@@ -32,10 +33,9 @@ export default {
   computed: {
     ...mapGetters({
       currentTrack: 'player/getCurrentTrack',
-      paused: 'player/getPaused',
-      // songUrl: 'player/getSong',
-      getMusicDetailsList: 'player/getMusicDetailsList',
-      getMusicUrlsListById: 'player/getMusicUrlsListById'
+      // paused: 'player/getPaused',
+      getMusicDetailsList: 'player/getMusicDetailsList'
+      // getMusicUrlsListById: 'player/getMusicUrlsListById'
     })
   },
   methods: {

src/store/index.js

@@ -6,7 +6,8 @@ import {
   getPlayListById,
   getSearchResultByText,
   getNewMusicLists,
-  getTopMusicListsById
+  getTopMusicListsById,
+  getCommentsById
 } from '../utils/api'
 
 Vue.use(Vuex)
@@ -18,6 +19,7 @@ export default new Vuex.Store({
     playLists: [],
     searchResult: null,
     newMusicLists: [],
+    comments: null,
     topMusicListsById: { 0: [], 1: [], 2: [], 3: [], 4: [], 5: [], 6: [], 7: [], 8: [] }
   },
   mutations: {
@@ -48,8 +50,15 @@ export default new Vuex.Store({
         // console.log(id, res)
         state.topMusicListsById[id] = res
       })
+    },
+    setCommentsById (state, id) {
+      // console.log(id)
+      state.comments = []
+      getCommentsById(id).then(res => {
+        // console.log(id, res)
+        state.comments = res.hotComments
+      })
     }
-
   },
   actions: {
 
@@ -72,6 +81,9 @@ export default new Vuex.Store({
     },
     getTopMusicListsById: (state) => {
       return state.topMusicListsById
+    },
+    getCommentsById: (state) => {
+      return state.comments
     }
 
   },

src/utils/api.js

@@ -27,6 +27,9 @@ const getMusicUrlByIds = (ids) => axios.get(`${process.env.VUE_APP_baseURL}/song
 const getSearchResultByText = (text) => axios.get(`${process.env.VUE_APP_baseURL}/search?keywords=${text}`, { withCredentials: true })
   .then((response) => response.data.result.songs)
 
+const getCommentsById = (id) => axios.get(`${process.env.VUE_APP_baseURL}/comment/music?id=${id}`, { withCredentials: true })
+  .then((response) => response.data)
+
 export {
   getPlayLists,
   getNewMusicLists,
@@ -36,5 +39,6 @@ export {
   getMusicDetailByIds,
   getMusicUrlById,
   getMusicUrlByIds,
-  getSearchResultByText
+  getSearchResultByText,
+  getCommentsById
 }