exchangePanel

mock/miniTb/qiaqia2.getExchangeGoodsList.json

+{
+    "code": "000000",
+    "data": [
+        {
+            "image": "https://source.unsplash.com/user/erondu/100x100",
+            "ename": "111111",
+            "amount": 20,
+            "exchangeInfo": [
+                {
+                    "name": "核桃",
+                    "storage": 110,
+                    "type": "PECAN",
+                    "value": 10
+                }
+            ],
+            "restStock": 1000,
+            "isLimitStock": true,
+            "name": "权益奖品",
+            "startTime": 1591682068000,
+            "_id": "5edf3a16f344891ad1f6adab",
+            "endTime": 1591682068000,
+            "type": 1
+        },
+        {
+            "image": "https://source.unsplash.com/user/erondu/100x100",
+            "ename": "111111",
+            "amount": 20,
+            "exchangeInfo": [
+                {
+                    "name": "核桃",
+                    "storage": 0,
+                    "type": "CHESTNUT",
+                    "value": 10
+                },
+                {
+                    "name": "核桃",
+                    "storage": 5,
+                    "type": "PECAN",
+                    "value": 10
+                },
+                {
+                    "name": "核桃",
+                    "storage": 1,
+                    "type": "PEANUT",
+                    "value": 10
+                },
+                {
+                    "name": "核桃",
+                    "storage": 11,
+                    "type": "MELON",
+                    "value": 10
+                },
+                {
+                    "name": "核桃",
+                    "storage": 10,
+                    "type": "PISTACHIONUT",
+                    "value": 10
+                },
+                {
+                    "name": "核桃",
+                    "storage": 0,
+                    "type": "CASHEWNUT",
+                    "value": 10
+                }
+            ],
+            "restStock": 1000,
+            "isLimitStock": true,
+            "name": "权益奖品",
+            "startTime": 1591682068000,
+            "_id": "5edf3a16f344891ad1f6adab",
+            "endTime": 1591682068000,
+            "type": 1
+        },
+        {
+            "image": "https://source.unsplash.com/user/erondu/100x100",
+            "ename": "111111",
+            "amount": 20,
+            "exchangeInfo": [
+                {
+                    "name": "核桃",
+                    "storage": 10,
+                    "type": "PECAN",
+                    "value": 10
+                }
+            ],
+            "restStock": 1000,
+            "isLimitStock": true,
+            "name": "权益奖品",
+            "startTime": 1591682068000,
+            "_id": "5edf3a16f344891ad1f6adab",
+            "endTime": 1591682068000,
+            "type": 1
+        }
+    ],
+    "success": true
+}

mock/miniTb/qiaqiaHome.getGameInfo.json

@@ -10,7 +10,7 @@
                 "plant": true,
                 "level": 3,
                 "plantType": "PEANUT",
-                "waterTime": 1591790173326,
+                "waterTime": 1591891173326,
                 "totalTime": 300000000,
                 "waterRestCount": 0
             },
@@ -19,7 +19,7 @@
                 "plant": true,
                 "level": 1,
                 "plantType": "CASHEWNUT",
-                "waterTime": 0,
+                "waterTime": 1591891173326,
                 "totalTime": 3000,
                 "waterRestCount": 0
             },
@@ -28,7 +28,7 @@
                 "plant": true,
                 "level": 1,
                 "plantType": "PECAN",
-                "waterTime": 1591780173326,
+                "waterTime": 1591891173326,
                 "totalTime": 300000000,
                 "waterRestCount": 0
             },

resource/res.json

@@ -89,7 +89,7 @@
 			"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,种植框_time_bg.png,种植框_山核桃.png,种植框_开心果.png,种植框_板栗.png,种植框_瓜子.png,种植框_腰果.png,种植框_花生.png,袋子.png,进度_bg.png,进度_fill.png",
