xing
/
video
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

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

Browse Source
v2
king 1 year ago
parent cb88f49e85
commit 3a777d0b57
9 changed files with 35 additions and 77 deletions
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Show Stats Download Patch File Download Diff File
  1. 3
      config/index.js
  2. 7
      src/api/illness.ts
  3. 2
      src/app.scss
  4. 1
      src/components/image/image.tsx
  5. 21
      src/components/learningRecord/learningRecord.tsx
  6. 4
      src/pages/home/home.tsx
  7. 2
      src/pages/preview/illness/list/list.tsx
  8. 11
      src/pages/preview/videoFull/videoFull.tsx
  9. 53
      src/static/img/logo.svg

3
config/index.js
Unescape View File

@ -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,

7
src/api/illness.ts
Unescape View File

@ -1,11 +1,13 @@
import {request} from "@/api/request";
export interface Illness {
illness: {
name: string;
description: string;
resource: any;
album: string[]
created_at: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})
},
}

2
src/app.scss
Unescape View File

@ -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}

1
src/components/image/image.tsx
Unescape View File

@ -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({

21
src/components/learningRecord/learningRecord.tsx
Unescape View File

@ -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'}}>

4
src/pages/home/home.tsx
Unescape View File

@ -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>
</>
}
>

2
src/pages/preview/illness/list/list.tsx
Unescape View File

@ -15,7 +15,7 @@ const BrandList: FC = () => {
const [enable, setEnable] = useState(true)
useEffect(() => {
getData().then()
getData()
}, [page])
const getData = useCallback(async () => {

11
src/pages/preview/videoFull/videoFull.tsx
Unescape View File

@ -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>

53
src/static/img/logo.svg
Unescape View File

@ -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>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 3.4 KiB

After

Width:  |  Height:  |  Size: 2.1 KiB

Write Preview
Loading…
Cancel
Save