Merge branch 'master' of http://gitlab2.dui88.com/sparkprojects/rb_strongestbrain_250520

mock/main.ts

@@ -9,23 +9,24 @@ export default [
         "message": "message",
         "data": {
           "actStartTimestamp": -86961592.20219234,
-          "answerChance": 61684762.582832515,
-          "rank": 85345186.95448217,
-          "uid": "laboris Lorem sit officia aliqua",
+          "answerChance": 666,
+          "rank": 1,
+          "uid": "123213",
           "currentTimestamp": 99790918.1204935,
           "actEndTimestamp": 42625488.007563084,
+          "avatar": "/src/assets/homePage/head.png",
           "privacyText":'143sjhbkrjgjkfgbjfb   fnsjnfdrhgkfngjknfcmgfcm fjkxdngjhrdkghkfxgjfb',
           "rankPop1": {
             "prizeName": null,
             "prizeImg": "//yun.duiba.com.cn/polaris/045CCBB8-F6C7-43DB-9F81-45F52430A878.441c8f13daf61c48b85fe383e764d9089f1d4a66.png",
             "rank": 825844,
           },
-          "rulePop": false,
+          "rulePop": true,
           "userId": "qui id deserunt",
           "validUid": true,
           "isAgent": true,
           "boundYkCode": "eiusmod in dolor",
-          "minim_0": 93293912
+          "agreePrivacy": true,
         }
       }
     },

src/App.tsx

@@ -25,6 +25,8 @@ import { onInitShare } from './utils/share.js';
 import { domain, ensureDomain } from "@spark/dbdomain";
 import shareStore from './store/share.js';
 
