jiebanke/website/js/reward.js

// 推广奖励功能管理类
class RewardManager {
    constructor() {
        this.promotionData = [];
        this.userStats = null;
        this.init();
    }

    // 初始化方法
    init() {
        this.loadPromotionData();
        this.loadUserStats();
        this.bindEvents();
        AOS.init({
            duration: 1000,
            once: true
        });
    }

    // 绑定事件
    bindEvents() {
        // 表单提交事件
        const promotionForm = document.getElementById('promotionForm');
        if (promotionForm) {
            promotionForm.addEventListener('submit', (e) => {
                e.preventDefault();
                this.handlePromotionApplication(e.target);
            });
        }

        // 协议链接点击事件
        const agreeTerms = document.getElementById('agreeTerms');
        if (agreeTerms) {
            agreeTerms.addEventListener('change', (e) => {
                this.toggleAgreement(e.target.checked);
            });
        }

        // 页面加载完成后显示数据
        document.addEventListener('DOMContentLoaded', () => {
            this.displayPromotionStats();
        });
    }

    // 加载推广数据（模拟数据）
    loadPromotionData() {
        this.promotionData = [
            {
                id: 1,
                name: '旅行结伴推广',
                commissionRate: 15,
                totalEarnings: 12500,
                successfulReferrals: 84,
                conversionRate: 12.5
            },
            {
                id: 2,
                name: '动物认领推广',
                commissionRate: 20,
                totalEarnings: 8900,
                successfulReferrals: 45,
                conversionRate: 18.2
            },
            {
                id: 3,
                name: '送花服务推广',
                commissionRate: 12,
                totalEarnings: 6700,
                successfulReferrals: 56,
                conversionRate: 9.8
            },
            {
                id: 4,
                name: '新用户注册',
                commissionRate: 10,
                totalEarnings: 3200,
                successfulReferrals: 320,
                conversionRate: 25.4
            }
        ];
    }

    // 加载用户统计数据（模拟数据）
    loadUserStats() {
        this.userStats = {
            totalEarnings: 31300,
            availableBalance: 5200,
            totalReferrals: 505,
            monthlyEarnings: 4200,
            joinDate: '2024-01-15',
            nextPayoutDate: '2024-03-15',
            performanceLevel: 'Gold',
            topPromotion: '旅行结伴推广'
        };
    }

    // 显示推广统计数据
    displayPromotionStats() {
        // 这里可以添加实时统计数据显示逻辑
        console.log('推广数据加载完成:', this.promotionData);
        console.log('用户统计数据:', this.userStats);
    }

    // 处理推广申请
    handlePromotionApplication(form) {
        if (!form.checkValidity()) {
            form.reportValidity();
            return;
        }

        const formData = new FormData(form);
        const applicationData = {
            name: formData.get('name'),
            phone: formData.get('phone'),
            email: formData.get('email'),
            channel: formData.get('channel'),
            volume: formData.get('volume'),
            message: formData.get('message'),
            applicationDate: new Date().toISOString(),
            status: 'pending'
        };

        // 模拟提交申请
        this.submitPromotionApplication(applicationData);
    }

    // 提交推广申请
    submitPromotionApplication(data) {
        // 模拟API调用
        console.log('提交推广申请:', data);
        
        // 显示成功提示
        this.showApplicationSuccess(data);
        
        // 重置表单
        document.getElementById('promotionForm').reset();
    }

    // 显示申请成功
    showApplicationSuccess(data) {
        // 使用SweetAlert或自定义模态框显示成功信息
        if (typeof Swal !== 'undefined') {
            Swal.fire({
                icon: 'success',
                title: '申请提交成功！',
                html: `
                    <div class="text-start">
                        <p><strong>申请详情：</strong></p>
                        <p>姓名：${data.name}</p>
                        <p>电话：${data.phone}</p>
                        <p>邮箱：${data.email}</p>
                        <p>推广渠道：${this.getChannelName(data.channel)}</p>
                        <p class="mt-3">我们会在1-3个工作日内审核您的申请，并通过邮件和短信通知您结果。</p>
                    </div>
                `,
                confirmButtonText: '确定',
                confirmButtonColor: '#6c5ce7'
            });
        } else {
            alert('推广申请提交成功！我们会在1-3个工作日内联系您。');
        }
    }

