|
@@ -48,14 +48,14 @@
|
|
|
<b-modal ref="draw-animation" id="draw-animation" title="抽獎" centered no-stacking hide-footer>
|
|
<b-modal ref="draw-animation" id="draw-animation" title="抽獎" centered no-stacking hide-footer>
|
|
|
<br>
|
|
<br>
|
|
|
<div v-for="(item, index) in drawList" :class=counterId(index)>
|
|
<div v-for="(item, index) in drawList" :class=counterId(index)>
|
|
|
- <div>
|
|
|
|
|
- <i>部門</i>
|
|
|
|
|
|
|
+ <i :datafinal=item.department>部門</i>
|
|
|
|
|
+ <div :datafinal=item.userId>
|
|
|
|
|
+ <i>0</i>
|
|
|
|
|
+ <i>0</i>
|
|
|
|
|
+ <i>0</i>
|
|
|
|
|
+ <i>0</i>
|
|
|
</div>
|
|
</div>
|
|
|
- <i>0</i>
|
|
|
|
|
- <i>0</i>
|
|
|
|
|
- <i>0</i>
|
|
|
|
|
- <i>0</i>
|
|
|
|
|
- <span></span>
|
|
|
|
|
|
|
+ <span :datafinal=item.userName></span>
|
|
|
</div>
|
|
</div>
|
|
|
|
|
|
|
|
<b-button v-ripple.400="'rgba(255, 255, 255, 0.15)'" class="mt-2" variant="outline-primary" block
|
|
<b-button v-ripple.400="'rgba(255, 255, 255, 0.15)'" class="mt-2" variant="outline-primary" block
|
|
@@ -108,7 +108,8 @@ export default {
|
|
|
},
|
|
},
|
|
|
data() {
|
|
data() {
|
|
|
return {
|
|
return {
|
|
|
- activity: [],
|
|
|
|
|
|
|
+ activityId: this.$route.params.activity,
|
|
|
|
|
+ activity: {},
|
|
|
userList: [],
|
|
userList: [],
|
|
|
userIdList: [],
|
|
userIdList: [],
|
|
|
departmentList: [],
|
|
departmentList: [],
|
|
@@ -129,10 +130,11 @@ export default {
|
|
|
}
|
|
}
|
|
|
},
|
|
},
|
|
|
created() {
|
|
created() {
|
|
|
- this.activity = this.$route.params.activity;
|
|
|
|
|
- console.log(this.activity);
|
|
|
|
|
|
|
+ useJwt.postData('/api/activity/getActivity', { id: this.activityId }).then(res => {
|
|
|
|
|
+ this.activity = res.data;
|
|
|
|
|
+ });
|
|
|
|
|
|
|
|
- useJwt.postData('/api/check_in/index_by_activity', { activityId: this.activity.id }).then(res => {
|
|
|
|
|
|
|
+ useJwt.postData('/api/check_in/index_by_activity', { activityId: this.activityId }).then(res => {
|
|
|
this.userList = res.data;
|
|
this.userList = res.data;
|
|
|
});
|
|
});
|
|
|
|
|
|
|
@@ -140,11 +142,11 @@ export default {
|
|
|
this.userIdList = res.data;
|
|
this.userIdList = res.data;
|
|
|
});
|
|
});
|
|
|
|
|
|
|
|
- useJwt.postData('/api/prize/index_by_activity', { activityId: this.activity.id }).then(res => {
|
|
|
|
|
|
|
+ useJwt.postData('/api/prize/index_by_activity', { activityId: this.activityId }).then(res => {
|
|
|
this.prizeList = res.data;
|
|
this.prizeList = res.data;
|
|
|
});
|
|
});
|
|
|
|
|
|
|
|
- useJwt.postData('/api/recipients/index_by_activity', { activityId: this.activity.id }).then(res => {
|
|
|
|
|
|
|
+ useJwt.postData('/api/recipients/index_by_activity', { activityId: this.activityId }).then(res => {
|
|
|
this.recipientsList = res.data;
|
|
this.recipientsList = res.data;
|
|
|
});
|
|
});
|
|
|
|
|
|
|
@@ -153,6 +155,15 @@ export default {
|
|
|
});
|
|
});
|
|
|
},
|
|
},
|
|
|
methods: {
|
|
methods: {
|
|
|
|
|
+ dateFormat(date) {
|
|
|
|
|
+ var d = new Date(date);
|
|
|
|
|
+ return d.getFullYear()
|
|
|
|
|
+ + '/' + (d.getMonth() + 1).toString().padStart(2, '0')
|
|
|
|
|
+ + '/' + d.getDay().toString().padStart(2, '0')
|
|
|
|
|
+ + '/' + d.getHours().toString().padStart(2, '0')
|
|
|
|
|
+ + ':' + d.getMinutes().toString().padStart(2, '0')
|
|
|
|
|
+ + ':' + d.getSeconds().toString().padStart(2, '0');
|
|
|
|
|
+ },
|
|
|
getPrizeList(prizeList) {
|
|
getPrizeList(prizeList) {
|
|
|
var output = [];
|
|
var output = [];
|
|
|
prizeList.forEach(element => {
|
|
prizeList.forEach(element => {
|
|
@@ -176,78 +187,73 @@ export default {
|
|
|
});
|
|
});
|
|
|
return output;
|
|
return output;
|
|
|
},
|
|
},
|
|
|
|
|
+ counterId(id) {
|
|
|
|
|
+ return "counter_" + id;
|
|
|
|
|
+ },
|
|
|
|
|
+ showDraw() {
|
|
|
|
|
+ this.$refs['draw-modal'].show();
|
|
|
|
|
+ },
|
|
|
|
|
+ showDrawError() {
|
|
|
|
|
+ this.$refs['draw-error'].show();
|
|
|
|
|
+ },
|
|
|
|
|
+ hideModal() {
|
|
|
|
|
+ this.$refs['draw-modal'].hide();
|
|
|
|
|
+ this.$refs['draw-error'].hide();
|
|
|
|
|
+ this.$refs['draw-animation'].hide();
|
|
|
|
|
+ this.updateDataset();
|
|
|
|
|
+ },
|
|
|
|
|
+ updateDataset() {
|
|
|
|
|
+ useJwt.postData('/api/prize/index_by_activity', { activityId: this.activityId }).then(res => {
|
|
|
|
|
+ this.prizeList = res.data;
|
|
|
|
|
+ });
|
|
|
|
|
+ useJwt.postData('/api/recipients/index_by_activity', { activityId: this.activityId }).then(res => {
|
|
|
|
|
+ this.recipientsList = res.data;
|
|
|
|
|
+ });
|
|
|
|
|
+ },
|
|
|
click(params) {
|
|
click(params) {
|
|
|
this.prize = this.getPrizeName(params.id);
|
|
this.prize = this.getPrizeName(params.id);
|
|
|
this.prizeId = params.id;
|
|
this.prizeId = params.id;
|
|
|
this.drawMax = params["數量"];
|
|
this.drawMax = params["數量"];
|
|
|
this.drawNumber = 1;
|
|
this.drawNumber = 1;
|
|
|
|
|
+ this.drawList = [];
|
|
|
if (this.drawMax == 0) {
|
|
if (this.drawMax == 0) {
|
|
|
this.showDrawError();
|
|
this.showDrawError();
|
|
|
} else {
|
|
} else {
|
|
|
this.showDraw();
|
|
this.showDraw();
|
|
|
}
|
|
}
|
|
|
},
|
|
},
|
|
|
- counterId(id) {
|
|
|
|
|
- return "counter_" + id;
|
|
|
|
|
- },
|
|
|
|
|
draw() {
|
|
draw() {
|
|
|
- useJwt.postData('/api/check_in/draw_by_region', { deadline: this.activity.deadline, region: this.region, number: this.drawNumber }).then(res => {
|
|
|
|
|
- res.data.forEach(element => {
|
|
|
|
|
- this.drawList.push({ userId: element.user_id, userName: element.name, department: this.departmentList[element.department_id] });
|
|
|
|
|
- useJwt.postData('/api/prize/draw', { prizeId: this.prizeId }).then(p => {
|
|
|
|
|
- if (p.data) {
|
|
|
|
|
|
|
+ useJwt.postData('/api/draw/draw_user', { deadline: this.activity.deadline, region: this.region, number: this.drawNumber }).then(res => {
|
|
|
|
|
+ useJwt.postData('/api/prize/prizeDrawable', { prizeId: this.prizeId, number: this.drawNumber }).then(drawable => {
|
|
|
|
|
+ if (drawable) {
|
|
|
|
|
+ var userIdList=[];
|
|
|
|
|
+ res.data.forEach(element => {
|
|
|
|
|
+ this.drawList.push({ userId: element.user_id, userName: element.name, department: this.departmentList[element.department_id] });
|
|
|
|
|
+ userIdList.push(element.user_id);
|
|
|
|
|
+ });
|
|
|
|
|
+ useJwt.postData('/api/recipients/storePatch', { prizeId: this.prizeId, userIdList: userIdList }).then(r => {
|
|
|
|
|
+ console.log(r.data);
|
|
|
|
|
+ useJwt.postData('/api/prize/drawPatch', { prizeId: this.prizeId, number: this.drawNumber });
|
|
|
|
|
+ });
|
|
|
|
|
+ setTimeout(() => {
|
|
|
this.count(this.drawList);
|
|
this.count(this.drawList);
|
|
|
- useJwt.postData('/api/recipients/store', { prizeId: this.prizeId, userId: element.user_id }).then(r => {
|
|
|
|
|
- console.log(r.data);
|
|
|
|
|
- });
|
|
|
|
|
- } else {
|
|
|
|
|
- console.log(p.data);
|
|
|
|
|
- }
|
|
|
|
|
- });
|
|
|
|
|
|
|
+ });
|
|
|
|
|
+ } else {
|
|
|
|
|
+ console.log("prize is not available.");
|
|
|
|
|
+ }
|
|
|
});
|
|
});
|
|
|
});
|
|
});
|
|
|
},
|
|
},
|
|
|
- updateDataset() {
|
|
|
|
|
- useJwt.postData('/api/prize/index_by_activity', { activityId: this.activity.id }).then(res => {
|
|
|
|
|
- this.prizeList = res.data;
|
|
|
|
|
- });
|
|
|
|
|
- useJwt.postData('/api/recipients/index_by_activity', { activityId: this.activity.id }).then(res => {
|
|
|
|
|
- this.recipientsList = res.data;
|
|
|
|
|
- });
|
|
|
|
|
- },
|
|
|
|
|
- dateFormat(date) {
|
|
|
|
|
- var d = new Date(date);
|
|
|
|
|
- return d.getFullYear()
|
|
|
|
|
- + '/' + (d.getMonth() + 1).toString().padStart(2, '0')
|
|
|
|
|
- + '/' + d.getDay().toString().padStart(2, '0')
|
|
|
|
|
- + '/' + d.getHours().toString().padStart(2, '0')
|
|
|
|
|
- + ':' + d.getMinutes().toString().padStart(2, '0')
|
|
|
|
|
- + ':' + d.getSeconds().toString().padStart(2, '0');
|
|
|
|
|
- },
|
|
|
|
|
- showDraw() {
|
|
|
|
|
- this.$refs['draw-modal'].show();
|
|
|
|
|
- },
|
|
|
|
|
- showDrawError() {
|
|
|
|
|
- this.$refs['draw-error'].show();
|
|
|
|
|
- },
|
|
|
|
|
- hideModal() {
|
|
|
|
|
- this.$refs['draw-modal'].hide();
|
|
|
|
|
- this.$refs['draw-error'].hide();
|
|
|
|
|
- this.$refs['draw-animation'].hide();
|
|
|
|
|
- this.updateDataset();
|
|
|
|
|
- },
|
|
|
|
|
- count(drawUserList) {
|
|
|
|
|
|
|
+ count() {
|
|
|
var departments = this.departments;
|
|
var departments = this.departments;
|
|
|
var numbers = "0123456789"
|
|
var numbers = "0123456789"
|
|
|
var string = numbers;
|
|
var string = numbers;
|
|
|
-
|
|
|
|
|
- drawUserList.forEach((element, index) => {
|
|
|
|
|
- var deps = document.querySelectorAll(".counter_" + index + " > div > i");
|
|
|
|
|
- var allCounters = document.querySelectorAll(".counter_" + index + " > i");
|
|
|
|
|
|
|
|
|
|
- // TODO: 抽獎時間重疊
|
|
|
|
|
|
|
+ this.drawList.forEach((element, index) => {
|
|
|
|
|
+ var deps = document.querySelectorAll(".counter_" + index + " > i");
|
|
|
|
|
+ var allCounters = document.querySelectorAll(".counter_" + index + " > div > i");
|
|
|
deps.forEach(function (el) {
|
|
deps.forEach(function (el) {
|
|
|
- var duration = 2000;
|
|
|
|
|
|
|
+ var duration = 1000;
|
|
|
var interval = setInterval(function () {
|
|
var interval = setInterval(function () {
|
|
|
el.innerText = departments[Math.floor(Math.random() * departments.length)];
|
|
el.innerText = departments[Math.floor(Math.random() * departments.length)];
|
|
|
duration = duration - 50;
|
|
duration = duration - 50;
|
|
@@ -258,7 +264,7 @@ export default {
|
|
|
}, 50);
|
|
}, 50);
|
|
|
});
|
|
});
|
|
|
allCounters.forEach((el, i) => {
|
|
allCounters.forEach((el, i) => {
|
|
|
- var duration = 4000 + i * 1000;
|
|
|
|
|
|
|
+ var duration = 2000 + i * 1000;
|
|
|
var interval = setInterval(e => {
|
|
var interval = setInterval(e => {
|
|
|
el.innerText = string.charAt(Math.random() * string.length);
|
|
el.innerText = string.charAt(Math.random() * string.length);
|
|
|
duration = duration - 50;
|
|
duration = duration - 50;
|
|
@@ -273,7 +279,6 @@ export default {
|
|
|
});
|
|
});
|
|
|
});
|
|
});
|
|
|
},
|
|
},
|
|
|
-
|
|
|
|
|
},
|
|
},
|
|
|
}
|
|
}
|
|
|
</script>
|
|
</script>
|