新增 修改中獎清單 幻燈片

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

@@ -41,14 +41,14 @@
 						</div>
 					</b-col>
 				</b-row>
-				
+
 
 			</b-card>
 		</b-col>
 		<b-col md="6">
 			<b-card title="報到輸入" style="height: 65vh;">
 				<b-input-group prepend="編號" class="mt-3">
-					<b-form-input v-model="input" @keydown.native="keyListener"
+					<b-form-input v-model="input" @keydown.native="keyListener" inputmode="numeric"
 						placeholder="請輸入員工編號或來賓編號..."></b-form-input>
 					<b-input-group-append>
 						<b-button @click="searchData" variant="info">送出</b-button>
@@ -107,7 +107,7 @@ export default {
 		}
 	},
 	created() {
-		
+
 	},
 	computed: {
 
@@ -116,6 +116,7 @@ export default {
 		keyListener(event) {
 			if (event.which === 13) {
 				this.searchData()
+				event.srcElement.blur();
 			}
 		},
 		searchData() {

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

@@ -3,25 +3,40 @@
     no-body>
     <div class="title text-center"><feather-icon class="arrow-left"
         icon="ChevronsLeftIcon"
-        size="50" 
-        @click="shiftPrize(1)"/>{{ prizeName }}<feather-icon class="arrow-right"
+        size="60"
+        @click="shiftPrize(1)" />{{ prizeName }}<feather-icon class="arrow-right"
         icon="ChevronsRightIcon"
-        size="50" 
-        @click="shiftPrize(-1)"/></div>
+        size="60"
+        @click="shiftPrize(-1)" /></div>
+    <b-progress
+      :key="variant"
+      animated
+      :value="value"
+      :variant="variant"
+      :class="'progress-bar-' + variant" />
     <div style="background-image: url(../flower-r.png);" class="back">
-      <b-row style=" margin-right: 0rem; margin-left: 0rem;">
-        <!-- <table-custom-render /> -->
-        <b-col class="prize-list" :key="index" v-for="(item, index) in prizeList" lg="3" md="3">
-          <b-badge pill :variant="isClaim(item.is_claimed)">{{ item.alias.padEnd(6,"　") + " " + item.user_id + " " + item.name.padEnd(4,"　") }}</b-badge>
+      <b-row>
+        <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 + " " +
+              item.name.padEnd(4, "　") }}</b-badge>
+          </div>
         </b-col>
+        <b-col style=" margin-right: 0rem; margin-left: 0rem;">
+          <div class="prize-list" :key="index" v-for="(item, index) in prizeList2">
+            <b-badge pill :variant="isClaim(item.is_claimed)">{{ item.alias.padEnd(6, "　") + " " + item.user_id + " " +
+              item.name.padEnd(4, "　") }}</b-badge>
+          </div>
+        </b-col>
+        <b-col style=" margin-right: 0rem; margin-left: 0rem;">
+          <div class="prize-list" :key="index" v-for="(item, index) in prizeList3">
+            <b-badge pill :variant="isClaim(item.is_claimed)">{{ item.alias.padEnd(6, "　") + " " + item.user_id + " " +
+              item.name.padEnd(4, "　") }}</b-badge>
+          </div>
 
-        <b-button variant="danger"
-          style="height: 45px; margin-left: auto; margin-right: 44px; margin-bottom: 20px; margin-top: auto;"
-          @click="toggleFullscreen('graph-1')" size="sm"><feather-icon
-            icon="MaximizeIcon"
-            size="16" />
-        </b-button>
+        </b-col>
       </b-row>
+      <!-- <table-custom-render /> -->
     </div>
 
   </b-card>
@@ -29,7 +44,7 @@
 
 <script>
 import BCardCode from '@core/components/b-card-code/BCardCode.vue'
-import { BCard, BCardTitle, BRow, BCol, BBadge, BButton } from 'bootstrap-vue'
+import { BCard, BCardTitle, BRow, BCol, BBadge, BButton, BProgress } from 'bootstrap-vue'
 
 import useJwt from '@/auth/jwt/useJwt'
 
@@ -42,18 +57,54 @@ export default {
     BCol,
     BBadge,
     BButton,
+    BProgress,
   },
   data() {
     return {
       prizeName: "",
-      prizeList:[],
-      prizes:[],
-      index:0,
+      prizeList: [],
+      prizeList1: [],
+      prizeList2: [],
+      prizeList3: [],
+      prizes: [],
+      pageMax: 1,
+      page: 1,
+      index: 0,
+      tempPrizeName: "",
+      variant: 'danger',
+      value: 0,
+      timer: null,
     }
   },
   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)
