奖品页

mock/project/prize.js

+module.exports = {
+  "GET /records.query": {
+    data: [
+      {
+        extra: {
+          name: "兑换1--专享优惠红包1.52元兑换1--专享优惠红包1.52元兑换1--专享优惠红包1.52元",
+          icon: "//yun.duiba.com.cn/polaris/专享优惠1.52元(200 X 200).074ee5f3b15eb1bcb942f67fbc93f9e331b6da56.png",
+          type: 1,
+          sendCount: 1,
+        },
+        gmtCreate: 1712028402000,
+        id: 500713153,
+        prizeId: "gfhf",
+        strategyId: "ru_exchange_1",
+      },
+      {
+        extra: { name: "狂欢礼金", type: 1, sendCount: 1 },
+        gmtCreate: 1711958701000,
+        id: 500712753,
+        prizeId: "fhg",
+        strategyId: "ru_3",
+      },
+      {
+        extra: { name: "狂欢礼金", type: 1, sendCount: 1 },
+        gmtCreate: 1711958693000,
+        id: 500712752,
+        prizeId: "kjf",
+        strategyId: "ru_3",
+      },
+      {
+        extra: { name: "狂欢礼金", type: 1, sendCount: 1 },
+        gmtCreate: 1711958672000,
+        id: 500712751,
+        prizeId: "tdhet",
+        strategyId: "ru_3",
+      },
+      {
+        extra: { name: "答题", type: 1, sendCount: 1 },
+        gmtCreate: 1711952969000,
+        id: 500712559,
+        prizeId: "sp_card_question",
+        strategyId: "ru_3",
+      },
+      {
+        extra: { name: "答题", type: 1, sendCount: 1 },
+        gmtCreate: 1711952962000,
+        id: 500712557,
+        prizeId: "sp_card_question",
+        strategyId: "ru_3",
+      },
+      {
+        extra: { name: "答题", type: 1, sendCount: 1 },
+        gmtCreate: 1711952955000,
+        id: 500712556,
+        prizeId: "sp_card_question",
+        strategyId: "ru_3",
+      },
+      {
+        extra: { name: "答题", type: 1, sendCount: 1 },
+        gmtCreate: 1711952947000,
+        id: 500712555,
+        prizeId: "sp_card_question",
+        strategyId: "ru_3",
+      },
+      {
+        extra: { name: "答题", type: 1, sendCount: 1 },
+        gmtCreate: 1711952938000,
+        id: 500712554,
+        prizeId: "sp_card_question",
+        strategyId: "ru_3",
+      },
+      {
+        extra: { name: "答题", type: 1, sendCount: 1 },
+        gmtCreate: 1711952926000,
+        id: 500712553,
+        prizeId: "sp_card_question",
+        strategyId: "ru_3",
+      },
+      {
+        extra: { name: "答题", type: 1, sendCount: 1 },
+        gmtCreate: 1711952855000,
+        id: 500712552,
+        prizeId: "sp_card_question",
+        strategyId: "ru_3",
+      },
+      {
+        extra: { name: "视频", type: 1, sendCount: 1 },
+        gmtCreate: 1711952850000,
+        id: 500712551,
+        prizeId: "sp_card_video",
+        strategyId: "ru_3",
+      },
+      {
+        extra: { name: "答题", type: 1, sendCount: 1 },
+        gmtCreate: 1711952829000,
+        id: 500712550,
+        prizeId: "sp_card_question",
+        strategyId: "ru_3",
+      },
+      {
+        extra: { name: "答题", type: 1, sendCount: 1 },
+        gmtCreate: 1711952794000,
+        id: 500712549,
+        prizeId: "sp_card_question",
+        strategyId: "ru_3",
+      },
+      {
+        extra: { name: "答题", type: 1, sendCount: 1 },
+        gmtCreate: 1711952784000,
+        id: 500712548,
+        prizeId: "sp_card_question",
+        strategyId: "ru_3",
+      },
+      {
+        extra: { name: "视频", type: 1, sendCount: 1 },
+        gmtCreate: 1711952775000,
+        id: 500712546,
+        prizeId: "sp_card_video",
+        strategyId: "ru_3",
+      },
+      {
+        extra: { name: "答题", type: 1, sendCount: 1 },
+        gmtCreate: 1711952741000,
+        id: 500712545,
+        prizeId: "sp_card_question",
+        strategyId: "ru_3",
+      },
+      {
+        extra: {
+          name: "18.8",
+          icon: "//yun.duiba.com.cn/polaris/18.8元(200 X 200).531f220056fe041aa59409d1146380909677d9b6.png",
+          type: 1,
+          sendCount: 1,
+        },
+        gmtCreate: 1711952416000,
+        id: 500712514,
+        prizeId: "sp_invite_prize_1880",
+        strategyId: "ru_invite_prize",
+      },
+      {
+        extra: { name: "一起享优惠", type: 1, sendCount: 1 },
+        gmtCreate: 1711952416000,
+        id: 500712513,
+        prizeId: "sp_card_invite",
+        strategyId: "ru_2",
+      },
+      {
+        extra: { name: "狂欢礼金", type: 1, sendCount: 1 },
+        gmtCreate: 1711952408000,
+        id: 500712512,
+        prizeId: "sp_card_gold",
+        strategyId: "ru_2",
+      },
+      {
+        extra: { name: "狂欢礼金", type: 1, sendCount: 1 },
+        gmtCreate: 1711952279000,
+        id: 500712505,
+        prizeId: "sp_card_gold",
+        strategyId: "ru_2",
+      },
+      {
+        extra: { name: "答题类型", type: 1, sendCount: 1 },
+        gmtCreate: 1711952279000,
+        id: 500712504,
+        prizeId: "sp_card_question",
+        strategyId: "ru_2",
+      },
+      {
+        extra: { name: "狂欢礼金", type: 1, sendCount: 1 },
+        gmtCreate: 1711952246000,
+        id: 500712503,
+        prizeId: "sp_card_gold",
+        strategyId: "ru_2",
+      },
+      {
+        extra: { name: "狂欢礼金", type: 1, sendCount: 1 },
+        gmtCreate: 1711952239000,
+        id: 500712502,
+        prizeId: "sp_card_gold",
+        strategyId: "ru_2",
+      },
+      {
+        extra: { name: "狂欢礼金", type: 1, sendCount: 1 },
+        gmtCreate: 1711952227000,
+        id: 500712500,
+        prizeId: "sp_card_gold",
+        strategyId: "ru_2",
+      },
+      {
+        extra: { name: "狂欢礼金", type: 1, sendCount: 1 },
+        gmtCreate: 1711952178000,
+        id: 500712499,
+        prizeId: "sp_card_gold",
+        strategyId: "ru_2",
+      },
+      {
+        extra: { name: "狂欢礼金", type: 1, sendCount: 1 },
+        gmtCreate: 1711952135000,
+        id: 500712498,
+        prizeId: "sp_card_gold",
+        strategyId: "ru_2",
+      },
+      {
+        extra: { name: "狂欢礼金", type: 1, sendCount: 1 },
+        gmtCreate: 1711952083000,
+        id: 500712497,
+        prizeId: "sp_card_gold",
+        strategyId: "ru_2",
+      },
+      {
+        extra: { name: "狂欢礼金", type: 1, sendCount: 1 },
+        gmtCreate: 1711952031000,
+        id: 500712495,
+        prizeId: "sp_card_gold",
+        strategyId: "ru_2",
+      },
+      {
+        extra: { name: "狂欢礼金", type: 1, sendCount: 1 },
+        gmtCreate: 1711951183000,
+        id: 500712485,
+        prizeId: "sp_card_gold",
+        strategyId: "ru_2",
+      },
+      {
+        extra: { name: "狂欢礼金", type: 1, sendCount: 1 },
+        gmtCreate: 1711951057000,
+        id: 500712484,
+        prizeId: "sp_card_gold",
+        strategyId: "ru_2",
+      },
+      {
+        extra: { name: "狂欢礼金", type: 1, sendCount: 1 },
+        gmtCreate: 1711951007000,
+        id: 500712483,
+        prizeId: "sp_card_gold",
+        strategyId: "ru_2",
+      },
+      {
+        extra: { name: "狂欢礼金", type: 1, sendCount: 1 },
+        gmtCreate: 1711950743000,
+        id: 500712478,
+        prizeId: "sp_card_gold",
+        strategyId: "ru_2",
+      },
+      {
+        extra: { name: "狂欢礼金", type: 1, sendCount: 1 },
+        gmtCreate: 1711950711000,
+        id: 500712477,
+        prizeId: "sp_card_gold",
+        strategyId: "ru_2",
+      },
+      {
+        extra: { name: "狂欢礼金", type: 1, sendCount: 1 },
+        gmtCreate: 1711950652000,
+        id: 500712476,
+        prizeId: "sp_card_gold",
+        strategyId: "ru_2",
+      },
+      {
+        extra: { name: "狂欢礼金", type: 1, sendCount: 1 },
+        gmtCreate: 1711950567000,
+        id: 500712475,
+        prizeId: "sp_card_gold",
+        strategyId: "ru_2",
+      },
+      {
+        extra: { name: "狂欢礼金", type: 1, sendCount: 1 },
+        gmtCreate: 1711943551000,
+        id: 500712453,
+        prizeId: "sp_card_gold",
+        strategyId: "ru_2",
+      },
+      {
+        extra: { name: "答题类型", type: 1, sendCount: 1 },
+        gmtCreate: 1711943535000,
+        id: 500712451,
+        prizeId: "sp_card_question",
+        strategyId: "ru_2",
+      },
+      {
+        extra: { name: "狂欢礼金", type: 1, sendCount: 1 },
+        gmtCreate: 1711943271000,
+        id: 500712444,
+        prizeId: "sp_card_gold",
+        strategyId: "ru_2",
+      },
+      {
+        extra: { name: "狂欢礼金", type: 1, sendCount: 1 },
+        gmtCreate: 1711943245000,
+        id: 500712443,
+        prizeId: "sp_card_gold",
+        strategyId: "ru_2",
+      },
+      {
+        extra: { name: "狂欢礼金", type: 1, sendCount: 1 },
+        gmtCreate: 1711943178000,
+        id: 500712442,
+        prizeId: "sp_card_gold",
+        strategyId: "ru_2",
+      },
+      {
+        extra: { name: "答题类型", type: 1, sendCount: 1 },
+        gmtCreate: 1711942669000,
+        id: 500712440,
+        prizeId: "sp_card_question",
+        strategyId: "ru_2",
+      },
+      {
+        extra: { name: "答题类型", type: 1, sendCount: 1 },
+        gmtCreate: 1711942150000,
+        id: 500712432,
+        prizeId: "sp_card_question",
+        strategyId: "ru_2",
+      },
+      {
+        extra: { name: "狂欢礼金", type: 1, sendCount: 1 },
+        gmtCreate: 1711942121000,
+        id: 500712431,
+        prizeId: "sp_card_gold",
+        strategyId: "ru_2",
+      },
+      {
+        extra: { name: "答题类型", type: 1, sendCount: 1 },
+        gmtCreate: 1711941920000,
+        id: 500712418,
+        prizeId: "sp_card_question",
+        strategyId: "ru_2",
+      },
+    ],
+    success: true,
+    timeStamp: 1712029700095,
+  },
+};

