修改文章显示

.env

@@ -1,5 +1,5 @@
-TARO_APP_API=https://yjx.dev.yaojiankang.top
-#TARO_APP_API=https://mooc.yaojiankang.top
+#TARO_APP_API=https://yjx.dev.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/app.scss

@@ -234,6 +234,8 @@
 .font-68{font-size: 68rpx;line-height: 1;}
 .font-weight{font-weight: bold}
 
+.bold {font-weight: bold}
+
 .text-indent{text-indent:2;}
 .text-through{text-decoration:line-through;}
 .text-left { text-align: left;}
@@ -272,10 +274,12 @@
 .text-hover-dark{ color: #121416;}
 .text-body { color: #212529;}
 .text-muted { color: #909795;}
+.text-black {color: #000 }
 
 .lh-28 {line-height: 28rpx}
 .lh-40 {line-height: 40rpx}
-
+.lh1_2 {line-height: 1.2}
+.lh1_5 {line-height: 1.5}
 
 /* 圆角 */
 .rounded { border-radius: 8rpx;}
@@ -369,3 +373,26 @@
 .hr-dashed {
   border-bottom-style: dashed;
 }
+
+.relative {position: relative}
+.absolute {position: absolute}
+.fixed {position: fixed}
+.sticky {position: sticky}
+
+.top {top: 0}
+.right{right: 0}
+.bottom{bottom: 0}
+.left{left: 0}
+
+.divided::after {
+  position: absolute;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  height: 1px;
+  transform: scaleY(0.5);
+  transform-origin: bottom center;
+  content: "";
+  background: #000;
+  opacity: 0.05;
+}

src/pages/home/components/curRecommended.tsx

@@ -1,26 +1,22 @@
-import {FC, useEffect, useState} from "react";
+import {FC, ReactNode, useEffect, useState} from "react";
 import {Image, View} from "@tarojs/components";
 import {HomeApi} from "@/api";
-import Taro, {useReachBottom} from "@tarojs/taro";
+import {useReachBottom} from "@tarojs/taro";
 import styles from "../home.module.scss";
 import VideoCover from "@/components/videoCover/videoCover";
 import courseTag from '@/static/img/courseTag.png'
+import {rfc33392time} from "@/utils/day";
+import Img from "@/components/image/image";
 
 const CurRecommended: FC = () => {
   const [page, setPage] = useState(1)
   const [data, setData] = useState<Curriculum[]>([])
   const [total, setTotal] = useState(0)
-  const [examine, setExamine] = useState(false)
   const [articles, setArticles] = useState<any[]>([])
 
   async function getData() {
     const res = await HomeApi.course(page, 4)
-    if (res.audit_mode) {
-      Taro.setTabBarItem({index: 1, text: '文章'})
-      setArticles(res.articles)
-      setExamine(res.audit_mode)
-      return
-    }
+    setArticles(res.articles)
     setTotal(res.course.total)
     const newData = res.course.data.reduce((pre, cut) => {
       const index = pre.findIndex(d => d.id === cut.id)
@@ -42,32 +38,54 @@ const CurRecommended: FC = () => {
     data.length < total && setPage(page + 1)
   })
 
+  let examines: ReactNode | undefined
+  if (articles.length > 0) {
+    examines = (
+      <View className="mb-5">
+        <View className='text-center my-2'>推荐文章</View>
+        <View className='bg-white rounded-20 clip'>
+          {articles.map((d, i) => <View className='p-3 relative'>
+            {i > 0 && <View className='absolute top left right divided ml-3 mr-3' />}
+            <View className="font-34 bold text-black">{d.title}</View>
+            {(d.intro || '').length > 40 && (<View className='flex mt-1'>
+              <View className="flex-1 font-24 lh1_5">{d.intro}文章结束阿斯卡极乐空间是你拉卡萨文章结束阿斯卡极乐空间是你拉卡萨文章结束阿斯卡极乐空间是你拉卡萨文章结束阿斯卡极乐空间是你拉卡萨文章结束阿斯卡极乐空间是你拉卡萨文章结束阿斯卡极乐空间是你拉卡萨</View>
+              {d.cover && <Img className='ml-l' width={140} height={100} src={d.cover} errorType="acquiesce" />}
+            </View>)}
+            <View className="flex mt-3 justify-between font-24 text-muted">
+              <View>{rfc33392time(d.created_at).split(' ')[0]}</View>
+              <View>阅读 {d.page_view || 0}</View>
+            </View>
+          </View>)}
+        </View>
+      </View>
+    )
+  }
+
+  let videos: ReactNode | undefined
+  if (data.length > 0) {
+    videos = (
+      <View>
+        <Image src={courseTag} mode='widthFix' className={styles.courseTag}/>
+        <View className={'pb-2 flex justify-between flex-wrap ' + styles.videoListBox}>
+          {
+            data.map(c => <VideoCover
+              thumb={c.thumb}
+              title={c.title}
+              id={c.id}
+              depId={c.id}
+              key={c.id}
+              marker={`共${c.class_hour}节`}
+            />)
+          }
+        </View>
+      </View>
+    )
+  }
+
   return (
     <>
-      {
-        examine ?
-          <>
-            <View className='text-center my-2'>推荐文章</View>
-            {
-              articles.map(d => <View className='bg-white p-2 mb-2'>{d.title}</View>)
-            }
-          </>
-          : data.length > 0 && <View>
-          <Image src={courseTag} mode='widthFix' className={styles.courseTag}/>
-          <View className={'pb-2 flex justify-between flex-wrap ' + styles.videoListBox}>
-            {
-              data.map(c => <VideoCover
-                thumb={c.thumb}
-                title={c.title}
-                id={c.id}
-                depId={c.id}
-                key={c.id}
-                marker={`共${c.class_hour}节`}
-              />)
-            }
-          </View>
-        </View>
-      }
+      {examines}
+      {videos}
       <View className='text-center text-muted font-28'>- 暂无更多 -</View>
     </>
   )

src/pages/index/index.tsx

@@ -5,7 +5,7 @@ import {VideoList} from "@/pages/index/components/videoList";
 import Tabs, {OnChangOpt, TabList} from "@/components/tabs/tabs";
 import {CoursesKey, publicApi} from "@/api/public";
 import NavigationBar from "@/components/navigationBar/navigationBar";
-import Taro from "@tarojs/taro";
+// import Taro from "@tarojs/taro";
 
 const category: TabList[] = [
   {title: "企选课程", value: 'is_required'},
@@ -41,9 +41,9 @@ const AuditMode: FC = () => {
     publicApi.course({page: 1, pageSize: 10}).then(res => {
       setAuditMode(res.audit_mode)
       setArticles(res.articles)
-      if(res.audit_mode){
-        Taro.setTabBarItem({index: 1, text: '文章'})
-      }
+      // if(res.audit_mode){
+      //   Taro.setTabBarItem({index: 1, text: '文章'})
+      // }
     })
   }, [])
   return (