From 480063a3dc4957fc5de1174953e86f277f5bafab Mon Sep 17 00:00:00 2001
From: peng <peng.com>
Date: 星期四, 04 九月 2025 10:47:53 +0800
Subject: [PATCH] 抽奖页面调整
---
pages/prize/PrizeDetail/PrizeDetail.vue | 651 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++-
1 files changed, 638 insertions(+), 13 deletions(-)
diff --git a/pages/prize/PrizeDetail/PrizeDetail.vue b/pages/prize/PrizeDetail/PrizeDetail.vue
index de8af2d..23aeac0 100644
--- a/pages/prize/PrizeDetail/PrizeDetail.vue
+++ b/pages/prize/PrizeDetail/PrizeDetail.vue
@@ -1,5 +1,12 @@
<template>
- <view class="layout">
+ <view class="layout" >
+ <!-- 绀肩洅闆ㄨ楗板厓绱� -->
+ <view class="giftboxes-container">
+ <view class="giftbox" v-for="n in 15" :key="n" :class="'giftbox-' + n">
+ <text class="giftbox-icon">馃巵</text>
+ </view>
+ </view>
+
<!-- 鑾峰彇鏇村鏈轰細鎸夐挳 - 鍙充笂瑙掓偓娴� -->
<view class="floating-more-btn" @tap="showMoreChances">
<text class="floating-btn-icon">馃巵</text>
@@ -18,7 +25,7 @@
<view class="prize-section">
<view class="section-title">濂栧搧姹�</view>
<view class="prize-grid">
- <view class="prize-item" v-for="(prize, index) in prizeList" :key="prize.id">
+ <view class="prize-item" v-for="(prize, index) in prizeDraws" :key="prize.id">
<image :src="prize.img" class="prize-img" />
<text class="prize-name">{{ prize.name }}</text>
</view>
@@ -139,6 +146,7 @@
originalWinners: [],
// 濂栧搧鍒楄〃锛�
prizeList: [],
+ prizeDraws: [],
// 鍒嗕韩鏈嬪弸鍦堝皾璇曟爣璁�
shareTimelineAttempt: false,
activityCover:'',
@@ -166,10 +174,11 @@
img: item.prizeImg
}
})
+ this.prizeDraws = this.prizeList;
this.prizeList = [...this.prizeList]
this.prizeList.push({
id: 'notWIn',
- name: "璋㈣阿鍙備笌"
+ name: "鍐嶆潵涓�娆�"
})
await this.getUnmber(this.activityId)
await this.getGrantRecord(this.activityId)
@@ -205,6 +214,23 @@
console.log('鍒嗕韩澶辫触',e)
}
}
+ },
+ /**
+ * 绔嬪嵆浣跨敤浼樻儬鍒�
+ */
+ useItNow(item) {
+
+ console.log('浼樻儬鍗疯鎯�--------------------->',JSON.stringify(item))
+ // uni.navigateTo({
+ // url: `/pages/navigation/search/searchPage?promotionsId=${item.couponId}&promotionType=COUPON`,
+ // });
+ if(item.scopeType ==='PORTION_GOODS'){
+ //鑾峰彇浼樻儬鍗峰搴旂殑鍟嗗搧
+ //鎸囧畾璺宠浆鍒板晢鍝佽鎯呴〉闈㈣繘琛岃喘涔�
+ }
+ uni.navigateTo({
+ url: `/pages/commodity-square/coups-goods-list?promotionsId=${item.couponId}&promotionType=COUPON`
+ });
},
beforeDestroy() {
this.stopAutoScroll()
@@ -375,15 +401,604 @@
}
</script>
<style scoped>
+ @import url(@/pages/prize/PrizeDetail/prizeBg.css);
.layout {
- width: 100%;
+ width: 750rpx;
min-height: 100vh;
display: flex;
flex-direction: column;
justify-content: flex-start;
align-items: center;
- background: #f5f5f5;
padding: 20rpx;
+ position: relative;
+ overflow: hidden;
+ /* 纭繚鑳屾櫙鏄剧ず */
+ background-attachment: fixed;
+ z-index: 1;
+ background-image: var(--prize-bg);
+ }
+
+ /* 绀肩洅闆ㄨ儗鏅楗� */
+ .layout::before {
+ content: '';
+ position: absolute;
+ top: -50%;
+ left: -50%;
+ width: 200%;
+ height: 200%;
+ background: radial-gradient(circle, rgba(255, 255, 255, 0.1) 0%, transparent 70%);
+ animation: background-float 8s ease-in-out infinite alternate;
+ pointer-events: none;
+ z-index: 2;
+ }
+
+ /* 绀肩洅鍔ㄧ敾瀹瑰櫒 */
+ .layout::after {
+ content: '';
+ position: absolute;
+ top: 0;
+ left: 0;
+ width: 100%;
+ height: 100%;
+ background-image:
+ /* 绀肩洅1 */
+ radial-gradient(ellipse 12rpx 15rpx at 10% -50%, #4834d4 0%, #4834d4 40%, transparent 41%),
+ /* 绀肩洅2 */
+ radial-gradient(ellipse 10rpx 13rpx at 85% -60%, #eb4d4b 0%, #eb4d4b 40%, transparent 41%),
+ /* 绀肩洅3 */
+ radial-gradient(ellipse 14rpx 16rpx at 25% -45%, #6ab04c 0%, #6ab04c 40%, transparent 41%),
+ /* 绀肩洅4 */
+ radial-gradient(ellipse 11rpx 14rpx at 70% -55%, #f0932b 0%, #f0932b 40%, transparent 41%),
+ /* 绀肩洅5 */
+ radial-gradient(ellipse 13rpx 15rpx at 40% -70%, #e056fd 0%, #e056fd 40%, transparent 41%),
+ /* 绀肩洅6 */
+ radial-gradient(ellipse 9rpx 12rpx at 90% -40%, #30336b 0%, #30336b 40%, transparent 41%),
+ /* 绀肩洅7 */
+ radial-gradient(ellipse 15rpx 17rpx at 15% -80%, #fd79a8 0%, #fd79a8 40%, transparent 41%),
+ /* 绀肩洅8 */
+ radial-gradient(ellipse 12rpx 14rpx at 60% -65%, #0abde3 0%, #0abde3 40%, transparent 41%),
+ /* 绀肩洅9 */
+ radial-gradient(ellipse 10rpx 13rpx at 5% -55%, #ff6348 0%, #ff6348 40%, transparent 41%),
+ /* 绀肩洅10 */
+ radial-gradient(ellipse 13rpx 16rpx at 95% -75%, #2ed573 0%, #2ed573 40%, transparent 41%),
+ /* 绀肩洅11 */
+ radial-gradient(ellipse 11rpx 15rpx at 30% -50%, #ffa502 0%, #ffa502 40%, transparent 41%),
+ /* 绀肩洅12 */
+ radial-gradient(ellipse 14rpx 17rpx at 75% -85%, #ff4757 0%, #ff4757 40%, transparent 41%),
+ /* 绀肩洅13 */
+ radial-gradient(ellipse 9rpx 12rpx at 8% -45%, #3742fa 0%, #3742fa 40%, transparent 41%),
+ /* 绀肩洅14 */
+ radial-gradient(ellipse 12rpx 15rpx at 55% -60%, #2f3542 0%, #2f3542 40%, transparent 41%),
+ /* 绀肩洅15 */
+ radial-gradient(ellipse 13rpx 14rpx at 88% -50%, #ff3838 0%, #ff3838 40%, transparent 41%);
+ animation: giftbox-rain 6s linear infinite;
+ pointer-events: none;
+ z-index: 3;
+ opacity: 0.8;
+ }
+
+ @keyframes background-float {
+ 0% {
+ transform: translate(-10%, -10%) rotate(0deg);
+ }
+ 100% {
+ transform: translate(10%, 10%) rotate(180deg);
+ }
+ }
+
+ /* 绀肩洅闆ㄥ姩鐢� */
+ @keyframes giftbox-rain {
+ 0% {
+ transform: translateY(-100vh) rotate(0deg);
+ opacity: 0;
+ }
+ 10% {
+ opacity: 1;
+ }
+ 90% {
+ opacity: 1;
+ }
+ 100% {
+ transform: translateY(100vh) rotate(360deg);
+ opacity: 0;
+ }
+ }
+
+ /* 绀肩洅瀹瑰櫒 */
+ .giftboxes-container {
+ position: absolute;
+ top: 0;
+ left: 0;
+ width: 100%;
+ height: 100%;
+ pointer-events: none;
+ z-index: 999;
+ overflow: hidden;
+ }
+
+ /* 绀肩洅鍏冪礌 */
+ .giftbox {
+ position: absolute;
+ font-size: 45rpx;
+ animation-timing-function: linear;
+ animation-iteration-count: infinite;
+ filter: drop-shadow(0 4rpx 8rpx rgba(72, 52, 212, 0.3));
+ /* 鍒濆鐘舵�佸畬鍏ㄩ殣钘� */
+ opacity: 0;
+ transform: translateY(-200rpx);
+ }
+
+ /* 涓嶅悓绀肩洅鐨勪綅缃拰鍔ㄧ敾 */
+ .giftbox-1 {
+ left: 10%;
+ animation: giftbox-fall-1 8s linear infinite;
+ animation-delay: 0s;
+ }
+
+ .giftbox-2 {
+ left: 25%;
+ animation: giftbox-fall-2 10s linear infinite;
+ animation-delay: 2s;
+ }
+
+ .giftbox-3 {
+ left: 45%;
+ animation: giftbox-fall-3 7s linear infinite;
+ animation-delay: 1s;
+ }
+
+ .giftbox-4 {
+ left: 65%;
+ animation: giftbox-fall-4 9s linear infinite;
+ animation-delay: 3s;
+ }
+
+ .giftbox-5 {
+ left: 80%;
+ animation: giftbox-fall-5 11s linear infinite;
+ animation-delay: 4s;
+ }
+
+ .giftbox-6 {
+ left: 35%;
+ animation: giftbox-fall-6 6s linear infinite;
+ animation-delay: 1.5s;
+ }
+
+ .giftbox-7 {
+ left: 55%;
+ animation: giftbox-fall-7 12s linear infinite;
+ animation-delay: 5s;
+ }
+
+ .giftbox-8 {
+ left: 75%;
+ animation: giftbox-fall-8 8.5s linear infinite;
+ animation-delay: 2.5s;
+ }
+
+ .giftbox-9 {
+ left: 15%;
+ animation: giftbox-fall-9 9.5s linear infinite;
+ animation-delay: 3.2s;
+ }
+
+ .giftbox-10 {
+ left: 85%;
+ animation: giftbox-fall-10 7.8s linear infinite;
+ animation-delay: 4.1s;
+ }
+
+ .giftbox-11 {
+ left: 30%;
+ animation: giftbox-fall-11 10.2s linear infinite;
+ animation-delay: 1.8s;
+ }
+
+ .giftbox-12 {
+ left: 70%;
+ animation: giftbox-fall-12 8.8s linear infinite;
+ animation-delay: 5.5s;
+ }
+
+ .giftbox-13 {
+ left: 5%;
+ animation: giftbox-fall-13 11.5s linear infinite;
+ animation-delay: 2.8s;
+ }
+
+ .giftbox-14 {
+ left: 50%;
+ animation: giftbox-fall-14 9.2s linear infinite;
+ animation-delay: 6.2s;
+ }
+
+ .giftbox-15 {
+ left: 90%;
+ animation: giftbox-fall-15 7.5s linear infinite;
+ animation-delay: 4.8s;
+ }
+
+ /* 鍚勪釜绀肩洅鐨勪笅钀藉姩鐢� */
+ @keyframes giftbox-fall-1 {
+ 0% {
+ transform: translateY(-250rpx) rotate(0deg);
+ opacity: 0;
+ }
+ 20% {
+ transform: translateY(-100rpx) rotate(45deg);
+ opacity: 0;
+ }
+ 30% {
+ transform: translateY(-20rpx) rotate(90deg);
+ opacity: 1;
+ }
+ 50% {
+ transform: translateY(50vh) rotate(180deg) translateX(20rpx);
+ }
+ 90% {
+ opacity: 1;
+ }
+ 100% {
+ transform: translateY(120vh) rotate(360deg) translateX(-30rpx);
+ opacity: 0;
+ }
+ }
+
+ @keyframes giftbox-fall-2 {
+ 0% {
+ transform: translateY(-230rpx) rotate(45deg);
+ opacity: 0;
+ }
+ 18% {
+ transform: translateY(-80rpx) rotate(90deg);
+ opacity: 0;
+ }
+ 28% {
+ transform: translateY(-10rpx) rotate(135deg);
+ opacity: 1;
+ }
+ 40% {
+ transform: translateY(40vh) rotate(225deg) translateX(-25rpx);
+ }
+ 85% {
+ opacity: 1;
+ }
+ 100% {
+ transform: translateY(110vh) rotate(405deg) translateX(15rpx);
+ opacity: 0;
+ }
+ }
+
+ @keyframes giftbox-fall-3 {
+ 0% {
+ transform: translateY(-270rpx) rotate(-30deg);
+ opacity: 0;
+ }
+ 15% {
+ transform: translateY(-120rpx) rotate(30deg);
+ opacity: 0;
+ }
+ 25% {
+ transform: translateY(-30rpx) rotate(80deg);
+ opacity: 1;
+ }
+ 60% {
+ transform: translateY(60vh) rotate(150deg) translateX(35rpx);
+ }
+ 88% {
+ opacity: 1;
+ }
+ 100% {
+ transform: translateY(125vh) rotate(330deg) translateX(-20rpx);
+ opacity: 0;
+ }
+ }
+
+ @keyframes giftbox-fall-4 {
+ 0% {
+ transform: translateY(-240rpx) rotate(60deg);
+ opacity: 0;
+ }
+ 12% {
+ transform: translateY(-90rpx) rotate(120deg);
+ opacity: 0;
+ }
+ 22% {
+ transform: translateY(-15rpx) rotate(180deg);
+ opacity: 1;
+ }
+ 45% {
+ transform: translateY(45vh) rotate(240deg) translateX(-40rpx);
+ }
+ 92% {
+ opacity: 1;
+ }
+ 100% {
+ transform: translateY(115vh) rotate(420deg) translateX(25rpx);
+ opacity: 0;
+ }
+ }
+
+ @keyframes giftbox-fall-5 {
+ 0% {
+ transform: translateY(-260rpx) rotate(-45deg);
+ opacity: 0;
+ }
+ 10% {
+ transform: translateY(-110rpx) rotate(-10deg);
+ opacity: 0;
+ }
+ 20% {
+ transform: translateY(-25rpx) rotate(45deg);
+ opacity: 1;
+ }
+ 55% {
+ transform: translateY(55vh) rotate(135deg) translateX(30rpx);
+ }
+ 95% {
+ opacity: 1;
+ }
+ 100% {
+ transform: translateY(130vh) rotate(315deg) translateX(-35rpx);
+ opacity: 0;
+ }
+ }
+
+ @keyframes giftbox-fall-6 {
+ 0% {
+ transform: translateY(-220rpx) rotate(90deg);
+ opacity: 0;
+ }
+ 25% {
+ transform: translateY(-70rpx) rotate(150deg);
+ opacity: 0;
+ }
+ 35% {
+ transform: translateY(-5rpx) rotate(210deg);
+ opacity: 1;
+ }
+ 45% {
+ transform: translateY(35vh) rotate(270deg) translateX(-15rpx);
+ }
+ 80% {
+ opacity: 1;
+ }
+ 100% {
+ transform: translateY(105vh) rotate(450deg) translateX(40rpx);
+ opacity: 0;
+ }
+ }
+
+ @keyframes giftbox-fall-7 {
+ 0% {
+ transform: translateY(-280rpx) rotate(-60deg);
+ opacity: 0;
+ }
+ 8% {
+ transform: translateY(-130rpx) rotate(-20deg);
+ opacity: 0;
+ }
+ 16% {
+ transform: translateY(-40rpx) rotate(20deg);
+ opacity: 1;
+ }
+ 65% {
+ transform: translateY(65vh) rotate(120deg) translateX(45rpx);
+ }
+ 94% {
+ opacity: 1;
+ }
+ 100% {
+ transform: translateY(135vh) rotate(300deg) translateX(-25rpx);
+ opacity: 0;
+ }
+ }
+
+ @keyframes giftbox-fall-8 {
+ 0% {
+ transform: translateY(-235rpx) rotate(30deg);
+ opacity: 0;
+ }
+ 16% {
+ transform: translateY(-85rpx) rotate(90deg);
+ opacity: 0;
+ }
+ 26% {
+ transform: translateY(-8rpx) rotate(150deg);
+ opacity: 1;
+ }
+ 42% {
+ transform: translateY(42vh) rotate(210deg) translateX(-30rpx);
+ }
+ 82% {
+ opacity: 1;
+ }
+ 100% {
+ transform: translateY(118vh) rotate(390deg) translateX(35rpx);
+ opacity: 0;
+ }
+ }
+
+ @keyframes giftbox-fall-9 {
+ 0% {
+ transform: translateY(-250rpx) rotate(-15deg);
+ opacity: 0;
+ }
+ 18% {
+ transform: translateY(-95rpx) rotate(60deg);
+ opacity: 0;
+ }
+ 28% {
+ transform: translateY(-15rpx) rotate(120deg);
+ opacity: 1;
+ }
+ 55% {
+ transform: translateY(48vh) rotate(200deg) translateX(25rpx);
+ }
+ 88% {
+ opacity: 1;
+ }
+ 100% {
+ transform: translateY(122vh) rotate(380deg) translateX(-40rpx);
+ opacity: 0;
+ }
+ }
+
+ @keyframes giftbox-fall-10 {
+ 0% {
+ transform: translateY(-265rpx) rotate(75deg);
+ opacity: 0;
+ }
+ 20% {
+ transform: translateY(-105rpx) rotate(135deg);
+ opacity: 0;
+ }
+ 30% {
+ transform: translateY(-22rpx) rotate(195deg);
+ opacity: 1;
+ }
+ 50% {
+ transform: translateY(52vh) rotate(270deg) translateX(-35rpx);
+ }
+ 85% {
+ opacity: 1;
+ }
+ 100% {
+ transform: translateY(115vh) rotate(450deg) translateX(30rpx);
+ opacity: 0;
+ }
+ }
+
+ @keyframes giftbox-fall-11 {
+ 0% {
+ transform: translateY(-245rpx) rotate(-45deg);
+ opacity: 0;
+ }
+ 15% {
+ transform: translateY(-88rpx) rotate(15deg);
+ opacity: 0;
+ }
+ 25% {
+ transform: translateY(-12rpx) rotate(75deg);
+ opacity: 1;
+ }
+ 45% {
+ transform: translateY(45vh) rotate(165deg) translateX(38rpx);
+ }
+ 90% {
+ opacity: 1;
+ }
+ 100% {
+ transform: translateY(128vh) rotate(345deg) translateX(-28rpx);
+ opacity: 0;
+ }
+ }
+
+ @keyframes giftbox-fall-12 {
+ 0% {
+ transform: translateY(-275rpx) rotate(45deg);
+ opacity: 0;
+ }
+ 22% {
+ transform: translateY(-112rpx) rotate(105deg);
+ opacity: 0;
+ }
+ 32% {
+ transform: translateY(-28rpx) rotate(165deg);
+ opacity: 1;
+ }
+ 48% {
+ transform: translateY(46vh) rotate(240deg) translateX(-42rpx);
+ }
+ 86% {
+ opacity: 1;
+ }
+ 100% {
+ transform: translateY(120vh) rotate(420deg) translateX(32rpx);
+ opacity: 0;
+ }
+ }
+
+ @keyframes giftbox-fall-13 {
+ 0% {
+ transform: translateY(-255rpx) rotate(-30deg);
+ opacity: 0;
+ }
+ 14% {
+ transform: translateY(-98rpx) rotate(30deg);
+ opacity: 0;
+ }
+ 24% {
+ transform: translateY(-18rpx) rotate(90deg);
+ opacity: 1;
+ }
+ 60% {
+ transform: translateY(58vh) rotate(180deg) translateX(45rpx);
+ }
+ 92% {
+ opacity: 1;
+ }
+ 100% {
+ transform: translateY(132vh) rotate(360deg) translateX(-22rpx);
+ opacity: 0;
+ }
+ }
+
+ @keyframes giftbox-fall-14 {
+ 0% {
+ transform: translateY(-240rpx) rotate(60deg);
+ opacity: 0;
+ }
+ 19% {
+ transform: translateY(-92rpx) rotate(120deg);
+ opacity: 0;
+ }
+ 29% {
+ transform: translateY(-16rpx) rotate(180deg);
+ opacity: 1;
+ }
+ 52% {
+ transform: translateY(50vh) rotate(255deg) translateX(-20rpx);
+ }
+ 84% {
+ opacity: 1;
+ }
+ 100% {
+ transform: translateY(125vh) rotate(435deg) translateX(38rpx);
+ opacity: 0;
+ }
+ }
+
+ @keyframes giftbox-fall-15 {
+ 0% {
+ transform: translateY(-260rpx) rotate(-60deg);
+ opacity: 0;
+ }
+ 17% {
+ transform: translateY(-102rpx) rotate(0deg);
+ opacity: 0;
+ }
+ 27% {
+ transform: translateY(-20rpx) rotate(60deg);
+ opacity: 1;
+ }
+ 58% {
+ transform: translateY(54vh) rotate(150deg) translateX(33rpx);
+ }
+ 87% {
+ opacity: 1;
+ }
+ 100% {
+ transform: translateY(119vh) rotate(330deg) translateX(-45rpx);
+ opacity: 0;
+ }
+ }
+
+ /* 纭繚鎵�鏈夊瓙鍏冪礌鍦ㄨ儗鏅楗颁箣涓� */
+ .layout > * {
+ position: relative;
+ z-index: 1;
}
/* 鍓╀綑鎶藉娆℃暟 */
@@ -396,6 +1011,8 @@
padding: 20rpx 40rpx;
border-radius: 50rpx;
box-shadow: 0 4rpx 20rpx rgba(255, 107, 107, 0.3);
+ position: relative;
+ z-index: 10;
}
.times-label {
@@ -409,6 +1026,12 @@
color: white;
font-size: 32rpx;
font-weight: bold;
+ }
+
+ /* 杞洏鎶藉 */
+ .l-dialer {
+ position: relative;
+ z-index: 10;
}
/* 鍙充笂瑙掓偓娴幏鍙栨洿澶氭満浼氭寜閽� */
@@ -477,6 +1100,8 @@
border-radius: 20rpx;
padding: 30rpx;
box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.1);
+ position: relative;
+ z-index: 10;
}
.section-title {
@@ -490,24 +1115,22 @@
.prize-grid {
display: flex;
flex-wrap: wrap;
- justify-content: flex-start;
- }
- .prize-item:nth-child(n+1){
- margin-left: 15rpx;
+ justify-content: space-between;
+ gap: 20rpx;
}
.prize-item {
- width: 22%;
+ width: 30%;
margin-bottom: 20rpx;
text-align: center;
background: #f8f9ff;
border-radius: 15rpx;
- padding: 15rpx;
+ padding: 20rpx;
box-sizing: border-box;
}
.prize-img {
- width: 60rpx;
- height: 60rpx;
+ width: 80rpx;
+ height: 80rpx;
border-radius: 10rpx;
}
@@ -529,6 +1152,8 @@
border-radius: 20rpx;
padding: 30rpx;
box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.1);
+ position: relative;
+ z-index: 10;
}
.winners-list {
--
Gitblit v1.8.0