+import music from "../src/assets/audio/bgm.mp3";
+
 
 @observer
 class App extends Component {
@@ -40,6 +42,8 @@ class App extends Component {
   }
 
   async componentDidMount() {
+    musicStore.playSound( music, true);
+
     this.showDefaultPage();
 
     await store.getFrontVariable();

src/components/settlechance/settlechance.jsx

@@ -36,8 +36,10 @@ class Settlechance extends React.Component {
     const { data } = this.props || {};
     const {
       drawChance = 0,
-      title = "银河系脑洞霸主",
-      desc = "你的脑洞能凭空造出‘榴莲味wiFi’和‘会蹦迪的沙发’,建议去给科幻片当编剧，拯救全人类！",
+      title = "",
+      desc = "",
+      img = "",
+      score = 0,
     } = data || {};
     return (
       <div className="settlechance modal_center">
@@ -45,9 +47,12 @@ class Settlechance extends React.Component {
         <span className="bg"></span>
         <Button className="draw" onClick={this.handleDraw} />
         <Button className="know" onClick={this.handleKnow} />
-        <span className="icon"></span>
+        <img className="icon" 
+          src = {img}
+          alt = {title}
+        />
         <span className="ribbon"></span>
-        <span className="title">恭喜您, 答对{0}题</span>
+        <span className="title">恭喜您, 答对{score}题</span>
         <span className="tip1">获得了「{title}」称号</span>
         <span className="tip2">{desc}</span>
         <span className="tip3">恭喜获得抽奖机会+{drawChance}</span>

src/components/settlechance/settlechance.less

@@ -55,7 +55,7 @@
     left: 242px;
     top: 540px;
     position: absolute;
-    .sparkBg("settleChance/icon.png");
+    // .sparkBg("settleChance/icon.png");
   }
 
   .title {
@@ -99,7 +99,7 @@
     width: 460px;
     height: 84px;
     left: 134px;
-    top: 807px;
+    top: 817px;
     text-align: center;
     position: absolute;
     font-size: 22px;

src/components/settlenochance/settlenochance.jsx

@@ -7,6 +7,9 @@ import { Button, Toast } from '@grace/ui';
 import { _asyncThrottle } from "../../utils/utils";
 import { PageCtrl } from "@/core/ctrls/PageCtrl";
 import { ModalCtrl } from "@/core/ctrls/ModalCtrl";
+import { SvgaPlayer } from "@grace/svgaplayer";
+
+import lightSvga from "../../assets/svga/6输出弹窗.svga";
 import { LOG_KEY, MatterShareOpt, MatterViewDuration, MatterViewOpt, pageView, sensorLog } from "../../utils/sensors.js";
 
 @observer
@@ -41,17 +44,36 @@ class Settlenochance extends React.Component {
       button_name: "我知道了按钮",
     });
   }
+
+  handleClose = _asyncThrottle(() => {
+    ModalCtrl.closeModal()
+  })
+
+  handleKnow = _asyncThrottle(() => {
+    ModalCtrl.closeModal()
+  })
   render() {
+    const { data } = this.props || {};
+    const {
+      title = "",
+      desc = "",
+      img = "",
+      score = 0,
+    } = data || {};
     return (
       <div className="settlenochance modal_center">
-        <span className="dongxiao"></span>
+        <SvgaPlayer className="light" src={lightSvga} />
         <span className="bg"></span>
-        <span className="know"></span>
-        <span className="icon"></span>
-        <span className="title"></span>
-        <span className="tip1">获得了「宇宙菜鸟」称号</span>
-        <span className="tip2">你的脑洞像刚解冻的冰棍——梆硬且毫无波澜，建议多喝热水重启大脑！</span>
-        <span className="close"></span>
+        <Button className="know" onClick={this.handleKnow} />
+        <img className="icon" 
+          src = {img}
+          alt = {title}
+        />
+        <span className="ribbon"></span>
+        <span className="title">恭喜您, 答对{score}题</span>
+        <span className="tip1">获得了「{title}」称号</span>
+        <span className="tip2">{desc}</span>
+        <Button className="close" onClick={this.handleClose} />
       </div>
     );
   }

src/components/settlenochance/settlenochance.less

 @import "../../res.less";
+
 .settlenochance {
   width: 750px;
   height: 1624px;
   left: 0px;
   top: 0px;
   position: absolute;
-  .dongxiao {
+
+  @font-face {
+    font-family: "MaokenAssortedSans";
+    src: url('/src/assets/font/MaokenAssortedSans.ttf') format('truetype');
+    // font-display: swap;
+  }
+  
+  .light {
     width: 750px;
-    height: 1008px;
+    height: 1624px;
     left: 0px;
-    top: 324px;
+    // top: 213px;
     position: absolute;
-    .sparkBg("settleNoChance/dongxiao.png");
+    // .sparkBg("settleChance/dongxiao.png");
   }
+
   .bg {
     width: 606px;
     height: 724px;
@@ -21,6 +30,7 @@
     position: absolute;
     .sparkBg("settleNoChance/bg.png");
   }
+
   .know {
     width: 263px;
     height: 92px;
@@ -29,41 +39,71 @@
     position: absolute;
     .sparkBg("settleNoChance/know.png");
   }
+
   .icon {
     width: 198px;
     height: 198px;
     left: 271px;
     top: 686px;
     position: absolute;
-    .sparkBg("settleNoChance/icon.png");
+    // .sparkBg("settleNoChance/icon.png");
   }
+
   .title {
+    // width: 636px;
+    width: 750px;
+    height: 201px;
+    // left: 138px;
+    left: -10px;
+    top: 288+100px;
+    font-size: 62px;
+    text-align: center;
+    position: absolute;
+    color: rgb(255, 245, 214);
+    font-family: "MaokenAssortedSans";
+  }
+
+  .ribbon {
     width: 636px;
     height: 201px;
-    left: 32px;
-    top: 325px;
+    left: 30px;
+    top: 214+100px;
     position: absolute;
-    .sparkBg("settleNoChance/title.png");
+    .sparkBg("settleChance/ribbon.png");
   }
+
   .tip1 {
-    width: 338px;
-    height: 29px;
-    left: 200px;
+    width: 460px;
+    height: 33px;
+    left: 134px;
     top: 599px;
+    text-align: center;
     position: absolute;
     font-size: 30px;
-    line-height: 29px;
+    line-height: 33px;
     color: rgba(153, 57, 27, 1);
+    font-weight: bold;
+    .lineClamp1();
   }
+
   .tip2 {
-    width: 429px;
-    height: 55px;
-    left: 156px;
-    top: 935px;
+    width: 460px;
+    height: 84px;
+    left: 134px;
+    top: 925px;
+    text-align: center;
     position: absolute;
-    font-size: 21px;
+    font-size: 22px;
+    line-height: 38px;
     color: rgba(169, 90, 62, 1);
+    // .lineClamp1();
+    display: -webkit-box;
+    -webkit-line-clamp: 2;
+    -webkit-box-orient: vertical;
+    overflow: hidden;
+    text-overflow: ellipsis;
   }
+
   .close {
     width: 64px;
     height: 64px;
@@ -72,4 +112,4 @@
     position: absolute;
     .sparkBg("settleNoChance/close.png");
   }
-}
+}
\ No newline at end of file

src/pages/GamePage/Game.ts

@@ -18,10 +18,12 @@ import { Level13 } from "@/pages/GamePage/Level/Level13.ts";
 import { Level14 } from "@/pages/GamePage/Level/Level14.ts";
 import { Level15 } from "@/pages/GamePage/Level/Level15.ts";
 import { Level18 } from "@/pages/GamePage/Level/Level18.ts";
+import { Level19 } from "@/pages/GamePage/Level/Level19.ts";
 import { Level20 } from "@/pages/GamePage/Level/Level20.ts";
 import { Level21 } from "@/pages/GamePage/Level/Level21.ts";
 import { Level22 } from "@/pages/GamePage/Level/Level22.ts";
 import { Level23 } from "@/pages/GamePage/Level/Level23.ts";
+import { Level24 } from "@/pages/GamePage/Level/Level24.ts";
 import gameStore from "@/store/gameStore.ts";
 import { LevelArr } from "@/pages/GamePage/Level/LevelConfig.ts";
 import { LevelBase } from "@/pages/GamePage/Components/LevelBase.ts";
@@ -35,7 +37,7 @@ export class Game extends Base {
     const qsBg = this.addChild(new Sprite(Assets.get("问题.png")));
     qsBg.position.set(49, 316);
 
-    this.level = this.addChild(new Level11());
+    this.level = this.addChild(new Level24());
     globalEvent.on(GameEvent.NextLevel, this.nextLevel, this);
 
     // this.nextLevel();

src/pages/GamePage/Level/Level19.ts

+import { LevelBase } from "@/pages/GamePage/Components/LevelBase.ts";
+import { Assets, Sprite } from "pixi.js";
+import { Ease, Tween } from "@/core/tween";
+import { GameEvent, globalEvent } from "@/pages/GamePage/GameEvent.ts";
+
+export class Level19 extends LevelBase {
+
+  level: number = 19;
+
+  A: Sprite;
+
+  right: Sprite;
+  error: Sprite;
+
+  // 双指缩放相关属性
+  private initialDistance: number = 0;
+  private initialScale: number = 1;
+  private isTouching: boolean = false;
+  private touchPoints: Map<number, { x: number, y: number }> = new Map();
+
+  onLoad() {
+    super.onLoad();
+
+    this.addChild(new Sprite(Assets.get(`level${this.level}/img.png`)))
+      .position.set(0, 868);
+
+    this.A = this.addChild(new Sprite(Assets.get(`level${this.level}/船.png`)));
+    this.A.anchor.set(0.4, 0.4);
+    this.A.position.set(430, 1100);
+    this.A.scale.set(0.5948827292110874);
+
+    this.right = this.addChild(new Sprite(Assets.get(`level${this.level}/right.png`)));
+    this.right.position.set(613, 1104);
+    this.right.alpha = 0;
+    this.right.interactive = false;
+    this.right.eventMode = "none";
+
+    this.A.on("pointerdown", this.onPointerDown, this);
+    this.A.on("globalpointermove", this.onPointerMove, this);
+    this.A.on("pointerup", this.onPointerUp, this);
+    this.A.on("pointerupoutside", this.onPointerUp, this);
+  }
+
+  onPointerDown(e) {
+    console.log("pointerdown", e.pointerId, e.data.global);
+
+    // 记录触摸点
+    this.touchPoints.set(e.pointerId, {
+      x: e.data.global.x,
+      y: e.data.global.y
+    });
+
+    // 如果有两个触摸点，开始缩放
+    if (this.touchPoints.size === 2) {
+      const points = Array.from(this.touchPoints.values());
+      this.initialDistance = this.getDistance(points[0], points[1]);
+      this.initialScale = this.A.scale.x;
+      this.isTouching = true;
+      console.log("开始缩放", this.initialDistance, this.initialScale);
+    }
+  }
+
+  onPointerMove(e) {
+    if (!this.touchPoints.has(e.pointerId)) return;
+
+    // 更新触摸点位置
+    this.touchPoints.set(e.pointerId, {
+      x: e.data.global.x,
+      y: e.data.global.y
+    });
+
+    if (this.isTouching && this.touchPoints.size === 2) {
+      const points = Array.from(this.touchPoints.values());
+      const currentDistance = this.getDistance(points[0], points[1]);
+
+      // 计算缩放比例
+      const scaleRatio = currentDistance / this.initialDistance;
+      const newScale = this.initialScale * scaleRatio;
+
+      // 限制最小和最大缩放
+      const finalScale = Math.max(0.5, Math.min(newScale, 5));
+      this.A.scale.set(finalScale);
+
+      console.log("缩放中", currentDistance, scaleRatio, finalScale);
+
+      // 检查是否达到目标大小
+      this.checkSize();
+    }
+  }
+
+  onPointerUp(e) {
+    console.log("pointerup", e.pointerId);
+
+    // 移除触摸点
+    this.touchPoints.delete(e.pointerId);
+
+    // 如果少于两个触摸点，停止缩放
+    if (this.touchPoints.size < 2) {
+      this.isTouching = false;
+      console.log("停止缩放");
+    }
+  }
+
+  getDistance(point1: { x: number, y: number }, point2: { x: number, y: number }): number {
+    const dx = point1.x - point2.x;
+    const dy = point1.y - point2.y;
+    return Math.sqrt(dx * dx + dy * dy);
+  }
+
+  checkSize() {
+    if (this.A.scale.x >= 1) {
+      this.triggerSuccess();
+    }
+  }
+
+  triggerSuccess() {
+    // 防止重复触发
+    if (this.right.alpha > 0) return;
+
+    this.setTouchEnable(false);
+
+    Tween.get(this.right)
+      .to({ alpha: 1 }, 444, Ease.quadInOut)
+      .wait(2000)
+      .call(() => {
+        globalEvent.emit(GameEvent.NextLevel);
+      });
+  }
+
+  onDestroy() {
+    super.onDestroy();
+    Tween.removeTweens(this.A);
+    Tween.removeTweens(this.right);
+
+    // 移除触摸事件监听
+    this.A.off("pointerdown", this.onPointerDown, this);
+    this.A.off("globalpointermove", this.onPointerMove, this);
+    this.A.off("pointerup", this.onPointerUp, this);
+    this.A.off("pointerupoutside", this.onPointerUp, this);
+  }
+}

src/pages/GamePage/Level/Level24.ts

+import { LevelBase } from "@/pages/GamePage/Components/LevelBase.ts";
+import { Assets, Sprite } from "pixi.js";
+import { Ease, Tween } from "@/core/tween";
+import { GameEvent, globalEvent } from "@/pages/GamePage/GameEvent.ts";
+
+export class Level24 extends LevelBase {
+
+  level: number = 24;
+
+  balls: Sprite[] = [];
+  right: Sprite;
+  error: Sprite;
+
+  // 拖拽相关属性
+  private dragData: { ball: Sprite, offset: { x: number, y: number } } | null = null;
+
+  onLoad() {
+    super.onLoad();
+
+    // 创建四个球，并添加到balls数组中
+    const ballA = this.addChild(new Sprite(Assets.get(`level${this.level}/球.png`)));
+    ballA.position.set(125, 710);
+    ballA.scale.set(134 / 378);
+    this.balls.push(ballA);
+
+    const ballB = this.addChild(new Sprite(Assets.get(`level${this.level}/球.png`)));
+    ballB.position.set(434, 685);
+    ballB.scale.set(182 / 378);
+    this.balls.push(ballB);
+
+    const ballC = this.addChild(new Sprite(Assets.get(`level${this.level}/球.png`)));
+    ballC.position.set(205, 982);
+    ballC.scale.set(90 / 378);
+    this.balls.push(ballC);
+
+    const ballD = this.addChild(new Sprite(Assets.get(`level${this.level}/球.png`)));
+    ballD.position.set(410, 926);
+    ballD.scale.set(156 / 378);
+    this.balls.push(ballD);
+
+    this.right = this.addChild(new Sprite(Assets.get(`common/right.png`)));
+    this.right.position.set(613, 1104);
+    this.right.alpha = 0;
+    this.right.interactive = false;
+    this.right.eventMode = "none";
+
+    // 为每个球添加拖拽事件
+    this.balls.forEach((ball) => {
+      ball.on("pointerdown", this.onBallPointerDown, this);
+      ball.on("globalpointermove", this.onBallPointerMove, this);
+      ball.on("pointerup", this.onBallPointerUp, this);
+      ball.on("pointerupoutside", this.onBallPointerUp, this);
+    });
+  }
+
+  onBallPointerDown(e) {
+    const ball = e.currentTarget as Sprite;
+    console.log("开始拖拽球", ball);
+    
+    this.dragData = {
+      ball: ball,
+      offset: {
+        x: e.data.global.x - ball.x,
+        y: e.data.global.y - ball.y
+      }
+    };
+    
+    // 将当前球置于最上层
+    this.setChildIndex(ball, this.children.length - 1);
+  }
+
+  onBallPointerMove(e) {
+    if (!this.dragData) return;
+
+    // 更新球的位置
+    this.dragData.ball.x = e.data.global.x - this.dragData.offset.x;
+    this.dragData.ball.y = e.data.global.y - this.dragData.offset.y;
+  }
+
+  onBallPointerUp(e) {
+    if (!this.dragData) return;
+
+    const draggedBall = this.dragData.ball;
+    this.dragData = null;
+
+    // 检查是否与其他球发生碰撞并合成
+    this.checkMerge(draggedBall);
+  }
+
+  checkMerge(draggedBall: Sprite) {
+    for (const ball of this.balls) {
+      if (ball === draggedBall) continue;
+      
+      // 计算两球中心点的距离（由于锚点为默认值，需要加上半径偏移）
+      const draggedCenterX = draggedBall.x + (draggedBall.width / 2);
+      const draggedCenterY = draggedBall.y + (draggedBall.height / 2);
+      const ballCenterX = ball.x + (ball.width / 2);
+      const ballCenterY = ball.y + (ball.height / 2);
+      
+      const distance = this.getDistance(
+        { x: draggedCenterX, y: draggedCenterY },
+        { x: ballCenterX, y: ballCenterY }
+      );
+      
+      // 计算两球的半径
+      const draggedRadius = draggedBall.width / 2;
+      const ballRadius = ball.width / 2;
+      
+      // 如果两球接触（距离小于两球半径之和）
+      if (distance < draggedRadius + ballRadius) {
+        console.log("球碰撞，开始合成");
+        this.mergeBalls(draggedBall, ball);
+        return;
+      }
+    }
+  }
+
+  mergeBalls(ball1: Sprite, ball2: Sprite) {
+    // 计算新球的位置（两球中心点的中点，然后转换回左上角坐标）
+    const ball1CenterX = ball1.x + (ball1.width / 2);
+    const ball1CenterY = ball1.y + (ball1.height / 2);
+    const ball2CenterX = ball2.x + (ball2.width / 2);
+    const ball2CenterY = ball2.y + (ball2.height / 2);
+    
+    const newCenterX = (ball1CenterX + ball2CenterX) / 2;
+    const newCenterY = (ball1CenterY + ball2CenterY) / 2;
+    
+    // 计算新球的大小（使用更小的增长幅度）
+    const scaleIncrease = Math.min(ball1.scale.x, ball2.scale.x) * 0.4; // 增长幅度减小为较小球的30%
+    const newScale = Math.min(Math.max(ball1.scale.x, ball2.scale.x) + scaleIncrease, 1.2); // 最大限制调整为1.2
+    
+    // 移除较小的球，保留较大的球作为合成结果
+    const keepBall = ball1.scale.x >= ball2.scale.x ? ball1 : ball2;
+    const removeBall = ball1.scale.x >= ball2.scale.x ? ball2 : ball1;
+    
+    // 从balls数组中移除被合成的球
+    const removeIndex = this.balls.indexOf(removeBall);
+    if (removeIndex > -1) {
+      this.balls.splice(removeIndex, 1);
+    }
+    
+    // 移除被合成的球的事件监听
+    removeBall.off("pointerdown", this.onBallPointerDown, this);
+    removeBall.off("globalpointermove", this.onBallPointerMove, this);
+    removeBall.off("pointerup", this.onBallPointerUp, this);
+    removeBall.off("pointerupoutside", this.onBallPointerUp, this);
+    
+    // 计算新位置（左上角坐标）
+    const newSize = 378 * newScale;
+    const newX = newCenterX - (newSize / 2);
+    const newY = newCenterY - (newSize / 2);
+    
+    // 播放合成动画
+    Tween.get(keepBall)
+      .to({ x: newX, y: newY, scaleX: newScale, scaleY: newScale }, 300, Ease.quadOut)
+      .call(() => {
+        // 移除被合成的球
+        this.removeChild(removeBall);
+        
+        // 检查是否通关
+        this.checkWinCondition();
+      });
+      
+    Tween.get(removeBall)
+      .to({ alpha: 0, scaleX: 0, scaleY: 0 }, 300, Ease.quadOut);
+  }
+
+  checkWinCondition() {
+    console.log("检查通关条件，剩余球数:", this.balls.length);
+    
+    // 如果只剩一个球
+    if (this.balls.length === 1) {
+      console.log("达到通关条件");
+      this.triggerSuccess();
+    }
+  }
+
+  getDistance(point1: { x: number, y: number }, point2: { x: number, y: number }): number {
+    const dx = point1.x - point2.x;
+    const dy = point1.y - point2.y;
+    return Math.sqrt(dx * dx + dy * dy);
+  }
+
+  triggerSuccess() {
+    // 防止重复触发
+    if (this.right.alpha > 0) return;
+
+    console.log("开始通关动画");
+    this.setTouchEnable(false);
+    
+    // 获取最后一个球
+    const lastBall = this.balls[0];
+    
+    // 计算屏幕中间位置（假设屏幕尺寸为720x1280）
+    const screenCenterX = 360;
+    const screenCenterY = 940;
+    
+    // 计算球移动到屏幕中间时的位置（左上角坐标）
+    const ballTargetX = screenCenterX - (lastBall.width / 2);
+    const ballTargetY = screenCenterY - (lastBall.height / 2);
+    
+    // 球移动到屏幕中间的动画
+    Tween.get(lastBall)
+      .to({ x: ballTargetX, y: ballTargetY }, 600, Ease.quadInOut)
+      .call(() => {
+        // 球到达中间后，计算right的位置（球的右下角）
+        const rightX = lastBall.x + lastBall.width - this.right.width + 20; // 稍微偏移一点
+        const rightY = lastBall.y + lastBall.height - this.right.height + 20;
+        
+        // 设置right的位置
+        this.right.position.set(rightX, rightY);
+        
+        // 显示right图标并完成通关
+        Tween.get(this.right)
+          .to({ alpha: 1 }, 444, Ease.quadInOut)
+          .wait(2000)
+          .call(() => {
+            globalEvent.emit(GameEvent.NextLevel);
+          });
+      });
+  }
+
+  onDestroy() {
+    super.onDestroy();
+    
+    // 移除所有球的tween动画
+    this.balls.forEach(ball => {
+      Tween.removeTweens(ball);
+      ball.off("pointerdown", this.onBallPointerDown, this);
+      ball.off("globalpointermove", this.onBallPointerMove, this);
+      ball.off("pointerup", this.onBallPointerUp, this);
+      ball.off("pointerupoutside", this.onBallPointerUp, this);
+    });
+    
+    Tween.removeTweens(this.right);
+  }
+}

src/pages/GamePage/Level/LevelConfig.ts

@@ -13,10 +13,12 @@ import { Level13 } from "@/pages/GamePage/Level/Level13.ts";
 import { Level14 } from "@/pages/GamePage/Level/Level14.ts";
 import { Level15 } from "@/pages/GamePage/Level/Level15.ts";
 import { Level18 } from "@/pages/GamePage/Level/Level18.ts";
+import { Level19 } from "@/pages/GamePage/Level/Level19.ts";
 import { Level20 } from "@/pages/GamePage/Level/Level20.ts";
 import { Level21 } from "@/pages/GamePage/Level/Level21.ts";
 import { Level22 } from "@/pages/GamePage/Level/Level22.ts";
 import { Level23 } from "@/pages/GamePage/Level/Level23.ts";
+import { Level24 } from "@/pages/GamePage/Level/Level24.ts";
 
 
 export const LevelArr = [
@@ -38,11 +40,11 @@ export const LevelArr = [
   { cls: Level14, tip: `移动笼子罩住小鸭子` }, // 16
   { cls: Level14, tip: `别忘了，人是高等动物哦` }, // 17
   { cls: Level18, tip: `移开乌云露出太阳<br/>让冰块融化` },
-  { cls: Level14, tip: `将冰箱放大至能够装下长颈鹿` }, // 19
+  { cls: Level19, tip: `将冰箱放大至能够装下长颈鹿` },
   { cls: Level20, tip: `别忘了把题目也装进箱子里` },
   { cls: Level21, tip: `移动鸡蛋，碰一碰便知` },
   { cls: Level22, tip: `移开圣诞老人的衣服看看` },
   { cls: Level23, tip: `一样重` },
-  { cls: Level23, tip: `将雪球合在一起滚成大雪球` }, // 24
+  { cls: Level24, tip: `将雪球合在一起滚成大雪球` },
   { cls: Level23, tip: `按住小猪鼻子，把它憋醒` }, // 25
 ];

src/pages/HomePage/HomePage.less

@@ -103,14 +103,16 @@
       .sparkBg("homePage/answer.png");
     }
     .remain {
-      width: 125px;
-      height: 21px;
-      left: 161px;
+      width: 422px;
+      height: 24px;
+      // left: 161px;
       top: 94px;
+      text-align: center;
       position: absolute;
       font-size: 21px;
-      line-height: 21px;
+      line-height: 24px;
       color: rgba(170, 64, 0, 1);
+      .lineClamp1();
     }
   }
   .rank {
@@ -128,14 +130,15 @@
       .sparkBg("homePage/r_bg.png");
     }
     .name {
-      width: 233px;
-      height: 29px;
+      width: 300px;
+      height: 33px;
       left: 145px;
       top: 67px;
       position: absolute;
       font-size: 30px;
-      line-height: 29px;
+      line-height: 33px;
       color: rgba(30, 76, 169, 1);
+      .lineClamp1();
     }
     .head {
       width: 95px;
@@ -143,7 +146,8 @@
       left: 37px;
       top: 34px;
       position: absolute;
-      .sparkBg("homePage/head.png");
+      // .sparkBg("homePage/head.png");
+      border-radius: 15px;
     }
     .myrank {
       width: 104px;
@@ -154,14 +158,16 @@
       .sparkBg("homePage/myRank.png");
     }
     .number {
-      width: 125px;
-      height: 52px;
-      left: 469px;
-      top: 39px;
+      width: 180px;
+      height: 70px;
+      left: 439px;
+      top: 32px;
+      text-align: center;
       position: absolute;
-      font-size: 68px;
-      line-height: 52px;
+      font-size: 60px;
+      line-height: 70px;
       color: rgba(30, 76, 169, 1);
+      .lineClamp1();
     }
   }
   .prize {
@@ -204,4 +210,12 @@
     position: absolute;
     .sparkBg("homePage/logo.png");
   }
+
+  .musicBtn {
+    position: absolute;
+    left: 20px;
+    top: 590px;
+    width: 47px;
+    height: 47px;
+  }
 }
\ No newline at end of file

src/pages/HomePage/HomePage.tsx

@@ -9,6 +9,7 @@ import { PageCtrl } from "@/core/ctrls/PageCtrl";
 import { ModalCtrl } from "@/core/ctrls/ModalCtrl";
 import Rulepop from "../../components/rulepop/rulepop.jsx";
 import CapsulePage from "../CapsulePage/CapsulePage.jsx";
+import { isWeiXin } from "../../AppTools.ts";
 import store from '@/store/store';
 import Taskpop from '@/panels/taskpop/taskpop.jsx';
 import Yinsirulepop from '@/panels/yinsirulepop/yinsirulepop.jsx';
@@ -19,8 +20,7 @@ import { LOG_KEY, MatterShareOpt, MatterViewDuration, MatterViewOpt, pageView, s
 import { CHANNEL_PARAMS, extranceName } from '@/utils/constants.js';
 import gameStore from "@/store/gameStore.ts";
 import GamePage from "@/pages/GamePage/GamePage.tsx";
-
-import Settlechance from "../../components/settlechance/settlechance.jsx"
+import MusicBtn from '@/core/components/MusicBtn/MusicBtn.tsx';
 
 @observer
 class Homepage extends React.Component {
@@ -31,6 +31,9 @@ class Homepage extends React.Component {
   }
 
   async componentDidMount() {
+    if (isWeiXin()) {
+      if (!await store.checkBindStatus()) return;
+    }
     await store.updateIndex();
     await shareStore.doAssist();
     this.initSensor();
@@ -102,7 +105,7 @@ class Homepage extends React.Component {
         } else {
           PageCtrl.changePage(MyPrize);
         }
-        
+
         break;
 
       // 5 活动规则
@@ -111,7 +114,7 @@ class Homepage extends React.Component {
           page_name: "活动首页",
           button_name: "规则按钮",
         });
-        ModalCtrl.showModal(Settlechance);
+        ModalCtrl.showModal(Rulepop);
         break;
 
       // 6 拜访清单
@@ -188,6 +191,7 @@ class Homepage extends React.Component {
     });
   };
   render() {
+    const { uid, avatar, rank, answerChance } = store?.indexData || {}
     return (
       <div className="homepage">
         <span className="bg"></span>
@@ -197,13 +201,16 @@ class Homepage extends React.Component {
         <span className="brain"></span>
         <span className="wenhao"></span>
         <span className="title"></span>
-        {/* 按钮 共7个 */}
+        {/* 按钮 */}
         <div className="rank">
           <span className="r_bg"></span>
-          <span className="name">用户uid:132802</span>
-          <span className="head"></span>
+          <span className="name">用户UID:{uid}</span>
+          <img className="head"
+            src={avatar}
+            alt=''
+          />
           <Button className="myrank" onClick={() => this.handleButtonClick(0)} />
-          <span className="number">000</span>
+          <span className="number">{rank === null ? '未参与' : rank === -1 ? '未上榜' : rank}</span>
         </div>
         <span className="logo"></span>
         <Button className="draw" onClick={() => this.handleButtonClick(1)} />
@@ -211,12 +218,14 @@ class Homepage extends React.Component {
         <Button className="matter" onClick={() => this.handleButtonClick(3)}>
           <span className="m_bg"></span>
           <span className="answer"></span>
-          <span className="remain">剩余次数：3</span>
+          <span className="remain">剩余次数：{answerChance}</span>
         </Button>
         <Button className="prize" onClick={() => this.handleButtonClick(4)} />
         <Button className="rule" onClick={() => this.handleButtonClick(5)} />
         <Button className="visit" onClick={() => this.handleButtonClick(6)} />
         <Button className="share" onClick={() => this.handleButtonClick(7)} />
+
+        <MusicBtn className="musicBtn" />
       </div>
     );
   }

src/store/store.ts

@@ -2,7 +2,7 @@ import { makeAutoObservable, } from 'mobx';
 import API from '../api/index';
 import { Toast } from "@grace/ui";
 import { initWx, IWxShareInfo } from "@/built-in/share/weixin/weixin.ts";
-import { _asyncThrottle, _debounce, getUrlParam } from '@/utils/utils';
+import { _asyncThrottle, _debounce, getUrlParam, waitTime } from '@/utils/utils';
 // import { IBubbleInfo } from "@/pages/HomePage/Top/Components/Bubble.ts";
 // import { IOverflowBubbleInfo } from "@/pages/HomePage/Top/Components/OverflowBubble.ts";
 import { getDomain } from '@spark/dbdomain';
@@ -10,6 +10,8 @@ import { showShareGuide } from '@spark/share';
 import { ModalCtrl } from '@/core/ctrls/ModalCtrl';
 import RankPrizePop from '@/panels/RankPrizePop/RankPrizePop';
 import RankNoPrizePop from '@/panels/RankNoPrizePop/RankNoPrizePop';
+import RulePop from "../components/rulepop/rulepop.jsx";
+import LoginPop from "../components/loginpop/loginpop.jsx"
 
 class Store {
 
@@ -24,12 +26,12 @@ class Store {
     shareInfo: any,
     ruleImg?: string,
   } = {
-    shareInfo: {
-      title: "",
-      desc: "",
-      imgUrl: "",
-    },
-  };
+      shareInfo: {
+        title: "",
+        desc: "",
+        imgUrl: "",
+      },
+    };
 
   ruleInfo = '';
 
@@ -51,44 +53,57 @@ class Store {
     console.log('前端开发配置', data)
   }
 
+  /** 绑定手机号接口返回状态 */
+  isApiCheckBack: false
+  setIsApiCheckBack(status) {
+    this.isApiCheckBack = status;
+  }
+  /** 校验是否绑定手机号 */
+  async checkBindStatus() {
+    const { success, data } = await API.checkBind({
+      appId: getUrlParam("appId"),
+      dbredirect: encodeURIComponent(window.location.href),
+    });
+    console.info("%c data", "font-size: 30px", data);
+    if (success && data) {
+      if (data?.bind) {
+        if (data?.url) {
+          location.replace(data?.url);
+        } else {
+          // 已经绑定过，跳转完后端返回的免登链接时，展示页面
+          this.setIsApiCheckBack(true); // 助力
+          return true;
+        }
+      } else {
+        this.setIsApiCheckBack(true);
+        ModalCtrl.showModal(LoginPop);
+      }
+      await waitTime(200);
+    }
+    return false;
+  }
+
   indexData: {
-    actStartTime?: number,
-    actEndTime?: number,
-    currentTime?: number,
-
-    guideFlag?: boolean,
-    creditsNum?: number,
-    expireDays?: number,
-    currentStoreNum?: number,
-    storeLimitNum?: number,
-    continueSignDays?: number,
-    todaySignFlag?: boolean,
-    signRecords?: {
-      id: string,
-      day: number,
-      creditsNum: number,
-      boolSign: boolean,
-    }[],
-
-    // overflowBubble?: IOverflowBubbleInfo,
-
-    // bubbleRecords?: IBubbleInfo[],
-
-    returnAwardCreditsNum?: number,
-
-    downGoldVo?: {
-      creditsNum: number,
-      multipleValue: number,
-      taskId: string,
-      url: string,
+    actStartTime?: number,  // 对应mock中的actStartTimestamp
+    actEndTime?: number,    // 对应mock中的actEndTimestamp
+    currentTime?: number,   // 对应mock中的currentTimestamp
+    
+    answerChance?: number,
+    rank?: number,
+    uid?: string,
+    avatar?: string,
+    isAgent?: boolean,
+    agreePrivacy?: boolean,
+    boundYkCode?: string,
+    validUid?: boolean,
+    rulePop?: boolean,
+    rankPop?: {
+      prizeName?: string | null,
+      prizeImg?: string,
+      rank?: number
     },
-    isAgent:string,
-    agreePrivacy:boolean,
 
-  } = {
-    isAgent: '',
-    agreePrivacy: false
-  };
+  } = {};
   firstIn = true;
   async updateIndex() {
     const { success, data } = await API.index();
@@ -113,19 +128,23 @@ class Store {
       }
     }
 
-    if(this.firstIn && data.validUid){
+    if (this.firstIn && data.validUid) {
       API.visit()
       this.firstIn = false
     }
 
-    if(data?.rankPop){
-      if(data?.rankPop?.prizeName){
-        ModalCtrl.showModal(RankPrizePop,{
-          prize:data?.rankPop
+    if (data.rulePop) {
+      ModalCtrl.showModal(RulePop)
+    }
+
+    if (data?.rankPop) {
+      if (data?.rankPop?.prizeName) {
+        ModalCtrl.showModal(RankPrizePop, {
+          prize: data?.rankPop
         })
-      }else{
-        ModalCtrl.showModal(RankNoPrizePop,{
-          prize:data?.rankPop
+      } else {
+        ModalCtrl.showModal(RankNoPrizePop, {
+          prize: data?.rankPop
         })
       }
     }