+      }
+
+    }
+    document.body.addEventListener('keyup', this.bodyListener, false)
+
+  },
+  mounted() {
+    this.timer = setInterval(() => {
+      // eslint-disable-next-line
+      this.value += 1;
+      if(this.value >= 100){
+        this.shiftPrize(1);
+        this.value = 0;
+      }
+    }, 100)
+  },
+  beforeDestroy() {
+    clearInterval(this.timer)
+    this.timer = null
   },
   methods: {
     getPrize(activity_id) {
@@ -71,14 +122,32 @@ export default {
       useJwt.postData('/api/recipient/indexByPrize', { prize_id: prize_id }).then(response => {
         console.log(response.data);
         this.prizeList = response.data.list;
-        this.prizeName = response.data.prize[0].name;
+        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)
+        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 {
+          this.prizeName = response.data.prize[0].name;
+        }
+
       }).catch(error => {
         console.log("error: " + error);
       });
     },
-    shiftPrize(index){
-      this.index = (this.index + this.prizes.length + index) % this.prizes.length;
-      this.getPrizeList(this.prizes[this.index].id);
+    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)
+      } 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 + ' )';
+      }
     },
     isClaim(status) {
       return status == 1 ? 'success' : 'danger';
@@ -120,13 +189,13 @@ export default {
         /* IE/Edge */
         document.msExitFullscreen();
       }
-    },padEnd(string){
+    }, padEnd(string) {
       string.padEnd(6, "　");
     }
 
   },
-  computed:{
-    
+  computed: {
+
   },
 }
 </script>
@@ -141,6 +210,7 @@ export default {
   font-weight: bold;
   src: local(MS Gothic), local(Yu Gothic);
 }
+
 @font-face {
   font-family: '新微軟正黑體';
   unicode-range: U+7db0, U+78A7, U+7B75;
@@ -148,14 +218,16 @@ export default {
   font-weight: normal;
   src: local(微軟正黑體), local(Microsoft JhengHei);
 }
+
 body {
-  font-family: 'Open Sans', Verdana, Geneva,"新微軟正黑體",'Microsoft JhengHei',"微軟正黑體", sans-serif;
+  font-family: 'Open Sans', Verdana, Geneva, "新微軟正黑體", 'Microsoft JhengHei', "微軟正黑體", sans-serif;
+  background-color: #c72c2cee !important;
 }
 
 .prize-list {
-  font-size: 30px;
+  font-size: 45px;
   text-align: center;
-  margin-top: 8px;
+  margin-top: 24px;
   margin-bottom: 8px;
 }
 
@@ -167,13 +239,13 @@ body {
   width: 98%;
   background-color: #df1a1a85;
   height: 60px;
-  padding-top: 17px;
+  padding-top: 10px;
 }
 
 .title {
   background-color: #CA0000;
   width: 100%;
-  font-size: 35px;
+  font-size: 45px;
   color: white;
   font-weight: bold;
 }
@@ -199,6 +271,6 @@ body {
 }
 
 body::-webkit-scrollbar {
-    display: none;
+  display: none;
 }
 </style>

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

@@ -50,9 +50,9 @@
 			<b-card style="height:75vh;">
 				<b-table responsive hover sticky-header=true :items="getPrizeList(prizeList)" bordered :fields="fields"
 					@row-clicked="click" style="max-height: 57vh; overflow: auto;">
-					<template #cell(ICON)="data" class="text-center">
-						<div class="text-center">
-							<feather-icon :icon="data.value" />
+					<template #cell(ICON)="data">
+						<div class="text-center"> 
+							<feather-icon :icon="data.value" /> 
 						</div>
 					</template>
 				</b-table>
@@ -519,7 +519,7 @@ body {
 
 body {
 	background-color: white;
-	background-image: url('http://127.0.0.1:3000/MAA02a.jpg');
+	background-image: url('/MAA02a.jpg');
 	background-size: 100%;
 	background-repeat: no-repeat;
 	background-position: left top;