修改学习记录柱状图请求的loading动画

1 year ago · 3a777d0b57
parent cb88f49e85
commit 3a777d0b57
9 changed files with 35 additions and 77 deletions
--- a/config/index.js
+++ b/config/index.js
@ -20,13 +20,14 @@ const config = {
  framework: 'react',
  compiler: 'webpack5',
  cache: {
-    enable: false // Webpack 持久化缓存配置，建议开启。默认配置请参考：https://docs.taro.zone/docs/config-detail#cache
+    enable: true // Webpack 持久化缓存配置，建议开启。默认配置请参考：https://docs.taro.zone/docs/config-detail#cache
  },
  sass: {},
  alias: {
    "@": path.resolve(__dirname, '..', 'src')
  },
  mini: {
+    debugReact: true,
    postcss: {
      pxtransform: {
        enable: true,
--- a/src/api/illness.ts
+++ b/src/api/illness.ts
@ -1,11 +1,13 @@
 import {request} from "@/api/request";

 export interface Illness {
-  name: string;
-  description: string;
-  resource: any;
-  album: string[]
-  created_at:string
+  illness: {
+    name: string;
+    description: string;
+    resource: any;
+    album: string[]
+    created_at: string
+  }
  list: {
    list: any[],
    total: number
@ -18,7 +20,6 @@ export const illnessApi = {
    return request<{ list: any[], total: number }>(`/home/v1/illness/list`, "GET", {page, page_size, id})
  },
  articleInfo(owner_id: number, page: number, page_size: number) {
-    return request<{ illness: Illness }>
-    (`/home/v1/article/illness_list`, "GET", {page, page_size, owner_id})
+    return request<Illness>(`/home/v1/article/illness_list`, "GET", {page, page_size, owner_id})
  },
 }
--- a/src/app.scss
+++ b/src/app.scss
@ -1,5 +1,5 @@
@import "static/css/module";
-@import 'taro-ui/dist/style/index.scss';
+//@import 'taro-ui/dist/style/index.scss';

 .flex {display: flex !important;flex-direction:row}
 .flex-row{ flex-direction:row!important}
--- a/src/components/image/image.tsx
+++ b/src/components/image/image.tsx
@ -24,7 +24,6 @@ const Img: FC<Props> = ({src, mode = 'aspectFill', width, fallback = shard, ...p
  const imgAnimation = Taro.createAnimation({duration: 0}).opacity(0).step()
  const [animationData, setAnimationData] = useState<TaroGeneral.IAnyObject>(imgAnimation.export())

-
  useEffect(() => {
    if (!isError && props.fit) {
      Taro.getImageInfo({
--- a/src/components/learningRecord/learningRecord.tsx
+++ b/src/components/learningRecord/learningRecord.tsx
@ -5,7 +5,7 @@ import LineChart from "@/components/lineChart/lineChart";
 import {CSSProperties, FC, useEffect, useState} from "react";
 import {StatisticsParam, userApi} from "@/api";
 import styles from './learningRecord.module.scss'
-// import Spin from "@/components/spinner";
+import Spin from "@/components/spinner";
 import {Profile} from "@/store";
 import Taro from "@tarojs/taro";
 import debounce from "@/utils/debounce";
@ -44,7 +44,7 @@ interface Props {
 */
 const LearningRecord: FC<Props> = ({userId, style, className}) => {
  const [lineData, setLineData] = useState<any[]>([])
-  // const [loading, setLoading] = useState(false)
+  const [loading, setLoading] = useState(false)
  const {token} = Profile.useContainer()

  async function getStatistics(data: StatisticsParam) {
@ -64,21 +64,26 @@ const LearningRecord: FC<Props> = ({userId, style, className}) => {
      Taro.navigateTo({url: '/pages/login/login'})
      return
    }
-    // getStatistics(tab?.value! as StatisticsParam)
-    debounce(()=>{
-      // console.log(this,'this')
-      getStatistics(tab?.value! as StatisticsParam)
+    setLoading(true)
+    debounce(() => {
+      try {
+        getStatistics(tab?.value! as StatisticsParam).then()
+      } catch (e) {
+      }
+      setLoading(false)
    })
  }

  useEffect(() => {
-    userId && setTimeout(() => {getStatistics(tabList[0].value)},500)
+    userId && setTimeout(() => {
+      getStatistics(tabList[0].value)
+    }, 500)
  }, [userId])

  return (<View className={[styles.box, className].filter(Boolean).join(' ')} style={{display: 'block', ...style}}>
    <Tabs tabList={tabList} onChange={tabChange} backMode/>
    <View style={{position: "relative"}}>
-      {/*<Spin enable={loading} block/>*/}
+      {loading && <Spin enable={loading} block/>}
      <View className={styles.total}>
        总共学习
        <Text style={{margin: '0 10px', color: '#00D6AC'}}>
--- a/src/pages/home/home.tsx
+++ b/src/pages/home/home.tsx
@ -51,8 +51,8 @@ const Home: FC = () => {
        cancelBack
        leftNode={
          <>
-            <Image src={logo} style={{height: "110%"}} mode='heightFix'/>
-            <Text className='font-36 font-weight'>信桂</Text>
+            <Image src={logo} style={{height: "90%"}} mode='heightFix'/>
+            <Text className='font-36 font-weight ml-2'>信桂</Text>
          </>
        }
      >
--- a/src/pages/preview/illness/list/list.tsx
+++ b/src/pages/preview/illness/list/list.tsx
@ -15,7 +15,7 @@ const BrandList: FC = () => {
  const [enable, setEnable] = useState(true)

  useEffect(() => {
-    getData().then()
+    getData()
  }, [page])

  const getData = useCallback(async () => {
--- a/src/pages/preview/videoFull/videoFull.tsx
+++ b/src/pages/preview/videoFull/videoFull.tsx
@ -91,12 +91,12 @@ const VideoFull: FC = () => {
        data ? <>
          <Video
            posterSize='100%'
-            id={'myVideo'}
+            id='myVideo'
            onClick={click}
-            className={styles.video}
            controls
-            src={data?.resource?.url}
            autoplay
+            className={styles.video}
+            src={data?.resource?.url}
            showCenterPlayBtn
            autoPauseIfOpenNative
            autoPauseIfNavigate
@ -110,7 +110,10 @@ const VideoFull: FC = () => {
          <View className={styles.title}>
            <View className='flex'>
              <View className='font-36 font-weight flex-1 pr-3 text-row1'>{data.title}</View>
-              <Collect owner_id={Number(id)} owner_type={2} styles={{color: '#fff'}} select={data.collects}/>
+              <Collect owner_id={Number(id)}
+                       owner_type={2}
+                       styles={{color: '#fff', width: 'auto'}}
+                       select={data.collects}/>
            </View>
            <View className='font-32'>播放{data.video_view}</View>
            <View className='font-32 mt-1 text-ellipsis-1'>{data.introduction}</View>
--- a/src/static/img/logo.svg
+++ b/src/static/img/logo.svg
@ -1,52 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="60" height="60"
-     viewBox="0 0 60 60">
-    <defs>
-        <style>
-            .a,.f,.k{fill:none;}.a{stroke:rgba(255,0,0,0);}.b{fill:#45d4a8;}.c{fill:#ffbb8f;}.c,.d{stroke:rgba(0,0,0,0);}.d{fill:#ff9e5f;stroke-miterlimit:10;}.e{fill:#36bb92;}.f{stroke:#ebebeb;}.g{clip-path:url(#a);}.h{clip-path:url(#c);}.i{clip-path:url(#d);}.j{stroke:none;}
-        </style>
-        <clipPath id="a">
-            <rect class="a" width="30" height="31.006"/>
-        </clipPath>
-        <clipPath id="c">
-            <rect class="b" width="30" height="31.166"/>
-        </clipPath>
-        <clipPath id="d">
-            <rect class="e" width="30" height="31.166"/>
-        </clipPath>
-    </defs>
-    <g transform="translate(-159 -180)">
-        <g transform="translate(-1)">
-            <g transform="translate(175 194.975)">
-                <g transform="translate(0 0.028)">
-                    <g class="g">
-                        <g class="g">
-                            <path class="a"
-                                  d="M28.887,18.313A41.879,41.879,0,0,1,16.2,27.768,40.857,40.857,0,0,1,7.1,30.911a4.273,4.273,0,0,1-4.907-2.725,37.1,37.1,0,0,1-1.98-8.75A40.568,40.568,0,0,1,.12,12.158,44.3,44.3,0,0,1,1.756,3.1,4.279,4.279,0,0,1,6.988.153,52.15,52.15,0,0,1,20.1,5.752,46.709,46.709,0,0,1,28.731,12.4a4.27,4.27,0,0,1,.156,5.912"
-                                  transform="translate(0 0)"/>
-                        </g>
-                    </g>
-                </g>
-                <g transform="translate(0 0)">
-                    <g class="h" transform="translate(0 0)">
-                        <path class="b"
-                              d="M1.424,3.749a48.472,48.472,0,0,0,.083,23.657,4.987,4.987,0,0,0,6.127,3.587,50.257,50.257,0,0,0,20.754-11.9,4.994,4.994,0,0,0,.042-7.31A48.826,48.826,0,0,0,7.528.166a4.982,4.982,0,0,0-6.1,3.584"
-                              transform="translate(0 0)"/>
-                    </g>
-                </g>
-            </g>
-            <path class="c"
-                  d="M.5,14.519a.529.529,0,0,1-.5-.53V0A52.031,52.031,0,0,1,8.914,3.98v9.97a.529.529,0,0,1-.865.409L4.911,11.751a.528.528,0,0,0-.666-.009L.855,14.405a.521.521,0,0,1-.3.114Z"
-                  transform="translate(185.543 196.083)"/>
-            <path class="d"
-                  d="M0,14.026V0C.187.063.373.126.558.191V14.026L3.9,11.338a1.083,1.083,0,0,1,1.364.018L8.4,13.964,8.371,3.725q.274.155.543.31v9.951a.529.529,0,0,1-.53.529.516.516,0,0,1-.335-.123L4.91,11.785a.531.531,0,0,0-.338-.122.525.525,0,0,0-.327.113L.854,14.441a.523.523,0,0,1-.324.113A.529.529,0,0,1,0,14.026Z"
-                  transform="translate(185.542 196.048)"/>
-            <g transform="translate(175 194.975)">
-                <g class="i" transform="translate(0 0)">
-                    <path class="e"
-                          d="M6.253.43A4.61,4.61,0,0,1,7.42.581,48.178,48.178,0,0,1,28.136,12.092a4.565,4.565,0,0,1-.039,6.682,49.677,49.677,0,0,1-20.575,11.8,4.545,4.545,0,0,1-5.6-3.278A47.787,47.787,0,0,1,1.842,3.854,4.537,4.537,0,0,1,6.253.43m0-.43A4.975,4.975,0,0,0,1.425,3.749a48.472,48.472,0,0,0,.083,23.657,4.976,4.976,0,0,0,6.127,3.587,50.256,50.256,0,0,0,20.754-11.9,5,5,0,0,0,.042-7.31A48.828,48.828,0,0,0,7.529.166,5.026,5.026,0,0,0,6.253,0"
-                          transform="translate(0 0)"/>
-                </g>
-            </g>
-        </g>
-    </g>
-</svg>
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="108.673" height="66.496" viewBox="0 0 108.673 66.496"><defs><style>.a{fill:url(#a);}.b{clip-path:url(#d);}.c{clip-path:url(#f);}.d{clip-path:url(#h);}</style><linearGradient id="a" x1="0.211" y1="-0.397" x2="0.919" y2="-0.372" gradientUnits="objectBoundingBox"><stop offset="0" stop-color="#99d039"/><stop offset="1" stop-color="#3caf3b"/></linearGradient><clipPath id="d"><path class="a" d="M50.843,54.07c26.033.222,29.816-9.346,29.816-9.346a74.891,74.891,0,0,1-37.27,1.669C16.021,37.715,0,45.058,0,45.058c28.591.215,31.221,21.406,58.855,21.437h.119q1.4,0,2.883-.077c31.6-2.448,46.816-25.254,46.816-25.254-40.295,28.7-57.83,12.906-57.83,12.906"/></clipPath><clipPath id="f"><path class="a" d="M54.12,22a10.427,10.427,0,0,0-17.8,7.374,12.6,12.6,0,0,0,1.534,5.954,16.977,16.977,0,0,0,2.1,3.05,29.974,29.974,0,0,0,3.853,3.71c.623.513,1.239.991,1.811,1.421A70.841,70.841,0,0,0,61.078,44.63c.883-.617,2.108-1.511,3.356-2.538a30.106,30.106,0,0,0,3.853-3.71,16.97,16.97,0,0,0,2.1-3.05,12.6,12.6,0,0,0,1.534-5.954A10.428,10.428,0,0,0,54.12,22"/></clipPath><clipPath id="h"><path class="a" d="M68.8,0A20.751,20.751,0,0,0,54.12,6.08,20.759,20.759,0,0,0,18.683,20.758a25.1,25.1,0,0,0,3.054,11.853,33.8,33.8,0,0,0,4.179,6.071q.282.33.574.66c2.354.277,4.851.678,7.485,1.229-.549-.568-1.067-1.135-1.546-1.7A25.935,25.935,0,0,1,29.214,34.2a19.3,19.3,0,0,1-2.349-9.116A15.966,15.966,0,0,1,54.12,13.8a15.965,15.965,0,0,1,27.254,11.29A19.308,19.308,0,0,1,79.025,34.2a26.031,26.031,0,0,1-3.214,4.669,43.63,43.63,0,0,1-4.836,4.785,69.727,69.727,0,0,0,8.476-1.89c1.05-1.038,2-2.062,2.871-3.085A33.759,33.759,0,0,0,86.5,32.611a25.1,25.1,0,0,0,3.053-11.853A20.76,20.76,0,0,0,68.8,0Z"/></clipPath></defs><g transform="translate(0 0.001)"><g class="b"><rect class="a" width="108.673" height="32.152" transform="translate(0 37.715)"/></g><g class="c"><rect class="a" width="35.601" height="25.842" transform="translate(36.319 18.951)"/></g><g class="d"><rect class="a" width="70.873" height="43.658" transform="translate(18.683 -0.001)"/></g></g></svg>