抽奖页面调整

peng

2025-10-24 87aa32c81e39d2def1dd382bb9cce6ccc420b029

 pages/prize/PrizeDetail/PrizeDetail.vue

@@ -1,5 +1,5 @@
<template>
   <view class="layout" >
   <view class="layout">
      <!-- 礼盒雨装饰元素 -->
      <view class="giftboxes-container">
         <view class="giftbox" v-for="n in 15" :key="n" :class="'giftbox-' + n">
@@ -7,9 +7,17 @@
         </view>
      </view>

      <!-- 活动规则按钮 - 右上角 -->
      <view class="floating-rules-btn" @tap="showActivityRules" v-if="false">
         <text class="rules-btn-text">活动规则</text>
      </view>

      <!-- 获取更多机会按钮 - 右上角悬浮 -->
      <view class="floating-more-btn" @tap="showMoreChances">
         <text class="floating-btn-icon">🎁</text>
         <view class="floating-btn-content">
            <text class="floating-btn-icon">🎁</text>
            <text class="floating-btn-text">更多机会</text>
         </view>
      </view>

      <!-- 剩余抽奖次数 -->
@@ -49,26 +57,29 @@
         <view class="prize-modal-content" @tap.stop>
            <view class="modal-close" @tap="closePrizeModal">×</view>

            <view class="congratulations-text" v-if="currentPrize.id !== 'thanks'">
            <view class="congratulations-text" v-if="currentPrize.id !== 'notWIn'">
               🎉 恭喜您 🎉
            </view>
            <view class="sorry-text" v-else>
               😔 很遗憾 😔
            </view>

            <view class="prize-display">
            <view class="prize-display" v-if="currentPrize.id !== 'notWIn'">
               <image :src="currentPrize.img" class="modal-prize-img" />
               <text class="modal-prize-name">{{ currentPrize.name }}</text>
            </view>

            <view class="prize-result-text" v-if="currentPrize.id !== 'thanks'">
            <view class="prize-result-text" v-if="currentPrize.id !== 'notWIn'">
               获得了 {{ currentPrize.name }}
            </view>
            <view class="prize-result-text" v-else>
               {{ currentPrize.name }}，再接再厉！
            </view>

            <view class="modal-buttons">
            <view class="modal-buttons" v-if="currentPrize.id !== 'notWIn'">
               <button class="confirm-btn" @tap="useItNow">去购物</button>
            </view>
            <view class="modal-buttons" v-else>
               <button class="confirm-btn" @tap="closePrizeModal">确定</button>
            </view>
         </view>
@@ -88,9 +99,8 @@
               <button class="chance-item" open-type="share">
                  <view class="chance-icon">👥</view>
                  <text class="chance-title">分享好友</text>
                  <text class="chance-subtitle">+1次机会</text>
               </button>
<!--                <view class="chance-item" @tap="shareToTimeline">
               <!--                <view class="chance-item" @tap="shareToTimeline">
                  <view class="chance-icon">🌐</view>
                  <text class="chance-title">分享朋友圈</text>
                  <text class="chance-subtitle">+1次机会</text>
@@ -98,17 +108,26 @@
               <view class="chance-item" @tap="watchVideo">
                  <view class="chance-icon">🎬</view>
                  <text class="chance-title">浏览视频</text>
                  <text class="chance-subtitle">+1次机会</text>
               </view>
               <view class="chance-item" @tap="browseProduct">
                  <view class="chance-icon">🛍️</view>
                  <text class="chance-title">浏览商品</text>
                  <text class="chance-subtitle">+1次机会</text>
               </view>
               <view class="chance-item " @tap="goShopping">
                  <view class="chance-icon">🛒</view>
                  <text class="chance-title">去购物</text>
                  <text class="chance-subtitle">享受购物乐趣</text>
               </view>
            </view>

            <!-- 抽奖规则展示 -->
            <view class="prize-rules-section" v-if="prizeAddRule.length > 0">
               <view class="section-title">获取机会规则</view>
               <view class="rules-list">
                  <view class="rule-item" v-for="(rule, index) in prizeAddRule" :key="rule.id">
                     <text class="rule-name">{{ rule.ruleName }}</text>
                     <text class="rule-value" v-if="rule.ruleValue">({{ rule.ruleValue }})</text>
                     <text class="rule-add-num">+{{ rule.addNum }}次机会</text>
                  </view>
               </view>
            </view>

