book-hi/packet/pages/share.vue

<template>
    <view class="share-page">
        <!-- Background -->
        <image src="/packet/static/share/bg.png" class="bg-image" mode="widthFix"></image>

        <!-- Main Content -->
        <view class="content-wrapper">
            <!-- Loop through share list -->
            <view class="card" v-for="(item, index) in shareList" :key="index">
                <!-- Header -->
                <view class="card-header">
                    <text class="card-title">邀请好友同享最高可得{{ item.shareSumPrice }}元红包</text>
                    <text class="card-time">截止时间：{{ item.shareRedBagExpire }}</text>
                </view>

                <!-- Progress Section -->
                <view class="progress-section">
                    <!-- Left Icon -->
                    <image src="/packet/static/share/invite-text.png" class="left-icon" mode="heightFix"></image>

                    <!-- Center Content -->
                    <view class="center-content">
                        <!-- Progress Bubble -->
                        <view class="progress-bubble">
                            <text>已领{{ item.shareGetNum || 0 }}元，最高还可得{{ (item.shareSumPrice || 0) - (item.shareGetNum || 0) }}元</text>
                        </view>

                        <!-- Progress Bar -->
                        <view class="progress-bar-container">
                            <view class="progress-line"></view>
                            <view class="progress-dot" :style="{ left: getProgressPercent(item) + '%' }"></view>
                        </view>

                        <!-- Progress Labels -->
                        <view class="progress-labels">
                            <text class="label">邀请好友</text>
                            <text class="label">好友领取</text>
                            <text class="label">获得红包</text>
                        </view>
                    </view>

                    <!-- Right Packet Icon -->
                    <image src="/packet/static/share/red-packet.png" class="right-packet" mode="heightFix"></image>
                </view>

                <!-- Share/Detail Button -->
                <button class="btn-wrapper" open-type="share" :data-index="index" @getuserinfo="handleShare">
                    <text class="btn-text">立即分享</text>
                </button>
            </view>

            <view class="empty-wrap" v-if="listLoaded && shareList.length === 0">
                <u-empty text="暂无可分享的红包" mode="list" margin-top="80"></u-empty>
                <text class="empty-tip">领取红包并成功发起分享后，会出现在此列表</text>
            </view>
        </view>
    </view>
</template>

<script>
export default {
    data() {
        return {
            shareList: [],
            listLoaded: false,
            useMock: false
        }
    },
    onLoad(options) {
        this.useMock = options && options.mock === '1';
        if (this.useMock) {
            this.shareList = [{
                bianhao: 'preview-mock',
                shareSumPrice: 10,
                shareGetNum: 3,
                shareNum: 10,
                shareRedBagExpire: '2026-12-31 23:59:59'
            }];
            this.listLoaded = true;
            return;
        }
        this.getShareList();
    },
    onShow() {
        if (!this.useMock) {
            this.getShareList();
        }
    },
    onShareAppMessage(options) {
        console.log(options);
        // 从 options 中获取卡片索引
        const index = options?.target?.dataset?.index || 0;
        const item = this.shareList[index] || this.shareList[0];
        
        // 设置分享内容 - 使用对应卡片的数据
        return {
            title: '邀请好友同享最高可得' + (item?.shareSumPrice) + '元红包',
            path: '/packet/pages/index?bianhao=' + item.bianhao,
            imageUrl: '../static/index/share.png' // 使用默认分享图
        };
    },
    methods: {
        // 获取分享列表
        async getShareList() {
            try {
                const res = await this.$u.api.getShareRedBagListAjax();
                if (res.code === 200 || res.code === 0) {
                    const data = res.data;
                    this.shareList = Array.isArray(data) ? data : (data && (data.list || data.rows) || []);
                } else {
                    uni.showToast({
                        title: res.msg || '获取分享列表失败',
                        icon: 'none'
                    });
                }
            } catch (e) {
                console.error('获取分享列表失败:', e);
                uni.showToast({
                    title: '网络错误',
                    icon: 'none'
                });
            } finally {
                this.listLoaded = true;
            }
        },
        // 计算进度百分比
        getProgressPercent(item) {
            if (!item.shareNum || item.shareNum === 0) {
                return 0;
            }
            return (item.shareGetNum / item.shareNum) * 100;
        },
        // 格式化过期时间
        formatExpireTime(timeStr) {
            if (!timeStr) {
                return this.formatTime(new Date());
            }
            const date = new Date(timeStr);
            return this.formatTime(date);
        },
        // 格式化时间
        formatTime(date) {
            const year = date.getFullYear();
            const month = String(date.getMonth() + 1).padStart(2, '0');
            const day = String(date.getDate()).padStart(2, '0');
            const hours = String(date.getHours()).padStart(2, '0');
            const minutes = String(date.getMinutes()).padStart(2, '0');
            const seconds = String(date.getSeconds()).padStart(2, '0');
            return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
        },
        handleShare() {
            // 分享逻辑
            uni.showToast({
                title: '分享成功',
                icon: 'success'
            });
        },
        handleViewDetail() {
            // 查看详情逻辑
            uni.showToast({
                title: '查看详情',
                icon: 'none'
            });
        }
    }
}
</script>

