完善分页逻辑

对接查询奖励时间币记录接口

public/money.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="1591090899503" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2747" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><defs><style type="text/css"></style></defs><path d="M292.790857 242.468571l58.148572 11.337143a18.285714 18.285714 0 1 1-7.021715 35.84l-93.988571-18.285714a18.285714 18.285714 0 0 1-9.472-30.902857A382.793143 382.793143 0 0 1 512 128c212.077714 0 384 171.922286 384 384a382.902857 382.902857 0 0 1-29.147429 147.017143 18.285714 18.285714 0 1 1-33.792-14.043429A346.331429 346.331429 0 0 0 859.428571 512 347.428571 347.428571 0 0 0 512 164.571429a345.965714 345.965714 0 0 0-219.209143 77.897142z m237.494857 203.958858v10.715428H585.142857a18.285714 18.285714 0 1 1 0 36.571429h-54.857143v36.571428H585.142857a18.285714 18.285714 0 1 1 0 36.571429h-54.857143V658.285714a18.285714 18.285714 0 1 1-36.571428 0v-91.428571H438.857143a18.285714 18.285714 0 1 1 0-36.571429h54.857143v-36.571428H438.857143a18.285714 18.285714 0 1 1 0-36.571429h54.857143v-10.715428l-67.803429-67.766858a18.285714 18.285714 0 0 1 25.892572-25.892571L512 413.001143l60.196571-60.233143a18.285714 18.285714 0 0 1 25.892572 25.892571L530.285714 446.427429z m142.774857 323.803428a18.285714 18.285714 0 1 1 7.021715-35.913143l93.988571 18.322286a18.285714 18.285714 0 0 1 9.472 30.902857A382.793143 382.793143 0 0 1 512 896C299.922286 896 128 724.077714 128 512c0-51.090286 9.984-100.790857 29.147429-147.017143a18.285714 18.285714 0 1 1 33.792 14.043429A346.331429 346.331429 0 0 0 164.571429 512a347.428571 347.428571 0 0 0 347.428571 347.428571 345.965714 345.965714 0 0 0 219.209143-77.897142l-58.148572-11.337143z" p-id="2748"></path></svg>

src/Active.tsx

@@ -3,7 +3,15 @@ import {Button, Form, Image, ListGroup, Tab, Table, Tabs} from "react-bootstrap"
 import {ManagerActivity, PageProps} from "./entity";
 import {JSONResponse, Method, request} from "./interface";
 import {API, prefix} from "./api";
-import {EmptyBodyTransform, FindActivityRes, FindActivityTransform, PageDataMessage, SimpleMessage} from "./result";
+import {
+    EmptyBodyTransform,
+    FindActivityRes,
+    FindActivityTransform,
+    FindTimeScoreRes,
+    PageDataMessage,
+    ScoreTransform,
+    SimpleMessage
+} from "./result";
 import {MyDialog} from "./ui/MyDialog";
 import moment from "moment";
 import {Input} from "./ui/InputGroup";
@@ -143,7 +151,7 @@ export class Active extends React.Component<any, {
                                         {active.helpUser != null ?
                                             <ListGroup>
                                                 {active.helpUser.map((userId,index) =>
-                                                    <ListGroup.Item key={'item'+index}>{userId}</ListGroup.Item>)}
+                                                    <ListGroup.Item key={'item'+index}>{userId}<Image onClick={()=>this.loadScore(userId,active.activityId)} className="timeScore" src={"money.svg"}/></ListGroup.Item>)}
                                             </ListGroup>:'无'
                                         }
                                     </td>
@@ -200,4 +208,47 @@ export class Active extends React.Component<any, {
                 }
         })
     }
