✨ Detail - 路由跳转 & 数据渲染

Author: boh5

day-12/react-jike-mobile/src/apis/detail.ts

@@ -0,0 +1,66 @@
+import {http} from '@/utils'
+import type {ResType} from '@/apis/shared.ts'
+
+/**
+ * 响应数据
+ */
+export type DetailDataType = {
+  /**
+   * 文章id
+   */
+  art_id: string;
+  /**
+   * 文章-是否被点赞，-1无态度, 0未点赞, 1点赞, 是当前登录用户对此文章的态度
+   */
+  attitude: number;
+  /**
+   * 文章作者id
+   */
+  aut_id: string;
+  /**
+   * 文章作者名
+   */
+  aut_name: string;
+  /**
+   * 文章作者头像，无头像, 默认为null
+   */
+  aut_photo: string;
+  /**
+   * 文章_评论总数
+   */
+  comm_count: number;
+  /**
+   * 文章内容
+   */
+  content: string;
+  /**
+   * 文章-是否被收藏，true(已收藏)false(未收藏)是登录的用户对此文章的收藏状态
+   */
+  is_collected: boolean;
+  /**
+   * 文章作者-是否被关注，true(关注)false(未关注), 说的是当前登录用户对这个文章作者的关注状态
+   */
+  is_followed: boolean;
+  /**
+   * 文章_点赞总数
+   */
+  like_count: number;
+  /**
+   * 文章发布时间
+   */
+  pubdate: string;
+  /**
+   * 文章_阅读总数
+   */
+  read_count: number;
+  /**
+   * 文章标题
+   */
+  title: string;
+}
+
+export function fetchArticleDetailAPI(id: string) {
+  return http.request<ResType<DetailDataType>>({
+    url: `/articles/${id}`,
+  })
+}

day-12/react-jike-mobile/src/pages/Detail/index.tsx

@@ -1,5 +1,44 @@
+import {useEffect, useState} from 'react'
+import {DetailDataType, fetchArticleDetailAPI} from '@/apis/detail.ts'
+import {useNavigate, useSearchParams} from 'react-router-dom'
+import {NavBar} from 'antd-mobile'
+
 const Detail = () => {
-  return <div>this is Detail</div>
+  const [detail, setDetail] = useState<DetailDataType | null>(null)
+
+  const [params] = useSearchParams()
+  const id = params.get('id')
+  useEffect(() => {
+    const getDetail = async () => {
+      try {
+        const res = await fetchArticleDetailAPI(id!)
+        setDetail(res.data.data)
+      } catch (error) {
+        throw new Error('fetchArticleDetailAPI error')
+      }
+    }
+    getDetail()
+
+  }, [])
+
+  const navigate = useNavigate()
+  const back = () => {
+    navigate(-1)
+  }
+
+  // 数据返回前 loading
+  if (!detail) {
+    return <div>this is loading</div>
+  }
+
+  return (
+    <div>
+      <NavBar onBack={back}>{detail?.title}</NavBar>
+      <div dangerouslySetInnerHTML={{
+        __html: detail?.content,
+      }}></div>
+    </div>
+  )
 }
 
 export default Detail

day-12/react-jike-mobile/src/pages/Home/HomeList/index.tsx

@@ -1,6 +1,7 @@
 import {Image, InfiniteScroll, List} from 'antd-mobile'
 import {useEffect, useState} from 'react'
 import {ArticleListRes, fetchArticleListAPI} from '@/apis/list.ts'
+import {useNavigate} from 'react-router-dom'
 
 type Props = {
   channelId: string
@@ -56,11 +57,18 @@ const HomeList = (props: Props) => {
     }
   }
 
+  // 路由跳转
+  const navigate = useNavigate()
+  const goToDetail = (id: string) => {
+    navigate(`/detail?id=${id}`)
+  }
+
   return (
     <>
       <List>
         {articleRes.results.map((item) => (
           <List.Item
+            onClick={() => goToDetail(item.art_id)}
             key={item.art_id}
             prefix={
               <Image

day-12/react-jike-mobile/src/pages/Home/index.tsx

@@ -10,7 +10,7 @@ const Home = () => {
   return (
     <div className="tabContainer">
       {/* tab 区域 */}
-      <Tabs>
+      <Tabs defaultActiveKey={'0'}>
         {channels.map(item => (
           <Tabs.Tab title={item.name} key={item.id}>
             <div className="listContainer">