修改 中獎清單 輪播完成

resources/js/src/views/lottery/PrizeList.vue

@@ -4,7 +4,10 @@
     <div class="title text-center"><feather-icon class="arrow-left"
         icon="ChevronsLeftIcon"
         size="60"
-        @click="shiftPrize(1)" />{{ prizeName }}<feather-icon class="arrow-right"
+        @click="shiftPrize(1)" />{{ prizeName }}<feather-icon class="pause"
+        :icon="PauseIcon"
+        size="60"
+        @click="pauseSwitch()" /><feather-icon class="arrow-right"
         icon="ChevronsRightIcon"
         size="60"
         @click="shiftPrize(-1)" /></div>
@@ -15,7 +18,7 @@
       :variant="variant"
       :class="'progress-bar-' + variant" />
     <div style="background-image: url(../flower-r.png);" class="back">
-      <b-row>
+      <b-row v-if="prizeList1.length > 0">
         <b-col style=" margin-right: 0rem; margin-left: 0rem;">
           <div class="prize-list" :key="index" v-for="(item, index) in prizeList1">
             <b-badge pill :variant="isClaim(item.is_claimed)">{{ item.alias.padEnd(6, "　") + " " + item.user_id + " " +
@@ -36,6 +39,11 @@
 
         </b-col>
       </b-row>
+      <b-col v-else>
+        <div class="prize-list">
+          <b-badge pill variant="danger">尚未抽出</b-badge>
+        </div>
+      </b-col>
       <!-- <table-custom-render /> -->
     </div>
 
@@ -74,17 +82,17 @@ export default {
       variant: 'danger',
       value: 0,
       timer: null,
+      isPause: false,
+      delayTimer: 150,
     }
   },
   created() {
     this.getPrize(this.$route.params.activity_id)
     this.bodyListener = (e) => {
       if (e.keyCode === 37 && e.target === document.body) {
-        console.log("left");
         this.shiftPrize(-1)
       }
       if (e.keyCode === 39 && e.target === document.body) {
-        console.log("right");
         this.shiftPrize(1)
       }
 
@@ -94,13 +102,14 @@ export default {
   },
   mounted() {
     this.timer = setInterval(() => {
-      // eslint-disable-next-line
-      this.value += 1;
-      if(this.value >= 100){
-        this.shiftPrize(1);
-        this.value = 0;
+      if (!this.isPause) {
+        this.value += 1;
+        if (this.value >= 105) {
+          this.shiftPrize(1);CMD
+        }
       }
-    }, 100)
+
+    }, this.delayTimer)
   },
   beforeDestroy() {
     clearInterval(this.timer)
@@ -113,21 +122,34 @@ export default {
         this.prizes = response.data;
         this.index = this.prizes.length - 1;
         let prize_id = this.prizes[this.index].id;
-        this.getPrizeList(prize_id);
+        this.getPrizeList(prize_id,1);
       }).catch(error => {
         console.log("error: " + error);
       });
     },
-    getPrizeList(prize_id) {
+    getPrizeList(prize_id,direction) {
       useJwt.postData('/api/recipient/indexByPrize', { prize_id: prize_id }).then(response => {
-        console.log(response.data);
         this.prizeList = response.data.list;
         this.pageMax = Math.ceil(this.prizeList.length / 33);
-        this.prizeList1 = this.prizeList.splice(0, 11)
-        this.prizeList2 = this.prizeList.splice(0, 11)
-        this.prizeList3 = this.prizeList.splice(0, 11)
+        this.page = direction == 1 ? 1 : this.pageMax;
+        this.prizeList1 = []
+        this.prizeList2 = []
+        this.prizeList3 = []
+        if (this.prizeList.length > 0) {
+          for (let i = 33 * (this.page - 1); i < 11 + 33 * (this.page - 1); i++) {
+            if (this.prizeList[i]) {
+              this.prizeList1.push(this.prizeList[i])
+            }
+            if (this.prizeList[i + 11]) {
+              this.prizeList2.push(this.prizeList[i + 11])
+            }
+            if (this.prizeList[i + 22]) {
+              this.prizeList3.push(this.prizeList[i + 22])
+            }
+          }
+        }
+        //( 3 / 4 )
         if (this.pageMax > 1) {
-          this.page = 1;
           this.tempPrizeName = response.data.prize[0].name;
           this.prizeName = response.data.prize[0].name + ' ( ' + this.page + ' / ' + this.pageMax + ' )';
         } else {
@@ -139,14 +161,27 @@ export default {
       });
     },
     shiftPrize(index) {
-      if (this.prizeList.length <= 0) {
-        this.index = (this.index + this.prizes.length + index) % this.prizes.length;
-        this.getPrizeList(this.prizes[this.index].id)
+      this.value = 0
+      this.page += index;
+      if (this.page <= this.pageMax && this.page >= 1) {
+        this.prizeName = this.tempPrizeName + ' ( ' + this.page + ' / ' + this.pageMax + ' )';
+        this.prizeList1 = []
+        this.prizeList2 = []
+        this.prizeList3 = []
+        for (let i = 33 * (this.page - 1); i < 11 + 33 * (this.page - 1); i++) {
+          if (this.prizeList[i]) {
+            this.prizeList1.push(this.prizeList[i])
+          }
+          if (this.prizeList[i + 11]) {
+            this.prizeList2.push(this.prizeList[i + 11])
+          }
+          if (this.prizeList[i + 22]) {
+            this.prizeList3.push(this.prizeList[i + 22])
+          }
+        }
       } else {
-        this.prizeList1 = this.prizeList.splice(0, 11)
-        this.prizeList2 = this.prizeList.splice(0, 11)
-        this.prizeList3 = this.prizeList.splice(0, 11)
-        this.prizeName = this.tempPrizeName + ' ( ' + ++this.page + ' / ' + this.pageMax + ' )';
+        this.index = (this.index + this.prizes.length + index) % this.prizes.length;
+        this.getPrizeList(this.prizes[this.index].id,index)
       }
     },
     isClaim(status) {
@@ -191,11 +226,17 @@ export default {
       }
     }, padEnd(string) {
       string.padEnd(6, "　");
+    },
+    pauseSwitch() {
+      this.isPause = !this.isPause;
     }
 
+
   },
   computed: {
-
+    PauseIcon() {
+      return this.isPause ? 'PlayIcon' : 'PauseIcon';
+    }
   },
 }
 </script>
@@ -237,11 +278,15 @@ body {
 
 .badge-pill {
   width: 98%;
-  background-color: #df1a1a85;
+  // background-color: #df1a1a85;
   height: 60px;
   padding-top: 10px;
 }
 
+.badge-danger {
+  background-color: #df1a1a85;
+}
+
 .title {
   background-color: #CA0000;
   width: 100%;
@@ -258,6 +303,12 @@ body {
   background-position: -5% 120%;
 }
 
+.pause {
+  right: 100px;
+  position: absolute;
+  cursor: pointer;
+}
+
 .arrow-right {
   right: 0;
   position: absolute;