增加动态更新进度条的方法

assets/resources/prefabs/progress_bar.prefab

@@ -266,12 +266,12 @@
     },
     "_anchorPoint": {
       "__type__": "cc.Vec2",
-      "x": 0.5,
+      "x": 0,
       "y": 0.5
     },
     "_position": {
       "__type__": "cc.Vec3",
-      "x": -192.5,
+      "x": -320,
       "y": 0,
       "z": 0
     },
@@ -1194,6 +1194,9 @@
     },
     "popTitles": [],
     "currentVal": 1000,
+    "margin": 170,
+    "pointArr": [],
+    "cubeArr": [],
     "_id": ""
   },
   {

assets/scripts/barCube.js

@@ -13,15 +13,19 @@ cc.Class({
     // LIFE-CYCLE CALLBACKS:
 
     onLoad () {
-        let url = `textures/part1/bar_cube_${this.type}_${this.status}`;
+        this.updateShow('c');
-        let self = this;
-        cc.loader.loadRes(url, cc.SpriteFrame, function (err, spriteFrame) {
-            self.box.spriteFrame = spriteFrame;
-        });
     },
 
     start () {
     },
 
     // update (dt) {},
+    updateShow(status) {
+        this.status = status;
+        let url = `textures/part1/bar_cube_${this.type}_${this.status}`;
+        let self = this;
+        cc.loader.loadRes(url, cc.SpriteFrame, function (err, spriteFrame) {
+            self.box.spriteFrame = spriteFrame;
+        });
+    }
 });

assets/scripts/barLine.js

@@ -12,15 +12,19 @@ cc.Class({
     // LIFE-CYCLE CALLBACKS:
 
     onLoad () {
-        let url = `textures/part1/bar_line_${this.color}`;
+        this.updateShow('w');
-        let self = this;
-        cc.loader.loadRes(url, cc.SpriteFrame, function (err, spriteFrame) {
-            self.point.spriteFrame = spriteFrame;
-        });
     },
 
     start () {
     },
 
     // update (dt) {},
+    updateShow(color) {
+        this.color = color;
+        let url = `textures/part1/bar_line_${this.color}`;
+        let self = this;
+        cc.loader.loadRes(url, cc.SpriteFrame, function (err, spriteFrame) {
+            self.point.spriteFrame = spriteFrame;
+        });
+    }
 });

assets/scripts/progressBar.js

@@ -27,27 +27,17 @@ cc.Class({
             type: cc.Node
         },
         popTitles: [],
-        currentVal: 1000
+        currentVal: 1000,
+        margin: 170,
+        pointArr: [],
+        cubeArr: []
     },
 
     // LIFE-CYCLE CALLBACKS:
 
     onLoad () {
-        let margin = 170;
         this.countLabel.string = '当前预约人数: ' + this.currentVal;
-        let width = 75;
+        this.barCover.width = this.parseWidth();
-        if (this.currentVal <= 10000) {
-            width += margin * this.currentVal / 10000;
-        } else if (this.currentVal > 10000 && this.currentVal <= 30000) {
-            width += (margin + margin * (this.currentVal - 10000) / 20000);
-        } else if (this.currentVal > 30000 && this.currentVal <= 50000) {
-            width += (margin * 2 + margin * (this.currentVal - 30000) / 20000);
-        } else if (this.currentVal > 50000 && this.currentVal <= 55000) {
-            width += (margin * 3 + 68 * (this.currentVal - 50000) / 5000);
-        } else {
-            width = this.bar.width;
-        }
-        this.barCover.width = width;
         this.popTitle = ['预约\n即送', '1w', '3w', '5w'];
         let xNum = [-245, -75, 95, 265];
         let cubeTypes = ['', 'wood', 'silver', 'gold'];
@@ -63,23 +53,53 @@ cc.Class({
             this.node.addChild(pop);
             pop.setPosition(cc.v2(xNum[i], 95));
             var point = cc.instantiate(this.barPointerPrefab);
-            point.getComponent('barLine').color = (this.currentVal >= openVals[i]) ? 'w' : 'b';
+            point.getComponent('barLine').updateShow((this.currentVal >= openVals[i]) ? 'w' : 'b');
             this.bar.addChild(point);
+            this.pointArr.push(point);
             point.setPosition(cc.v2(xNum[i], 21));
             if (i > 0) {
                 var cube = cc.instantiate(this.barCubePrefab);
                 cube.getComponent('barCube').type = cubeTypes[i];
-                cube.getComponent('barCube').status = (this.currentVal >= openVals[i]) ? 'o' : 'c';
+                cube.getComponent('barCube').updateShow((this.currentVal >= openVals[i]) ? 'o' : 'c');
                 this.node.addChild(cube);
                 cube.setPosition(cc.v2(xNum[i], -125));
+                this.cubeArr.push(cube);
             }
         }
 
 
     },
-
+    parseWidth() {
+        let width = 75;
+        if (this.currentVal <= 10000) {
+            width += this.margin * this.currentVal / 10000;
+        } else if (this.currentVal > 10000 && this.currentVal <= 30000) {
+            width += (this.margin + this.margin * (this.currentVal - 10000) / 20000);
+        } else if (this.currentVal > 30000 && this.currentVal <= 50000) {
+            width += (this.margin * 2 + this.margin * (this.currentVal - 30000) / 20000);
+        } else if (this.currentVal > 50000 && this.currentVal <= 55000) {
+            width += (this.margin * 3 + 68 * (this.currentVal - 50000) / 5000);
+        } else {
+            width = this.bar.width;
+        }
+        return width;
+    },
     start () {
     },
 
     // update (dt) {},
+    updateShow(val) {
+        console.log('update show');
+        this.currentVal = val;
+        this.countLabel.string = '当前预约人数: ' + this.currentVal;
+        this.barCover.width = this.parseWidth();
+        let openVals = [0, 10000, 30000, 50000];
+        for(let i = 0; i < 4; i++) {
+            this.pointArr[i].getComponent('barLine').updateShow((this.currentVal >= openVals[i]) ? 'w' : 'b');
+
+        }
+        for(let i = 0; i < 3; i++) {
+            this.cubeArr[i].getComponent('barCube').updateShow((this.currentVal >= openVals[i+1]) ? 'o' : 'c');
+        }
+    }
 });

assets/scripts/scrollContent.js

@@ -69,7 +69,7 @@ cc.Class({
     onLoad () {
         this.loginStatusLabel.node.active = false;
         var processBar = cc.instantiate(this.processBarPrefab);
-        processBar.getComponent('progressBar').currentVal = 1024;
+        processBar.getComponent('progressBar').currentVal = 50000;
         this.part1.addChild(processBar);
         var puzzle = cc.instantiate(this.puzzlePrefab);
         this.part2.addChild(puzzle);
@@ -80,6 +80,10 @@ cc.Class({
         this.part4.addChild(imageSwiper, 0);
         var bottomSwiper = cc.instantiate(this.bottomSwiperPrefab);
         this.part5.addChild(bottomSwiper);
+        let self = this;
+        this.scheduleOnce(function () {
+            processBar.getComponent('progressBar').updateShow(35000);
+        }, 5);
     },
 
     start () {