新增推荐文章页面

.env

@@ -1,5 +1,5 @@
-#TARO_APP_API=https://yjx.dev.yaojiankang.top
+TARO_APP_API=https://yjx.dev.yaojiankang.top
-TARO_APP_API=https://mooc.yaojiankang.top
+#TARO_APP_API=https://mooc.yaojiankang.top
 #TARO_APP_API=https://shopfix.yaojiankang.top
 #TARO_APP_API=https://playedu.yaojiankang.top
 TARO_APP_LGOIN=true

src/api/public.ts

@@ -9,10 +9,6 @@ export interface Category {
   resource_category?: Category[]
 }
 
-interface CategoryList {
-  categories: Record<number, Category[]>
-}
-
 export interface CoursesMode {
   articles: any[]
   audit_mode: boolean
@@ -20,7 +16,6 @@ export interface CoursesMode {
 }
 
 export interface Courses {
-
   /** 选秀 */
   is_not_required: Curriculum[]
   /** 必修 */
@@ -33,12 +28,11 @@ export type CoursesKey = keyof Omit<Courses, 'total_course_duration'>
 
 
 export const publicApi = {
-  /** 分类 */
-  category() {
-    return request<CategoryList>('/api/v1/category/all', "GET")
-  },
   /** 课程 */
   course(data: { page: number, pageSize: number }) {
     return request<CoursesMode>('/api/v1/category/course/index', "GET", data)
+  },
+  articlesPush(page: number, page_size: number) {
+    return request<{ list: Articles[], total: number }>('/home/v1/article/list', "GET", {page, page_size})
   }
 }

src/app.config.ts

@@ -94,6 +94,7 @@ export default defineAppConfig({
         'webView/webView',
         'search/search/index',
         'collect/collect', // 收藏列表
+        'jumpArticles/jumpArticles', // 推荐文章
       ]
     },
   ],

src/pages/home/components/curRecommended.tsx

@@ -1,11 +1,12 @@
 import {FC, ReactNode, useEffect, useState} from "react";
-import {Image, View} from "@tarojs/components";
+import {Image, Text, View} from "@tarojs/components";
 import {HomeApi} from "@/api";
-import {useReachBottom} from "@tarojs/taro";
+import Taro, {useReachBottom} from "@tarojs/taro";
 import styles from "../home.module.scss";
 import VideoCover from "@/components/videoCover/videoCover";
 import courseTag from '@/static/img/courseTag.png'
 import ArticlesBox from "@/components/articlesBox/articlesBox";
+import arrowRight from '@/static/img/arrow-right.png'
 
 const CurRecommended: FC = () => {
   const [page, setPage] = useState(1)
@@ -29,6 +30,10 @@ const CurRecommended: FC = () => {
     setData(newData ?? [])
   }
 
+  function jumpArticles() {
+    Taro.navigateTo({url: '/pages/preview/jumpArticles/jumpArticles'})
+  }
+
   useEffect(() => {
     getData()
   }, [page])
@@ -40,13 +45,17 @@ const CurRecommended: FC = () => {
   let examines: ReactNode | undefined
   if (articles.length > 0) {
     examines = (
-      <View className="mb-5">
+      <View className='bg-white rounded-20 clip px-3 mb-5'>
-        <View className='bg-white rounded-20 clip px-3'>
+        <View className='mt-3 mb-3 bold text-dark flex justify-between'>
-          <View className='mt-3 mb-3 font-32 bold text-dark'>推荐文章</View>
+          <Text className='font-32'>推荐文章</Text>
-          {
+          <View className='font-24 text-muted flex align-center' onClick={jumpArticles}>
-            articles.map(d => <ArticlesBox data={d}/>)
+            <Text>查看更多</Text>
-          }
+            <Image src={arrowRight} mode='widthFix' style={{width: '20rpx', height: '20rpx'}}/>
+          </View>
         </View>
+        {
+          articles.map(d => <ArticlesBox data={d}/>)
+        }
       </View>
     )
   }

src/pages/home/home.tsx

@@ -51,7 +51,7 @@ const Home: FC = () => {
         cancelBack
         leftNode={
           <>
-            <Image src={logo} style={{height: "90%"}} mode='heightFix'/>
+            <Image src={logo} style={{height: "70%"}} mode='heightFix'/>
             <Text className='font-36 font-weight ml-2'>信桂</Text>
           </>
         }

src/pages/preview/jumpArticles/jumpArticles.config.ts

@@ -0,0 +1,4 @@
+export default definePageConfig({
+  navigationBarTitleText: '推荐文章',
+  onReachBottomDistance: 50
+})

src/pages/preview/jumpArticles/jumpArticles.tsx

@@ -0,0 +1,51 @@
+import {FC, useEffect, useState} from "react";
+import {View} from "@tarojs/components";
+import {publicApi} from "@/api";
+import Spin from "@/components/spinner";
+import ArticlesBox from "@/components/articlesBox/articlesBox";
+import {useReachBottom} from "@tarojs/taro";
+
+const JumpArticlesConfig: FC = () => {
+  const [page, setPage] = useState(1)
+  const [total, setTotal] = useState(0)
+  const [enable, setEnable] = useState(true)
+  const [data, setData] = useState<Articles[]>([])
+
+  useEffect(() => {
+    publicApi.articlesPush(page, 10).then(res => {
+      setTotal(res.total)
+      const result = res.list.reduce((pre, cur) => {
+        const index = pre.findIndex(d => d.id === cur.id)
+        if (index === -1) {
+          pre.push(cur)
+        } else {
+          pre.splice(index, 1, cur)
+        }
+        return pre
+      }, data)
+      setData(result)
+    }).finally(() => {
+      setEnable(false)
+    })
+  }, [page])
+
+  useReachBottom(() => {
+    if (data.length < total) {
+      setPage(page + 1)
+    }
+  })
+
+
+  return (
+    <View>
+      <Spin enable={enable} overlay/>
+      <View className='bg-white rounded-20 clip m-3 px-3'>
+        {
+          data.map(d => <ArticlesBox data={d}/>)
+        }
+      </View>
+    </View>
+  )
+}
+
+export default JumpArticlesConfig