+
+    /*
+    加载时间币
+     */
+    private loadScore(userId: string, activityId: number) {
+        let that=this
+        request(API.account.timeScore,Method.GET,{
+            userId:userId,
+            activityId:String(activityId)
+        },new ScoreTransform(),function (res:FindTimeScoreRes) {
+            switch (res.customResult) {
+                case SimpleMessage.ok:
+                    if(res.timeScore==null){
+                        that.setState({
+                            tipContent:<h3 className="text-center text-danger">该用户没有结算时间币记录</h3>
+                        })
+                    }else {
+                        that.setState({
+                            tipContent: <Table>
+                                <thead>
+                                    <tr>
+                                        <th>结算时间</th>
+                                        <th>时间币</th>
+                                    </tr>
+                                </thead>
+                                <tbody>
+                                    <tr>
+                                        <td>{moment(res.timeScore?.createTime).format("YYYY-MM-DD HH:mm:ss")}</td>
+                                        <td>{res.timeScore?.timeScore}</td>
+                                    </tr>
+                                </tbody>
+                            </Table>
+                        })
+                    }
+                    break
+                case SimpleMessage.fail:
+                    that.setState({
+                        tipContent:<h3 className="text-center text-danger">时间币查询失败，请联系管理员</h3>
+                    })
+                    break
+            }
+        })
+    }
 }

src/App.tsx

@@ -2,13 +2,10 @@ import React from 'react';
 import './App.css';
 import 'bootstrap/dist/css/bootstrap.min.css';
 import {Login} from './account/Login';
-import {instanceOf} from 'prop-types';
 import {Cookies, withCookies} from 'react-cookie';
 import {Main} from "./Main";
 import {Register} from "./account/Register";
 import {manager_cookie} from "./account/PropCookie";
-import {Method, request} from "./interface";
-import {API} from "./api";
 import {LoginRes} from "./result";
 
 

src/Main.tsx

@@ -1,11 +1,9 @@
 import React from "react";
-import {Navbar,Nav,Button} from "react-bootstrap";
+import {Nav, Navbar} from "react-bootstrap";
 import {Manager} from "./Manager";
 import {User} from "./User";
 import {Active} from "./Active";
 import {Cookies} from "react-cookie";
-import {manager_cookie} from "./account/PropCookie";
-import {fontEnd} from "./api";
 
 /**
  * 菜单标记
@@ -40,7 +38,17 @@ export class Main extends React.Component<
 
     //获取菜单名颜色
     getMenuColor(menu:Menu){
-        return this.state.menu===menu?"black":"blue"
+        if(this.state.menu===menu){
+            return {
+                color:"white",
+                backgroundColor:"blue"
+            }
+        }else{
+            return {
+                color:"blue",
+                backgroundColor: "white"
+            }
+        }
     }
 
     //切换菜单
@@ -65,22 +73,26 @@ export class Main extends React.Component<
         }
     }
 
+
+
     render() {
 
 
         return (
             <div>
                 <Navbar bg="light">
-                    <Nav className="mr-auto">
+                    <Navbar.Brand>互联网+互助平台</Navbar.Brand>
-                        <Nav.Link style={{color:this.getMenuColor(Menu.manager)}} onClick={()=>this.changeMenu(Menu.manager)}>管理员管理</Nav.Link>
+                    <Nav variant="pills" defaultActiveKey="index" className="w-100">
-                        <Nav.Link style={{color:this.getMenuColor(Menu.user)}} onClick={()=>this.changeMenu(Menu.user)}>用户管理</Nav.Link>
+                        <Nav.Item className="col-2">
-                        <Nav.Link style={{color:this.getMenuColor(Menu.active)}} onClick={()=>this.changeMenu(Menu.active)}>活动管理</Nav.Link>
+                            <Nav.Link style={this.getMenuColor(Menu.manager)} onClick={()=>this.changeMenu(Menu.manager)}>管理员管理</Nav.Link>
+                        </Nav.Item>
+                        <Nav.Item className="col-2">
+                            <Nav.Link style={this.getMenuColor(Menu.user)} onClick={()=>this.changeMenu(Menu.user)}>用户管理</Nav.Link>
+                        </Nav.Item>
+                        <Nav.Item className="col-2">
+                            <Nav.Link style={this.getMenuColor(Menu.active)} onClick={()=>this.changeMenu(Menu.active)}>活动管理</Nav.Link>
+                        </Nav.Item>
                     </Nav>
-                    <Navbar.Text>
-                        欢迎管理员{this.props.cookies.get(manager_cookie)}登录
-                    </Navbar.Text>
-                    <Button variant="outline-info" className="ml-3" onClick={()=>window.location.href=fontEnd}>切换前台</Button>
-                    <Button variant="outline-primary" className="ml-3" onClick={()=>this.props.logout()}>注销登录</Button>
                 </Navbar>
                 {this.state.subMenu}
             </div>

src/User.tsx

@@ -9,6 +9,7 @@ import {MyDialog} from "./ui/MyDialog";
 import {Address} from "./ui/Address";
 import {UploadImg} from "./ui/UploadImg";
 import {Page} from "./ui/Page";
+
 /**
  * 图片尺寸限制
  */

