|
|
楼主 |
发表于 2025-4-17 10:52:26
|
显示全部楼层
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>邻几体彩_V26</title>
<style>
/* 中奖特效样式 */
/* 自动模式按钮 - 更美观的样式 */
/* 添加一些基本样式 */
</style>
</head>
<body>
<div class="tab-app">
<!-- 中奖特效 -->
<div class="winning-effect" id="winningEffect">
<div class="winning-text">恭喜您中奖了</div>
<div class="winning-amount" id="winningAmount">500元</div>
</div>
<!-- 礼炮特效容器 -->
<div class="confetti-container" id="confetti-container"></div>
<div class="tab-header">
<div class="tab-item active" data-tab="tab1">
<div class="tab-icon">💰</div>
<div class="tab-text">即开兑奖</div>
</div>
<div class="tab-item" data-tab="tab2">
<div class="tab-icon">¥</div>
<div class="tab-text">订单表格</div>
</div>
<div class="tab-item" data-tab="tab3">
<div class="tab-icon">📅</div>
<div class="tab-text">兑换明细</div>
</div>
<div class="tab-item" data-tab="tab4">
<div class="tab-icon">🔍</div>
<div class="tab-text">支付查询</div>
</div>
<div class="tab-item" data-tab="tab5">
<div class="tab-icon">🔗</div>
<div class="tab-text">小悠连接</div>
</div>
<div class="tab-item" data-tab="tab6">
<div class="tab-icon">i</div>
<div class="tab-text">关于</div>
</div>
</div>
<div class="tab-content-container">
<div class="tab-content active" id="tab1">
<div class="lottery-order">
<div class="input-group">
<input type="text" id="lotteryInput" placeholder="手动输入或扫码保安区二维码" />
<button class="action-btn manual-verify-btn" style="min-width: auto; padding: 0 15px">
<span class="btn-icon">🔍</span>
<span class="btn-icon" style="display: none" id="订单号"></span>
</button>
</div>
<div class="action-buttons">
<button class="action-btn manual-verify-btn" id="手动核销ID">
<span class="btn-icon">✓</span>
<span>手动核销</span>
</button>
<button class="action-btn lottery-input-btn">
<span class="btn-icon">🎫</span>
<span>电彩录入</span>
</button>
<button class="action-btn alipay-btn">
<span class="btn-icon">支</span>
<span>支付宝结算</span>
</button>
<button class="action-btn cash-payment-btn" id="cashPaymentBtn">
<span class="btn-icon">💰</span>
<span>现金结算F1</span>
</button>
<button class="action-btn auto-mode-btn" id="autoModeBtn" onclick="切换中奖显示模式()">
<span class="btn-icon">⚙️</span>
<span id="中奖显示样式">只显中奖</span>
</button>
</div>
<table class="layui-table-header 表格头" id="用户表格" lay-filter="用户"></table>
</div>
</div>
<!-- 其他标签页内容 -->
<div class="tab-content" id="tab2">
<!--<h3>交易流水内容</h3>
<p>这里是交易流水的内容区域</p>-->
<table class="layui-table-header 表格头" id="订单表格" lay-filter="订单表格过滤器"></table>
</div>
<div class="tab-content" id="tab3">
<h3>兑换明细内容</h3>
<p>这里是兑换明细的内容区域</p>
</div>
<div class="tab-content" id="tab4">
<h3>支付查询内容</h3>
<p>这里是支付查询的内容区域</p>
</div>
<div class="tab-content" id="tab5">
<h3>小悠连接内容</h3>
<p>这里是小悠连接的内容区域</p>
</div>
<div class="tab-content" id="tab6">
<h3>关于内容</h3>
<p>这里是关于的内容区域</p>
</div>
</div>
<!-- 底部状态栏 -->
<div class="footer-status-bar">
<div class="store-info">
<div class="store-info-item">
<span class="store-info-label">店号:</span>
<span class="store-info-value" id="底部店号">AAAAA</span>
</div>
<div class="store-info-item">
<span class="store-info-label">店名:</span>
<span class="store-info-value" id="底部店名">BBBBB</span>
</div>
<div class="store-info-item">
<span class="store-info-label">工号:</span>
<span class="store-info-value" id="底部工号">CCCCC</span>
</div>
<div class="store-info-item">
<span class="store-info-label">标识:</span>
<span class="store-info-value" id="底部特征">DDDDD</span>
</div>
</div>
<div class="system-status">
<span style="color: Blue">机号</span>
<span id="机号" style="color: Blue">EEEEE</span>
</div>
</div>
</div>
<script>
var 中奖显示;
function 切换中奖显示模式() {
if ($("#中奖显示样式").text() == "只显中奖") {
$("#中奖显示样式").text("显示全部");
中奖显示 = 1;
} else {
中奖显示 = 0;
$("#中奖显示样式").text("只显中奖");
}
共用重载表格();
获取订单信息();
}
function 体彩兑奖调用(票号, 兑奖方式) {
//扫码0 手工1 电彩3
let 局_店号 = $("#底部店号").text();
let 局_店名 = $("#底部店名").text();
let 局_工号 = $("#底部工号").text();
let 局_机号 = $("#机号").text();
let 局_特征 = $("#底部特征").text();
let 局_订单号 = $("#订单号").text();
var 局_兑奖返回 = FoFJsCodeJQAjax("/体彩兑奖?store_code=" + 局_店号 + "&feature=" + 局_特征 + "&operator=" + 局_工号 + "&machine_code=" + 局_机号 + "&store_name=" + 局_店名 + "&redemption_method=" + 兑奖方式 + "&order_number=" + 局_订单号 + "&ticket_number=" + 票号);
if (局_兑奖返回["Code"] == "0") {
// cashPaymentBtn(局_兑奖返回["data"]["paidAmt")
// lay_popup.open({ [lay_popup.config.content]: 局_兑奖返回["Msg"], [lay_popup.config.icon]: lay_popup.icon.smile });
showWinningEffect(局_兑奖返回["data"]["paidAmt"]);
} else {
lay_popup.open({ [lay_popup.config.content]: 局_兑奖返回["Msg"], [lay_popup.config.icon]: lay_popup.icon.cry });
}
// showCustomAlert(局_兑奖返回["Msg"], ensureFocus);
共用重载表格();
//获取订单信息(); //刷新
}
// 自定义提示框函数
function showCustomAlert(message, callback) {
// 创建遮罩层
const overlay = document.createElement("div");
overlay.className = "alert-overlay";
// 创建提示框
const alertBox = document.createElement("div");
alertBox.className = "custom-alert";
alertBox.innerHTML = `
<p>${message}</p>
<button id="alertConfirmBtn">确定</button>
`;
// 添加到body
document.body.appendChild(overlay);
document.body.appendChild(alertBox);
// 自动聚焦到确定按钮
setTimeout(() => {
const confirmBtn = document.getElementById("alertConfirmBtn");
if (confirmBtn) confirmBtn.focus();
}, 10);
// 为确定按钮添加事件
document.getElementById("alertConfirmBtn").addEventListener("click", function () {
document.body.removeChild(overlay);
document.body.removeChild(alertBox);
if (callback) callback();
});
// 点击遮罩层也关闭
overlay.addEventListener("click", function () {
document.body.removeChild(overlay);
document.body.removeChild(alertBox);
if (callback) callback();
});
// 回车键关闭提示框
alertBox.addEventListener("keydown", function (e) {
if (e.key === "Enter" || e.keyCode === 13) {
document.body.removeChild(overlay);
document.body.removeChild(alertBox);
if (callback) callback();
}
});
}
// 选项卡切换功能
function setupTabSwitching() {
const tabItems = document.querySelectorAll(".tab-item");
const tabContents = document.querySelectorAll(".tab-content");
tabItems.forEach((tab) => {
tab.addEventListener("click", function () {
// 移除所有活动状态
tabItems.forEach((item) => item.classList.remove("active"));
tabContents.forEach((content) => content.classList.remove("active"));
// 添加当前活动状态
this.classList.add("active");
const tabId = this.getAttribute("data-tab");
document.getElementById(tabId).classList.add("active");
// 如果是第一个标签页，确保输入框获得焦点
if (tabId === "tab1") {
setTimeout(() => {
const inputField = document.getElementById("lotteryInput");
inputField.focus();
inputField.select();
}, 0);
}
});
});
}
document.addEventListener("DOMContentLoaded", function () {
// 初始化选项卡切换
setupTabSwitching();
const inputField = document.getElementById("lotteryInput");
// 确保焦点函数
function ensureFocus() {
inputField.focus();
inputField.select();
}
// 初始设置焦点
setTimeout(ensureFocus, 100);
// 修复点击输入框无法获取焦点的问题
inputField.addEventListener("mousedown", function (e) {
e.preventDefault();
ensureFocus();
});
// 回车键事件处理 - 使用自定义提示框
inputField.addEventListener("keydown", function (e) {
if (e.key === "Enter" || e.keyCode === 13) {
e.preventDefault();
// 使用自定义提示框,并在关闭后立即恢复焦点
体彩兑奖调用($("#lotteryInput").val(), 1);
}
});
// 窗口获得焦点时自动聚焦
window.addEventListener("focus", ensureFocus);
// 防止其他元素干扰焦点
document.addEventListener("click", function (e) {
if (e.target !== inputField && !e.target.closest(".custom-alert")) {
setTimeout(ensureFocus, 0);
}
});
// 现金结算按钮点击事件
document.getElementById("cashPaymentBtn").addEventListener("click", function () {
店号 = $("#底部店号").text();
特征 = $("#底部特征").text();
工号 = $("#底部工号").text();
机号 = $("#机号").text();
订单号 = $("#订单号").text();
结算方式 = 1;
var 局_ret = FoFJsCodeJQAjax("/体彩结算?store_code=" + 店号 + "&feature=" + 特征 + "&operator=" + 工号 + "&machine_code=" + 机号 + "&order_id=" + 订单号 + "&redemption_method=" + 结算方式);
if (局_ret["Code"] == "0") {
lay_popup.open({
[lay_popup.config.title]: 局_ret["redemption_method"] + " 结算",
[lay_popup.config.content]: "订单号:" + 局_ret["order_id"] + "<br>" + 局_ret["Msg"] + "<br>" + "兑换金额:" + 局_ret["total_amount"],
[lay_popup.config.icon]: lay_popup.icon.smile,
[lay_popup.config.yes]: function (index) {
// 在这里添加点击“确定”后的操作
共用重载表格();
获取订单信息();
lay_popup.close(index);
// 可以在这里执行其他逻辑，例如发送请求、更新数据等
}
});
} else {
lay_popup.open({
[lay_popup.config.title]: 局_ret["redemption_method"] + " 结算",
[lay_popup.config.content]: 局_ret["Msg"],
[lay_popup.config.icon]: lay_popup.icon.cry,
[lay_popup.config.yes]: function (index) {
// 在这里添加点击“确定”后的操作
共用重载表格();
获取订单信息();
lay_popup.close(index);
// 可以在这里执行其他逻辑，例如发送请求、更新数据等
}
});
}
});
//手动核销按钮
document.getElementById("手动核销ID").addEventListener("click", function () {
体彩兑奖调用($("#lotteryInput").val(), 2); //手动核销
});
// 显示中奖特效函数
// F1快捷键
document.addEventListener("keydown", function (e) {
if (e.key === "F1") {
e.preventDefault();
document.getElementById("cashPaymentBtn").click();
}
});
// 表格初始化 // 底部状态栏初始化
let 表格对象 = new lay_table(
{
[lay_table.config.elem]: "#用户表格",
[lay_table.config.url]: "/体彩刷新订单?store_code=" + $("#底部店号").text() + "&feature=" + $("#底部特征").text() + "&operator=" + $("#底部工号").text() + "&Show_type=" + 中奖显示,
[lay_table.config.id]: "用户数据",
[lay_table.config.limit]: 200, // 不设置默认15条
[lay_table.config.height]: 380, // 不设置默认15条
[lay_table.config.loading]: true, // 不设置默认15条
/* [lay_表格.配置.分页]: {
[lay_分页.配置.起始页]: 1
},*/
[lay_table.config.cols]: [
[
{
[lay_table.col_config.field]: "ID",
[lay_table.col_config.width]: 40,
[lay_table.col_config.title]: "ID"
},
{
[lay_table.col_config.width]: 290,
[lay_table.col_config.field]: "ticket_number",
[lay_table.col_config.title]: "票号"
},
{
[lay_table.col_config.width]: 70,
[lay_table.col_config.field]: "amount",
[lay_table.col_config.title]: "金额"
},
{
[lay_table.col_config.width]: 80,
[lay_table.col_config.field]: "note",
[lay_table.col_config.title]: "备注"
},
{
[lay_table.col_config.width]: 70,
[lay_table.col_config.field]: "status",
[lay_table.col_config.title]: "状态",
[lay_table.col_config.hide]: true
},
{
[lay_table.col_config.width]: 188,
[lay_table.col_config.field]: "tradingTime",
[lay_table.col_config.title]: "核销时间"
},
{
[lay_table.col_config.width]: 100,
[lay_table.col_config.field]: "machine_code",
[lay_table.col_config.title]: "机号"
},
{
[lay_table.col_config.width]: 100,
[lay_table.col_config.field]: "operator",
[lay_table.col_config.title]: "工号"
},
{
[lay_table.col_config.width]: 70,
[lay_table.col_config.field]: "redeem_method",
[lay_table.col_config.title]: "方式"
},
{
[lay_table.col_config.width]: 170,
[lay_table.col_config.title]: "工具栏",
[lay_table.col_config.toolbar]: "#工具栏演示"
}
]
]
}
);
let 表格对象2 = new lay_table({
[lay_table.config.elem]: "#订单表格",
[lay_table.config.url]: "/体彩刷新订单?store_code=" + $("#底部店号").text() + "&feature=" + $("#底部特征").text() + "&operator=" + $("#底部工号").text() + "&Show_type=" + 中奖显示,
[lay_table.config.id]: "订单表格",
[lay_table.config.limit]: 200, // 不设置默认15条
[lay_table.config.height]: 485, // 不设置默认15条485
[lay_table.config.loading]: true, // 不设置默认15条
/* [lay_表格.配置.分页]: {
[lay_分页.配置.起始页]: 1
},*/
[lay_table.config.cols]: [
[
{
[lay_table.col_config.field]: "ID",
[lay_table.col_config.width]: 40,
[lay_table.col_config.title]: "ID"
},
{
[lay_table.col_config.width]: 290,
[lay_table.col_config.field]: "ticket_number",
[lay_table.col_config.title]: "票号"
},
{
[lay_table.col_config.width]: 70,
[lay_table.col_config.field]: "amount",
[lay_table.col_config.title]: "金额"
},
{
[lay_table.col_config.width]: 80,
[lay_table.col_config.field]: "note",
[lay_table.col_config.title]: "备注"
},
{
[lay_table.col_config.width]: 70,
[lay_table.col_config.field]: "status",
[lay_table.col_config.title]: "状态",
[lay_table.col_config.hide]: true
},
{
[lay_table.col_config.width]: 188,
[lay_table.col_config.field]: "tradingTime",
[lay_table.col_config.title]: "核销时间"
},
{
[lay_table.col_config.width]: 100,
[lay_table.col_config.field]: "machine_code",
[lay_table.col_config.title]: "机号"
},
{
[lay_table.col_config.width]: 100,
[lay_table.col_config.field]: "operator",
[lay_table.col_config.title]: "工号"
},
{
[lay_table.col_config.width]: 70,
[lay_table.col_config.field]: "redeem_method",
[lay_table.col_config.title]: "方式"
},
{
[lay_table.col_config.width]: 170,
[lay_table.col_config.title]: "工具栏",
[lay_table.col_config.toolbar]: "#工具栏演示"
}
]
]
});
// 环境检测函数
function 测试是否支持() {
try {
electronFileAPI.writeFileSync(electronFileAPI.getDesktop() + "/1.txt", "123");
} catch (error) {
showCustomAlert("当前环境不支持请使用桌面端打开", ensureFocus);
}
}
});
function 获取订单信息() {
//用于刷新订单
var 店号 = $("#底部店号").text();
var 特征 = $("#底部特征").text();
var 工号 = $("#底部工号").text();
console.log("店号: " + 店号);
console.log("特征: " + 特征);
console.log("工号: " + 工号);
var 局_ret = FoFJsCodeJQAjax("/体彩刷新订单?store_code=" + 店号 + "&feature=" + 特征 + "&operator=" + 工号);
document.title = "邻几体彩_V26 当前订单:" + encodeURIComponent(局_ret["order_id"]);
$("#订单号").text(encodeURIComponent(局_ret["order_id"]));
//$("#底部状态").text(encodeURIComponent(局_ret["order_id"]));
}
$("#底部店号").text("AAAAA");
$("#底部店名").text("BBBBB");
$("#底部工号").text("CCCCC");
$("#底部特征").text("DDDDD");
$("#机号").text("EEEEE");
获取订单信息();
function showWinningEffect(amount) {
const effect = document.getElementById("winningEffect");
const amountElement = document.getElementById("winningAmount");
const container = document.getElementById("confetti-container");
// 清除旧状态
effect.classList.remove("active");
container.innerHTML = "";
// 设置金额
const winAmount = parseInt(amount) || 100;
amountElement.textContent = winAmount + "元";
// 显示特效
setTimeout(() => {
effect.classList.add("active");
createConfetti();
}, 50); // 微小延迟确保渲染
// 5秒后隐藏
setTimeout(() => {
effect.classList.remove("active");
container.innerHTML = "";
}, 5000);
}
// 创建礼炮特效 - 修复版
function createConfetti() {
const container = document.getElementById("confetti-container");
const colors = ["#f00", "#0f0", "#00f", "#ff0", "#f0f", "#0ff", "#f80", "#8f0"];
// 生成300个粒子
for (let i = 0; i < 300; i++) {
const confetti = document.createElement("div");
confetti.className = "confetti";
confetti.style.left = Math.random() * 100 + "%";
confetti.style.backgroundColor = colors[Math.floor(Math.random() * colors.length)];
confetti.style.width = Math.random() * 10 + 8 + "px";
confetti.style.height = Math.random() * 10 + 8 + "px";
confetti.style.animationDuration = Math.random() * 3 + 2 + "s";
confetti.style.animationDelay = Math.random() * 0.5 + "s";
// 50%概率变成圆形
if (Math.random() > 0.5) {
confetti.style.borderRadius = "50%";
}
container.appendChild(confetti);
}
}
function 共用重载表格(参数) {
lay_table.reload("用户数据", {
[lay_table.config.url]: "/体彩刷新订单?store_code=" + $("#底部店号").text() + "&feature=" + $("#底部特征").text() + "&operator=" + $("#底部工号").text() + "&Show_type=" + 中奖显示
});
}
</script>
</body>
</html> |
|
|Archiver|手机版|小黑屋|久要宝盒
( 皖ICP备18021237号 )
发表于 2025-4-10 22:32:01