book-hi/packet/pages/index.vue

<template>
    <view class="packet-page">
        <root-back-home ref="rootBackHome" />
        <!-- Background -->
        <image v-if="!isFailState" src="/packet/static/index/background.png" class="bg-image" mode="widthFix"></image>

        <!-- Main Content -->
        <view v-if="isFailState" class="fail-wrapper">
            <view class="fail-card">
                <view class="fail-icon" :class="'fail-icon--' + failState.iconType">
                    <text class="fail-icon__text">{{ failState.iconText }}</text>
                </view>
                <view class="fail-title">{{ failState.title }}</view>
                <view class="fail-desc">{{ failState.desc }}</view>
                <view class="fail-btn" @click="goHome">
                    <text>进入首页</text>
                </view>
            </view>
        </view>

        <view v-else class="content-wrapper">
            <!-- Headline -->
            <image src="/packet/static/index/headline.png" class="headline-image" mode="widthFix"></image>

            <!-- Red Envelope Section -->
            <view class="envelope-section">
                <!-- Red Envelope Image -->
                <image src="/packet/static/index/red_envelope.png" class="envelope-image" mode="widthFix"></image>

                <!-- Amount Display -->
                <view class="amount-wrapper">
                    <view class="amount-display">
                        <text class="currency">¥</text>
                        <text class="amount-value">{{ amount }}</text>
                    </view>
                </view>

                <!-- Receive Button -->
                <view class="receive-btn-wrapper" @click="handleReceive">
                    <image src="/packet/static/index/btn_receive.png" class="btn-image" mode="widthFix"></image>
                    <text class="btn-text" v-if="!redBagData || !redBagData.drawStatus">领{{ amount }}元红包 |
                        买书卖书都能用</text>
                    <text class="btn-text" v-else>已领取</text>
                </view>
            </view>

            <!-- Info Card -->
            <view class="info-card-section">
                <image src="/packet/static/index/info_frame.png" class="info-frame" mode="widthFix"></image>
                <view class="info-content">
                    <view class="info-list">
                        <view class="info-item">
                            <text>买书立减</text>
                            <text class="spacer"></text>
                            <text>卖书加价</text>
                        </view>
                        <view class="info-item">
                            <text>伴你轻松度过大学四年</text>
                        </view>
                        <view class="info-item">
                            <text>官方补贴</text>
                            <text class="spacer"></text>
                            <text>无门槛使用</text>
                        </view>
                    </view>
                    <view class="rule-footer" @click="openRulePopup">
                        <text class="rule-text">活动规则</text>
                    </view>
                </view>
            </view>
        </view>

        <u-popup v-model="showRulePopup" mode="center" border-radius="24" :mask-close-able="true">
            <view class="rule-popup">
                <view class="rule-popup__header">
                    <text class="rule-popup__title">活动规则</text>
                    <view class="rule-popup__close" @click="closeRulePopup">x</view>
                </view>
                <scroll-view scroll-y class="rule-popup__body">
                    <view class="rule-popup__item" v-for="(item, index) in ruleList" :key="index">
                        <text>{{ index + 1 }}.{{ item }}</text>
                    </view>
                </scroll-view>
                <view class="rule-popup__footer" @click="closeRulePopup">
                    <text class="rule-popup__btn">我知道了</text>
                </view>
            </view>
        </u-popup>
    </view>
</template>

