抽奖活动页面调整

peng

2025-09-08 f91b8ab866a25cc79b0438952873c9b9463607ec

抽奖活动页面调整

 pages/prize/PrizeDetail/PrizeDetail.vue

@@ -7,6 +7,11 @@
            </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>
@@ -120,6 +125,24 @@
                </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>
@@ -140,7 +163,42 @@
                // 弹窗控制
                showPrizeModal: false,
                showMoreChancesModal: false,
                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.活动解释权：本活动最终解释权归【您的品牌名称】所有。'
                    }
                ],
                // 自动滚动控制
                scrollTimer: null,
                scrollTop: 0,
@@ -214,7 +272,8 @@
                imageUrl:this.activityCover,
                success(e) {
                    console.log("分享成功",e)
                },fail(e) {
                },
                fail(e) {
                    console.log('分享失败',e)
                }
            }
@@ -225,7 +284,13 @@
        methods: {
            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
            },
            /**
             * 立即使用优惠券
@@ -281,6 +346,14 @@
            // 关闭获取更多机会弹窗
            closeMoreChancesModal() {
                this.showMoreChancesModal = false
            },
            // 显示活动规则弹窗
            showActivityRules() {
                this.showRulesModal = true
            },
            // 关闭活动规则弹窗
            closeRulesModal() {
                this.showRulesModal = false
            },
            // 分享到微信好友
            shareToFriend() {
@@ -407,6 +480,7 @@
</script>
<style scoped>
    @import url(@/pages/prize/PrizeDetail/prizeBg.css);

    .layout {
        width: 750rpx;
        min-height: 100vh;
@@ -486,6 +560,7 @@
        0% {
            transform: translate(-10%, -10%) rotate(0deg);
        }

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

        10% {
            opacity: 1;
        }

        90% {
            opacity: 1;
        }

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

@@ -630,20 +708,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;
@@ -655,20 +738,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;
@@ -680,20 +768,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;
@@ -705,20 +798,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;
@@ -730,20 +828,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;
@@ -755,20 +858,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;
@@ -780,20 +888,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;
@@ -805,20 +918,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;
@@ -830,20 +948,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;
@@ -855,20 +978,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;
@@ -880,20 +1008,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;
@@ -905,20 +1038,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;
@@ -930,20 +1068,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;
@@ -955,20 +1098,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;
@@ -980,20 +1128,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;
@@ -1039,6 +1192,66 @@
        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;
@@ -1052,7 +1265,7 @@
        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;
    }

@@ -1123,6 +1336,7 @@
        justify-content: space-between;
        gap: 20rpx;
    }

    .prize-item {
        width: 30%;
        margin-bottom: 20rpx;
@@ -1374,15 +1588,18 @@
        gap: 20rpx;
        margin-bottom: 30rpx;
    }

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

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

    .chance-item {
        width: 45%;
        background: linear-gradient(45deg, #ff6b6b, #feca57);
@@ -1464,4 +1681,88 @@
        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;
    }
</style>