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 || 15 }}元红包</text>
                    <text class="card-time">{{ formatExpireTime(item.shareRedBagExpire) }}</text>
                </view>

                <!-- Progress Section -->
                <view class="progress-section">
                    <!-- Left Icon -->
                    <image src="/packet/static/share/invite-text.png" class="left-icon" mode="widthFix"></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="widthFix"></image>
                </view>

                <!-- Share/Detail Button -->
                <view class="btn-wrapper">
                    <image src="/packet/static/share/share-btn.png" class="btn-image" mode="widthFix"></image>
                    <text class="btn-text">{{ index === 0 ? '立即分享' : '查看详情' }}</text>
                </view>
            </view>
        </view>
    </view>
</template>

<script>
export default {
    data() {
        return {
            shareList: [] // 分享列表数据
        }
    },
    onLoad() {
        // 获取分享列表
        this.getShareList();
    },
    methods: {
        // 获取分享列表
        async getShareList() {
            try {
                const res = await this.$u.api.getShareRedBagListAjax();
                if (res.code === 200 || res.code === 0) {
                    this.shareList = res.data || [];
                } else {
                    uni.showToast({
                        title: res.msg || '获取分享列表失败',
                        icon: 'none'
                    });
                }
            } catch (e) {
                console.error('获取分享列表失败:', e);
                uni.showToast({
                    title: '网络错误',
                    icon: 'none'
                });
            }
        },
        // 计算进度百分比
        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 {
    min-height: 100vh;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 40rpx 30rpx;
    box-sizing: border-box;

    .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-top: 60rpx;

        .card {
            background: #fff;
            border-radius: 24rpx;
            overflow: hidden;
            margin-bottom: 40rpx;
            box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.08);

            .card-header {
                background: linear-gradient(135deg, #4CAF50 0%, #66BB6A 100%);
                padding: 24rpx 30rpx;
                display: flex;
                justify-content: space-between;
                align-items: center;

                .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: 40rpx 30rpx;
                display: flex;
                align-items: flex-start;
                gap: 20rpx;

                .left-icon {
                    width: 80rpx;
                    height: 80rpx;
                    flex-shrink: 0;
                }

                .center-content {
                    flex: 1;
                    display: flex;
                    flex-direction: column;
                    align-items: center;

                    .progress-bubble {
                        background: linear-gradient(135deg, #4CAF50 0%, #66BB6A 100%);
                        padding: 12rpx 28rpx;
                        border-radius: 24rpx;
                        margin-bottom: 24rpx;

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

                    .progress-bar-container {
                        position: relative;
                        width: 100%;
                        height: 8rpx;
                        background: linear-gradient(90deg, #E8F5E9 0%, #C8E6C9 100%);
                        border-radius: 4rpx;
                        margin-bottom: 20rpx;

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

                        .progress-dot {
                            position: absolute;
                            top: 50%;
                            transform: translate(-50%, -50%);
                            width: 36rpx;
                            height: 36rpx;
                            background: linear-gradient(135deg, #4CAF50 0%, #66BB6A 100%);
                            border-radius: 50%;
                            box-shadow: 0 4rpx 12rpx rgba(76, 175, 80, 0.4);
                            border: 4rpx solid #fff;
                        }
                    }

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

                        .label {
                            font-size: 24rpx;
                            color: #666;
                            text-align: center;
                            flex: 1;
                        }
                    }
                }

                .right-packet {
                    width: 90rpx;
                    height: 90rpx;
                    flex-shrink: 0;
                }
            }

            .btn-wrapper {
                position: relative;
                display: flex;
                justify-content: center;
                padding: 0 30rpx 40rpx;

                .btn-image {
                    width: 320rpx;
                    height: 88rpx;
                    display: block;
                }

                .btn-text {
                    position: absolute;
                    top: 0;
                    left: 50%;
                    transform: translateX(-50%);
                    width: 320rpx;
                    text-align: center;
                    line-height: 88rpx;
                    font-size: 32rpx;
                    color: #fff;
                    font-weight: 600;
                    letter-spacing: 2rpx;
                }
            }
        }
    }
}
</style>