彩先知pc
This commit is contained in:
rain
+595
@@ -0,0 +1,595 @@
|
||||
<!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="../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/finance.css" />
|
||||
</head>
|
||||
<body>
|
||||
<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"></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="headerAvatar"
|
||||
src="../public/img/userimg.png"
|
||||
alt=""
|
||||
class="topbar__avatar"
|
||||
/>
|
||||
<div class="topbar__meta">
|
||||
<span id="headerUserName" class="topbar__uname">用户</span>
|
||||
<span id="headerUserLevel" class="topbar__ubadge">会员</span>
|
||||
</div>
|
||||
</a>
|
||||
<button
|
||||
class="topbar__btn topbar__btn--logout"
|
||||
onclick="handleLogout()"
|
||||
>
|
||||
退出登录
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<div class="je-container">
|
||||
<div class="je-card">
|
||||
<div class="je-tabs">
|
||||
<div
|
||||
class="je-tab active"
|
||||
data-type="POINTS"
|
||||
onclick="switchTab(this)"
|
||||
>
|
||||
<span class="tab-icon icon-points">P</span>积分明细
|
||||
</div>
|
||||
<div class="je-tab" data-type="BALANCE" onclick="switchTab(this)">
|
||||
<span class="tab-icon icon-balance">B</span>余额明细
|
||||
</div>
|
||||
<div
|
||||
class="je-tab"
|
||||
data-type="SALES_BALANCE"
|
||||
onclick="switchTab(this)"
|
||||
>
|
||||
<span class="tab-icon icon-sales">S</span>销售余额明细
|
||||
</div>
|
||||
<div
|
||||
class="je-tab"
|
||||
data-type="EXPERT_BALANCE"
|
||||
onclick="switchTab(this)"
|
||||
>
|
||||
<span class="tab-icon icon-expert">E</span>专家余额明细
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="je-summary">
|
||||
<div>
|
||||
<div class="je-summary-label">
|
||||
当前 <span id="currentTypeName">积分</span>
|
||||
</div>
|
||||
<div class="je-summary-value" id="currentBalance">
|
||||
0<span id="currentUnit">点</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="je-summary-actions" id="summaryActions">
|
||||
<a href="chongzhi.html" class="je-btn-recharge" id="btnRecharge"
|
||||
>充值</a
|
||||
>
|
||||
<a
|
||||
href="tixian.html"
|
||||
class="je-btn-withdraw"
|
||||
id="btnWithdraw"
|
||||
style="display: none"
|
||||
>提现</a
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<table class="je-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>类型</th>
|
||||
<th>金额</th>
|
||||
<th>操作类型</th>
|
||||
<th class="balance-after-col" style="display: none">
|
||||
变动后余额
|
||||
</th>
|
||||
<th>备注</th>
|
||||
<th>时间</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody id="flowTableBody">
|
||||
<tr>
|
||||
<td colspan="5" class="je-empty">
|
||||
<div class="je-empty-icon">📋</div>
|
||||
<div class="je-empty-text">加载中...</div>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
<div class="je-pagination" id="flowPager"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<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>
|
||||
const $ = layui.$;
|
||||
var currentCapitalType = "POINTS";
|
||||
var currentPageNum = 1;
|
||||
var pageSize = 10;
|
||||
var userData = null;
|
||||
|
||||
var typeNames = {
|
||||
POINTS: "积分",
|
||||
BALANCE: "余额",
|
||||
SALES_BALANCE: "销售余额",
|
||||
EXPERT_BALANCE: "专家余额",
|
||||
};
|
||||
var typeUnits = {
|
||||
POINTS: "点",
|
||||
BALANCE: "元",
|
||||
SALES_BALANCE: "元",
|
||||
EXPERT_BALANCE: "元",
|
||||
};
|
||||
var typeBalanceKeys = {
|
||||
POINTS: "points",
|
||||
BALANCE: "accountBalance",
|
||||
SALES_BALANCE: "salesBalance",
|
||||
EXPERT_BALANCE: "expertBalance",
|
||||
};
|
||||
var typeCssClass = {
|
||||
POINTS: "je-capital-points",
|
||||
BALANCE: "je-capital-balance",
|
||||
SALES_BALANCE: "je-capital-sales",
|
||||
EXPERT_BALANCE: "je-capital-expert",
|
||||
};
|
||||
var flowTypeMap = {
|
||||
BALANCE: "",
|
||||
SALES_BALANCE: "sales",
|
||||
EXPERT_BALANCE: "expert",
|
||||
};
|
||||
|
||||
function checkAuth() {
|
||||
if (CommonUtil.getAuthToken()) return true;
|
||||
layui.use("layer", function () {
|
||||
layui.layer.confirm(
|
||||
"请先登录",
|
||||
{ btn: ["去登录", "取消"] },
|
||||
function (index) {
|
||||
layui.layer.close(index);
|
||||
window.location.href = "login.html";
|
||||
},
|
||||
);
|
||||
});
|
||||
return false;
|
||||
}
|
||||
|
||||
function updateHeaderState() {
|
||||
if (!CommonUtil.getAuthToken()) {
|
||||
$("#notLoggedInBox").show();
|
||||
$("#loggedInBox").hide();
|
||||
return;
|
||||
}
|
||||
|
||||
$("#notLoggedInBox").hide();
|
||||
$("#loggedInBox").css("display", "flex");
|
||||
CommonUtil.getCurrentUserDetail(
|
||||
function (data) {
|
||||
userData = data || {};
|
||||
$("#headerUserName").text(
|
||||
userData.nickName || userData.nickname || "用户",
|
||||
);
|
||||
$("#headerUserLevel").text(
|
||||
CommonUtil.getUserLevelText
|
||||
? CommonUtil.getUserLevelText(userData)
|
||||
: "会员",
|
||||
);
|
||||
if (userData.avatar)
|
||||
$("#headerAvatar").attr("src", userData.avatar);
|
||||
updateSummary();
|
||||
},
|
||||
function () {
|
||||
$("#notLoggedInBox").show();
|
||||
$("#loggedInBox").hide();
|
||||
},
|
||||
);
|
||||
}
|
||||
|
||||
function renderNav() {
|
||||
ApiClient.get(ApiClient.API.homeNav).then(function (res) {
|
||||
if (!ApiClient.isSuccess(res) || !res.data) return;
|
||||
var $nav = $("#navLotteryItems");
|
||||
$nav.empty();
|
||||
$.each(ApiClient.asArray(res.data), function (i, item) {
|
||||
if (item.type && item.type !== "lottery") return;
|
||||
var code = item.code || item.suoxie || "";
|
||||
if (!code) return;
|
||||
$nav.append(
|
||||
'<a href="cai.html?id=' +
|
||||
encodeURIComponent(code) +
|
||||
'" class="topbar__nav-link">' +
|
||||
escapeHtml(item.name || item.lotteryName || code) +
|
||||
"</a>",
|
||||
);
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
$(window).on("scroll", function () {
|
||||
$(window).scrollTop() > 320
|
||||
? $("#backTop").addClass("is-visible")
|
||||
: $("#backTop").removeClass("is-visible");
|
||||
});
|
||||
|
||||
function switchTab(el) {
|
||||
$(".je-tab").removeClass("active");
|
||||
$(el).addClass("active");
|
||||
currentCapitalType = $(el).data("type");
|
||||
currentPageNum = 1;
|
||||
updateSummary();
|
||||
loadFlowList(1);
|
||||
}
|
||||
|
||||
function updateSummary() {
|
||||
$("#currentTypeName").text(typeNames[currentCapitalType]);
|
||||
$("#currentUnit").text(typeUnits[currentCapitalType]);
|
||||
if (userData) {
|
||||
var key = typeBalanceKeys[currentCapitalType];
|
||||
var val = firstValue(
|
||||
userData,
|
||||
[key, legacyBalanceKey(currentCapitalType)],
|
||||
0,
|
||||
);
|
||||
$("#currentBalance").html(
|
||||
escapeHtml(val) +
|
||||
"<span>" +
|
||||
typeUnits[currentCapitalType] +
|
||||
"</span>",
|
||||
);
|
||||
}
|
||||
|
||||
if (currentCapitalType === "BALANCE") {
|
||||
$("#btnRecharge").show();
|
||||
$("#btnWithdraw").show();
|
||||
} else if (currentCapitalType === "EXPERT_BALANCE") {
|
||||
$("#btnRecharge").hide();
|
||||
$("#btnWithdraw").show();
|
||||
} else {
|
||||
$("#btnRecharge").hide();
|
||||
$("#btnWithdraw").hide();
|
||||
}
|
||||
}
|
||||
|
||||
function loadFlowList(pageNum) {
|
||||
currentPageNum = pageNum || 1;
|
||||
renderLoadingTable();
|
||||
|
||||
if (currentCapitalType === "POINTS") {
|
||||
loadPointFlowList(currentPageNum);
|
||||
return;
|
||||
}
|
||||
|
||||
ApiClient.get(ApiClient.API.walletFlowList, {
|
||||
flowType: flowTypeMap[currentCapitalType],
|
||||
pageNum: currentPageNum,
|
||||
pageSize: pageSize,
|
||||
})
|
||||
.then(function (res) {
|
||||
if (ApiClient.isSuccess(res) && res.data) {
|
||||
var page = normalizePageData(res.data);
|
||||
renderFlowTable(page.records);
|
||||
renderFlowPager(page.total);
|
||||
} else {
|
||||
renderEmptyTable();
|
||||
}
|
||||
})
|
||||
.catch(function () {
|
||||
renderEmptyTable();
|
||||
});
|
||||
}
|
||||
|
||||
function loadPointFlowList(pageNum) {
|
||||
ApiClient.get(ApiClient.API.mineSignInList, {
|
||||
pageNum: pageNum,
|
||||
pageSize: pageSize,
|
||||
})
|
||||
.then(function (res) {
|
||||
if (ApiClient.isSuccess(res) && res.data) {
|
||||
var page = normalizePageData(res.data);
|
||||
var records = page.records.map(function (item) {
|
||||
return {
|
||||
capitalType: "POINTS",
|
||||
amount: item.pointsAwarded || item.points || item.amount || 0,
|
||||
operationType: "ADD",
|
||||
remark: item.remark || item.signDate || "签到奖励",
|
||||
createTime:
|
||||
item.createTime || item.signTime || item.signDate || "",
|
||||
};
|
||||
});
|
||||
renderFlowTable(records);
|
||||
renderFlowPager(page.total);
|
||||
} else {
|
||||
renderEmptyTable();
|
||||
}
|
||||
})
|
||||
.catch(function () {
|
||||
renderEmptyTable();
|
||||
});
|
||||
}
|
||||
|
||||
function renderFlowTable(records) {
|
||||
var $tbody = $("#flowTableBody");
|
||||
$tbody.empty();
|
||||
if (!records || records.length === 0) {
|
||||
renderEmptyTable();
|
||||
return;
|
||||
}
|
||||
|
||||
$.each(records, function (i, item) {
|
||||
var amount = firstValue(
|
||||
item,
|
||||
[
|
||||
"amountText",
|
||||
"changeAmountText",
|
||||
"amount",
|
||||
"changeAmount",
|
||||
"money",
|
||||
"flowAmount",
|
||||
],
|
||||
0,
|
||||
);
|
||||
var opType = resolveOperationType(item, amount);
|
||||
var opClass = opType === "ADD" ? "je-op-add" : "je-op-subtract";
|
||||
var opText =
|
||||
currentCapitalType === "POINTS"
|
||||
? opType === "ADD"
|
||||
? "收入"
|
||||
: "支出"
|
||||
: firstValue(
|
||||
item,
|
||||
["flowName", "typeText", "operationName"],
|
||||
opType === "ADD" ? "收入" : "支出",
|
||||
);
|
||||
var amountClass =
|
||||
opType === "ADD" ? "je-amount-add" : "je-amount-subtract";
|
||||
var capitalType = normalizeCapitalType(item);
|
||||
var capitalClass = typeCssClass[capitalType] || "je-capital-balance";
|
||||
var remark = firstValue(
|
||||
item,
|
||||
["remark", "description", "title"],
|
||||
"-",
|
||||
);
|
||||
var time = firstValue(
|
||||
item,
|
||||
["createTime", "flowTime", "payTime", "updateTime"],
|
||||
"-",
|
||||
);
|
||||
$tbody.append(
|
||||
"<tr>" +
|
||||
'<td><span class="je-capital-type ' +
|
||||
capitalClass +
|
||||
'">' +
|
||||
escapeHtml(typeNames[capitalType] || capitalType) +
|
||||
"</span></td>" +
|
||||
'<td><span class="je-amount ' +
|
||||
amountClass +
|
||||
'">' +
|
||||
escapeHtml(formatSignedAmount(amount, opType)) +
|
||||
"</span></td>" +
|
||||
'<td><span class="je-op-type ' +
|
||||
opClass +
|
||||
'">' +
|
||||
opText +
|
||||
"</span></td>" +
|
||||
'<td style="max-width:200px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;" title="' +
|
||||
escapeHtml(remark) +
|
||||
'">' +
|
||||
escapeHtml(remark) +
|
||||
"</td>" +
|
||||
'<td style="white-space:nowrap;color:var(--text-muted);">' +
|
||||
escapeHtml(time) +
|
||||
"</td>" +
|
||||
"</tr>",
|
||||
);
|
||||
});
|
||||
}
|
||||
|
||||
function renderLoadingTable() {
|
||||
$("#flowTableBody").html(
|
||||
'<tr><td colspan="' +
|
||||
emptyColspan() +
|
||||
'" class="je-empty">' +
|
||||
'<div class="je-empty-icon">📋</div>' +
|
||||
'<div class="je-empty-text">加载中...</div>' +
|
||||
"</td></tr>",
|
||||
);
|
||||
}
|
||||
|
||||
function renderEmptyTable() {
|
||||
$("#flowTableBody").html(
|
||||
'<tr><td colspan="' +
|
||||
emptyColspan() +
|
||||
'" class="je-empty">' +
|
||||
'<div class="je-empty-icon">📋</div>' +
|
||||
'<div class="je-empty-text">暂无记录</div>' +
|
||||
"</td></tr>",
|
||||
);
|
||||
}
|
||||
|
||||
function renderFlowPager(total) {
|
||||
layui.laypage.render({
|
||||
elem: "flowPager",
|
||||
count: total,
|
||||
limit: pageSize,
|
||||
curr: currentPageNum,
|
||||
jump: function (obj, first) {
|
||||
if (!first) loadFlowList(obj.curr);
|
||||
},
|
||||
});
|
||||
}
|
||||
|
||||
function normalizePageData(data) {
|
||||
var records = ApiClient.asArray(data);
|
||||
return {
|
||||
records: records,
|
||||
total: Number(
|
||||
data.totalRow || data.total || data.count || records.length || 0,
|
||||
),
|
||||
};
|
||||
}
|
||||
|
||||
function normalizeCapitalType(item) {
|
||||
if (item.capitalType && typeNames[item.capitalType])
|
||||
return item.capitalType;
|
||||
var flowType = String(item.flowType || "").toLowerCase();
|
||||
if (flowType === "sales") return "SALES_BALANCE";
|
||||
if (flowType === "expert") return "EXPERT_BALANCE";
|
||||
if (flowType === "points") return "POINTS";
|
||||
return currentCapitalType;
|
||||
}
|
||||
|
||||
function resolveOperationType(item, amount) {
|
||||
var raw = String(
|
||||
item.operationType ||
|
||||
item.opType ||
|
||||
item.direction ||
|
||||
item.inOut ||
|
||||
item.type ||
|
||||
"",
|
||||
).toLowerCase();
|
||||
if (/expense|expenditure|debit|consume|purchase|withdraw|payment/.test(raw))
|
||||
return "SUB";
|
||||
if (/add|income|in|plus|收入|增加|充值|返利|佣金|奖励/.test(raw))
|
||||
return "ADD";
|
||||
if (/sub|out|minus|支出|减少|消费|购买|提现|扣除/.test(raw))
|
||||
return "SUB";
|
||||
return Number(amount) < 0 ? "SUB" : "ADD";
|
||||
}
|
||||
|
||||
function formatSignedAmount(amount, opType) {
|
||||
var value = String(
|
||||
amount === undefined || amount === null || amount === "" ? 0 : amount,
|
||||
)
|
||||
.replace(/^\s*[+-]\s*/, "")
|
||||
.trim();
|
||||
if (!value) value = "0";
|
||||
return opType === "ADD" ? value : "-" + value;
|
||||
}
|
||||
|
||||
function emptyColspan() {
|
||||
return 5;
|
||||
}
|
||||
|
||||
function firstValue(source, keys, fallback) {
|
||||
source = source || {};
|
||||
for (var i = 0; i < keys.length; i++) {
|
||||
var key = keys[i];
|
||||
if (
|
||||
key &&
|
||||
source[key] !== undefined &&
|
||||
source[key] !== null &&
|
||||
source[key] !== ""
|
||||
) {
|
||||
return source[key];
|
||||
}
|
||||
}
|
||||
return fallback;
|
||||
}
|
||||
|
||||
function legacyBalanceKey(type) {
|
||||
if (type === "BALANCE") return "balance";
|
||||
if (type === "SALES_BALANCE") return "distributionBalance";
|
||||
if (type === "EXPERT_BALANCE") return "expertCommission";
|
||||
return "";
|
||||
}
|
||||
|
||||
function escapeHtml(value) {
|
||||
return CommonUtil.escapeHtml
|
||||
? CommonUtil.escapeHtml(value)
|
||||
: String(value || "");
|
||||
}
|
||||
|
||||
function handleLogout() {
|
||||
ApiClient.post(ApiClient.API.authLogout, {})
|
||||
.then(function () {
|
||||
localStorage.removeItem("token");
|
||||
window.location.href = "login.html";
|
||||
})
|
||||
.catch(function () {
|
||||
localStorage.removeItem("token");
|
||||
window.location.href = "login.html";
|
||||
});
|
||||
}
|
||||
|
||||
$(function () {
|
||||
CommonUtil.loadPageConfig();
|
||||
renderNav();
|
||||
updateHeaderState();
|
||||
|
||||
if (!checkAuth()) return;
|
||||
|
||||
var urlParams = new URLSearchParams(window.location.search);
|
||||
var typeParam = urlParams.get("type");
|
||||
if (typeParam && typeNames[typeParam]) {
|
||||
currentCapitalType = typeParam;
|
||||
$(".je-tab").removeClass("active");
|
||||
$('.je-tab[data-type="' + typeParam + '"]').addClass("active");
|
||||
}
|
||||
updateSummary();
|
||||
loadFlowList(1);
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user