game_cocos_2c/assets/scripts/modules/lobby/ui/StoreView/OrderView.ts

import { AppKernel } from '@scripts/app/AppKernel';
import { UIViewID } from '@scripts/define/UIDefine';
import { UIPopup } from '@scripts/framework/ui/UIPopup';
import { IGoodsConfig } from '@scripts/store/payStore/data';
import { formatGCNum, formatGoodsNum, formatSCNum } from '@scripts/utils/Helper';
import { addBtnClick } from '@scripts/utils/UIHelper';
import { formatCP, formatVipLv } from '@scripts/utils/VipHelper';
import { _decorator, Component, find, instantiate, Label, Node, Sprite, SpriteFrame, tween, Tween } from 'cc';
const { ccclass, property } = _decorator;

const ITEM_POSY = [[19.5], [95, -55], [134, 19.5, -95.5]]

export interface IOrderViewArg {
    icon?: SpriteFrame;
    goods: IGoodsConfig;
}


@ccclass('OrderView')
export class OrderView extends UIPopup<IOrderViewArg> {
    readonly viewId: UIViewID = UIViewID.OrderView;

    @property(Node)
    btnClose: Node;

    @property(Sprite)
    sptIcon: Sprite;

    @property(Node)
    sptLight: Node;

    @property(Label)
    lblMoney: Label;

    @property(Label)
    lblButton: Label;

    @property(Node)
    btnPay: Node;

    @property(Node)
    scNode: Node;

    @property(Node)
    gcNode: Node;

    @property(Node)
    vipNode: Node;

    private goods: IGoodsConfig;

    private scValue: ItemValue;

    private gcValue: ItemValue;

    private vipValue: ItemValue;

    protected onCreate(): void | Promise<void> {
        addBtnClick(this.btnClose, this.closeSelf, this);
        addBtnClick(this.btnPay, this.onBtnPayClick, this);
        this.scValue = new ItemValue(this.scNode);
        this.gcValue = new ItemValue(this.gcNode);
        this.vipValue = new ItemValue(this.vipNode);

    }

    protected onOpen({ goods, icon }: IOrderViewArg): void | Promise<void> {
        this.goods = goods;
        this.updateView(goods, icon);
    }

    private onBtnPayClick() {

    }

    private updateView(goods: IGoodsConfig, icon?: SpriteFrame) {
        this.testGears(goods);
        Tween.stopAllByTarget(this.sptLight);
        tween(this.sptLight).by(1, { angle: -100 }).repeatForever().start();

        if (icon) {
            this.sptIcon.spriteFrame = icon;
        }

        const money = this.goods.money;
        this.lblMoney.string = `$${money}`;
        this.lblButton.string = `Buy $${money}`;

        this.scValue.updateView(goods.sc, goods.sc_reward, goods.sc_reward_display_percent);
        this.gcValue.updateView(goods.gc, goods.gc_reward, goods.gc_reward_display_percent);
        this.vipValue.updateView(goods.cp, goods.cp_reward, goods.cp_reward_display_percent);
        this.vipValue.lblValue.string = "LV." + formatGoodsNum(goods.cp + goods.cp_reward);

        this.scNode.active = goods.sc > 0;
        this.gcNode.active = goods.gc > 0;
        this.vipNode.active = goods.cp > 0;

        const nodes: Node[] = [];
        if (goods.sc) nodes.push(this.scNode);
        if (goods.gc) nodes.push(this.gcNode);
        if (goods.cp) nodes.push(this.vipNode);

        const count = nodes.length;
        if (count === 0) return;

        const posList = ITEM_POSY[count - 1];
        for (let i = 0; i < count; ++i) {
            const y = posList[i];
            const node = nodes[i];
            node.y = y;
        }
    }

    private testGears(goods: IGoodsConfig) {
        const payServices = AppKernel.services.paymentServices;
        const layout = find("container/testGears", this.node);
        const prefab = find("Button", layout);
        for (let i = 0; i < goods.gears.length; ++i) {
            const item = instantiate(prefab);
            item.setParent(layout);
            item.active = true;

            const gear = goods.gears[i];
            const label = find("Label", item).getComponent(Label);
            label.string = gear.name;

            const gearIdx = i;
            addBtnClick(item, () => {
                payServices.startPayment(goods, gearIdx)
            })
        }
    }
}


class ItemValue {
    lblValue: Label;
    lblDesc: Label;

    constructor(readonly node: Node) {
        this.lblValue = find("lblValue", node).getComponent(Label);
        const descNode = find("lblDesc", node);
        if (descNode) this.lblDesc = descNode.getComponent(Label);
    }

    updateView(value: number, bonus: number, percent: number, formater = formatGoodsNum) {
        const hasBonus = this.lblDesc && percent > 0 && bonus > 0;
        this.lblDesc.node.active = hasBonus;
        this.lblValue.node.y = hasBonus ? 11.5 : -2;
        this.lblValue.string = formater(value + bonus);
        if (hasBonus) {
            const base = formater(value);
            this.lblDesc.string = `BASE ${base} + ${percent}% BONUS ${formater(bonus)}`;
        }
    }
}