<script>
    import { silentLogin } from '@/api/auth'
    import RootBackHome from '../components/root-back-home.vue'

    export default {
        components: {
            RootBackHome
        },
        data() {
            return {
                amount: '1.58',
                bianhao: '', // 红包编号
                redBagData: null, // 红包数据
                failState: null, // 扫码失败态
                showRulePopup: false,
                ruleList: [
                    '活动时间：2026年05月01日至2028年05月30日。',
                    '活动期间，用户扫描书嗨专属红包码，均有机会获得书嗨无门槛红包或现金红包。',
                    '每位用户每获得一个红包有一次机会成为发起者。每人最多可赠送3位好友，分享者和好友均可获得书嗨无门槛红包或现金红包。',
                    '助力者仅限新用户。',
                    '助力红包发放时间：活动时间内，点击领取红包券，会实时到账小程序红包。',
                    '无门槛红包可用于买书或卖书，买书订单将抵扣消费金额，卖书订单将加于书款上。'
                ]
            }
        },
        computed: {
            isFailState() {
                return !!this.failState;
            }
        },
        onLoad(options) {
            let bianhao = options.bianhao;

            // 兼容扫码进入场景，当前页的 scene 里带了 bianhao
            if (!bianhao && options.scene) {
                const decodeScene = decodeURIComponent(options.scene);
                const paramPairs = decodeScene.split('&');
                paramPairs.forEach((pair) => {
                    const [key, value] = pair.split('=');
                    if (key === 'bianhao') {
                        bianhao = value;
                    }
                });
            }

            // 兼容从 App.vue 缓存中获取 (因为如果是扫小程序码直接进入这个页面，App.vue的onLaunch会先执行并存入缓存，然后执行页面的onLoad)
            if (!bianhao) {
                bianhao = uni.getStorageSync('scene_bianhao');
            }

            if (bianhao) {
                this.bianhao = bianhao;
                uni.removeStorageSync('scene_bianhao');
                // 调用扫码接口获取红包信息
                this.scanRedBag();
            }
        },
        onShow() {
            // 下拉进入且页面栈只有红包页时，会先去首页再回到本页，本次不再重复请求
            if (this.syncRootBackHome()) return
            // 如果是从其他页面返回，重新获取红包数据
            if (this.bianhao) {
                this.scanRedBag();
            }
        },
        methods: {
            getCantTypeValue(source = {}) {
                const rawCantType = source.cantType;
                if (rawCantType === undefined || rawCantType === null || rawCantType === '') {
                    return null;
                }
                const cantType = Number(rawCantType);
                return Number.isNaN(cantType) ? null : cantType;
            },
            buildFailState(source = {}, fallbackMsg = '') {
                const cantType = this.getCantTypeValue(source);
                if (cantType === null) {
                    return null;
                }
                const scanCount = source.scanNum || source.scanCount || source.usedCount || source.count || '';
                const failStateMap = {
                    0: {
                        iconType: 'warn',
                        iconText: '!',
                        title: scanCount ? `此二维码已被扫 ${scanCount} 次` : '扫码次数超上限',
                        desc: scanCount ? '该二维码可参与次数已用完，请更换二维码后重试。' : '该二维码可参与次数已达上限，请更换二维码后重试。'
                    },
                    1: {
                        iconType: 'ban',
                        iconText: 'x',
                        title: '扫码禁用',
                        desc: '您的扫码功能已被禁用，当前无法领取红包。'
                    },
                    3: {
                        iconType: 'warn',
                        iconText: '!',
                        title: '系统繁忙',
                        desc: fallbackMsg || '系统开小差了，请稍后再试。'
                    },
                    4: {
                        iconType: 'warn',
                        iconText: '!',
                        title: '活动已结束',
                        desc: '很抱歉，当前活动已结束，无法继续领取红包。'
                    },
                    5: {
                        iconType: 'warn',
                        iconText: '!',
                        title: '您不是新用户',
                        desc: '抱歉！您不是新用户，无法领取分享红包。'
                    },
                    6: {
                        iconType: 'warn',
                        iconText: '!',
                        title: '分享超限',
                        desc: '当前分享次数已达上限，无法继续领取分享红包。'
                    },
                    7: {
                        iconType: 'warn',
                        iconText: '!',
                        title: '二维码已使用',
                        desc: '当前二维码已被使用，不能重复领取。'
                    }
                };
                return failStateMap[cantType] || {
                    iconType: 'warn',
                    iconText: '!',
                    title: '领取失败',
                    desc: fallbackMsg || '当前无法领取红包，请稍后再试。'
                };
            },
            applyCantTypeState(source = {}, fallbackMsg = '') {
                const failState = this.buildFailState(source, fallbackMsg);
                if (!failState) {
                    return false;
                }
                this.failState = failState;
                this.redBagData = null;
                uni.hideLoading();
                return true;
            },
            goHome() {
                uni.switchTab({
                    url: '/pages/sell/index'
                });
            },
            // 下拉再次进入时，页面栈只有红包页，返回要去首页而不是退出
            syncRootBackHome() {
                const guard = this.$refs.rootBackHome
                if (guard) return !!guard.sync()
                this.$nextTick(() => {
                    this.$refs.rootBackHome && this.$refs.rootBackHome.sync()
                })
                return false
            },
            openRulePopup() {
                this.showRulePopup = true;
            },
            closeRulePopup() {
                this.showRulePopup = false;
            },
            // 请求前确保 token 可用，避免扫码冷启动时出现 401
            async ensureTokenReady() {
                const token = uni.getStorageSync('token')
                if (token) return true
                try {
                    await silentLogin()
                    return !!uni.getStorageSync('token')
                } catch (e) {
                    return false
                }
            },
            // 扫码获取红包信息
            async scanRedBag() {
                if (!this.bianhao) {
                    // 如果没有编号，提示用户扫码
                    uni.showModal({
                        title: '提示',
                        content: '请扫描红包二维码',
                        showCancel: false
                    });
                    return;
                }

                const loginReady = await this.ensureTokenReady()
                if (!loginReady) {
                    uni.showToast({
                        title: '登录状态失效，请稍后重试',
                        icon: 'none'
                    });
                    return;
                }

                this.$u.api.scanRedBagAjax(this.bianhao).then(res => {
                    console.log('扫码获取红包信息成功:', res);
                    if (this.applyCantTypeState(res.data || res, res.msg)) {
                        return;
                    }
                    if (res.code === 200) {
                        this.failState = null;
                        this.redBagData = res.data;
                        this.amount = res.data.redPrice;
                    } else {
                        uni.showToast({
                            title: res.msg || '获取红包信息失败',
                            icon: 'none'
                        });
                    }
                })
            },
            // 领取红包
            async handleReceive() {
                if (!this.bianhao) {
                    uni.showToast({
                        title: '红包编号缺失',
                        icon: 'none'
                    });
                    return;
                }

                const loginReady = await this.ensureTokenReady()
                if (!loginReady) {
                    uni.showToast({
                        title: '登录状态失效，请稍后重试',
                        icon: 'none'
                    });
                    return;
                }

                // 显示领取中提示
                uni.showLoading({
                    title: '领取中...'
                });

                try {
                    const res = await this.$u.api.getRedBagAjax(this.bianhao);
                    uni.hideLoading();
                    if (this.applyCantTypeState(res.data || res, res.msg)) {
                        return;
                    }
                    if (res.code === 200) {
                        // 更新红包数据
                        this.failState = null;
                        this.redBagData = res.data;

                        //如果是现金红包，执行确认收款操作
                        if (res.data.redType == 1) {
                            return this.handleConfirmReceipt(res.data)
                        }

                        uni.showToast({
                            title: '领取成功',
                            icon: 'success'
                        });
                        // 跳转到 get 页面，并传递红包数据
                        setTimeout(() => {
                            uni.redirectTo({
                                url: '/packet/pages/get?bianhao=' + this.bianhao
                            });
                        }, 1500);
                    } else {
                        uni.showToast({
                            title: res.msg || '领取失败',
                            icon: 'none'
                        });
                    }
                } catch (e) {
                    uni.hideLoading();
                    console.error('领取红包失败:', e);
                    uni.showToast({
                        title: '网络错误',
                        icon: 'none'
                    });
                }
            },
            //执行微信确认收款操作
            handleConfirmReceipt(data) {
                if (wx.canIUse('requestMerchantTransfer')) {
                    wx.requestMerchantTransfer({
                        mchId: data.mchId,
                        appId: data.appId,
                        package: data.packageInfo,
                        success: (res) => {
                            // res.err_msg将在页面展示成功后返回应用时返回ok，并不代表付款成功
                            uni.showToast({
                                title: '确认收款成功',
                                icon: 'none'
                            });
                            //跳转到首页
                            uni.switchTab({
                                url: '/pages/sell/index'
                            });
                        },
                        fail: (res) => {
                            console.log('fail:', res);
                        }
                    });
                } else {
                    wx.showModal({
                        content: '你的微信版本过低，请更新至最新版本。',
                        showCancel: false
                    });
                }
            },

            handleShare() {
                // Share logic
            }
        }
    }
