From d37b213004c87c196292edb039a9d59441af0d83 Mon Sep 17 00:00:00 2001
From: moshang-xc <755172990@qq.com>
Date: Fri, 27 Dec 2019 12:49:05 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E6=94=B9=E6=B3=A8=E9=87=8A?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 product/src/index.html           |   1 -
 product/src/lottery/index.js     |   2 +-
 product/src/lottery/prizeList.js | 477 +++++++++++++++++--------------
 3 files changed, 259 insertions(+), 221 deletions(-)

diff --git a/product/src/index.html b/product/src/index.html
index fda7127a..921af8d9 100644
--- a/product/src/index.html
+++ b/product/src/index.html
@@ -31,7 +31,6 @@
     <div id="container"></div>
 
     <div id="menu">
-      <!-- <button id="welcome">Tenda2019</button> -->
       <button id="enter">进入抽奖</button>
       <div id="lotteryBar" class="none">
         <button id="lottery">抽奖</button>
diff --git a/product/src/lottery/index.js b/product/src/lottery/index.js
index 5f96cc1d..0585d412 100644
--- a/product/src/lottery/index.js
+++ b/product/src/lottery/index.js
@@ -212,7 +212,7 @@ function bindEvent() {
 
     let target = e.target.id;
     switch (target) {
-      // 显示Tenda墙
+      // 显示数字墙
       case "welcome":
         switchScreen("enter");
         rotate = false;
diff --git a/product/src/lottery/prizeList.js b/product/src/lottery/prizeList.js
index 9c6182ec..071adf80 100644
--- a/product/src/lottery/prizeList.js
+++ b/product/src/lottery/prizeList.js
@@ -1,282 +1,321 @@
 const MAX_TOP = 300,
-    MAX_WIDTH = document.body.clientWidth;
+  MAX_WIDTH = document.body.clientWidth;
 
 let defaultType = 0;
 
 let prizes;
-const DEFAULT_MESS = ['我是该抽中一等奖还是一等奖呢，纠结ing...', '听说要提前一个月吃素才能中大奖喔！', '好想要无人机啊！！！', '一等奖有没有人想要呢？', '五等奖也不错，只要自己能中奖就行', '祝大家新年快乐！', '中不中奖不重要，大家吃好喝好。', '我已经有了天猫精灵了，要是再中个小度，那我该宠谁呢？', '2019年，祝福大家事事顺遂。', '作为专业陪跑的我，我就看看你们有谁跟我一样', '2019祝福TENDA越来越好！', '2019了，有没有要生猪宝宝的？', '来年再战！！！', '去年UI组全员陪跑，今年是否还是如此呢？', '我们UI组至少要重一个大奖吧'];
+const DEFAULT_MESS = [
+  "我是该抽中一等奖还是一等奖呢，纠结ing...",
+  "听说要提前一个月吃素才能中大奖喔！",
+  "好想要无人机啊！！！",
+  "一等奖有没有人想要呢？",
+  "五等奖也不错，只要自己能中奖就行",
+  "祝大家新年快乐！",
+  "中不中奖不重要，大家吃好喝好。",
+  "我已经有了天猫精灵了，要是再中个小度，那我该宠谁呢？",
+  "2019年，祝福大家事事顺遂。",
+  "作为专业陪跑的我，我就看看你们有谁跟我一样",
+  "2019祝福大家越来越好！",
+  "2019了，有没有要生猪宝宝的？",
+  "来年再战！！！",
+  "去年UI组全员陪跑，今年是否还是如此呢？",
+  "我们UI组至少要重一个大奖吧"
+];
 
 let lastDanMuList = [];
 
 let prizeElement = {},
-    lasetPrizeIndex = 0;
+  lasetPrizeIndex = 0;
 class DanMu {
-    constructor(option) {
-        if (typeof option !== 'object') {
-            option = {
-                text: option
-            };
-        }
-
-        this.position = {};
-        this.text = option.text;
-        this.onComplete = option.onComplete;
-
-        this.init();
-    }
-
-    init() {
-        this.element = document.createElement('div');
-        this.element.className = 'dan-mu';
-        document.body.appendChild(this.element);
-
-        this.start();
-    }
-
-    setText(text) {
-        this.text = text || this.text;
-        this.element.textContent = this.text;
-        this.width = this.element.clientWidth + 100;
-    }
-
-    start(text) {
-        let speed = ~~(Math.random() * 10000) + 6000;
-        this.position = {
-            x: MAX_WIDTH
-        };
-        let delay = speed / 10;
-
-        this.setText(text);
-        this.element.style.transform = 'translateX(' + this.position.x + 'px)';
-        this.element.style.top = ~~(Math.random() * MAX_TOP) + 10 + 'px';
-        this.element.classList.add('active');
-        this.tween = new TWEEN.Tween(this.position).to({
-                x: -this.width
-            }, speed)
-            .onUpdate(() => {
-                this.render();
-            }).onComplete(() => {
-                this.onComplete && this.onComplete();
-            })
-            .start();
-
+  constructor(option) {
+    if (typeof option !== "object") {
+      option = {
+        text: option
+      };
     }
 
-    render() {
-        this.element.style.transform = 'translateX(' + this.position.x + 'px)';
-    }
+    this.position = {};
+    this.text = option.text;
+    this.onComplete = option.onComplete;
+
+    this.init();
+  }
+
+  init() {
+    this.element = document.createElement("div");
+    this.element.className = "dan-mu";
+    document.body.appendChild(this.element);
+
+    this.start();
+  }
+
+  setText(text) {
+    this.text = text || this.text;
+    this.element.textContent = this.text;
+    this.width = this.element.clientWidth + 100;
+  }
+
+  start(text) {
+    let speed = ~~(Math.random() * 10000) + 6000;
+    this.position = {
+      x: MAX_WIDTH
+    };
+    let delay = speed / 10;
+
+    this.setText(text);
+    this.element.style.transform = "translateX(" + this.position.x + "px)";
+    this.element.style.top = ~~(Math.random() * MAX_TOP) + 10 + "px";
+    this.element.classList.add("active");
+    this.tween = new TWEEN.Tween(this.position)
+      .to(
+        {
+          x: -this.width
+        },
+        speed
+      )
+      .onUpdate(() => {
+        this.render();
+      })
+      .onComplete(() => {
+        this.onComplete && this.onComplete();
+      })
+      .start();
+  }
+
+  render() {
+    this.element.style.transform = "translateX(" + this.position.x + "px)";
+  }
 }
 
 class Qipao {
-    constructor(option) {
-        if (typeof option !== 'object') {
-            option = {
-                text: option
-            };
-        }
-
-        this.text = option.text;
-        this.onComplete = option.onComplete;
-        this.$par = document.querySelector('.qipao-container');
-        if (!this.$par) {
-            this.$par = document.createElement('div');
-            this.$par.className = 'qipao-container';
-            document.body.appendChild(this.$par);
-        }
-
-        this.init();
+  constructor(option) {
+    if (typeof option !== "object") {
+      option = {
+        text: option
+      };
     }
 
-    init() {
-        this.element = document.createElement('div');
-        this.element.className = 'qipao animated';
-        this.$par.appendChild(this.element);
-
-        this.start();
-    }
-
-    setText(text) {
-        this.text = text || this.text;
-        this.element.textContent = this.text;
+    this.text = option.text;
+    this.onComplete = option.onComplete;
+    this.$par = document.querySelector(".qipao-container");
+    if (!this.$par) {
+      this.$par = document.createElement("div");
+      this.$par.className = "qipao-container";
+      document.body.appendChild(this.$par);
     }
 
-    start(text) {
-        this.setText(text);
-        this.element.classList.remove('bounceOutRight');
-        this.element.classList.add('bounceInRight');
-
-        setTimeout(() => {
-            this.element.classList.remove('bounceInRight');
-            this.element.classList.add('bounceOutRight');
-            this.onComplete && this.onComplete();
-        }, 4000);
-    }
+    this.init();
+  }
+
+  init() {
+    this.element = document.createElement("div");
+    this.element.className = "qipao animated";
+    this.$par.appendChild(this.element);
+
+    this.start();
+  }
+
+  setText(text) {
+    this.text = text || this.text;
+    this.element.textContent = this.text;
+  }
+
+  start(text) {
+    this.setText(text);
+    this.element.classList.remove("bounceOutRight");
+    this.element.classList.add("bounceInRight");
+
+    setTimeout(() => {
+      this.element.classList.remove("bounceInRight");
+      this.element.classList.add("bounceOutRight");
+      this.onComplete && this.onComplete();
+    }, 4000);
+  }
 }
 
 let addQipao = (() => {
-    let qipaoList = [];
-    return function(text) {
-        let qipao;
-        if (qipaoList.length > 0) {
-            qipao = qipaoList.shift();
-        } else {
-            qipao = new Qipao({
-                onComplete() {
-                    qipaoList.push(qipao);
-                }
-            });
+  let qipaoList = [];
+  return function(text) {
+    let qipao;
+    if (qipaoList.length > 0) {
+      qipao = qipaoList.shift();
+    } else {
+      qipao = new Qipao({
+        onComplete() {
+          qipaoList.push(qipao);
         }
-
-        qipao.start(text);
+      });
     }
+
+    qipao.start(text);
+  };
 })();
 
 function setPrizes(pri) {
-    prizes = pri;
-    defaultType = prizes[0]['type'];
-    lasetPrizeIndex = pri.length - 1;
+  prizes = pri;
+  defaultType = prizes[0]["type"];
+  lasetPrizeIndex = pri.length - 1;
 }
 
 function showPrizeList(currentPrizeIndex) {
-    let currentPrize = prizes[currentPrizeIndex];
-    if (currentPrize.type === defaultType) {
-        currentPrize.count === '不限制';
+  let currentPrize = prizes[currentPrizeIndex];
+  if (currentPrize.type === defaultType) {
+    currentPrize.count === "不限制";
+  }
+  let htmlCode = `<div class="prize-mess">正在抽取<label id="prizeType" class="prize-shine">${currentPrize.type +
+    "等奖"}</label><label id="prizeText" class="prize-shine">${
+    currentPrize["title"]
+  }</label>，剩余<label id="prizeLeft" class="prize-shine">${
+    currentPrize["count"]
+  }</label>个</div><ul class="prize-list">`;
+  prizes.forEach(item => {
+    if (item.type === defaultType) {
+      return true;
     }
-    let htmlCode = `<div class="prize-mess">正在抽取<label id="prizeType" class="prize-shine">${currentPrize.type +'等奖'}</label><label id="prizeText" class="prize-shine">${currentPrize['title']}</label>，剩余<label id="prizeLeft" class="prize-shine">${currentPrize['count']}</label>个</div><ul class="prize-list">`;
-    prizes.forEach(item => {
-        if (item.type === defaultType) {
-            return true;
-        }
-        htmlCode += `<li id="prize-item-${item.type}" class="prize-item ${(item.type == currentPrize.type ? "shine": '')}">
+    htmlCode += `<li id="prize-item-${item.type}" class="prize-item ${
+      item.type == currentPrize.type ? "shine" : ""
+    }">
                         <div class="prize-img">
                             <img src="${item.img}" alt="${item.title}">
                         </div>
                         <div class="prize-text">
-                            <h5 class="prize-title">${item.type}等奖 ${item.title}</h5>
+                            <h5 class="prize-title">${item.type}等奖 ${
+      item.title
+    }</h5>
                             <div class="prize-count">
                                 <div class="progress">
-                                    <div id="prize-bar-${item.type}" class="progress-bar progress-bar-danger progress-bar-striped active" style="width: 100%;">
+                                    <div id="prize-bar-${
+                                      item.type
+                                    }" class="progress-bar progress-bar-danger progress-bar-striped active" style="width: 100%;">
                                     </div>
                                 </div>
-                                <div id="prize-count-${item.type}" class="prize-count-left">
-                                    ${item.count + '/' + item.count}
+                                <div id="prize-count-${
+                                  item.type
+                                }" class="prize-count-left">
+                                    ${item.count + "/" + item.count}
                                 </div>
                             </div>
                         </div>
-                    </li>`
-    });
-    htmlCode += `</ul>`;
+                    </li>`;
+  });
+  htmlCode += `</ul>`;
 
-    document.querySelector('#prizeBar').innerHTML = htmlCode;
+  document.querySelector("#prizeBar").innerHTML = htmlCode;
 }
 
 function resetPrize(currentPrizeIndex) {
-    prizeElement = {};
-    lasetPrizeIndex = currentPrizeIndex;
-    showPrizeList(currentPrizeIndex);
+  prizeElement = {};
+  lasetPrizeIndex = currentPrizeIndex;
+  showPrizeList(currentPrizeIndex);
 }
 
 let setPrizeData = (function() {
-    return function(currentPrizeIndex, count, isInit) {
-        let currentPrize = prizes[currentPrizeIndex],
-            type = currentPrize.type,
-            elements = prizeElement[type],
-            totalCount = currentPrize.count;
-
-        if (!elements) {
-            elements = {
-                box: document.querySelector(`#prize-item-${type}`),
-                bar: document.querySelector(`#prize-bar-${type}`),
-                text: document.querySelector(`#prize-count-${type}`)
-            }
-            prizeElement[type] = elements;
-        }
-
-        if (!prizeElement.prizeType) {
-            prizeElement.prizeType = document.querySelector('#prizeType');
-            prizeElement.prizeLeft = document.querySelector('#prizeLeft');
-            prizeElement.prizeText = document.querySelector('#prizeText');
-        }
-
-        if (isInit) {
-            for (let i = prizes.length - 1; i > currentPrizeIndex; i--) {
-                let type = prizes[i]['type'];
-                document.querySelector(`#prize-item-${type}`).className = 'prize-item done';
-                document.querySelector(`#prize-bar-${type}`).style.width = '0';
-                document.querySelector(`#prize-count-${type}`).textContent = '0' + '/' + prizes[i]['count'];
-            }
-        }
+  return function(currentPrizeIndex, count, isInit) {
+    let currentPrize = prizes[currentPrizeIndex],
+      type = currentPrize.type,
+      elements = prizeElement[type],
+      totalCount = currentPrize.count;
+
+    if (!elements) {
+      elements = {
+        box: document.querySelector(`#prize-item-${type}`),
+        bar: document.querySelector(`#prize-bar-${type}`),
+        text: document.querySelector(`#prize-count-${type}`)
+      };
+      prizeElement[type] = elements;
+    }
 
-        if (lasetPrizeIndex !== currentPrizeIndex) {
-            let lastPrize = prizes[lasetPrizeIndex],
-                lastBox = document.querySelector(`#prize-item-${lastPrize.type}`);
-            lastBox.classList.remove('shine');
-            lastBox.classList.add('done');
-            elements.box && elements.box.classList.add('shine');
-            prizeElement.prizeType.textContent = currentPrize.type + '等奖';
-            prizeElement.prizeText.textContent = currentPrize.title;
+    if (!prizeElement.prizeType) {
+      prizeElement.prizeType = document.querySelector("#prizeType");
+      prizeElement.prizeLeft = document.querySelector("#prizeLeft");
+      prizeElement.prizeText = document.querySelector("#prizeText");
+    }
 
-            lasetPrizeIndex = currentPrizeIndex;
-        }
+    if (isInit) {
+      for (let i = prizes.length - 1; i > currentPrizeIndex; i--) {
+        let type = prizes[i]["type"];
+        document.querySelector(`#prize-item-${type}`).className =
+          "prize-item done";
+        document.querySelector(`#prize-bar-${type}`).style.width = "0";
+        document.querySelector(`#prize-count-${type}`).textContent =
+          "0" + "/" + prizes[i]["count"];
+      }
+    }
 
-        if (currentPrizeIndex === 0) {
-            prizeElement.prizeType.textContent = '特别奖';
-            prizeElement.prizeText.textContent = ' ';
-            prizeElement.prizeLeft.textContent = '不限制';
-            return;
-        }
+    if (lasetPrizeIndex !== currentPrizeIndex) {
+      let lastPrize = prizes[lasetPrizeIndex],
+        lastBox = document.querySelector(`#prize-item-${lastPrize.type}`);
+      lastBox.classList.remove("shine");
+      lastBox.classList.add("done");
+      elements.box && elements.box.classList.add("shine");
+      prizeElement.prizeType.textContent = currentPrize.type + "等奖";
+      prizeElement.prizeText.textContent = currentPrize.title;
 
-        count = totalCount - count;
-        let percent = (count / totalCount).toFixed(2);
-        elements.bar && (elements.bar.style.width = percent * 100 + '%');
-        elements.text && (elements.text.textContent = count + '/' + totalCount);
-        prizeElement.prizeLeft.textContent = count;
+      lasetPrizeIndex = currentPrizeIndex;
     }
-}());
 
-function startMaoPao() {
-    let len = DEFAULT_MESS.length,
-        count = 5,
-        index = ~~(Math.random() * len),
-        danmuList = [],
-        total = 0;
-
-    function restart() {
-        total = 0;
-        danmuList.forEach(item => {
-            let text = lastDanMuList.length > 0 ? lastDanMuList.shift() : DEFAULT_MESS[index++];
-            item.start(text);
-            index = index > len ? 0 : index;
-        });
+    if (currentPrizeIndex === 0) {
+      prizeElement.prizeType.textContent = "特别奖";
+      prizeElement.prizeText.textContent = " ";
+      prizeElement.prizeLeft.textContent = "不限制";
+      return;
     }
 
-    for (let i = 0; i < count; i++) {
-
-        setTimeout(() => {
-            danmuList.push(new DanMu({
-                text: DEFAULT_MESS[index++],
-                onComplete: function() {
-                    setTimeout(() => {
-                        this.start(DEFAULT_MESS[index++]);
-                        index = index > len ? 0 : index;
-                    }, 1000);
-                }
-            }));
-            index = index > len ? 0 : index;
-        }, 1500 * i);
-    }
+    count = totalCount - count;
+    let percent = (count / totalCount).toFixed(2);
+    elements.bar && (elements.bar.style.width = percent * 100 + "%");
+    elements.text && (elements.text.textContent = count + "/" + totalCount);
+    prizeElement.prizeLeft.textContent = count;
+  };
+})();
+
+function startMaoPao() {
+  let len = DEFAULT_MESS.length,
+    count = 5,
+    index = ~~(Math.random() * len),
+    danmuList = [],
+    total = 0;
+
+  function restart() {
+    total = 0;
+    danmuList.forEach(item => {
+      let text =
+        lastDanMuList.length > 0
+          ? lastDanMuList.shift()
+          : DEFAULT_MESS[index++];
+      item.start(text);
+      index = index > len ? 0 : index;
+    });
+  }
+
+  for (let i = 0; i < count; i++) {
+    setTimeout(() => {
+      danmuList.push(
+        new DanMu({
+          text: DEFAULT_MESS[index++],
+          onComplete: function() {
+            setTimeout(() => {
+              this.start(DEFAULT_MESS[index++]);
+              index = index > len ? 0 : index;
+            }, 1000);
+          }
+        })
+      );
+      index = index > len ? 0 : index;
+    }, 1500 * i);
+  }
 }
 
 function addDanMu(text) {
-    lastDanMuList.push(text);
+  lastDanMuList.push(text);
 }
 
 export {
-    startMaoPao,
-    showPrizeList,
-    setPrizeData,
-    addDanMu,
-    setPrizes,
-    resetPrize,
-    addQipao
-}
\ No newline at end of file
+  startMaoPao,
+  showPrizeList,
+  setPrizeData,
+  addDanMu,
+  setPrizes,
+  resetPrize,
+  addQipao
+};