抽奖页面添加白名单

src/router/index.js

@@ -56,7 +56,7 @@ export function addRoutes() {
     routesAsynced = true
 }
 
-const whiteList = ['/login', '/dashboard', '/scrollSource', '/404', '/401', '/']
+const whiteList = ['/login', '/dashboard', '/scrollSource', '/lottery', '/404', '/401', '/']
 
 router.beforeEach((to, _from, next) => {
     if (to.meta.passRule) {

src/views/single-page/Lottery.vue

@@ -26,17 +26,13 @@
         </div>
 
         <div style="width: 300px; text-align: center; margin-top: 20px">
+          <div style="color: white;text-align: left;padding-left: 50px;margin-bottom: 12px">
+            <el-checkbox v-model="continuous">连续抽奖</el-checkbox>
+          </div>
           <el-button style="width: 200px" size="large" :disabled="duringLottery"
                      type="danger" icon="Star" @click="startLottery">开始抽奖
           </el-button>
 
-<!--          <div ref="wonUserRef" style="margin-top: 32px; height: 500px; overflow-y: scroll">-->
-<!--            <div v-for="user in historyWonUsers" style="line-height: 30px; font-size: 16px">-->
-<!--              <span style="color: white">{{user.codeRs}} - {{user.name}}：</span>-->
-<!--              <span style="color: white; font-weight: bold">{{user.wonName}}</span>-->
-<!--            </div>-->
-<!--          </div>-->
-
           <el-scrollbar ref="wonUserRef" height="510px" style="margin-top: 20px">
             <div v-for="user in historyWonUsers" style="line-height: 30px; font-size: 16px">
               <span style="color: white">{{user.codeRs}} - {{user.name}}：</span>
@@ -73,6 +69,7 @@ import PageLayer from "@/layout/PageLayer.vue";
 import {ElMessageBox} from "element-plus";
 import {selectLotteryUsers, chooseWinner, recordLotteryResult, selectWonUsers} from "@/api/single-page/lottery";
 
+const continuous = ref(false)
 const lotteryPool = ref([])
 const lotteryUsers = ref([])
 const duringLottery = ref(false)
@@ -89,10 +86,10 @@ const currentUserName = ref('等待抽奖')
 
 function initLotteryPool() {
   lotteryPool.value = [
-    {code: 0, name: '特等奖', amount: 3, round: 0},
-    {code: 1, name: '一等奖', amount: 3, round: 0},
-    {code: 2, name: '二等奖', amount: 5, round: 0},
-    {code: 3, name: '三等奖', amount: 10, round: 0},
+    {code: 0, name: '特等奖', amount: 0, round: 0},
+    {code: 1, name: '一等奖', amount: 0, round: 0},
+    {code: 2, name: '二等奖', amount: 0, round: 0},
+    {code: 3, name: '三等奖', amount: 0, round: 0},
   ]
   localStorage.setItem('lotteryPool', JSON.stringify(lotteryPool.value))
 }
@@ -103,7 +100,7 @@ function moveToWinner() {
   let timer = 0;
   carouselInterval = setInterval(() => {
     timer += 100
-    if (timer >= 5000) {
+    if (timer >= 4000) {
       winnerExposed()
       return
     }
@@ -119,14 +116,11 @@ function moveToWinner() {
 
 function winnerExposed() {
   recordLotteryResult(winner).then(() => {
-
     currentUserName.value = winner.userCodeRs + ' - ' + winner.userName
     duringLottery.value = false;
     clearInterval(carouselInterval)
-
     refreshHistory()
     startFirework()
-
     const element = document.getElementById('winner-div')
     element.style.transitionDuration = '.5s'
     element.style.transitionTimingFunction = 'ease-in-out'
@@ -140,6 +134,12 @@ function winnerExposed() {
       element.style.removeProperty('transition-timing-function');
       element.style.removeProperty('transform-origin');
       element.style.removeProperty('transform');
+
+      if (continuous.value) {
+        setTimeout(() => {
+          startLottery()
+        }, 400);
+      }
     }, 600);
   })
 
@@ -167,6 +167,9 @@ function getWinnableLottery() {
   return new Promise((resolve, reject) => {
     for (let i = lotteryPool.value.length - 1; i >= 0; i--) {
       const item = lotteryPool.value[i]
+      if (item.amount === 1) {
+        continuous.value = false
+      }
       if (item.amount > 0) {
         item.amount -= 1
         item.round += 1
@@ -205,9 +208,10 @@ function refreshHistory () {
 
 const wonUserRef = ref(null)
 let scrollInterval = null
+
+let target = 0;
 function scrollIfExceedLength(len) {
   let height = len * 30;
-  let target = 0;
   clearInterval(scrollInterval)
   nextTick(() => {
     const wrap = wonUserRef.value.wrapRef;
@@ -379,4 +383,8 @@ Particle.prototype = {
   cursor: pointer;
   text-decoration: underline;
 }
+
+:deep(.el-checkbox) {
+  color: white;
+}
 </style>