新增学习记录加载动画

.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/components/learningRecord/learningRecord.tsx

@@ -5,6 +5,7 @@ import LineChart from "@/components/lineChart/lineChart";
 import {FC, useEffect, useState} from "react";
 import {StatisticsParam, userApi} from "@/api";
 import styles from './learningRecord.module.scss'
+import Spin from "@/components/spinner";
 
 const tabList: TabList<any>[] = [
   {
@@ -38,16 +39,19 @@ interface Props {
  */
 const LearningRecord: FC<Props> = ({userId}) => {
   const [lineData, setLineData] = useState<any[]>([])
+  const [loading, setLoading] = useState(false)
 
 
   async function getStatistics(data: StatisticsParam) {
     try {
+      setLoading(true)
       const res = await userApi.statistics(userId, data)
       const everyDayValue = everyDay(data.start_time, Number(data.end_time), res.data)
       setLineData(everyDayValue)
     } catch (e) {
       setLineData([])
     }
+    setLoading(false)
   }
 
   function tabChange({tab}: OnChangOpt<StatisticsParam>) {
@@ -60,13 +64,16 @@ const LearningRecord: FC<Props> = ({userId}) => {
 
   return (<View className={styles.box} style={{display: 'block'}}>
     <Tabs tabList={tabList} onChange={tabChange} backMode/>
-    <View className={styles.total}>
-      总共学习
-      <Text style={{margin: '0 10px', color: '#00D6AC'}}>
-        {formatTime(lineData.reduce((pre, cur) => pre + cur.value, 0) || 0)}
-      </Text>
+    <View style={{position: "relative"}}>
+      <Spin enable={loading} block/>
+      <View className={styles.total}>
+        总共学习
+        <Text style={{margin: '0 10px', color: '#00D6AC'}}>
+          {formatTime(lineData.reduce((pre, cur) => pre + cur.value, 0) || 0)}
+        </Text>
+      </View>
+      <LineChart data={lineData}/>
     </View>
-    <LineChart data={lineData}/>
   </View>)
 }
 

src/components/lineChart/lineChart.tsx

@@ -35,7 +35,7 @@ const LineChart: FC<Props> = ({data}) => {
       </View>
       <ScrollView scrollX={!!maxHeight.value} enhanced showScrollbar={false}>
         <View className={style.lineChart}>
-          {!maxHeight.value && <View className={style.empty}>暂无数据</View>}
+          {!maxHeight.value && <View className={style.empty}>暂无学习记录</View>}
           {
             !!maxHeight.value && lineChartList.map(d => <View key={d.time}>
               <View className={style.columnBox} style={{width: "100px"}}>

src/components/spinner/style.scss

@@ -5,9 +5,16 @@
     width: auto;
     position: absolute;
     z-index: 99999;
-    left: 50%;
-    top: 50%;
-    transform: translate(-50%, -50%);
+    background-color: rgba(#fff, 1.0);
+    width: 100%;
+    height: 100%;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    //left: 50%;
+    //top: 50%;
+    //transform: translate(-50%, -50%);
   }
 
   &.is-fixed {