更新 - 无限滚动

Author: lbwa

build/webpack.dev.conf.js

@@ -97,6 +97,22 @@ const devWebpackConfig = merge(baseWebpackConfig, {
  throw Error(`Proxy failed, ${err}`)
  })
  })
+
+ // search
+ app.get('/api/search', (req, res) => {
+ const url = 'https://c.y.qq.com/soso/fcgi-bin/search_for_qq_cp'
+
+ axios.get(url, {
+ headers: {
+ referer: 'https://m.y.qq.com/'
+ },
+ params: req.query
+ }).then(response => {
+ res.json(response.data)
+ }, err => {
+ throw Error(`Proxy failed, ${err}`)
+ })
+ })
  },
 
  clientLogLevel: 'warning',

src/api/config.js

@@ -10,10 +10,10 @@ export const options = {
  param: 'jsonpCallback'
 }
 
-// 部分 ajax 接口接受 jsonp 请求
-
 export const ERR_OK = 0
 
+// 部分 ajax 接口接受 jsonp 请求
+
 export const RECOMMEND_URL = 'https://c.y.qq.com/musichall/fcgi-bin/fcg_yqqhomepagerecommend.fcg'
 
 export const PLAYLIST_URL = '/api/getPlayList'
@@ -36,3 +36,8 @@ export const RANKING_LIST_URL = 'https://c.y.qq.com/v8/fcg-bin/fcg_myqq_toplist.
 export const FULL_RANKING_LIST_URL = 'https://c.y.qq.com/v8/fcg-bin/fcg_v8_toplist_cp.fcg'
 
 export const HOTKEY_URL = 'https://c.y.qq.com/splcloud/fcgi-bin/gethotkey.fcg'
+
+// 移动端 search url
+// export const SEARCH_URL = 'https://c.y.qq.com/soso/fcgi-bin/search_for_qq_cp'
+
+export const SEARCH_URL = '/api/search'

src/api/the-search.js

@@ -1,5 +1,6 @@
 import jsonp from 'common/js/jsonp'
