新增腾讯、网易云歌单链接打开

pull/96/head
lyswhut 2019-10-17 14:05:29 +08:00
parent 59627e048f
commit 6ea0837cce
6 changed files with 139 additions and 28 deletions

View File

@ -129,6 +129,9 @@ export default {
}
.input {
-webkit-app-region: no-drag;
position: absolute;
left: 15px;
top: 13px;
}
// img {

View File

@ -1,5 +1,5 @@
<template lang="pug">
div(:class="[$style.search, focus ? $style.active : '']")
div(:class="[$style.search, focus ? $style.active : '', big ? $style.big : '', small ? $style.small : '']")
div(:class="$style.form")
input(:placeholder="placeholder" v-model.trim="text"
@focus="handleFocus" @blur="handleBlur" @input="$emit('input', text)"
@ -36,6 +36,14 @@ export default {
type: String,
default: '',
},
big: {
type: Boolean,
default: false,
},
small: {
type: Boolean,
default: false,
},
},
data() {
return {
@ -101,9 +109,6 @@ export default {
@import '../../assets/styles/layout.less';
.search {
position: absolute;
left: 15px;
top: 13px;
border-radius: 3px;
transition: box-shadow .4s ease, background-color @transition-theme;
display: flex;
@ -193,6 +198,19 @@ export default {
}
}
.big {
width: 500px;
// input {
// line-height: 30px;
// }
.form {
height: 30px;
button {
padding: 6px 10px;
}
}
}
each(@themes, {
:global(#container.@{value}) {

View File

@ -25,6 +25,7 @@ const state = {
page: 1,
limit: 30,
key: null,
info: {},
},
selectListInfo: {},
isVisibleListDetail: false,
@ -84,15 +85,16 @@ const mutations = {
state.list.page = page
state.list.key = key
},
setListDetail(state, { result, key, page, desc }) {
setListDetail(state, { result, key, page }) {
state.listDetail.list = result.list
state.listDetail.total = result.total
state.listDetail.limit = result.limit
state.listDetail.page = page
state.listDetail.key = key
state.listDetail.desc = result.desc
state.listDetail.info = result.info || {}
},
setVisibleListDetail(state, bool) {
if (!bool) state.listDetail.list = []
state.isVisibleListDetail = bool
},
setSelectListInfo(state, info) {

View File

@ -1,5 +1,6 @@
import { httpFetch } from '../../request'
import { formatPlayTime, sizeFormate } from '../../index'
import jshtmlencode from 'js-htmlencode'
export default {
_requestObj_tags: null,
@ -153,7 +154,7 @@ export default {
// time: basic.publish_time,
img: basic.cover.medium_url || basic.cover.default_url,
// grade: basic.favorcnt / 10,
desc: basic.desc.replace(/<br>/g, '\n'),
desc: jshtmlencode.htmlDecode(basic.desc).replace(/<br>/g, '\n'),
source: 'tx',
})),
total: content.total_cnt,
@ -182,8 +183,14 @@ export default {
page: 1,
limit: cdlist.songlist.length + 1,
total: cdlist.songlist.length,
desc: cdlist.desc.replace(/<br>/g, '\n'),
source: 'tx',
info: {
name: cdlist.dissname,
img: cdlist.logo,
desc: jshtmlencode.htmlDecode(cdlist.desc).replace(/<br>/g, '\n'),
author: cdlist.nickname,
play_count: this.formatPlayCount(cdlist.visitnum),
},
}
})
},

View File

@ -65,6 +65,13 @@ export default {
limit: this.limit_song,
total: body.playlist.tracks.length,
source: 'wy',
info: {
play_count: this.formatPlayCount(body.playlist.playCount),
name: body.playlist.name,
img: body.playlist.coverImgUrl,
desc: body.playlist.description,
author: body.playlist.creator.nickname,
},
}
})
},

View File

@ -1,34 +1,41 @@
<template lang="pug">
div(:class="$style.container")
transition(enter-active-class="animated-fast fadeIn" leave-active-class="animated-fast fadeOut")
div(:class="$style.songListDetailContent" v-show="isVisibleListDetail")
div(:class="$style.songListDetailContent" v-if="isVisibleListDetail")
div(:class="$style.songListHeader")
div(:class="$style.songListHeaderLeft")
img(:src="selectListInfo.img")
span(:class="$style.playNum" v-if="selectListInfo.play_count") {{selectListInfo.play_count}}
img(:src="listDetail.info.img || selectListInfo.img")
span(:class="$style.playNum" v-if="listDetail.info.play_count || selectListInfo.play_count") {{listDetail.info.play_count || selectListInfo.play_count}}
div(:class="$style.songListHeaderMiddle")
h3(:title="selectListInfo.name") {{selectListInfo.name}}
p(:title="selectListInfo.desc") {{listDetail.desc || selectListInfo.desc}}
h3(:title="listDetail.info.name || selectListInfo.name") {{listDetail.info.name || selectListInfo.name}}
p(:title="listDetail.info.desc || selectListInfo.desc") {{listDetail.info.desc || selectListInfo.desc}}
div(:class="$style.songListHeaderRight")
material-btn(:class="$style.closeDetailButton" @click="hideListDetail") 返回
material-song-list(v-model="selectdData" @action="handleSongListAction" :source="source" :page="listDetail.page" :limit="listDetail.limit" :total="listDetail.total" :list="listDetail.list")
transition(enter-active-class="animated-fast fadeIn" leave-active-class="animated-fast fadeOut")
div(:class="$style.songListContent" v-show="!isVisibleListDetail")
div(:class="$style.songListContainer" v-if="!isVisibleListDetail")
div(:class="$style.header")
material-tag-list(:class="$style.tagList" :list="tagList" v-model="tagInfo")
material-tab(:class="$style.tab" :list="sorts" item-key="id" item-name="name" v-model="sortId")
material-select(:class="$style.select" :list="sourceInfo.sources" item-key="id" item-name="name" v-model="source")
div.scroll(:class="$style.songList" ref="dom_scrollContent")
ul
li(:class="$style.item" v-for="(item, index) in listData.list" @click="handleItemClick(index)")
div(:class="$style.left")
img(:src="item.img")
div(:class="$style.right" :src="item.img")
h4(:title="item.name") {{item.name}}
p(:title="item.desc") {{item.desc}}
li(:class="$style.item" style="cursor: default;" v-if="listData.list && listData.list.length && listData.list.length % 3 == 2")
div(:class="$style.pagination")
material-pagination(:count="listData.total" :limit="listData.limit" :page="listData.page" @btn-click="handleToggleListPage")
div(:class="$style.songListContent")
transition(enter-active-class="animated-fast fadeIn" leave-active-class="animated-fast fadeOut")
div.scroll(:class="$style.songList" v-if="sortId !== 'importSongList'" ref="dom_scrollContent")
ul
li(:class="$style.item" v-for="(item, index) in listData.list" @click="handleItemClick(index)")
div(:class="$style.left")
img(:src="item.img")
div(:class="$style.right" :src="item.img")
h4(:title="item.name") {{item.name}}
p(:title="item.desc") {{item.desc}}
li(:class="$style.item" style="cursor: default;" v-if="listData.list && listData.list.length && listData.list.length % 3 == 2")
div(:class="$style.pagination")
material-pagination(:count="listData.total" :limit="listData.limit" :page="listData.page" @btn-click="handleToggleListPage")
transition(enter-active-class="animated-fast fadeIn" leave-active-class="animated-fast fadeOut")
div(:class="$style.importSongListContent" v-show="sortId === 'importSongList'")
material-search-input(v-model="importSongListText" @event="handleImportSongListEvent" big placeholder="输入歌单链接或歌单ID")
svg(version='1.1' xmlns='http://www.w3.org/2000/svg' xlink='http://www.w3.org/1999/xlink' height='100%' viewBox='0 0 451.846 451.847' space='preserve')
use(xlink:href='#icon-right')
material-download-modal(:show="isShowDownload" :musicInfo="musicInfo" @select="handleAddDownload" @close="isShowDownload = false")
material-download-multiple-modal(:show="isShowDownloadMultiple" :list="selectdData" @select="handleAddDownloadMultiple" @close="isShowDownloadMultiple = false")
material-list-add-modal(:show="isShowListAdd" :musicInfo="musicInfo" @close="isShowListAdd = false")
@ -56,6 +63,7 @@ export default {
isToggleSource: false,
isShowListAdd: false,
isShowListAddMultiple: false,
importSongListText: '',
}
},
computed: {
@ -63,7 +71,17 @@ export default {
...mapGetters('songList', ['sourceInfo', 'tags', 'listData', 'isVisibleListDetail', 'selectListInfo', 'listDetail']),
...mapGetters('list', ['defaultList']),
sorts() {
return this.source ? this.sourceInfo.sortList[this.source] : []
let list
list = this.source ? [...this.sourceInfo.sortList[this.source]] : []
switch (this.source) {
case 'wy':
case 'tx':
list.push({
name: `打开${this.sourceInfo.sources.find(s => s.id == this.source).name}歌单`,
id: 'importSongList',
})
}
return list
},
isAPITemp() {
return this.setting.apiSource == 'temp'
@ -76,6 +94,7 @@ export default {
sortId(n, o) {
this.setSongList({ sortId: n })
if (o === undefined && this.listData.page !== 1) return
if (n == 'importSongList') return
this.$nextTick(() => {
this.getList(1).then(() => {
this.$nextTick(() => {
@ -88,6 +107,7 @@ export default {
tagInfo(n, o) {
this.setSongList({ tagInfo: n })
if (!o && this.listData.page !== 1) return
if (this.sortId == 'importSongList') this.sortId = this.sorts[0] && this.sorts[0].id
if (this.isToggleSource) {
this.isToggleSource = false
return
@ -104,6 +124,7 @@ export default {
source(n, o) {
this.setSongList({ source: n })
if (!this.tags[n]) this.getTags()
this.importSongListText = ''
if (o) {
this.isToggleSource = true
this.tagInfo = {
@ -253,6 +274,49 @@ export default {
if (isSelect) this.resetSelect()
this.isShowListAddMultiple = false
},
handleImportSongListEvent({ action }) {
switch (action) {
case 'submit':
this.handleGetSongListDetail()
break
case 'blur':
this.handleParseImportSongListInputText()
break
}
},
handleGetSongListDetail() {
this.handleParseImportSongListInputText()
this.setSelectListInfo({
play_count: null,
id: this.importSongListText,
author: '',
name: '',
img: null,
desc: '',
source: this.source,
})
this.clearListDetail()
this.$nextTick(() => {
this.setVisibleListDetail(true)
this.getListDetail({ id: this.importSongListText, page: 1 })
})
},
handleParseImportSongListInputText() {
if (!/[?&:/]/.test(this.importSongListText)) return
let id
switch (this.source) {
case 'wy':
id = this.importSongListText.replace(/^.+(?:\?|&)id=(\d+)(?:&.*$|#.*$|$)/, '$1')
break
case 'tx':
// https://y.qq.com/n/yqq/playsquare/4385581243.html#stat=y_new.index.playlist.pic
id = this.importSongListText.replace(/^.+\/(\d+)\.html(?:&.*$|#.*$|$)/, '$1')
break
default:
return
}
this.importSongListText = id
},
},
}
</script>
@ -281,18 +345,28 @@ export default {
width: 80px;
}
.songListContent, .song-list-detail-content {
.songListContainer, .song-list-detail-content, .songListContent, .importSongListContent {
// flex: auto;
overflow: hidden;
}
.songListContent {
.songListContainer, .songListContent, .importSongListContent {
position: relative;
display: flex;
flex-flow: column nowrap;
height: 100%;
// position: relative;
}
.importSongListContent {
position: absolute;
top: 0;
left: 0;
width: 100%;
align-items: center;
padding-top: 20%;
}
.song-list-header {
display: flex;
flex-flow: row nowrap;