JumpGame/assets/Script/Shop.ts

// Learn TypeScript:
//  - https://docs.cocos.com/creator/2.4/manual/en/scripting/typescript.html
// Learn Attribute:
//  - https://docs.cocos.com/creator/2.4/manual/en/scripting/reference/attributes.html
// Learn life-cycle callbacks:
//  - https://docs.cocos.com/creator/2.4/manual/en/scripting/life-cycle-callbacks.html

import EventName, { EventLabel, PopType } from "./EventName/EventName";
import Hall from "./Hall";
import LocalData from "./LocalData";
import MyComponent from "./Template/MyComponent";

const { ccclass, property } = cc._decorator;

type CharacterSkinType = {
    name: string,
    introduce: string,
    image: string,
    imageMain: string,
    imageSp: cc.SpriteFrame,
    imageSpMain: cc.SpriteFrame,
    price: number,
    id: number,
}
type SkinType = {
    CharacterSkin: CharacterSkinType[],
    ParabolaSkin: CharacterSkinType[],
}



@ccclass
export default class Shop extends MyComponent {

    @property(cc.Node)
    content: cc.Node = null;

    @property(cc.Node)
    CharacterSkinPrefab: cc.Node = null;


    @property(cc.Label)
    ShowCharacterName: cc.Label = null;
    @property(cc.Label)
    ShowCharacterintroduce: cc.Label = null;
    @property(cc.Sprite)
    ShowCharacterSprite: cc.Sprite = null;

    @property(cc.Node)
    ParabolaSkin: cc.Node = null;
    @property(cc.Node)
    CharacterSkin: cc.Node = null;
    @property(cc.Node)
    Select: cc.Node = null;


    @property(cc.Label)
    Gold: cc.Label = null;


    SelectCharacterSkinType: CharacterSkinType = null
    SelectParabolaSkinType: CharacterSkinType = null


    Click_CharacterSkin: Boolean = true


    onLoad(): void {
        super.onLoad()
        this.regEvent(EventName.changeGold, this.UpdataGold, this)
        // cc.resources.load("json/Skin", cc.JsonAsset, this.LoadDone.bind(this));



        let bundle = cc.assetManager.getBundle("sub");
        bundle.load("res/json/Skin", cc.JsonAsset, this.LoadDone.bind(this));


    }
    start() {
        this.scheduleOnce(() => {
            this.SetScrollViewSize()
            this.UpdataGold()

        }, 0)
    }


    jsonData: SkinType = null
    LoadDone(error: Error, resource: cc.JsonAsset) {
        if (error) {
            console.log(error.name);
            console.log(error.message);
            return;
        }
        this.jsonData = resource.json;

        // console.log(jsonData);

        // this.clickCharacterSkin()
        this.initSetScrollView()
    }


