add loading indicator

src/assets/icons/Toast/error.svg

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

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 <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 = {

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

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

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

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...',
+};

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',
+};

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' | ...;