rain
596 lines
18 KiB
HTML
596 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="../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>
|