</script>

<style lang="scss" scoped>
    .packet-page {
        height: 100vh;
        position: relative;
        display: flex;
        flex-direction: column;
        align-items: center;
        overflow: hidden;
        background: #FFFFFF;

        .bg-image {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            z-index: 0;
        }

        .content-wrapper {
            position: relative;
            z-index: 1;
            width: 100%;
            padding: 40rpx 30rpx;
            box-sizing: border-box;

            .headline-image {
                width: 80%;
                margin-left: 10%;
                margin-bottom: 30rpx;
                margin-top: 30rpx;
            }

            .envelope-section {
                position: relative;

                .envelope-image {
                    width: 90%;
                    display: block;
                    margin: 0 auto;
                }

                .amount-wrapper {
                    position: absolute;
                    top: 12%;
                    left: 50%;
                    transform: translateX(-50%);
                    text-align: center;

                    .amount-display {
                        display: flex;
                        align-items: baseline;
                        justify-content: center;

                        .currency {
                            font-size: 78rpx;
                            color: #FF4444;
                            font-weight: bold;
                            margin-right: 4rpx;
                        }

                        .amount-value {
                            font-size: 156rpx;
                            color: #FF4444;
                            font-weight: bold;
                        }
                    }
                }

                .receive-btn-wrapper {
                    position: absolute;
                    bottom: 15%;
                    left: 52%;
                    transform: translateX(-50%);
                    width: 84%;

                    .btn-image {
                        width: 100%;
                        height: auto;
                    }

                    .btn-text {
                        display: inline-block;
                        position: absolute;
                        top: 45%;
                        left: 50%;
                        transform: translate(-50%, -50%);
                        font-size: 32rpx;
                        color: #D73800;
                        font-weight: 500;
                        white-space: nowrap;
                        word-break: keep-all;
                    }
                }
            }

            .info-card-section {
                position: relative;
                margin-bottom: 20rpx;

                .info-frame {
                    width: 100%;
                    display: block;
                }

                .info-content {
                    position: absolute;
                    top: 20%;
                    left: 0;
                    right: 0;
                    bottom: 0;
                    padding: 30rpx;
                    box-sizing: border-box;

                    .info-list {
                        padding: 0 20rpx;

                        .info-item {
                            font-family: Fotor_HelloFont_GongYiTi;
                            font-size: 40rpx;
                            color: #000000;
                            line-height: 64rpx;
                            text-align: center;

                            .spacer {
                                flex: 1;
                                margin: 0 16rpx;
                            }

                            .star {
                                color: #FFB300;
                                margin-left: 8rpx;
                            }
                        }
                    }

                    .rule-footer {
                        display: flex;
                        justify-content: center;
                        align-items: center;
                        margin-top: 30rpx;
                        cursor: pointer;

                        .rule-text {
                            font-size: 26rpx;
                            color: #666;
                            text-decoration: underline;
                        }

                        .share-btn-wrapper {
                            position: absolute;
                            bottom: 20rpx;
                            right: 20rpx;
                            width: 120rpx;
                            height: 120rpx;

                            .share-btn-image {
                                width: 100%;
                                height: 100%;
                            }

                            .share-text {
                                position: absolute;
                                top: 50%;
                                left: 50%;
                                transform: translate(-50%, -50%);
                                font-size: 22rpx;
                                color: #fff;
                                font-weight: bold;
                                text-align: center;
                                line-height: 1.3;
                            }
                        }
                    }
                }
            }
        }
    }

    .fail-wrapper {
        width: 100%;
        min-height: 100vh;
        padding: 120rpx 48rpx 80rpx;
        box-sizing: border-box;
        display: flex;
        justify-content: center;
        align-items: flex-start;
        background: #FFFFFF;
    }

    .fail-card {
        width: 100%;
        background: transparent;
        border-radius: 0;
        padding: 0;
        box-sizing: border-box;
        display: flex;
        flex-direction: column;
        align-items: center;
        box-shadow: none;
    }

    .fail-icon {
        width: 144rpx;
        height: 144rpx;
        border-radius: 72rpx;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-bottom: 36rpx;
        border: 6rpx solid #FF5A5F;
        box-sizing: border-box;

        &--ban {
            border-color: #FF9F1A;
            background: rgba(255, 159, 26, 0.08);
        }

        &--warn {
            border-color: #F34A45;
            background: rgba(243, 74, 69, 0.06);
        }

        &__text {
            font-size: 76rpx;
            font-weight: 600;
            line-height: 1;
            color: #F34A45;
            text-transform: uppercase;
        }

        &--ban &__text {
            color: #FF9F1A;
        }
    }

    .fail-title {
        font-size: 40rpx;
        line-height: 56rpx;
        font-weight: 600;
        color: #222222;
        text-align: center;
        margin-bottom: 24rpx;
    }

    .fail-desc {
        font-size: 30rpx;
        line-height: 46rpx;
        color: #666666;
        text-align: center;
        margin-bottom: 72rpx;
        white-space: pre-wrap;
    }

    .fail-btn {
        width: 100%;
        max-width: 520rpx;
        height: 88rpx;
        border-radius: 44rpx;
        background: linear-gradient(90deg, #FF453A 0%, #F5221E 100%);
        display: flex;
        align-items: center;
        justify-content: center;

        text {
            color: #FFFFFF;
            font-size: 32rpx;
            font-weight: 500;
        }
    }

    .rule-popup {
        width: 640rpx;
        background: #FFFFFF;
        border-radius: 24rpx;
        padding: 36rpx 32rpx 30rpx;
        box-sizing: border-box;

        &__header {
            position: relative;
            display: flex;
            justify-content: center;
            align-items: center;
            margin-bottom: 28rpx;
        }

        &__title {
            font-size: 36rpx;
            font-weight: 600;
            color: #222222;
        }

        &__close {
            position: absolute;
            right: 0;
            top: 50%;
            transform: translateY(-50%);
            width: 44rpx;
            height: 44rpx;
            line-height: 44rpx;
            text-align: center;
            border-radius: 22rpx;
            background: #F2F3F5;
            color: #666666;
            font-size: 26rpx;
        }

        &__body {
            max-height: 720rpx;
        }

        &__item {
            font-size: 28rpx;
            color: #333333;
            line-height: 46rpx;
            margin-bottom: 20rpx;
            word-break: break-all;
        }

        &__footer {
            display: flex;
            justify-content: center;
            margin-top: 16rpx;
        }

        &__btn {
            min-width: 240rpx;
            height: 72rpx;
            line-height: 72rpx;
            text-align: center;
            background: linear-gradient(90deg, #6ADD83 0%, #38C148 100%);
            border-radius: 36rpx;
            color: #FFFFFF;
            font-size: 30rpx;
            font-weight: 500;
            padding: 0 30rpx;
            box-sizing: border-box;
        }
    }
</style>