💄 Add a song page music list

src/components/Banner/index.jsx

@@ -24,15 +24,25 @@ let Banner = ({ dispatch, nickname, avatarUrl }) => {
         dispatch(openLoginInterface())
     }
 
+    const backwards = function() {
+        history.go(-1)
+    }
+
+    const forward = function() {
+        history.go(1)
+    }
+
     return (
         <div className={Style['title']}>
             <div className={Style['logo']}/>
             <div className={Style['historyButton']}>
                 <div
                     className={cs(Style['historyButtonBack'], iconfont, icon_houtui)}
+                    onClick={backwards}
                 />
                 <div
                     className={cs(Style['historyButtonForward'], iconfont, icon_qianjin)}
+                    onClick={forward}
                 />
                 <div className={ Style['searchBox'] }>
                     <input

src/components/window/Playlist/PlaylistItem.jsx

@@ -1,7 +1,9 @@
 import React, { Component } from 'react'
 import { Route, Redirect } from 'react-router'
 import Style from './Playlist.css'
-import SongList from './SongList'
+import SongList from './PlaylistTab/SongList/index'
+import Comment from './PlaylistTab/Comment/index'
+import Collector from './PlaylistTab/Collector/index'
 
 class PlaylistItem extends Component {
     constructor(props) {
@@ -13,6 +15,7 @@ class PlaylistItem extends Component {
             name='Loading...',
             createTime,
             coverImgUrl,
+            tracks,
             creator={
                 avatarUrl: '',
                 nickname: ''
@@ -21,6 +24,12 @@ class PlaylistItem extends Component {
 
         const { match } = this.props
 
+        const SuperSongList = (data)=>(
+            ()=>(
+                <SongList data={ data }></SongList>
+            )
+        )
+
         return (
             <div>
                 <div className={Style['banner']}>
@@ -48,8 +57,12 @@ class PlaylistItem extends Component {
                         <span className={ Style['list-option-item'] }>收藏者</span>
                     </div>
                 </div>
-                <Redirect exact path={`${match.url}`} to={`${match.url}/SongList`}/>
-                <Route path={`${match.url}/SongList`} component={SongList} ></Route>
+                <div>
+                    <Redirect exact path={`${match.url}`} to={`${match.url}/SongList`}/>
+                    <Route path={`${match.url}/SongList`} component={SuperSongList(tracks)} ></Route>
+                    <Route path={`${match.url}/Comment`} component={Comment} ></Route>
+                    <Route path={`${match.url}/Collector`} component={Collector} ></Route>
+                </div>
             </div>
         )
     }

src/components/window/Playlist/PlaylistTab/Collector/index.jsx

@@ -0,0 +1,13 @@
+import React, { Component } from 'react'
+
+class Collector extends Component {
+    render() {
+        return (
+            <div>
+                Collector
+            </div>
+        )
+    }
+}
+
+export default Collector

src/components/window/Playlist/SongList.jsx → src/components/window/Playlist/PlaylistTab/Comment/index.jsx

@@ -1,13 +1,13 @@
 import React, { Component } from 'react'
 
-class SongList extends Component {
+class Comment extends Component {
     render() {
         return (
             <div>
-                SongList
+                Comment
             </div>
         )
     }
 }
 
-export default SongList
+export default Comment

src/components/window/Playlist/PlaylistTab/SongList/index.css

@@ -0,0 +1,29 @@
+.list-item {
+    font-size: 15px;
+    padding: 5px 0;
+}
+
+.list-item-index {
+    display: inline-block;
+    width: 6%;
+}
+
+.list-item-name {
+    display: inline-block;
+    width: 30%;
+}
+
+.list-item-singers {
+    display: inline-block;
+    width: 20%;
+}
+
+.list-item-album {
+    display: inline-block;
+    width: 30%;
+}
+
+.list-item-time {
+    display: inline-block;
+    width: 14%;
+}

src/components/window/Playlist/PlaylistTab/SongList/index.jsx

@@ -0,0 +1,58 @@
+import React, { Component } from 'react'
+import Style from './index.css'
+
+class SongList extends Component {
+    render() {
+        const { data=[] } = this.props
+
+        const List = data.map((item, index)=>{
+            const {
+                ar = [],
+                al = {},
+                name = 'Unknown',
+                dt = 0
+            } = item
+            const hh = parseInt(dt/(60*60*1000), 10)
+            const mm = parseInt((dt-hh*60*60*1000)/(60*1000), 10)
+            const ss = parseInt((dt-hh*60*60*1000-mm*60*1000)/(1000), 10)
+            const getTime = ()=>{
+                if(hh!==0) {
+                    return `${hh}:${mm>=10?mm:`0${mm}`}:${ss>=10?ss:`0${ss}`}`
+                }else {
+                    return `${mm>=10?mm:`0${mm}`}:${ss>=10?ss:`0${ss}`}`
+                }
+            }
+
+            const singer = ()=>{
+                const res = []
+                for(let i = 0; i<ar.length*2; i++) {
+                    if (i%2===0) {
+                        res.push(<span>{ ar[i/2].name }</span>)
+                    }else if(i!==(ar.length*2-1)) {
+                        res.push(<span>/</span>)
+                    }
+                }
+                return res
+            }
+
+            return (
+                <div className={ Style['list-item'] }>
+                    <span className={ Style['list-item-index'] }>{ index+1>=10?index+1:`0${index+1}` }</span>
+                    <span className={ Style['list-item-name'] }>{ name }</span>
+                    <span className={ Style['list-item-singers'] }>{ singer() }</span>
+                    <span className={ Style['list-item-album'] }>{ al.name }</span>
+                    <span className={ Style['list-item-time'] }>{ getTime() }</span>
+                </div>
+            )
+        })
+
+        return (
+            <div>
+                <div></div>
+                <div>{ List }</div>
+            </div>
+        )
+    }
+}
+
+export default SongList