明细

mock/project/main.js

+module.exports = {
+    // 排行榜信息
+    "GET /main/rankInfo.do": {
+        "code": "ut dolor",
+        "message": "quis sint velit commodo",
+        "success": true,
+        "data": {
+          "rankInfo": [
+            {
+              "index": 1,
+              "meFlag": "路人甲",
+              "score": 100,
+              "userName": "false"
+            },
+            {
+              "index": 2,
+              "meFlag": "路人乙",
+              "score": 200,
+              "userName": "false"
+            },
+            {
+              "index": 3,
+              "meFlag": "路人丙",
+              "score": 300,
+              "userName": "false"
+            },
+            {
+              "index": 4,
+              "meFlag": "小明",
+              "score": 400,
+              "userName": "true"
+            },
+            {
+              "index": 5,
+              "meFlag": "路人丁",
+              "score": 300,
+              "userName": "false"
+            }
+          ],
+          "myRank": {
+            "index": 4,
+            "userName": "小明",
+            "score": 400
+          }
+        }
+      },
+
+      // 青果明细
+      "GET /main/qgDetails.do": {
+        "success": true,
+        "message": "nulla veniam do culpa Lorem",
+        "code": "ut culpa qui",
+        "data": {
+          "list": [
+            {
+              "id": 1,
+              "changedType": "+",
+              "quantity": 100,
+              "extra": "dolore consectetur",
+              "createTimestamp": -10558650.718847722,
+              "playwayId": "nulla eiusmod deserunt anim",
+              "actionId": "labore anim aliqua ad velit"
+            },
+            {
+              "id": 2,
+              "changedType": "+",
+              "quantity": 100,
+              "extra": "quis aute occaecat irure",
+              "createTimestamp": 37304141.000525266,
+              "playwayId": "minim nisi velit commodo nulla",
+              "actionId": "voluptate elit magna dolor qui"
+            },
+            {
+              "id": 3,
+              "changedType": "+",
+              "quantity": 100,
+              "extra": "velit ex consequat",
+              "createTimestamp": 79460372.33933905,
+              "playwayId": "reprehenderit consectetur",
+              "actionId": "exercitation veniam tempor magna"
+            },
+            {
+              "id": 4,
+              "changedType": "+",
+              "quantity": 200,
+              "extra": "dolor elit Excepteur fugiat amet",
+              "createTimestamp": -74285506.14657179,
+              "playwayId": "elit id qui labore non",
+              "actionId": "Excepteur consectetur"
+            },
+            {
+              "id": 5,
+              "changedType": "-",
+              "quantity": 100,
+              "extra": "magna exercitation",
+              "createTimestamp": 84285291.15363145,
+              "playwayId": "id ut",
+              "actionId": "sed ex enim Duis"
+            }
+          ],
+          "haveMore": true
+        },
+        "timeStamp": -87748265.39137948
+      }
+}
\ No newline at end of file

src/api/index.js

@@ -16,6 +16,12 @@ const API = generateAPI({
 		withToken: true,  // 携带token
 	},
 
+  // 获取排行榜信息
+  getRankInfo: "main/rankInfo.do",
+
+  // 获取青果明细信息
+  getQGDetails: "main/qgDetails.do",
+
   // cookie丢失-临时保存cookie
   tempSaveCookie: {
     uri: "/autoLogin/tempSaveCookie",

src/pages/detailpage/detailpage.jsx

@@ -4,15 +4,33 @@ import React from 'react';
 import { observer } from 'mobx-react';
 import './detailpage.less';
 import { Button } from '@src/components/Button';
-import { _asyncThrottle } from '@src/utils/utils';
+import { _asyncThrottle, dateFormatter } from '@src/utils/utils';
 import store from '@src/store';
 import { PAGE_MAP } from '@src/utils/constants';
+import API from '@src/api';
 
 
 @observer
 class Detailpage extends React.Component {
   constructor(props) {
     super(props);
+    this.state = {
+      detailInfo: {}
+    }
+  }
+
+  componentDidMount() {
+    this.getDetail();
+  }
+
+  // 明细
+  getDetail = async() => {
+    const { success, data } = await API.getQGDetails();
+    if (success) {
+      this.setState({
+        detailInfo: data || {}
+      })
+    }
   }
 
   back = _asyncThrottle(() => {
@@ -20,6 +38,7 @@ class Detailpage extends React.Component {
   })
 
   render() {
+    const list = this.state.detailInfo.list || [];
     return (
       <div className="detailpage modal_center">
         <span className="bg"></span>
@@ -27,14 +46,18 @@ class Detailpage extends React.Component {
         <div className="list">
           <span className="border"></span>
           <span className="l_bg"></span>
-          {/* arrary */}
-          <div className="sample">
-            <span className="name">完成200分获得青果</span>
-            <span className="time">2025.03.25</span>
-            <span className="receive">+1000000000</span>
-            <span className="line"></span>
-          </div>
-          
+          {Array.isArray(list) && list.length > 0 ? list.map((item, index) => {
+            const{ changedType, quantity, createTimestamp } = item;
+            return (
+              <div className="sample" key={index}>
+                <span className="name">完成{quantity}分获得青果</span>
+                <span className="time">{dateFormatter(createTimestamp, "yyyy-MM-dd")}</span>
+                <span className="receive">+1000000000</span>
+                <span className="line"></span>
+              </div>
+            )
+          }) : null}
+
         </div>
         <span className="headline"></span>
       </div>

src/pages/detailpage/detailpage.less

@@ -48,7 +48,8 @@
       height: 95px;
       left: 51px;
       top: 79px;
-      position: absolute;
+      margin-top: 15px;
+      position: relative;
       .name {
         width: 460px;
         height: 34px;

src/pages/rankpage/rankpage.less

@@ -16,7 +16,7 @@
   .headnline {
     width: 464px;
     height: 140px;
-    left: 141px;
+    left: 143px;
     top: 57px;
     position: absolute;
     .sparkBg("rankPage/headnline.png");
@@ -24,7 +24,7 @@
   .tip {
     width: 392px;
     height: 33px;
-    left: 191px;
+    left: 179px;
     top: 171px;
     position: absolute;
     font-size: 34px;

src/store/index.js

@@ -20,7 +20,7 @@ const store = makeAutoObservable({
 
     myPrize: "myPrize", // TODO 举例子 新宿台奖品页
     index: PAGE_MAP.LOADING_PAGE,
-  }[skinId] || PAGE_MAP.RANK_PAGE,
+  }[skinId] || PAGE_MAP.DETAIL_PAGE,
 
   pageData: {},