src/app.jsx

@@ -12,16 +12,16 @@ import MD from "../MD"; // 埋点
 MD();
 
 // 此处为spark-cli动态生成
-import LoadingDemo from "@src/pages/loadingDemo/loadingDemo";
-import HomeDemo from "@src/pages/homeDemo/homeDemo";
 import { PAGE_MAP } from "./utils/constants";
+import Prizepage from "./pages/prizepage/prizepage";
+import Creditspage from "./pages/creditspage/creditspage";
 
 /**
  * 所有页面场景
  */
 const pageMap = {
-  [PAGE_MAP.LOADING_PAGE]: <LoadingDemo />,
-  [PAGE_MAP.HOME_PAGE]: <HomeDemo />,
+  [PAGE_MAP.PRIZE_PAGE]: <Prizepage />,
+  [PAGE_MAP.CREDITS_PAGE]: <Creditspage />,
 };
 
 @observer

src/assetList.json

-{"preLoadImg":[],"asyncLoadImg":[]}
\ No newline at end of file
+{"preLoadImg":[],"asyncLoadImg":["CreditsPage/back.png","CreditsPage/bg.png","CreditsPage/creditsbg.png","CreditsPage/line.png","prizePage/back.png","prizePage/bg.png","prizePage/gobtn.png","prizePage/itembg.png","prizePage/prizebg.png"]}
\ No newline at end of file

