replace index

src/pages/drawpage/drawpage.jsx

-'use strict';
+"use strict";
 
-import React from 'react';
-import { observer } from 'mobx-react';
-import './drawpage.less';
-import API from '@src/api';
-import { _asyncThrottle, _throttle } from '@src/utils/utils';
-import modalStore from '@src/store/modal';
-import store from '@src/store';
-import { PAGE_MAP } from '@src/utils/constants';
-import { CircleTurntable } from '@spark/circle-turntable'
-import { pageLeave, sensorMdClick, sensorMdExpouse } from '@src/utils/sensorMd';
-import { Button } from '@src/components/Button';
+import React from "react";
+import { observer } from "mobx-react";
+import "./drawpage.less";
+import API from "@src/api";
+import { _asyncThrottle, _throttle } from "@src/utils/utils";
+import modalStore from "@src/store/modal";
+import store from "@src/store";
+import { PAGE_MAP } from "@src/utils/constants";
+import { CircleTurntable } from "@spark/circle-turntable";
+import { pageLeave, sensorMdClick, sensorMdExpouse } from "@src/utils/sensorMd";
+import { Button } from "@src/components/Button";
 
 @observer
 class Drawpage extends React.Component {
@@ -18,119 +18,120 @@ class Drawpage extends React.Component {
     super(props);
     this.state = {
       drawInfo: {},
-    }
-    this.btnStarting = false  // 转盘是否启动
-    this.turntableRef = null  // 大转盘 
-    this.drawResultInfo = {}
+    };
+    this.btnStarting = false; // 转盘是否启动
+    this.turntableRef = null; // 大转盘
+    this.drawResultInfo = {};
   }
 
   async componentDidMount() {
-    await this.getDrawInfo()
-    sensorMdExpouse("activityPage", { pageName: "抽奖页", follow_action: this.props?.is_from == 'result' ? 4 : 2 });
+    await this.getDrawInfo();
+    sensorMdExpouse("activityPage", { pageName: "抽奖页", follow_action: this.props?.is_from == "result" ? 4 : 2 });
     pageLeave("抽奖页", 5);
   }
 
   /** 获取转盘信息 */
   getDrawInfo = async () => {
-    const { success, data } = await API.drawIndex()
+    const { success, data } = await API.drawIndex();
     if (success && data) {
       this.setState({
         drawInfo: data || {},
-      })
+      });
     }
-  }
+  };
 
   // 开始抽奖
   lottteryHandle = _asyncThrottle(async () => {
-    const { actPrizeList, remainDrawTimes } = this.state.drawInfo
+    const { actPrizeList, remainDrawTimes } = this.state.drawInfo;
     sensorMdClick("activityClick", { pageName: "抽奖页点击", buttonName: "开始抽奖" });
     // 无抽奖次数
     if (!remainDrawTimes) {
       return modalStore.pushPop("Drawchancepop", {
-        refresh: () => this.getDrawInfo()
-      })
+        refresh: () => this.getDrawInfo(),
+      });
     }
 
-    if (this.btnStarting) return false
-    this.btnStarting = true
-    const { success, data } = await API.drawJoin()
+    if (this.btnStarting) return false;
+    this.btnStarting = true;
+    const { success, data } = await API.drawJoin();
     if (success && data) {
       // 转盘转动开始抽奖
-      this.turntableRef.launch()
-      this.drawResultInfo = data || {}
+      this.turntableRef.launch();
+      this.drawResultInfo = data || {};
 
       // 转盘停止转动，指针停在index
-      const index = actPrizeList?.findIndex(item => item.prizeId === this.drawResultInfo.prizeId)
-      console.info('index', index)
+      const index = actPrizeList?.findIndex((item) => item.prizeId === this.drawResultInfo.prizeId);
+      console.info("index", index);
       // !important 注意：randomOffset设置为false，这样每次旋转的偏移量就不是随机滴啦
       this.turntableRef.braking(index, { immediately: false, randomOffset: false });
     } else {
-      this.btnStarting = false
-      this.getDrawInfo()
+      this.btnStarting = false;
+      this.getDrawInfo();
     }