    // 获取渠道名称
    getChannelName(channel) {
        const channelNames = {
            'wechat': '微信/朋友圈',
            'weibo': '微博',
            'douyin': '抖音',
            'website': '个人网站/博客',
            'other': '其他渠道'
        };
        return channelNames[channel] || channel;
    }

    // 切换协议同意状态
    toggleAgreement(checked) {
        const submitButton = document.querySelector('#promotionForm button[type="submit"]');
        if (submitButton) {
            submitButton.disabled = !checked;
        }
    }

    // 生成推广链接
    generatePromotionLink(userId, campaignType = 'general') {
        const baseUrl = window.location.origin;
        const affiliateId = this.generateAffiliateId(userId);
        
        const campaignParams = {
            'travel': 'ref=travel_affiliate',
            'animal': 'ref=animal_affiliate', 
            'flower': 'ref=flower_affiliate',
            'general': 'ref=general_affiliate'
        };

        return `${baseUrl}/?${campaignParams[campaignType]}&affiliate=${affiliateId}`;
    }

    // 生成推广ID
    generateAffiliateId(userId) {
        // 简单的ID生成逻辑，实际应用中应该更复杂
        return `aff_${userId}_${Date.now().toString(36)}`;
    }

    // 生成推广二维码
    generatePromotionQRCode(link, elementId) {
        // 这里可以集成QRCode生成库
        console.log('生成二维码:', link);
        // 实际实现需要使用QRCode库
    }

    // 复制推广链接
    copyPromotionLink(link) {
        navigator.clipboard.writeText(link).then(() => {
            this.showCopySuccess();
        }).catch(err => {
            console.error('复制失败:', err);
            this.showCopyError();
        });
    }

    // 显示复制成功
    showCopySuccess() {
        if (typeof Swal !== 'undefined') {
            Swal.fire({
                icon: 'success',
                title: '复制成功！',
                text: '推广链接已复制到剪贴板',
                timer: 2000,
                showConfirmButton: false
            });
        } else {
            alert('推广链接已复制！');
        }
    }

    // 显示复制错误
    showCopyError() {
        if (typeof Swal !== 'undefined') {
            Swal.fire({
                icon: 'error',
                title: '复制失败',
                text: '请手动复制链接',
                timer: 2000,
                showConfirmButton: false
            });
        }
    }

    // 分享到社交媒体
    shareToSocialMedia(platform, link, title = '结伴客推广') {
        const shareUrls = {
            'wechat': `https://api.qrserver.com/v1/create-qr-code/?size=150x150&data=${encodeURIComponent(link)}`,
            'weibo': `http://service.weibo.com/share/share.php?url=${encodeURIComponent(link)}&title=${encodeURIComponent(title)}`,
            'qq': `http://connect.qq.com/widget/shareqq/index.html?url=${encodeURIComponent(link)}&title=${encodeURIComponent(title)}`
        };

        if (shareUrls[platform]) {
            window.open(shareUrls[platform], '_blank');
        }
    }

    // 计算预计收益
    calculateEstimatedEarnings(referrals, averageOrderValue, commissionRate) {
        return referrals * averageOrderValue * (commissionRate / 100);
    }

    // 格式化金额
    formatCurrency(amount) {
        return new Intl.NumberFormat('zh-CN', {
            style: 'currency',
            currency: 'CNY'
        }).format(amount);
    }

    // 获取性能等级
    getPerformanceLevel(conversionRate) {
        if (conversionRate >= 20) return 'Platinum';
        if (conversionRate >= 15) return 'Gold';
        if (conversionRate >= 10) return 'Silver';
        return 'Bronze';
    }

    // 获取等级颜色
    getLevelColor(level) {
        const colors = {
            'Platinum': '#e5e4e2',
            'Gold': '#ffd700',
            'Silver': '#c0c0c0', 
            'Bronze': '#cd7f32'
        };
        return colors[level] || '#6c757d';
    }
}

// 页面加载完成后初始化
let rewardManager;
document.addEventListener('DOMContentLoaded', function() {
    rewardManager = new RewardManager();
    
    // 添加实时统计显示（如果需要）
    addRealTimeStats();
});

