奖品领取链路

mock/home.ts

@@ -3,7 +3,7 @@ import { AESDecrypt, AESEncrypt } from "./Crypto";
 export default [
   {
     url: '/tcs/index.do',
-    response: ({query}) => {
+    response: ({ query }) => {
       return {
         "success": true,
         "code": "",
@@ -20,7 +20,7 @@ export default [
   },
   {
     url: '/tcs/start.do',
-    response: ({query}) => {
+    response: ({ query }) => {
       return {
         "success": true,
         "code": "",
@@ -35,7 +35,7 @@ export default [
   },
   {
     url: '/tcs/submit.do',
-    response: ({query}) => {
+    response: ({ query }) => {
       return {
         success: true,
         code: "",
@@ -61,4 +61,237 @@ export default [
       }
     },
   },
+  {
+    url: "/gaw/address/getChildrenByParentCode",
+    response: ({ query }) => {
+      return {
+        "success": true,
+        "code": "0000000000",
+        "desc": "OK",
+        "timestamp": 1736580360076,
+        "data": [{
+          "name": "东华门街道",
+          "adCode": "110101001",
+          "level": 4
+        },
+        {
+          "name": "景山街道",
+          "adCode": "110101002",
+          "level": 4
+        },
+        {
+          "name": "交道口街道",
+          "adCode": "110101003",
+          "level": 4
+        },
+        {
+          "name": "安定门街道",
+          "adCode": "110101004",
+          "level": 4
+        },
+        {
+          "name": "北新桥街道",
+          "adCode": "110101005",
+          "level": 4
+        },
+        {
+          "name": "东四街道",
+          "adCode": "110101006",
+          "level": 4
+        },
+        {
+          "name": "朝阳门街道",
+          "adCode": "110101007",
+          "level": 4
+        },
+        {
+          "name": "建国门街道",
+          "adCode": "110101008",
+          "level": 4
+        },
+        {
+          "name": "东直门街道",
+          "adCode": "110101009",
+          "level": 4
+        },
+        {
+          "name": "和平里街道",
+          "adCode": "110101010",
+          "level": 4
+        },
+        {
+          "name": "前门街道",
+          "adCode": "110101011",
+          "level": 4
+        },
+        {
+          "name": "崇文门外街道",
+          "adCode": "110101012",
+          "level": 4
+        },
+        {
+          "name": "东花市街道",
+          "adCode": "110101013",
+          "level": 4
+        },
+        {
+          "name": "龙潭街道",
+          "adCode": "110101014",
+          "level": 4
+        },
+        {
+          "name": "体育馆路街道",
+          "adCode": "110101015",
+          "level": 4
+        },
+        {
+          "name": "天坛街道",
+          "adCode": "110101016",
+          "level": 4
+        },
+        {
+          "name": "永定门外街道",
+          "adCode": "110101017",
+          "level": 4
+        }
+        ]
+      }
+    },
+
+  },
+  {
+    url: '/draw/myPrizeRecord.do',
+    response: ({ query }) => {
+      return {
+        "success": true,
+        "code": "",
+        "message": "",
+        "data": [
+          {
+            extra: {
+              name: "一等奖",
+              icon: 'https://yun.duiba.com.cn/polaris/shareImg.721503d9417b09af6346ae018493aec558ca31af.png',
+            },
+            needFillAddress: true,
+            prizeId: '',
+            boolThirdObject: true
+          },
+          {
+            extra: {
+              name: "一等奖",
+              icon: 'https://yun.duiba.com.cn/polaris/shareImg.721503d9417b09af6346ae018493aec558ca31af.png',
+            },
+            needFillAddress: true,
+            prizeId: '',
+            boolThirdObject: false
+          },
+          {
+            extra: {
+              name: "一等奖",
+              icon: 'https://yun.duiba.com.cn/polaris/shareImg.721503d9417b09af6346ae018493aec558ca31af.png',
+            },
+            needFillAddress: false,
+            prizeId: '',
+            boolThirdObject: true
+          },
+          {
+            extra: {
+              name: "一等奖",
+              icon: 'https://yun.duiba.com.cn/polaris/shareImg.721503d9417b09af6346ae018493aec558ca31af.png',
+            },
+            needFillAddress: true,
+            prizeId: ''
+          },
+          {
+            extra: {
+              name: "一等奖",
+              icon: 'https://yun.duiba.com.cn/polaris/shareImg.721503d9417b09af6346ae018493aec558ca31af.png',
+            },
+            needFillAddress: true,
+            prizeId: ''
+          },
+          {
+            extra: {
+              name: "一等奖",
+              icon: 'https://yun.duiba.com.cn/polaris/shareImg.721503d9417b09af6346ae018493aec558ca31af.png',
+            },
+            needFillAddress: true,
+            prizeId: ''
+          },
+          {
+            extra: {
+              name: "一等奖",
+              icon: 'https://yun.duiba.com.cn/polaris/shareImg.721503d9417b09af6346ae018493aec558ca31af.png',
+            },
+            needFillAddress: true,
+            prizeId: ''
+          },
+          {
+            extra: {
+              name: "一等奖",
+              icon: 'https://yun.duiba.com.cn/polaris/shareImg.721503d9417b09af6346ae018493aec558ca31af.png',
+            },
+            needFillAddress: true,
+            prizeId: ''
+          },
+          {
+            extra: {
+              name: "一等奖",
+              icon: 'https://yun.duiba.com.cn/polaris/shareImg.721503d9417b09af6346ae018493aec558ca31af.png',
+            },
+            needFillAddress: true,
+            prizeId: ''
+          },
+          {
+            extra: {
+              name: "一等奖",
+              icon: 'https://yun.duiba.com.cn/polaris/shareImg.721503d9417b09af6346ae018493aec558ca31af.png',
+            },
+            needFillAddress: true,
+            prizeId: ''
+          },
+          {
+            extra: {
+              name: "一等奖",
+              icon: 'https://yun.duiba.com.cn/polaris/shareImg.721503d9417b09af6346ae018493aec558ca31af.png',
+            },
+            needFillAddress: true,
+            prizeId: ''
+          },
+          {
+            extra: {
+              name: "一等奖",
+              icon: 'https://yun.duiba.com.cn/polaris/shareImg.721503d9417b09af6346ae018493aec558ca31af.png',
+            },
+            needFillAddress: true,
+            prizeId: ''
+          },
+          {
+            extra: {
+              name: "一等奖",
+              icon: 'https://yun.duiba.com.cn/polaris/shareImg.721503d9417b09af6346ae018493aec558ca31af.png',
+            },
+            needFillAddress: true,
+            prizeId: ''
+          },
+          {
+            extra: {
+              name: "一等奖",
+              icon: 'https://yun.duiba.com.cn/polaris/shareImg.721503d9417b09af6346ae018493aec558ca31af.png',
+            },
+            needFillAddress: true,
+            prizeId: ''
+          },
+          {
+            extra: {
+              name: "四等奖",
+              icon: 'https://yun.duiba.com.cn/polaris/shareImg.721503d9417b09af6346ae018493aec558ca31af.png',
+            },
+            needFillAddress: true,
+            prizeId: ''
+          }
+        ]
+      }
+    }
+  }
 ]

package.json

@@ -29,6 +29,7 @@
     "emittery": "^1.1.0",
     "gsap": "^3.12.7",
     "howler": "^2.2.4",
+    "html2canvas": "^1.4.1",
     "intersection-observer": "^0.12.2",
     "less": "^4.3.0",
     "mobx": "^6.13.7",
@@ -43,6 +44,7 @@
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "spark-utils": "^1.1.2",
+    "swiper": "8.4.5",
     "tailwindcss": "^4.1.4"
   },
   "devDependencies": {

pnpm-lock.yaml

@@ -62,6 +62,9 @@ importers:
       howler:
         specifier: ^2.2.4
         version: 2.2.4
+      html2canvas:
+        specifier: ^1.4.1
+        version: 1.4.1
       intersection-observer:
         specifier: ^0.12.2
         version: 0.12.2
@@ -104,6 +107,9 @@ importers:
       spark-utils:
         specifier: ^1.1.2
         version: 1.1.10
+      swiper:
+        specifier: 8.4.5
+        version: 8.4.5
       tailwindcss:
         specifier: ^4.1.4
         version: 4.1.4
@@ -1425,6 +1431,10 @@ packages:
   balanced-match@1.0.2:
     resolution: {integrity: sha1-6D46fj8wCzTLnYf2FfoMvzV2kO4=}
 
+  base64-arraybuffer@1.0.2:
+    resolution: {integrity: sha512-I3yl4r9QB5ZRY3XuJVEPfc2XhZO6YweFPI+UovAzn+8/hb3oJ6lnysaFcjVpkCPfVWFUDvoZ8kmVDP7WyRtYtQ==}
+    engines: {node: '>= 0.6.0'}
+
   binary-extensions@2.3.0:
     resolution: {integrity: sha512-Ceh+7ox5qe7LJuLHoY0feh3pHuUDHAcRUeyL2VYghZwfpkNIy/+8Ocg0a3UuSoYzavmylwuLWQOf3hl0jjMMIw==}
     engines: {node: '>=8'}
@@ -1576,6 +1586,9 @@ packages:
     peerDependencies:
       postcss: ^8.0.9
 
+  css-line-break@2.1.0:
+    resolution: {integrity: sha512-FHcKFCZcAha3LwfVBhCQbW2nCNbkZXn7KVUJcsT5/P8YmfsVja0FMPJr0B903j/E69HUphKiV9iQArX8SDYA4w==}
+
   css-select@5.1.0:
     resolution: {integrity: sha512-nwoRF1rvRRnnCqqY7updORDsuqKzqYJ28+oSMaJMMgOauh3fvwHqMS7EZpIPqK8GL+g9mKxF1vP/ZjSeNjEVHg==}
 
@@ -1678,6 +1691,9 @@ packages:
   dom-serializer@2.0.0:
     resolution: {integrity: sha512-wIkAryiqt/nV5EQKqQpo3SToSOV9J0DnbJqwK7Wv/Trc92zIAYZ4FlMu+JPFW1DfGFt81ZTCGgDEabffXeLyJg==}
 
+  dom7@4.0.6:
+    resolution: {integrity: sha512-emjdpPLhpNubapLFdjNL9tP06Sr+GZkrIHEXLWvOGsytACUrkbeIdjO5g77m00BrHTznnlcNqgmn7pCN192TBA==}
+
   domelementtype@2.3.0:
     resolution: {integrity: sha512-OLETBj6w0OsagBwdXnPdN0cnMfF9opN69co+7ZrbfPGrdpPVNBUj02spi6B1N7wChLQiPn4CSH/zJvXw56gmHw==}
 
@@ -1982,6 +1998,10 @@ packages:
   howler@2.2.4:
     resolution: {integrity: sha512-iARIBPgcQrwtEr+tALF+rapJ8qSc+Set2GJQl7xT1MQzWaVkFebdJhR3alVlSiUf5U7nAANKuj3aWpwerocD5w==}
 
+  html2canvas@1.4.1:
+    resolution: {integrity: sha512-fPU6BHNpsyIhr8yyMpTLLxAbkaK8ArIBcmZIRiBLiDhjeqvXolaEmDGmELFuX9I4xDcaKKcJl+TKZLqruBbmWA==}
+    engines: {node: '>=8.0.0'}
+
   humanize-ms@1.2.1:
     resolution: {integrity: sha1-xG4xWaKT9riW2ikxbYtv6Lt5u+0=}
 
@@ -2850,6 +2870,9 @@ packages:
   spark-utils@1.1.10:
     resolution: {integrity: sha512-zhEvK5a0/ep27fHvVM+/se4ExZo/8sgVX2zJbFw+Rn7ZXuB1oz8DqMFFZcyvcrZWirUK2b6zrhHpWAkzMVf17A==}
 
+  ssr-window@4.0.2:
+    resolution: {integrity: sha512-ISv/Ch+ig7SOtw7G2+qkwfVASzazUnvlDTwypdLoPoySv+6MqlOV10VwPSE6EWkGjhW50lUmghPmpYZXMu/+AQ==}
+
   statuses@1.5.0:
     resolution: {integrity: sha1-Fhx9rBd2Wf2YEfQ3cfqZOBR4Yow=}
     engines: {node: '>= 0.6'}
@@ -2898,6 +2921,10 @@ packages:
     engines: {node: '>=14.0.0'}
     hasBin: true
 
+  swiper@8.4.5:
+    resolution: {integrity: sha512-zveyEFBBv4q1sVkbJHnuH4xCtarKieavJ4SxP0QEHvdpPLJRuD7j/Xg38IVVLbp7Db6qrPsLUePvxohYx39Agw==}
+    engines: {node: '>= 4.7.0'}
+
   systemjs@6.15.1:
     resolution: {integrity: sha512-Nk8c4lXvMB98MtbmjX7JwJRgJOL8fluecYCfCeYBznwmpOs8Bf15hLM6z4z71EDAhQVrQrI+wt1aLWSXZq+hXA==}
 
@@ -2916,6 +2943,9 @@ packages:
     engines: {node: '>=10'}
     hasBin: true
 
+  text-segmentation@1.0.3:
+    resolution: {integrity: sha512-iOiPUo/BGnZ6+54OsWxZidGCsdU8YbE4PSpdPinp7DeMtUJNJBoJ/ouUSTJjHkh1KntHaltHl/gDs2FC4i5+Nw==}
+
   thenify-all@1.6.0:
     resolution: {integrity: sha1-GhkY1ALY/D+Y+/I02wvMjMEOlyY=}
     engines: {node: '>=0.8'}
@@ -3029,6 +3059,9 @@ packages:
     resolution: {integrity: sha1-n5VxD1CiZ5R7LMwSR0HBAoQn5xM=}
     engines: {node: '>= 0.4.0'}
 
+  utrie@1.0.2:
+    resolution: {integrity: sha512-1MLa5ouZiOmQzUbjbu9VmjLzn1QLXBhwpUa7kdLUQK+KQ5KA9I1vk5U4YHe/X2Ch7PYnJfWuWT+VbuxbGwljhw==}
+
   vite-plugin-mock@3.0.2:
     resolution: {integrity: sha512-bD//HvkTygGmk+LsIAdf0jGNlCv4iWv0kZlH9UEgWT6QYoUwfjQAE4SKxHRw2tfLgVhbPQVv/+X3YlNWvueGUA==}
     engines: {node: '>=16.0.0'}
@@ -4441,6 +4474,8 @@ snapshots:
 
   balanced-match@1.0.2: {}
 
+  base64-arraybuffer@1.0.2: {}
+
   binary-extensions@2.3.0: {}
 
   boolbase@1.0.0: {}
@@ -4590,6 +4625,10 @@ snapshots:
     dependencies:
       postcss: 8.5.3
 
+  css-line-break@2.1.0:
+    dependencies:
+      utrie: 1.0.2
+
   css-select@5.1.0:
     dependencies:
       boolbase: 1.0.0
@@ -4702,6 +4741,10 @@ snapshots:
       domhandler: 5.0.3
       entities: 4.5.0
 
+  dom7@4.0.6:
+    dependencies:
+      ssr-window: 4.0.2
+
   domelementtype@2.3.0: {}
 
   domhandler@5.0.3:
@@ -5031,6 +5074,11 @@ snapshots:
 
   howler@2.2.4: {}
 
+  html2canvas@1.4.1:
+    dependencies:
+      css-line-break: 2.1.0
+      text-segmentation: 1.0.3
+
   humanize-ms@1.2.1:
     dependencies:
       ms: 2.1.3
@@ -5820,6 +5868,8 @@ snapshots:
     transitivePeerDependencies:
       - debug
 
+  ssr-window@4.0.2: {}
+
   statuses@1.5.0: {}
 
   stream-http@2.8.2:
@@ -5872,6 +5922,11 @@ snapshots:
       csso: 5.0.5
       picocolors: 1.1.1
 
+  swiper@8.4.5:
+    dependencies:
+      dom7: 4.0.6
+      ssr-window: 4.0.2
+
   systemjs@6.15.1: {}
 
   tailwindcss@4.0.6: {}
@@ -5887,6 +5942,10 @@ snapshots:
       commander: 2.20.3
       source-map-support: 0.5.21
 
+  text-segmentation@1.0.3:
+    dependencies:
+      utrie: 1.0.2
+
   thenify-all@1.6.0:
     dependencies:
       thenify: 3.3.1
@@ -5994,6 +6053,10 @@ snapshots:
 
   utils-merge@1.0.1: {}
 
+  utrie@1.0.2:
+    dependencies:
+      base64-arraybuffer: 1.0.2
+
   vite-plugin-mock@3.0.2(esbuild@0.25.3)(mockjs@1.1.0)(vite@6.3.3(@types/node@22.13.4)(jiti@2.4.2)(less@4.3.0)(lightningcss@1.29.1)(terser@5.39.0)):
     dependencies:
       bundle-require: 4.2.1(esbuild@0.25.3)

src/api/index.ts

@@ -52,11 +52,21 @@ const API = generateAPI({
   getInviteCode: {
     uri: 'inviteAssist_1/getInviteCode.do',
     withToken: true,
+    method: 'post',
   },
   doAssist: {
     uri: 'inviteAssist_1/doAssist.do',
     withToken: true,
+    method: 'post',
   },
+  getPrizeList: 'draw/myPrizeRecord.do',
+  receivePrize: {
+    uri: "draw/objectReceive.do",
+    withToken: true,
+    method: "post"
+  },
+  /** 获取地区 */
+  getParentCode: "/gaw/address/getChildrenByParentCode",
 
 
 })

src/components/homepage/homepage.jsx

-'use strict';
-
-import React from 'react';
-import { observer } from 'mobx-react';
-import './homepage.less';
-
-@observer
-class Homepage extends React.Component {
-  constructor(props) {
-    super(props);
-  }
-  render() {
-    return (
-      <div className="homepage modal_center">
-        <span className="bg"></span>
-        <div className="infobox">
-          <span className="infobg"></span>
-          <div className="prizeingo">
-            <span className="prizename">奖品名称文案占位</span>
-            <span className="prizerank">前50名可得</span>
-            <span className="prizeimg"></span>
-          </div>
-          <div className="rankinfo">
-            <span className="rankarr"></span>
-            <span className="ranklab">我的排名</span>
-            <span className="ranknum">86名</span>
-          </div>
-        </div>
-        <span className="title"></span>
-        <span className="prizebtn"></span>
-        <span className="rulebtn"></span>
-        <span className="musicon"></span>
-        <span className="musicf"></span>
-        <div className="mainbtn">
-          <span className="mainimg"></span>
-          <span className="mainnum">剩余次数：3</span>
-        </div>
-        <span className="shopbtn"></span>
-        <div className="drawbtn">
-          <span className="drawimg"></span>
-          <div className="drawnum">
-            <span className="drawnumbg"></span>
-            <span className="drawnumlab">1</span>
-          </div>
-        </div>
-        <div className="tasklist">
-          <div className="taskitem">
-            <span className="taskbg"></span>
-            <span className="taskscanbtn"></span>
-            <span className="taskinvitebtn"></span>
-            <span className="taskgetbtn"></span>
-            <span className="taskfinishbtn"></span>
-            <span className="tasktit">每日登录</span>
-            <span className="tasksub">游戏次数*1</span>
-            <span className="taskicon"></span>
-          </div>
-          <span className="taskitem2"></span>
-        </div>
-        <span className="tasktitle"></span>
-        <span className="ip"></span>
-        <span className="leaves"></span>
-        <span className="logo"></span>
-      </div>
-    );
-  }
-}
-export default Homepage;

src/components/homepage/homepage.less

-@import "../../res.less";
-.homepage {
-  width: 750px;
-  height: 1624px;
-  left: 0px;
-  top: 0px;
-  position: absolute;
-  .bg {
-    width: 750px;
-    height: 1705px;
-    left: 0px;
-    top: 0px;
-    position: absolute;
-    .sparkBg("homePage/bg.png");
-  }
-  .infobox {
-    width: 502px;
-    height: 148px;
-    left: 124px;
-    top: 412px;
-    position: absolute;
-    .infobg {
-      width: 502px;
-      height: 148px;
-      left: 0px;
-      top: 0px;
-      position: absolute;
-      .sparkBg("homePage/infobg.png");
-    }
-    .prizeingo {
-      width: 257px;
-      height: 65px;
-      left: 58px;
-      top: 47px;
-      position: absolute;
-      .prizename {
-        width: 172px;
-        height: 18px;
-        left: 95px;
-        top: 38px;
-        position: absolute;
-        font-size: 18px;
-        line-height: 18px;
-        color: rgba(255, 255, 255, 1);
-      }
-      .prizerank {
-        width: 120px;
-        height: 23px;
-        left: 95px;
-        top: 8px;
-        position: absolute;
-        font-size: 17px;
-        line-height: 23px;
-        color: rgba(255, 255, 255, 1);
-      }
-      .prizeimg {
-        width: 80px;
-        height: 65px;
-        left: 0px;
-        top: 0px;
-        position: absolute;
-        .sparkBg("homePage/prizeimg.png");
-      }
-    }
-    .rankinfo {
-      width: 103px;
-      height: 47px;
-      left: 347px;
-      top: 56px;
-      position: absolute;
-      .rankarr {
-        width: 25px;
-        height: 39px;
-        left: 78px;
-        top: 7px;
-        position: absolute;
-        .sparkBg("homePage/rankarr.png");
-      }
-      .ranklab {
-        width: 74px;
-        height: 15px;
-        left: 0px;
-        top: 32px;
-        position: absolute;
-        font-size: 15px;
-        line-height: 15px;
-        color: rgba(255, 255, 255, 1);
-      }
-      .ranknum {
-        width: 74px;
-        height: 28px;
-        left: 0px;
-        top: 0px;
-        position: absolute;
-        font-size: 35px;
-        line-height: 28px;
-        color: rgba(243, 225, 27, 1);
-      }
-    }
-  }
-  .title {
-    width: 484px;
-    height: 243px;
-    left: 120px;
-    top: 174px;
-    position: absolute;
-    .sparkBg("homePage/title.png");
-  }
-  .prizebtn {
-    width: 159px;
-    height: 60px;
-    left: 12px;
-    top: 79px;
-    position: absolute;
-    .sparkBg("homePage/prizebtn.png");
-  }
-  .rulebtn {
-    width: 115px;
-    height: 60px;
-    left: 624px;
-    top: 80px;
-    position: absolute;
-    .sparkBg("homePage/rulebtn.png");
-  }
-  .musicon {
-    width: 55px;
-    height: 57px;
-    left: 684px;
-    top: 155px;
-    position: absolute;
-    .sparkBg("homePage/musicon.png");
-  }
-  .musicf {
-    width: 41px;
-    height: 43px;
-    left: 691px;
-    top: 162px;
-    position: absolute;
-    .sparkBg("homePage/musicoff.png");
-  }
-  .mainbtn {
-    width: 474px;
-    height: 134px;
-    left: 140px;
-    top: 932px;
-    position: absolute;
-    .mainimg {
-      width: 474px;
-      height: 134px;
-      left: 0px;
-      top: 0px;
-      position: absolute;
-      .sparkBg("homePage/mainimg.png");
-    }
-    .mainnum {
-      width: 182px;
-      height: 24px;
-      left: 151px;
-      top: 80px;
-      position: absolute;
-      font-size: 25px;
-      line-height: 24px;
-      color: rgba(240, 35, 96, 1);
-    }
-  }
-  .shopbtn {
-    width: 92px;
-    height: 95px;
-    left: 20px;
-    top: 957px;
-    position: absolute;
-    .sparkBg("homePage/shopbtn.png");
-  }
-  .drawbtn {
-    width: 98px;
-    height: 100px;
-    left: 635px;
-    top: 953px;
-    position: absolute;
-    .drawimg {
-      width: 98px;
-      height: 100px;
-      left: 0px;
-      top: 0px;
-      position: absolute;
-      .sparkBg("homePage/drawimg.png");
-    }
-    .drawnum {
-      width: 28px;
-      height: 28px;
-      left: 70px;
-      top: 0px;
-      position: absolute;
-      .drawnumbg {
-        width: 28px;
-        height: 28px;
-        left: 0px;
-        top: 0px;
-        position: absolute;
-        .sparkBg("homePage/drawNumbg.png");
-      }
-      .drawnumlab {
-        width: 20px;
-        height: 16px;
-        left: 9px;
-        top: 6px;
-        position: absolute;
-        font-size: 21px;
-        line-height: 16px;
-        color: rgba(255, 255, 255, 1);
-      }
-    }
-  }
-  .tasklist {
-    width: 695px;
-    height: 529px;
-    left: 30px;
-    top: 1145px;
-    position: absolute;
-    .taskitem {
-      width: 695px;
-      height: 172px;
-      left: 0px;
-      top: 0px;
-      position: absolute;
-      .taskbg {
-        width: 695px;
-        height: 172px;
-        left: 0px;
-        top: 0px;
-        position: absolute;
-        .sparkBg("homePage/taskbg.png");
-      }
-      .taskscanbtn {
-        width: 157px;
-        height: 57px;
-        left: 451px;
-        top: 51px;
-        position: absolute;
-        .sparkBg("homePage/taskscanbtn.png");
-      }
-      .taskinvitebtn {
-        width: 157px;
-        height: 57px;
-        left: 451px;
-        top: 51px;
-        position: absolute;
-        .sparkBg("homePage/taskinvitebtn.png");
-      }
-      .taskgetbtn {
-        width: 157px;
-        height: 57px;
-        left: 451px;
-        top: 51px;
-        position: absolute;
-        .sparkBg("homePage/taskgetbtn.png");
-      }
-      .taskfinishbtn {
-        width: 157px;
-        height: 57px;
-        left: 451px;
-        top: 51px;
-        position: absolute;
-        .sparkBg("homePage/taskfinishbtn.png");
-      }
-      .tasktit {
-        width: 149px;
-        height: 29px;
-        left: 168px;
-        top: 56px;
-        position: absolute;
-        font-size: 34px;
-        line-height: 29px;
-        color: rgba(255, 255, 255, 1);
-      }
-      .tasksub {
-        width: 121px;
-        height: 21px;
-        left: 170px;
-        top: 95px;
-        position: absolute;
-        font-size: 22px;
-        line-height: 21px;
-        color: rgba(255, 255, 255, 1);
-      }
-      .taskicon {
-        width: 65px;
-        height: 69px;
-        left: 89px;
-        top: 49px;
-        position: absolute;
-        .sparkBg("homePage/taskicon.png");
-      }
-    }
-    .taskitem2 {
-      width: 695px;
-      height: 348px;
-      left: 0px;
-      top: 181px;
-      position: absolute;
-      .sparkBg("homePage/taskitem2.png");
-    }
-  }
-  .tasktitle {
-    width: 676px;
-    height: 32px;
-    left: 39px;
-    top: 1098px;
-    position: absolute;
-    .sparkBg("homePage/tasktitle.png");
-  }
-  .ip {
-    width: 373px;
-    height: 326px;
-    left: 192px;
-    top: 585px;
-    position: absolute;
-    .sparkBg("homePage/ip.png");
-  }
-  .leaves {
-    width: 750px;
-    height: 447px;
-    left: 0px;
-    top: 541px;
-    position: absolute;
-    .sparkBg("homePage/leaves.png");
-  }
-  .logo {
-    width: 170px;
-    height: 55px;
-    left: 291px;
-    top: 85px;
-    position: absolute;
-    .sparkBg("homePage/logo.png");
-  }
-}

src/components/inputinfomodal/inputinfomodal.less

+@import "../../res.less";
+
+.inputinfomodal {
+  width: 538px;
+  height: 809px;
+  left: 0px;
+  top: 0px;
+  position: absolute;
+
+  .inputinfomodalclosebtn {
+    width: 70px;
+    height: 70px;
+    left: 233px;
+    top: 739px;
+    position: absolute;
+    // opacity: 0.7;
+    .sparkBg("inputInfoModal/inputInfoModalCloseBtn.png");
+  }
+
+  .inputinfomodalbg {
+    width: 538px;
+    height: 712px;
+    left: 0px;
+    top: 0px;
+    position: absolute;
+    .sparkBg("inputInfoModal/inputInfoModalBg.png");
+  }
+
+  .inputinfomodalconfirmbtn {
+    width: 349px;
+    height: 90px;
+    left: 94px;
+    top: 554px;
+    position: absolute;
+    .sparkBg("inputInfoModal/inputInfoModalConfirmBtn.png");
+  }
+
+  .inputinfomodaldetailcon {
+    width: 468px;
+    height: 82px;
+    left: 34px;
+    top: 428px;
+    position: absolute;
+
+    .inputinfomodaldetailconbg {
+      width: 468px;
+      height: 82px;
+      left: 0px;
+      top: 0px;
+      position: absolute;
+      .sparkBg("inputInfoModal/inputInfoModalDetailConBg.png");
+    }
+
+    .inputinfomodaldetailconplaceholder {
+      width: 304px;
+      height: 34px;
+      left: 130px;
+      top: 21px;
+      outline: none;
+      border: 0;
+      position: absolute;
+      opacity: 0.5;
+      font-size: 34px;
+      line-height: 34px;
+      color: #fff;
+    }
+  }
+
+  .inputinfomodalphonecon {
+    width: 468px;
+    height: 82px;
+    left: 34px;
+    top: 232px;
+    position: absolute;
+
+    .inputinfomodalphoneconbg {
+      width: 468px;
+      height: 82px;
+      left: 0px;
+      top: 0px;
+      position: absolute;
+      .sparkBg("inputInfoModal/inputInfoModalPhoneConBg.png");
+    }
+
+    .inputinfomodalphoneconplaceholder {
+      width: 304px;
+      height: 34px;
+      left: 130px;
+      top: 21px;
+      outline: none;
+      border: 0;
+      position: absolute;
+      opacity: 0.5;
+      font-size: 34px;
+      line-height: 34px;
+      color: #fff;
+    }
+  }
+
+  .inputinfomodalnamecon {
+    width: 468px;
+    height: 82px;
+    left: 34px;
+    top: 134px;
+    position: absolute;
+
+    .inputinfomodalnameconbg {
+      width: 468px;
+      height: 82px;
+      left: 0px;
+      top: 0px;
+      position: absolute;
+      .sparkBg("inputInfoModal/inputInfoModalNameConBg.png");
+    }
+
+    .inputinfomodalnameconplaceholder {
+      width: 304px;
+      height: 34px;
+      left: 130px;
+      top: 21px;
+      outline: none;
+      border: 0;
+      position: absolute;
+      opacity: 0.5;
+      font-size: 34px;
+      line-height: 34px;
+      color: #fff;
+    }
+  }
+
+  .inputinfomodalareacon {
+    width: 468px;
+    height: 82px;
+    left: 34px;
+    top: 330px;
+    position: absolute;
+
+    .inputinfomodalareaconbg {
+      width: 468px;
+      height: 82px;
+      left: 0px;
+      top: 0px;
+      position: absolute;
+      .sparkBg("inputInfoModal/inputInfoModalAreaConBg.png");
+    }
+
+    .inputinfomodalareaprovinceconplaceholder {
+      width: 100px;
+      height: 34px;
+      left: 170px;
+      top: 21px;
+      outline: none;
+      border: 0;
+      position: absolute;
+      opacity: 0.5;
+      font-size: 34px;
+      line-height: 34px;
+      color: #fff;
+    }
+
+    .inputinfomodalareacityconplaceholder {
+      width: 100px;
+      height: 34px;
+      left: 321px;
+      top: 21px;
+      outline: none;
+      border: 0;
+      position: absolute;
+      opacity: 0.5;
+      font-size: 34px;
+      line-height: 34px;
+      color: #fff;
+    }
+
+    .inputinfomodalareacountryconplaceholder {
+      width: 100px;
+      height: 34px;
+      left: 441px;
+      top: 21px;
+      outline: none;
+      border: 0;
+      position: absolute;
+      opacity: 0.5;
+      font-size: 34px;
+      line-height: 34px;
+      color: #fff;
+    }
+  }
+}

src/components/inputinfomodal/inputinfomodal.tsx

+'use strict';
+
+import React from 'react';
+import { observer } from 'mobx-react';
+import './inputinfomodal.less';
+import { Toast } from '@grace/ui';
+import API from '@/api';
+import { ModalCtrl } from '@/core/ctrls/ModalCtrl';
+import Selectmodal from '../selectmodal/selectmodal';
+import store from '@/store/store';
+// 定义 state 的类型
+interface InputInfoModalState {
+    name: string;
+    phone: string;
+    detail: string;
+    province: string;
+    city: string;
+    area: string;
+}
+// 定义 props 的类型
+interface InputInfoModalProps {
+    id?: string; // 原代码中使用了 this.props?.id
+    receiveSuc?: () => void; // 定义 receiveSuc 方法，可选类型
+}
+@observer
+class Inputinfomodal extends React.Component<InputInfoModalProps, InputInfoModalState> {
+    constructor(props) {
+        super(props);
+        this.state = {
+            name: '',
+            phone: '',
+            detail: '',
+            province: '',
+            city: '',
+            area: ''
+        };
+    }
+
+    // handleChange = (field: keyof InputInfoModalState, value: string) => {
+    //     this.setState({ [field]: value });
+    // }
+
+    // 指定 field 的类型为 InputInfoModalState 的键名
+    handleChange = (field: keyof InputInfoModalState, value: string) => {
+        // 这里使用类型断言确保类型匹配
+        this.setState({ [field]: value } as Pick<InputInfoModalState, typeof field>);
+    }
+    confirm = async () => {
+
+        /**判空 */
+        if (!this.state.name || !this.state.phone || !this.state.detail || !store.province || !store.city) {
+            Toast.show("请输入完整信息")
+            return
+        }
+        /**只判断11位手机号 */
+        if (!/^1[3456789]\d{9}$/.test(this.state.phone)) {
+            Toast.show("请输入正确的手机号")
+            return
+        }
+
+        let { name, phone, detail } = this.state
+        let { province, city, area } = store
+
+        if (province == '北京市' || province == '上海市' || province == '天津市' || province == '重庆市') {
+            city = province
+        }
+
+        const resp = await API.receivePrize({
+            prizeRecordId: this.props?.id,
+            collectUser: name,
+            collectProvince: province,
+            collectCity: city,
+            collectAddr: detail,
+            collectCounty: area,
+            collectPhone: phone
+        })
+        if (resp.success && resp.data) {
+            Toast.show("领取成功")
+            ModalCtrl.closeModal()
+            this.props?.receiveSuc && this.props?.receiveSuc()
+        } else {
+            Toast.show("领取失败，请联系客服")
+            ModalCtrl.closeModal()
+        }
+        console.warn(this.state)
+    }
+
+    doSelect = ({ province, city, area }) => {
+        console.log('doSelect 方法被调用，传入参数：', province, city, area);
+        // this.setState({
+        //     province,
+        //     city,
+        //     area
+        // }, () => {
+        //     console.log("选择地址后拿到的值", this.state.province, this.state.city, this.state.area);
+        // });
+        store.province = province
+        store.city = city
+        store.area = area
+
+    }
+
+    select = () => {
+        // modalStore.pushPop("Selectmodal", { doSelect: this.doSelect.bind(this) }, true)
+        ModalCtrl.showModal(Selectmodal, { doSelect: this.doSelect.bind(this) })
+
+    }
+
+
+    render() {
+        return (
+            <div className="inputinfomodal modal_center">
+                <span className="inputinfomodalclosebtn" onClick={() => {
+                    ModalCtrl.closeModal()
+                }}></span>
+                <span className="inputinfomodalbg"></span>
+                <span className="inputinfomodalconfirmbtn" onClick={() => {
+                    this.confirm()
+                }}></span>
+                <div className="inputinfomodaldetailcon">
+                    <span className="inputinfomodaldetailconbg"></span>
+                    <input
+                        type="text"
+                        className="inputinfomodaldetailconplaceholder"
+                        placeholder="请输入详细地址"
+                        value={this.state.detail}
+                        onChange={(e) => this.handleChange('detail', e.target.value)}
+                    />
+                </div>
+                <div className="inputinfomodalphonecon">
+                    <span className="inputinfomodalphoneconbg"></span>
+                    <input
+                        type="tel"
+                        className="inputinfomodalphoneconplaceholder"
+                        placeholder="请输入手机号"
+                        value={this.state.phone}
+                        onChange={(e) => this.handleChange('phone', e.target.value)}
+                    />
+                </div>
+                <div className="inputinfomodalnamecon">
+                    <span className="inputinfomodalnameconbg"></span>
+                    <input
+                        type="text"
+                        className="inputinfomodalnameconplaceholder"
+                        placeholder="请输入姓名"
+                        value={this.state.name}
+                        onChange={(e) => this.handleChange('name', e.target.value)}
+                    />
+                </div>
+                <div className="inputinfomodalareacon" onClick={this.select.bind(this)}>
+                    <span className="inputinfomodalareaconbg"></span>
+                    <input
+                        type="text"
+                        className="inputinfomodalareaprovinceconplaceholder"
+                        placeholder="请输入"
+                        value={store.province}
+                        onChange={(e) => this.handleChange('province', e.target.value)}
+                    />
+                    <input
+                        type="text"
+                        className="inputinfomodalareacityconplaceholder"
+                        placeholder="请输入"
+                        value={store.city}
+                        onChange={(e) => this.handleChange('city', e.target.value)}
+                    />
+                    <input
+                        type="text"
+                        className="inputinfomodalareacountryconplaceholder"
+                        placeholder="请输入"
+                        value={store.area}
+                        onChange={(e) => {
+                            console.log(e.target.value)
+                            this.handleChange('area', e.target.value)
+                        }
+                        }
+                    />
+                </div>
+            </div>
+        );
+    }
+}
+export default Inputinfomodal;

src/components/posterpop/posterpop.less

@@ -5,6 +5,14 @@
   left: 0px;
   top: 0px;
   position: absolute;
+  .show {
+    width: 596px;
+    height: 983px;
+    left: 77px;
+    top: 286px;
+    position: absolute;
+    border-radius: 20px;
+  }
   .poster {
     width: 596px;
     height: 983px;
@@ -19,6 +27,14 @@
       position: absolute;
       .sparkBg("posterPop/posteriimg.png");
     }
+    .qrcode  {
+      width: 175px;
+      height: 175px;
+      left: 46px;
+      top: 748px;
+      position: absolute;
+      border-radius: 20px;
+    }
   }
   .tips {
     width: 604px;

src/components/posterpop/posterpop.tsx

@@ -5,25 +5,53 @@ import { observer } from 'mobx-react';
 import './posterpop.less';
 
 import QRCode from 'qrcode';
-
+import html2canvas from 'html2canvas';
+import API from '@/api';
+type PosterpopState = {
+  codeImg: string;
+  shareImg: string;
+};
 @observer
-class Posterpop extends React.Component {
+class Posterpop extends React.Component<{}, PosterpopState> {
   constructor(props) {
     super(props);
-
+    this.state = {
+      codeImg: '',
+      shareImg: ''
+    }
   }
   async componentDidMount() {
-    // https://98570-activity.m.dexfu.cn/projectx/p6534784b/index.html?appKey=2vujqg1MJ4A4vogq9e22RzTa7C8S&openBs=openbs&appID=98570
-    let url = location.origin + "/projectx/"+CFG.projectId+"/index.html?appKey=2vujqg1MJ4A4vogq9e22RzTa7C8S&openBs=openbs&appID="+CFG.appID;
+    const { success, data } = await API.getInviteCode();
+    if (!success) { return }
+    alert('公众号免登还没拼上 要记得加上')
+    let url = location.origin + "/projectx/" + CFG.projectId + "/index.html?appID=" + CFG.appID + "&inviteCode=" + data.inviteCode;
     const qrcodeSrc = await QRCode.toDataURL(url);
     console.info(qrcodeSrc);
+    this.setState({ codeImg: qrcodeSrc });
+
   }
   render() {
     return (
       <div className="posterpop modal_center">
-        <div className="poster">
+        <div className="poster" id='poster'>
           <span className="posteriimg"></span>
+          {
+            this.state.codeImg && <img className='qrcode' src={this.state.codeImg} onLoad={() => {
+              // 开始截图
+              html2canvas(document.querySelector(".poster"), { allowTaint: true }).then(canvas => {
+                const base64 = canvas.toDataURL()
+                console.log(base64)
+                this.setState({
+                  shareImg: base64
+                })
+              })
+            }}></img>
+          }
+
         </div>
+        {
+          this.state.shareImg && <img className='show' src={this.state.shareImg}></img>
+        }
         <span className="tips"></span>
       </div>
     );

src/components/selectmodal/selectmodal.less

+@import "../../res.less";
+
+.selectmodal {
+  width: 750px;
+  height: 614px;
+  left: 0px;
+  bottom: 614px;
+  position: absolute;
+  animation: frombottom 300ms forwards;
+
+  .bg {
+    width: 750px;
+    height: 614px;
+    left: 0px;
+    top: 0;
+    position: absolute;
+    // .sparkBg("areaPop/bg.png");
+    background-color: #fff;
+    border-radius: 10px 10px 0 0;
+  }
+
+  .confirmbtn {
+    width: 349px;
+    height: 90px;
+    left: 0px;
+    right: 0px;
+    top: 500px;
+    margin: auto;
+    position: absolute;
+    .sparkBg("inputInfoModal/inputInfoModalConfirmBtn.png");
+  }
+
+  .dateCont {
+    width: 685px;
+    display: flex;
+    position: absolute;
+    top: 30px;
+    left: calc(50% - 685px / 2);
+    text-align: center;
+    flex-direction: row;
+
+    &::after {
+      content: "";
+      width: 722px;
+      height: 71px;
+      left: -20px;
+      top: calc(50% - 60px / 2);
+      position: absolute;
+    }
+
+    .dates {
+      width: calc(100% / 4);
+      flex: 1;
+      z-index: 1;
+    }
+
+    .hours {
+      width: calc(100% / 4);
+      flex: 1;
+      z-index: 1;
+    }
+
+    .minutes {
+      width: calc(100% / 4);
+      flex: 1;
+      z-index: 1;
+    }
+
+    .street {
+      width: calc(100% / 4);
+      flex: 1;
+      z-index: 1;
+    }
+
+    ._date {
+      width: 100%;
+      height: 380px;
+
+      .dateItem {
+        width: 100%;
+        height: 79px;
+        line-height: 79px;
+        color: rgb(116, 116, 116);
+        font-size: 36px;
+        text-align: center;
+
+        div {
+          width: 100%;
+          display: inline-block;
+          .lineClamp1();
+        }
+
+        &.swiper-slide-active {
+          font-size: 42px;
+          color: black;
+          font-weight: 700;
+        }
+      }
+    }
+  }
+
+  .close {
+    width: 49px;
+    height: 49px;
+    right: 10px;
+    top: -70px;
+    position: absolute;
+    // background-color: #000;
+    .sparkBg("selectModal/closeBtn.png");
+  }
+
+  @keyframes frombottom {
+    0% {
+      bottom: -614px;
+    }
+
+    100% {
+      bottom: 0px;
+    }
+  }
+}

src/components/selectmodal/selectmodal.tsx

+'use strict';
+
+import React from 'react';
+import { observer } from 'mobx-react';
+import './selectmodal.less';
+import { Swiper, SwiperSlide } from 'swiper/react';
+import 'swiper/swiper-bundle.css';
+import API from '@/api';
+import { _throttle } from '@/utils/utils';
+import { ModalCtrl } from '@/core/ctrls/ModalCtrl';
+// 定义 state 的类型
+interface SelectModalState {
+  provinceList: any[]; // 假设 provinceList 是数组类型，可按需调整
+  cityList: any[];
+  areaList: any[];
+  provinceCode: number;
+  cityCode: number;
+  areaCode: number;
+}
+
+// 定义 props 的类型
+interface SelectModalProps {
+  doSelect?: (data: { province: string; city: string; area: string }) => void; // 可选的 doSelect 方法
+}
+// 定义 params 类型
+interface GetParentCodeParams {
+  parentCode?: string | null;
+}
+@observer
+class Selectmodal extends React.Component<SelectModalProps, SelectModalState> {
+  constructor(props) {
+    super(props);
+    this.state = {
+      provinceList: [],
+      cityList: [],
+      areaList: [],
+      provinceCode: 0,
+      cityCode: 0,
+      areaCode: 0,
+    };
+  }
+
+  swiperRef;
+  swiperRef2;
+
+  // getParentCode
+  async componentDidMount() {
+    //获取省
+    await this.getCodeList(null, "provinceList");
+    //获取市
+    const { provinceList, provinceCode } = this.state;
+    await this.getCodeList(provinceList[provinceCode]?.adCode, "cityList");
+    //获取区
+    const { cityList, cityCode } = this.state;
+    await this.getCodeList(cityList[cityCode]?.adCode, "areaList");
+
+    //获取街道
+    const { areaList, areaCode } = this.state;
+    await this.getCodeList(areaList[areaCode]?.adCode, "streetList");
+  }
+
+  /**获取省市区接口 */
+  async getCodeList(parentCode, type) {
+    const params: GetParentCodeParams = {};
+    if (parentCode) {
+      params.parentCode = parentCode;
+    }
+    const { success, data } = await API.getParentCode(params);
+    if (success) {
+      this.setState({
+        [type]: data,
+      } as Pick<SelectModalState, typeof type>);
+    }
+  }
+
+  /**
+   * 省选择
+   * @param {*} swiper
+   */
+  onProvinceSwiper = (swiper) => {
+    if (swiper) {
+      swiper.on("slideChange", (swiper) => {
+        console.error("Slide changed!", swiper.activeIndex);
+
+        this.setState(
+          {
+            provinceCode: swiper.activeIndex,
+          },
+          async () => {
+            //获取市
+            const { provinceList } = this.state;
+            await this.getCodeList(provinceList[swiper.activeIndex]?.adCode, "cityList");
+            //获取区
+            const { cityList, cityCode } = this.state;
+            await this.getCodeList(cityList[cityCode]?.adCode, "areaList");
+
+          }
+        );
+        this.swiperRef?.slideTo(0);
+        this.swiperRef2?.slideTo(0);
+      });
+    }
+  };
+  /**
+   * 市选择
+   */
+  onCitySwiper = (swiper) => {
+    console.error("Slide changed!", swiper.activeIndex);
+
+    this.setState(
+      {
+        cityCode: swiper.activeIndex,
+      },
+      async () => {
+        //获取区
+        const { cityList } = this.state;
+        await this.getCodeList(cityList[swiper.activeIndex]?.adCode, "areaList");
+      }
+    );
+    this.swiperRef2?.slideTo(0);
+  };
+  /**
+   * 区选择
+   * @param {*} swiper
+   */
+  onAreaSwiper = (swiper) => {
+    console.error("Slide changed!", swiper.activeIndex);
+    this.setState(
+      {
+        areaCode: swiper.activeIndex,
+      }
+    );
+  };
+
+
+
+  /**
+   * 确认选择
+   */
+  doSelect = _throttle(() => {
+    const { provinceList, cityList, areaList, provinceCode, cityCode, areaCode, } = this.state;
+    const province = provinceList[provinceCode]?.name;
+    const city = cityList[cityCode]?.name;
+    const area = areaList[areaCode]?.name;
+    console.log(province + "" + city + "" + area + "");
+    //确定展示到页面
+    const { doSelect } = this.props;
+    doSelect && doSelect({ province, city, area });
+    ModalCtrl.closeModal();
+  });
+
+  onClose() {
+    ModalCtrl.closeModal();
+  }
+
+  render() {
+    const { provinceList, cityList, areaList } = this.state;
+    return (
+      <div className="selectmodal">
+        <span className="bg"></span>
+        <div className="confirmbtn" onClick={this.doSelect}></div>
+
+        <div className="dateCont">
+          <div className="dates">
+            <Swiper
+              slidesPerView={5}
+              initialSlide={0}
+              centeredSlides={true}
+              direction="vertical"
+              className="_date"
+              onSwiper={this.onProvinceSwiper}>
+              {provinceList?.map((item, index) => (
+                <SwiperSlide className="dateItem" key={index}>
+                  <div>{item?.name}</div>
+                </SwiperSlide>
+              ))}
+            </Swiper>
+          </div>
+          <div className="hours">
+            <Swiper
+              slidesPerView={5}
+              initialSlide={0}
+              centeredSlides={true}
+              direction="vertical"
+              className="_date"
+              onSwiper={(swiper) => (this.swiperRef = swiper)}
+              onSlideChange={(swiper) => this.onCitySwiper(swiper)}>
+              {cityList?.map((item, index) => (
+                <SwiperSlide className="dateItem" key={index}>
+                  <div>{item?.name}</div>
+                </SwiperSlide>
+              ))}
+            </Swiper>
+          </div>
+          <div className="minutes">
+            <Swiper
+              slidesPerView={5}
+              initialSlide={0}
+              centeredSlides={true}
+              direction="vertical"
+              className="_date"
+              onSwiper={(swiper) => (this.swiperRef2 = swiper)}
+              onSlideChange={(swiper) => this.onAreaSwiper(swiper)}>
+              {areaList?.map((item, index) => (
+                <SwiperSlide className="dateItem" key={index}>
+                  <div>{item?.name}</div>
+                </SwiperSlide>
+              ))}
+            </Swiper>
+          </div>
+        </div>
+
+        <span className="close" onClick={this.onClose}></span>
+      </div>
+    );
+  }
+}
+export default Selectmodal;

src/pages/HomePage/HomePage.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 import { observer } from 'mobx-react';
 import './HomePage.less';
 import { Button, Toast } from "@grace/ui";
-import { _asyncThrottle, miniGoUrl } from "@/utils/utils.ts";
+import { _asyncThrottle, getUrlParam, miniGoUrl } from "@/utils/utils.ts";
 import store from "@/store/store.ts";
 import { SvgaPlayer } from "@grace/svgaplayer";
 import homeSvga from "../../../src/assets/svga/2输出首页氛围.svga";
@@ -20,6 +20,7 @@ import Posterpop from '@/components/posterpop/posterpop';
 import API from '@/api';
 import Rankpage from '../rankpage/rankpage';
 import Rulepop from '@/components/rulepop/rulepop';
+import Prizepage from '../prizepage/prizepage';
 
 @observer
 class HomePage extends React.Component<any, any> {
@@ -29,18 +30,21 @@ class HomePage extends React.Component<any, any> {
   componentDidMount() {
     store.updateIndex();
     store.queryTask()
+    if (getUrlParam('inviteCode')) {
+      store.doAssist()
+    }
   }
 
   /** 开始游戏按钮*/
   startGame = _asyncThrottle(async () => {
 
-    // if (!store.judgeActTime()) return;
-    // if (store.indexData.remainTimes == 0) {
-    //   Toast.show("暂无游戏次数哦")
-    //   return;
-    // }
-    // const suc = await gameStore.start();
-    // if (!suc) return;
+    if (!store.judgeActTime()) return;
+    if (store.indexData.remainTimes == 0) {
+      Toast.show("暂无游戏次数哦")
+      return;
+    }
+    const suc = await gameStore.start();
+    if (!suc) return;
 
     PageCtrl.changePage(GamePage);
   })
@@ -48,9 +52,7 @@ class HomePage extends React.Component<any, any> {
   /** 奖品按钮*/
   clickPrize = _asyncThrottle(() => {
     if (!store.judgeActTime(true, false)) return;
-    ModalCtrl.showModal(PrizePanel, {
-      prizeVO: {},
-    });
+    PageCtrl.changePage(Prizepage)
   })
 
   /** 规则按钮*/
@@ -95,6 +97,7 @@ class HomePage extends React.Component<any, any> {
     PageCtrl.changePage(Rankpage);
   })
 
+
   render() {
     const { remainTimes, remainDrawTimes, rank } = store.indexData
     return <div className="homepage" ref={(el) => this.root = el}>
@@ -115,8 +118,8 @@ class HomePage extends React.Component<any, any> {
         </div>
       </div>
       <span className="title"></span>
-      <span className="prizebtn"></span>
-      <span className="rulebtn" onClick={this.clickRule}></span>
+      <Button className="prizebtn" onClick={this.clickPrize}></Button>
+      <Button className="rulebtn" onClick={this.clickRule}></Button>
       {/* <span className="musicon"></span>
       <span className="musicf"></span> */}
       <MusicBtn className={`${musicStore.mute ? 'musicf' : 'musicon'}`}></MusicBtn>

src/pages/prizepage/prizepage.less

@@ -15,16 +15,18 @@
   }
   .list {
     width: 668px;
-    height: 802px;
+    // height: 802px;
     left: 42px;
     top: 448px;
     position: absolute;
+    overflow-y: scroll;
     .item {
       width: 668px;
       height: 175px;
       left: 0px;
       top: 0px;
-      position: absolute;
+      position: relative;
+      margin-bottom: 30px;
       .itembg {
         width: 668px;
         height: 175px;
@@ -41,33 +43,59 @@
         position: absolute;
         .sparkBg("prizePage/arrow.png");
       }
+      .gotbtn {
+        width: 197px;
+        height: 76px;
+        left: 426px;
+        top: 47px;
+        position: absolute;
+       .sparkBg("prizePage/已领取.png");
+      }
+      .checkbtn {
+        width: 197px;
+        height: 76px;
+        left: 426px;
+        top: 47px;
+        position: absolute;
+       .sparkBg("prizePage/去查看.png");
+      }
+      .bindbtn {
+        width: 197px;
+        height: 76px;
+        left: 426px;
+        top: 47px;
+        position: absolute;
+       .sparkBg("prizePage/去领取.png");
+      }
       .name {
-        width: 154px;
-        height: 35px;
+        width: 204px;
+        height: 40px;
         left: 208px;
         top: 67px;
         position: absolute;
         font-size: 36px;
-        line-height: 35px;
+        line-height: 36px;
         color: rgba(255, 255, 255, 1);
+        .lineClamp1();
       }
       .prizeimg {
-        width: 76px;
+        width: 116px;
         height: 116px;
-        left: 63px;
+        left: 43px;
         top: 30px;
         position: absolute;
-        .sparkBg("prizePage/prizeImg.png");
-      }
-    }
-    .item2 {
-      width: 668px;
-      height: 595px;
+        // .sparkBg("prizePage/prizeImg.png");
+        img {
+          width: 116px;
+          height: 116px;
           left: 0px;
-      top: 207px;
+          top: 0px;
           position: absolute;
-      .sparkBg("prizePage/item2.png");
+          object-fit: contain;
+        }
+      }
     }
+    
   }
   .title {
     width: 436px;

src/pages/prizepage/prizepage.tsx

@@ -3,28 +3,68 @@
 import React from 'react';
 import { observer } from 'mobx-react';
 import './prizepage.less';
+import store from '@/store/store';
+import { _asyncThrottle } from '@/utils/utils';
+import { ModalCtrl } from '@/core/ctrls/ModalCtrl';
+import Inputinfomodal from '@/components/inputinfomodal/inputinfomodal';
+import { PageCtrl } from '@/core/ctrls/PageCtrl';
+import { Button } from '@grace/ui';
 
 @observer
 class Prizepage extends React.Component {
   constructor(props) {
     super(props);
   }
+  async componentDidMount() {
+    await store.getPrizeList()
+  }
+
+  receive = _asyncThrottle((item) => {
+    // modalStore.pushPop("Inputinfomodal", { item, receiveSuc: this.receiveSuc.bind(this) })
+    ModalCtrl.showModal(Inputinfomodal, { ...item, receiveSuc: this.receiveSuc.bind(this) })
+  })
+
+  async receiveSuc() {
+    await store.getPrizeList()
+  }
+
+  jumpUrl(item) {
+    console.log('jumpUrl',item)
+    location.href = `/aaw/projectx/takePrize?projectOrderNo=${item.id}`;
+  }
+  back = () => {
+    PageCtrl.backPage()
+  }
+
   render() {
     return (
       <div className="prizepage modal_center">
         <span className="bg"></span>
-        <div className="list">
-          <div className="item">
+        <div className="list" style={{ height: `${(1176 - (1624 - document.body.clientHeight * 750 / document.body.clientWidth) / 2) / 100}rem` }}>
+          {
+            store.prizeList.map((item, index) => {
+              return (
+                <div className="item" key={"prize" + index}>
                   <span className="itembg"></span>
-            <span className="arrow"></span>
-            <span className="name">奖品名称</span>
-            <span className="prizeimg"></span>
+                  {
+                    item.boolThirdObject ? item.needFillAddress ? <Button className='bindbtn' onClick={()=>this.receive(item)}></Button>
+                      : <Button className='gotbtn' ></Button>
+                      : <Button className='checkbtn' onClick={()=>this.jumpUrl(item)}></Button>
+                  }
+                  <span className="name">{item.extra.name}</span>
+                  <span className="prizeimg">
+                    <img src={item.extra.icon} />
+                  </span>
                 </div>
-          <span className="item2"></span>
+              )
+            })
+          }
         </div>
         <span className="title"></span>
-        <span className="empty"></span>
-        <span className="back"></span>
+        {
+          store.prizeList.length == 0 && <span className="empty"></span>
+        }
+        <Button className="back" onClick={this.back}></Button>
       </div>
     );
   }

src/store/store.ts

@@ -5,6 +5,7 @@ import { IWxShareInfo } from "@/built-in/share/weixin/weixin.ts";
 import { ModalCtrl } from '@/core/ctrls/ModalCtrl';
 import Ranknoprizepop from '@/components/ranknoprizepop/ranknoprizepop';
 import Rankprizepop from '@/components/rankprizepop/rankprizepop';
+import { getUrlParam } from '@/utils/utils';
 
 class Store {
 
@@ -95,50 +96,31 @@ class Store {
     }
     return true;
   }
-  taskList = [
-    {
-      desc: "11111",
-      title: "进入活动",
-      subTitle: "12313121",
-      id: "sign",
-      code: "sign",
-      icon: "//yun.duiba.com.cn/polaris/avatar.4279aa28d2b0d5a224eb5babbf5462c371079697.png",
-      intervalLimitSize: 1,
-      prizePendingCode: "sign",
-      completedSize: 0,
-      taskStatus: 1
-    },
-    {
-      desc: "11111",
-      title: "邀请助力",
-      subTitle: "12313121",
-      id: "invite",
-      code: "invite",
-      icon: "//yun.duiba.com.cn/polaris/avatar.4279aa28d2b0d5a224eb5babbf5462c371079697.png",
-      intervalLimitSize: 1,
-      prizePendingCode: "invite",
-      completedSize: 0,
-      taskStatus: 0
-    },
-    {
-      desc: "11111",
-      title: "扫码",
-      subTitle: "12313121",
-      id: "scan",
-      code: "scan",
-      icon: "//yun.duiba.com.cn/polaris/avatar.4279aa28d2b0d5a224eb5babbf5462c371079697.png",
-      intervalLimitSize: 1,
-      prizePendingCode: "scan",
-      completedSize: 0,
-      taskStatus: 0
-    }
-  ];
+  taskList = [];
   async queryTask() {
-    // const { success, data } = await API.queryTasks();
-    // if (success) {
-    //   this.taskList = data.item;
-    // }
+    const { success, data } = await API.queryTasks();
+    if (success) {
+      this.taskList = data.item;
+    }
+  }
+  async doAssist() {
+    let code = getUrlParam('inviteCode')
+    const { success, data } = await API.doAssist({ inviteCode: code });
+    if (success) {
+      Toast.show("成功为好友助力，一起来参与活动吧～");
+    }
+    history.replaceState({}, '', location.href.replace(new RegExp(`[?&]inviteCode=[^&]*`), ''));
+  }
+  prizeList = [];
+  async getPrizeList() {
+    const resp = await API.getPrizeList();
+    if (resp.success) {
+      this.prizeList = resp.data;
+    }
   }
+  province :string = '';
+  city :string = '';
+  area :string = '';
 
 }
 

src/store/活动时间校验 1h---ok.ini

+活动时间校验 1h---ok
+
+首页 3h----设计稿----ok
+    动效
+    音乐（全局）
+    排行榜信息展示
+    开始游戏 次数校验
+
+积分商城 跳转对方链接 对接 1h---这个还没
+
+任务列表 3h---设计稿----ok
+    每日登录
+    邀请助力
+    扫码
+
+
+助力流程 2h--ok
+
+助力反馈 + 助力成功/助力失败toast 1h----ok
+
+分享海报 3h---设计稿----ok
+    生成二维码
+    长按保存海报
+
+确认退出弹窗 1h---设计稿----ok
+
+游戏结束弹窗-未中奖 2h----设计稿----ok
+    排名
+    分数
+    距离奖励文案
+
+游戏结束弹窗-中奖 1h----设计稿----ok
+    排名
+    分数
+
+盲盒抽奖页面 3h----设计稿--ok
+    动效
+    奖品轮播
+    点击抽奖 动效 次数判断
+
+中奖弹窗 1h----设计稿--ok
+
+未中奖弹窗 0.5h----设计稿--ok
+
+排行榜 4h----设计稿----ok
+    倒计时
+    奖品轮播
+    列表
+
+排行榜开奖弹窗 1h -------设计稿---ok
+排行榜未中奖弹窗 ----设计稿---ok
+
+活动规则 0.5h---设计稿----ok
+
+奖品页 3h---设计稿
+    跳转对方链接
+    列表
+    缺省页
+
+埋点 2h
+
+自测联调 6
+
+总计 41
\ No newline at end of file

src/utils/errorHandler.ts

-import {Toast} from "@grace/ui";
+import { Toast } from "@grace/ui";
 
 // 需要过滤的错误码
 export const filterCode = ["600002"];
@@ -8,6 +8,11 @@ export const errMessageMap = {
   1021: "活动已结束",
   1007: "活动太火爆了，奖品已抢完咯～",
   100001: "登录过期啦，请重新登录哦～",
+  200306: "助力失败，不能给自己助力哦～",
+  200303: '助力机会已用完，一起来参与活动吧～',
+  200304: "好友今日任务已完成，明天再来助力吧～",
+  200305: "已为好友助力哦～",
+  20002: "活动已结束，感谢您的关注～"
 };
 
 /**

vite.config.ts

@@ -27,7 +27,7 @@ export default defineConfig(({mode}): UserConfig => {
 
     // console.log(UPLOAD_DIR, NODE_ENV, CDN_DOMAIN, OSS_REGION, OSS_BUCKET, OSS_ACCESS_KEY_ID, OSS_ACCESS_SECRET)
 
-    const isDev = NODE_ENV == "development";
+    const isDev = mode == "development";
 
     const versionStamp = Date.now();