重构关于我们、商家申请和案例页面，优化布局和内容展示
This commit is contained in:
455
website/js/reward.js
Normal file
455
website/js/reward.js
Normal file
@@ -0,0 +1,455 @@
|
||||
// 推广奖励功能管理类
|
||||
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);
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user