优化抽奖

src/views/single-page/Lottery.vue

@@ -5,46 +5,45 @@
             background-size: 100% 100%;
             background-repeat: no-repeat;
             background-image: url('http://webhis.thyy.cn:8080/resource/image/happyAside.jpg')">
-        <div style="height: 20%"></div>
-        <div style="width: 80%; margin-left: 10%">
-          <el-upload
-              drag
-              action="http://172.16.32.160:8077/lottery/uploadLotteryUsers"
-              :show-file-list="false"
-              :on-success="uploadSuccess"
-          >
-            <el-icon class="el-icon--upload" style="color: white">
-              <upload-filled/>
-            </el-icon>
-            <div style="color: white">
-              导入抽奖名单
-            </div>
-          </el-upload>
-        </div>
-        <div style="margin: 24px 0 12px 30px; font-size: 18px; color: #c4c4c4;">
-          抽奖详情设置
-          <span class="reset-pool" @click="initLotteryPool">重置为初始状态</span>
-        </div>
-        <div style="margin-left: 50px">
-          <div v-for="item in lotteryPool" :key="item.code">
-            <div style="display: flex; line-height: 32px; font-size: 16px">
-              <div style="color: white; font-weight: bold">{{ item.name }}：</div>
-              <div style="width: 60px; color: lightgreen; font-weight: bold">{{ item.amount }} 份</div>
-              <div style="width: 40px; text-align: right">
-                <el-button circle icon="Edit" @click="editRule(item)"></el-button>
+        <div style="height: 1px"></div>
+
+        <div style="background-color: rgba(255,255,255,0.7); margin: 30px; padding: 2px; border-radius: 8px">
+          <div style="margin: 12px 0 12px 10px; font-size: 18px; color: #014841; font-weight: bold">
+            奖项设置
+            <span class="reset-pool" @click="initLotteryPool">重置为初始状态</span>
+          </div>
+          <div style="margin-left: 20px">
+            <div v-for="item in lotteryPool" :key="item.code">
+              <div style="display: flex; line-height: 32px; font-size: 16px">
+                <div style="color: black; font-weight: bold">{{ item.name }}：</div>
+                <div style="width: 60px; color: #007bd9; font-weight: bold">{{ item.amount }} 份</div>
+                <div style="width: 40px; text-align: right">
+                  <el-button circle icon="Edit" @click="editRule(item)"></el-button>
+                </div>
               </div>
             </div>
           </div>
         </div>
-        <div style="width: 300px; text-align: center; margin-top: 30px">
+
+        <div style="width: 300px; text-align: center; margin-top: 20px">
           <el-button style="width: 200px" size="large" :disabled="duringLottery"
                      type="danger" icon="Star" @click="startLottery">开始抽奖
           </el-button>
-          <div style="margin-top: 12px">
-            <span class="show-history" @click="showHistory">
-              查看中奖记录
-            </span>
-          </div>
+
+<!--          <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>
+              <span style="color: white; font-weight: bold">{{user.wonName}}</span>
+            </div>
+          </el-scrollbar>
+
         </div>
       </div>
     </template>
@@ -66,29 +65,18 @@
           <canvas id="canvas"></canvas>
         </div>
       </div>
-
-      <el-drawer v-model="historyVisible" title="中奖记录">
-        <el-table :data="historyWonUsers" stripe>
-          <el-table-column prop="codeRs" label="工号"></el-table-column>
-          <el-table-column prop="name" label="姓名"></el-table-column>
-          <el-table-column prop="wonName" label="中奖"></el-table-column>
-        </el-table>
-      </el-drawer>
-
     </template>
   </page-layer>
 </template>
 <script setup>
 import PageLayer from "@/layout/PageLayer.vue";
-import {ElMessage, ElMessageBox} from "element-plus";
+import {ElMessageBox} from "element-plus";
 import {selectLotteryUsers, chooseWinner, recordLotteryResult, selectWonUsers} from "@/api/single-page/lottery";
 
 const lotteryPool = ref([])
 const lotteryUsers = ref([])
 const duringLottery = ref(false)
 
-const carousel = ref(null)
-
 const winner = reactive({
   index: -1,
   lotteryCode: '',
@@ -99,15 +87,6 @@ const winner = reactive({
 const currentLotteryName = ref('三等奖')
 const currentUserName = ref('等待抽奖')
 
-function uploadSuccess(response) {
-  ElMessage({
-    type: 'success',
-    message: '导入成功。',
-    duration: 2500
-  })
-  lotteryUsers.value = response.data
-}
-
 function initLotteryPool() {
   lotteryPool.value = [
     {code: 0, name: '特等奖', amount: 3, round: 0},
@@ -145,6 +124,7 @@ function winnerExposed() {
     duringLottery.value = false;
     clearInterval(carouselInterval)
 
+    refreshHistory()
     startFirework()
 
     const element = document.getElementById('winner-div')
@@ -213,15 +193,39 @@ function editRule(item) {
   })
 }
 
-const historyVisible = ref(false)
 const historyWonUsers = ref([])
-function showHistory () {
+function refreshHistory () {
   selectWonUsers().then(res => {
     historyWonUsers.value = res
-    historyVisible.value = true
+    if (res.length > 17) {
+      scrollIfExceedLength(res.length - 17)
+    }
   })
 }
 
+const wonUserRef = ref(null)
+let scrollInterval = null
+function scrollIfExceedLength(len) {
+  let height = len * 30;
+  let target = 0;
+  clearInterval(scrollInterval)
+  nextTick(() => {
+    const wrap = wonUserRef.value.wrapRef;
+    scrollInterval = setInterval(() => {
+      target += 1
+      if (target > (height + 15)) {
+        target = -1
+      } else {
+        wrap.scrollTop = target
+      }
+    }, 50)
+  })
+}
+
+onDeactivated(() => {
+  clearInterval(scrollInterval)
+})
+
 onMounted(() => {
   let storage = localStorage.getItem('lotteryPool')
   if (storage) {
@@ -232,6 +236,7 @@ onMounted(() => {
   selectLotteryUsers().then(res => {
     lotteryUsers.value = res
     initFireworkCanvas()
+    refreshHistory()
   })
 })