完成歌手页面内容

Author: coderwhy

src/App.js

@@ -8,7 +8,6 @@ import HYMain from './pages/main';
 function App() {
   return (
     <Provider store={store}>
-      <h2>哈哈哈哈</h2>
       <HYMain/>
     </Provider>
   );

src/pages/discover/c-pages/artist/c-cpns/artist-list/c-cpns/alpha-list/index.js

@@ -1,27 +1,41 @@
-import React, { memo } from 'react';
+import React, { memo, useState, useEffect } from 'react';
+import { useSelector, shallowEqual, useDispatch } from 'react-redux';
 import classNames from 'classnames';
 
 import { singerAlphas } from '@/utils/handle-data';
+import { getArtistListAction } from '../../../../store/actionCreators';
 
 import {
   AlphaListWrapper
 } from './style';
-import { useState } from 'react';
 
 export default memo(function HYAlphaList() {
   const [currentAlpha, setCurrentAlpha] = useState("-1");
 
+  const { currentType, currentArea } = useSelector(state => ({
+    currentType: state.getIn(["artist", "currentType"]),
+    currentArea: state.getIn(["artist", "currentArea"])
+  }), shallowEqual);
+  const dispatch = useDispatch();
+
+  useEffect(() => {
+    setCurrentAlpha("-1");
+  }, [currentType, currentArea]);
+  useEffect(() => {
+    dispatch(getArtistListAction(currentArea, currentType.type, currentAlpha));
+  }, [currentAlpha, currentType, currentArea, dispatch]);
+
   return (
-    <AlphaListWrapper>
+    <AlphaListWrapper hasTop={currentArea !== -1}>
       {
-        singerAlphas.map((item, index) => {
+        currentArea !== -1 && singerAlphas.map((item, index) => {
           const isActive = currentAlpha === item;
           if (item === "0") item = "其他";
           if (item === "-1") item = "热门";
           return (
             <div key={item}
                  className={classNames("item", {"active": isActive})}>
-              <a href="/#" onClick={e => setCurrentAlpha(item)}>{item.toUpperCase()}</a>
+              <span onClick={e => setCurrentAlpha(item)}>{item.toUpperCase()}</span>
             </div>
           )
         })

src/pages/discover/c-pages/artist/c-cpns/artist-list/c-cpns/alpha-list/style.js

@@ -3,24 +3,25 @@ import styled from 'styled-components';
 export const AlphaListWrapper = styled.div`
   display: flex;
   justify-content: space-between;
-  margin-top: 20px;
+  margin-top: ${props => props.hasTop ? "20px": 0};
 
   .item {
     padding: 1px 4px;
     border-radius: 3px;
-    a {
+    span {
       font-size: 14px;
       color: #333;
+      cursor: pointer;
     }
 
-    a:hover {
+    span:hover {
       text-decoration: underline;
     }
   }
 
   .active {
     background-color: #c20c0c;
-    a {
+    span {
       color: #fff;
     }
   }

src/pages/discover/c-pages/artist/c-cpns/artist-list/c-cpns/artist-item/index.js

@@ -0,0 +1,25 @@
+import React, { memo } from 'react';
+
+import { getSizeImage } from '@/utils/format-utils';
+
+import { ItemWrapper } from './style';
+
+export default memo(function HYArtistItemV1(props) {
+  const { info, index } = props;
+
+  return (
+    <ItemWrapper>
+      {
+        index < 10 && (
+          <div className="image">
+            <img src={getSizeImage(info.img1v1Url, 130)} alt="" />
+          </div>
+        )
+      }
+      <div className="info">
+        <span className="name">{info.name}</span>
+        <i className="sprite_icon2 icon"></i>
+      </div>
+    </ItemWrapper>
+  )
+})

src/pages/discover/c-pages/artist/c-cpns/artist-list/c-cpns/artist-item/style.js

@@ -0,0 +1,35 @@
+import styled from 'styled-components';
+
+export const ItemWrapper = styled.div`
+  width: 130px;
+  margin-top: 15px;
+
+  .image {
+    img {
+      width: 130px;
+      height: 130px;
+    }
+  }
+
+  .info {
+    margin: 10px 0;
+    display: flex;
+    justify-content: space-between;
+
+    .name {
+      cursor: pointer;
+      
+      &:hover {
+        color: red;
+        text-decoration: underline;
+      }
+    }
+
+    .icon {
+      display: inline-block;
+      width: 17px;
+      height: 18px;
+      background-position: 0 -740px;
+    }
+  }
+`

src/pages/discover/c-pages/artist/c-cpns/artist-list/index.js

@@ -4,19 +4,29 @@ import { useSelector, shallowEqual } from 'react-redux';
 
 import HYThemeHeaderNormal from '@/components/theme-header-normal';
 import HYAlphaList from './c-cpns/alpha-list';
+import HYArtistItem from './c-cpns/artist-item';
 import {
   ArtistListWrapper
 } from './style';
 
 export default memo(function HYArtistList() {
-  const { currentType } = useSelector(state => ({
-    currentType: state.getIn(["artist", "currentType"])
+  // redux hooks
+  const { currentType, artistList } = useSelector(state => ({
+    currentType: state.getIn(["artist", "currentType"]),
+    artistList: state.getIn(["artist", "artistList"])
   }), shallowEqual);
 
   return (
     <ArtistListWrapper>
       <HYThemeHeaderNormal title={currentType.name} />
       <HYAlphaList/>
+      <div className="artist-list">
+        {
+          artistList.map((item, index) => {
+            return <HYArtistItem key={item.id} index={index} info={item}/>
+          })
+        }
+      </div>
     </ArtistListWrapper>
   )
 })

src/pages/discover/c-pages/artist/c-cpns/artist-list/style.js

@@ -3,4 +3,12 @@ import styled from 'styled-components';
 export const ArtistListWrapper = styled.div`
   flex: 1;
   padding: 40px;
+
+  .artist-list {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: space-between;
+
+    padding: 5px 0 40px;
+  }
 `

src/pages/discover/c-pages/artist/store/actionCreators.js

@@ -1,5 +1,12 @@
 import * as actionTypes from './constants';
 
+import { getArtistList } from '@/services/artist';
+
+const changeArtistListAction = (artistList) => ({
+  type: actionTypes.CHANGE_ARTIST_LIST,
+  artistList
+})
+
 export const changeCurrentAreaAction = (area) => ({
   type: actionTypes.CHANGE_CURRENT_AREA,
   currentArea: area
@@ -8,4 +15,13 @@ export const changeCurrentAreaAction = (area) => ({
 export const changeCurrentTypeAction = (type) => ({
   type: actionTypes.CHANGE_CURRENT_TYPE,
   currentType: type
-})
+});
+
+export const getArtistListAction = (area, type, alpha) => {
+  return dispatch => {
+    getArtistList(area, type, alpha).then(res => {
+      console.log(res);
+      dispatch(changeArtistListAction(res.artists))
+    })
+  }
+}

src/pages/discover/c-pages/artist/store/constants.js

@@ -1,2 +1,4 @@
 export const CHANGE_CURRENT_AREA = "artist/CHANGE_CURRENT_AREA";
-export const CHANGE_CURRENT_TYPE = "artist/CHANGE_CURRENT_TYPE";
+export const CHANGE_CURRENT_TYPE = "artist/CHANGE_CURRENT_TYPE";
+
+export const CHANGE_ARTIST_LIST = "artist/CHANGE_ARTIST_LIST";

src/pages/discover/c-pages/artist/store/reducer.js

@@ -3,11 +3,12 @@ import { Map } from 'immutable';
 import * as actionTypes from './constants';
 
 const defaultState = Map({
-  currentArea: -1,
+  currentArea: 7,
   currentType: {
     name: "推荐歌手",
     type: 1
-  }
+  },
+  artistList: []
 });
 
 function reducer(state = defaultState, action) {
@@ -16,6 +17,8 @@ function reducer(state = defaultState, action) {
       return state.set("currentArea", action.currentArea);
     case actionTypes.CHANGE_CURRENT_TYPE:
       return state.set("currentType", action.currentType);
+    case actionTypes.CHANGE_ARTIST_LIST:
+      return state.set("artistList", action.artistList);
     default:
       return state;
   }

src/pages/discover/c-pages/recommend/c-cpns/top-banner/index.js

@@ -27,7 +27,9 @@ export default memo(function HYTopBanner() {
   }, [dispatch]);
 
   const bannerChange = useCallback((from, to) => {
-    setCurrentIndex(to);
+    setTimeout(() => {
+      setCurrentIndex(from);
+    }, 0);
   }, []);
 
   const bgImage = state.banners[currentIndex] && (state.banners[currentIndex].imageUrl + "?imageView&blur=40x20")

src/pages/player/app-play-bar/index.js

@@ -88,7 +88,6 @@ export default memo(function HYAppPlaybar() {
     const finalIndex = i - 1;
     if (finalIndex !== currentLyricIndex) {
       dispatch(changeCurrentLyricIndexAction(finalIndex));
-      console.log(currentLyrics[finalIndex]);
       message.open({
         content: currentLyrics[finalIndex].content,
         key: "lyric",

src/router/index.js

@@ -43,7 +43,7 @@ export default [
         path: "/discover",
         exact: true,
         render: () => (
-          <Redirect to={"/discover/recommend"}/>
+          <Redirect to={"/discover/artist"}/>
         )
       },
       {

src/services/artist.js

@@ -0,0 +1,28 @@
+import request from './axios';
+
+export function getArtistList(area, type, initial) {
+  let url = "/artist/list";
+  let params = { limit: 100 }
+  if (area === -1 && type === 1) {
+    url = "/top/artists"
+  } else {
+    if (area === -1) {
+      params = {limit: 100, cat: 5001}
+    } else {
+      params = {
+        type,
+        area,
+        initial,
+        limit: 100
+      }
+    }
+  }
+
+  console.log("url:", url, "params:", params);
+
+  return request({
+    url,
+    params
+  })
+}
+

src/services/local-data.js

@@ -135,16 +135,13 @@ export const artistCategories = [
       {
         name: "推荐歌手",
         type: 1,
-        now: false,
         url: "/discover/artist",
         id: 0
       },
       {
         name: "入驻歌手",
         type: 2,
-        now: true,
         url: "/discover/artist?cat=5001",
-        id: 5001,
         dataPath: "/artist/list?cat=5001"
       }
     ]