team1_nc/assets/script/game/module/gradeReward/GradeReward.ts

import { UITween } from "../../component/tween/UITween";
import { GradeRewardItem } from "./GradeRewardItem";


const { ccclass, property } = cc._decorator;
@ccclass
export class GradeReward extends cc.Component{

    @property({displayName:"进度条", type: cc.Sprite})
    private sp_slider: cc.Sprite = null;

    @property({displayName:"内容节点", type: cc.Node})
    private node_content: cc.Node = null;

    @property(cc.Prefab)
    private node_child: cc.Prefab = null;

    @property({displayName: '进度文本', type: cc.Label})
    private lbl_progress: cc.Label[] = [];

    private gradeExp: number[] = [100, 200, 400, 700, 900];
    private curExp: number = 0;

    private gradeOffset: number[] = [0.11, 0.33, 0.56, 0.78, 1];

    onLoad(){


    }

    start(){
        for(let i = 5; i != 0; --i)
        {
            let child = cc.instantiate(this.node_child);
            let item = child.getComponent(GradeRewardItem);    
            item.id = i;
            item.lbl_value.string = "0.3元";
            item.lbl_grade.string = "LV:12";
            this.node_content.addChild(child);
        }
        this.calulateExpAndShowUI();
    }

    private calulateExpAndShowUI()
    {
        let curIndex = -1;
        for(let i = 0; i != this.gradeExp.length; ++i)
        {
            if(this.curExp < this.gradeExp[i])
            {
                if(curIndex == -1)
                {
                    curIndex = i;
                }else
                {
                    this.lbl_progress[i].string = "0%";
                }
            }else
            {
                this.lbl_progress[i].string = "100%";
            }
        }
        if(curIndex != -1)
        {
            let remainExp = this.curExp;
            for(let i = 0; i != curIndex; ++i)
            {
                remainExp = this.curExp - this.gradeExp[i];
            }
            let per = Math.floor(remainExp/this.gradeExp[curIndex] * 100);
            this.lbl_progress[curIndex].string = per + "%";

            let lastIndex = -1
            let lastPro = 0;
            if(curIndex > 0)
            {
                lastIndex = curIndex-1;           
            }
            
            let offset = this.gradeOffset[curIndex];
            if(lastIndex != -1)
            {
                offset = offset - this.gradeOffset[lastIndex];
                lastPro = this.gradeOffset[lastIndex];
            }
            let pro = offset * per / 100;        

            this.sp_slider.fillRange = lastPro + pro;
        }else{
            this.sp_slider.fillRange = 1;
        }

    }

    private clickVideoBtn(){
        mk.audio.playEffect("button");

        this.curExp += 30;
        this.calulateExpAndShowUI();
    }

    private clickCloseBtn(){
        mk.audio.playEffect("closeButton");
    }
}