完善进度条的功能

assets/resources/prefabs/bar_count_pop.prefab

@@ -15,16 +15,23 @@
     "_name": "bar_count_pop",
     "_objFlags": 0,
     "_parent": null,
-    "_children": [],
+    "_children": [
-    "_active": true,
-    "_level": 2,
-    "_components": [
       {
         "__id__": 2
       }
     ],
+    "_active": true,
+    "_level": 1,
+    "_components": [
+      {
+        "__id__": 5
+      },
+      {
+        "__id__": 6
+      }
+    ],
     "_prefab": {
-      "__id__": 3
+      "__id__": 7
     },
     "_opacity": 255,
     "_color": {
@@ -71,6 +78,105 @@
     "groupIndex": 0,
     "_id": ""
   },
+  {
+    "__type__": "cc.Node",
+    "_name": "title_label",
+    "_objFlags": 0,
+    "_parent": {
+      "__id__": 1
+    },
+    "_children": [],
+    "_active": true,
+    "_level": 2,
+    "_components": [
+      {
+        "__id__": 3
+      }
+    ],
+    "_prefab": {
+      "__id__": 4
+    },
+    "_opacity": 255,
+    "_color": {
+      "__type__": "cc.Color",
+      "r": 121,
+      "g": 45,
+      "b": 7,
+      "a": 255
+    },
+    "_contentSize": {
+      "__type__": "cc.Size",
+      "width": 50,
+      "height": 60
+    },
+    "_anchorPoint": {
+      "__type__": "cc.Vec2",
+      "x": 0.5,
+      "y": 0.5
+    },
+    "_position": {
+      "__type__": "cc.Vec3",
+      "x": 0,
+      "y": 11,
+      "z": 0
+    },
+    "_scale": {
+      "__type__": "cc.Vec3",
+      "x": 1,
+      "y": 1,
+      "z": 1
+    },
+    "_rotationX": 0,
+    "_rotationY": 0,
+    "_quat": {
+      "__type__": "cc.Quat",
+      "x": 0,
+      "y": 0,
+      "z": 0,
+      "w": 1
+    },
+    "_skewX": 0,
+    "_skewY": 0,
+    "_zIndex": 0,
+    "groupIndex": 0,
+    "_id": ""
+  },
+  {
+    "__type__": "cc.Label",
+    "_name": "",
+    "_objFlags": 0,
+    "node": {
+      "__id__": 2
+    },
+    "_enabled": true,
+    "_srcBlendFactor": 1,
+    "_dstBlendFactor": 771,
+    "_useOriginalSize": false,
+    "_string": "预约\n即送",
+    "_N$string": "预约\n即送",
+    "_fontSize": 25,
+    "_lineHeight": 30,
+    "_enableWrapText": true,
+    "_N$file": null,
+    "_isSystemFontUsed": true,
+    "_spacingX": 0,
+    "_N$horizontalAlign": 1,
+    "_N$verticalAlign": 1,
+    "_N$fontFamily": "Arial",
+    "_N$overflow": 0,
+    "_id": ""
+  },
+  {
+    "__type__": "cc.PrefabInfo",
+    "root": {
+      "__id__": 1
+    },
+    "asset": {
+      "__uuid__": "391e7d9b-3837-4fb1-9606-effba4f81d22"
+    },
+    "fileId": "9ei+F154tN94s1l9ws7AIH",
+    "sync": false
+  },
   {
     "__type__": "cc.Sprite",
     "_name": "",
@@ -99,13 +205,27 @@
     "_atlas": null,
     "_id": ""
   },
+  {
+    "__type__": "400a8lfG3FLI5iARZru+LrT",
+    "_name": "",
+    "_objFlags": 0,
+    "node": {
+      "__id__": 1
+    },
+    "_enabled": true,
+    "titleLabel": {
+      "__id__": 3
+    },
+    "title": null,
+    "_id": ""
+  },
   {
     "__type__": "cc.PrefabInfo",
     "root": {
       "__id__": 1
     },
     "asset": {
-      "__id__": 0
+      "__uuid__": "391e7d9b-3837-4fb1-9606-effba4f81d22"
     },
     "fileId": "bd1cThZb9Bj5w+R4VKYZNa",
     "sync": false

assets/resources/prefabs/bar_cube.prefab

@@ -28,10 +28,13 @@
       },
       {
         "__id__": 6
+      },
+      {
+        "__id__": 7
       }
     ],
     "_prefab": {
-      "__id__": 7
+      "__id__": 8
     },
     "_opacity": 255,
     "_color": {
@@ -235,6 +238,20 @@
     "_originalHeight": 0,
     "_id": ""
   },
