111

.idea/workspace.xml

 <?xml version="1.0" encoding="UTF-8"?>
 <project version="4">
   <component name="ChangeListManager">
-    <list default="true" id="9cef0552-af3c-4a1c-be1f-dc41ebe5b6db" name="Default Changelist" comment="">
-      <change afterPath="$PROJECT_DIR$/resource/map/map_creditsBg.png" afterDir="false" />
-      <change afterPath="$PROJECT_DIR$/resource/map/map_energyAdd.png" afterDir="false" />
-      <change afterPath="$PROJECT_DIR$/resource/map/map_energyBg.png" afterDir="false" />
-      <change afterPath="$PROJECT_DIR$/src/scene/map/CheckBtn.ts" afterDir="false" />
-      <change afterPath="$PROJECT_DIR$/src/scene/map/MapPart.ts" afterDir="false" />
+    <list default="true" id="9cef0552-af3c-4a1c-be1f-dc41ebe5b6db" name="Default Changelist" comment="111">
+      <change afterPath="$PROJECT_DIR$/mock/miniTb/babycare.getIndex.json" afterDir="false" />
       <change beforePath="$PROJECT_DIR$/.idea/workspace.xml" beforeDir="false" afterPath="$PROJECT_DIR$/.idea/workspace.xml" afterDir="false" />
-      <change beforePath="$PROJECT_DIR$/resource/res.json" beforeDir="false" afterPath="$PROJECT_DIR$/resource/res.json" afterDir="false" />
-      <change beforePath="$PROJECT_DIR$/src/ResJson.ts" beforeDir="false" afterPath="$PROJECT_DIR$/src/ResJson.ts" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/module/views/layers.ts" beforeDir="false" afterPath="$PROJECT_DIR$/module/views/layers.ts" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/src/TaoBaoNet.ts" beforeDir="false" afterPath="$PROJECT_DIR$/src/TaoBaoNet.ts" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/src/scene/map/CheckBtn.ts" beforeDir="false" afterPath="$PROJECT_DIR$/src/scene/map/CheckBtn.ts" afterDir="false" />
       <change beforePath="$PROJECT_DIR$/src/scene/map/MapBottom.ts" beforeDir="false" afterPath="$PROJECT_DIR$/src/scene/map/MapBottom.ts" afterDir="false" />
       <change beforePath="$PROJECT_DIR$/src/scene/map/MapMid.ts" beforeDir="false" afterPath="$PROJECT_DIR$/src/scene/map/MapMid.ts" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/src/scene/map/MapPart.ts" beforeDir="false" afterPath="$PROJECT_DIR$/src/scene/map/MapPart.ts" afterDir="false" />
       <change beforePath="$PROJECT_DIR$/src/scene/map/MapScene.ts" beforeDir="false" afterPath="$PROJECT_DIR$/src/scene/map/MapScene.ts" afterDir="false" />
       <change beforePath="$PROJECT_DIR$/src/scene/map/MapTop.ts" beforeDir="false" afterPath="$PROJECT_DIR$/src/scene/map/MapTop.ts" afterDir="false" />
       <change beforePath="$PROJECT_DIR$/src/scene/map/MapUI.ts" beforeDir="false" afterPath="$PROJECT_DIR$/src/scene/map/MapUI.ts" afterDir="false" />
@@ -25,6 +23,7 @@
     <option name="RECENT_TEMPLATES">
       <list>
         <option value="TypeScript File" />
+        <option value="JsonFile" />
       </list>
     </option>
   </component>
@@ -102,7 +101,8 @@
       <option name="presentableId" value="Default" />
       <updated>1594106513515</updated>
       <workItem from="1594106517562" duration="5224000" />
-      <workItem from="1594111755267" duration="29535000" />
+      <workItem from="1594111755267" duration="29551000" />
+      <workItem from="1594260676967" duration="14401000" />
     </task>
     <task id="LOCAL-00001" summary="111">
       <created>1594122339119</created>
@@ -111,7 +111,14 @@
       <option name="project" value="LOCAL" />
       <updated>1594122339119</updated>
     </task>
-    <option name="localTasksCounter" value="2" />
+    <task id="LOCAL-00002" summary="111">
+      <created>1594213388301</created>
+      <option name="number" value="00002" />
+      <option name="presentableId" value="LOCAL-00002" />
+      <option name="project" value="LOCAL" />
+      <updated>1594213388301</updated>
+    </task>
+    <option name="localTasksCounter" value="3" />
     <servers />
   </component>
   <component name="TypeScriptGeneratedFilesManager">
