init

mock/main.ts

-import { AESDecrypt, AESEncrypt } from "./Crypto";
 
 export default [
   {
     url: '/main/index.do',
     response: ({ query }) => {
+      const signDay = Math.random() * 7 >> 0;
       return {
         success: true,
         code: "",
@@ -17,21 +17,28 @@ export default [
           currentStoreNum: 123,
           storeLimitNum: 2222,
           continueSignDays: 3,
-          todaySignFlag: true,
-          signRecords: [
-            {
-              id: 1,
-              day: 1,
-              creditsNum: 100,
-              boolSign: false,
+          todaySignFlag: false,
+          signRecords: new Array(7).fill(1).map((_, index) => {
+            return {
+              id: index,
+              day: index + 1,
+              creditsNum: 100 + Math.random() * 100 >> 0,
+              boolSign: index < signDay,
             }
-          ],
+          }),
           overflowBubble: {
             id: 1,
             creditsNum: 100,
             expireTime: Date.now() + 10000000,
           },
-          bubbleRecords: [],
+          bubbleRecords: new Array(4).fill(1).map((_, index) => {
+            return {
+              id: index,
+              creditsNum: 100 + Math.random() * 100 >> 0,
+              expireTime: Date.now() + 10000000,
+              type: 1 + Math.random() * 2 >> 0,
+            }
+          }),
           returnAwardCreditsNum: 1111,
           downGoldVo: {
             creditsNum: 100,
@@ -64,10 +71,10 @@ export default [
         "code": "",
         "message": "",
         "data": {
-          signCredits: 111,
-          extraCredits: 120,
+          signCredits: 100,
+          extraCredits: 100,
           boolLimit: true,
-          multupleValue: 11,
+          multupleValue: 3,
           url: "urlurlurlurlurl",
           taskId: "taskId",
           newLuckCreditsNum: 33,

src/pages/HomePage/HomePage.tsx

@@ -36,14 +36,14 @@ class HomePage extends React.Component<any, any> {
   root: HTMLDivElement;
 
   componentDidMount() {
-    // store.updateIndex();
+    store.updateIndex();
     // store.queryTask()
     // if (getUrlParam('inviteCode')) {
     //   store.doAssist()
     // }
 
     // ModalCtrl.showModal(Fail_challenge);
-    ModalCtrl.showModal(WedExpPanel);
+    ModalCtrl.showModal(SkyFullGoldPanel);
   }
 
   clickPrize = () => {

src/pages/HomePage/Sign/Sign.tsx

@@ -5,6 +5,10 @@ import { Button } from "@grace/ui";
 
 import styles from "./Sign.module.less";
 import classNames from "classnames";
+import API from "@/api";
+import { _asyncThrottle } from "@/utils/utils.ts";
+import { ModalCtrl } from "@/core/ctrls/ModalCtrl.tsx";
+import WedExpPanel from "@/panels/WedExpPanel/WedExpPanel.tsx";
 
 
 @observer
@@ -14,27 +18,49 @@ class Sign extends React.Component<any, any> {
 
   }
 
+  clickSign = _asyncThrottle(async () => {
+    const { todaySignFlag } = store.indexData;
+    if (todaySignFlag) return;
+
+    const { success, data } = await API.sign();
+    if (!success) return;
+
+    const { signCredits, extraCredits, boolLimit, multupleValue, url, taskId, newLuckCreditsNum } = data;
+
+    if (boolLimit) {
+      // 周三限时奖励
+      ModalCtrl.showModal(WedExpPanel, data);
+    }
+
+
+  });
+
   render() {
-    const {} = store.indexData
+    const { signRecords, continueSignDays, todaySignFlag } = store.indexData;
+
+    const signedCount = signRecords?.filter((item) => item.boolSign).length || 0;
+    const signProgress = Math.max(signedCount - 1, 0);
+
     return <div className={styles.sign}>
-      <div className={styles.title}>已连续签到<span>23</span>天</div>
+      <div className={styles.title}>已连续签到<span>{continueSignDays}</span>天</div>
       <div className={styles.tip}>断签7天后积分将清零</div>
 
       <div className={styles.itemRoot}>
 
         {
-          new Array(7).fill(0).map((item, index) => {
+          signRecords?.map((item, index) => {
+            const { id, boolSign, creditsNum, day } = item;
             const creditCls = classNames(styles.credits, {
-              [styles.creditsSigned]: true,
+              [styles.creditsSigned]: boolSign,
             });
             const dayCls = classNames(styles.day, {
-              [styles.daySigned]: true,
+              [styles.daySigned]: boolSign,
             });
-            return <div key={index} className={styles.item}>
+            return <div key={id} className={styles.item}>
               <div className={creditCls}>
-                <div className={styles.creditTxt}>最高<span>150</span></div>
+                {!boolSign && <div className={styles.creditTxt}>最高<span>{creditsNum}</span></div>}
               </div>
-              <div className={dayCls}>第{index + 1}天</div>
+              <div className={dayCls}>第{day}天</div>
             </div>
           })
         }
@@ -44,15 +70,17 @@ class Sign extends React.Component<any, any> {
         <div
           className={styles.progressFill}
           style={{
-            width: `${100 / 6 * 1}%`,
+            width: `${100 / 6 * signProgress}%`,
           }}
         />
       </div>
 
       <div className={styles.progressPoint}/>
+      <div className={styles.progressPoint} style={{
+        transform: `translateX(${signProgress * 0.99}rem)`,
+      }}/>
 
-
-      <Button className={styles.btn}/>
+      <Button className={styles.btn} onClick={this.clickSign}/>
     </div>;
   }
 }

src/panels/SkyFullGoldPanel/SkyFullGoldPanel.less

@@ -69,7 +69,7 @@
 
   .logo {
     position: absolute;
-    left: 149px;
+    left: 144px;
     top: 931px;
     width: 95px;
     height: 83px;
@@ -77,17 +77,18 @@
   }
 
   .txt {
-    font-size: 29px;
+    font-size: 28px;
     color: rgb(32, 16, 3);
     position: absolute;
-    left: 247px;
+    left: 243px;
     top: 938px;
+    line-height: 1.2;
     font-weight: bold;
   }
 
   .btn {
     position: absolute;
-    left: 479px;
+    left: 485px;
     top: 947px;
     width: 128px;
     height: 50px;

src/panels/WedExpPanel/WedExpPanel.less

@@ -45,6 +45,16 @@
       height: 228px;
       .webpBg("WedExpPanel/金币堆.png");
     }
+
+    .multuple {
+      position: absolute;
+      left: 460px;
+      top: 597px;
+      font-size: 28px;
+      color: #e70813;
+      font-weight: bold;
+      font-style: italic;
+    }
   }
 
   .vip {
@@ -56,6 +66,16 @@
       height: 209px;
       .webpBg("WedExpPanel/会员金币堆.png");
     }
+
+    .multuple {
+      position: absolute;
+      left: 350px;
+      top: 606px;
+      font-size: 28px;
+      color: #e70813;
+      font-weight: bold;
+      font-style: italic;
+    }
   }
 
   .taskBg {
@@ -69,7 +89,7 @@
 
   .logo {
     position: absolute;
-    left: 149px;
+    left: 144px;
     top: 931px;
     width: 95px;
     height: 83px;
@@ -77,17 +97,18 @@
   }
 
   .txt {
-    font-size: 29px;
+    font-size: 28px;
     color: rgb(32, 16, 3);
     position: absolute;
-    left: 247px;
+    left: 243px;
     top: 938px;
+    line-height: 1.2;
     font-weight: bold;
   }
 
   .btn {
     position: absolute;
-    left: 479px;
+    left: 485px;
     top: 947px;
     width: 128px;
     height: 50px;

src/panels/WedExpPanel/WedExpPanel.tsx

@@ -9,7 +9,13 @@ import { SvgaPlayer } from "@grace/svgaplayer";
 import bgEffectSvga from "@/assets/svga/2输出签到成功弹窗.svga";
 
 export interface IWedExpPanelProps {
-
+  signCredits: number;
+  extraCredits: number;
+  boolLimit: boolean;
+  multupleValue: number;
+  url: string;
+  taskId: string;
+  newLuckCreditsNum: number;
 }
 
 @observer
@@ -28,26 +34,33 @@ class WedExpPanel extends React.Component<IWedExpPanelProps> {
 
   render() {
 
+    const { signCredits, extraCredits, boolLimit, multupleValue, url, taskId, newLuckCreditsNum } = this.props;
+
     return <div className="WedExpPanel modal_center">
       <SvgaPlayer className="bgEffect" src={bgEffectSvga}/>
       <div className="bg"/>
 
       <div className="tip">
-        获得50积分<br/>
+        获得{signCredits}积分<br/>
         解锁周三限时奖励
       </div>
-      <div className="vip">
+      {
+        !!extraCredits
+          ? <div className="vip">
             <div className="img"/>
+            <div className="multuple">{multupleValue}x</div>
           </div>
-      {/*<div className="normal">*/}
-      {/*  <div className="img"/>*/}
-      {/*</div>*/}
+          : <div className="normal">
+            <div className="img"/>
+            <div className="multuple">{multupleValue}x</div>
+          </div>
+      }
 
       <div className="taskBg"/>
       <div className="logo"/>
       <div className="txt">
         观看品牌视频15s<br/>
-        积分膨胀至150
+        积分膨胀至{(signCredits + extraCredits) * multupleValue}积分
       </div>
 
       <div className="com_banner"/>

src/store/store.ts

@@ -12,15 +12,9 @@ class Store {
 
   /** 前端开发配置 */
   frontVariable: {
-    privacyTxt: string,
-    prizeInfoAuthTxt: string,
     shareInfo: IWxShareInfo,
-    shopUrl?: string,
-    scanUrl?: string,
     ruleImg?: string,
   } = {
-    privacyTxt: "",
-    prizeInfoAuthTxt: "",
     shareInfo: {
       title: "",
       desc: "",
@@ -47,29 +41,58 @@ class Store {
   }
 
   indexData: {
-    remainTimes?: number,
-    uid?: string,
-    actEndTimestamp?: number,
-    timeStamp?: number,
-    actStartTimestamp?: number,
-    remainDrawTimes?: number,
-    newAssist?: number,
+    actStartTime?: number,
+    actEndTime?: number,
+    currentTime?: number,
+
+    guideFlag?: boolean,
+    currentStoreNum?: number,
+    storeLimitNum?: number,
+    continueSignDays?: number,
+    todaySignFlag?: boolean,
+    signRecords?: {
+      id: string,
+      day: number,
+      creditsNum: number,
+      boolSign: boolean,
+    }[],
+
+    overflowBubble?: {
+      id: number,
+      creditsNum: number,
+      expireTime: number,
+    },
+
+    bubbleRecords?: {
+      id: number,
+      creditsNum: number,
+      expireTime: number,
+    }[],
+
+    returnAwardCreditsNum?: number,
+
+    downGoldVo?: {
+      creditsNum: number,
+      multipleValue: number,
+      taskId: string,
+      url: string,
+    }
+
   } = {};
 
   async updateIndex() {
-    // const { success, data, timeStamp } = await API.index();
-    // if (!success) {
-    //   return;
-    // }
-    // this.indexData = data;
-    // this.indexData.timeStamp = timeStamp;
+    const { success, data } = await API.index();
+    if (!success) {
+      return;
+    }
+    this.indexData = data;
   }
 
   judgeActTime(brakeStart = true, brakeEnd = true) {
-    if (brakeStart && this.indexData.timeStamp < this.indexData.actStartTimestamp) {
+    if (brakeStart && this.indexData.currentTime < this.indexData.actStartTime) {
       Toast.show("活动未开始");
       return false
-    } else if (brakeEnd && this.indexData.timeStamp > this.indexData.actEndTimestamp) {
+    } else if (brakeEnd && this.indexData.currentTime > this.indexData.actEndTime) {
       Toast.show("活动已结束");
       return false
     }