singer-detail.vuemusic-list.vuesong-list.vue

actions.js涉及的异步操作getters.js store中定义的getter这里返回state里的singerexport const singer = state => state.singerindex.js 组装模块并导出mutation.js 跟级别的mutation

//使用 ES2015 风格的计算属性命名功能来使用一个常量作为函数名
import * as types from './mutation-types'
const mutations = {
[types.SET_SINGER](state, singer) {
state.singer = singer
}
}
export default mutationsmutation-type.js 对mutation作相应的映射state.js 定义store的state

{
path: '/singer',
component: Singer,
children: [
{
path: ':id',
component: SingerDetail
}
]
}

<template>
<div class="singer" ref="singer">
<listview :data = "singers" @select="selectSinger"></listview>
<router-view></router-view>
</div>
</template>

selectSinger(singer) {
this.$router.push({
path: `/singer/${singer.id}`
})
this.setSinger(singer)
}

selectItem(item) {
this.$emit('select', item)
//console.log('item:' + item)
}

<singer-detail>
<musci-list>
...
<scroll>
<song-list>...</song-list>
<loading>...</loading>
</scroll>
</music-list>
</singer-detail>

export function getSingerDetail(singerId) {
const url = 'https://c.y.qq.com/v8/fcg-bin/fcg_v8_singer_track_cp.fcg'const data = Object.assign({}, commonParams, {
hostUin: 0,
needNewCode: 0,
platform: 'yqq',
order: 'listen',
begin: 0,
num: 80,
songstatus: 1,
singermid: singerId
})return jsonp(url, data, options)
}

data() {
return {
songs: []}
}
_getDetail() {
if (!this.singer.id) {
this.$router.push('/singer')
return
}
console.log(this.singer)
getSingerDetail(this.singer.id).then((res) => {
if (res.code === ERR_OK) {
console.log(res.data.list)
this.songs = this._normalizeSongs(res.data.list)
}
})
}

_normalizeSongs(list) {
let ret = []
list.forEach((item) => {
let {musicData} = item
if (musicData.songid && musicData.albummid) {
ret.push(createSong(musicData))
}
})
return ret
}

export default class Song {
constructor({id, mid, singer, name, album, duration, image, url}) {
this.id = id
this.mid = mid
this.singer = singer
this.name = name
this.album = album
this.duration = duration
this.image = image
this.url = url
}
}
export function createSong(musicData) {
return new Song({
id: musicData.songid,
mid: musicData.songmid,
singer: filterSinger(musicData.singer),
name: musicData.songname,
album: musicData.albumname,
duration: musicData.interval,
image: `https://y.gtimg.cn/music/photo_new/T002R300x300M000${musicData.albummid}.jpg?max_age=2592000`,
url: `http://ws.stream.qqmusic.qq.com/${musicData.songid}.m4a?fromtag=46`
})
}
function filterSinger(singer) {
let ret = []
if (!singer) {
return ''
}
singer.forEach((s) => {
ret.push(s.name)
})
return ret.join('/')
}

created() {
this._getDetail()
}

.bg-image
position: relative
width: 100%
height: 0
padding-top: 70%
transform-origin: top
background-size: cover

back() {
this.$router.back()
},

scrollY(newVal) {
let translateY = Math.max(this.minTransalteY, newVal)
let zIndex = 0
let scale = 1
let blur =0
const percent = Math.abs(newVal / this.imageHeight)
if (newVal > 0) {
scale = 1 + percent
zIndex = 10
} else {
blur = Math.min(20, percent * 20)
}
this.$refs.layer.style[transform] = `translate3d(0,${translateY}px,0)`
this.$refs.filter.style[backdrop] = `blur(${blur}px)`
if (newVal < this.minTransalteY) {
zIndex = 10
this.$refs.bgImage.style.paddingTop = 0
this.$refs.bgImage.style.height = `${RESERVED_HEIGHT}px`
this.$refs.playBtn.style.display = "none"
} else {
this.$refs.bgImage.style.paddingTop = '70%'
this.$refs.bgImage.style.height = 0
this.$refs.playBtn.style.display = ''
}
this.$refs.bgImage.style[transform] = `scale(${scale})`
this.$refs.bgImage.style.zIndex = zIndex
}

let elementStyle = document.createElement('div').stylelet vendor = (() => {
let transformNames = {
webkit: 'webkitTransform',
Moz: 'MozTransform',
O: 'OTransform',
ms: 'msTransform',
standard: 'transform'
}for (let key in transformNames) {
if (elementStyle[transformNames[key]] !== undefined) {
return key
}
}return false
})()export function prefixStyle(style) {
if (vendor === false) {
return false
}if (vendor === 'standard') {
return style
}return vendor + style.charAt(0).toUpperCase() + style.substr(1)
}