chore: 歌曲详情demo

Author: giscafer

src/screens/Home/PlayList/PlayListDetail.tsx

@@ -8,25 +8,35 @@ import {
   Image,
   Text,
   View,
+  Heading,
 } from 'native-base';
-import React, { useCallback } from 'react';
+import React, { useCallback, useMemo } from 'react';
 import { TouchableOpacity } from 'react-native-gesture-handler';
 import AppBar from 'src/components/AppBar';
-import { GetPlayListDetail } from 'src/services/queries/music';
+import { GetPlayListDetail, GetSongDetail } from 'src/services/queries/music';
+import { map } from 'lodash';
 
 function PlayListDetail({ route }: { route: Record<string, any> }) {
   const { id } = route.params;
 
   const { isLoading, isFetching, data }: any = GetPlayListDetail(id);
 
+  const songIds: string[] = map(data?.playlist?.trackIds, 'id');
+
+  const {
+    isLoading: songLoading,
+    isFetching: songFetching,
+    data: songData,
+  }: any = GetSongDetail(songIds.join(','));
+
   const renderItem = useCallback(
     ({ item, index }: any) => {
       return (
         <TouchableOpacity onPress={() => {}}>
           <Box h="10" py="2" mt="2">
             <HStack>
               <HStack pt="2">
-                <Text color="coolGray.600">{index}</Text>
+                <Text color="coolGray.600">{index + 1}</Text>
               </HStack>
               <VStack mx="3">
                 <Text>{item.name}</Text>
@@ -48,34 +58,65 @@ function PlayListDetail({ route }: { route: Record<string, any> }) {
     [data],
   );
 
+  const avatarUrl = useMemo(() => {
+    const url = data?.playlist?.creator?.avatarUrl.replace('http:', 'https:');
+    return url;
+  }, [data?.playlist?.creator]);
+
+  /*   const backgroundUrl = useMemo(() => {
+    const url = data?.playlist?.creator?.backgroundUrl.replace(
+      'http:',
+      'https:',
+    );
+    return url;
+  }, [data?.playlist?.creator]);
+ */
+
   return (
-    <View>
+    <Box>
       <AppBar title="歌单详情" />
-      <HStack h="200" p="4" bg="lightBlue.300">
-        <VStack>
-          <Image
-            h="120"
-            w="120"
-            borderRadius="20"
-            source={{
-              uri: data?.playlist?.coverImgUrl,
-            }}
-            alt="cover"
-          />
-        </VStack>
-        <VStack mx="2">
-          <Text>{data?.playlist?.name}</Text>
-          <Text>{data?.playlist?.creator?.nickname}</Text>
-          <Text isTruncated>{data?.playlist?.description}</Text>
+      <HStack h="150" p="4" bg="lightBlue.300">
+        <VStack h="120" w="120">
+          {data?.playlist?.coverImgUrl && (
+            <Image
+              h="120"
+              w="120"
+              borderRadius="20"
+              source={{
+                uri: data?.playlist?.coverImgUrl,
+              }}
+              alt="cover"
+            />
+          )}
         </VStack>
+        <Box ml="3" flex="1">
+          <Heading size="sm">{data?.playlist?.name}</Heading>
+          <HStack mt="4">
+            {avatarUrl && (
+              <Image
+                h="6"
+                w="6"
+                borderRadius="16"
+                source={{
+                  uri: avatarUrl,
+                }}
+                alt="avatar"
+              />
+            )}
+            <Text mx="2">{data?.playlist?.creator?.nickname}</Text>
+          </HStack>
+          <Text mt="4" isTruncated>
+            {data?.playlist?.description}
+          </Text>
+        </Box>
       </HStack>
       <FlatList
         p="4"
-        data={data?.playlist?.tracks || []}
+        data={songData?.songs || []}
         renderItem={renderItem}
         keyExtractor={(item: any) => item.id}
       />
-    </View>
+    </Box>
   );
 }
 

src/screens/Home/PlayList/RecommendPlaylist.tsx

@@ -1,11 +1,9 @@
-import { Box, Spinner, Text, Button, ScrollView } from 'native-base';
+import { Box, ScrollView, Spinner } from 'native-base';
 import React, { useCallback, useState } from 'react';
+import { RefreshControl } from 'react-native';
 import { useInfiniteQuery } from 'react-query';
 import { doGet } from 'src/services/http-client';
 import PlayListCard from './PlayListCard';
-import { throttle } from 'lodash';
-
-import { RefreshControl } from 'react-native';
 
 function PlayList() {
   const [refreshing, setRefreshing] = React.useState(false);
@@ -91,7 +89,6 @@ function PlayList() {
             );
           })
         )}
-        <Text>{data?.pages.length}</Text>
       </Box>
     </ScrollView>
   );

src/services/queries/music.ts

@@ -19,8 +19,31 @@ export const GetTopPlayList = () => {
  * @returns
  */
 export const GetPlayListDetail = (id: string) => {
-  return useQuery(['PlayListDetail', id], async () => {
-    const res = await doGet('/playlist/detail', { id });
-    return res;
-  });
+  return useQuery(
+    ['PlayListDetail', id],
+    async () => {
+      const res = await doGet('/playlist/detail', { id });
+      return res;
+    },
+    {
+      enabled: !!id,
+    },
+  );
+};
+/**
+ * 批量获取歌曲详情
+ * /song/detail
+ * @returns
+ */
+export const GetSongDetail = (ids: string) => {
+  return useQuery(
+    ['PlayListDetail', ids],
+    async () => {
+      const res = await doGet('/song/detail', { ids });
+      return res;
+    },
+    {
+      enabled: !!ids,
+    },
+  );
 };