抽奖页面调整

peng

2025-10-23 63116e19824ceabc68a72f10b134d815f462e711

 pages/prize/PrizeDetail/PrizeDetail.vue

@@ -54,14 +54,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>
@@ -96,7 +96,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 +105,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>

@@ -148,11 +156,15 @@
</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() {
@@ -166,38 +178,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,
@@ -212,7 +193,24 @@
            shareTimelineAttempt: false,
            activityCover: '',
            activityName: '',
            couponId: ''
            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: {
@@ -221,7 +219,54 @@
            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) {
         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
@@ -244,6 +289,7 @@
         })
         await this.getUnmber(this.activityId)
         await this.getGrantRecord(this.activityId)
         await this.prizeRule()
      },
      // onShareTimeline(e) {
      //    console.log('------------------>', e)
@@ -266,22 +312,49 @@
         // 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,
            path: '/pages/prize/PrizeDetail/PrizeDetail?id=' + this.activityId + '&shareId=' + this.shareId,
            imageUrl: this.activityCover,
            success(e) {
               console.log("分享成功", e)
              console.log("分享成功", e);
            },
            fail(e) {
               console.log('分享失败', 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
           });
         });
        });
      },
      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);
            if(prizeNums.statusCode === 400){
@@ -1765,4 +1838,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>