我的页面

zxl

2025-10-27 b1fd37e9f5ba5d3d7e35300ee97dff90a4065619

 pages/prize/PrizeDetail/PrizeDetail.vue

@@ -14,7 +14,10 @@

      <!-- 获取更多机会按钮 - 右上角悬浮 -->
      <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>

      <!-- 剩余抽奖次数 -->
@@ -54,14 +57,14 @@
         <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>
@@ -74,7 +77,7 @@
            </view>

            <view class="modal-buttons" v-if="currentPrize.id !== 'notWIn'">
               <button class="confirm-btn" @tap="useItNow">去购物</button>
               <button class="confirm-btn" @tap="useItNow">去兑换</button>
            </view>
            <view class="modal-buttons" v-else>
               <button class="confirm-btn" @tap="closePrizeModal">确定</button>
@@ -96,7 +99,6 @@
               <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-icon">🌐</view>
@@ -106,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>

@@ -154,7 +165,9 @@
      prizeInfo,
      prizeNum,
      prize,
      grantRecord
      grantRecord,
      addPrizeNum,
      getPrizeRule
   } from '@/api/prize.js'
   export default {
      data() {
@@ -168,38 +181,7 @@
            showRulesModal: false,
            currentPrize: {},
            // 活动规则数据
            activityRules: [{
                  id: 1,
                  title: '一、 参与方式与规则：',
                  text: `1. 免费抽奖机会获取：
                  每日登录： 用户每日登录小程序， 即可自动获得2次免费抽奖机会；
                  任务赚取： 完成指定任务， 可获取额外无上限的抽奖机会；
                  浏览任务： 单次访问活动视频页并停留≥ 10 分钟， 可额外获得1次机会； 单次访问商品详情页停留≥ 1 分钟， 可额外获得1次机会；
                  分享任务： 首次分享活动至朋友圈可额外获得1次机会； 每成功邀请1位新用户点击您的分享链接， 可再得1次机会； 好友通过您的链接完成首次抽奖， 您可再获得2次机会。`
               },
               {
                  id: 2,
                  title: '二、 抽奖规则',
                  text: `1.用户消耗1次抽奖机会即可参与一次抽奖；
                         2.本次活动奖品每日限量，先到先得，抽完即止。
                          用户消耗1次抽奖机会即可参与一次抽奖。本次活动奖品每日限量，先到先得，抽完即止。
                          3.注意事项：每日基础免费机会仅限当日使用，不累计至次日。通过任务获得的额外机会无上限。请确保分享时生成的是您本人的专属带参链接/二维码，否则无法统计您的邀请关系。`
               },
               {
                  id: 4,
                  title: '三、奖品明细',
                  text: '　　本次抽奖活动奖品池具体每日库存以小程序页面实时显示为准。'
               },
               {
                  id: 5,
                  title: '四、奖品发放与领取',
                  text: '　　1.中奖通知：中奖后，系统将自动弹出中奖提示，并生成中奖海报。您也可以实时领取也可再活动中查看中奖记录。\n　　2.奖品领取：请在收到中奖通知后的24小时内，及时填写并确认收货地址，逾期视为自动放弃奖品。\n　　3.奖品退换：所有奖品均为活动特定礼品，不予折现、不退不换。如遇产品质量问题，请于收货后24小时内联系客服处理。'
               },
               {
                  id: 6,
                  title: '五、其他情况说明',
                  text: '　　1.用户行为规范：严禁用户通过任何不正当手段（如使用外挂、机器人、恶意注册多个账号、虚假分享等）参与活动。一经发现，【您的品牌名称】有权取消其参与及获奖资格，并保留追究法律责任的权利。\n　　2.反作弊条款：活动采用技术手段进行风控监测，包括但不限于：设备ID去重、分享行为验证、地理位置核验等，以确保活动的公平性。\n　　3.活动变更：如遇不可抗力因素或技术问题导致活动无法正常进行，【您的品牌名称】有权暂停、延长或终止活动，并视情况对活动规则进行变更或调整，相关变动将提前予以公告。\n　　4.个人信息保护：您的个人信息仅用于本次活动奖品发放及后续服务，我们将严格保密，不会泄露给任何第三方。\n　　5.免责声明：对于因网络、通信等原因导致用户未能参与活动或领取奖品的情况，【您的品牌名称】不承担任何责任。\n　　6.活动解释权：本活动最终解释权归【您的品牌名称】所有。'
               }
            activityRules: [
            ],
            // 自动滚动控制
            scrollTimer: null,
@@ -231,6 +213,7 @@
               pageType:"DETAIL"
            },
            shareId:'',
            prizeAddRule:[]
         };
      },
      computed: {
@@ -261,7 +244,23 @@
            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) {
         if(option.shareId){
@@ -293,6 +292,7 @@
         })
         await this.getUnmber(this.activityId)
         await this.getGrantRecord(this.activityId)
         await this.prizeRule()
      },
      // onShareTimeline(e) {
      //    console.log('------------------>', e)
@@ -352,6 +352,12 @@
         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);
            if(prizeNums.statusCode === 400){
@@ -1327,8 +1333,8 @@
      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;
@@ -1337,6 +1343,8 @@
      box-shadow: 0 6rpx 20rpx rgba(255, 107, 107, 0.4);
      z-index: 9999;
      transition: all 0.3s ease;
      flex-direction: column;
      padding: 10rpx 0;
   }

   .floating-more-btn::before {
@@ -1372,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;
   }

   /* 奖品展示 */
@@ -1835,4 +1860,55 @@
      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>