新增歌曲评论

.electron-vue/webpack.renderer.config.js

@@ -27,7 +27,10 @@ const scss_loader = [
   {
     loader: 'sass-resources-loader',
     options: {
-      resources: [path.join(__dirname, '../src/renderer/assets/variable.scss')]
+      resources: [
+        path.join(__dirname, '../src/renderer/assets/variable.scss'),
+        path.join(__dirname, '../src/renderer/assets/mixin.scss')
+      ]
     }
   }
 ]
@@ -74,6 +77,10 @@ let rendererConfig = {
             loaders: {
               sass: 'vue-style-loader!css-loader!sass-loader?indentedSyntax=1',
               scss: scss_loader
+            },
+            cssModules: {
+              localIdentName: '[local]-[hash:base64:5]',
+              camelCase: true
             }
           }
         }

.gitignore

@@ -1,6 +1,5 @@
 .DS_Store
-dist/electron/*
-dist/web/*
+dist/
 build/*
 !build/icons
 coverage

package.json

@@ -1,6 +1,6 @@
 {
   "name": "player",
-  "version": "1.1.0",
+  "version": "1.1.1",
   "author": "sunzongzheng <[email protected]>",
   "description": "An electron-vue project",
   "license": "CC0-1.0",

src/renderer/assets/mixin.scss

@@ -0,0 +1,10 @@
+@mixin text-ellipsis {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+@mixin size($size) {
+  width: $size;
+  height: $size;
+}

src/renderer/assets/variable.scss

@@ -1 +1,9 @@
-$color-primary: #26B36C;
+$color-primary: #26B36C;
+$color-primary-blue: #409EFF;
+$color-sub: #909399;
+$color-title: #303133;
+$color-content: #606266;
+$color-border1: #DCDFE6;
+$color-border2: #E4E7ED;
+$color-border3: #EBEEF5;
+$color-border4: #F2F6FC;

src/renderer/filters/index.js

@@ -1,4 +1,4 @@
-import Vue from 'vue'
+import moment from 'moment'
 
 Vue.filter('source', val => {
   return {
@@ -10,3 +10,9 @@ Vue.filter('source', val => {
 Vue.filter('defaultAlbum', val => {
   return val || require('../assets/defaultAlbum.png')
 })
+Vue.filter('date', (val, format) => {
+  return moment(val).format(format)
+})
+Vue.filter('dateDiff', (val, format) => {
+  return moment(val).fromNow()
+})

src/renderer/router/index.js

@@ -13,16 +13,17 @@ const router = new Router({
       },
       children: [
         {
-          path: '/searchResult',
+          path: '/searchResult', // 搜索结果
           name: 'searchResult',
           component: require('@/view/main/searchResult/index.vue')
-        }, {
-          path: '/playlist/:id',
+        },
+        {
+          path: '/playlist/:id', // 创建的歌单详情
           name: 'playlist',
           component: require('@/view/main/playlist/index.vue')
         },
         {
-          path: '/rank',
+          path: '/rank', // 排行列表
           name: 'rank',
           component: require('@/view/rank/index.vue'),
           redirect: {
@@ -40,7 +41,12 @@ const router = new Router({
               component: require('@/view/rank/detail/index.vue')
             }
           ]
-        }
+        },
+        {
+          path: '/song/:id/comments', // 歌曲评论
+          name: 'song.comments',
+          component: require('@/view/comments/index.vue')
+        },
       ]
     }
   ],

src/renderer/view/comments/eventBus.js

@@ -0,0 +1,9 @@
+export default new Vue({
+  data() {
+    return {
+      hotComments: [],
+      comments: [],
+      total: 0
+    }
+  }
+})

src/renderer/view/comments/index.vue

@@ -0,0 +1,100 @@
+<template>
+    <div :class="s.comments" v-loading="loading.info">
+        <top-info :info="info"></top-info>
+        <component v-loading="loading.comment"
+                   :is="`${vendor}Comments`"
+                   :class="s.component"
+        ></component>
+    </div>
+</template>
+<script>
+  import topInfo from './topInfo.vue'
+  import neteaseComments from './vendor/netease/index.vue'
+  import qqComments from './vendor/qq/index.vue'
+  import xiamiComments from './vendor/xiami/index.vue'
+  import eventBus from './eventBus'
+
+  export default {
+    name: 'comments',
+    components: {
+      topInfo,
+      neteaseComments,
+      qqComments,
+      xiamiComments
+    },
+    data() {
+      return {
+        info: {},
+        loading: {
+          info: false,
+          comment: false
+        }
+      }
+    },
+    computed: {
+      vendor() {
+        return this.$route.query.vendor
+      },
+      id() {
+        return this.$route.params.id
+      },
+    },
+    methods: {
+      // 获取歌曲信息
+      async getInfo(vendor = this.vendor, id = this.id) {
+        this.loading.info = true
+        try {
+          const data = await Vue.api.getSongDetail(vendor, id)
+          console.log(data)
+          if (data.status) {
+            this.getComment(data.data.commentId)
+            for (let i in data.data) {
+              Vue.set(this.info, i, data.data[i])
+            }
+          }
+        } catch (e) {
+          console.warn(e)
+        }
+        this.loading.info = false
+      },
+      // 获取评论
+      async getComment(id) {
+        this.loading.comment = true
+        try {
+          const data = await Vue.api.getComment(this.vendor, id)
+          console.log(data)
+          if (data.status) {
+            eventBus.comments = data.data.comments
+            eventBus.hotComments = data.data.hotComments
+            eventBus.total = data.data.total
+          }
+        } catch (e) {
+        }
+        this.loading.comment = false
+      }
+    },
+    created() {
+      this.getInfo()
+    },
+    beforeRouteUpdate(to, from, next) {
+      eventBus.hotComments.length = 0
+      eventBus.comments.length = 0
+      eventBus.total = 0
+      this.getInfo(to.query.vendor, to.params.id)
+      next()
+    },
+    beforeRouteEnter(to, from, next) {
+      const allows = ['netease', 'qq', 'xiami']
+      if (allows.includes(to.query.vendor)) {
+        next()
+      }
+    }
+  }
+</script>
+<style lang="scss" module="s">
+    .comments {
+        .component {
+            padding: 24px;
+        }
+    }
+</style>

src/renderer/view/comments/titleBar.vue

@@ -0,0 +1,21 @@
+<template>
+    <div :class="s.titleBar">{{title}}</div>
+</template>
+<script>
+  export default {
+    props: {
+      title: {
+        type: String,
+        required: true
+      }
+    }
+  }
+</script>
+<style lang="scss" module="s">
+    .titleBar {
+        padding-bottom: 10px;
+        color: $color-sub;
+        border-bottom: 1px solid $color-border1;
+        font-size: 14px;
+    }
+</style>

src/renderer/view/comments/topInfo.vue

@@ -0,0 +1,55 @@
+<template>
+    <div :class="s.topInfo" v-if="info.id">
+        <img :src="info.album.cover" :class="s.cover"/>
+        <div :class="s.right">
+            <p :class="s.name">{{info.name}}</p>
+            <div :class="s.infoItem" style="margin-top: 12px;">
+                <span :class="s.label">歌手：</span>
+                <span v-for="item in info.artists" :class="s.text">{{item.name}}</span>
+            </div>
+            <div :class="s.infoItem">
+                <span :class="s.label">专辑：</span>
+                <span :class="s.text">{{info.album.name}}</span>
+            </div>
+        </div>
+    </div>
+</template>
+<script>
+  export default {
+    props: {
+      info: {
+        type: Object,
+        required: true
+      }
+    }
+  }
+</script>
+<style lang="scss" module="s">
+    .topInfo {
+        display: flex;
+        width: 100%;
+        padding: 32px 24px;
+        background-color: #FAFAFA;
+        .cover {
+            @include size(95px);
+        }
+        .right {
+            padding-left: 24px;
+            .name {
+                font-size: 22px;
+                font-weight: bold;
+                margin: 0;
+            }
+            .infoItem {
+                .label {
+                    font-size: 14px;
+                    color: $color-sub;
+                }
+                .text {
+                    font-size: 14px;
+                    color: $color-content;
+                }
+            }
+        }
+    }
+</style>

src/renderer/view/comments/vendor/netease/index.vue

@@ -0,0 +1,43 @@
+<template>
+    <div :class="s.netease">
+        <title-bar :title="`精彩评论（${hotComments.length}）`"></title-bar>
+        <ul>
+            <v-item v-for="item in hotComments"
+                    :key="item.id"
+                    :info="item"
+            ></v-item>
+        </ul>
+        <title-bar :title="`最新评论（${comments.length}）`" style="margin-top: 24px"></title-bar>
+        <ul>
+            <v-item v-for="item in comments"
+                    :key="item.id"
+                    :info="item"
+            ></v-item>
+        </ul>
+    </div>
+</template>
+<script>
+  import titleBar from '../../titleBar.vue'
+  import eventBus from '../../eventBus'
+  import vItem from './item.vue'
+
+  export default {
+    components: {
+      titleBar,
+      vItem
+    },
+    computed: {
+      hotComments() {
+        return eventBus.hotComments
+      },
+      comments() {
+        return eventBus.comments
+      }
+    }
+  }
+</script>
+<style lang="scss" module="s">
+    .netease {
+
+    }
+</style>