src/pages/creditspage/creditspage.jsx

+'use strict';
+
+import React from 'react';
+import { observer } from 'mobx-react';
+import './creditspage.less';
+import { dateFormatter } from '@src/utils/utils';
+
+@observer
+class Creditspage extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      list: [
+        {
+          name: "dsfifnbsikd",
+          time: "1714307625657",
+          num: 20
+        },
+        {
+          name: "红烧鸡腿戒烟戒酒你发过吗工卡突然",
+          time: "1714307625657",
+          num: -20
+        },
+        {
+          name: "dsfifnbsikd",
+          time: "1714307625657",
+          num: 20
+        },
+        {
+          name: "dsfifnbsikd",
+          time: "1714307625657",
+          num: 20
+        },
+        {
+          name: "dsfifnbsikd",
+          time: "1714307625657",
+          num: 20
+        },
+        {
+          name: "dsfifnbsikd",
+          time: "1714307625657",
+          num: 20
+        },
+        {
+          name: "dsfifnbsikd",
+          time: "1714307625657",
+          num: 20
+        },
+        {
+          name: "SRG虽然国华人寿微人大刚发搭嘎放大后干哈特冶突然而饿死防守打法",
+          time: "1714307625657",
+          num: 20
+        },
+        {
+          name: "dsfifnbsikd",
+          time: "1714307625657",
+          num: 20
+        },
+        {
+          name: "dsfifnbsikd",
+          time: "1714307625657",
+          num: 20
+        },
+        {
+          name: "dsfifnbsikd",
+          time: "1714307625657",
+          num: 20
+        },
+        {
+          name: "三个人撒个大货车下半年有可燃几哈虽然高S",
+          time: "1714307625657",
+          num: 20
+        },
+        {
+          name: "哭开头语看见他巨化股份对吧v",
+          time: "1714307625657",
+          num: 20
+        },
+        {
+          name: "双法防",
+          time: "1714307625657",
+          num: 20
+        },
+        {
+          name: "防护服规划法规",
+          time: "1714307625657",
+          num: 20
+        },
+        {
+          name: "kjhlku",
+          time: "1714307625657",
+          num: 20
+        },
+        {
+          name: "dsfsds",
+          time: "1714307625657",
+          num: 20
+        },
+        {
+          name: "hfgdhfd",
+          time: "1714307625657",
+          num: 20
+        }
+      ]
+    }
+  }
+  render() {
+    return (
+      <div className='pagebox'>
+        <div className="creditspage modal_center">
+          <span className="bg"></span>
+          <span className="back"></span>
+          <span className="creditsbg"></span>
+          <span className="credits">124432</span>
+          <div className="showlist" style={{ height: `${(1106 - 20 - (1624 - document.body.clientHeight * 750 / document.body.clientWidth) / 2) / 100}rem` }}>
+            {
+              this.state.list?.map((item,index) => {
+                return (
+                  <div className="item" key={"credits"+index}>
+                    <span className="itemtime">{dateFormatter(item.time,'yyyy.MM.dd hh:mm')} </span>
+                    <span className="itemname">{item.name}</span>
+                    {
+                      item.num>0?<span className="addshow">+{item.num}</span>
+                      :<span className="cutshow">{item.num}</span>
+                    }
+                    <span className="line"></span>
+                  </div>
+                )
+              })
+            }
+
+          </div>
+        </div>
+      </div>
+    );
+  }
+}
+export default Creditspage;