    initSetScrollView() {

        let jsonData = this.jsonData


        console.log(jsonData);

        if (this.Click_CharacterSkin) {
            for (let index = 0; index < jsonData.CharacterSkin.length; index++) {
                let element = jsonData.CharacterSkin[index];

                let temp_node = cc.instantiate(this.CharacterSkinPrefab)
                this.content.addChild(temp_node)
                let Skin = temp_node.getChildByName("Skin").getChildByName("Skin")
                //加入发光节点
                this.LightNodes.push(temp_node.getChildByName("checkbox"))


                //是否拥有了这个皮肤
                let NodeLabel = temp_node.getChildByName("btn").getChildByName("Label").getComponent(cc.Label)
                if (LocalData.getInstance().getHasCharacterSkin().includes(element.id)) {
                    let has = temp_node.getChildByName("has")

                    temp_node.getComponent(cc.Sprite).spriteFrame =
                        has.getComponent(cc.Sprite).spriteFrame

                    if (LocalData.getInstance().getCurrentCharacterSkin() == element.id) {
                        NodeLabel.string = '使用中'

                        //设置当前选择的皮肤类型
                        this.SelectCharacterSkinType = element

                    } else {
                        NodeLabel.string = '选择'
                    }
                } else {
                    NodeLabel.node.active = false
                    let Gold = temp_node.getChildByName("btn").getChildByName("Gold")
                    Gold.active = true

                    let Label = Gold.getChildByName("Label").getComponent(cc.Label)
                    Label.string = element.price.toString()
                }

                //加载图
                const url = element.image

                let bundle = cc.assetManager.getBundle("sub");
                bundle.load(url, cc.SpriteFrame, (err: Error, spriteframe) => {
                    if (!err) {
                        element.imageSp = spriteframe
                        Skin.getComponent(cc.Sprite).spriteFrame = spriteframe

                        temp_node['CharacterSkin'] = element
                    }
                });

                bundle.load(element.imageMain, cc.SpriteFrame, (err: Error, spriteframe) => {
                    if (!err) {
                        element.imageSpMain = spriteframe
                    }
                });




                //添加点击事件
                temp_node.on('touchstart', () => {
                    let temp = temp_node['CharacterSkin'] as CharacterSkinType

                    this.ShowCharacterSprite.spriteFrame = temp.imageSpMain
                    this.ShowCharacterintroduce.string = temp.introduce
                    this.ShowCharacterName.string = temp.name


                    this.setLight(temp_node.getChildByName("checkbox"))

                    //设置当前选择的皮肤类型
                    this.SelectCharacterSkinType = temp
                })
            }
        } else {
            for (let index = 0; index < jsonData.ParabolaSkin.length; index++) {
                let element = jsonData.ParabolaSkin[index];

                let temp_node = cc.instantiate(this.CharacterSkinPrefab)
                this.content.addChild(temp_node)
                let Skin = temp_node.getChildByName("Skin").getChildByName("Skin")
                //加入发光节点
                this.LightNodes.push(temp_node.getChildByName("checkbox"))


                //是否拥有了这个皮肤
                let NodeLabel = temp_node.getChildByName("btn").getChildByName("Label").getComponent(cc.Label)
                if (LocalData.getInstance().getHasParabolaSkin().includes(element.id)) {
                    let has = temp_node.getChildByName("has")

                    temp_node.getComponent(cc.Sprite).spriteFrame =
                        has.getComponent(cc.Sprite).spriteFrame

                    if (LocalData.getInstance().getCurrentParabolaSkin() == element.id) {
                        NodeLabel.string = '使用中'

                        //设置当前选择的皮肤类型
                        this.SelectCharacterSkinType = element

                    } else {
                        NodeLabel.string = '选择'
                    }
                } else {
                    NodeLabel.node.active = false
                    let Gold = temp_node.getChildByName("btn").getChildByName("Gold")
                    Gold.active = true

                    let Label = Gold.getChildByName("Label").getComponent(cc.Label)
                    Label.string = element.price.toString()
                }

                //加载图
                const url = element.image
                // cc.resources.load(url, cc.SpriteFrame, (err, spriteframe) => {
                //     if (!err) {

                //         element.imageSp = spriteframe
                //         Skin.getComponent(cc.Sprite).spriteFrame = spriteframe


                //         temp_node['ParabolaSkin'] = element
                //     }
                // });


                let bundle = cc.assetManager.getBundle("sub");
                bundle.load(url, cc.SpriteFrame, (err: Error, spriteframe) => {
                    if (!err) {

                        element.imageSp = spriteframe
                        Skin.getComponent(cc.Sprite).spriteFrame = spriteframe


                        temp_node['ParabolaSkin'] = element
                    }
                });
                bundle.load(element.imageMain, cc.SpriteFrame, (err: Error, spriteframe) => {
                    if (!err) {
                        element.imageSpMain = spriteframe
                    }
                });



                //添加点击事件
                temp_node.on('touchstart', () => {
                    let temp = temp_node['ParabolaSkin'] as CharacterSkinType

                    this.ShowCharacterSprite.spriteFrame = temp.imageSpMain
                    this.ShowCharacterintroduce.string = temp.introduce
                    this.ShowCharacterName.string = temp.name


                    this.setLight(temp_node.getChildByName("checkbox"))

                    //设置当前选择的皮肤类型
                    this.SelectParabolaSkinType = temp
                })
            }
        }



    }

    updataSetScrollView() {
        if (this.Click_CharacterSkin) {
            for (let index = 0; index < this.content.children.length; index++) {
                const temp_node = this.content.children[index];
                let element = this.jsonData.CharacterSkin[index];

                //是否拥有了这个皮肤
                let NodeLabel = temp_node.getChildByName("btn").getChildByName("Label").getComponent(cc.Label)

                let Gold = temp_node.getChildByName("btn").getChildByName("Gold")

                if (LocalData.getInstance().getHasCharacterSkin().includes(element.id)) {
                    Gold.active = false
                    NodeLabel.node.active = true

                    let has = temp_node.getChildByName("has")
                    temp_node.getComponent(cc.Sprite).spriteFrame =
                        has.getComponent(cc.Sprite).spriteFrame

                    if (LocalData.getInstance().getCurrentCharacterSkin() == element.id) {
                        NodeLabel.string = '使用中'

                        //设置当前选择的皮肤类型
                        this.SelectCharacterSkinType = element

                    } else {
                        NodeLabel.string = '选择'
                    }
                } else {
                    NodeLabel.node.active = false
                    Gold.active = true

                    let Label = Gold.getChildByName("Label").getComponent(cc.Label)
                    Label.string = element.price.toString()
                }
            }
        } else {
            for (let index = 0; index < this.content.children.length; index++) {
                const temp_node = this.content.children[index];
                let element = this.jsonData.ParabolaSkin[index];

                //是否拥有了这个皮肤
                let NodeLabel = temp_node.getChildByName("btn").getChildByName("Label").getComponent(cc.Label)

                let Gold = temp_node.getChildByName("btn").getChildByName("Gold")

                if (LocalData.getInstance().getHasParabolaSkin().includes(element.id)) {
                    Gold.active = false
                    NodeLabel.node.active = true

                    let has = temp_node.getChildByName("has")
                    temp_node.getComponent(cc.Sprite).spriteFrame =
                        has.getComponent(cc.Sprite).spriteFrame

                    if (LocalData.getInstance().getCurrentParabolaSkin() == element.id) {
                        NodeLabel.string = '使用中'

                        //设置当前选择的皮肤类型
                        this.SelectParabolaSkinType = element

                    } else {
                        NodeLabel.string = '选择'
                    }
                } else {
                    NodeLabel.node.active = false
                    Gold.active = true

                    let Label = Gold.getChildByName("Label").getComponent(cc.Label)
                    Label.string = element.price.toString()
                }
            }
        }




    }