@@ -130,26 +137,26 @@
       <screen x="31" y="23" width="1889" height="1177" />
     </state>
     <state x="251" y="471" key="ANALYSIS_DLG_com.intellij.analysis.BaseAnalysisAction$1/31.23.1889.1177@31.23.1889.1177" timestamp="1594113080922" />
-    <state x="58" y="183" key="CommitChangelistDialog2" timestamp="1594122338916">
+    <state x="58" y="183" key="CommitChangelistDialog2" timestamp="1594277421161">
       <screen x="31" y="23" width="1889" height="1177" />
     </state>
-    <state x="58" y="183" key="CommitChangelistDialog2/31.23.1889.1177@31.23.1889.1177" timestamp="1594122338916" />
-    <state width="879" height="329" key="GridCell.Tab.0.bottom" timestamp="1594200117132">
+    <state x="58" y="183" key="CommitChangelistDialog2/31.23.1889.1177@31.23.1889.1177" timestamp="1594277421161" />
+    <state width="879" height="329" key="GridCell.Tab.0.bottom" timestamp="1594261592327">
       <screen x="31" y="23" width="1889" height="1177" />
     </state>
-    <state width="879" height="329" key="GridCell.Tab.0.bottom/31.23.1889.1177@31.23.1889.1177" timestamp="1594200117132" />
-    <state width="879" height="329" key="GridCell.Tab.0.center" timestamp="1594200117131">
+    <state width="879" height="329" key="GridCell.Tab.0.bottom/31.23.1889.1177@31.23.1889.1177" timestamp="1594261592327" />
+    <state width="879" height="329" key="GridCell.Tab.0.center" timestamp="1594261592326">
       <screen x="31" y="23" width="1889" height="1177" />
     </state>
-    <state width="879" height="329" key="GridCell.Tab.0.center/31.23.1889.1177@31.23.1889.1177" timestamp="1594200117131" />
-    <state width="879" height="329" key="GridCell.Tab.0.left" timestamp="1594200117130">
+    <state width="879" height="329" key="GridCell.Tab.0.center/31.23.1889.1177@31.23.1889.1177" timestamp="1594261592326" />
+    <state width="879" height="329" key="GridCell.Tab.0.left" timestamp="1594261592326">
       <screen x="31" y="23" width="1889" height="1177" />
     </state>
-    <state width="879" height="329" key="GridCell.Tab.0.left/31.23.1889.1177@31.23.1889.1177" timestamp="1594200117130" />
-    <state width="879" height="329" key="GridCell.Tab.0.right" timestamp="1594200117131">
+    <state width="879" height="329" key="GridCell.Tab.0.left/31.23.1889.1177@31.23.1889.1177" timestamp="1594261592326" />
+    <state width="879" height="329" key="GridCell.Tab.0.right" timestamp="1594261592326">
       <screen x="31" y="23" width="1889" height="1177" />
     </state>
-    <state width="879" height="329" key="GridCell.Tab.0.right/31.23.1889.1177@31.23.1889.1177" timestamp="1594200117131" />
+    <state width="879" height="329" key="GridCell.Tab.0.right/31.23.1889.1177@31.23.1889.1177" timestamp="1594261592326" />
     <state x="210" y="320" key="RollbackChangesDialog" timestamp="1594173186663">
       <screen x="31" y="23" width="1889" height="1177" />
     </state>
@@ -158,10 +165,10 @@
       <screen x="31" y="23" width="1889" height="1177" />
     </state>
     <state x="31" y="250" key="SettingsEditor/31.23.1889.1177@31.23.1889.1177" timestamp="1594195630991" />
-    <state x="92" y="351" key="Vcs.Push.Dialog.v2" timestamp="1594122340319">
+    <state x="92" y="351" key="Vcs.Push.Dialog.v2" timestamp="1594213389525">
       <screen x="31" y="23" width="1889" height="1177" />
     </state>
-    <state x="92" y="351" key="Vcs.Push.Dialog.v2/31.23.1889.1177@31.23.1889.1177" timestamp="1594122340319" />
+    <state x="92" y="351" key="Vcs.Push.Dialog.v2/31.23.1889.1177@31.23.1889.1177" timestamp="1594213389525" />
     <state x="87" y="216" key="com.intellij.openapi.editor.actions.MultiplePasteAction$ClipboardContentChooser" timestamp="1594111906161">
       <screen x="31" y="23" width="1889" height="1177" />
     </state>
