From 7b62c5e473e30cbb8386ecba5a8b120ade69769c Mon Sep 17 00:00:00 2001 From: Dawn1Ocean <1785590531@qq.com> Date: Wed, 27 Mar 2024 14:58:35 +0800 Subject: [PATCH] add loading indicator --- src/assets/icons/Toast/error.svg | 1 + .../DetailFramework/DetailFramework.tsx | 17 +++++++++++--- src/pages/TicketList/TicketList.tsx | 23 ++++++++++++++++--- src/pages/index/index.tsx | 17 ++++++++++++-- src/pages/user/myTicket/myTicket.tsx | 17 +++++++++++--- src/plain-text/ActIndicator.ts | 11 +++++++++ src/plain-text/Toast.ts | 11 +++++++++ src/plain-text/index.ts | 12 ++++++++++ 8 files changed, 98 insertions(+), 11 deletions(-) create mode 100644 src/assets/icons/Toast/error.svg create mode 100644 src/plain-text/ActIndicator.ts create mode 100644 src/plain-text/Toast.ts diff --git a/src/assets/icons/Toast/error.svg b/src/assets/icons/Toast/error.svg new file mode 100644 index 0000000..6bdf38d --- /dev/null +++ b/src/assets/icons/Toast/error.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/components/DetailFramework/DetailFramework.tsx b/src/components/DetailFramework/DetailFramework.tsx index 31a9470..0f210f9 100644 --- a/src/components/DetailFramework/DetailFramework.tsx +++ b/src/components/DetailFramework/DetailFramework.tsx @@ -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 Loading; + return ( + + ); } else if (!this.state.rs.success) { - return Request failed; + return ( + + ); } const elements: ShowElements = { diff --git a/src/pages/TicketList/TicketList.tsx b/src/pages/TicketList/TicketList.tsx index 5f172e6..3e62cd0 100644 --- a/src/pages/TicketList/TicketList.tsx +++ b/src/pages/TicketList/TicketList.tsx @@ -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 loading; + return ( + + ); } if (!this.state.rs.success) { - return Failed; + return ( + + ); } const fixListRenderer = this.state.fixList.map((item) => item.render()); return ( diff --git a/src/pages/index/index.tsx b/src/pages/index/index.tsx index b653fdc..01c44b8 100644 --- a/src/pages/index/index.tsx +++ b/src/pages/index/index.tsx @@ -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 loading; + return ( + + ); } if (!this.state.rs.success) { - return Failed; + return ( + + ); } const fixListRenderer = this.state.fixList.map((item) => item.render()); return ( diff --git a/src/pages/user/myTicket/myTicket.tsx b/src/pages/user/myTicket/myTicket.tsx index e4ac320..e793609 100644 --- a/src/pages/user/myTicket/myTicket.tsx +++ b/src/pages/user/myTicket/myTicket.tsx @@ -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 loading; + return ( + + ); } if (!this.state.rs.success) { - return Failed; + return ( + + ); } const fixListRenderer = this.state.fixList.map((item) => item.render()); return ( diff --git a/src/plain-text/ActIndicator.ts b/src/plain-text/ActIndicator.ts new file mode 100644 index 0000000..6b69af6 --- /dev/null +++ b/src/plain-text/ActIndicator.ts @@ -0,0 +1,11 @@ +export interface ActIndicatorText { + loading: string; +} + +export const actIndicatorZhCn: ActIndicatorText = { + loading: '加载中...', +}; + +export const actIndicatorEnUs: ActIndicatorText = { + loading: 'Loading...', +}; diff --git a/src/plain-text/Toast.ts b/src/plain-text/Toast.ts new file mode 100644 index 0000000..6f24060 --- /dev/null +++ b/src/plain-text/Toast.ts @@ -0,0 +1,11 @@ +export interface ToastText { + error: string; +} + +export const toastZhCn: ToastText = { + error: '获取失败', +}; + +export const toastEnUs: ToastText = { + error: 'Request Failed', +}; diff --git a/src/plain-text/index.ts b/src/plain-text/index.ts index 189c2c0..30642f3 100644 --- a/src/plain-text/index.ts +++ b/src/plain-text/index.ts @@ -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' | ...;