Browse Source

Merge branch 'milestone-20250723-众筹' into zhangjiahao/feature-20250717125955-众筹

zhangjiahao/feature-20250717125955-众筹
zhangjiahao 4 weeks ago
parent
commit
58fb933b5e
  1. 112
      src/views/choujiang/hxl-cj/cj.vue
  2. 23
      src/views/choujiang/index.vue
  3. 2
      src/views/choujiang/lottery/CardItem.vue
  4. 2
      src/views/choujiang/lottery/Lottery3D.vue
  5. 2
      src/views/choujiang/lottery/PrizePanel.vue

112
src/views/choujiang/hxl-cj/cj.vue

@ -11,12 +11,20 @@
<div class="leftBar">
<el-scrollbar id="prizeBar">
<ul class="prize-list">
<li v-for="item in prizes" :key="item.type" :id="`prize-item-${item.type}`" :class="['prize-item']"
@click="lookPrize(item)">
<div v-if="item.isLook" style="display: flex; width: 100%; height: 100%">
<li
v-for="item in prizes"
:key="item.type"
:id="`prize-item-${item.type}`"
:class="['prize-item']"
@click="lookPrize(item)"
>
<div
v-if="item.isLook"
style="display: flex; width: 100%; height: 100%"
>
<span></span><span></span><span></span><span></span>
<div class="prize-img">
<img :src="item.img" :alt="item.title" />
<img :src="item.imageUrl" :alt="item.title" />
</div>
<div class="prize-text">
<div class="prize-title">
@ -27,17 +35,27 @@
</div>
<div class="prize-count">
<div class="progress">
<div :id="`prize-bar-${item.type}`"
class="progress-bar progress-bar-danger progress-bar-striped active" style="width: 100%"></div>
<div
:id="`prize-bar-${item.type}`"
class="progress-bar progress-bar-danger progress-bar-striped active"
style="width: 100%"
></div>
</div>
<div :id="`prize-count-${item.type}`" class="prize-count-left">
<div
:id="`prize-count-${item.type}`"
class="prize-count-left"
>
{{ item.leftCount }}/{{ item.count }}
</div>
</div>
</div>
</div>
<div v-else style="display: flex; width: 100%; height: 100%">
<img src="../../../assets/img/待揭秘.png" alt="待揭秘" class="readyLook" />
<img
src="../../../assets/img/待揭秘.png"
alt="待揭秘"
class="readyLook"
/>
</div>
</li>
</ul>
@ -50,7 +68,12 @@
</div>
<div v-else>
<div class="dgetPrizeName">
<img src="../../../assets/img/展开.png" alt="展开" class="close" @click="closeGetPrize()" />
<img
src="../../../assets/img/展开.png"
alt="展开"
class="close"
@click="closeGetPrize()"
/>
<div class="tableHead">
<div class="tableHead1">HomilyID</div>
<div class="tableHead2">奖项</div>
@ -265,6 +288,7 @@ const lookPrize = async (item) => {
item.isLook = true;
} else if (
!isLotting && //
currentPrize.value.isLook &&
currentPrize.value.leftCount == 0 && //
prizes.value[currentPrizeIndex - 1] == item //
) {
@ -354,7 +378,7 @@ const initAll = async () => {
prizes.value = prizeList.data;
//
users.value = userList.data;
prizes.value.forEach((item, index) => {
prizes.value.forEach((item, index) => {
item.type = index;
item.count = item.amount;
item.leftCount = item.remainNum; //
@ -1651,7 +1675,6 @@ a {
}
@keyframes bounce1 {
0%,
100% {
transform: rotate(180deg) translateY(0);
@ -1663,7 +1686,6 @@ a {
}
@keyframes bounce2 {
0%,
100% {
transform: translateY(0);
@ -1699,11 +1721,13 @@ a {
width: 90%;
height: 3px;
border-radius: 150%;
background: linear-gradient(to right,
transparent 0%,
#d5291f 45%,
#d5291f 55%,
transparent 100%);
background: linear-gradient(
to right,
transparent 0%,
#d5291f 45%,
#d5291f 55%,
transparent 100%
);
position: absolute;
bottom: -10px;
}
@ -1841,30 +1865,36 @@ a {
}
.progress-bar-striped {
background-image: -webkit-linear-gradient(45deg,
rgba(255, 255, 255, 0.15) 25%,
transparent 25%,
transparent 50%,
rgba(255, 255, 255, 0.15) 50%,
rgba(255, 255, 255, 0.15) 75%,
transparent 75%,
transparent);
background-image: -o-linear-gradient(45deg,
rgba(255, 255, 255, 0.15) 25%,
transparent 25%,
transparent 50%,
rgba(255, 255, 255, 0.15) 50%,
rgba(255, 255, 255, 0.15) 75%,
transparent 75%,
transparent);
background-image: linear-gradient(45deg,
rgba(255, 255, 255, 0.15) 25%,
transparent 25%,
transparent 50%,
rgba(255, 255, 255, 0.15) 50%,
rgba(255, 255, 255, 0.15) 75%,
transparent 75%,
transparent);
background-image: -webkit-linear-gradient(
45deg,
rgba(255, 255, 255, 0.15) 25%,
transparent 25%,
transparent 50%,
rgba(255, 255, 255, 0.15) 50%,
rgba(255, 255, 255, 0.15) 75%,
transparent 75%,
transparent
);
background-image: -o-linear-gradient(
45deg,
rgba(255, 255, 255, 0.15) 25%,
transparent 25%,
transparent 50%,
rgba(255, 255, 255, 0.15) 50%,
rgba(255, 255, 255, 0.15) 75%,
transparent 75%,
transparent
);
background-image: linear-gradient(
45deg,
rgba(255, 255, 255, 0.15) 25%,
transparent 25%,
transparent 50%,
rgba(255, 255, 255, 0.15) 50%,
rgba(255, 255, 255, 0.15) 75%,
transparent 75%,
transparent
);
-webkit-background-size: 8px 8px;
background-size: 8px 8px;
}

23
src/views/choujiang/index.vue

@ -25,6 +25,12 @@
</div>
</div>
<div v-if="showPrizeExhaustedModal2" class="prize-exhausted-modal">
<div class="modal-content">
<p class="modal-text">该礼品已抽取完毕</p>
</div>
</div>
<!-- <UserList
:lucky-users="
dataManager.state.basicData.luckyUsers[
@ -56,6 +62,7 @@ const qipaoText = ref("");
const showQipao = ref(false);
const showPrizeExhaustedModal = ref(false);
const showPrizeExhaustedModal1 = ref(false);
const showPrizeExhaustedModal2 = ref(false);
// const lotteryState = ref('idle'); // idle, ready, rotating, result
@ -161,7 +168,7 @@ async function handleLotteryClick() {
break;
case "ready":
if (waitingForNextReveal.value || lastRevealed.value === 0) {
if (waitingForNextReveal.value) {
console.log("waitingForNextReveal.value", waitingForNextReveal.value);
//
showPrizeExhaustedModal.value = true;
@ -184,6 +191,20 @@ async function handleLotteryClick() {
break;
}
if (lastRevealed.value === 0 && dataManager.state.basicData.prizes[lastRevealed.value].remainNum === 0) {
// 0
// const currentPrize = dataManager.state.basicData.prizes[lastRevealed.value];
// if (currentPrize && currentPrize.remainNum === 0) {
showPrizeExhaustedModal2.value = true;
setTimeout(() => {
showPrizeExhaustedModal2.value = false;
}, 1000);
isDisabled.value = false;
break;
// }
}
console.log("lotteryState 变更前:", lotteryState.value, "-> rotating");
lotteryState.value = "rotating";
console.log("lotteryState 变更后:", lotteryState.value);

2
src/views/choujiang/lottery/CardItem.vue

@ -173,7 +173,7 @@ onBeforeUnmount(() => {
/* ... */
}
.details {
font-size: 26px;
font-size: 24px;
color: white;
text-align: center;
display: flex;

2
src/views/choujiang/lottery/Lottery3D.vue

@ -571,7 +571,7 @@ function changeCard(cardIndex, user) {
const username = user.username || user[1] || "";
const company = user.company || user[2] || "PSST";
card.innerHTML = `<div style="font-size: 30px; font-weight: bold; color: #ffffff; text-align: center; display: flex; justify-content: center; align-items: center; width: 100%; height: 100%;">${jwcode}</div>`;
card.innerHTML = `<div style="font-size: 20px; font-weight: bold; color: #ffffff; text-align: center; display: flex; justify-content: center; align-items: center; width: 100%; height: 100%;">${jwcode}</div>`;
//
card.classList.add("prize");

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

@ -400,7 +400,7 @@ onMounted(() => {
gap: 18px;
max-height: 700px;
overflow-x: hidden !important;
overflow-y: auto;
/* overflow-y: auto; */
padding-right: 10px;
padding-left: 10px;
scrollbar-width: thin;

Loading…
Cancel
Save