@@ -117,16 +136,38 @@
            </view>
         </view>
      </view>

      <!-- 活动规则弹窗 -->
      <view class="rules-modal" v-if="showRulesModal" @tap="closeRulesModal">
         <view class="rules-modal-content" @tap.stop>
            <view class="modal-close" @tap="closeRulesModal">×</view>

            <view class="modal-title">
               <text class="title-text">活动规则</text>
            </view>

            <scroll-view scroll-y="true" class="rules-content">
               <view class="rule-item" v-for="(rule, index) in activityRules" :key="rule.id">
                  <view class="rule-title" v-if="rule.title">{{ rule.title }}</view>
                  <text class="rule-text">{{ rule.text }}</text>
               </view>
            </scroll-view>
         </view>
      </view>
   </view>

</template>
<script>
   import bgConfig from '@/pages/prize/PrizeDetail/prize-bgConfig.js'
   import { getSessionId, userAction ,userShare } from "@/api/userAction.js";

   import {
      prizeInfo,
      prizeNum,
      prize,
      grantRecord
      grantRecord,
      addPrizeNum,
      getPrizeRule
   } from '@/api/prize.js'
   export default {
      data() {
@@ -137,7 +178,11 @@
            // 弹窗控制
            showPrizeModal: false,
            showMoreChancesModal: false,
            showRulesModal: false,
            currentPrize: {},
            // 活动规则数据
            activityRules: [
            ],
            // 自动滚动控制
            scrollTimer: null,
            scrollTop: 0,
@@ -149,8 +194,26 @@
            prizeDraws: [],
            // 分享朋友圈尝试标记
            shareTimelineAttempt: false,
            activityCover:'',
            activityName:''
            activityCover: '',
            activityName: '',
            couponId: '',
             pageSessionNo:"",
             actionParam:{
               sessionId:'',
               actionType:"PAGE",
               joinType:"SELF",
               pageCode:"PRIZE_DETAIL",
               pageParams:"{}",
               pageStatus:"JOIN",
               pageType:"DETAIL"
            },
            shareParam:{
               pageCode:"PRIZE_DETAIL",
               shareOption:"{}",
               pageType:"DETAIL"
            },
            shareId:'',
            prizeAddRule:[]
         };
      },
      computed: {
@@ -159,9 +222,56 @@
            return [...this.originalWinners]
         }
      },
    onUnload() {
      let param = Object.assign({}, this.actionParam);
      if (this.sendOnShow)return
      param.pageStatus = "LEAVE"
      userAction(param)
    },
    onHide() {
      this.startHidenTime = Date.now()
      let   param = Object.assign({}, this.actionParam);
      this.sendOnShow = true;
      param.pageStatus = "LEAVE"
      userAction(param)
    },
      onShow() {
        getSessionId().then(res=>{
         this.pageSessionNo = res.data.data
         this.actionParam.sessionId = res.data.data
         if(this.pageSessionNo){
         let   param = Object.assign({}, this.actionParam);
            param.sessionId = this.pageSessionNo
            userAction(param)
         }
        })
        const shareId =   uni.getStorageSync("shareId");
        if(shareId){
        let param = {
           addType:"SHARE_USER_REGISTRY",
           extend:"",
        }
        let extend = {shareId:shareId}
        param.extend = JSON.stringify(extend)
        addPrizeNum(param); 	
		  
        let param2 = {
           addType:"USER_STAY_TIME",
           extend:"",
        }
        addPrizeNum(param2);
        }
      },
      async onLoad(option) {
      const pages =    getCurrentPages()
      console.log('================pages ',pages)
         if(option.shareId){
            this.actionParam.shareId = option.shareId;
            this.actionParam.joinType = 'SHARE'
            console.log('触发onLoad')
         }
         this.actionParam.pageParams = JSON.stringify(option)

         const pages = getCurrentPages()
         console.log('================pages ', pages)
         this.activityId = option.id
         const prize = await prizeInfo(this.activityId);
         this.activityCover = prize.data.data.activityCover
@@ -182,6 +292,7 @@
         })
         await this.getUnmber(this.activityId)
         await this.getGrantRecord(this.activityId)
         await this.prizeRule()
      },
      // onShareTimeline(e) {
      //    console.log('------------------>', e)
