fix: 增加未中奖设置&文档修改

letseeqiji · Jul 17, 2020 · 5f626fe · 5f626fe
1 parent 881ce47
commit 5f626fe
Show file tree

Hide file tree

Showing 3 changed files with 44 additions and 19 deletions.
diff --git a/src/packages/countup/countup.vue b/src/packages/countup/countup.vue
@@ -178,11 +178,13 @@ export default {
       num_total_len: 0, //数字长度
       relNum: 0, //去除小数点
       customNumber: 1,
-      prizeLevelTrun: this.numHeight,
+      prizeLevelTrun: 0,
       prizeY: [],
       prizeYPrev: [],
       // machineTransition: 'none',
-      finshMachine: 0
+      finshMachine: 0,
+      notPrize: [],
+      typeMachine: ''
     };
   },
   computed: {},
@@ -447,24 +449,36 @@ export default {
         });
       });
     },
+    // 不中奖设置随机数
+    generateRandom() {
+      this.notPrize = [];
+      while (this.notPrize.length < 3) {
+        var rand = Math.floor(Math.random() * this.machinePrizeNum + 1);
+        if (this.notPrize.indexOf(rand) == -1) {
+          this.notPrize.push(rand);
+        }
+      }
+    },
     // 抽奖
     machineLuck() {
       this.machineTrunMore = this.machineTrunMore < 0 ? 0 : this.machineTrunMore;
       let distance = this.numHeight * this.machinePrizeNum; // 所有奖品的高度，雪碧图的高度
+      if (this.prizeLevelTrun < 0) {
+        this.generateRandom();
+      }
       for (let i = 0; i < this.machineNum; i++) {
         setTimeout(() => {
           let turn = distance * (i + 1 + parseFloat(this.machineTrunMore));
-          if (this.prizeLevelTrun >= 999) {
-            this.$set(this.prizeY, i, 100 * i);
-          } else {
-            if (this.prizeYPrev.length != 0) {
-              // this.machineTransition = 'none';
-              // console.log(this.prizeYPrev[i]-(this.numHeight * this.machinePrizeNum));
-              this.$set(this.prizeY, i, this.prizeYPrev[i]);
-            }
+          if (this.prizeYPrev.length != 0) {
+            // this.machineTransition = 'none';
+            // console.log(this.prizeYPrev[i]-(this.numHeight * this.machinePrizeNum));
+            this.$set(this.prizeY, i, this.prizeYPrev[i]);
           }
           let local = this.prizeYPrev[i] ? this.prizeYPrev[i] : 0;
           let newLocation = turn + local + (this.machinePrizeNum - this.prizeLevelTrun + 1) * this.numHeight + (distance - local);
+          if (this.prizeLevelTrun < 0) {
+            newLocation += this.numHeight * this.notPrize[i];
+          }
           this.scrollTime(
             i,
             // parseFloat((this.machinePrizeNum-(this.prizeLevelTrun-1))*this.numHeight + turn + local),
@@ -509,7 +523,11 @@ export default {
             });
             setTimeout(() => {
               this.finshMachine = 0;
-              this.$emit('scroll-end');
+              if (this.prizeLevelTrun < 0) {
+                this.$emit('scroll-end', false);
+              } else {
+                this.$emit('scroll-end', true);
+              }
             }, 130);
           }
         }

diff --git a/src/packages/countup/demo.vue b/src/packages/countup/demo.vue
@@ -33,7 +33,7 @@
       >
       </nut-countup>
       <nut-button @click="startRole" :disabled="startFlag">抽奖</nut-button>
-      <!-- <nut-button @click="startRole2" :disabled="startFlag2">抽奖(不中奖)</nut-button> -->
+      <nut-button @click="startRole2" :disabled="startFlag2">不中奖</nut-button>
     </div>
   </div>
 </template>
@@ -60,18 +60,25 @@ export default {
     },
     startRole() {
       this.prizeLevel = Math.floor(Math.random() * 5 + 1);
+      console.log(this.prizeLevel, '中奖');
       this.startFlag = true;
-      this.$refs['countup-machine'].machineLuck();
+      // 实际运行情况下，开始滚动函数，需要放在奖品回调函数之后，如果异步操作会影响转动结果
+      setTimeout(() => {
+        this.$refs['countup-machine'].machineLuck();
+      }, 500);
     },
     startRole2() {
-      this.prizeLevel = 9999;
+      this.prizeLevel = -1;
+      console.log(this.prizeLevel, '不中奖');
       this.startFlag2 = true;
-      this.$refs['countup-machine'].machineLuck();
+      setTimeout(() => {
+        this.$refs['countup-machine'].machineLuck();
+      }, 500);
     },
-    scrollAniEnd() {
-      this.$toast.text('恭喜中奖！！！');
+    scrollAniEnd(val) {
+      this.$toast.text(val ? '恭喜中奖！！！' : '很遗憾！没有中奖');
       setTimeout(() => {
-        this.startFlag = false;
+        val ? (this.startFlag = false) : (this.startFlag2 = false);
       }, 300);
     }
   },

diff --git a/src/packages/countup/doc.md b/src/packages/countup/doc.md
@@ -113,7 +113,7 @@ export default {
 | custom-change-num | 要变化的数字（用于自定义图片,initNum\endNum在此无效） | Number | 1
 | custom-bg-img | 自定义图片（建议使用雪碧图实现，使用抽奖功能必须使用雪碧图） | - | -
 | custom-spac-num | 图片中数字之间可能会存在间距 | Number | 0
-| type | 使用抽奖功能必穿“machine” | string | ''
+| type | 使用抽奖功能必传“machine” | string | ''
 | machine-prize-num | 奖品个数，一共多少个奖品，必传 | number | 4
 | machine-num | 抽奖位，即滚动几个，必传 | number | 3
 | machine-prize-level | 中奖图标，图标在雪碧图中的位置 | number | 0