516 lines
18 KiB
HTML
516 lines
18 KiB
HTML
<!doctype html>
|
|
<html lang="zh-CN">
|
|
<head>
|
|
<meta charset="UTF-8" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
<title id="page-title">神彩算 - 分销中心</title>
|
|
<script src="../public/css/layui/layui.js"></script>
|
|
<script src="../config.js"></script>
|
|
<script src="../public/js/qrcode.min.js"></script>
|
|
<script src="../utils/ApiClient.js"></script>
|
|
<script src="../utils/DateUtil.js"></script>
|
|
<script src="../utils/CommonUtil.js"></script>
|
|
<link rel="stylesheet" href="../public/css/layui/css/layui.css" />
|
|
<link rel="stylesheet" href="../public/css/public.css" />
|
|
<link rel="stylesheet" href="../public/css/distribution.css" />
|
|
</head>
|
|
<body>
|
|
<!-- Header -->
|
|
<nav class="topbar" id="navbar">
|
|
<div class="topbar__inner">
|
|
<a href="index.html" class="topbar__brand">
|
|
<img
|
|
src="../images/home-logo.png"
|
|
alt="神彩算"
|
|
class="topbar__logo"
|
|
/>
|
|
</a>
|
|
<div class="topbar__nav" id="navLotteryItems">
|
|
<!-- <a href="index.html" class="topbar__nav-link">首页</a> -->
|
|
</div>
|
|
<div class="topbar__user">
|
|
<div id="notLoggedInBox" class="topbar__guest">
|
|
<a href="login.html" class="topbar__btn topbar__btn--ghost">登录</a>
|
|
<a href="reg.html" class="topbar__btn topbar__btn--primary"
|
|
>免费注册</a
|
|
>
|
|
</div>
|
|
<div id="loggedInBox" class="topbar__logged" style="display: none">
|
|
<a href="usercenter.html" class="topbar__profile">
|
|
<img
|
|
id="userAvatar"
|
|
src="../public/img/userimg.png"
|
|
alt=""
|
|
class="topbar__avatar"
|
|
/>
|
|
<div class="topbar__meta">
|
|
<span id="userName" class="topbar__uname">用户</span>
|
|
<span id="userLevel" class="topbar__ubadge">会员</span>
|
|
</div>
|
|
</a>
|
|
<button class="topbar__btn topbar__btn--logout" onclick="logout()">
|
|
退出登录
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</nav>
|
|
|
|
<!-- Main Content -->
|
|
<main class="page-main">
|
|
<!-- User Info Card -->
|
|
<div class="user-card" id="userCard">
|
|
<div class="user-info-row">
|
|
<div class="user-avatar-placeholder" id="userAvatar">
|
|
<i class="layui-icon layui-icon-user"></i>
|
|
</div>
|
|
<div>
|
|
<div class="user-name">
|
|
<span id="userNickName">加载中...</span>
|
|
<span class="user-role-tag role-none" id="roleTag">未申请</span>
|
|
</div>
|
|
<div class="user-phone" id="userPhone">--</div>
|
|
</div>
|
|
</div>
|
|
<div class="balance-grid">
|
|
<div class="balance-item">
|
|
<div class="balance-label">可用余额</div>
|
|
<div class="balance-value">
|
|
<span id="balanceAvailable">0.00</span
|
|
><span class="unit">元</span>
|
|
</div>
|
|
</div>
|
|
<div class="balance-item">
|
|
<div class="balance-label">累计收益</div>
|
|
<div class="balance-value">
|
|
<span id="balanceIncome">0.00</span><span class="unit">元</span>
|
|
</div>
|
|
</div>
|
|
<div class="balance-item">
|
|
<div class="balance-label">冻结金额</div>
|
|
<div class="balance-value">
|
|
<span id="balanceFrozen">0.00</span><span class="unit">元</span>
|
|
</div>
|
|
</div>
|
|
<div class="balance-item">
|
|
<div class="balance-label">累计提现</div>
|
|
<div class="balance-value">
|
|
<span id="balanceWithdraw">0.00</span><span class="unit">元</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Action Section -->
|
|
<div class="action-section">
|
|
<div class="action-card">
|
|
<div class="action-card-title">
|
|
<i class="layui-icon layui-icon-share"></i> 推广分享
|
|
</div>
|
|
<div class="action-card-desc">
|
|
复制分销链接，邀请好友注册获得佣金；也可以生成推广二维码进行分享。
|
|
</div>
|
|
<button class="action-card-btn btn-apply-dist" id="fzlj" type="button">复制链接</button>
|
|
<button class="action-card-btn btn-apply-expert" id="tgewm" type="button">推广二维码</button>
|
|
</div>
|
|
<div class="action-card">
|
|
<div class="action-card-title">
|
|
<i class="layui-icon layui-icon-group"></i> 申请分销
|
|
</div>
|
|
<div class="action-card-desc">
|
|
成为分销商，推广赚佣金。邀请好友注册即可获得分销收益，多级返佣，轻松赚钱。
|
|
</div>
|
|
<button
|
|
class="action-card-btn btn-apply-dist"
|
|
id="btnApplyDist"
|
|
onclick="applyDistribution()"
|
|
>
|
|
申请分销
|
|
</button>
|
|
</div>
|
|
<div class="action-card">
|
|
<div class="action-card-title">
|
|
<i class="layui-icon layui-icon-star"></i> 申请专家
|
|
</div>
|
|
<div class="action-card-desc">
|
|
成为平台专家，发布预测文章获取收益。展示你的分析能力，让更多彩民看到你的精彩预测。
|
|
</div>
|
|
<button
|
|
class="action-card-btn btn-apply-expert"
|
|
id="btnApplyExpert"
|
|
onclick="applyExpert()"
|
|
>
|
|
申请专家
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Quick Links -->
|
|
<div class="links-section">
|
|
<div class="links-section-title">常用功能</div>
|
|
<div class="links-grid">
|
|
<a href="wodefenxiao.html" class="link-item">
|
|
<div class="link-item-icon icon-fenxiao">
|
|
<i class="layui-icon layui-icon-group"></i>
|
|
</div>
|
|
<div>
|
|
<div class="link-item-text">我的分销</div>
|
|
<div class="link-item-desc">查看下级用户和分销数据</div>
|
|
</div>
|
|
</a>
|
|
<a href="tuiguang.html" class="link-item">
|
|
<div class="link-item-icon icon-tuiguang">
|
|
<i class="layui-icon layui-icon-share"></i>
|
|
</div>
|
|
<div>
|
|
<div class="link-item-text">推广赚钱</div>
|
|
<div class="link-item-desc">生成推广链接和二维码</div>
|
|
</div>
|
|
</a>
|
|
<a href="tixian.html" class="link-item">
|
|
<div class="link-item-icon icon-tixian">
|
|
<i class="layui-icon layui-icon-rmb"></i>
|
|
</div>
|
|
<div>
|
|
<div class="link-item-text">我要提现</div>
|
|
<div class="link-item-desc">申请提现到账户</div>
|
|
</div>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</main>
|
|
|
|
<!-- Footer -->
|
|
<footer class="site-footer">
|
|
<div class="site-footer__inner">
|
|
<img
|
|
src="../images/home-logo.png"
|
|
alt="神彩算"
|
|
class="site-footer__logo"
|
|
/>
|
|
<p id="copyright-info">神彩算以开奖数据、免费文章、资讯推荐为核心</p>
|
|
<div class="site-footer__meta">
|
|
<a
|
|
id="beian"
|
|
href="https://beian.miit.gov.cn/"
|
|
target="_blank"
|
|
style="font-size: 12px; color: rgba(255, 255, 255, 0.5)"
|
|
>工信部备案号</a
|
|
>
|
|
<span id="additional-info">本站仅供数据分析参考</span>
|
|
</div>
|
|
</div>
|
|
</footer>
|
|
<button
|
|
class="gotop"
|
|
id="backTop"
|
|
type="button"
|
|
onclick="window.scrollTo({ top: 0, behavior: 'smooth' })"
|
|
>
|
|
↑
|
|
</button>
|
|
|
|
<script>
|
|
layui.use(["layer", "jquery"], function () {
|
|
var layer = layui.layer;
|
|
var $ = layui.$;
|
|
|
|
// Load page config
|
|
CommonUtil.loadPageConfig({ ads: false, links: false });
|
|
|
|
// Check login state for topbar
|
|
checkLogin();
|
|
renderNav();
|
|
initShareFunctions();
|
|
|
|
// Check auth and load user detail
|
|
CommonUtil.requireAuth(function () {
|
|
loadUserDetail();
|
|
});
|
|
|
|
function checkLogin() {
|
|
var token = CommonUtil.getToken();
|
|
if (token) {
|
|
$("#notLoggedInBox").hide();
|
|
$("#loggedInBox").css("display", "flex");
|
|
CommonUtil.getCurrentUserDetail(
|
|
function (data) {
|
|
if (data) {
|
|
$("#userName").text(data.nickName || "用户");
|
|
$("#userLevel").text(data.isExpert === "1" ? "专家" : "会员");
|
|
if (data.avatar) {
|
|
$("#userAvatar").attr("src", data.avatar);
|
|
}
|
|
}
|
|
},
|
|
function () {
|
|
$("#notLoggedInBox").show();
|
|
$("#loggedInBox").hide();
|
|
},
|
|
);
|
|
}
|
|
}
|
|
|
|
function renderNav() {
|
|
ApiClient.post("/api/web/menu/getFormatList", {}).then(
|
|
function (res) {
|
|
if (res.code !== 0 || !res.data) return;
|
|
var $nav = $("#navLotteryItems");
|
|
$nav.find(".topbar__nav-link").not(":first").remove();
|
|
$.each(res.data, function (i, item) {
|
|
$nav.append(
|
|
'<a href="cai.html?id=' +
|
|
item.suoxie +
|
|
'" class="topbar__nav-link">' +
|
|
item.name +
|
|
"</a>",
|
|
);
|
|
});
|
|
},
|
|
);
|
|
}
|
|
|
|
$(window).on("scroll", function () {
|
|
$(window).scrollTop() > 320
|
|
? $("#backTop").addClass("is-visible")
|
|
: $("#backTop").removeClass("is-visible");
|
|
});
|
|
|
|
function getApiBaseUrl() {
|
|
return (ApiClient.baseUrl || (window.CONFIG && CONFIG.API_BASE_URL) || window.location.origin || "").replace(/\/$/, "");
|
|
}
|
|
|
|
function normalizeShareLink(data) {
|
|
var affUrl = (data && (data.affUrl || data.shareUrl || data.inviteUrl || data.url)) || "";
|
|
if (!affUrl) return "";
|
|
if (/^https?:\/\//i.test(affUrl)) return affUrl;
|
|
return getApiBaseUrl() + "/html/reg.html?affUrl=" + String(affUrl).replace(/^\//, "");
|
|
}
|
|
|
|
function getAffInfo() {
|
|
return ApiClient.post("/api/web/rebate/getAffInfo", {}, { headers: CommonUtil.authHeaders() });
|
|
}
|
|
|
|
function copyText(text) {
|
|
if (navigator.clipboard && navigator.clipboard.writeText) {
|
|
return navigator.clipboard.writeText(text);
|
|
}
|
|
var $input = $("<textarea>").val(text).css({ position: "fixed", left: "-9999px", top: "-9999px" });
|
|
$("body").append($input);
|
|
$input[0].select();
|
|
document.execCommand("copy");
|
|
$input.remove();
|
|
return Promise.resolve();
|
|
}
|
|
|
|
function initShareFunctions() {
|
|
$("#fzlj").on("click", copyShareLink);
|
|
$("#tgewm").on("click", showQrCodeModal);
|
|
}
|
|
|
|
function copyShareLink() {
|
|
CommonUtil.requireAuth(function () {
|
|
getAffInfo()
|
|
.then(function (res) {
|
|
if (res.code !== 0 || !res.data) throw new Error(res.msg || "获取分享链接失败");
|
|
var shareLink = normalizeShareLink(res.data);
|
|
if (!shareLink) throw new Error("接口未返回分享链接");
|
|
return copyText(shareLink);
|
|
})
|
|
.then(function () {
|
|
layer.msg("链接已复制到剪贴板", { icon: 1, time: 1500 });
|
|
})
|
|
.catch(function (err) {
|
|
layer.msg(err.message || "复制失败，请手动复制", { icon: 2 });
|
|
});
|
|
});
|
|
}
|
|
|
|
function showQrCodeModal() {
|
|
CommonUtil.requireAuth(function () {
|
|
getAffInfo()
|
|
.then(function (res) {
|
|
if (res.code !== 0 || !res.data) throw new Error(res.msg || "获取推广信息失败");
|
|
var shareLink = normalizeShareLink(res.data);
|
|
if (res.data.affCodeUrl && res.data.affUrl) {
|
|
shareLink = String(res.data.affCodeUrl).replace(/\/$/, "") + "/" + String(res.data.affUrl).replace(/^\//, "");
|
|
}
|
|
if (!shareLink) throw new Error("接口未返回推广二维码链接");
|
|
createCustomModal(shareLink);
|
|
})
|
|
.catch(function (err) {
|
|
layer.msg(err.message || "生成二维码失败", { icon: 2 });
|
|
});
|
|
});
|
|
}
|
|
|
|
function createCustomModal(shareLink) {
|
|
var $mask = $('<div class="custom-modal-mask"></div>');
|
|
var $modal = $('<div class="custom-modal-content"></div>');
|
|
var $qrContainer = $('<div class="custom-qr-container"></div>');
|
|
$modal.append('<h3 class="custom-modal-title">推广二维码</h3>');
|
|
$modal.append($qrContainer);
|
|
$modal.append('<button class="custom-modal-close" type="button">关闭</button>');
|
|
$mask.append($modal);
|
|
$("body").append($mask);
|
|
new QRCode($qrContainer[0], {
|
|
text: shareLink,
|
|
width: 200,
|
|
height: 200,
|
|
colorDark: "#000000",
|
|
colorLight: "#ffffff",
|
|
correctLevel: QRCode.CorrectLevel.H,
|
|
});
|
|
$mask.on("click", function (event) {
|
|
if (event.target === $mask[0]) $mask.remove();
|
|
});
|
|
$modal.find(".custom-modal-close").on("click", function () {
|
|
$mask.remove();
|
|
});
|
|
}
|
|
|
|
function loadUserDetail() {
|
|
CommonUtil.getCurrentUserDetail(
|
|
function (data) {
|
|
if (!data) return;
|
|
|
|
// Display user info
|
|
$("#userNickName").text(
|
|
data.nickName || data.phoneNumber || "用户",
|
|
);
|
|
$("#userPhone").text(
|
|
data.phoneNumber
|
|
? data.phoneNumber.replace(/(\d{3})\d{4}(\d{4})/, "$1****$2")
|
|
: "--",
|
|
);
|
|
|
|
// Avatar
|
|
if (data.avatar) {
|
|
$("#userAvatar").replaceWith(
|
|
'<img class="user-avatar" src="' +
|
|
data.avatar +
|
|
'" alt="头像" />',
|
|
);
|
|
}
|
|
|
|
// Balances
|
|
$("#balanceAvailable").text(
|
|
(data.availableBalance || 0).toFixed(2),
|
|
);
|
|
$("#balanceIncome").text((data.totalIncome || 0).toFixed(2));
|
|
$("#balanceFrozen").text((data.frozenBalance || 0).toFixed(2));
|
|
$("#balanceWithdraw").text((data.totalWithdraw || 0).toFixed(2));
|
|
|
|
// Role tags
|
|
var $roleTag = $("#roleTag");
|
|
if (data.isDistribution === 1 || data.isDistribution === true) {
|
|
$roleTag
|
|
.text("分销商")
|
|
.removeClass("role-none role-expert")
|
|
.addClass("role-distribution");
|
|
$("#btnApplyDist").text("已开通").addClass("btn-disabled");
|
|
}
|
|
if (data.isExpert === 1 || data.isExpert === true) {
|
|
$roleTag
|
|
.text("专家")
|
|
.removeClass("role-none role-distribution")
|
|
.addClass("role-expert");
|
|
$("#btnApplyExpert").text("已开通").addClass("btn-disabled");
|
|
}
|
|
if (
|
|
(data.isDistribution === 1 || data.isDistribution === true) &&
|
|
(data.isExpert === 1 || data.isExpert === true)
|
|
) {
|
|
$roleTag.text("分销商 / 专家");
|
|
}
|
|
},
|
|
function (err) {
|
|
layer.msg("获取用户信息失败", { icon: 2 });
|
|
},
|
|
);
|
|
}
|
|
|
|
// Apply for distribution
|
|
window.applyDistribution = function () {
|
|
CommonUtil.requireAuth(function () {
|
|
layer.confirm(
|
|
"确定要申请成为分销商吗？",
|
|
{
|
|
title: "申请分销",
|
|
btn: ["确定申请", "取消"],
|
|
btnAlign: "c",
|
|
},
|
|
function (index) {
|
|
layer.close(index);
|
|
ApiClient.post(
|
|
"/api/web/user/applyDistribution",
|
|
{},
|
|
{
|
|
headers: CommonUtil.authHeaders(),
|
|
},
|
|
)
|
|
.then(function (res) {
|
|
if (res.code === 0) {
|
|
layer.msg(
|
|
"申请成功！",
|
|
{ icon: 1, time: 2000 },
|
|
function () {
|
|
loadUserDetail();
|
|
},
|
|
);
|
|
} else {
|
|
layer.msg(res.msg || "申请失败", { icon: 2 });
|
|
}
|
|
})
|
|
.catch(function (err) {
|
|
layer.msg("网络错误，请稍后重试", { icon: 2 });
|
|
});
|
|
},
|
|
);
|
|
});
|
|
};
|
|
|
|
// Apply for expert
|
|
window.applyExpert = function () {
|
|
CommonUtil.requireAuth(function () {
|
|
layer.confirm(
|
|
"确定要申请成为专家吗？",
|
|
{
|
|
title: "申请专家",
|
|
btn: ["确定申请", "取消"],
|
|
btnAlign: "c",
|
|
},
|
|
function (index) {
|
|
layer.close(index);
|
|
ApiClient.post(
|
|
"/api/web/user/applyExpert",
|
|
{},
|
|
{
|
|
headers: CommonUtil.authHeaders(),
|
|
},
|
|
)
|
|
.then(function (res) {
|
|
if (res.code === 0) {
|
|
layer.msg(
|
|
"申请成功！",
|
|
{ icon: 1, time: 2000 },
|
|
function () {
|
|
loadUserDetail();
|
|
},
|
|
);
|
|
} else {
|
|
layer.msg(res.msg || "申请失败", { icon: 2 });
|
|
}
|
|
})
|
|
.catch(function (err) {
|
|
layer.msg("网络错误，请稍后重试", { icon: 2 });
|
|
});
|
|
},
|
|
);
|
|
});
|
|
};
|
|
});
|
|
</script>
|
|
</body>
|
|
</html>
|