@@ -170,9 +177,9 @@
       <screen x="31" y="23" width="1889" height="1177" />
     </state>
     <state x="157" y="286" key="run.anything.popup/31.23.1889.1177@31.23.1889.1177" timestamp="1594188122355" />
-    <state x="640" y="288" width="670" height="676" key="search.everywhere.popup" timestamp="1594194483179">
+    <state x="640" y="288" width="670" height="676" key="search.everywhere.popup" timestamp="1594279600705">
       <screen x="31" y="23" width="1889" height="1177" />
     </state>
-    <state x="640" y="288" width="670" height="676" key="search.everywhere.popup/31.23.1889.1177@31.23.1889.1177" timestamp="1594194483179" />
+    <state x="640" y="288" width="670" height="676" key="search.everywhere.popup/31.23.1889.1177@31.23.1889.1177" timestamp="1594279600705" />
   </component>
 </project>
\ No newline at end of file

mock/miniTb/babycare.getIndex.json

+{
+    "success": true,
+    "code": "1111",
+    "message": "OK",
+    "data": {
+        "power": 100,
+        "currentLevel": 4,
+        "tools": {
+            "STEPS": 1,
+            "BOOMS": 2,
+            "HAMMERS": 3
+        },
+        "prizes": [
+            {
+                "level": 12
+            }
+        ],
+        "visitors": [
+            {
+                "level": 1,
+                "scores": 11111,
+                "stars": 1,
+                "isPrizeLevel": false,
+                "isVisitSuccess": true
+            },
+            {
+                "level": 2,
+                "scores": 22222,
+                "stars": 2,
+                "isPrizeLevel": false,
+                "isVisitSuccess": true
+            },
+            {
+                "level": 3,
+                "scores": 3333,
+                "stars": 3,
+                "isPrizeLevel": false,
+                "isVisitSuccess": true
+            },
+            {
+                "level": 4,
+                "scores": 44444,
+                "stars": 2,
+                "isPrizeLevel": false,
+                "isVisitSuccess": false
+            }
+        ],
+        "isFristLogin": false
+    }
+}

module/views/layers.ts

@@ -33,9 +33,9 @@ class Layers extends FYGE.Container {
             this.addChild(this[arr[i]]);
         }
         //都以底部适配
-        this.sceneLayer.y = -this.stageOffsetY;
+        this.sceneLayer.y = this.stageOffsetY;
         // this.popupLayer.y = -this.stageOffsetY;
-        this.popupLayer.y -= 420 / 2;
+        // this.popupLayer.y -= 420 / 2;
 
         this.shareLayer.y = -this.stageOffsetY;
         //初始化场景层级
@@ -117,4 +117,4 @@ export function destroyLayers() {
     layers.removeChildren();
     //从父级stage移除自己，init会重新加
     if (layers.parent) layers.parent.removeChild(layers)
-}
+}
\ No newline at end of file

src/TaoBaoNet.ts