// 添加实时统计显示
function addRealTimeStats() {
    const statsContainer = document.createElement('div');
    statsContainer.className = 'container mt-4';
    statsContainer.innerHTML = `
        <div class="row text-center">
            <div class="col-md-3 mb-3">
                <div class="reward-stat">
                    <div class="reward-stat-number">¥31,300</div>
                    <div class="reward-stat-label">总收益</div>
                </div>
            </div>
            <div class="col-md-3 mb-3">
                <div class="reward-stat">
                    <div class="reward-stat-number">505</div>
                    <div class="reward-stat-label">总推荐数</div>
                </div>
            </div>
            <div class="col-md-3 mb-3">
                <div class="reward-stat">
                    <div class="reward-stat-number">¥5,200</div>
                    <div class="reward-stat-label">可提现余额</div>
                </div>
            </div>
            <div class="col-md-3 mb-3">
                <div class="reward-stat">
                    <div class="reward-stat-number">Gold</div>
                    <div class="reward-stat-label">性能等级</div>
                </div>
            </div>
        </div>
    `;
    
    const joinSection = document.getElementById('join');
    if (joinSection) {
        joinSection.parentNode.insertBefore(statsContainer, joinSection);
    }
}

// 工具函数：显示加载状态
function showRewardLoading() {
    const container = document.getElementById('promotion-stats');
    if (container) {
        container.innerHTML = `
            <div class="reward-loading">
                <div class="spinner-border" role="status">
                    <span class="visually-hidden">加载中...</span>
                </div>
            </div>
        `;
    }
}

// 工具函数：显示错误信息
function showRewardError(message) {
    const container = document.getElementById('promotion-stats');
    if (container) {
        container.innerHTML = `
            <div class="alert alert-danger" role="alert">
                <i class="fa fa-exclamation-triangle me-2"></i>
                ${message}
            </div>
        `;
    }
}

// 工具函数：格式化日期
function formatDate(dateString) {
    return new Date(dateString).toLocaleDateString('zh-CN', {
        year: 'numeric',
        month: 'long',
        day: 'numeric'
    });
}

// 工具函数：生成进度条HTML
function createProgressBar(value, max = 100, type = 'primary') {
    const percentage = (value / max) * 100;
    return `
        <div class="progress mb-2">
            <div class="progress-bar progress-bar-${type}" 
                 role="progressbar" 
                 style="width: ${percentage}%"
                 aria-valuenow="${value}" 
                 aria-valuemin="0" 
                 aria-valuemax="${max}">
                ${percentage.toFixed(1)}%
            </div>
        </div>
    `;
}

// 推广链接生成器（示例）
function setupPromotionLinkGenerator() {
    const generatorHtml = `
        <div class="card mt-4">
            <div class="card-header">
                <h5 class="mb-0">推广链接生成器</h5>
            </div>
            <div class="card-body">
                <div class="row">
                    <div class="col-md-6 mb-3">
                        <label class="form-label">推广类型</label>
                        <select class="form-select" id="promotionType">
                            <option value="general">通用推广</option>
                            <option value="travel">旅行结伴</option>
                            <option value="animal">动物认领</option>
                            <option value="flower">送花服务</option>
                        </select>
                    </div>
                    <div class="col-md-6 mb-3">
                        <label class="form-label">用户ID</label>
                        <input type="text" class="form-control" id="userId" placeholder="输入用户ID">
                    </div>
                </div>
                <div class="mb-3">
                    <label class="form-label">推广链接</label>
                    <div class="input-group">
                        <input type="text" class="form-control" id="generatedLink" readonly>
                        <button class="btn btn-outline-secondary" type="button" onclick="copyGeneratedLink()">
                            <i class="fa fa-copy"></i>
                        </button>
                    </div>
                </div>
                <button class="btn btn-primary" onclick="generatePromotionLink()">
                    生成链接
                </button>
            </div>
        </div>
    `;
    
    const joinSection = document.getElementById('join');
    if (joinSection) {
        joinSection.insertAdjacentHTML('beforebegin', generatorHtml);
    }
}

// 全局函数供HTML调用
function generatePromotionLink() {
    const type = document.getElementById('promotionType').value;
    const userId = document.getElementById('userId').value || 'demo_user';
    const link = rewardManager.generatePromotionLink(userId, type);
    document.getElementById('generatedLink').value = link;
}

function copyGeneratedLink() {
    const linkInput = document.getElementById('generatedLink');
    if (linkInput.value) {
        rewardManager.copyPromotionLink(linkInput.value);
    }
}