src/pages/creditspage/creditspage.less

+@import "../../res.less";
+
+.pagebox {
+  width: 100vw;
+  height: 100vh;
+  left: 0px;
+  top: 0px;
+  position: absolute;
+  overflow: hidden;
+}
+
+.creditspage {
+  width: 750px;
+  height: 1624px;
+  left: 0px;
+  top: 0px;
+  position: absolute;
+
+  .bg {
+    width: 750px;
+    height: 1624px;
+    left: 0px;
+    top: 0px;
+    position: absolute;
+    .sparkBg("CreditsPage/bg.png");
+  }
+
+  .back {
+    width: 62px;
+    height: 61px;
+    left: 28px;
+    top: 143px;
+    position: absolute;
+    .sparkBg("CreditsPage/back.png");
+  }
+
+  .creditsbg {
+    width: 354px;
+    height: 196px;
+    left: 198px;
+    top: 267px;
+    position: absolute;
+    .sparkBg("CreditsPage/creditsbg.png");
+  }
+
+  .credits {
+    width: 354px;
+    height: 38px;
+    left: 198px;
+    top: 372px;
+    text-align: center;
+    position: absolute;
+    font-size: 51px;
+    line-height: 38px;
+    color: rgba(241, 61, 61, 1);
+  }
+
+  .showlist {
+    width: 699px;
+    height: 110px;
+    left: 26px;
+    top: 518px;
+    position: absolute;
+    overflow-y: scroll;
+
+    .item {
+      width: 699px;
+      height: 110px;
+      left: 0px;
+      top: 0px;
+      position: relative;
+      display: block;
+
+      .itemtime {
+        width: 363px;
+        height: 15px;
+        left: 41px;
+        top: 48px;
+        position: absolute;
+        font-size: 20px;
+        line-height: 15px;
+        color: rgba(158, 158, 158, 1);
+      }
+
+      .itemname {
+        width: 531px;
+        height: 50px;
+        left: 40px;
+        top: 0px;
+        position: absolute;
+        font-size: 30px;
+        line-height: 29px;
+        color: rgba(41, 41, 41, 1);
+        overflow-x: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+      }
+
+      .cutshow {
+        width: 105px;
+        height: 21px;
+        left: 575px;
+        top: 21px;
+        position: absolute;
+        font-size: 28px;
+        line-height: 21px;
+        color: rgba(110, 70, 38, 1);
+      }
+
+      .addshow {
+        width: 105px;
+        height: 21px;
+        left: 575px;
+        top: 21px;
+        position: absolute;
+        font-size: 28px;
+        line-height: 21px;
+        color: rgba(239, 59, 59, 1);
+      }
+
+      .line {
+        width: 699px;
+        height: 2px;
+        left: 0px;
+        top: 108px;
+        position: absolute;
+        opacity: 0.16;
+        .sparkBg("CreditsPage/line.png");
+      }
+    }
+  }
+}
\ No newline at end of file

