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 | 682 ++++++++++++++++++++++++++++++++++++++++++++++++++++++-- 1 files changed, 655 insertions(+), 27 deletions(-) diff --git a/pages/prize/PrizeDetail/PrizeDetail.vue b/pages/prize/PrizeDetail/PrizeDetail.vue index 9e95cbc..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,29 +174,31 @@ 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) }, - onShareTimeline(e) { - console.log('------------------>', e) - // 濡傛灉鐢ㄦ埛灏濊瘯杩囧垎浜湅鍙嬪湀锛岀粰浜堝鍔� - if (this.shareTimelineAttempt) { - this.remainingTimes++; - this.shareTimelineAttempt = false; - uni.showToast({ - title: '鑾峰緱1娆℃娊濂栨満浼�', - icon: 'success' - }); - } - return { - title: '蹇潵鍙備笌鎶藉娲诲姩鍚э紒', - path: '/pages/prize/PrizeDetail/PrizeDetail?id=' + this.activityId - } - }, + // onShareTimeline(e) { + // console.log('------------------>', e) + // // 濡傛灉鐢ㄦ埛灏濊瘯杩囧垎浜湅鍙嬪湀锛岀粰浜堝鍔� + // if (this.shareTimelineAttempt) { + // this.remainingTimes++; + // this.shareTimelineAttempt = false; + // uni.showToast({ + // title: '鑾峰緱1娆℃娊濂栨満浼�', + // icon: 'success' + // }); + // } + // return { + // title: '蹇潵鍙備笌鎶藉娲诲姩鍚э紒', + // path: '/pages/prize/PrizeDetail/PrizeDetail?id=' + this.activityId + // } + // }, //鍙兘浼氫娇鐢ㄥ埌 mounted() { // this.startAutoScroll() @@ -204,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() @@ -335,7 +362,7 @@ this.closeMoreChancesModal(); uni.showModal({ title: '鍘昏喘鐗�', - content: '鍗冲皢璺宠浆鍒板晢鍝佸箍鍦�', + content: '鍗冲皢璺宠浆鍒拌喘鐗╄溅', success: (res) => { if (res.confirm) { // 鎴栬�呰烦杞埌璐墿杞� @@ -374,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; } /* 鍓╀綑鎶藉娆℃暟 */ @@ -395,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 { @@ -408,6 +1026,12 @@ color: white; font-size: 32rpx; font-weight: bold; + } + + /* 杞洏鎶藉 */ + .l-dialer { + position: relative; + z-index: 10; } /* 鍙充笂瑙掓偓娴幏鍙栨洿澶氭満浼氭寜閽� */ @@ -476,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,21 +1116,21 @@ display: flex; flex-wrap: wrap; 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; } @@ -526,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