Dawn_Ocean
/
EVA-Notify
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

add loading indicator

main
Dawn1Ocean 2024-03-27 14:58:35 +08:00
parent e6ffd7d5d7
commit 7b62c5e473
8 changed files with 98 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
src/assets/icons/Toast/error.svg 100644
View File

@ -0,0 +1 @@
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1711521868832" class="icon" viewBox="0 0 1025 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1603" xmlns:xlink="http://www.w3.org/1999/xlink" width="200.1953125" height="200"><path d="M982.668821 313.74918c-25.810101-60.752236-62.714-115.373446-109.685763-162.346233-46.972787-46.971763-101.593997-83.875662-162.346233-109.685763C647.666853 14.966132 580.925912 1.401699 512.268258 1.401699S376.868639 14.966132 313.898667 41.717184c-60.752236 25.810101-115.373446 62.714-162.346233 109.685763-46.971763 46.972787-83.875662 101.593997-109.685763 162.346233C15.115619 376.719151 1.551186 443.460092 1.551186 512.118771S15.115619 647.517366 41.866671 710.487337c25.810101 60.75326 62.714 115.37447 109.685763 162.346233 46.971763 46.972787 101.592974 83.876686 162.346233 109.685763 62.969971 26.752076 129.710912 40.316509 198.369591 40.316509s135.398595-13.564433 198.368567-40.316509c60.75326-25.809077 115.37447-62.712976 162.346233-109.685763 46.972787-46.971763 83.876686-101.592974 109.685763-162.346233 26.752076-62.969971 40.316509-129.710912 40.316509-198.368567S1009.419873 376.719151 982.668821 313.74918zM937.435615 691.271058c-23.333323 54.923257-56.71096 104.317532-99.204249 146.811845-42.494313 42.493289-91.888588 75.870926-146.811845 99.204249-56.8584 24.155503-117.133505 36.403219-179.152287 36.403219-62.018782 0-122.293887-12.247716-179.152287-36.403219-54.923257-23.333323-104.317532-56.71096-146.810821-99.204249-42.493289-42.494313-75.870926-91.888588-99.204249-146.811845C62.944374 634.412658 50.697682 574.136529 50.697682 512.118771c0-62.018782 12.247716-122.293887 36.403219-179.152287 23.333323-54.923257 56.709936-104.317532 99.204249-146.810821s91.888588-75.870926 146.810821-99.204249c56.8584-24.155503 117.133505-36.403219 179.152287-36.403219 62.017758 0 122.292863 12.247716 179.152287 36.403219 54.923257 23.333323 104.317532 56.709936 146.810821 99.204249 42.494313 42.493289 75.870926 91.888588 99.205273 146.810821 24.155503 56.8584 36.403219 117.134529 36.403219 179.152287S961.591118 634.412658 937.435615 691.271058z" fill="#ffffff" p-id="1604"></path><path d="M704.62457 319.769626c-9.997216-9.996192-26.203273-9.996192-36.199466 0L512.382933 475.810773 356.341786 319.769626c-9.996192-9.996192-26.204297-9.996192-36.199466 0-9.996192 9.996192-9.996192 26.203273 0 36.199466l156.041147 156.041147L320.14232 668.05241c-9.996192 9.997216-9.996192 26.204297 0 36.199466 4.997584 4.998608 11.549426 7.496888 18.100245 7.496888s13.101637-2.49828 18.100245-7.496888l156.041147-156.041147L668.424081 704.251876c4.998608 4.998608 11.548403 7.496888 18.100245 7.496888s13.101637-2.49828 18.100245-7.496888c9.996192-9.996192 9.996192-26.203273 0-36.199466L548.583423 512.011263l156.041147-156.041147C714.620762 345.973923 714.620762 329.765818 704.62457 319.769626z" fill="#ffffff" p-id="1605"></path></svg>
Side by Side

After

Width:  |  Height:  |  Size: 2.9 KiB

17
src/components/DetailFramework/DetailFramework.tsx
View File

