feat: add RecommendDaily page ui and logic

src/apis/song.ts

@@ -1,5 +1,5 @@
 import axios from 'helpers/axios'
-import { IMyMusic } from 'apis/types/business'
+import { IMyMusic, IMusic } from 'apis/types/business'
 
 export enum SONG_TYPE {
   ALL = 0,
@@ -11,6 +11,7 @@ export enum SONG_TYPE {
 
 type GetSongDetailFn = (ids: number[]) => Promise<any>
 type GetTopSongsFn = (type?: SONG_TYPE) => Promise<IMyMusic[]>
+type GetRecommendSongsFn = () => Promise<IMusic[]>
 
 const getSongDetail: GetSongDetailFn = async (ids) => {
   const response = await axios({
@@ -36,7 +37,17 @@ const getTopSongs: GetTopSongsFn = async (type = SONG_TYPE.ALL) => {
   return response.data
 }
 
+const getRecommendSongs: GetRecommendSongsFn = async () => {
+  const response = await axios({
+    method: 'get',
+    url: '/recommend/songs'
+  })
+
+  return response.recommend
+}
+
 export default {
   getSongDetail,
-  getTopSongs
+  getTopSongs,
+  getRecommendSongs
 }

src/apis/types/business.ts

@@ -46,7 +46,7 @@ export interface IMV {
 
 export interface IMusic {
   album: IAlbum,
-  alias: string[],
+  alias?: string[],
   artists: IArtist[],
   copyrightId?: number,
   duration: number,

src/components/Layout/Header/Navbar/index.tsx

@@ -11,6 +11,10 @@ const NAVBAR = {
       label: '个性推荐',
       route: ROUTES.RECOMMENDATION
     },
+    {
+      label: '每日歌曲推荐',
+      route: ROUTES.RECOMMEND_DAILY
+    },
     {
       label: '歌单',
       route: ROUTES.SONG_LIST

src/constants/routes.ts

@@ -6,6 +6,7 @@ const SONG_LIST: string = `${DISCOVERY}/songlist`
 const LEADER_BOARD: string = `${DISCOVERY}/leaderboard`
 const SINGERS: string = `${DISCOVERY}/singers`
 const LATEST_MUSIC: string = `${DISCOVERY}/latestmusic`
+const RECOMMEND_DAILY: string = `${DISCOVERY}/recommend_daily`
 
 const VIDEOS: string = '/videos'
 const VIDEO: string = `${VIDEOS}/video`
@@ -31,6 +32,7 @@ const ROUTES = {
   LEADER_BOARD,
   SINGERS,
   LATEST_MUSIC,
+  RECOMMEND_DAILY,
   VIDEOS,
   VIDEO,
   MV,

src/helpers/axios.ts

@@ -14,6 +14,7 @@ const myAxios = ({
     method,
     params,
     data,
+    withCredentials: true,
     ...others
   }).then(result => {
     // console.log('axios origin result => ', result)

src/helpers/time.ts

@@ -30,3 +30,14 @@ export const formatDatetime = (t?: string | number, detailed?: boolean) => {
     ? `${year}-${month}-${date} ${hours}:${minutes}:${seconds}`
     : `${year}-${month}-${date}`
 }
+
+export const getDay = (t: number = Date.now()) => {
+  const time = new Date(t || 0)
+  return formatNum(time.getDate())
+}
+
+export const DAYS = ['星期天', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六']
+export const getWeekday = (t: number = Date.now()) => {
+  const time = new Date(t || 0)
+  return DAYS[time.getDay()]
+}

src/pages/Discovery/RecommendDaily/index.tsx

@@ -0,0 +1,92 @@
+import React from 'react'
+import { Spinner } from '@blueprintjs/core'
+
+import MusicList from 'components/MusicList'
+import songApis from 'apis/song'
+import useAsyncFn from 'hooks/useAsyncFn'
+import { getDay, getWeekday } from 'helpers/time'
+import { createMusic } from 'helpers/business'
+import { getSession } from 'helpers/session'
+import { PlayMusicDispatchContext, ACTIONS } from 'reducers/playMusic'
+import { IMusic } from 'apis/types/business'
+import styles from './style.module.css'
+
+const { useEffect, useContext } = React
+
+const RecommendDaily = () => {
+  const dispatch = useContext(PlayMusicDispatchContext)
+  const [state, getRecommendSongsFn] = useAsyncFn(songApis.getRecommendSongs)
+  const session = getSession()
+  const isLogined = !!session.userId
+
+  useEffect(() => {
+    if (isLogined) {
+      getRecommendSongsFn()
+    }
+  }, [isLogined])
+
+  const playAll = (autoPlay?: boolean) => {
+    dispatch({
+      type: ACTIONS.SET_PLAY_LIST,
+      payload: {
+        playList: state.value
+      }
+    })
+
+    if (autoPlay) {
+      const item = state.value?.[0] as IMusic
+      dispatch({
+        type: ACTIONS.PLAY,
+        payload: {
+          musicId: item.id,
+          music: createMusic({
+            ...item,
+            picUrl: item.album?.blurPicUrl,
+            duration: item.duration / 1000
+          })
+        }
+      })
+    }
+  }
+
+  return (
+    <div className={styles.root}>
+      <div className={styles.header}>
+        <div className={styles.left}>
+          <div className={styles.date}>
+            <div className={styles.weekday}>{getWeekday()}</div>
+            <div className={styles.day}>{getDay()}</div>
+          </div>
+          <div className={styles.title}>
+            <div className={styles.name}>每日歌曲推荐</div>
+            <div className={styles.tips}>根据你的音乐口味生成，每天6:00更新</div>
+          </div>
+        </div>
+
+        {isLogined && (
+          <div
+            className='playAll'
+            onClick={() => playAll(true)}
+          >
+            播放全部
+          </div>
+        )}
+      </div>
+
+      {isLogined ? (
+        <div className={styles.content}>
+          {state.loading ? <Spinner className='spinner' /> : (
+            <MusicList
+              data={state.value || []}
+              onPlayAll={() => playAll()}
+            />
+          )}
+        </div>
+      ) : (
+        <div className={styles.needLogin}>请先登录喔~</div>
+      )}
+    </div>
+  )
+}
+
+export default RecommendDaily

src/pages/Discovery/RecommendDaily/style.module.css

@@ -0,0 +1,64 @@
+@value colors: "~styles/colors.module.css";
+@value red, borderColor, nameColor from colors;
+
+.root {
+  padding: 20px 0 50px;
+}
+
+.header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding-bottom: 20px;
+  border-bottom: 1px solid borderColor;
+}
+
+.left {
+  display: flex;
+}
+
+.date {
+  width: 100px;
+  height: 100px;
+  margin-right: 15px;
+  background-color: rgba(0, 0, 0, 0.5);
+  border-radius: 5px;
+  border-top-left-radius: 5px;
+  border: 1px solid borderColor;
+  box-shadow: 0 1px 5px 2px borderColor;
+
+  .weekday {
+    padding: 5px 0;
+    text-align: center;
+    background-color: red;
+    border-top-left-radius: 5px;
+    border-top-right-radius: 5px;
+    color: #fff;
+  }
+
+  .day {
+    padding: 12px 0;
+    font-size: 2.5em;
+    font-weight: bold;
+    text-align: center;
+    background-color: #fff;
+    border-bottom-left-radius: 5px;
+    border-bottom-right-radius: 5px;
+  }
+}
+
+.title {
+  .name {
+    margin: 10px 0 15px;
+    font-size: 1.5em;
+  }
+
+  .tips {
+    color: nameColor;
+  }
+}
+
+.needLogin {
+  margin-top: 100px;
+  text-align: center;
+}

src/pages/Discovery/index.tsx

@@ -6,6 +6,7 @@ import Songlist from './Songlist'
 import LeaderBoard from './LeaderBoard'
 import Singers from './Singers'
 import LatestMusic from './LatestMusic'
+import RecommendDaily from './RecommendDaily'
 import ROUTES from 'constants/routes'
 
 import styles from './style.module.css'
@@ -19,6 +20,7 @@ const Discovery = () => {
         <Route exact path={ROUTES.LEADER_BOARD} component={LeaderBoard} />
         <Route exact path={ROUTES.SINGERS} component={Singers} />
         <Route exact path={ROUTES.LATEST_MUSIC} component={LatestMusic} />
+        <Route exact path={ROUTES.RECOMMEND_DAILY} component={RecommendDaily} />
         {/* /discovery 或者 不匹配上面路由的，都显示Recommendation */}
         <Route exact path={ROUTES.DISCOVERY} component={Recommendation} />
         <Redirect from={`${ROUTES.DISCOVERY}/*`} to={ROUTES.RECOMMENDATION} />

src/styles/global.module.css

@@ -45,3 +45,14 @@ button {
   display: flex;
   justify-content: center;
 }
+
+:global(.playAll) {
+  padding: 5px 15px;
+  border-radius: 20px;
+  background-color: #f53;
+  color: #fff;
+  cursor: pointer;
+}
+:global(.playAll:hover) {
+  background-color: red;
+}