+  {
+    "__type__": "539f6Ao2E1GFoOceXjDyjy/",
+    "_name": "",
+    "_objFlags": 0,
+    "node": {
+      "__id__": 1
+    },
+    "_enabled": true,
+    "box": {
+      "__id__": 5
+    },
+    "type": "wood",
+    "_id": ""
+  },
   {
     "__type__": "cc.PrefabInfo",
     "root": {

assets/resources/prefabs/bar_line.prefab

@@ -17,14 +17,17 @@
     "_parent": null,
     "_children": [],
     "_active": true,
-    "_level": 4,
+    "_level": 1,
     "_components": [
       {
         "__id__": 2
+      },
+      {
+        "__id__": 3
       }
     ],
     "_prefab": {
-      "__id__": 3
+      "__id__": 4
     },
     "_opacity": 255,
     "_color": {
@@ -99,13 +102,27 @@
     "_atlas": null,
     "_id": ""
   },
+  {
+    "__type__": "87547behTtIDIO7h/3AbdKl",
+    "_name": "",
+    "_objFlags": 0,
+    "node": {
+      "__id__": 1
+    },
+    "_enabled": true,
+    "point": {
+      "__id__": 2
+    },
+    "color": "w",
+    "_id": ""
+  },
   {
     "__type__": "cc.PrefabInfo",
     "root": {
       "__id__": 1
     },
     "asset": {
-      "__id__": 0
+      "__uuid__": "9090470b-343b-4a6f-9ef5-5c692222dbce"
     },
     "fileId": "72RLfJontPa5HlQlHjnlun",
     "sync": false

assets/resources/textures/part1/bar_cube_gold_c.png.meta

@@ -1,15 +1,15 @@
 {
   "ver": "2.2.0",
-  "uuid": "688e4161-7b44-46a7-b9fd-0ca7c5c30c06",
+  "uuid": "edfd5e44-63cb-498b-be8a-af6fef3f6b20",
   "type": "sprite",
   "wrapMode": "clamp",
   "filterMode": "bilinear",
   "premultiplyAlpha": false,
   "subMetas": {
-    "bar_cube_gole_c": {
+    "bar_cube_gold_c": {
       "ver": "1.0.3",
-      "uuid": "5722e9c9-58ba-41bb-842e-ff125b3e03e9",
+      "uuid": "3ce36265-d4e5-4a44-b01e-7df0bb0a40ff",
-      "rawTextureUuid": "688e4161-7b44-46a7-b9fd-0ca7c5c30c06",
+      "rawTextureUuid": "edfd5e44-63cb-498b-be8a-af6fef3f6b20",
       "trimType": "auto",
       "trimThreshold": 1,
       "rotated": false,

assets/scripts/barCountPop.js

@@ -0,0 +1,22 @@
+cc.Class({
+    extends: cc.Component,
+
+    properties: {
+        titleLabel: {
+            default: null,
+            type: cc.Label
+        },
+        title: ''
+    },
+
+    // LIFE-CYCLE CALLBACKS:
+
+    onLoad () {
+        this.titleLabel.string = this.title;
+    },
+
+    start () {
+    },
+
+    // update (dt) {},
+});

assets/scripts/barCountPop.js.meta

@@ -0,0 +1,9 @@
+{
+  "ver": "1.0.5",
+  "uuid": "400a895f-1b71-4b23-9880-459aeef8bad3",
+  "isPlugin": false,
+  "loadPluginInWeb": true,
+  "loadPluginInNative": true,
+  "loadPluginInEditor": false,
+  "subMetas": {}
+}

assets/scripts/barCube.js

@@ -2,13 +2,22 @@ cc.Class({
     extends: cc.Component,
 
     properties: {
-
+        box: {
+            default: null,
+            type: cc.Sprite
+        },
+        type: 'wood',
+        status: 'c'
     },
 
     // LIFE-CYCLE CALLBACKS:
 
     onLoad () {
-
+        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;
+        });
     },
 
     start () {

assets/scripts/barLine.js

@@ -0,0 +1,26 @@
+cc.Class({
+    extends: cc.Component,
+
+    properties: {
+        point: {
+            default: null,
+            type: cc.Sprite
+        },
+        color: 'w'
+    },
+
+    // LIFE-CYCLE CALLBACKS:
+
+    onLoad () {
+        let url = `textures/part1/bar_line_${this.color}`;
+        let self = this;
+        cc.loader.loadRes(url, cc.SpriteFrame, function (err, spriteFrame) {
+            self.point.spriteFrame = spriteFrame;
+        });
+    },
+
+    start () {
+    },
+
+    // update (dt) {},
+});

assets/scripts/barLine.js.meta

@@ -0,0 +1,9 @@
+{
+  "ver": "1.0.5",
+  "uuid": "875476de-853b-480c-83bb-87fdc06dd2a5",
+  "isPlugin": false,
+  "loadPluginInWeb": true,
+  "loadPluginInNative": true,
+  "loadPluginInEditor": false,
+  "subMetas": {}
+}

assets/scripts/progressBar.js

@@ -17,20 +17,65 @@ cc.Class({
         bar: {
             default: null,
             type: cc.Node
-        }
+        },
+        countLabel: {
+            default: null,
+            type: cc.Label
+        },
+        barCover: {
+            default: null,
+            type: cc.Node
+        },
+        popTitles: [],
+        currentVal: 1000
     },
 
     // LIFE-CYCLE CALLBACKS:
 
     onLoad () {
-        var point1 = cc.instantiate(this.barPointerPrefab);
+        let margin = 170;
-        this.bar.addChild(point1);
+        this.countLabel.string = '当前预约人数: ' + this.currentVal;
-        var cube = cc.instantiate(this.barCubePrefab);
+        let width = 75;
-        this.node.addChild(cube);
+        if (this.currentVal <= 10000) {
-        cube.setPosition(cc.v2(-87, -125));
+            width += margin * this.currentVal / 10000;
-        var pop = cc.instantiate(this.barPopPrefab);
+        } else if (this.currentVal > 10000 && this.currentVal <= 30000) {
-        this.node.addChild(pop);
+            width += (margin + margin * (this.currentVal - 10000) / 20000);
-        pop.setPosition(cc.v2(-235, 95));
+        } 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'];
+        let openVals = [0, 10000, 30000, 50000];
+        for(let i = 0; i < 4; i++) {
+            var pop = cc.instantiate(this.barPopPrefab);
+            pop.getComponent('barCountPop').title = this.popTitle[i];
+            if (i === 0) {
+                pop.getComponent('barCountPop').titleLabel.fontSize = 25;
+            } else {
+                pop.getComponent('barCountPop').titleLabel.fontSize = 30;
+            }
+            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';
+            this.bar.addChild(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';
+                this.node.addChild(cube);
+                cube.setPosition(cc.v2(xNum[i], -125));
+            }
+        }
+
+
     },
 
     start () {

assets/scripts/scrollContent.js

@@ -60,6 +60,7 @@ cc.Class({
 
     onLoad () {
         var processBar = cc.instantiate(this.processBarPrefab);
+        processBar.getComponent('progressBar').currentVal = 1024;
         this.part1.addChild(processBar);
         var puzzle = cc.instantiate(this.puzzlePrefab);
         this.part2.addChild(puzzle);