src/pages/homeDemo/homeDemo.jsx

-/** 
- * 活动首页demo 开发自行修改或替换
- */
-
-'use strict';
-import React from 'react';
-import { observer } from 'mobx-react';
-import './homeDemo.less';
-
-@observer
-class HomeDemo extends React.Component {  
-  constructor(props) {
-    super(props);
-  }
-  render() {
-    return (
-      <div className="homeDemo">
-        当前为活动首页
-      </div>
-    );
-  }
-}
-
-export default HomeDemo;

src/pages/homeDemo/homeDemo.less

-@import "../../res.less";
-.homeDemo {}

src/pages/loadingDemo/loadingDemo.jsx

-/**
- * loading页demo 开发自行修改或替换
- */
-"use strict";
-
-import React from "react";
-import { observer } from "mobx-react";
-import store from "../../store/index";
-import "./loadingDemo.less";
-import { preloadAsset } from "@src/utils/preload1.3.js";
-import assetList from "@src/assetList.json";
-import { PAGE_MAP } from "@src/utils/constants";
-@observer
-class LoadingDemo extends React.Component {
-  constructor(props) {
-    super(props);
-    this.curPercentage = 0;
-    this.intervalId = "";
-    this.isEvenLoad = true; // 是否匀速加载进度条
-  }
-  componentDidMount() {
-    this.preloadAssetInit();
-  }
-  /**
-   * 资源预加载
-   */
-  preloadAssetInit = async () => {
-    const imageList = assetList.preLoadImg;
-    preloadAsset(imageList, 3, (progress) => this.onLoadingProgress(progress)).then(() => {
-      // 预加载资源完成
-      // 异步加载默认关闭
-      // setTimeout(() => {
-      //   // 异步加载资源开始
-      //   const asyncImageList = assetList.asyncLoadImg;
-      //   preloadAsset(asyncImageList, 1)
-      // }, 5000);
-    });
-  };
-  /**
-   * 资源加载进度回调
-   * @param {*} index
-   * @param {*} progress
-   */
-  onLoadingProgress = (progress) => {
-    const percentage = Math.floor(progress * 100);
-    console.log("progress", percentage);
-    if (this.isEvenLoad) {
-      this.setEvenProgress(percentage);
-    } else {
-      this.setProgress(percentage);
-    }
-  };
-  /**
-   * 非匀速加载进度
-   * @param {*} percentage
-   */
-  setProgress = (percentage) => {
-    this.progressBar.style.transform = `translateX(${percentage - 100}%)`;
-    if (percentage == 100) {
-      setTimeout(() => {
-        store.changePage(PAGE_MAP.HOME_PAGE); // 跳转页面
-      }, 500);
-    }
-  };
-
-  /**
-   * 以1%匀速加载进度
-   * @param {*} percentage
-   */
-  setEvenProgress = (percentage) => {
-    this.intervalId && clearInterval(this.intervalId);
-    let curPercentage = this.curPercentage;
-    this.intervalId = setInterval(() => {
-      if (curPercentage >= percentage) {
-        clearInterval(this.intervalId);
-        percentage == 100 && store.changePage(PAGE_MAP.HOME_PAGE); // 跳转页面
-        return;
-      }
-      curPercentage += 1;
-      this.curPercentage = curPercentage;
-      this.progressBar.style.transform = `translateX(${curPercentage - 100}%)`;
-    }, 10);
-  };
-
-  render() {
-    return (
-      <div className="loadingDemo">
-        <span className="bg174"></span>
-        <div className="progressBar">
-          <span className="atBottom"></span>
-          <span className="loadingBg">
-            <span className="above" ref={(el) => (this.progressBar = el)}></span>
-          </span>
-        </div>
-        <span className="inLoad">加载中···</span>
-      </div>
-    );
-  }
-}
-
-export default LoadingDemo;

