-
Notifications
You must be signed in to change notification settings - Fork 385
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
1 parent
3b26c8b
commit 1590cda
Showing
12 changed files
with
384 additions
and
170 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,6 +1,6 @@ | ||
| { | ||
| "name": "player", | ||
| "version": "1.0.23", | ||
| "version": "1.0.25", | ||
| "author": "sunzongzheng <[email protected]>", | ||
| "description": "An electron-vue project", | ||
| "license": "CC0-1.0", | ||
|
|
||
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,14 @@ | ||
| import Vue from 'vue' | ||
|
|
||
| export default { | ||
| namespaced: true, | ||
| state: { | ||
| info: null | ||
| }, | ||
| mutations: { | ||
| update(state, val) { | ||
| for (let i in val) | ||
| state[i] = val[i] | ||
| } | ||
| } | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,26 @@ | ||
| import { mapState, mapActions } from 'vuex' | ||
| import Vue from 'vue' | ||
|
|
||
| export default { | ||
| computed: { | ||
| ...mapState('rank', ['info']) | ||
| }, | ||
| methods: { | ||
| ...mapActions('api', ['play']), | ||
| doPlay(item) { | ||
| this.$store.commit('c_playlist/update', this.info.list.map(item => { | ||
| item.source = 'netease' | ||
| return item | ||
| })) | ||
| this.play(item) | ||
| } | ||
| }, | ||
| beforeRouteEnter(to, from, next) { | ||
| console.log(Vue.store.state.rank.info) | ||
| if (Vue.store.state.rank.info) { | ||
| next() | ||
| } else { | ||
| Vue.router.push({name: 'rank.main'}) | ||
| } | ||
| } | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,135 @@ | ||
| <template> | ||
| <div :class="s.app"> | ||
| <div :class="s.top"> | ||
| <img :src="info.cover"/> | ||
| <div :class="s.right"> | ||
| <span :class="s.name">{{info.name}}</span> | ||
| <p style="font-size: 12px">{{info.description}}</p> | ||
| <a :class="s.play" @click="doPlay(info.list[0])">立即播放</a> | ||
| <span :class="s.total">累计播放：{{info.playCount}}</span> | ||
| </div> | ||
| </div> | ||
| <el-table :data="info.list" | ||
| :class="s.table" | ||
| :row-class-name="s.row" | ||
| > | ||
| <el-table-column label="歌曲" :width="220"> | ||
| <template scope="scope"> | ||
| <div :class="s.nameItem"> | ||
| <div :class="s.songName" :title="scope.row.name">{{scope.row.name}}</div> | ||
| <div :class="s.songControl"> | ||
| <Icon type="item-play" @click.native="doPlay(scope.row)"></Icon> | ||
| <add-to-playlist :info="scope.row"></add-to-playlist> | ||
| </div> | ||
| </div> | ||
| </template> | ||
| </el-table-column> | ||
| <el-table-column label="歌手"> | ||
| <template scope="scope"> | ||
| {{scope.row.artists[0].name}} | ||
| </template> | ||
| </el-table-column> | ||
| <el-table-column prop="album.name" label="专辑"> | ||
| <template scope="scope"> | ||
| <span :class="s.album">{{scope.row.album.name}}</span> | ||
| </template> | ||
| </el-table-column> | ||
| </el-table> | ||
| </div> | ||
| </template> | ||
| <script src="./index.js"></script> | ||
| <style lang="scss" module="s"> | ||
| .app { | ||
| .top { | ||
| display: flex; | ||
| background-color: #FAFAFA; | ||
| padding: 26px; | ||
| $imgWidth: 135px; | ||
| & > img { | ||
| width: $imgWidth; | ||
| height: $imgWidth; | ||
| } | ||
| .right { | ||
| display: flex; | ||
| flex-direction: column; | ||
| padding-left: 16px; | ||
| width: calc(100% - #{$imgWidth}); | ||
| position: relative; | ||
| .name { | ||
| font-size: 22px; | ||
| font-weight: bold; | ||
| } | ||
| .play { | ||
| position: absolute; | ||
| bottom: 2px; | ||
| left: 16px; | ||
| cursor: pointer; | ||
| display: flex; | ||
| width: 100px; | ||
| height: 22px; | ||
| justify-content: center; | ||
| align-items: center; | ||
| border-radius: 4px; | ||
| font-size: 14px; | ||
| background-color: #67C23A; | ||
| color: white; | ||
| transition: all .2s; | ||
| &:hover { | ||
| transition: all .2s; | ||
| opacity: .8; | ||
| } | ||
| } | ||
| .total { | ||
| position: absolute; | ||
| bottom: 0; | ||
| right: 0; | ||
| font-size: 12px; | ||
| color: gray; | ||
| } | ||
| } | ||
| } | ||
| .table { | ||
| width: 100%; | ||
| padding: 0 24px; | ||
| overflow-x: hidden; | ||
| .row { | ||
| &:hover { | ||
| .songControl { | ||
| display: inline-flex; | ||
| align-items: center; | ||
| } | ||
| } | ||
| } | ||
| .nameItem { | ||
| display: flex; | ||
| .songName { | ||
| width: 160px; | ||
| overflow: hidden; | ||
| text-overflow: ellipsis; | ||
| white-space: nowrap; | ||
| padding-left: 4px; | ||
| } | ||
| .songControl { | ||
| display: none; | ||
| width: 60px; | ||
| svg { | ||
| margin-left: 6px; | ||
| cursor: pointer; | ||
| } | ||
| } | ||
| } | ||
| .album { | ||
| display: block; | ||
| width: 200px; | ||
| overflow: hidden; | ||
| text-overflow: ellipsis; | ||
| white-space: nowrap; | ||
| } | ||
| :global { | ||
| .el-table__body-wrapper { | ||
| overflow-x: hidden; | ||
| } | ||
| } | ||
| } | ||
| } | ||
| </style> |
Oops, something went wrong.