    SetScrollViewSize() {
        let content_width = this.content.getContentSize().width
        let spacingX = (content_width - 4 * this.CharacterSkinPrefab.getContentSize().width) / 5
        this.content.getComponent(cc.Layout).spacingX = spacingX
        this.content.getComponent(cc.Layout).paddingLeft = spacingX
    }

    clickParabolaSkin() {
        this.ParabolaSkin.color = new cc.Color(200, 200, 200, 255);
        this.CharacterSkin.color = new cc.Color(255, 255, 255, 255);
        this.Select.setPosition(this.ParabolaSkin.position)


        this.Click_CharacterSkin = false
        this.content.children.forEach(e => e.destroy())
        this.initSetScrollView()

    }
    clickCharacterSkin() {
        this.ParabolaSkin.color = new cc.Color(255, 255, 255, 255);
        this.CharacterSkin.color = new cc.Color(200, 200, 200, 255);
        this.Select.setPosition(this.CharacterSkin.position)


        this.Click_CharacterSkin = true
        this.content.children.forEach(e => e.destroy())
        this.initSetScrollView()
    }


    clickExit() {
        cc.Canvas.instance.node.getComponent(Hall).init()
        this.node.destroy()
    }


    //发光节点数组
    LightNodes: cc.Node[] = []
    setLight(selectNode: cc.Node) {
        this.LightNodes.forEach(e => {
            if (e == selectNode) {
                e.active = true
            } else {
                e.active = false
            }
        })
    }
    // update (dt) {}

    UpdataGold() {
        this.Gold.string = LocalData.getInstance().getGold().toString()
    }

    UseSkin() {


        if (this.Click_CharacterSkin == false) {
            //是否拥有这个皮肤
            if (LocalData.getInstance().getHasParabolaSkin().includes(this.SelectParabolaSkinType.id)) {
                //拥有
                LocalData.getInstance().setCurrentParabolaSkin(this.SelectParabolaSkinType.id)
                //更新展示
                this.updataSetScrollView()
            } else {
                //没拥有
                if (LocalData.getInstance().getGold() >= this.SelectParabolaSkinType.price) {
                    //购买
                    LocalData.getInstance().setGold(this.SelectParabolaSkinType.price, '-')

                    //拥有
                    LocalData.getInstance().setHasParabolaSkin(this.SelectParabolaSkinType.id)

                    //当前用的
                    LocalData.getInstance().setCurrentParabolaSkin(this.SelectParabolaSkinType.id)

                    //更新展示
                    this.updataSetScrollView()

                } else {

                    let temp: PopType = new PopType()
                    temp.string = EventLabel.OpenVideo
                    temp.Title = '提示'
                    temp.OK = () => {
                        this.OpenAD()
                    }
                    temp.Fail = () => {

                    }

                    this.Pop(temp)

                }
            }
        } else {
            //是否拥有这个皮肤
            if (LocalData.getInstance().getHasCharacterSkin().includes(this.SelectCharacterSkinType.id)) {
                //拥有
                LocalData.getInstance().setCurrentCharacterSkin(this.SelectCharacterSkinType.id)
                //更新展示
                this.updataSetScrollView()
            } else {
                //没拥有
                if (LocalData.getInstance().getGold() >= this.SelectCharacterSkinType.price) {
                    //购买
                    LocalData.getInstance().setGold(this.SelectCharacterSkinType.price, '-')

                    //拥有
                    LocalData.getInstance().setHasCharacterSkin(this.SelectCharacterSkinType.id)

                    //当前用的
                    LocalData.getInstance().setCurrentCharacterSkin(this.SelectCharacterSkinType.id)

                    //更新展示
                    this.updataSetScrollView()

                } else {

                    let temp: PopType = new PopType()
                    temp.string = EventLabel.OpenVideo
                    temp.Title = '提示'
                    temp.OK = () => {
                        this.OpenAD()
                    }
                    temp.Fail = () => {

                    }

                    this.Pop(temp)

                }
            }
        }
    }

    //看广告
    OpenAD() {
        LocalData.getInstance().setGold(1100, '+')
    }
}