book-hi/packet/pages/get.vue

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

        <!-- Main Content -->
        <view class="content-wrapper">
            <!-- Header -->
            <view class="header-section">
                <image src="/packet/static/get/text.png" class="header-logo" mode="widthFix"></image>
            </view>

            <!-- White Card -->
            <view class="white-card">
                <!-- Top Amount Row -->
                <view class="top-amount-row">
                    <text class="received-text">¥{{ redBagData.redPrice || 0 }} 红包已到账</text>
                    <view class="use-btn-wrapper" @click="handleUse">
                        <text class="use-btn-text">点击使用</text>
                    </view>
                </view>

                <!-- Promo Box -->
                <view class="promo-box">
                    <image src="/packet/static/get/inner-box.png" class="inner-box-bg" mode="widthFix"></image>
                    <view class="promo-content">
                        <view class="promo-header">
                            <text class="promo-amount"><text style="font-size: 30rpx;">¥</text>{{
                                redBagData.shareSumPrice }}</text>
                        </view>
                        <text class="promo-desc">好友助力解锁更高金额</text>
                        <text class="promo-detail">每邀请 1 位好友最高：你得<text class="highlight-red">¥{{
                            redBagData.shareGetPrice }}红包</text>，好友得<text class="highlight-red">¥{{
                                    redBagData.shareDGetPrice }}</text>红包</text>
                    </view>
                </view>

                <!-- Invite Button -->
                <button class="invite-btn-wrapper" open-type="share" @getuserinfo="handleInvite">
                    <text class="invite-btn-text">立即邀请</text>
                </button>

                <!-- Red Packet Cards -->
                <view class="red-packets-section">
                    <view class="packet-card" v-for="(item, index) in 3" :key="index">
                        <text class="packet-text">邀请好友</text>
                        <text class="packet-text">双方得红包</text>
                    </view>
                </view>

                <!-- Progress Bar -->
                <view class="progress-section">
                    <view class="progress-bar-bg">
                        <view class="progress-bar-fill" :style="{ width: progressWidth + '%' }"></view>
                        <image src="/packet/static/get/circle.png" class="progress-dot"
                            :style="{ left: progressWidth + '%' }" mode="aspectFit"></image>
                    </view>
                    <text class="progress-text">已邀请{{ redBagData.shareNum || 0 }}人，已领{{ redBagData.shareGetNum || 0
                    }}元，最高还可得¥{{ maxGetPrice }} 元</text>
                </view>

                <!-- Continue Scan Button -->
                <view class="scan-btn-wrapper" @click="handleScan">
                    <text class="scan-btn-text">继续扫码</text>
                </view>

                <!-- Bottom Text -->
                <text class="bottom-text">好友助力成功后，奖励实时到账</text>
            </view>
        </view>
    </view>
</template>

<script>
import RootBackHome from '../components/root-back-home.vue'

export default {
    components: {
        RootBackHome
    },
    data() {
        return {
            bianhao: '', // 红包编号
            redBagData: null, // 红包数据
        }
    },
    computed: {
        // 计算进度条宽度
        progressWidth() {
            return this.redBagData ? (this.redBagData.shareGetNum / (this.redBagData.shareSumPrice) * 100) : 0;
        },
        //最高还可得 redBagData.shareSumPrice - redBagData.shareGetNum 元
        maxGetPrice() {
            return this.redBagData ? this.redBagData.shareSumPrice - this.redBagData.shareGetNum : 0;
        }
    },
    onLoad(options) {
        // 从领取页面跳转过来时，获取编号参数
        if (options.bianhao) {
            this.bianhao = options.bianhao;
            // 调用获取红包接口
            this.getRedBagDetail();
        }
    },
    onShow() {
        // 下拉再次进入时，页面栈只有红包页，返回要去首页而不是退出
        const guard = this.$refs.rootBackHome
        if (guard) {
            guard.sync()
            return
        }
        this.$nextTick(() => {
            this.$refs.rootBackHome && this.$refs.rootBackHome.sync()
        })
    },
    onShareAppMessage() {
        // 设置分享内容
        return {
            title: '好友助力解锁最高' + (this.redBagData?.shareSumPrice) + '元红包',
            path: '/packet/pages/index?bianhao=' + this.bianhao,
            imageUrl: '../static/index/share.png'
        };
    },
    onShareTimeline() {
        // 设置分享内容
        return {
            title: '好友助力解锁最高' + (this.redBagData?.shareSumPrice) + '元红包',
            path: '/packet/pages/index?bianhao=' + this.bianhao,
            imageUrl: '../static/index/share.png'
        };
    },
    methods: {
        // 获取红包详情
        async getRedBagDetail() {
            if (!this.bianhao) {
                uni.showModal({
                    title: '提示',
                    content: '红包编号缺失',
                    showCancel: false
                });
                return;
            }

            try {
                const res = await this.$u.api.getRedBagAjax(this.bianhao);
                if (res.code === 200 || res.code === 0) {
                    this.redBagData = res.data;
                } else {
                    uni.showToast({
                        title: res.msg || '获取红包信息失败',
                        icon: 'none'
                    });
                }
            } catch (e) {
                console.error('获取红包详情失败:', e);
                uni.showToast({
                    title: '网络错误',
                    icon: 'none'
                });
            }
        },
        handleUse() {
            // 跳转到商城页面
            uni.switchTab({
                url: '/pages/sell/index'
            });
        },
        handleInvite() {
            // 邀请好友逻辑 - 此方法会在用户点击分享按钮时触发
            // 实际分享内容由 onShareAppMessage 控制
        },
        handleScan() {
            // 继续扫码逻辑
            uni.scanCode({
                success: (scanRes) => {
                    //获取扫描结果中 bianhao 参数
                    const bianhao = scanRes.result.split('=')[1];
                    if (!bianhao) {
                        uni.showToast({
                            title: '扫描结果格式错误',
                            icon: 'none'
                        });
                        return;
                    }
                    // 扫描到新红包，跳转到 index 页面
                    uni.redirectTo({
                        url: '/packet/pages/index?bianhao=' + bianhao
                    });
                }
            });
        }
    }
}
</script>