src/pages/loadingDemo/loadingDemo.less

-@import "../../res.less";
-
-.loadingDemo {
-  width: 750px;
-  height: 1624px;
-  left: 0px;
-  position: absolute;
-  top: 50%;
-  transform: translateY(-50%);
-
-  .bg174 {
-    width: 750px;
-    height: 1624px;
-    left: 0px;
-    top: 0px;
-    position: absolute;
-    .webpBg("loadingDemo/背景.jpg")
-  }
-  .progressBar {
-    width: 524px;
-    height: 22px;
-    left: 113px;
-    top: 717px;
-    position: absolute;
-    overflow: hidden;
-    border-radius: 6px;
-    .atBottom {
-      width: 524px;
-      height: 22px;
-      left: 0px;
-      top: 0px;
-      position: absolute;
-      .webpBg("loadingDemo/底部173.png")
-    }
-    .loadingBg{
-      width: 516px;
-      height: 14px;
-      left: 5px;
-      top: 4px;
-      overflow: hidden;
-      position: absolute;
-      border-radius: 6px;
-    }
-    .above {
-      display: block;
-      position: relative;
-      width: 516px;
-      height: 14px;
-      // animation: loading 1.6s linear 1;
-      .webpBg("loadingDemo/上面.png");
-      border-radius: 6px;
-    }
-  }
-  .inLoad {
-    width: 117px;
-    height: 23px;
-    left: 322px;
-    top: 758px;
-    position: absolute;
-    font-size: 24px;
-    line-height: 23px;
-    color: #ffffff;
-  }
-}
-
-
-@keyframes loading {
-  0% {
-    transform: translateX(-520px);
-  }
-
-  100% {
-    transform: translateX(0px);
-  }
-}