@@ -3,13 +3,15 @@ import { GDispatcher } from "./Main";
 
 //接口枚举，包括需要调用淘宝的api，用是否含有兑吧区分，或者单独区分
 export enum TbNetName {
-   
+
     /**
      * 埋点统计  到时改名字
      * activityId   params  elemType
      */
     trackingReport = "squirrelsAdoptRest2c.trackingReport",
 
+    getIndex = "babycare.getIndex",
+
 
     ///////////////////前端调用接口都加个mine
 

src/scene/map/CheckBtn.ts

@@ -7,8 +7,16 @@ import TextField = FYGE.TextField;
 import { Tool } from "../../Tools";
 import TEXT_ALIGN = FYGE.TEXT_ALIGN;
 import MouseEvent = FYGE.MouseEvent;
+import Point = FYGE.Point;
+
+export enum CHECK_TYPE {
+    COM,   // 普通
+    PRI,  // 奖励
+    CUR,    // 当前
+}
 
 export default class CheckBtn extends Container {
+
     private btn: Button = null;
     private checkLabel: TextField = null;
 
@@ -19,6 +27,11 @@ export default class CheckBtn extends Container {
 
     private _starCount = 0;
     public set starCount(count: number) {
+        if (count > 3) {
+            count = 3;
+        } else if (count < 1) {
+            count = 1;
+        }
         if (this._starCount == count) return;
         this._starCount = count;
         this.star.forEach((value, index) => {
@@ -26,6 +39,61 @@ export default class CheckBtn extends Container {
         });
     }
 
+    private _enabled: boolean = true;
+    public set enabled(enabled: boolean) {
+        if (this._enabled == enabled) return;
+        this._enabled = enabled;
+
+        this.btn.enabled = enabled;
+        this.star.forEach(v => v.visible = enabled);
+        this.checkLabel.visible = false;
+    }
+
+    private _type: CHECK_TYPE = CHECK_TYPE.COM;
+    public set type(type: CHECK_TYPE) {
+        if (this._type == type) return;
+        this._type = type;
+
+        switch (type) {
+            case CHECK_TYPE.COM:
+                // @ts-ignore
+                this.btn.changeTexture(
+                    RES.getRes('map_check_enable.png'),
+                    RES.getRes('map_check_enable.png'),
+                    RES.getRes('map_check_disable.png'));
+
+                this.checkLabel.strokeColor = '#316ec6';
+                break;
+
+            case CHECK_TYPE.PRI:
+                // @ts-ignore
+                this.btn.changeTexture(
+                    RES.getRes('map_check_enable.png'),
+                    RES.getRes('map_check_enable.png'),
+                    RES.getRes('map_check_disable_prize.png'));
+
+                this.checkLabel.strokeColor = '#316ec6';
+                break;
+
+            case CHECK_TYPE.CUR:
+                // @ts-ignore
+                this.btn.changeTexture(
+                    RES.getRes('map_check_enable_cur.png'),
+                    RES.getRes('map_check_enable_cur.png'),
+                    RES.getRes('map_check_disable.png'));
+
+                this.checkLabel.strokeColor = '#a55507';
+                break;
+        }
+    }
+
+    public update() {
+        super.update();
+        let up = this.localToGlobal(new Point(), new Point());
+        let bp = this.localToGlobal(new Point(0, 120), new Point());
+        this.alpha = this.stage.viewRect.isPointIn(up) || this.stage.viewRect.isPointIn(bp);
+    }
+
 
     constructor(data) {
         super();
@@ -33,7 +101,7 @@ export default class CheckBtn extends Container {
         this.initUi(data);
     }
 
-    private initUi(data) {
+    protected initUi(data) {
         this.btn = this.addChild(new Button(
             RES.getRes('map_check_enable.png'),
             RES.getRes('map_check_enable.png'),

src/scene/map/MapBottom.ts

 import MapPart from "./MapPart";
 import { RES } from "../../../module/RES";
+import Point = FYGE.Point;
 
 export default class MapBottom extends MapPart {
 
@@ -19,26 +20,23 @@ export default class MapBottom extends MapPart {
     ];
 
     constructor(data) {
-        super();
-
+        super(data);
         this.data = data;
-    }
 
-    protected initUi() {
-        super.initUi();
         this.bg.texture = RES.getRes('map_bg1.jpg');
+        this.initIcon();
     }
 
-    public start(data?: any) {
-        super.start(data);
-    }
-
-    public initEvents() {
-        super.initEvents();
-    }
-
-    public removeEvents() {
-        super.removeEvents();
+    public update() {
+        super.update();
+        let up = this.localToGlobal(new Point(0, -10), new Point());
+        let bp = this.localToGlobal(new Point(0, MapBottom.HEIGHT + 10), new Point());
+        let ucp = this.localToGlobal(new Point(0, MapBottom.HEIGHT / 4), new Point());
+        let bcp = this.localToGlobal(new Point(0, MapBottom.HEIGHT / 4 * 3), new Point());
+        this.alpha = this.stage.viewRect.isPointIn(up)
+            || this.stage.viewRect.isPointIn(bp)
+            || this.stage.viewRect.isPointIn(ucp)
+            || this.stage.viewRect.isPointIn(bcp);
     }
 
     public destroy() {

src/scene/map/MapMid.ts

 import MapPart from "./MapPart";
 import { RES } from "../../../module/RES";
-import Container = FYGE.Container;
+import Point = FYGE.Point;
 
 export default class MapMid extends MapPart {
 
@@ -22,28 +22,25 @@ export default class MapMid extends MapPart {
     ];
 
     constructor(data) {
-        super();
-
+        super(data);
         this.data = data;
-    }
 
-    protected initUi() {
-        super.initUi();
         this.bg.texture = RES.getRes('map_bg2.jpg');
-
+        this.initIcon();
     }
 
-    public start(data?: any) {
-        super.start(data);
+    public update() {
+        super.update();
+        let up = this.localToGlobal(new Point(0, -10), new Point());
+        let bp = this.localToGlobal(new Point(0, MapMid.HEIGHT + 10), new Point());
+        let ucp = this.localToGlobal(new Point(0, MapMid.HEIGHT / 4), new Point());
+        let bcp = this.localToGlobal(new Point(0, MapMid.HEIGHT / 4 * 3), new Point());
+        this.alpha = this.stage.viewRect.isPointIn(up)
+            || this.stage.viewRect.isPointIn(bp)
+            || this.stage.viewRect.isPointIn(ucp)
+            || this.stage.viewRect.isPointIn(bcp);
     }
 
-    public initEvents() {
-        super.initEvents();
-    }
-
-    public removeEvents() {
-        super.removeEvents();
-    }
 
     public destroy() {
         super.destroy();

src/scene/map/MapPart.ts

-import { Module } from "../../../module/views/Module";
 import Sprite = FYGE.Sprite;
 import CheckBtn from "./CheckBtn";
 import { MapScene } from "./MapScene";
-import MapBottom from "./MapBottom";
-import { Scene } from "../../../module/views/Scene";
+import Container = FYGE.Container;
 
-export default class MapPart extends Module {
+export default class MapPart extends Container {
+
+    protected data: any = null;
 
     protected totalCount: number = 0;
 
@@ -13,15 +13,10 @@ export default class MapPart extends Module {
 
     protected bg: Sprite = null;
 
-    constructor() {
+    constructor(data) {
         super();
-    }
-
-    protected initUi() {
-        super.initUi();
-
         this.bg = this.addChild(new Sprite());
-        this.initIcon();
+        this.data = data;
     }
 
     protected initIcon() {

src/scene/map/MapScene.ts

 import { Scene } from "../../../module/views/Scene";
-import ScrollPage = FYGE.ScrollPage;
-import Container = FYGE.Container;
 import MapBottom from "./MapBottom";
 import MapTop from "./MapTop";
 import MapUI from "./MapUI";
 import MapMid from "./MapMid";
-import CheckBtn from "./CheckBtn";
+import CheckBtn, { CHECK_TYPE } from "./CheckBtn";
+import { layers } from "../../../module/views/layers";
+import ScrollPage = FYGE.ScrollPage;
+import Container = FYGE.Container;
+import { sendTbNet, TbNetName } from "../../TaoBaoNet";
 
 export class MapScene extends Scene {
     private mapContainer: Container = null;
@@ -13,6 +15,11 @@ export class MapScene extends Scene {
 
     public static checkArr: CheckBtn[] = [];   // 关卡按钮容器
 
+    public destroy() {
+        super.destroy();
+        MapScene.checkArr = [];
+    }
+
     private uiLayer: Container = null;
 
     public get groupNames(): string[] {
@@ -22,7 +29,16 @@ export class MapScene extends Scene {
     protected initUi() {
         super.initUi();
 
-        this.scrollPage = this.addChild(new ScrollPage(750, 1624, 888, true, true));
+        sendTbNet(TbNetName.getIndex, {},
+            (success, res) => {
+
+            }
+        );
+
+        this.scrollPage = this.addChild(new ScrollPage(
+            750, layers.stageHeight,
+            888, true, true
+        ));
         this.mapContainer = this.scrollPage.view.addChild(new Container());
 
         this.uiLayer = this.addChild(new MapUI());
@@ -63,13 +79,32 @@ export class MapScene extends Scene {
         this.scrollPage.maxDistance = maxHeight;
         this.scrollPage.scrollTo(maxHeight, 0);
 
+        // MapScene.checkArr.forEach(v => {
+        //     v.type = CHECK_TYPE.PRI;
+        //     v.enabled = false;
+        // });
+        this.scrollToCheck(113);
+        MapScene.checkArr[113].type = CHECK_TYPE.CUR;
     }
 
-    public start(data?: any) {
-        super.start(data);
+    private scrollToCheck(checkNum: number, time = 0) {
+        if (checkNum < 1) {
+            checkNum = 1;
+        } else if (checkNum > 120) {
+            checkNum = 120;
+        }
+        const check = MapScene.checkArr[checkNum];
+        const checkY = check.y + check.parent.y - 1624 / 2;
+        this.scrollPage.scrollTo(checkY, time);
+    }
 
+    public update() {
+        super.update();
     }
 
+    public start(data?: any) {
+        super.start(data);
+    }
 
     public initEvents() {
         super.initEvents();

src/scene/map/MapTop.ts

 import MapPart from "./MapPart";
 import { RES } from "../../../module/RES";
+import Point = FYGE.Point;
 
 export default class MapTop extends MapPart {
 
@@ -13,27 +14,24 @@ export default class MapTop extends MapPart {
     ];
 
     constructor(data) {
-        super();
+        super(data);
 
         this.data = data;
-    }
 
-    protected initUi() {
-        super.initUi();
         this.bg.texture = RES.getRes('map_bg3.jpg');
-
-    }
-
-    public start(data?: any) {
-        super.start(data);
-    }
-
-    public initEvents() {
-        super.initEvents();
+        this.initIcon();
     }
 
-    public removeEvents() {
-        super.removeEvents();
+    public update() {
+        super.update();
+        let up = this.localToGlobal(new Point(0, -10), new Point());
+        let bp = this.localToGlobal(new Point(0, MapTop.HEIGHT + 10), new Point());
+        let ucp = this.localToGlobal(new Point(0, MapTop.HEIGHT / 4), new Point());
+        let bcp = this.localToGlobal(new Point(0, MapTop.HEIGHT / 4 * 3), new Point());
+        this.alpha = this.stage.viewRect.isPointIn(up)
+            || this.stage.viewRect.isPointIn(bp)
+            || this.stage.viewRect.isPointIn(ucp)
+            || this.stage.viewRect.isPointIn(bcp);
     }
 
     public destroy() {

src/scene/map/MapUI.ts

@@ -5,6 +5,7 @@ import Sprite = FYGE.Sprite;
 import TEXT_ALIGN = FYGE.TEXT_ALIGN;
 import { RES } from "../../../module/RES";
 import { Tool } from "../../Tools";
+import MouseEvent = FYGE.MouseEvent;
 
 export default class MapUI extends Container {
     private myPrizeBtn: Button = null;
@@ -18,6 +19,44 @@ export default class MapUI extends Container {
         super();
 
         this.initUi();
+        this.initEvent();
+
+    }
+
+    private initEvent() {
+        this.ruleBtn.addEventListener(MouseEvent.CLICK, this.clickBtn, this);
+        this.myPrizeBtn.addEventListener(MouseEvent.CLICK, this.clickBtn, this);
+        this.prizeBox.addEventListener(MouseEvent.CLICK, this.clickBtn, this);
+    }
+
+    private removeEvent() {
+        this.ruleBtn.removeEventListener(MouseEvent.CLICK, this.clickBtn, this);
+        this.myPrizeBtn.removeEventListener(MouseEvent.CLICK, this.clickBtn, this);
+        this.prizeBox.removeEventListener(MouseEvent.CLICK, this.clickBtn, this);
+    }
+
+    private clickBtn(e) {
+        switch (e.target) {
+            case this.ruleBtn:
+                /// TODO 规则
+                console.log('规则');
+                break;
+
+            case this.myPrizeBtn:
+                /// TODO 我的奖品
+                console.log('我的奖品');
+                break;
+
+            case this.prizeBox:
+                /// TODO 奖励盒子
+                console.log('奖励盒子');
+                break;
+        }
+    }
+
+    public destroy() {
+        super.destroy();
+        this.removeEvent();
     }
 
     private initUi() {
@@ -60,6 +99,13 @@ class EnergyBox extends Container {
         super();
 
         this.initUi(data);
+
+        this.addBtn.addEventListener(MouseEvent.CLICK, this.clickAdd, this);
+    }
+
+    private clickAdd() {
+        /// TODO 增加按钮
+        console.log('增加按钮');
     }
 
     private initUi(data) {
@@ -75,6 +121,11 @@ class EnergyBox extends Container {
         ));
 
     }
+
+    public destroy() {
+        super.destroy();
+        this.addBtn.removeEventListener(MouseEvent.CLICK, this.clickAdd, this);
+    }
 }
 
 /**