add uncompleted ticket list in member page

src/components/TicketListItem/TicketListItem.tsx

@@ -15,6 +15,7 @@ export class TicketListItem {
   status: FixStatus;
   createAt: moment.Moment;
   iconMap: Map<FixStatus, string>;
+  isMember: boolean;
 
   constructor(
     id: number,
@@ -22,12 +23,14 @@ export class TicketListItem {
     model: string,
     status: FixStatus,
     createAt: moment.Moment,
+    isMember: boolean,
   ) {
     this.id = id;
     this.brand = brand;
     this.model = model;
     this.status = status;
     this.createAt = createAt;
+    this.isMember = isMember;
     this.iconMap = new Map<FixStatus, string>([
       [1, repair],
       [2, repair],
@@ -48,7 +51,11 @@ export class TicketListItem {
         thumb={this.iconMap.get(this.status)}
         onClick={() => {
           Taro.navigateTo({
-            url: '/pages/TicketDetail/TicketDetail?id=' + this.id,
+            url:
+              '/pages/TicketDetail/TicketDetail?id=' +
+              this.id +
+              '&isMember=' +
+              this.isMember,
           });
         }}
       />

src/pages/TicketDetail/TicketDetail.tsx

@@ -8,23 +8,45 @@ import PageFooter from '@/components/PageFooter/PageFooter';
 
 interface TicketDetailState {
   id: number;
+  isMember: boolean;
 }
 
 export default class TicketDetail extends Component<{}, TicketDetailState> {
   state: Readonly<TicketDetailState> = {
     id: 0,
+    isMember: false,
   };
 
   componentDidMount(): void {
     const { router } = getCurrentInstance();
     const id = router?.params.id as number;
+    const isMember = router?.params.isMember as boolean;
     this.setState({
       id: id,
+      isMember: isMember,
     });
   }
 
   render(): ReactNode {
-    const middleButton = (
+    const middleButton = this.state.isMember ? (
+      <View
+        className='at-row'
+        style={{ paddingTop: 10, paddingBottom: 10, width: '100%' }}
+      >
+        <View
+          className='at-col'
+          style={{ marginLeft: 10, paddingRight: 5, width: '50%' }}
+        >
+          <AtButton type='primary'>{pt.get().ticketDetail.addToOreo}</AtButton>
+        </View>
+        <View
+          className='at-col'
+          style={{ marginRight: 10, paddingLeft: 5, width: '50%' }}
+        >
+          <AtButton type='secondary'>{pt.get().ticketDetail.addNote}</AtButton>
+        </View>
+      </View>
+    ) : (
       <View
         className='at-row'
         style={{ paddingTop: 10, paddingBottom: 10, width: '100%' }}

src/pages/member/member.tsx

@@ -1,10 +1,33 @@
-import { View, Text } from '@tarojs/components';
+import { View } from '@tarojs/components';
 import { Component, ReactNode } from 'react';
+import { AtButton, AtCard, AtList } from 'taro-ui';
 import Taro from '@tarojs/taro';
-import type CustomTabBar from '../../custom-tab-bar';
+import pt from '@/plain-text';
+import { getUncompletedTicketList } from '@/service/uncompletedTicket';
+import type CustomTabBar from '@/custom-tab-bar';
+import { TicketListItem } from '@/components/TicketListItem/TicketListItem';
+import { RequestState } from '@/service';
+import moment from 'moment';
 import './member.scss';
 
-export default class MemberPage extends Component {
+interface UncompletedTicketState {
+  fixList: Array<TicketListItem>;
+  rs: RequestState;
+}
+
+export default class MemberPage extends Component<{}, UncompletedTicketState> {
+  state = {
+    fixList: [new TicketListItem(0, '', '', 1, moment(), false)],
+    rs: new RequestState(),
+  };
+
+  componentDidMount(): void {
+    Taro.setNavigationBarTitle({
+      title: pt.get().navBar.user.member,
+    });
+    getUncompletedTicketList(this);
+  }
+
   // 以下是TabBar相关
   pageCtx = Taro.getCurrentInstance().page;
   componentDidShow() {
@@ -14,9 +37,16 @@ export default class MemberPage extends Component {
   // 以上是TabBar相关
 
   render(): ReactNode {
+    if (this.state.rs.loading) {
+      return <View>loading</View>;
+    }
+    if (!this.state.rs.success) {
+      return <View>Failed</View>;
+    }
+    const fixListRenderer = this.state.fixList.map((item) => item.render());
     return (
       <View>
-        <Text>Member Page</Text>
+        <AtList>{fixListRenderer}</AtList>
       </View>
     );
   }

src/pages/repair/repair.tsx

@@ -186,7 +186,6 @@ export default class RepairPage extends Component<{}, RepairPageState> {
         />
       </AtCard>
     ));
-    console.log(ticketsRenderer);
     return (
       <View>
         <AtMessage />

src/pages/user/member/member.tsx

@@ -16,7 +16,7 @@ export default class MemberPage extends Component {
   };
   componentDidMount(): void {
     Taro.setNavigationBarTitle({
-      title: pt.get().navBar.user.member,
+      title: pt.get().navBar.user.memberLogin,
     });
   }
   handleChangeStuid(stuid: string) {

src/pages/user/myTicket/myTicket.tsx

@@ -16,7 +16,7 @@ interface MyTicketState {
 
 export default class MyTicketPage extends Component<{}, MyTicketState> {
   state = {
-    fixList: [new TicketListItem(0, '', '', 1, moment())],
+    fixList: [new TicketListItem(0, '', '', 1, moment(), false)],
     rs: new RequestState(),
   };
 

src/plain-text/MemberPage.ts

@@ -7,6 +7,9 @@ export interface MemberPageText {
     title: string;
     placeholder: string;
   };
+  uncompletedTicket: {
+    extra: string;
+  };
 }
 
 export const memberPageZhCn: MemberPageText = {
@@ -18,6 +21,9 @@ export const memberPageZhCn: MemberPageText = {
     title: '密码',
     placeholder: '与 EVA 统一身份认证一致',
   },
+  uncompletedTicket: {
+    extra: '详细信息',
+  },
 };
 
 export const memberPageEnUs: MemberPageText = {
@@ -29,4 +35,7 @@ export const memberPageEnUs: MemberPageText = {
     title: 'Password',
     placeholder: 'Consistent with EVA Auth',
   },
+  uncompletedTicket: {
+    extra: 'Details',
+  },
 };

src/plain-text/NavBarTitle.ts

@@ -3,9 +3,10 @@ export interface NavBarTitle {
   user: {
     myTicket: string;
     report: string;
-    member: string;
+    memberLogin: string;
     inform: string;
     about: string;
+    member: string;
   };
 }
 
@@ -16,7 +17,8 @@ export const navBarTitleZhCn: NavBarTitle = {
     report: '意见反馈',
     inform: '我的信息',
     about: '关于我们',
-    member: '协会成员登录',
+    memberLogin: '协会成员登录',
+    member: '协会成员',
   },
 };
 
@@ -27,6 +29,7 @@ export const navBarTitleEnUs: NavBarTitle = {
     report: 'Report',
     inform: 'Information',
     about: 'About us',
-    member: 'Member login',
+    memberLogin: 'Member login',
+    member: 'Member Page',
   },
 };

src/plain-text/TicketDetail.ts

@@ -11,6 +11,7 @@ export interface TicketDetailText {
   statusModifyMessage: Map<StatusStr, string>;
   descTitle: string;
   tookAway: string;
+  addToOreo: string;
   addNote: string;
 }
 
@@ -32,6 +33,7 @@ export const ticketDetailZhCn: TicketDetailText = {
   ]),
   descTitle: '问题描述',
   tookAway: '已取回',
+  addToOreo: '加入 Oreo',
   addNote: '添加评论',
 };
 
@@ -53,5 +55,6 @@ export const ticketDetailEnUs: TicketDetailText = {
   ]),
   descTitle: 'Problem description',
   tookAway: 'Already retrieved',
+  addToOreo: 'Add to Oreo',
   addNote: 'Add a comment',
 };

src/service/uncompletedTicket.ts

@@ -0,0 +1,45 @@
+import MemberPage from '@/pages/member/member';
+import Taro from '@tarojs/taro';
+import { TicketListItem } from '@/components/TicketListItem/TicketListItem';
+import moment from 'moment';
+import { getUrl } from '.';
+
+export function getUncompletedTicketList(that: MemberPage) {
+  Taro.request({
+    url: getUrl('/member/tickets/uncompleted'),
+    method: 'GET',
+    data: {
+      token: 'token_test',
+    },
+  })
+    .then((res) => {
+      let former = that.state.rs;
+      if (!res.data.success) {
+        that.setState({
+          rs: former.trans(false),
+        });
+        return;
+      }
+      that.setState({
+        rs: former.trans(true),
+        fixList: res.data.data.list.map(
+          (item) =>
+            new TicketListItem(
+              item.id,
+              item.device,
+              item.deviceModel,
+              item.status,
+              moment(item.createdTime),
+              true,
+            ),
+        ),
+      });
+    })
+    .catch((reason) => {
+      let former = that.state.rs;
+      that.setState({
+        rs: former.trans(false),
+      });
+      console.log(reason);
+    });
+}