@@ -204,41 +315,70 @@
         // this.startAutoScroll()
      },
      onShareAppMessage() {
         return{
        // 返回一个Promise
        return new Promise((resolve) => {
         this.shareId = '';
         this.shareParam.shareOption = JSON.stringify({
            id:this.activityId
         })
         userShare(this.shareParam).then(res => {
           this.shareId = res.data.data;
           console.log('------------------1》', this.shareId);
			  
           // 当获取到shareId后，再resolve分享配置
           resolve({
            title: this.activityName,
            path: '/pages/prize/PrizeDetail/PrizeDetail?id=' + this.activityId + '&shareId=' + this.shareId,
            imageUrl: this.activityCover,
            success(e) {
              console.log("分享成功", e);
            },
            fail(e) {
              console.log('分享失败', e);
            }
           });
         }).catch(err => {
           // 处理错误情况，例如使用默认参数
           console.error('获取分享ID失败', err);
           resolve({
            title: this.activityName,
            path: '/pages/prize/PrizeDetail/PrizeDetail?id=' + this.activityId,
            imageUrl:this.activityCover,
            success(e) {
               console.log("分享成功",e)
            },fail(e) {
               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`
            imageUrl: this.activityCover
           });
         });
        });
      },
      beforeDestroy() {
         this.stopAutoScroll()
      },
      methods: {
         async prizeRule(){
            this.prizeAddRule = [];
            const res = await getPrizeRule()
            this.prizeAddRule = res.data.data||[]
            console.log('获取到添加次数规则',JSON.stringify(res.data.data))
         },
         async getUnmber(id) {
            const prizeNums = await prizeNum(id);
            this.remainingTimes = prizeNums.data.data
            if(prizeNums.statusCode === 400){
               uni.showModal({
                  title:'',
                  content:prizeNums.data.message
               })
            }
            this.remainingTimes = prizeNums.data.data ||0
         },
         /**
          * 立即使用优惠券
          */
         useItNow() {

            // uni.navigateTo({
            //   url: `/pages/navigation/search/searchPage?promotionsId=${item.couponId}&promotionType=COUPON`,
            // });
            uni.navigateTo({
               url: `/pages/commodity-square/coups-goods-list?promotionsId=${this.couponId}&promotionType=COUPON`
            });
         },
         async getGrantRecord(id) {
            const record = await grantRecord(id);
@@ -282,6 +422,14 @@
         // 关闭获取更多机会弹窗
         closeMoreChancesModal() {
            this.showMoreChancesModal = false
         },
         // 显示活动规则弹窗
         showActivityRules() {
            this.showRulesModal = true
         },
         // 关闭活动规则弹窗
         closeRulesModal() {
            this.showRulesModal = false
         },
         // 分享到微信好友
         shareToFriend() {
@@ -334,7 +482,7 @@
                     // 模拟观看视频完成，增加抽奖次数
                     // 这里可以添加跳转到具体视频页面的逻辑
                     uni.navigateTo({
                         url: '/pages/tabbar/index/home'
                        url: '/pages/tabbar/index/home'
                     });
                  }
               }
@@ -351,7 +499,7 @@
                  if (res.confirm) {
                     // 这里可以添加跳转到具体商品页面的逻辑
                     uni.navigateTo({
                         url: '/pages/commodity-square/commoditySquare'
                        url: '/pages/commodity-square/commoditySquare'
                     });
                  }
               }
@@ -367,13 +515,14 @@
                  if (res.confirm) {
                     // 或者跳转到购物车
                     uni.navigateTo({
                         url: '/pages/cusbar/cart/cartList'
                        url: '/pages/cusbar/cart/cartList'
                     });
                  }
               }
            });
         },
         async onClick() {
            this.couponId = ''
            // 检查剩余次数
            if (this.remainingTimes <= 0) {
               uni.showToast({
@@ -383,6 +532,7 @@
               return
            }
            const prizeDraw = await prize(this.activityId);
            console.log('---------------->', prizeDraw)
            let winId = 'notWIn'
            if (prizeDraw.data.code == 200) {
               winId = prizeDraw.data.data.id
@@ -395,6 +545,10 @@

            // 奖品的索引
            this.$refs.dialer.run(findInfo)
            if (prizeDraw.data.data) {
               this.couponId = prizeDraw.data.data.couponId
            }

            await this.getGrantRecord(this.activityId)
         }
      }
@@ -402,6 +556,7 @@
</script>
<style scoped>
   @import url(@/pages/prize/PrizeDetail/prizeBg.css);

   .layout {
      width: 750rpx;
      min-height: 100vh;
@@ -440,7 +595,7 @@
      left: 0;
      width: 100%;
      height: 100%;
      background-image: 
      background-image:
         /* 礼盒1 */
         radial-gradient(ellipse 12rpx 15rpx at 10% -50%, #4834d4 0%, #4834d4 40%, transparent 41%),
         /* 礼盒2 */
@@ -481,6 +636,7 @@
      0% {
         transform: translate(-10%, -10%) rotate(0deg);
      }

      100% {
         transform: translate(10%, 10%) rotate(180deg);
      }
@@ -492,12 +648,15 @@
         transform: translateY(-100vh) rotate(0deg);
         opacity: 0;
      }

      10% {
         opacity: 1;
      }

      90% {
         opacity: 1;
      }

      100% {
         transform: translateY(100vh) rotate(360deg);
         opacity: 0;
@@ -512,7 +671,7 @@
      width: 100%;
      height: 100%;
      pointer-events: none;
      z-index: 999;
      z-index: 998;
      overflow: hidden;
   }

@@ -625,20 +784,25 @@
         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;
@@ -650,20 +814,25 @@
         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;
@@ -675,20 +844,25 @@
         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;
@@ -700,20 +874,25 @@
         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;
@@ -725,20 +904,25 @@
         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;
@@ -750,20 +934,25 @@
         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;
@@ -775,20 +964,25 @@
         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;
@@ -800,20 +994,25 @@
         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;
@@ -825,20 +1024,25 @@
         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;
@@ -850,20 +1054,25 @@
         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;
@@ -875,20 +1084,25 @@
         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;
@@ -900,20 +1114,25 @@
         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;
@@ -925,20 +1144,25 @@
         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;
@@ -950,20 +1174,25 @@
         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;
@@ -975,20 +1204,25 @@
         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;
@@ -996,7 +1230,7 @@
   }

   /* 确保所有子元素在背景装饰之上 */
   .layout > * {
   .layout>* {
      position: relative;
      z-index: 1;
   }
@@ -1034,21 +1268,83 @@
      z-index: 10;
   }

   /* 右上角活动规则按钮 */
   .floating-rules-btn {
      position: fixed;
      top: 140rpx;
      right: 0;
      width: auto;
      height: 60rpx;
      background: linear-gradient(45deg, #ff6b6b, #ff9ff3);
      border-radius: 30rpx 0 0 30rpx;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 0 20rpx;
      box-shadow: 0 6rpx 20rpx rgba(255, 107, 107, 0.4);
      z-index: 9999;
      transition: all 0.3s ease;
   }

   .floating-rules-btn::before {
      content: '';
      position: absolute;
      width: 100%;
      height: 100%;
      border-radius: 30rpx 0 0 30rpx;
      background: linear-gradient(45deg, #ff6b6b, #ff9ff3);
      opacity: 0.8;
      animation: pulse-rules 2s infinite;
   }

   @keyframes pulse-rules {
      0% {
         transform: scale(1);
         opacity: 0.8;
      }

      50% {
         transform: scale(1.05);
         opacity: 0.4;
      }

      100% {
         transform: scale(1);
         opacity: 0.8;
      }
   }

   .floating-rules-btn:active {
      transform: scale(0.95);
      box-shadow: 0 4rpx 15rpx rgba(255, 107, 107, 0.5);
   }

   .rules-btn-text {
      color: white;
      font-size: 24rpx;
      font-weight: bold;
      z-index: 1;
      position: relative;
      text-shadow: 0 1rpx 3rpx rgba(0, 0, 0, 0.2);
   }

   /* 右上角悬浮获取更多机会按钮 */
   .floating-more-btn {
      position: fixed;
      top: 30rpx;
      right: 30rpx;
      width: 100rpx;
      height: 100rpx;
      width: 120rpx;
      height: 120rpx;
      background: linear-gradient(45deg, #ff6b6b, #feca57);
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      box-shadow: 0 6rpx 20rpx rgba(255, 107, 107, 0.4);
      z-index: 999;
      z-index: 9999;
      transition: all 0.3s ease;
      flex-direction: column;
      padding: 10rpx 0;
   }

   .floating-more-btn::before {
@@ -1084,12 +1380,29 @@
      box-shadow: 0 4rpx 15rpx rgba(255, 107, 107, 0.5);
   }

   .floating-btn-content {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      z-index: 1;
      position: relative;
   }

   .floating-btn-icon {
      font-size: 36rpx;
      color: white;
      filter: drop-shadow(0 2rpx 4rpx rgba(0, 0, 0, 0.2));
      margin-bottom: 5rpx;
   }

   .floating-btn-text {
      font-size: 20rpx;
      color: white;
      z-index: 1;
      position: relative;
      filter: drop-shadow(0 2rpx 4rpx rgba(0, 0, 0, 0.2));
      text-shadow: 0 1rpx 3rpx rgba(0, 0, 0, 0.2);
      white-space: nowrap;
   }

   /* 奖品展示 */
@@ -1118,6 +1431,7 @@
      justify-content: space-between;
      gap: 20rpx;
   }

   .prize-item {
      width: 30%;
      margin-bottom: 20rpx;
@@ -1129,8 +1443,8 @@
   }

   .prize-img {
      width: 80rpx;
      height: 80rpx;
      width: 120rpx;
      height: 120rpx;
      border-radius: 10rpx;
   }

@@ -1369,15 +1683,18 @@
      gap: 20rpx;
      margin-bottom: 30rpx;
   }
   .chances-grid button{

   .chances-grid button {
      padding: 25rpx 15rpx;
      margin: 0;
      line-height: normal;
      border: none;
   }
   .chances-grid button::after{

   .chances-grid button::after {
      border: none;
   }

   .chance-item {
      width: 45%;
      background: linear-gradient(45deg, #ff6b6b, #feca57);
@@ -1459,4 +1776,139 @@
      font-size: 26rpx;
      font-weight: 500;
   }

   /* 活动规则弹窗样式 */
   .rules-modal {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: rgba(0, 0, 0, 0.6);
      display: flex;
      justify-content: center;
      align-items: center;
      z-index: 9999;
   }

   .rules-modal-content {
      background: white;
      border-radius: 30rpx;
      width: 95%;
      max-width: 700rpx;
      max-height: 80vh;
      padding: 40rpx;
      position: relative;
      box-shadow: 0 10rpx 40rpx rgba(0, 0, 0, 0.3);
      display: flex;
      flex-direction: column;
   }

   .rules-content {
      max-height: 60vh;
      overflow-y: auto;
      -webkit-overflow-scrolling: touch;
      flex: 1;
   }

   .rules-content::-webkit-scrollbar {
      width: 4rpx;
   }

   .rules-content::-webkit-scrollbar-track {
      background: #f1f1f1;
      border-radius: 2rpx;
   }

   .rules-content::-webkit-scrollbar-thumb {
      background: #667eea;
      border-radius: 2rpx;
   }

   .rules-content::-webkit-scrollbar-thumb:hover {
      background: #5a67d8;
   }

   .rule-item {
      display: flex;
      flex-direction: column;
      margin-bottom: 25rpx;
      padding-bottom: 20rpx;
      border-bottom: 1px solid #f0f0f0;
      line-height: 1.6;
   }

   .rule-item:last-child {
      border-bottom: none;
      margin-bottom: 0;
   }

   .rule-title {
      color: #333;
      font-size: 28rpx;
      font-weight: bold;
      margin-bottom: 10rpx;
      color: #ff6b6b;
   }

   .rule-text {
      color: #333;
      font-size: 24rpx;
      line-height: 1.8;
      flex: 1;
      text-align: left;
      white-space: pre-line;
      word-break: break-word;
   }

   /* 抽奖规则样式 */
   .prize-rules-section {
      margin-top: 30rpx;
      padding: 20rpx;
      background: #f8f9ff;
      border-radius: 15rpx;
   }

   .prize-rules-section .section-title {
      text-align: left;
      font-size: 30rpx;
      margin-bottom: 15rpx;
      color: #ff6b6b;
   }

   .rules-list {
      max-height: 300rpx;
      overflow-y: auto;
   }

   .rules-list .rule-item {
      flex-direction: row;
      align-items: center;
      justify-content: space-between;
      padding: 15rpx 0;
      margin-bottom: 0;
      border-bottom: 1px solid #eee;
   }

   .rules-list .rule-item:last-child {
      border-bottom: none;
   }

   .rule-name {
      font-size: 26rpx;
      color: #333;
      flex: 1;
   }

   .rule-value {
      font-size: 24rpx;
      color: #666;
      margin: 0 10rpx;
   }

   .rule-add-num {
      font-size: 26rpx;
      color: #ff6b6b;
      font-weight: bold;
   }
</style>