singer and list view

config/webpackDevServer.config.js

@@ -117,7 +117,6 @@ module.exports = function(proxy, allowedHost) {
           params: req.query
         }).then((response) => {
           let ret = response.data
-          console.log(ret)
           if (typeof ret === 'string') {
             const reg = /^\w+\(({.+})\)$/
             const matches = ret.match(reg)

src/api/singer.js

@@ -0,0 +1,36 @@
+import jsonp from './jsonp'
+import {commonParams, options} from './config'
+
+export function getSingerList() {
+  const url = 'https://c.y.qq.com/v8/fcg-bin/v8.fcg'
+
+  const data = Object.assign({}, commonParams, {
+    channel: 'singer',
+    page: 'list',
+    key: 'all_all_all',
+    pagesize: 100,
+    pagenum: 1,
+    hostUin: 0,
+    needNewCode: 0,
+    platform: 'yqq'
+  })
+
+  return jsonp(url, data, options)
+}
+
+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)
+}

src/base/header/header.js

@@ -1,31 +1,17 @@
-import React from 'react'
-import {withRouter} from 'react-router-dom'
+import React, {Component} from 'react'
+import {NavLink} from 'react-router-dom'
 import './header.styl'
-
-class Header extends React.Component {
-
-  constructor() {
-    super()
-    this.goBack = this.goBack.bind(this)
-  }
-
-  goBack() {
-    if (this.props.hide) {
-      this.props.hide()
-    }
-    this.props.history.goBack()
-  }
-
+
+export default class Headers extends Component{
   render() {
     return (
-      <div className="header-wrapper">
-        <span className="header-back" onClick={this.goBack}>
-          <i className="icon-back"></i>
-        </span>
-        <div className="title">{this.props.title}</div>
+      <div className="m-header">
+        <div className="icon"></div>
+        <h1 className="text">React-Music</h1>
+        <NavLink to="/user" className="mine">
+          <i className="icon-mine"></i>
+        </NavLink>
       </div>
     )
   }
-}
-
-export default withRouter(Header)
+}

src/base/header/header.styl

@@ -1,28 +1,31 @@
 @import "~common/styl/variable.styl"
 @import "~common/styl/mixin.styl"
-.header-wrapper
-  position fixed
-  width 100%
-  height 55px
-  text-align center
-  z-index: 3
-  .header-back
+
+.m-header
+  position relative
+  height 44px
+  text-align center 
+  color $color-theme
+  .icon
+    display inline-block
+    vertical-align top 
+    margin-top 6px
+    width 30px
+    height 32px
+    margin-right 9px
+    bg-image('logo')
+    background-size 30px 32px
+  .text
+    display: inline-block
+    vertical-align top
+    line-height 44px
+    font-size $font-size-large
+  .mine
     position absolute
-    top: 0
-    left: 6px
-    .icon-back
+    top 0
+    right: 0
+    .icon-mine
       display: block
-      padding: 10px
-      font-size: $font-size-large-x
-      color: $color-theme
-  .title
-      position: absolute
-      top: 0
-      left: 10%
-      z-index: 3
-      width: 80%
-      no-wrap()
-      text-align: center
-      line-height: 40px
-      font-size: $font-size-large
-      color: $color-text
+      padding: 12px
+      font-size: 20px
+      color: $color-theme

src/base/listview/listview.js

@@ -0,0 +1,115 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+
+import LazyLoad, {forceCheck} from 'react-lazyload'
+import Loading from 'base/loading/loading'
+import Scroll from 'base/scroll/scroll'
+import './listview.styl'
+
+export default class ListView extends React.Component {
+  constructor(props) {
+    super(props)
+    this.state = {
+      diff: -1,
+      currentIndex: 0,
+      scrollY: -1,
+      shortcutList: []
+    }
+  }
+
+  static propTypes = {
+    data: PropTypes.array
+  }
+
+  static defaulProps = {
+    data: []
+  }
+
+  componentDidMount() {
+
+  }
+
+  componentWillReceiveProps(nextProps) {
+    this.setState({
+      shortcutList: nextProps.data.map(v => v.title.substr(0, 1))
+    })
+  }
+
+  onShortcutTouchStart(e) {
+    e.stopPropagation()
+    e.preventDefault()
+  }
+
+  onShortcutTouchMove(e) {
+    e.stopPropagation()
+    e.preventDefault()
+  }
+
+  onTouchEnd(e) {
+    e.stopPropagation()
+    e.preventDefault()
+  }
+
+  render() {
+
+    return (
+      <div className="list-view">
+        <Scroll
+          className="listview"
+          probeType={3}
+          refresh={this.props.refresh}
+          onScroll={() => forceCheck()}
+        >
+          <ul>
+            {
+              this.props.data.map((v,i) =>
+                <li
+                  className="list-group"
+                  ref="listGroup"
+                  key={v.title}
+                >
+                  <h2 className="list-group-title">{v.title}</h2>
+                  <ul>
+                    {
+                      v.items.map((k) => 
+                        <li
+                          className="list-group-item"
+                          key={k.id}
+                          >
+                          <LazyLoad>
+                            <img src={k.avatar} alt="" className="avatar"/>
+                          </LazyLoad>
+                          <span className="name">{k.name}</span>
+                        </li>
+                      )
+                    }
+                  </ul>
+                </li>
+              )
+            }
+          </ul>
+          <div
+            className="list-shortcut"
+            onTouchStart={this.onShortcutTouchStart}
+            onTouchMove={this.onShortcutTouchMove}
+            onTouchEnd={this.onTouchEnd}
+            >
+            <ul>
+              {
+                this.state.shortcutList.map((v, i) => 
+                  <li
+                    key={v}
+                    className="item"
+                    data-index={i}>
+                    {v}
+                  </li>
+                )
+              }
+            </ul>
+          </div>
+          {!this.props.data.length ? <Loading></Loading> : null}
+        </Scroll>
+      </div>
+    )
+  }
+}

src/base/listview/listview.styl

@@ -0,0 +1,62 @@
+@import "~common/styl/variable"
+
+.list-view
+  position: relative
+  width: 100%
+  height: 100%
+  overflow: hidden
+  background: $color-background
+  .scroll-wrapper
+    height 100%
+  .list-group
+    padding-bottom: 30px
+    .list-group-title
+      height: 30px
+      line-height: 30px
+      padding-left: 20px
+      font-size: $font-size-small
+      color: $color-text-l
+      background: $color-highlight-background
+    .list-group-item
+      display: flex
+      align-items: center
+      padding: 20px 0 0 30px
+      .avatar
+        width: 50px
+        height: 50px
+        border-radius: 50%
+      .name
+        margin-left: 20px
+        color: $color-text-l
+        font-size: $font-size-medium
+  .list-shortcut
+    position: absolute
+    z-index: 30
+    right: 0
+    top: 50%
+    transform: translateY(-50%)
+    width: 20px
+    padding: 20px 0
+    border-radius: 10px
+    text-align: center
+    background: $color-background-d
+    font-family: Helvetica
+    .item
+      padding: 3px
+      line-height: 1
+      color: $color-text-l
+      font-size: $font-size-small
+      &.current
+        color: $color-theme
+  .list-fixed
+    position: absolute
+    top: 0
+    left: 0
+    width: 100%
+    .fixed-title
+      height: 30px
+      line-height: 30px
+      padding-left: 20px
+      font-size: $font-size-small
+      color: $color-text-l
+      background: $color-highlight-background

src/base/singerDetail/singerDetail.js

@@ -0,0 +1,12 @@
+import React from 'react'
+
+export default class SingerDetail extends React.Component {
+  render() {
+
+    return (
+      <div className="singer-detail">
+        singer detail
+      </div>
+    )
+  }
+}