|
|
@@ -0,0 +1,163 @@
|
|
|
+<template>
|
|
|
+ <div>
|
|
|
+ <b-row class="prize-list-wrapper">
|
|
|
+ <b-col md="6">
|
|
|
+ <b-card title="獎項列表">
|
|
|
+ <b-card-text>所有獎項,點擊獎項以抽取</b-card-text>
|
|
|
+ <b-table responsive hover :items="getPrizeList(prizeList)" bordered :fields="fields" @row-clicked="click"
|
|
|
+ v-b-modal.modal-draw-error>
|
|
|
+ <template #cell(ICON)="data" class="text-center">
|
|
|
+ <div class="text-center">
|
|
|
+ <feather-icon :icon="data.value" />
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ </b-table>
|
|
|
+ </b-card>
|
|
|
+ </b-col>
|
|
|
+ <b-modal id="modal-center" centered title="抽獎" cancel-variant="outline-secondary" cancel-title="Close"
|
|
|
+ ok-title="Accept" @ok="test">
|
|
|
+ <label>獎品:</label>
|
|
|
+ <b-form-input v-model="prize" :disabled=true />
|
|
|
+ <br>
|
|
|
+ <label>地區: </label>
|
|
|
+ <v-select multiple v-model="placeSelected" :options="placeOption" />
|
|
|
+ <br>
|
|
|
+ <label>數量: </label>
|
|
|
+ <b-form-spinbutton v-model="drawNumber" min="1" :max=drawMax />
|
|
|
+ </b-modal>
|
|
|
+
|
|
|
+ <b-modal id="modal-draw-error" centered title="抽獎" ok-title="Close">
|
|
|
+ <label>獎品數量以抽完</label>
|
|
|
+ </b-modal>
|
|
|
+
|
|
|
+ <b-col md="6">
|
|
|
+ <b-card title="抽獎紀錄">
|
|
|
+ <b-table responsive :items="getRecipientsList(recipientsList)" bordered>
|
|
|
+ <template #cell(ICON)="data" class="text-center">
|
|
|
+ <div class="text-center">
|
|
|
+ <feather-icon :icon="data.value" />
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ </b-table>
|
|
|
+ </b-card>
|
|
|
+ </b-col>
|
|
|
+ </b-row>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+import { BRow, BCol, BCard, BCardText, BLink, BTable, BModal, BFormInput, BFormSpinbutton } from 'bootstrap-vue'
|
|
|
+import useJwt from '@/auth/jwt/useJwt'
|
|
|
+import { VueGoodTable } from 'vue-good-table'
|
|
|
+import vSelect from 'vue-select'
|
|
|
+import 'vue-select/dist/vue-select.css';
|
|
|
+
|
|
|
+export default {
|
|
|
+ components: {
|
|
|
+ BRow,
|
|
|
+ BCol,
|
|
|
+ BCard,
|
|
|
+ BCardText,
|
|
|
+ BLink,
|
|
|
+ BTable,
|
|
|
+ BModal,
|
|
|
+ BFormInput,
|
|
|
+ BFormSpinbutton,
|
|
|
+ VueGoodTable,
|
|
|
+ vSelect,
|
|
|
+ },
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ userList: [],
|
|
|
+ prizeList: [],
|
|
|
+ recipientsList: [],
|
|
|
+
|
|
|
+ fields: ['獎項', '數量'],
|
|
|
+ placeOption: ['北區', '中區', '南區', '來賓'],
|
|
|
+ placeSelected: ['北區', '中區', '南區', '來賓'],
|
|
|
+ drawMax: 1,
|
|
|
+ drawNumber: 1,
|
|
|
+
|
|
|
+ prize: '',
|
|
|
+ prizeId: '',
|
|
|
+ drawUsers: [],
|
|
|
+ }
|
|
|
+ },
|
|
|
+ created() {
|
|
|
+ useJwt.postData('/api/user/index').then(res => {
|
|
|
+ this.userList = res.data;
|
|
|
+ });
|
|
|
+
|
|
|
+ useJwt.postData('/api/prize/index').then(res => {
|
|
|
+ this.prizeList = res.data;
|
|
|
+ });
|
|
|
+
|
|
|
+ useJwt.postData('/api/recipients/index').then(res => {
|
|
|
+ this.recipientsList = res.data;
|
|
|
+ });
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ getPrizeList(prizeList) {
|
|
|
+ var output = [];
|
|
|
+ prizeList.forEach(element => {
|
|
|
+ output.push({ id: element.id, '獎項': element.name, '數量': element.count });
|
|
|
+ });
|
|
|
+ return output;
|
|
|
+ },
|
|
|
+ getPrizeName(prizeId) {
|
|
|
+ var output = '';
|
|
|
+ this.prizeList.forEach(element => {
|
|
|
+ if (prizeId == element.id) {
|
|
|
+ output = element.name;
|
|
|
+ }
|
|
|
+ });
|
|
|
+ return output;
|
|
|
+ },
|
|
|
+ getRecipientsList(recipientsList) {
|
|
|
+ var output = [];
|
|
|
+ recipientsList.forEach(element => {
|
|
|
+ output.push({ '獎項': this.getPrizeName(element.prize_id), '獲獎人': this.userList[element.user_id], '時間': element.created_at });
|
|
|
+ });
|
|
|
+ return output;
|
|
|
+ },
|
|
|
+ click(params) {
|
|
|
+ this.prize = this.getPrizeName(params.id);
|
|
|
+ this.prizeId = params.id;
|
|
|
+ this.drawMax = params["數量"];
|
|
|
+ this.drawNumber = 1;
|
|
|
+ },
|
|
|
+ draw() {
|
|
|
+ useJwt.postData('/api/check_in/drawP', { number: this.drawNumber, region: this.placeSelected }).then(res => {
|
|
|
+ res.data.forEach(element => {
|
|
|
+ console.log(element);
|
|
|
+ useJwt.postData('/api/prize/draw', { prizeId: this.prizeId }).then(p => {
|
|
|
+ if (p.data) {
|
|
|
+ useJwt.postData('/api/recipients/store', { prizeId: this.prizeId, userId: element.user_id }).then(r => {
|
|
|
+ console.log(r.data);
|
|
|
+ this.updateDataset();
|
|
|
+ });
|
|
|
+ } else {
|
|
|
+ console.log(p.data);
|
|
|
+ }
|
|
|
+ });
|
|
|
+ });
|
|
|
+ });
|
|
|
+ },
|
|
|
+ updateDataset() {
|
|
|
+ useJwt.postData('/api/prize/index').then(res => {
|
|
|
+ this.prizeList = res.data;
|
|
|
+ });
|
|
|
+ useJwt.postData('/api/recipients/index').then(res => {
|
|
|
+ this.recipientsList = res.data;
|
|
|
+ });
|
|
|
+ },
|
|
|
+ test() {
|
|
|
+ console.log(this.placeSelected);
|
|
|
+ },
|
|
|
+ },
|
|
|
+}
|
|
|
+</script>
|
|
|
+
|
|
|
+<style lang="scss">
|
|
|
+@import '~@resources/scss/vue/libs/vue-select.scss';
|
|
|
+</style>
|