src/pages/prizepage/prizepage.jsx

+'use strict';
+
+import React from 'react';
+import { observer } from 'mobx-react';
+import './prizepage.less';
+import { callApi } from '@spark/api-base';
+import { _throttle } from '@src/utils/utils';
+
+@observer
+class Prizepage extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      prizeList: []
+    }
+  }
+  componentDidMount() {
+    this.getPrizeInfo();
+  }
+  /** 获取奖品信息 */
+  getPrizeInfo = async () => {
+    console.log("%$^$%^$^%^$%^")
+    const includeCrecord = false; //包含积分商城的记录
+    const includeCredits = false; //包含积分
+    const excludeSp = false; //排除道具
+    let customFilter; //自定义过滤方法
+
+    const ps = [];
+    const params = {};
+    if (includeCredits) {
+      params.credits = "1";
+    }
+    ps.push(callApi("records.query", params));
+
+    if (includeCrecord) {
+      ps.push(callApi("/crecord/getrecord", { page: 1 }, undefined, undefined, false));
+    }
+
+    const [recordsResp, oldRecordsResp] = await Promise.all(ps);
+    let records = [];
+
+    for (let item of recordsResp) {
+      const {
+        extra: { type },
+      } = item;
+      if (excludeSp && type === 1) {
+        continue;
+      }
+      if (customFilter && !customFilter(item)) {
+        continue;
+      }
+      const {
+        extra: { name, icon },
+        id,
+        prizeId,
+        gmtCreate,
+      } = item;
+      records.push({
+        id,
+        name,
+        icon,
+        prizeId,
+        gmtCreate,
+        data: item,
+      });
+    }
+
+    if (oldRecordsResp) {
+      for (let item of oldRecordsResp?.records || []) {
+        if (customFilter && !customFilter(item)) {
+          continue;
+        }
+        const { title, url, img } = item;
+        records.push({
+          url,
+          name: title,
+          icon: img,
+          data: item,
+        });
+      }
+    }
+    records = records.filter((item) => {
+      // console.log(item?.prizeId, item?.prizeId?.startsWith("sp_exclusive_red"), !item?.prizeId?.startsWith("sp_"));
+      return !item?.prizeId?.startsWith("sp_");
+    });
+    this.setState({
+      prizeList: records || [],
+    });
+  };
+
+  /** 跳转兑吧奖品 */
+  navigateToPrize = (item) => {
+    return _throttle(() => {
+      if (!!item?.url) {
+        location.href = item?.url;
+      } else {
+        location.href = `/aaw/projectx/takePrize?projectOrderNo=${item.id}`;
+      }
+    });
+  };
+  render() {
+    return (
+      <div className='pagebox'>
+        <div className="prizepage modal_center">
+          <span className="bg"></span>
+          <span className="back"></span>
+          <div className="prizelist" style={{ height: `${(1321 - 20 - (1624 - document.body.clientHeight * 750 / document.body.clientWidth) / 2) / 100}rem` }}>
+            {
+              this.state.prizeList?.map((item, index) => {
+                return (
+                  <div className="item" key={"prize" + index} onClick={this.navigateToPrize}>
+                    <span className="itembg"></span>
+                    <span className="gobtn"></span>
+                    <span className="prizename">{item?.name}</span>
+                    <span className="prizebg">
+                      <img style={{width:"100%",height:"100%",borderRadius:"10px"}} src={item?.icon}></img>
+                    </span>
+                  </div>
+                )
+              })
+            }
+
+          </div>
+        </div>
+      </div>
+    );
+  }
+}
+export default Prizepage;

