Browse Source

修改奖品列表逻辑

songtongtong/feature-20250717104937-众筹
Ethereal 4 weeks ago
parent
commit
9053349e7c
  1. 55
      src/views/choujiang/lottery/PrizePanel.vue

55
src/views/choujiang/lottery/PrizePanel.vue

@ -36,9 +36,6 @@
<span class="progress-bar-text"> <span class="progress-bar-text">
{{ getLeftCount(prize) }}/{{ prize.count }} {{ getLeftCount(prize) }}/{{ prize.count }}
</span> </span>
</div> </div>
</div> </div>
</div> </div>
@ -55,6 +52,7 @@
<div></div> <div></div>
<div></div> <div></div>
<div></div> <div></div>
</div>
<div class="prize-panel-footer"> <div class="prize-panel-footer">
<div class="arrow-up" @click="openWinnerList"></div> <div class="arrow-up" @click="openWinnerList"></div>
<button <button
@ -67,7 +65,6 @@
</div> </div>
</div> </div>
</div> </div>
</div>
<div v-else> <div v-else>
<div class="prize-panel-root"> <div class="prize-panel-root">
@ -111,7 +108,8 @@
prizes[lastRevealedIdx].count prizes[lastRevealedIdx].count
}} }}
</span> </span>
</div> <div class="prize-panel-footer">
</div>
<div class="prize-panel-footer">
<div class="arrow-down" @click="toggleWinnerList"></div> <div class="arrow-down" @click="toggleWinnerList"></div>
<div <div
v-if="showWinnerList" v-if="showWinnerList"
@ -163,10 +161,8 @@
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</template> </template>
@ -175,7 +171,6 @@ import { ref, computed, nextTick, watch, onMounted } from "vue";
import { useLotteryStore } from "../../../store/lottery"; import { useLotteryStore } from "../../../store/lottery";
import { useDataManager } from "../lottery/dataManager"; import { useDataManager } from "../lottery/dataManager";
const props = defineProps({ const props = defineProps({
prizes: Array, prizes: Array,
}); });
@ -242,7 +237,10 @@ function canRevealPrize(idx) {
// //
function handleReveal(idx) { function handleReveal(idx) {
// //
if (idx !== nextRevealIdx.value ) {alert("请按顺序揭秘奖品!"); return;}
if (idx !== nextRevealIdx.value) {
alert("请按顺序揭秘奖品!");
return;
}
if (idx === nextRevealIdx.value && canRevealPrize(idx)) { if (idx === nextRevealIdx.value && canRevealPrize(idx)) {
revealedCount.value++; revealedCount.value++;
lastRevealedIdx.value = idx; // lastRevealedIdx.value = idx; //
@ -279,7 +277,9 @@ console.log("fakeWinners", fakeWinners.value);
import { getGetPrizeUserListApi } from "../../../api/API"; import { getGetPrizeUserListApi } from "../../../api/API";
const updateWinners = async () => { const updateWinners = async () => {
try { try {
const response = await getGetPrizeUserListApi({})
const response = await getGetPrizeUserListApi({
});
console.log("updatePrizeList response", response); console.log("updatePrizeList response", response);
fakeWinners.value = response.data.list; fakeWinners.value = response.data.list;
console.log("updateWinners fakeWinners", fakeWinners.value); console.log("updateWinners fakeWinners", fakeWinners.value);
@ -288,7 +288,6 @@ const updateWinners = async () => {
} }
}; };
async function openWinnerList() { async function openWinnerList() {
// showWinnerList.value = true; // showWinnerList.value = true;
if (!showWinnerList.value) { if (!showWinnerList.value) {
if (revealedCount.value === 0) { if (revealedCount.value === 0) {
@ -361,23 +360,20 @@ function getProgressPercent(prize) {
// onMounted(() => { // onMounted(() => {
// updateWinners(); // updateWinners();
// }); // });
</script> </script>
<style scoped> <style scoped>
.prize-panel-list { .prize-panel-list {
position: absolute;
top: 20px;
left: 20px;
position: relative;
background: none; background: none;
z-index: 10; z-index: 10;
min-width: 320px;
min-width: 300px;
max-width: 342px; max-width: 342px;
text-align: left; text-align: left;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: 18px; gap: 18px;
height: 400px;
height: 700px;
overflow-x: hidden !important; overflow-x: hidden !important;
overflow-y: auto; overflow-y: auto;
padding-right: 10px; padding-right: 10px;
@ -385,15 +381,14 @@ function getProgressPercent(prize) {
scrollbar-color: #ffd283 rgba(255, 210, 131, 0.3); /* Firefox */ scrollbar-color: #ffd283 rgba(255, 210, 131, 0.3); /* Firefox */
} }
.prize-panel-list1 { .prize-panel-list1 {
position: absolute;
top: 20px;
left: 20px;
position: relative;
background: none; background: none;
z-index: 10; z-index: 10;
min-width: 320px; min-width: 320px;
max-width: 342px; max-width: 342px;
text-align: left; text-align: left;
display: flex;}
display: flex;
}
.prize-panel-list::-webkit-scrollbar { .prize-panel-list::-webkit-scrollbar {
width: 6px; width: 6px;
@ -503,10 +498,20 @@ function getProgressPercent(prize) {
font-size: 20px; font-size: 20px;
font-weight: bold; font-weight: bold;
} }
.prize-panel-root {
position: absolute;
top: 20px;
left: 20px;
background: none;
z-index: 10;
min-width: 320px;
max-width: 342px;
display: flex;
flex-direction: column;
}
.prize-panel-footer { .prize-panel-footer {
position: fixed;
right: 750px;
bottom: 435px;
position: relative;
width: 100%; width: 100%;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
@ -514,6 +519,7 @@ function getProgressPercent(prize) {
z-index: 20; z-index: 20;
padding: 10px 0; padding: 10px 0;
border-radius: 0 0 6px 6px; border-radius: 0 0 6px 6px;
margin-top: 10px;
} }
.arrow-up { .arrow-up {
position: relative; position: relative;
@ -537,7 +543,6 @@ function getProgressPercent(prize) {
background-image: url("../../../assets/展开.png"); background-image: url("../../../assets/展开.png");
background-size: cover; background-size: cover;
background-position: center; background-position: center;
} }
.winner-btn { .winner-btn {
background: rgba(255, 210, 131, 0.8); background: rgba(255, 210, 131, 0.8);

Loading…
Cancel
Save