mk_framework/assets/script/game/module/moreGame/MoreGameBanner.ts

/** 
 * @description 互推界面banner item类
 * @author kaka
 */

import MoreGamePicItem from "./MoreGamePicItem";
import PointItem from "./PointItem";


const { ccclass, property } = cc._decorator;

@ccclass
export default class MoreGameBanner extends cc.Component {
    @property(cc.Node)
    dragArea: cc.Node = null

    @property(cc.Node)
    item1: cc.Node = null

    @property(cc.Node)
    item2: cc.Node = null

    @property(cc.Prefab)
    pointPrefab: cc.Prefab = null

    @property(cc.Node)
    pointLy: cc.Node = null

    @property(cc.Node)
    btnLeft: cc.Node = null

    @property(cc.Node)
    btnRight: cc.Node = null

    private startX = 0
    private coolTime = false
    private curSelDownItem: cc.Node = null
    private preDownItem = null
    private curIndex = 0
    private bannerDatas = null
    private curSelPoint: cc.Node = null

    private hasClick = false;

    start() {
        this.dragArea.on(cc.Node.EventType.TOUCH_START, this.onDragStart, this)
        this.dragArea.on(cc.Node.EventType.TOUCH_END, this.onDragEnd, this)
    }

    onDisable() {
        this.dragArea.off(cc.Node.EventType.TOUCH_START, this.onDragStart, this)
        this.dragArea.off(cc.Node.EventType.TOUCH_END, this.onDragEnd, this)
    }

    public async setItemData(bannerDatas) {
        this.bannerDatas = bannerDatas.item_data;
        if (this.bannerDatas && this.bannerDatas.length > 0) {
            for (var i = 0; i < this.bannerDatas.length; i++) {
                let point = cc.instantiate(this.pointPrefab)
                point.name = i.toString()
                this.pointLy.addChild(point)
            }
        }

        this.onOpenBigPicNode(0);
    }

    onOpenBigPicNode(index) {
        this.curIndex = index

        let data = this.bannerDatas[this.curIndex]

        this.curSelDownItem = this.item1
        this.curSelDownItem.getComponent(MoreGamePicItem).init(data)
        this.curSelDownItem.x = 0
        this.curSelDownItem.active = true
        this.item2.x = 750

        this.curSelPoint = this.pointLy.getChildByName(this.curIndex.toString())
        this.curSelPoint.getComponent(PointItem).setSel(true)

        this.hasClick = false

        if (this.bannerDatas.length > 1) {
            this.schedule(() => {
                if (!this.hasClick) {
                    this.onSelDown(1)
                }
            }, 3, cc.macro.REPEAT_FOREVER, 7)
        }
        else {
            this.btnLeft.active = false
            this.btnRight.active = false
        }
    }

    onLeft() {
        mk.audio.playEffect('button');
        this.hasClick = true
        this.onSelDown(2)
    }

    onRight() {
        mk.audio.playEffect('button');
        this.hasClick = true
        this.onSelDown(1)
    }

    /**
     * 滑动选择
     * @param state 1 向左 2 向右 
     */
    onSelDown(state) {
        if (this.coolTime) {
            return
        }

        let preTo = -750
        let data
        if (state == 1) {
            if (this.curIndex + 1 > this.bannerDatas.length - 1) {
                this.curIndex = 0
            }
            else {
                this.curIndex++
            }

            data = this.bannerDatas[this.curIndex]

            if (this.curSelDownItem == this.item1) {
                this.curSelDownItem = this.item2
                this.preDownItem = this.item1
            }
            else {
                this.curSelDownItem = this.item1
                this.preDownItem = this.item2
            }
            this.curSelDownItem.getComponent(MoreGamePicItem).init(data)
            this.curSelDownItem.x = 750
            preTo = -750
        }
        else if (state == 2) {
            if (this.curIndex - 1 < 0) {
                this.curIndex = this.bannerDatas.length - 1
            }
            else {
                this.curIndex--
            }

            data = this.bannerDatas[this.curIndex]

            if (this.curSelDownItem == this.item1) {
                this.curSelDownItem = this.item2
                this.preDownItem = this.item1
            }
            else {
                this.curSelDownItem = this.item1
                this.preDownItem = this.item2
            }
            this.curSelDownItem.getComponent(MoreGamePicItem).init(data)
            this.curSelDownItem.x = -750
            preTo = 750
        }

        this.coolTime = true
        cc.tween(this.preDownItem).to(0.4, { x: preTo }, cc.easeInOut(1)).start()
        cc.tween(this.curSelDownItem).to(0.4, { x: 0 }, cc.easeInOut(1)).call(() => {
            this.onSelPoint()
            this.coolTime = false
        }).start()
    }

    onDragStart(evt) {
        this.hasClick = true
        this.startX = evt.touch._point.x
    }

    onDragEnd(evt) {
        let end = evt.touch._point.x - this.startX
        if (Math.abs(end) > 20) {
            if (end > 0) {
                this.onSelDown(2)
            }
            else {
                this.onSelDown(1)
            }
        }
    }

    onSelPoint() {
        if (this.curSelPoint) {
            this.curSelPoint.getComponent(PointItem).setSel(false)
        }

        this.curSelPoint = this.pointLy.getChildByName(this.curIndex.toString())
        this.curSelPoint.getComponent(PointItem).setSel(true)
    }
}