-  })
+  });
 
   // 转盘停止处理
   stopOkHandle = () => {
-    this.btnStarting = false
+    this.btnStarting = false;
 
     if (this.drawResultInfo?.prizeId == "thanks") {
-      modalStore.pushPop("Drawfailpop")
+      modalStore.pushPop("Drawfailpop");
     } else {
-      modalStore.pushPop("Drawsucpop", { ...this.drawResultInfo })
+      modalStore.pushPop("Drawsucpop", { ...this.drawResultInfo });
     }
     this.getDrawInfo();
-  }
+  };
 
   /** 返回 */
   backHome = _throttle(() => {
-    if (this.btnStarting) return false
-    store.changePage(PAGE_MAP.HOME_PAGE)
-  })
+    if (this.btnStarting) return false;
+    store.changePage(PAGE_MAP.HOME_PAGE);
+  });
 
   /** 奖品 */
   prizeHandle = _throttle(async () => {
-    if (this.btnStarting) return false
-    if (!store.checkActStatus(true)) return
+    if (this.btnStarting) return false;
+    if (!store.checkActStatus(true)) return;
     sensorMdClick("activityClick", { pageName: "抽奖页点击", buttonName: "奖品" });
     location.href = CFG.prize;
-  })
+  });
 
   /** 规则 */
   ruleHandle = _throttle(async () => {
-    if (this.btnStarting) return false
-    if (!store.checkActStatus(true)) return
+    if (this.btnStarting) return false;
+    if (!store.checkActStatus(true)) return;
     sensorMdClick("activityClick", { pageName: "抽奖页点击", buttonName: "规则" });
-    modalStore.pushPop("Rulepop")
-  })
+    modalStore.pushPop("Rulepop");
+  });
   /** 任务 */
   taskHandle = _throttle(() => {
-    if (this.btnStarting) return false
-    if (!store.checkActStatus()) return
+    if (this.btnStarting) return false;
+    if (!store.checkActStatus()) return;
     sensorMdClick("activityClick", { pageName: "抽奖页点击", buttonName: "做任务" });
     modalStore.pushPop("Taskpop", {
-      refresh: () => this.getDrawInfo()
-    })
-  })
+      refresh: () => this.getDrawInfo(),
+    });
+  });
   render() {
-    const { actPrizeList, remainDrawTimes } = this.state.drawInfo
+    const { actPrizeList, remainDrawTimes } = this.state.drawInfo;
     return (
       <div className="drawpage modal_center">
         <span className="beiJing"></span>
+        <div className="rule_prize"></div>
         <span className="title"></span>
-        <div className="subtitle">
+        {/* <div className="subtitle">
           <span className="subtitle_bg"></span>
           <span className="subtitle_text">测一测你的端午专属人设</span>
-        </div>
+        </div>  */}
         <div className="turntable">
           <span className="turntable_box_bg"></span>
           <CircleTurntable
             className="turntable_box"
-            ref={ref => this.turntableRef = ref}
+            ref={(ref) => (this.turntableRef = ref)}
             options={actPrizeList || []}
-            angleOffset={23}  // 角度偏移量
-            radian={80}  // 奖项半径
-            launchDuration={1000}  // 启动时间
+            angleOffset={23} // 角度偏移量
+            radian={80} // 奖项半径
+            launchDuration={1000} // 启动时间
             brakingDuration={0}
             maxSpeed={18}
             // 大转盘背景
@@ -139,23 +140,24 @@ class Drawpage extends React.Component {
             renderStartButton={<></>}
             // 渲染奖品信息
             renderOption={(option) => {
-              return <div className="prize_item">
-                <div className="prize_name">{option.prizeName}</div>
-                <img className="prize_img" src={option.prizeImg} alt="" />
-              </div>
+              return (
+                <div className="prize_item">
+                  <div className="prize_name">{option.prizeName}</div>
+                  <img className="prize_img" src={option.prizeImg} alt="" />
+                </div>
+              );
             }}
             didStop={this.stopOkHandle}
           />
           <span className="pointer"></span>
-          <span className="cloud"></span>
+          {/* <span className="cloud"></span> */}
         </div>
         <Button className="back" onClick={this.backHome} />
         <Button className="rule_btn" onClick={this.ruleHandle}></Button>
         <Button className="prize_btn" onClick={this.prizeHandle}></Button>
         <Button className="task_btn" onClick={this.taskHandle}></Button>
-        <div className="draw_btn md10" onClick={this.lottteryHandle}>
-          <span className="left_num">剩余次数：{remainDrawTimes || 0}</span>
-        </div>
+        <div className="draw_btn md10" onClick={this.lottteryHandle}></div>
+        <span className="left_num">剩余次数：{remainDrawTimes || 0}</span>
       </div>
     );
   }

src/pages/drawpage/drawpage.less

@@ -13,6 +13,14 @@
     position: absolute;
     .sparkBg("drawPage/bg.png");
   }