+			"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,种植框_time_bg.png,种植框_开心果.png,种植框_板栗.png,种植框_核桃.png,种植框_瓜子.png,种植框_腰果.png,种植框_花生.png,袋子.png,进度_bg.png,进度_fill.png",
 			"name": "gameScene"
 		},
 		{

src/TaoBaoNet.ts

@@ -31,6 +31,8 @@ export enum TbNetName {
 
     baseInfo = 'qiaqia2.getActivityBaseInfoById',
 
+    shopList = 'qiaqia2.getExchangeGoodsList',
+
     taskList = 'qiaqia2.getTaskList',
 
     wareHouse = 'qiaqiaHome.getStorages',

src/const/GEVENT.ts

+export enum G_EVENT {
+    GET_WAREHOUSE = 'getWareHouse',
+    GET_SHOPLIST = 'getShopList'
+}

src/const/staticData.ts

@@ -41,7 +41,7 @@ export const s_PlantData = {
     },
     PECAN: {
         key: PLANT_TYPE.PECAN,
-        name: '山核桃',
+        name: '核桃',
         time: 2,
     },
     PEANUT: {

src/panels/ExchangePanel.ts

 import { Panel } from "../../module/views/Panel";
 import { Tool } from "../Tools";
+import { s_PlantData } from "../const/staticData";
 import Sprite = FYGE.Sprite;
 import Graphics = FYGE.Graphics;
 import Texture = FYGE.Texture;
 import MouseEvent = FYGE.MouseEvent;
+import Container = FYGE.Container;
+import TEXT_ALIGN = FYGE.TEXT_ALIGN;
+import TEXT_lINETYPE = FYGE.TEXT_lINETYPE;
 
 export class ExchangePanel extends Panel {
     get groupNames() {
@@ -20,29 +24,95 @@ export class ExchangePanel extends Panel {
         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 nameLabel = this.addChild(Tool.getText(this.data.name, 26, '#ffffff'));
+        nameLabel.position.set((this.width - nameLabel.textWidth) / 2, 700);
 
         const prizeImg = this.addChild(new Sprite());
-        prizeImg.texture = Texture.fromUrl(this.data.prizeImg);
-        // prizeImg.texture.addEventListener('update', () => {
+        prizeImg.texture = Texture.fromUrl(this.data.image);
         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'
-            )
-        );
+        let enough = true;
+        'exchange_btn_en.png';
+        for (let i = 0; i < this.data.exchangeInfo.length; i++) {
+            let d = this.data.exchangeInfo[i];
+            if (d.value > d.storage) {
+                enough = false;
+                'exchange_btn_dis.png';
+                break;
+            }
+        }
+
+        this.btn = this.addChild(Tool.getSprite(enough ? 'exchange_btn_en.png' : 'exchange_btn_dis.png'));
+
+        enough && this.btn.addEventListener(MouseEvent.CLICK, () => {
+            console.log('兑换');
+            /// TODO
+        });
         this.btn.position.set((this.width - this.btn.width) / 2, 876);
+        this.setExchangeInfo();
+
+        let introduction = this.addChild(Tool.getText(`商品介绍：${this.data.name}`, 20, '#dbd2ca'));
+        introduction.textWidth = 470;
+        introduction.lineType = TEXT_lINETYPE.MULTI;
+        introduction.textAlign = TEXT_ALIGN.LEFT;
+        introduction.position.set(139, 980);
+
+        if (this.data.type == 1) {
+            // let sDate = new Date(this.data.startTime);
+            let eDate = new Date(this.data.endTime);
+            // let sLabel = `${sDate.getFullYear()}/${sDate.getMonth() + 1}/${sDate.getDate()}`;
+            let eLabel = `${eDate.getFullYear()}/${eDate.getMonth() + 1}/${eDate.getDate()} ${eDate.getHours()}:${eDate.getMinutes()}`;
+            let date = this.addChild(Tool.getText(`${eLabel}合成截止`, 20, '#dbd2ca'));
+            date.position.set(137, introduction.y + introduction.textHeight + 5);
+        }
+
+        if (this.data.isLimitStock) {
+            // 库存剩余label
+        }
+
+    }
+
+    private setExchangeInfo() {
+        // {
+        //     "name": "核桃",
+        //     "storage": 0,
+        //     "type": "PECAN",
+        //     "value": 10
+        // }
+        // @ts-ignore
+        const exchangeInfo = this.data.exchangeInfo;
+        let exchangeInfoRoot = new Container();
+        exchangeInfo.forEach((v, index) => {
+
+            let n = exchangeInfoRoot.addChild(new Container())
+            let img = n.addChild(Tool.getSprite(`种植框_${s_PlantData[v.type].name}.png`));
+            let textNode = n.addChild(new Container());
+            let leftText = textNode.addChild(Tool.getText(`${v.storage}`, 22, v.storage >= v.value ? '#ffffff' : '#ff0000'));
+            textNode.addChild(Tool.getText(`/${v.value}`, 22, '#ffffff'))
+                .position.set(leftText.x + leftText.textWidth, leftText.y);
+
+            if (textNode.width > img.width) {
+                img.x = (textNode.width - img.width);
+            } else {
+                textNode.x = (img.width - textNode.width) / 2;
+            }
+            textNode.y = 60;
+
+            n.position.set(75 * index, 0);
+
+            if (index >= exchangeInfo.length - 1) return;
+            exchangeInfoRoot.addChild(Tool.getText('+', 26, '#ffffff'))
+                .position.set(n.x + 55, 10);
+        });
+
+        this.addChild(exchangeInfoRoot);
+        exchangeInfoRoot.position.set((this.width - exchangeInfoRoot.width) / 2, 763);
     }
 
     start(data) {

src/panels/ShopPanel.ts

 import { Panel } from "../../module/views/Panel";
 import { Tool } from "../Tools";
-import Sprite = FYGE.Sprite;
 import { layers } from "../../module/views/layers";
+import PanelCtrl from "../../module/ctrls/panelCtrl";
+import { ExchangePanel } from "./ExchangePanel";
+import { GDispatcher } from "../Main";
+import { G_EVENT } from "../const/GEVENT";
+import { activityId, sendTbNet, TbNetName } from "../TaoBaoNet";
+import Sprite = FYGE.Sprite;
 import Tween = FYGE.Tween;
 import Container = FYGE.Container;
 import IScrollListItem = FYGE.IScrollListItem;
@@ -11,8 +16,7 @@ import Graphics = FYGE.Graphics;
 import TextField = FYGE.TextField;
 import Ease = FYGE.Ease;
 import  MouseEvent = FYGE.MouseEvent;
-import PanelCtrl from "../../module/ctrls/panelCtrl";
-import { ExchangePanel } from "./ExchangePanel";
+import { s_PlantData } from "../const/staticData";
 
 export default class ShopPanel extends Panel {
     get groupNames() {
@@ -34,39 +38,6 @@ 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([
-            {
-                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,
-            },
-        ]);
-
     }
 
     public showAni() {
@@ -94,14 +65,29 @@ export default class ShopPanel extends Panel {
 
     start(data) {
         super.start();
+
+        GDispatcher.dispatchEvent(G_EVENT.GET_SHOPLIST);
+    }
+
+    shopList() {
+        sendTbNet(TbNetName.shopList, {
+            activityId: activityId
+        }, (success, res) => {
+            if (!success) return;
+            this.scroll.updateData(res.data);
+        });
     }
 
     initEvents() {
-        this.closeBtn.addEventListener(FYGE.MouseEvent.CLICK, this.hidePanel, this)
+        super.initEvents();
+        this.closeBtn.addEventListener(FYGE.MouseEvent.CLICK, this.hidePanel, this);
+        GDispatcher.addEventListener(G_EVENT.GET_SHOPLIST, this.shopList, this);
     }
 
     removeEvents() {
-        this.closeBtn.removeEventListener(FYGE.MouseEvent.CLICK, this.hidePanel, this)
+        super.removeEvents();
+        this.closeBtn.removeEventListener(FYGE.MouseEvent.CLICK, this.hidePanel, this);
+        GDispatcher.removeEventListener(G_EVENT.GET_SHOPLIST, this.shopList, this);
     }
 
 }
@@ -120,16 +106,62 @@ class ShopItem extends Container implements IScrollListItem {
         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.itemName.text = data.name;
+        this.itemImg.texture = Texture.fromUrl(data.image);
+
+        if (data.isLimitStock) {
+            this.itemNum.text = (data.restStock <= 0) ? '来晚一步，抢光了' : `剩余${data.restStock}份`;
             this.itemNum.position.set((this.width - this.itemNum.textWidth) / 2, 176);
-        this.itemMask.visible = (data.count <= 0);
+        } else {
+            this.itemNum.text = '';
+        }
+
+        this.itemMask.visible = (data.isLimitStock && data.restStock <= 0);
 
         this.removeAllEventListener();
-        (data.count > 0) && this.addEventListener(MouseEvent.CLICK, () => {
+        (!data.isLimitStock || (data.isLimitStock && data.restStock > 0)) && this.addEventListener(MouseEvent.CLICK, () => {
             PanelCtrl.instance.show(ExchangePanel, this.data);
         });
+
+        this.setExchangeInfo();
+    }
+
+    private setExchangeInfo() {
+        // {
+        //     "name": "核桃",
+        //     "storage": 0,
+        //     "type": "PECAN",
+        //     "value": 10
+        // }
+        // @ts-ignore
+        const exchangeInfo = this.data.exchangeInfo;
+        let exchangeInfoRoot = new Container();
+        exchangeInfo.forEach((v, index) => {
+
+            let n = exchangeInfoRoot.addChild(new Container())
+            let img = n.addChild(Tool.getSprite(`种植框_${s_PlantData[v.type].name}.png`));
+            let textNode = n.addChild(new Container());
+            let leftText = textNode.addChild(Tool.getText(`${v.storage}`, 22, v.storage >= v.value ? '#8b572b' : '#ff0000'));
+            textNode.addChild(Tool.getText(`/${v.value}`, 22, '#8b572b'))
+                .position.set(leftText.x + leftText.textWidth, leftText.y);
+
+            if (textNode.width > img.width) {
+                img.x = (textNode.width - img.width);
+            } else {
+                textNode.x = (img.width - textNode.width) / 2;
+            }
+            textNode.y = 60;
+
+            n.position.set(75 * index, 0);
+
+            if (index >= exchangeInfo.length - 1) return;
+            exchangeInfoRoot.addChild(Tool.getText('+', 26, '#8b572b'))
+                .position.set(n.x + 55, 10);
+        });
+
+        this.addChild(exchangeInfoRoot);
+        exchangeInfoRoot.position.set(180, 60);
     }
 
     constructor() {
@@ -138,6 +170,8 @@ class ShopItem extends Container implements IScrollListItem {
 
         this.itemImg = this.addChild(new Sprite());
         this.itemImg.position.set(35, 26);
+        this.itemImg.width = 116;
+        this.itemImg.height = 116;
 
         const mask = this.addChild(new Graphics());
         mask.drawCircle(92, 83, 58);

src/panels/WareHousePanel.ts

@@ -7,6 +7,8 @@ import { activityId, sendTbNet, TbNetName } from "../TaoBaoNet";
 import Sprite = FYGE.Sprite;
 import Tween = FYGE.Tween;
 import Ease = FYGE.Ease;
+import { GDispatcher } from "../Main";
+import { G_EVENT } from "../const/GEVENT";
 
 export default class WareHousePanel extends Panel {
     get groupNames() {
@@ -38,21 +40,16 @@ export default class WareHousePanel extends Panel {
             [354, 736],
         ];
 
-        sendTbNet(TbNetName.wareHouse, {
-            activityId: activityId
-        }, (success, res) => {
-            let ds = res.data.storages;
         let i = 0;
         for (let k in s_PlantData) {
             this.items[k] = scroll.view.addChild(new WareHouseItem(k));
-                this.items[k].count = ds[k];
             this.items[k].position.set(pos[i][0], pos[i][1]);
             i++;
         }
-        });
     }
 
-    public showAni() {
+
+    showAni() {
         if (this.isShowing) return;
         this.isShowing = true;
         this.y = 1624 - layers.stageOffsetY + 100;
@@ -64,12 +61,23 @@ export default class WareHousePanel extends Panel {
             });
     }
 
-    public hideAni() {
+    public getWareHouse() {
+        sendTbNet(TbNetName.wareHouse, {
+            activityId: activityId
+        }, (success, res) => {
+            let ds = res.data.storages;
+            for (let k in s_PlantData) {
+                this.items[k].count = ds[k];
+            }
+        });
+    }
+
+    hideAni() {
         return Tween.get(this)
             .to({y: 1624 - layers.stageOffsetY + 100}, 500, Ease.quartOut);
     }
 
-    public hidePanel() {
+    hidePanel() {
         this.hideAni().call(() => {
             super.hidePanel();
         });
@@ -77,19 +85,23 @@ export default class WareHousePanel extends Panel {
 
     start(data) {
         super.start();
+        GDispatcher.dispatchEvent(G_EVENT.GET_WAREHOUSE);
     }
 
     initEvents() {
-        this.closeBtn.addEventListener(FYGE.MouseEvent.CLICK, this.hidePanel, this)
+        this.closeBtn.addEventListener(FYGE.MouseEvent.CLICK, this.hidePanel, this);
+        GDispatcher.addEventListener(G_EVENT.GET_WAREHOUSE, this.getWareHouse, this);
     }
 
     removeEvents() {
-        this.closeBtn.removeEventListener(FYGE.MouseEvent.CLICK, this.hidePanel, this)
+        this.closeBtn.removeEventListener(FYGE.MouseEvent.CLICK, this.hidePanel, this);
+        GDispatcher.removeEventListener(G_EVENT.GET_WAREHOUSE, this.getWareHouse, this);
     }
 
 }
 
-class WareHouseItem extends Container {
+class WareHouseItem
+    extends Container {
 
     private countLabel: TextField;
     private _count: number = 0;

src/parts/UI/UILayer.ts

@@ -27,9 +27,6 @@ export class UILayer extends Container {
     private wareHouseBtn: Sprite;   // 仓库按钮
     private storeBtn: Sprite;   // 商店按钮
 
-    // 广告按钮
-    private adBtn: Sprite;  // 广告按钮
-
     constructor() {
         super();
 
@@ -45,13 +42,13 @@ export class UILayer extends Container {
     }
 
     public initEvents() {
-        [this.ruleBtn, this.taskBtn, this.wareHouseBtn, this.storeBtn, this.adBtn].forEach((v) => {
+        [this.ruleBtn, this.taskBtn, this.wareHouseBtn, this.storeBtn].forEach((v) => {
             v.addEventListener(MouseEvent.CLICK, this.touchBtn, this);
         });
     }
 
     public removeEvents() {
-        [this.ruleBtn, this.taskBtn, this.wareHouseBtn, this.storeBtn, this.adBtn].forEach((v) => {
+        [this.ruleBtn, this.taskBtn, this.wareHouseBtn, this.storeBtn].forEach((v) => {
             v.removeEventListener(MouseEvent.CLICK, this.touchBtn, this);
         });
     }
@@ -80,9 +77,6 @@ export class UILayer extends Container {
                 PanelCtrl.instance.show(RulePanel);
                 // PanelCtrl.instance.show(ExRecordPanel);
                 break;
-            case this.adBtn:
-                console.log('点击了广告');
-                break;
         }
     }
 
@@ -121,11 +115,6 @@ export class UILayer extends Container {
         this.ruleBtn.name = '规则';
 
         topGroup.y = getAdjustTopHeight(topGroup, 117 / 1624);
-
-        // 广告按钮
-        this.adBtn = this.addChild(Tool.getSprite('广告.png'));
-        this.adBtn.position.set(30, (1624 - this.adBtn.height) / 2);
-        this.adBtn.name = '广告';
     }
 
 }

src/scenes/GameScene.ts

@@ -4,9 +4,8 @@ import GameLayer from "../parts/Game/GameLayer";
 import { UILayer } from "../parts/UI/UILayer";
 import { Land } from "../parts/Game/Land";
 import MouseEvent = FYGE.MouseEvent;
-import FrameAni = FYGE.FrameAni;
-import { RES } from "../../module/RES";
 import { gameResource } from "../const/staticData";
+import Sprite = FYGE.Sprite;
 
 export class GameScene extends Scene {
 
@@ -20,6 +19,9 @@ export class GameScene extends Scene {
     // UI层
     private uiLayer: UILayer;
 
+    // 广告按钮
+    private adBtn: Sprite;  // 广告按钮
+
     initUi() {
         // 背景图
         this.addChild(Tool.getSprite('game_bg.jpg'))
@@ -36,6 +38,12 @@ export class GameScene extends Scene {
         // 游戏层
         this.gameLayer = this.addChild(GameLayer.ins);
 
+
+        // 广告按钮
+        this.adBtn = this.addChild(Tool.getSprite('广告.png'));
+        this.adBtn.position.set(30, (1624 - this.adBtn.height) / 2);
+        this.adBtn.name = '广告';
+
     }
 
     start() {
@@ -43,12 +51,18 @@ export class GameScene extends Scene {
 
     }
 
+    private ad(){
+        console.log('点击了广告');
+    }
+
     initEvents() {
         super.initEvents();
 
         this.gameLayer.initEvent();
         this.uiLayer.initEvents();
 
+        this.adBtn.addEventListener(MouseEvent.CLICK, this.ad, this);
+
     }
 
     removeEvents() {
@@ -56,6 +70,8 @@ export class GameScene extends Scene {
 
         this.gameLayer.removeEvent();
         this.uiLayer.removeEvents();
+
+        this.adBtn.removeEventListener(MouseEvent.CLICK, this.ad, this);
     }