add pagination in ticketlist

mock/ticketsList.json

@@ -1,7 +1,7 @@
 {
     "pageIndex": 1,
     "pageCount": 24,
-    "size": 10,
+    "size": 8,
     "queryType": 0,
     "data": [
       {
@@ -81,32 +81,10 @@
         "createdTime": "2024-03-06T09:49:27.043865",
         "isConfirmed": false
       },
-      {
-        "id": 6837,
-        "type": 1,
-        "status": 7,
-        "device": "EVA",
-        "deviceModel": "超级笔记本",
-        "owner": "亦可",
-        "phone": "18888888881",
-        "createdTime": "2024-03-16T19:49:27.043865",
-        "isConfirmed": false
-      },
-      {
-        "id": 6838,
-        "type": 0,
-        "status": 2,
-        "device": "罗技",
-        "deviceModel": "G304",
-        "owner": "暮泠",
-        "phone": "18888888880",
-        "createdTime": "2024-04-06T19:49:27.043865",
-        "isConfirmed": false
-      },
       {
         "id": 6839,
         "type": 0,
-        "status": 3,
+        "status": 7,
         "device": "HAL",
         "deviceModel": "卡比手办",
         "owner": "蘑菇云",

src/app.config.ts

@@ -9,7 +9,7 @@ export default defineAppConfig({
     'pages/user/report/report',
     'pages/user/member/member',
     'pages/TicketDetail/TicketDetail',
-    'pages/ticketList/ticketList',
+    'pages/TicketList/TicketList',
   ],
   window: {
     backgroundTextStyle: 'light',

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,8 +51,19 @@ export default class TicketListPage extends Component<{}, TicketListState> {
     const fixListRenderer = this.state.fixList.map((item) => item.render());
     return (
       <View>
+        <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',
     });
   }
 

src/service/ticketList.ts

@@ -12,10 +12,14 @@ export function getTicketList(that: TicketListPage) {
     method: 'GET',
     data: {
       token: wechatUser.getToken(),
+      pageId: that.state.currentPage,
+      count: that.state.pageSize,
+      querytype: 0,
     },
   })
     .then((res) => {
       let former = that.state.rs;
+      const data = res.data.data;
       if (!res.data.success) {
         that.setState({
           rs: former.trans(false),
@@ -24,7 +28,7 @@ export function getTicketList(that: TicketListPage) {
       }
       that.setState({
         rs: former.trans(true),
-        fixList: res.data.data.data.map(
+        fixList: data.data.map(
           (item: {
             id: number;
             device: string;
@@ -40,6 +44,9 @@ export function getTicketList(that: TicketListPage) {
               moment(item.createdTime),
             ),
         ),
+        currentPage: data.pageIndex,
+        pageSize: data.size,
+        totalPage: data.pageCount,
       });
     })
     .catch((reason) => {