-import { HOTKEY_URL, commonParams, options } from './config'
+import { HOTKEY_URL, SEARCH_URL, commonParams, options } from './config'
+import axios from 'axios'
 
 export function getHotKey () {
  const data = {
@@ -13,3 +14,31 @@ export function getHotKey () {
 
  return jsonp(HOTKEY_URL, data, options)
 }
+
+export function searchKey (key, page, zhida) {
+ const data = {
+ ...commonParams,
+ w: key,
+ p: page, // 第几页
+ catZhida: zhida ? 1 : 0, // 是否解锁显示歌手
+ uin: 0,
+ format: 'json',
+ platform: 'yqq',
+ needNewCode: 1,
+ zhidaqu: 1,
+ t: 0,
+ flag: 1,
+ ie: 'utf-8',
+ sem: 1,
+ aggr: 0,
+ perpage: 20,
+ n: 20,
+ remoteplace: 'txt.mqq.all',
+ _: +new Date()
+ }
+
+ // return jsonp(SEARCH_URL, data, options)
+ return axios.get(SEARCH_URL, {
+ params: data
+ }).then(res => res.data)
+}

src/base/base-scroll.vue

@@ -12,17 +12,25 @@ export default {
  type: Number,
  default: 1
  },
+
  click: {
  type: Boolean,
  default: true
  },
+
  data: { // 用于跟踪父组件数据对象的变化，即 ajax 是否返回了 slot 插槽中所需的数据，即确定刷新滚动组件的时机
  type: Array,
  default: null
  },
+
  listenScroll: {
  type: Boolean,
  default: false
+ },
+
+ pullUp: { // 是否开启上拉刷新
+ type: Boolean,
+ default: false
  }
  },
  methods: {
@@ -34,11 +42,19 @@ export default {
  })
 
  if (this.listenScroll) {
- let that = this
+ let that = this // 若不设置，那么当外部调用时，this 将不是指向本组件
  this.scroll.on('scroll', pos => { // 监听原生滚动事件，派发一个滚动事件
  that.$emit('scroll', pos)
  })
  }
+
+ if (this.pullUp) {
+ this.scroll.on('scrollEnd', () => {
+ if (this.scroll.y <= (this.scroll.maxScrollY + 50)) {
+ this.$emit('scrollToEnd') // 派发滚动到达底部事件
+ }
+ })
+ }
  },
 
  scrollTo () {

src/base/base-search-box.vue

@@ -18,6 +18,10 @@ export default {
  methods: {
  cleanInputBox () {
  this.query = ''
+ },
+
+ setQuery (query) {
+ this.query = query
  }
  },
 

src/components/parts-search-result/parts-search-result.vue

@@ -0,0 +1,172 @@
+<template>
+ <BaseScroll
+ class="search-result-wrapper"
+ :data="searchResult" :pullUp="pullUp"
+ @scrollToEnd="scrollToEnd"
+ >
+ <ul class="result-list">
+ <li class="result-item" v-for="(item, index) of searchResult" :key="index">
+ <div class="item-icon">
+ <i :class="getIconClass(item)"></i>
+ </div>
+ <div class="item-name">
+ <p class="text" v-html="getDisplayName(item)"></p>
+ </div>
+ </li>
+ </ul>
+ </BaseScroll>
+</template>
+
+<script>
+import BaseScroll from 'base/base-scroll'
+import { searchKey } from 'api/the-search'
+import { ERR_OK } from 'api/config'
+import { createSong } from 'common/js/normalize-song'
+
+const TYPE_SINGER = 'singer'
+let timer = 0
+
+export default {
+ props: {
+ query: {
+ type: String,
+ default: ''
+ },
+
+ showArtist: {
+ type: Boolean,
+ default: true
+ }
+ },
+
+ data () {
+ return {
+ page: 1,
+ searchResult: [],
+ pullUp: true
+ }
+ },
+
+ methods: {
+ scrollToEnd () {
+ this.page++
+ this.search()
+ },
+
+ getDisplayName (item) {
+ if (item.type === TYPE_SINGER) {
+ return item.singername
+ } else {
+ return `${item.name} - ${item.artist}`
+ }
+ },
+
+ getIconClass (item) {
+ if (item.type === TYPE_SINGER) {
+ return 'icon-mine'
+ } else {
+ return 'icon-music'
+ }
+ },
+
+ search () {
+ searchKey(this.query, this.page, this.showArtist).then(res => {
+ if (res.code === ERR_OK) {
+ this.searchResult = [...this.searchResult, ...this._normalizeResult(res.data)]
+ } else {
+ throw new Error('Check ERR_OK failed')
+ }
+ })
+ },
+
+ _normalizeResult (data) {
+ let ret = []
+ if (data.zhida && data.zhida.singermid) {
+ ret.push({
+ ...data.zhida,
+ type: TYPE_SINGER
+ })
+ }
+
+ if (data.song) {
+ ret = [...ret, ...this._normalizeSongs(data.song.list)]
+ }
+
+ return ret
+ },
+
+ _normalizeSongs (list) {
+ let ret = []
+ list.forEach(item => {
+ if (item.songmid && item.albumid) {
+ ret.push(createSong(item))
+ }
+ })
+
+ return ret
+ }
+ },
+
+ watch: {
+ query (newQuery) {
+ if (!newQuery) { // 清空输入框时不请求，且初始化组件数据对象
+ this.page = 0
+ this.searchResult = []
+ return
+ }
+
+ if (timer) {
+ clearTimeout(timer)
+ timer = 0
+ }
+ timer = setTimeout(() => {
+ this.search()
+ }, 100)
+ }
+ },
+
+ components: {
+ BaseScroll
+ }
+}
+</script>
+
+<style lang="scss" scoped>
+@import '~scss/variables';
+@import '~scss/mixin';
+
+.search-result-wrapper {
+ position: fixed;
+ top: 178px;
+ bottom: 0;
+ width: 100%;
+ overflow: hidden;
+ font-size: 0;
+ .result-list {
+ padding: 0 30px;
+ .result-item {
+ display: flex;
+ align-items: center;
+ padding-bottom: 20px;
+ .item-icon {
+ flex: 0 30px;
+ width: 30px;
+ .icon-music, .icon-mine {
+ font-size: $font-size-medium;
+ color: $color-text-l;
+ }
+ }
+ .item-name {
+ flex: 1;
+ overflow: hidden;
+ .text {
+ @include ellipsis();
+ font-size: $font-size-medium;
+ color: $color-text-l;
+ }
+ }
+ }
+ }
+}
+
+</style>