|
|
|
@ -1,6 +1,9 @@ |
|
|
|
<template> |
|
|
|
<div v-if="showOne"> |
|
|
|
<div class="prize-panel-root"> |
|
|
|
<div v-if="showNotification" class="auto-hide-notification"> |
|
|
|
{{ notificationMessage }} |
|
|
|
</div> |
|
|
|
<div class="prize-panel-list" v-if="prizes && prizes.length"> |
|
|
|
<div |
|
|
|
class="prize-panel-item" |
|
|
|
@ -48,18 +51,11 @@ |
|
|
|
/> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<div></div> |
|
|
|
<div></div> |
|
|
|
<div></div> |
|
|
|
<div></div> |
|
|
|
|
|
|
|
</div> |
|
|
|
<div class="prize-panel-footer"> |
|
|
|
<div class="arrow-up" @click="openWinnerList"></div> |
|
|
|
<button |
|
|
|
ref="winnerBtnRef" |
|
|
|
class="winner-btn" |
|
|
|
@click="toggleWinnerList" |
|
|
|
> |
|
|
|
<button ref="winnerBtnRef" class="winner-btn" @click="openWinnerList"> |
|
|
|
获奖名单 |
|
|
|
</button> |
|
|
|
</div> |
|
|
|
@ -171,6 +167,17 @@ import { ref, computed, nextTick, watch, onMounted } from "vue"; |
|
|
|
import { useLotteryStore } from "../../../store/lottery"; |
|
|
|
import { useDataManager } from "../lottery/dataManager"; |
|
|
|
|
|
|
|
const showNotification = ref(false); |
|
|
|
const notificationMessage = ref(''); |
|
|
|
|
|
|
|
// 显示提示并自动消失 |
|
|
|
const showAutoHideNotification = (message, duration = 1500) => { |
|
|
|
notificationMessage.value = message; |
|
|
|
showNotification.value = true; |
|
|
|
setTimeout(() => { |
|
|
|
showNotification.value = false; |
|
|
|
}, duration); |
|
|
|
}; |
|
|
|
const props = defineProps({ |
|
|
|
prizes: Array, |
|
|
|
}); |
|
|
|
@ -237,8 +244,10 @@ function canRevealPrize(idx) { |
|
|
|
// 卡片点击事件 |
|
|
|
function handleReveal(idx) { |
|
|
|
// 检查是否可以揭秘这个奖品 |
|
|
|
if (idx !== nextRevealIdx.value) { |
|
|
|
alert("请按顺序揭秘奖品!"); |
|
|
|
if (idx !== nextRevealIdx.value && !isRevealed(idx)) { |
|
|
|
// alert("请按顺序揭秘奖品!"); |
|
|
|
showAutoHideNotification("请按顺序揭秘奖品!"); |
|
|
|
|
|
|
|
return; |
|
|
|
} |
|
|
|
if (idx === nextRevealIdx.value && canRevealPrize(idx)) { |
|
|
|
@ -278,7 +287,8 @@ import { getGetPrizeUserListApi } from "../../../api/API"; |
|
|
|
const updateWinners = async () => { |
|
|
|
try { |
|
|
|
const response = await getGetPrizeUserListApi({ |
|
|
|
|
|
|
|
pageSize: 1000, |
|
|
|
pageNum: 1, |
|
|
|
}); |
|
|
|
console.log("updatePrizeList response", response); |
|
|
|
fakeWinners.value = response.data.list; |
|
|
|
@ -291,7 +301,10 @@ async function openWinnerList() { |
|
|
|
// showWinnerList.value = true; |
|
|
|
if (!showWinnerList.value) { |
|
|
|
if (revealedCount.value === 0) { |
|
|
|
alert("请先揭晓奖品,并抽奖！"); |
|
|
|
// alert("请先揭晓奖品,并抽奖！"); |
|
|
|
showAutoHideNotification("请先揭晓奖品,并抽奖！"); |
|
|
|
|
|
|
|
|
|
|
|
} |
|
|
|
// await updatePrizeList(); |
|
|
|
} |
|
|
|
@ -319,6 +332,7 @@ async function toggleWinnerList() { |
|
|
|
await updateWinners(); |
|
|
|
|
|
|
|
showWinnerList.value = !showWinnerList.value; |
|
|
|
|
|
|
|
console.log( |
|
|
|
"toggleWinnerList - showWinnerList:", |
|
|
|
showWinnerList.value, |
|
|
|
@ -329,7 +343,8 @@ async function toggleWinnerList() { |
|
|
|
); |
|
|
|
if (!showWinnerList.value) { |
|
|
|
if (revealedCount.value === 0) { |
|
|
|
alert("请先揭晓奖品,并抽奖！"); |
|
|
|
// alert("请先揭晓奖品,并抽奖！"); |
|
|
|
showAutoHideNotification("请先揭晓奖品,并抽奖！"); |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
@ -357,26 +372,37 @@ function getProgressPercent(prize) { |
|
|
|
return Math.round((left / total) * 100); |
|
|
|
} |
|
|
|
|
|
|
|
// onMounted(() => { |
|
|
|
// updateWinners(); |
|
|
|
// }); |
|
|
|
onMounted(() => { |
|
|
|
updateWinners(); |
|
|
|
}); |
|
|
|
</script> |
|
|
|
|
|
|
|
<style scoped> |
|
|
|
.auto-hide-notification { |
|
|
|
position: fixed; |
|
|
|
top: 300px; |
|
|
|
left: 50%; |
|
|
|
transform: translateX(-50%); |
|
|
|
color: #e61414; |
|
|
|
padding: 8px 16px; |
|
|
|
border-radius: 4px; |
|
|
|
font-size: 50px; |
|
|
|
z-index: 1000;} |
|
|
|
.prize-panel-list { |
|
|
|
position: relative; |
|
|
|
background: none; |
|
|
|
z-index: 10; |
|
|
|
min-width: 300px; |
|
|
|
max-width: 342px; |
|
|
|
max-width: 362px; |
|
|
|
text-align: left; |
|
|
|
display: flex; |
|
|
|
flex-direction: column; |
|
|
|
gap: 18px; |
|
|
|
height: 700px; |
|
|
|
max-height: 700px; |
|
|
|
overflow-x: hidden !important; |
|
|
|
overflow-y: auto; |
|
|
|
padding-right: 10px; |
|
|
|
padding-left: 10px; |
|
|
|
scrollbar-width: thin; |
|
|
|
scrollbar-color: #ffd283 rgba(255, 210, 131, 0.3); /* Firefox */ |
|
|
|
} |
|
|
|
@ -386,6 +412,8 @@ function getProgressPercent(prize) { |
|
|
|
z-index: 10; |
|
|
|
min-width: 320px; |
|
|
|
max-width: 342px; |
|
|
|
padding-right: 10px; |
|
|
|
padding-left: 10px; |
|
|
|
text-align: left; |
|
|
|
display: flex; |
|
|
|
} |
|
|
|
@ -464,17 +492,10 @@ function getProgressPercent(prize) { |
|
|
|
color: #d84315; |
|
|
|
font-weight: 500; |
|
|
|
} |
|
|
|
/* .prize-row-bottom { |
|
|
|
background: linear-gradient(90deg, #ff9800 0%, #ff5722 100%); |
|
|
|
background: #8a3500; |
|
|
|
border-radius: 16px; |
|
|
|
color: #fff; |
|
|
|
font-size: 20px; |
|
|
|
font-weight: bold; |
|
|
|
padding: 2px 0 2px 0; |
|
|
|
justify-content: center; |
|
|
|
min-width: 80px; |
|
|
|
} */ |
|
|
|
.prize-row-bottom { |
|
|
|
/* margin-bottom: 8px; */ |
|
|
|
/* border: 1px solid #ea2b0a; */ |
|
|
|
} |
|
|
|
.custom-arrow-icon { |
|
|
|
font-size: 24px; /* 图标大小 */ |
|
|
|
color: #d84315; /* 图标颜色，使用项目主题橙色 */ |
|
|
|
@ -505,14 +526,14 @@ function getProgressPercent(prize) { |
|
|
|
background: none; |
|
|
|
z-index: 10; |
|
|
|
min-width: 320px; |
|
|
|
max-width: 342px; |
|
|
|
max-width: 362px; |
|
|
|
display: flex; |
|
|
|
flex-direction: column; |
|
|
|
} |
|
|
|
|
|
|
|
.prize-panel-footer { |
|
|
|
position: relative; |
|
|
|
width: 100%; |
|
|
|
/* width: 100%; */ |
|
|
|
display: flex; |
|
|
|
flex-direction: column; |
|
|
|
align-items: center; |
|
|
|
@ -554,6 +575,7 @@ function getProgressPercent(prize) { |
|
|
|
font-weight: bold; |
|
|
|
cursor: pointer; |
|
|
|
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08); |
|
|
|
outline: none; |
|
|
|
} |
|
|
|
.winner-modal-mask { |
|
|
|
position: fixed; |
|
|
|
@ -628,8 +650,8 @@ function getProgressPercent(prize) { |
|
|
|
} |
|
|
|
.progress-bar-bg { |
|
|
|
position: relative; |
|
|
|
width: 220px; |
|
|
|
height: 28px; |
|
|
|
width: 228px; |
|
|
|
height: 30px; |
|
|
|
background: #e9620e; |
|
|
|
border-radius: 16px; |
|
|
|
overflow: hidden; |
|
|
|
@ -642,6 +664,7 @@ function getProgressPercent(prize) { |
|
|
|
position: absolute; |
|
|
|
left: 0; |
|
|
|
top: 0; |
|
|
|
/* width: 100%; */ |
|
|
|
height: 100%; |
|
|
|
/* background: linear-gradient(90deg, #ff9800 0%, #8a3500 100%); */ |
|
|
|
background: #8a3500; |
|
|
|
@ -682,9 +705,14 @@ function getProgressPercent(prize) { |
|
|
|
.prize-panel-item.revealed-highlight { |
|
|
|
/* border: 3px solid #ff9800; */ |
|
|
|
box-shadow: 0 0 16px 4px #ff9800aa; |
|
|
|
transform: scale(1.05); |
|
|
|
transform: scale(1.03); |
|
|
|
z-index: 2; |
|
|
|
transition: all 0.3s; |
|
|
|
/* 确保放大的元素不被遮挡 */ |
|
|
|
position: relative; |
|
|
|
/* margin: 8px 0; */ |
|
|
|
/* 为放大的元素留出空间 */ |
|
|
|
transform-origin: center center; |
|
|
|
} |
|
|
|
|
|
|
|
.prize-panel-item.disabled { |
|
|
|
|
宋杰
4 weeks ago