src/account/Register.tsx

@@ -7,6 +7,7 @@ import {API} from "../api";
 import {RegisterRes, RegisterTransform} from "../result";
 import {MyDialog} from "../ui/MyDialog";
 import {register} from '../public'
+
 /**
  * 注册
  */

src/api.ts

@@ -29,7 +29,9 @@ export const API={
         //查询活动信息
         findActivity:prefix.manager+'/find/activity',
         //修改活动信息
-        updateActivity:prefix.manager+'/update/'
+        updateActivity:prefix.manager+'/update/',
+        //加载时间币
+        timeScore:prefix.manager+'/score'
     },
     user:{
 

src/entity.ts

@@ -2,7 +2,6 @@
 import {PropCookie} from "./account/PropCookie";
 
 
-
 export interface ManagerEntity {
     managerId:string;
 }
@@ -200,3 +199,8 @@ export interface OnChangeAddress {
     value?:string;
 }
 
+export interface TimeScore {
+    createTime:number;
+    timeScore:number;
+}
+

src/index.css

@@ -27,3 +27,11 @@ code {
   height: 20px;
   width: 20px;
 }
+
+/**
+时间币图标尺寸
+ */
+.timeScore{
+  width: 30px;
+  height: 30px;
+}

src/public.tsx

@@ -1,4 +1,3 @@
-
 //注册
 import {JSONResponse, Method, request} from "./interface";
 import {API} from "./api";

src/result.ts

@@ -1,6 +1,5 @@
-import {JSONResponse, Result, TransformData} from "./interface";
+import {JSONResponse, TransformData} from "./interface";
-import {ManagerActivity, ManagerEntity, PageProps, UserEntity} from "./entity";
+import {ManagerActivity, ManagerEntity, PageProps, TimeScore, UserEntity} from "./entity";
-import {User} from "./User";
 
 /**
  * 空body响应
@@ -133,3 +132,18 @@ export class FindActivityTransform extends PageDataTransform<FindActivityRes>{
     }
 
 }
+
+export class FindTimeScoreRes extends JSONResponse<SimpleMessage>{
+    timeScore?:TimeScore;
+}
+
+export class ScoreTransform extends TransformData<SimpleMessage, FindTimeScoreRes>{
+    protected newObject(): FindTimeScoreRes {
+        return new FindTimeScoreRes();
+    }
+
+
+    protected transformBody(data: any) {
+        this.target.timeScore=data.body
+    }
+}

src/ui/MyDialog.tsx

@@ -1,7 +1,7 @@
 import React from "react";
 import Dialog from "@material-ui/core/Dialog";
 import Draggable from "react-draggable";
-import {Paper, styled, withWidth} from "@material-ui/core";
+import {Paper, styled} from "@material-ui/core";
 import {MyDialogProps} from "../entity";
 import {CloseDialog} from "./CloseDialog";