src/pages/prizepage/prizepage.less

+@import "../../res.less";
+
+.pagebox {
+  width: 100vw;
+  height: 100vh;
+  left: 0px;
+  top: 0px;
+  position: absolute;
+  overflow: hidden;
+}
+
+.prizepage {
+  width: 750px;
+  height: 1624px;
+  left: 0px;
+  top: 0px;
+  position: absolute;
+
+  .bg {
+    width: 750px;
+    height: 1624px;
+    left: 0px;
+    top: 0px;
+    position: absolute;
+    .sparkBg("prizePage/bg.png");
+  }
+
+  .back {
+    width: 62px;
+    height: 61px;
+    left: 28px;
+    top: 143px;
+    position: absolute;
+    .sparkBg("prizePage/back.png");
+  }
+
+  .prizelist {
+    width: 632px;
+    height: 139px;
+    left: 59px;
+    top: 303px;
+    position: absolute;
+
+    .item {
+      width: 632px;
+      height: 139px;
+      left: 0px;
+      top: 0px;
+      position: relative;
+      display: block;
+      margin-bottom: 20px;
+
+      .itembg {
+        width: 632px;
+        height: 139px;
+        left: 0px;
+        top: 0px;
+        position: absolute;
+        .sparkBg("prizePage/itembg.png");
+      }
+
+      .gobtn {
+        width: 15px;
+        height: 30px;
+        left: 574px;
+        top: 54px;
+        position: absolute;
+        .sparkBg("prizePage/gobtn.png");
+      }
+
+      .prizename {
+        width: 388px;
+        height: 50px;
+        left: 176px;
+        top: 57px;
+        position: absolute;
+        font-size: 26px;
+        line-height: 26px;
+        color: rgba(149, 96, 30, 1);
+        overflow-x: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+      }
+
+      .prizebg {
+        width: 111px;
+        height: 111px;
+        left: 33px;
+        top: 14px;
+        position: absolute;
+        .sparkBg("prizePage/prizebg.png");
+      }
+    }
+  }
+}
\ No newline at end of file

src/store/index.js

@@ -18,9 +18,9 @@ const store = makeAutoObservable({
     "5055": "sharePage",
     Did1NDA0NDc: "sharePage",
 
-    myPrize: "myPrize", // TODO 举例子 新宿台奖品页
-    index: PAGE_MAP.LOADING_PAGE,
-  }[skinId] || PAGE_MAP.LOADING_PAGE,
+    reocrds: PAGE_MAP.PRIZE_PAGE, // TODO 举例子 新宿台奖品页
+    index: PAGE_MAP.CREDITS_PAGE,
+  }[skinId] || PAGE_MAP.PRIZE_PAGE,
 
   pageData: {},
 

src/utils/constants.js

@@ -15,7 +15,7 @@ export const MODAL_INDEX = {
 export const DEFAULT_NET_ERROR = '网络异常，请稍后再试';
 
 export const PAGE_MAP = {
-  HOME_PAGE: "homePage",
-  LOADING_PAGE: "loadingPage",
+  PRIZE_PAGE: "prizePage",
+  CREDITS_PAGE: "creditsPage",
 };