<style lang="scss" scoped>
.get-page {
    height: 100vh;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;

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

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

        .header-section {
            text-align: center;
            margin-bottom: 40rpx;
            margin-top: 30rpx;

            .header-logo {
                width: 80%;
                display: block;
                margin: 0 auto 20rpx;
            }

            .header-title {
                font-size: 48rpx;
                font-weight: bold;
                color: #1a1a1a;
                display: block;
            }
        }

        .white-card {
            border-radius: 20rpx;
            padding: 40rpx 30rpx;
            background: url('/packet/static/get/frame.png') no-repeat center center;
            background-size: 100% 100%;
            margin-top: 110rpx;

            .top-amount-row {
                display: flex;
                align-items: center;
                justify-content: center;
                margin: 10rpx 60rpx 30rpx 60rpx;

                .received-text {
                    font-size: 40rpx;
                    font-weight: bold;
                    color: #333;
                }

                .use-btn-wrapper {
                    position: relative;
                    width: 160rpx;
                    height: 50rpx;
                    background: url('/packet/static/get/use-button.png') no-repeat center center;
                    background-size: 100% 100%;
                    border-radius: 25rpx;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    margin-left: 20rpx;

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

                    .use-btn-text {
                        font-size: 28rpx;
                        color: #333;
                        font-weight: 500;
                    }
                }
            }

            .promo-box {
                position: relative;
                margin-bottom: 30rpx;
                padding: 0 10rpx;

                .inner-box-bg {
                    width: 100%;
                    display: block;
                }

                .promo-content {
                    position: absolute;
                    top: 0;
                    left: 0;
                    right: 0;
                    bottom: 0;
                    box-sizing: border-box;
                    display: flex;
                    flex-direction: column;
                    align-items: center;

                    .promo-header {
                        display: flex;
                        align-items: center;
                        justify-content: center;
                        margin-bottom: 16rpx;

                        .promo-amount {
                            font-size: 64rpx;
                            font-weight: bold;
                            color: #333;
                        }
                    }

                    .promo-desc {
                        font-size: 28rpx;
                        color: #666;
                        margin-bottom: 12rpx;
                    }

                    .promo-detail {
                        font-size: 24rpx;
                        color: #666;
                        line-height: 1.5;

                        .highlight-red {
                            color: #ff4444;
                            font-weight: bold;
                        }
                    }
                }
            }

            .invite-btn-wrapper {
                position: relative;
                width: 300rpx;
                height: 90rpx;
                margin: 0 auto 40rpx;
                background: url('/packet/static/get/button1.png') no-repeat center center;
                background-size: 100% 100%;
                display: flex;
                align-items: center;
                justify-content: center;
                border: none;
                padding: 0;
                line-height: normal;
                font-size: 0;

                &::after {
                    border: none;
                }

                .invite-btn-text {
                    font-family: Adobe Heiti Std;
                    font-size: 42rpx;
                    color: #FFFFFF;
                    text-align: center;
                }
            }

            .red-packets-section {
                display: flex;
                justify-content: center;
                gap: 20rpx;
                margin-bottom: 30rpx;

                .packet-card {
                    flex: 1;
                    position: relative;
                    background: url('/packet/static/get/red-packet.png') no-repeat center center;
                    background-size: 100% 100%;
                    height: 184rpx;
                    max-width: 194rpx;
                    display: flex;
                    flex-direction: column;
                    align-items: center;
                    padding-top: 24rpx;

                    .packet-text {
                        font-size: 26rpx;
                        color: #003C14;
                        text-align: center;
                    }
                }
            }

            .progress-section {
                margin-bottom: 30rpx;
                padding: 0 30rpx;

                .progress-bar-bg {
                    position: relative;
                    width: 100%;
                    height: 15rpx;
                    background: #BDFAAD;
                    border-radius: 6rpx;

                    .progress-bar-fill {
                        position: absolute;
                        left: 0;
                        top: 0;
                        height: 100%;
                        background: linear-gradient(90deg, #4CAF50, #8BC34A);
                        border-radius: 6rpx;
                        transition: width 0.3s ease;
                    }

                    .progress-dot {
                        position: absolute;
                        top: 50%;
                        transform: translateX(-50%) translateY(-50%);
                        width: 40rpx;
                        height: 40rpx;
                    }
                }

                .progress-text {
                    display: block;
                    text-align: center;
                    font-size: 26rpx;
                    color: #666;
                    margin-top: 16rpx;
                }
            }

            .scan-btn-wrapper {
                position: relative;
                width: 300rpx;
                height: 90rpx;
                margin: 0 auto 30rpx;
                background: url('/packet/static/get/button1.png') no-repeat center center;
                background-size: 100% 100%;
                display: flex;
                align-items: center;
                justify-content: center;

                .scan-btn-text {
                    font-family: Adobe Heiti Std;
                    font-size: 42rpx;
                    color: #FFFFFF;
                    text-align: center;
                }
            }

            .bottom-text {
                font-family: Adobe Heiti Std;
                font-size: 38rpx;
                color: #003C14;
                text-align: center;
                font-style: normal;
                margin: 0 auto;
                margin-left: 60rpx;
            }
        }
    }
}
</style>