@ -9,7 +9,7 @@ import {
import pt from '@/plain-text';
import { RequestState } from '@/service';
import { getTicketInfo } from '@/service/ticketsInfo';
import { AtCard, AtSteps } from 'taro-ui';
import { AtActivityIndicator, AtCard, AtSteps, AtToast } from 'taro-ui';
import NoteList from '../NoteList/NoteList';
interface StepItemData {
@ -66,9 +66,20 @@ export default class DetailFramework extends Component<
render(): ReactNode {
if (this.state.rs.loading) {
return <View>Loading</View>;
return (
<AtActivityIndicator
mode='center'
content={pt.get().actIndicator.loading}
></AtActivityIndicator>
);
} else if (!this.state.rs.success) {
return <View>Request failed</View>;
return (
<AtToast
isOpened
text={pt.get().toast.error}
icon='close-circle'
></AtToast>
);
}
const elements: ShowElements = {

23
src/pages/TicketList/TicketList.tsx
View File

@ -1,6 +1,12 @@
import { Component, ReactNode } from 'react';
import { View } from '@tarojs/components';
import { AtList, AtPagination, AtSearchBar } from 'taro-ui';
import {
AtActivityIndicator,
AtList,
AtPagination,
AtSearchBar,
AtToast,
} from 'taro-ui';
import Taro from '@tarojs/taro';
import moment from 'moment';
import pt from '@/plain-text';
@ -59,10 +65,21 @@ export default class TicketListPage extends Component<{}, TicketListState> {
render(): ReactNode {
if (this.state.rs.loading) {
return <View>loading</View>;
return (
<AtActivityIndicator
mode='center'
content={pt.get().actIndicator.loading}
></AtActivityIndicator>
);
}
if (!this.state.rs.success) {
return <View>Failed</View>;
return (
<AtToast
isOpened
text={pt.get().toast.error}
icon='close-circle'
></AtToast>
);
}
const fixListRenderer = this.state.fixList.map((item) => item.render());
return (

17
src/pages/index/index.tsx
View File

@ -8,6 +8,8 @@ import {
AtButton,
AtList,
AtListItem,
AtActivityIndicator,
AtToast,
} from 'taro-ui';
import clockIcon from '@/assets/icons/MainPage/clock.svg';
import type CustomTabBar from '@/custom-tab-bar';
@ -183,10 +185,21 @@ export default class MainPage extends Component<{}, MainPageState> {
const mainPage = pt.get().mainPage;
const memberPage = pt.get().memberPage;
if (this.state.rs.loading) {
return <View>loading</View>;
return (
<AtActivityIndicator
mode='center'
content={pt.get().actIndicator.loading}
></AtActivityIndicator>
);
}
if (!this.state.rs.success) {
return <View>Failed</View>;
return (
<AtToast
isOpened
text={pt.get().toast.error}
icon='close-circle'
></AtToast>
);
}
const fixListRenderer = this.state.fixList.map((item) => item.render());
return (

17
src/pages/user/myTicket/myTicket.tsx
View File

@ -1,6 +1,6 @@
import { Component, ReactNode } from 'react';
import { View } from '@tarojs/components';
import { AtList } from 'taro-ui';
import { AtActivityIndicator, AtList, AtToast } from 'taro-ui';
import Taro from '@tarojs/taro';
import moment from 'moment';
import pt from '@/plain-text';
@ -29,10 +29,21 @@ export default class MyTicketPage extends Component<{}, MyTicketState> {
render(): ReactNode {
if (this.state.rs.loading) {
return <View>loading</View>;
return (
<AtActivityIndicator
mode='center'
content={pt.get().actIndicator.loading}
></AtActivityIndicator>
);
}
if (!this.state.rs.success) {
return <View>Failed</View>;
return (
<AtToast
isOpened
text={pt.get().toast.error}
icon='close-circle'
></AtToast>
);
}
const fixListRenderer = this.state.fixList.map((item) => item.render());
return (

11
src/plain-text/ActIndicator.ts 100644
View File

@ -0,0 +1,11 @@
export interface ActIndicatorText {
loading: string;
}
export const actIndicatorZhCn: ActIndicatorText = {
loading: '加载中...',
};
export const actIndicatorEnUs: ActIndicatorText = {
loading: 'Loading...',
};

11
src/plain-text/Toast.ts 100644
View File

@ -0,0 +1,11 @@
export interface ToastText {
error: string;
}
export const toastZhCn: ToastText = {
error: '获取失败',
};
export const toastEnUs: ToastText = {
error: 'Request Failed',
};

12
src/plain-text/index.ts
View File

@ -18,6 +18,12 @@ import {
import { CommonText, commonTextEnUs, commonTextZhCn } from './common';
import { TipsText, tipsEnUs, tipsZhCn } from './Tips';
import { ModalText, modalEnUs, modalZhCn } from './Modal';
import { ToastText, toastEnUs, toastZhCn } from './Toast';
import {
ActIndicatorText,
actIndicatorEnUs,
actIndicatorZhCn,
} from './ActIndicator';
interface TextRecord {
common: CommonText;
@ -36,6 +42,8 @@ interface TextRecord {
ticketDetail: TicketDetailText;
tips: TipsText;
modal: ModalText;
toast: ToastText;
actIndicator: ActIndicatorText;
}
const textZhCn: TextRecord = {
@ -55,6 +63,8 @@ const textZhCn: TextRecord = {
ticketDetail: ticketDetailZhCn,
tips: tipsZhCn,
modal: modalZhCn,
toast: toastZhCn,
actIndicator: actIndicatorZhCn,
};
const textEnUs: TextRecord = {
@ -74,6 +84,8 @@ const textEnUs: TextRecord = {
ticketDetail: ticketDetailEnUs,
tips: tipsEnUs,
modal: modalEnUs,
toast: toastEnUs,
actIndicator: actIndicatorEnUs,
};
// type Lang = 'zh_CN' | 'en_US' | ...;