+  .rule_prize {
+    position: absolute;
+    left: 558px;
+    top: 227px;
+    width: 174px;
+    height: 44px;
+    .sparkBg("homePage/rule_prize.png");
+  }
   .back {
     width: 64px;
     height: 65px;
@@ -22,55 +30,56 @@
     .sparkBg("common/back.png");
   }
   .rule_btn {
-    width: 95*1.2px;
-    height: 44*1.2px;
-    left: 0px;
-    top: 405px;
+    width: 87px;
+    height: 44px;
+    left: 558px;
+    top: 227px;
     position: absolute;
-    .sparkBg("drawPage/rule_btn.png");
     transform-origin: 0% 50%;
+    border-radius: 22px 0 0 22px;
   }
   .prize_btn {
-    width: 92*1.2px;
-    height: 44*1.2px;
-    right: 0px;
-    top: 405px;
+    width: 87px;
+    height: 44px;
+    left: 645px;
+    top: 227px;
     position: absolute;
-    .sparkBg("drawPage/prize_btn.png");
     transform-origin: 100% 50%;
+    border-radius: 0 22px 22px 0;
   }
   .task_btn {
-    width: 160px;
-    height: 202px;
-    left: 590px;
-    top: 1252px;
+    left: 603px;
+    top: 1260px;
+    width: 120px;
+    height: 129px;
     position: absolute;
-    .sparkBg("drawPage/task_btn.png");
+    .sparkBg("homePage/task_btn.png");
   }
   .draw_btn {
-    width: 428px;
-    height: 133px;
-    left: 167px;
-    top: 1281px;
+    left: 182px;
+    top: 1291px;
+    width: 387px;
+    height: 135px;
     position: absolute;
     .sparkBg("drawPage/draw_btn.png");
-    .left_num {
-      width: 420px;
-      height: 22px;
-      left: 8px;
-      top: 96px;
-      position: absolute;
-      text-align: center;
-      font-size: 22px;
-      line-height: 22px;
-      color: rgb(249, 252, 206);
-    }
+  }
+  .left_num {
+    width: 100%;
+    height: 26px;
+    left: 0;
+    top: 1440px;
+    position: absolute;
+    text-align: center;
+    font-size: 26px;
+    line-height: 26px;
+    color: rgb(249, 252, 206);
+    text-align: center;
   }
   .title {
-    width: 565px;
-    height: 152px;
-    left: 91px;
-    top: 204px;
+    left: 76px;
+    top: 283px;
+    width: 600px;
+    height: 182px;
     position: absolute;
     .sparkBg("drawPage/title.png");
   }
@@ -101,15 +110,15 @@
     }
   }
   .turntable {
-    width: 704px;
-    height: 1022px;
-    left: 14px;
-    top: 260px;
+    width: 750px;
+    height: 843px;
+    left: 0px;
+    top: 462px;
     position: absolute;
     .turntable_box_bg {
-      width: 627px;
-      height: 1022px;
-      left: 60px;
+      width: 750px;
+      height: 843px;
+      left: 0px;
       top: 0px;
       position: absolute;
       .sparkBg("drawPage/turntable_box.png");
@@ -117,8 +126,8 @@
     .turntable_box {
       width: 519px;
       height: 521px;
-      left: 115px;
-      top: 261px;
+      left: 110px;
+      top: 70px;
       position: absolute;
     }
     .turntable_bg {
@@ -153,9 +162,9 @@
       width: 128px;
       height: 139px;
       left: 312px;
-      top: 447px;
+      top: 260px;
       position: absolute;
-      .sparkBg("drawPage/pointer.png");
+      .sparkBg("drawPage/turntable_btn.png");
     }
     .cloud {
       width: 704px;

src/pages/homepage/homepage.jsx

@@ -22,7 +22,7 @@ class Homepage extends React.Component {
   }
 
   async componentDidMount() {
-
+    // modalStore.pushPop("Bindpop");
     await store.getHomeInfo();
     // 初始化神策埋点 得在首页接口之后 首页接口会打上业务员绑定标记
     await store.initSensorsMd();
@@ -89,9 +89,8 @@ class Homepage extends React.Component {
         <Button className="share_btn md3" onClick={this.doShare}></Button>
         <Button className="task_btn md6" onClick={this.openTask}></Button>
         <Button className="draw_btn md4" onClick={this.goDraw}></Button>
-        <div className="main_btn md5" onClick={this.goTest}>
-          {/* <span className="test_times">剩余次数：{store.homeInfo?.remainAnswerTimes || 0}</span> */}
-        </div>
+        <div className="main_btn md5" onClick={this.goTest}></div>
+        <span className="test_times">剩余次数：{store.homeInfo?.remainAnswerTimes || 0}</span>
         {/* <span className="title"></span> */}
         <SvgaPlayer className="home_svga" src={RES_PATH + "svga/home.svga"} />
         {/* <div className="subtitle">

src/pages/homepage/homepage.less

@@ -56,17 +56,18 @@
     position: absolute;
     .sparkBg("homePage/main_btn.png");
     .breathAnimation();
-    .test_times {
-      width: 422px;
-      height: 22px;
-      left: 7px;
-      top: 98px;
-      position: absolute;
-      text-align: center;
-      font-size: 22px;
-      line-height: 22px;
-      color: rgb(249, 252, 206);
-    }
+  }
+  .test_times {
+    width: 100%;
+    height: 26px;
+    left: 0;
+    top: 1440px;
+    position: absolute;
+    text-align: center;
+    font-size: 26px;
+    line-height: 26px;
+    color: rgb(249, 252, 206);
+    text-align: center;
   }
   .title {
     width: 565px;