<style lang="scss" scoped>
.share-page {
    height: 100vh;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 40rpx 30rpx;
    box-sizing: border-box;
    padding-top: 0;

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

    .content-wrapper {
        position: relative;
        z-index: 1;
        width: 100%;
        max-width: 700rpx;
        padding: 60rpx 0;
        margin-top: 350rpx;

        .empty-wrap {
            background: rgba(255, 255, 255, 0.95);
            border-radius: 24rpx;
            padding: 40rpx 30rpx 60rpx;
            text-align: center;

            .empty-tip {
                display: block;
                margin-top: 16rpx;
                font-size: 24rpx;
                color: #666;
                line-height: 1.6;
            }
        }

        .card {
            background: #fff;
            border-radius: 24rpx;
            overflow: hidden;
            margin-bottom: 40rpx;

            .card-header {
                background: #03A65F;
                padding: 24rpx 30rpx;
                display: flex;
                justify-content: space-between;
                align-items: center;
                height: 79rpx;
                box-sizing: border-box;

                .card-title {
                    font-size: 28rpx;
                    font-weight: 600;
                    color: #fff;
                    flex: 1;
                }

                .card-time {
                    font-size: 22rpx;
                    color: rgba(255, 255, 255, 0.9);
                    white-space: nowrap;
                    margin-left: 20rpx;
                }
            }

            .progress-section {
                padding: 30rpx 50rpx;
                display: flex;
                align-items: center;
                gap: 20rpx;
                position: relative;

                .left-icon {
                    width: 80rpx;
                    height: 80rpx;
                    flex-shrink: 0;
                    position: absolute;
                    top: 20%;
                    left: 40rpx;
                }

                .center-content {
                    flex: 1;
                    display: flex;
                    flex-direction: column;
                    align-items: center;
                    margin-top: 40rpx;

                    .progress-bubble {
                        background: #18B94E;
                        padding: 12rpx 28rpx;
                        border-radius: 30rpx;
                        margin-bottom: 30rpx;
                        margin-left: 10rpx;

                        text {
                            font-size: 24rpx;
                            color: #fff;
                            font-weight: 500;
                        }
                    }

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

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

                        .progress-dot {
                            position: absolute;
                            top: 50%;
                            transform: translate(-50%, -50%);
                            width: 32rpx;
                            height: 32rpx;
                            background: #fff;
                            border-radius: 50%;
                            box-shadow: 0 2rpx 8rpx rgba(76, 175, 80, 0.3);
                            display: flex;
                            align-items: center;
                            justify-content: center;

                            &::after {
                                content: '';
                                width: 24rpx;
                                height: 24rpx;
                                background: linear-gradient(135deg, #4CAF50 0%, #66BB6A 100%);
                                border-radius: 50%;
                            }
                        }
                    }

                    .progress-labels {
                        display: flex;
                        justify-content: space-between;
                        width: 100%;

                        .label {
                            font-size: 26rpx;
                            color: #333;
                            text-align: center;
                            font-weight: 600;
                            flex: 1;
                        }
                    }
                }

                .right-packet {
                    width: 60rpx;
                    height: 80rpx;
                    flex-shrink: 0;
                    position: absolute;
                    top: 20%;
                    right: 40rpx;
                }
            }

            .btn-wrapper {
                position: relative;
                width: 300rpx;
                height: 90rpx;
                margin: 0 auto 30rpx;
                background: url('/packet/static/share/share-btn.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;
                }

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