add pagination in ticketlist

src/pages/TicketList/TicketList.tsx

@@ -1,9 +1,10 @@
 import { Component, ReactNode } from 'react';
 import { View } from '@tarojs/components';
-import { AtList } from 'taro-ui';
+import { AtList, AtPagination } from 'taro-ui';
 import Taro from '@tarojs/taro';
 import moment from 'moment';
 import pt from '@/plain-text';
+import PageFooter from '@/components/PageFooter/PageFooter';
 import { RequestState } from '@/service';
 import { getTicketList } from '@/service/ticketList';
 import { TicketListItem } from '@/components/TicketListItem/TicketListItem';
@@ -12,12 +13,18 @@ import './TicketList.scss';
 interface TicketListState {
   fixList: Array<TicketListItem>;
   rs: RequestState;
+  currentPage: number;
+  totalPage: number;
+  pageSize: number;
 }
 
 export default class TicketListPage extends Component<{}, TicketListState> {
   state = {
     fixList: [new TicketListItem(0, '', '', 1, moment())],
     rs: new RequestState(),
+    currentPage: 1,
+    totalPage: 1,
+    pageSize: 8,
   };
 
   componentDidMount(): void {
@@ -27,6 +34,13 @@ export default class TicketListPage extends Component<{}, TicketListState> {
     getTicketList(this);
   }
 
+  onPageChange(): void {
+    this.setState({
+      rs: new RequestState(),
+    });
+    getTicketList(this);
+  }
+
   render(): ReactNode {
     if (this.state.rs.loading) {
       return <View>loading</View>;
@@ -37,7 +51,18 @@ export default class TicketListPage extends Component<{}, TicketListState> {
     const fixListRenderer = this.state.fixList.map((item) => item.render());
     return (
       <View>
-        <AtList>{fixListRenderer}</AtList>
+        <View style={{ marginTop: '40rpx' }}>
+          <AtList>{fixListRenderer}</AtList>
+        </View>
+        <View style={{ marginTop: '40rpx' }}>
+          <AtPagination
+            total={this.state.totalPage}
+            pageSize={this.state.pageSize}
+            current={this.state.currentPage}
+            onPageChange={this.onPageChange.bind(this)}
+          ></AtPagination>
+        </View>
+        <PageFooter />
       </View>
     );
   }

src/pages/index/index.tsx

@@ -175,7 +175,7 @@ export default class MainPage extends Component<{}, MainPageState> {
 
   ticketListPage() {
     Taro.navigateTo({
-      url: '/pages/ticketList/ticketList',
+      url: '/pages/TicketList/TicketList',
     });
   }