+
+
+
![]()
+
+
+
+ {{ prizes[lastRevealedIdx].title }}
+ {{ prizes[lastRevealedIdx].text }}
+
+
+
+
+
+ {{ prizes[lastRevealedIdx].count - getLeftCount(prizes[lastRevealedIdx]) }}/{{ prizes[lastRevealedIdx].count }}
+
+
+
+
+
+
+
+
+
+
+
@@ -78,10 +166,17 @@ const props = defineProps({
const revealedCount = ref(0);
// 新增：记录最新揭秘的奖品索引
const lastRevealedIdx = ref(-1);
+
+const showOne = ref(true);
+
+
// 计算哪些奖品已揭秘
-const isRevealed = idx => idx >= (props.prizes?.length || 0) - revealedCount.value;
+const isRevealed = (idx) =>
+ idx >= (props.prizes?.length || 0) - revealedCount.value;
// 允许点击的卡片index
-const nextRevealIdx = computed(() => (props.prizes?.length || 0) - revealedCount.value - 1);
+const nextRevealIdx = computed(
+ () => (props.prizes?.length || 0) - revealedCount.value - 1
+);
// 卡片点击事件
function handleReveal(idx) {
if (idx === nextRevealIdx.value) {
@@ -111,26 +206,57 @@ const fakeWinners = ref([
]);
function openWinnerList() {
showWinnerList.value = true;
+ // 当存在最新揭秘的奖品时，点击获奖名单将showOne设置为false
+ if (lastRevealedIdx.value >= 0) {
+ showOne.value = false;
+ }
+ // 设置弹窗位置
+ nextTick(() => {
+ const btn = winnerBtnRef.value;
+ if (btn) {
+ const rect = btn.getBoundingClientRect();
+ modalLeft.value = rect.left - 23;
+ modalTop.value = rect.bottom + 18; // 4px间距
+ }
+ });
}
function closeWinnerList() {
showWinnerList.value = false;
+ // 当关闭获奖名单且showOne为false时，将其切换回true
+ if (!showOne.value) {
+ showOne.value = true;
+ }
}
-const winnerBtnRef = ref(null);
+const winnerBtnRef = ref(null);
const modalLeft = ref(0);
const modalTop = ref(0);
function toggleWinnerList() {
showWinnerList.value = !showWinnerList.value;
+ console.log('toggleWinnerList - showWinnerList:', showWinnerList.value, 'showOne:', showOne.value, 'lastRevealedIdx:', lastRevealedIdx.value);
+
if (showWinnerList.value) {
+ // 当存在最新揭秘的奖品时，点击获奖名单将showOne设置为false
+ if (lastRevealedIdx.value >= 0) {
+ showOne.value = false;
+ console.log('设置 showOne 为 false');
+ }
+ // 设置弹窗位置
nextTick(() => {
const btn = winnerBtnRef.value;
if (btn) {
const rect = btn.getBoundingClientRect();
- modalLeft.value = rect.left;
- modalTop.value = rect.bottom + 4; // 4px间距
+ modalLeft.value = rect.left - 23;
+ modalTop.value = rect.bottom + 18; // 4px间距
}
});
+ } else {
+ // 当关闭获奖名单且showOne为false时，将其切换回true
+ if (!showOne.value) {
+ showOne.value = true;
+ console.log('设置 showOne 为 true');
+ }
}
}
@@ -167,8 +293,7 @@ function getProgressPercent(prize) {
display: flex;
align-items: center;
width: 100%;
- padding: 10px 18px;
-
+ padding: 10px 18px;
}
.prize-img-wrap {
width: 64px;
@@ -261,7 +386,7 @@ function getProgressPercent(prize) {
background: rgba(255, 210, 131, 0.8);
color: #fff;
border: #fff;
- border-radius: 8px;
+ border-radius: 8px;
padding: 15px 79px;
font-size: 20px;
font-weight: bold;
@@ -274,14 +399,14 @@ function getProgressPercent(prize) {
left: 0;
width: 100vw;
height: 100vh;
- background: rgba(0,0,0,0.01);
+ background: rgba(0, 0, 0, 0.01);
z-index: 1000;
display: flex;
align-items: flex-start;
justify-content: center;
}
.winner-modal {
- background:rgba(255, 210, 131, 0.8);
+ background: rgba(255, 210, 131, 0.8);
border-radius: 12px;
padding-top: 12px;
min-width: 280px;
@@ -326,13 +451,13 @@ function getProgressPercent(prize) {
position: relative;
width: 220px;
height: 28px;
- background: #E9620E;
+ background: #e9620e;
border-radius: 16px;
overflow: hidden;
display: flex;
align-items: center;
margin: 0 auto;
- border: #E13726;
+ border: #e13726;
}
.progress-bar-fill {
position: absolute;
@@ -373,8 +498,7 @@ function getProgressPercent(prize) {
object-fit: cover;
left: 0;
top: 0;
- border-radius: 8px 8px 8px 8px;
-
+ border-radius: 8px 8px 8px 8px;
}
.prize-panel-item.revealed-highlight {
border: 3px solid #ff9800;
diff --git a/src/views/choujiang/lottery/dataManager.js b/src/views/choujiang/lottery/dataManager.js
index bce3014..6737279 100644
--- a/src/views/choujiang/lottery/dataManager.js
+++ b/src/views/choujiang/lottery/dataManager.js
@@ -28,7 +28,7 @@ export function useDataManager() {
{ type: 1, title: '一等奖', text: 'Kindle', count: 20, img: '/src/assets/lottery/kindle.jpg' },
{ type: 2, title: '二等奖', text: 'MacBook Pro', count: 10, img: '/src/assets/lottery/mbp.jpg' }
];
- const fakeEachCount = [10, 10, 10];
+ const fakeEachCount = [15, 17, 36];
const fakeCompany = '前端假公司';
const fakeLuckyData = {};
fakePrizes.forEach(prize => {
@@ -54,6 +54,44 @@ export function useDataManager() {
[16, "李十九"],
[17, "周二十"],
[18, "吴二一"],
+ [19, "郑二二"], [0, "张三"],
+ [1, "李四"],
+ [2, "王五"],
+ [3, "赵六"],
+ [4, "孙七"],
+ [5, "周八"],
+ [6, "吴九"],
+ [7, "郑十"],
+ [8, "钱十一"],
+ [9, "孙十二"],
+ [10, "李十三"],
+ [11, "周十四"],
+ [12, "吴十五"],
+ [13, "郑十六"],
+ [14, "钱十七"],
+ [15, "孙十八"],
+ [16, "李十九"],
+ [17, "周二十"],
+ [18, "吴二一"],
+ [19, "郑二二"], [0, "张三"],
+ [1, "李四"],
+ [2, "王五"],
+ [3, "赵六"],
+ [4, "孙七"],
+ [5, "周八"],
+ [6, "吴九"],
+ [7, "郑十"],
+ [8, "钱十一"],
+ [9, "孙十二"],
+ [10, "李十三"],
+ [11, "周十四"],
+ [12, "吴十五"],
+ [13, "郑十六"],
+ [14, "钱十七"],
+ [15, "孙十八"],
+ [16, "李十九"],
+ [17, "周二十"],
+ [18, "吴二一"],
[19, "郑二二"],
];
state.config.prizes = fakePrizes;
@@ -96,6 +134,44 @@ export function useDataManager() {
[16, "李十九"],
[17, "周二十"],
[18, "吴二一"],
+ [19, "郑二二"], [0, "张三"],
+ [1, "李四"],
+ [2, "王五"],
+ [3, "赵六"],
+ [4, "孙七"],
+ [5, "周八"],
+ [6, "吴九"],
+ [7, "郑十"],
+ [8, "钱十一"],
+ [9, "孙十二"],
+ [10, "李十三"],
+ [11, "周十四"],
+ [12, "吴十五"],
+ [13, "郑十六"],
+ [14, "钱十七"],
+ [15, "孙十八"],
+ [16, "李十九"],
+ [17, "周二十"],
+ [18, "吴二一"],
+ [19, "郑二二"], [0, "张三"],
+ [1, "李四"],
+ [2, "王五"],
+ [3, "赵六"],
+ [4, "孙七"],
+ [5, "周八"],
+ [6, "吴九"],
+ [7, "郑十"],
+ [8, "钱十一"],
+ [9, "孙十二"],
+ [10, "李十三"],
+ [11, "周十四"],
+ [12, "吴十五"],
+ [13, "郑十六"],
+ [14, "钱十七"],
+ [15, "孙十八"],
+ [16, "李十九"],
+ [17, "周二十"],
+ [18, "吴二一"],
[19, "郑二二"],
];
state.basicData.users = fakeUsers;
+