抽奖页面调整

peng

2025-09-04 480063a3dc4957fc5de1174953e86f277f5bafab

 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 {