ExchangePanel

resource/res.json

@@ -84,6 +84,10 @@
 			"keys": "exSuccessPanel_bg.png,exSuccessPanel_btn.png",
 			"name": "exSuccessPanel"
 		},
+		{
+			"keys": "exchange_bg.png,exchange_btn_dis.png,exchange_btn_en.png",
+			"name": "exchangePanel"
+		},
 		{
 			"keys": "btn_仓库.png,btn_兑换记录.png,btn_商店.png,btn_规则.png,btn_领水滴.png,game_bg.jpg,广告.png,用户_bg.png,用户_头像.png,用户_水.png,田_初始.png,田_种植.png,田_选择.png,种植框_bg.png,种植框_left.png,种植框_right.png,种植框_山核桃.png,种植框_开心果.png,种植框_板栗.png,种植框_瓜子.png,种植框_腰果.png,种植框_花生.png,种植框_袋子.png,进度_bg.png,进度_fill.png",
 			"name": "gameScene"

src/ResJson.ts

@@ -84,6 +84,10 @@ export const ResJson = {
 			"keys": "exSuccessPanel_bg.png,exSuccessPanel_btn.png",
 			"name": "exSuccessPanel"
 		},
+		{
+			"keys": "exchange_bg.png,exchange_btn_dis.png,exchange_btn_en.png",
+			"name": "exchangePanel"
+		},
 		{
 			"keys": "btn_仓库.png,btn_兑换记录.png,btn_商店.png,btn_规则.png,btn_领水滴.png,game_bg.jpg,广告.png,用户_bg.png,用户_头像.png,用户_水.png,田_初始.png,田_种植.png,田_选择.png,种植框_bg.png,种植框_left.png,种植框_right.png,种植框_山核桃.png,种植框_开心果.png,种植框_板栗.png,种植框_瓜子.png,种植框_腰果.png,种植框_花生.png,种植框_袋子.png,进度_bg.png,进度_fill.png",
 			"name": "gameScene"

src/panels/ExRecordPanel.ts

@@ -67,7 +67,7 @@ export default class ExRecordPanel extends Panel {
     public showAni() {
         if (this.isShowing) return;
         this.isShowing = true;
-        this.y = this.height + layers.stageOffsetY * 2 + 100;
+        this.y = 1624 - layers.stageOffsetY + 100;
         const _y = 1624 - this.height - layers.stageOffsetY + 50 + 100;
         Tween.get(this)
             .to({y: _y}, 500, Ease.quartOut)
@@ -78,7 +78,7 @@ export default class ExRecordPanel extends Panel {
 
     public hideAni() {
         return Tween.get(this)
-            .to({y: this.height + layers.stageOffsetY * 2 + 100}, 500, Ease.quartOut);
+            .to({y: 1624 - layers.stageOffsetY + 100}, 500, Ease.quartOut);
     }
 
     public hidePanel() {
@@ -133,8 +133,6 @@ class RecordItem extends Container implements IScrollListItem {
 
         this.prizeDate = this.addChild(Tool.getText('', 22, '#999999'));
         this.prizeDate.position.set(176, 91);
-
-
     }
 
 }

src/panels/ExchangePanel.ts

 import { Panel } from "../../module/views/Panel";
 import { Tool } from "../Tools";
 import Sprite = FYGE.Sprite;
+import { Graphics, Texture } from "fyge";
 
 export class ExchangePanel extends Panel {
     get groupNames() {
         return ["exchangePanel"];
     }
 
-    closeBtn: Sprite;
+    private closeBtn: Sprite;
+    private btn: Sprite;
 
     initUi() {
-        this.addChild(Tool.getSprite("rule_bg.png"));
+        this.addChild(Tool.getSprite("exchange_bg.png"));
         this.closeBtn = this.addChild(Tool.getSprite('closeBtn.png'));
-        this.closeBtn.position.set(600, 350);
-
-
+        this.closeBtn.position.set(570, 634);
+        this.closeBtn.height = this.closeBtn.width = 44;
+        console.log('ExchangePanel', this.data);
+
+        const nameLabel = this.addChild(Tool.getText(this.data.prizeName, 26, '#ffffff'));
+        nameLabel.position.set((this.width - nameLabel.textWidth) / 2, 710);
+
+        const prizeImg = this.addChild(new Sprite());
+        prizeImg.texture = Texture.fromUrl(this.data.prizeImg);
+        // prizeImg.texture.addEventListener('update', () => {
+        prizeImg.position.set((this.width - 143) / 2, 523);
+        prizeImg.width = prizeImg.height = 143;
+        // });
+
+        const imgMask = this.addChild(new Graphics());
+        imgMask.position.set((this.width - 143) / 2, 523);
+        imgMask.drawCircle(71.5, 71.5, 71.5);
+        prizeImg.mask = imgMask;
+
+        this.btn = this.addChild(
+            Tool.getSprite(
+                this.data.count > 0
+                    ? 'exchange_btn_en.png'
+                    : 'exchange_btn_dis.png'
+            )
+        );
+        this.btn.position.set((this.width - this.btn.width) / 2, 876);
     }
 
     start(data) {

src/panels/ShopPanel.ts

@@ -9,7 +9,10 @@ import ScrollList = FYGE.ScrollList;
 import Texture = FYGE.Texture;
 import Graphics = FYGE.Graphics;
 import TextField = FYGE.TextField;
-import { Ease } from "fyge";
+import { Ease, MouseEvent } from "fyge";
+import panelCtrl from "../../module/ctrls/panelCtrl";
+import PanelCtrl from "../../module/ctrls/panelCtrl";
+import { ExchangePanel } from "./ExchangePanel";
 
 export default class ShopPanel extends Panel {
     get groupNames() {
@@ -32,7 +35,36 @@ export default class ShopPanel extends Panel {
         this.scroll = this.addChild(new ScrollList(ShopItem, 635, 227, 635, 830));
         this.scroll.position.set((this.width - this.scroll.width) / 2, 210);
         this.scroll.updateData([
-            1, 2, 3, 4, 5, 6
+            {
+                prizeName: '恰恰免单',
+                prizeImg: 'https://source.unsplash.com/user/erondu/116x116',
+                count: 0,
+            },
+            {
+                prizeName: '恰恰-50元加价卷',
+                prizeImg: 'https://source.unsplash.com/user/erondu/116x116',
+                count: 1000,
+            },
+            {
+                prizeName: '恰恰-100元加价卷',
+                prizeImg: 'https://source.unsplash.com/user/erondu/116x116',
+                count: 10000,
+            },
+            {
+                prizeName: '恰恰-1折卷',
+                prizeImg: 'https://source.unsplash.com/user/erondu/116x116',
+                count: 10000,
+            },
+            {
+                prizeName: '恰恰-5折卷',
+                prizeImg: 'https://source.unsplash.com/user/erondu/116x116',
+                count: 5000,
+            },
+            {
+                prizeName: '恰恰-9折卷',
+                prizeImg: 'https://source.unsplash.com/user/erondu/116x116',
+                count: 1000,
+            },
         ]);
 
     }
@@ -40,7 +72,7 @@ export default class ShopPanel extends Panel {
     public showAni() {
         if (this.isShowing) return;
         this.isShowing = true;
-        this.y = this.height + layers.stageOffsetY * 2 + 100;
+        this.y = 1624 - layers.stageOffsetY + 100;
         const _y = 1624 - this.height - layers.stageOffsetY + 50 + 100;
         Tween.get(this)
             .to({y: _y}, 500, Ease.quartOut)
@@ -51,7 +83,7 @@ export default class ShopPanel extends Panel {
 
     public hideAni() {
         return Tween.get(this)
-            .to({y: this.height + layers.stageOffsetY * 2 + 100}, 500, Ease.quartOut);
+            .to({y: 1624 - layers.stageOffsetY + 100}, 500, Ease.quartOut);
     }
 
     public hidePanel() {
@@ -86,6 +118,18 @@ class ShopItem extends Container implements IScrollListItem {
 
     public initData(id: number, data: any): void {
         if (!data) return;
+        this.data = data;
+
+        this.itemName.text = data.prizeName;
+        this.itemImg.texture = Texture.fromUrl(data.prizeImg);
+        this.itemNum.text = (data.count <= 0) ? '来晚一步，抢光了' : `剩余${data.count}份`;
+        this.itemNum.position.set((this.width - this.itemNum.textWidth) / 2, 176);
+        this.itemMask.visible = (data.count <= 0);
+
+        this.removeAllEventListener();
+        (data.count > 0) && this.addEventListener(MouseEvent.CLICK, () => {
+            PanelCtrl.instance.show(ExchangePanel, this.data);
+        });
     }
 
     constructor() {
@@ -94,7 +138,6 @@ class ShopItem extends Container implements IScrollListItem {
 
         this.itemImg = this.addChild(new Sprite());
         this.itemImg.position.set(35, 26);
-        this.itemImg.texture = Texture.fromUrl('https://source.unsplash.com/user/erondu/116x116');
 
         const mask = this.addChild(new Graphics());
         mask.drawCircle(92, 83, 58);
@@ -103,13 +146,11 @@ class ShopItem extends Container implements IScrollListItem {
         this.itemMask = this.addChild(Tool.getSprite('shop_mask.png'));
         this.itemMask.visible = false;
 
-        this.itemName = this.addChild(Tool.getText('恰恰50元抵扣卷', 26, '#4a4a4a'));
+        this.itemName = this.addChild(Tool.getText('', 26, '#4a4a4a'));
         this.itemName.position.set(185, 24);
 
-        this.itemNum = this.addChild(Tool.getText('剩余8000份', 18, '#f94c2a'));
+        this.itemNum = this.addChild(Tool.getText('剩余0份', 18, '#f94c2a'));
         this.itemNum.position.set((this.width - this.itemNum.textWidth) / 2, 176);
-
-
     }
 
 }

src/panels/TaskPanel.ts

@@ -81,7 +81,7 @@ export default class TaskPanel extends Panel {
     public showAni() {
         if (this.isShowing) return;
         this.isShowing = true;
-        this.y = this.height + layers.stageOffsetY * 2 + 100;
+        this.y = 1624 - layers.stageOffsetY + 100;
         const _y = 1624 - this.height - layers.stageOffsetY + 50 + 100;
         Tween.get(this)
             .to({y: _y}, 500, Ease.quartOut)
@@ -92,7 +92,7 @@ export default class TaskPanel extends Panel {
 
     public hideAni() {
         return Tween.get(this)
-            .to({y: this.height + layers.stageOffsetY * 2 + 100}, 500, Ease.quartOut);
+            .to({y: 1624 - layers.stageOffsetY + 100}, 500, Ease.quartOut);
     }
 
     public hidePanel() {

src/panels/WareHousePanel.ts

@@ -46,7 +46,7 @@ export default class WareHousePanel extends Panel {
     public showAni() {
         if (this.isShowing) return;
         this.isShowing = true;
-        this.y = this.height + layers.stageOffsetY * 2 + 100;
+        this.y = 1624 - layers.stageOffsetY + 100;
         const _y = 1624 - this.height - layers.stageOffsetY + 50 + 100;
         Tween.get(this)
             .to({y: _y}, 500, Ease.quartOut)
@@ -57,7 +57,7 @@ export default class WareHousePanel extends Panel {
 
     public hideAni() {
         return Tween.get(this)
-            .to({y: this.height + layers.stageOffsetY * 2 + 100}, 500, Ease.quartOut);
+            .to({y: 1624 - layers.stageOffsetY + 100}, 500, Ease.quartOut);
     }
 
     public hidePanel() {