merge

src/App.tsx

@@ -29,7 +29,7 @@ class App extends Component {
     const defaultPage = {
       myPrize: MyPrize, // TODO 举例子 新宿台奖品页
       index: LoadingDemo,
-    }[skinId] || GamePage;
+    }[skinId] || HomePage;
     PageCtrl.changePage(defaultPage);
   }
 

src/api/index.ts

@@ -76,7 +76,7 @@ const API = generateAPI({
   },
 
   // 奖品
-  queryOrder: "customActivity/kouweiwang/prize/queryOrderNo",
+  queryOrder: "/customActivity/kouweiwang/prize/queryOrderNo",
 
   index: "main/index.do",
   completeGuide: "main/completeGuide.do",

src/built-in/share/weixin/weixin.ts

 import API from "@/api";
-import {isWeiXin} from "@/AppTools.ts";
+import { isWeiXin } from "@/AppTools.ts";
 
 export interface IWxShareInfo {
   title: string,
@@ -43,37 +43,39 @@ export async function initWx(shareInfo: IWxShareInfo) {
   console.info('分享信息', param)
 
   // @ts-ignore
-  wx.miniProgram.postMessage(param);
+  wx.miniProgram.postMessage({
+    data: param
+  });
 
-//   if (!isWeiXin()) {
-//     return;
-//   }
+  //   if (!isWeiXin()) {
+  //     return;
+  //   }
 
-//   const {
-//     success,
-//     // @ts-ignore
-//     data,
-//     timestamp,
-//   } = await API.getShareInfo({wxdebug: false, url: shareInfo.link,isMiniApp:true,apk:'2J2Dt6DHw8bGf2vZb14E34Uthr6q',});
-// // wxappid, wxtimestamp, wxnonceStr, wxsignature
-//   if (!success) {
-//     return;
-//   }
-//   wx.config({
-//     debug: false,
-//     appId: data.wxAppId,
-//     timestamp: data.wxTimestamp,
-//     nonceStr: data.wxNonceStr,
-//     signature: data.wxSignature,
-//     jsApiList: ['onMenuShareTimeline', 'onMenuShareAppMessage']
-//   });
+  //   const {
+  //     success,
+  //     // @ts-ignore
+  //     data,
+  //     timestamp,
+  //   } = await API.getShareInfo({wxdebug: false, url: shareInfo.link,isMiniApp:true,apk:'2J2Dt6DHw8bGf2vZb14E34Uthr6q',});
+  // // wxappid, wxtimestamp, wxnonceStr, wxsignature
+  //   if (!success) {
+  //     return;
+  //   }
+  //   wx.config({
+  //     debug: false,
+  //     appId: data.wxAppId,
+  //     timestamp: data.wxTimestamp,
+  //     nonceStr: data.wxNonceStr,
+  //     signature: data.wxSignature,
+  //     jsApiList: ['onMenuShareTimeline', 'onMenuShareAppMessage']
+  //   });
 
-//   wx.error(function (res) {
-//     console.error("wx error", res);
-//   });
+  //   wx.error(function (res) {
+  //     console.error("wx error", res);
+  //   });
 
-//   wx.ready(function () {
-//     invokeWX(shareInfo);
-//   });
+  //   wx.ready(function () {
+  //     invokeWX(shareInfo);
+  //   });
 
 }

src/components/rulepop/rulepop.jsx

+'use strict';
+
+import React from 'react';
+import { observer } from 'mobx-react';
+import './rulepop.less';
+import store from '../../store/store';
+import { Button } from '@grace/ui';
+import {_asyncThrottle} from "../../utils/utils";
+import { PageCtrl } from "@/core/ctrls/PageCtrl";
+import { ModalCtrl } from "@/core/ctrls/ModalCtrl";
+
+@observer
+class Rulepop extends React.Component {
+  constructor(props) {
+    super(props);
+  }
+
+  componentDidMount() {
+    store.initRule();
+  }
+
+  handleClose = _asyncThrottle(() => {
+    ModalCtrl.closeModal()
+  })
+
+  render() {
+    return (
+      <div className="rulepop modal_center">
+        <span className="bg"></span>
+        <span className="title"></span>
+        <span className="rule" dangerouslySetInnerHTML={{ __html: store.ruleInfo }}></span>
+        <Button className="close" onClick={this.handleClose} />
+      </div>
+    );
+  }
+}
+export default Rulepop;

src/components/rulepop/rulepop.less

+@import "../../res.less";
+.rulepop {
+  width: 750px;
+  height: 1624px;
+  left: 0px;
+  top: 0px;
+  position: absolute;
+  .bg {
+    width: 606px;
+    height: 956px;
+    left: 72px;
+    top: 287px;
+    position: absolute;
+    .sparkBg("rulePop/bg.png");
+  }
+  .title {
+    width: 175px;
+    height: 42px;
+    left: 276px;
+    top: 382px;
+    position: absolute;
+    .sparkBg("rulePop/title.png");
+  }
+  .rule {
+    width: 431px;
+    height: 570px;
+    left: 148px;
+    top: 469px;
+    position: absolute;
+    font-size: 25px;
+    color: rgba(153, 57, 27, 1);
+    word-wrap: break-word;
+    white-space: pre-wrap;
+    overflow-x: hidden;
+    overflow-y: auto;
+  }
+  .close {
+    width: 64px;
+    height: 64px;
+    left: 343px;
+    top: 1243px;
+    position: absolute;
+    .sparkBg("rulePop/close.png");
+  }
+}

src/pages/DrawPage/DrawPage.jsx

+'use strict';
+
+import React from 'react';
+import { observer } from 'mobx-react';
+import './DrawPage.less';
+import { _asyncThrottle } from '../../utils/utils.ts';
+import store from '../../store/store.ts';
+import { CHANNEL_PARAMS } from '@src/utils/constants';
+import { CircleTurntable } from '@spark/circle-turntable'
+// import { Button } from '@src/components/Button';
+// import { Marquee, Toast } from '@spark/ui';
+// import { isWeChat } from '@src/utils/share';
+// import { LOG_KEY, pageView, sensorLog } from '@src/utils/sensors';
+import { isWeiXin } from '../../AppTools.ts';
+import API from '../../api';
+import { Button, Toast } from '@grace/ui';
+
+@observer
+class Drawpage extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      drawInfo: {}
+    }
+    this.btnStarting = false  // 转盘是否启动
+    this.turntableRef = null  // 大转盘
+    this.drawResultInfo = {}
+  }
+
+  componentDidMount() {
+    this.getDrawInfo()
+    // pageView("b12842", {
+    //   page_name: "抽奖大转盘",
+    // });
+    // sensorLog(LOG_KEY.exposure, "b12842", "d12843", {
+    //   page_name: "抽奖大转盘",
+    //   button_name: "立即抽奖按钮",
+    // });
+    // sensorLog(LOG_KEY.exposure, "b12842", "d12844", {
+    //   page_name: "抽奖大转盘",
+    //   button_name: "做任务，赚次数按钮",
+    // });
+    // sensorLog(LOG_KEY.exposure, "b12842", "d12845", {
+    //   page_name: "抽奖大转盘",
+    //   button_name: "返回按钮",
+    // });
+  }
+
+  /** 获取转盘信息 */
+  getDrawInfo = async () => {
+    const { success, data } = await API.drawIndex()
+    if (success && data) {
+      this.setState({
+        drawInfo: data || {}
+      })
+    }
+  }
+
+  // 开始抽奖
+  lottteryHandle = _asyncThrottle(async () => {
+    // sensorLog(LOG_KEY.click, "b12842", "d12843", {
+    //   page_name: "抽奖大转盘",
+    //   button_name: "立即抽奖按钮",
+    // });
+    // 微信端拦截
+    if (isWeiXin()) {
+      // 友客小程序
+      if (CFG.channel == CHANNEL_PARAMS.YK_MINI) {
+        return Toast.show("请前往人保寿险管家app活动抽奖～")
+      }
+      // 其他微信端 提醒唤端弹窗
+      else {
+        return modalStore.pushPop("CodePop")
+      }
+    }
+
+    const { prizeVOs, remainDrawTimes } = this.state.drawInfo
+    // 抽奖次数为0
+    if (!remainDrawTimes) {
+      return Toast("抽奖次数不足，快去做任务赚次数吧～")
+    }
+
+    if (this.btnStarting) return false
+    this.btnStarting = true
+    const { success, data } = await API.drawJoin()
+    if (success && data) {
+      // 转盘转动开始抽奖
+      this.turntableRef.launch()
+      this.drawResultInfo = data || {}
+
+      // 转盘停止转动，指针停在index
+      const index = prizeVOs?.findIndex(item => item.prizeId === (this.drawResultInfo.prizeId || 'thanks'))
+      console.info('index', index)
+      this.turntableRef.braking(index);
+    } else {
+      this.btnStarting = false
+      this.getDrawInfo()
+    }
+  })
+
+  // 转盘停止处理
+  stopOkHandle = () => {
+    this.btnStarting = false
+
+    if (!this.drawResultInfo?.prizeId) {
+      // modalStore.pushPop("NoPrizeCard", { data: this.drawResultInfo })
+    } else {
+      // modalStore.pushPop("Pop_winprize", { data: this.drawResultInfo })
+    }
+    this.getDrawInfo()
+  }
+
+  /** 返回 */
+  backHome = _throttle(() => {
+    // sensorLog(LOG_KEY.click, "b12842", "d12845", {
+    //   page_name: "抽奖大转盘",
+    //   button_name: "返回按钮",
+    // });
+    if (this.btnStarting) return false
+    // store.changePage(PAGE_MAP.HOME_PAGE)
+  })
+
+  goTask = _throttle(() => {
+    // sensorLog(LOG_KEY.click, "b12842", "d12844", {
+    //   page_name: "抽奖大转盘",
+    //   button_name: "做任务，赚次数按钮",
+    // });
+
+    if (this.btnStarting) return false
+    // modalStore.pushPop("Taskpop", { onClose: () => this.getDrawInfo() })
+  })
+
+  render() {
+    const { prizeVOs, remainDrawTimes } = this.state.drawInfo
+    return (
+      <div className="drawpage modal_center">
+        <span className="bg"></span>
+        <Button className="back_btn md19" onClick={this.backHome} />
+        <Button className="task_btn md21" onClick={this.goTask} />
+        <Button className="draw_btn_box md20" onClick={this.lottteryHandle}>
+          <span className="draw_btn"></span>
+          <span className="left_num">剩余次数：{remainDrawTimes || 0}</span>
+        </Button>
+        <div className="turantable">
+          <CircleTurntable
+            className="turantable_box"
+            ref={ref => this.turntableRef = ref}
+            options={prizeVOs || []}
+            angleOffset={30}  // 角度偏移量
+            radian={100}  // 奖项半径
+            launchDuration={1000}  // 启动时间
+            // 大转盘背景
+            renderBackground={<div className="turantable_bg"></div>}
+            // 大转盘指针
+            renderStartButton={<></>}
+            // 渲染奖品信息
+            renderOption={(option) => {
+              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>
+        </div>
+        <span className="cover"></span>
+      </div>
+    );
+  }
+}
+export default Drawpage;

src/pages/DrawPage/DrawPage.less

+@import "../../res.less";
+
+.drawpage {
+  width: 750px;
+  height: 1624px;
+  left: 0px;
+  top: 0px;
+  position: absolute;
+
+  .bg {
+    width: 750px;
+    height: 1624px;
+    left: 0px;
+    top: 0px;
+    position: absolute;
+    .sparkBg("drawPage/bg.png");
+  }
+
+  .back_btn {
+    left: 31px;
+    top: 199px;
+    width: 56px;
+    height: 57px;
+    position: absolute;
+    .sparkBg("common/back.png");
+  }
+
+  .task_btn {
+    position: absolute;
+    left: 548px;
+    top: 1211px;
+    width: 202px;
+    height: 203px;
+    .sparkBg("common/task.png");
+  }
+
+  .prize_info {
+    position: absolute;
+    left: 57px;
+    top: 470px;
+    width: 615px;
+    height: 46px;
+
+    .prize_info_bg {
+      position: absolute;
+      left: 0;
+      top: 0;
+      width: 615px;
+      height: 46px;
+      .sparkBg("drawPage/prize_info_bg.png");
+    }
+
+    .prize_info_laba {
+      position: absolute;
+      left: 142px;
+      top: 11px;
+      width: 31px;
+      height: 25px;
+      .sparkBg("drawPage/prize_info_laba.png");
+    }
+
+    .prize_info_list {
+      width: 360px;
+      height: 46px;
+      position: absolute;
+      left: 185px;
+      top: 0;
+
+      .prize_info_item {
+        width: 100%;
+        height: 46px;
+        font-size: 20px;
+        color: rgb(40, 85, 84);
+        line-height: 46px;
+        text-align: left;
+        .lineClamp1();
+      }
+
+    }
+  }
+
+  .draw_btn_box {
+    width: 373px;
+    height: 115px;
+    left: 190px;
+    top: 1258px;
+    position: absolute;
+
+    .draw_btn {
+      width: 373px;
+      height: 115px;
+      left: 0px;
+      top: 0px;
+      position: absolute;
+      .sparkBg("drawPage/draw_btn.png");
+    }
+
+    .left_num {
+      width: 100%;
+      height: 27px;
+      left: 0px;
+      top: 70px;
+      position: absolute;
+      font-size: 20px;
+      color: rgb(202, 57, 0);
+      text-align: center;
+    }
+  }
+
+  .turantable {
+    left: 35px;
+    top: 476px;
+    width: 680px;
+    height: 681px;
+    position: absolute;
+    .sparkBg("drawPage/turantable_box.png");
+    pointer-events: none;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+
+    .turantable_box {
+      position: relative;
+    }
+
+    .turantable_bg {
+      width: 584px;
+      height: 584px;
+      left: 0px;
+      top: 0px;
+      position: absolute;
+      .sparkBg("drawPage/turantable_bg.png");
+    }
+
+    .prize_item {
+      width: 190px;
+      height: 150px;
+      color: rgba(248, 103, 89, 1);
+      font-size: 28px;
+      box-sizing: border-box;
+      text-align: center;
+
+      .prize_name {
+        width: 100%;
+        font-weight: bold;
+        .lineClamp1();
+      }
+
+      .prize_img {
+        width: 80px;
+        height: 70px;
+        object-fit: contain;
+        margin-top: 10px;
+      }
+    }
+
+    .pointer {
+      position: absolute;
+      left: 276px;
+      top: 251px;
+      width: 126px;
+      height: 131px;
+      position: absolute;
+      .sparkBg("drawPage/pointer.png");
+    }
+  }
+
+  .cover {
+    left: 318px;
+    top: 430px;
+    width: 114px;
+    height: 138px;
+    position: absolute;
+    .sparkBg("drawPage/cover.png");
+    pointer-events: none;
+  }
+}
\ No newline at end of file

src/pages/HomePage/HomePage.tsx

@@ -3,12 +3,84 @@
 import React from 'react';
 import { observer } from 'mobx-react';
 import './homepage.less';
+import { Button, Toast } from '@grace/ui';
+import { _asyncThrottle } from "../../utils/utils";
+import { PageCtrl } from "@/core/ctrls/PageCtrl";
+import { ModalCtrl } from "@/core/ctrls/ModalCtrl";
+import Rulepop from "../../components/rulepop/rulepop.jsx";
+import DrawPage from "../DrawPage/DrawPage.jsx";
+import store from '@/store/store';
+
 
 @observer
 class Homepage extends React.Component {
   constructor(props) {
     super(props);
+
+    this.handleButtonClick = this.handleButtonClick.bind(this);
+  }
+
+  componentDidMount() {
+    store.updateIndex()
   }
+
+  handleButtonClick = _asyncThrottle(async (number) => {
+    // 活动时间判断
+    // 规则 奖品始终可以点击 我的排名结束可以点击 其余常规逻辑
+    if (!(number === 0 || number === 4 || number === 5)) {
+      if ((!store.judgeActTime(true, true))) return;
+    }
+    if ((number === 0)) {
+      if ((!store.judgeActTime(true, false))) return;
+    }
+    switch (number) {
+      // 0 我的排名
+      case 0:
+        // TODO 换成我的排名页面 记得引用
+        // PageCtrl.changePage(); 
+        break;
+
+      // 1 抽奖
+      case 1:
+        PageCtrl.changePage(DrawPage);
+        break;
+
+      // 2 做任务
+      case 2:
+        // TODO
+        break;
+
+      // 3 答题
+      case 3:
+        // TODO
+        break;
+
+      // 4 我的奖品
+      case 4:
+        // TODO 换成我的奖品页面 记得引用
+        // PageCtrl.changePage(); 
+        break;
+
+      // 5 活动规则
+      case 5:
+        ModalCtrl.showModal(Rulepop);
+        break;
+
+      // 6 拜访清单
+      case 6:
+        // TODO
+        break;
+
+      // 7 分享活动
+      case 7:
+        // TODO
+        break;
+
+      default:
+        console.warn("未知按钮类型", number);
+    }
+  })
+
   render() {
     return (
       <div className="homepage modal_center">
@@ -19,25 +91,26 @@ class Homepage extends React.Component {
         <span className="brain"></span>
         <span className="wenhao"></span>
         <span className="title"></span>
-        <span className="draw"></span>
-        <span className="task"></span>
-        <div className="matter">
-          <span className="m_bg"></span>
-          <span className="answer"></span>
-          <span className="remain">剩余次数：3</span>
-        </div>
+        {/* 按钮 共7个 */}
         <div className="rank">
           <span className="r_bg"></span>
           <span className="name">用户uid:132802</span>
           <span className="head"></span>
-          <span className="myrank"></span>
+          <Button className="myrank" onClick={() => this.handleButtonClick(0)} />
           <span className="number">000</span>
         </div>
-        <span className="prize"></span>
-        <span className="rule"></span>
-        <span className="visit"></span>
-        <span className="share"></span>
         <span className="logo"></span>
+        <Button className="draw" onClick={() => this.handleButtonClick(1)} />
+        <Button className="task" onClick={() => this.handleButtonClick(2)} />
+        <Button className="matter" onClick={() => this.handleButtonClick(3)}>
+          <span className="m_bg"></span>
+          <span className="answer"></span>
+          <span className="remain">剩余次数：3</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)} />
       </div>
     );
   }

src/store/store.ts

@@ -99,7 +99,7 @@ class Store {
 
   // 活动时间拦截
   // 结束不拦截 brakeEnd为false
-  // 规则奖品始终可以点击 不用调方法 其余两个参数均传true即可 todo
+  // 规则奖品始终可以点击 不用调方法 
   judgeActTime(brakeStart = true, brakeEnd = true) {
     if (brakeStart && this.indexData.currentTime < this.indexData.actStartTime) {
       Toast.show("活动未开始");