优化一下 开奖 搞成一个输入框,下方 8个可选 数字0-10的按钮按钮,点击后就填充对应数字到输入框,整体优化一下 <!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1
.0" />
<title>上庄与开奖</title>
<link
rel="stylesheet"
href="{{ url_for('static', filename='css/bootstrap
.min
.css') }}"
/>
<style>
.form-group {
margin-bottom: 10px;
}
.bank-info {
margin-top: 20px;
padding: 10px;
border: 1px solid #ddd;
background-color: #f8f9fa;
}
</style>
</head>
<body>
<div class="container mt-5">
<a href="/huiyuan/{{ agent_id }}">返回会员列表</a>
<h1 class="text-center">上庄与开奖</h1>
<!-- 庄显示区域 -->
<div class="bank-info" id="bank-info">
<h4>当前上庄信息</h4>
<p>
<strong>会员昵称:</strong>
<span id="bank-nickname"
>{{ member
.nickname if member else '未上庄' }}</span
>
</p>
<p>
<strong>庄余额:</strong>
<span id="bank-balance">{{ member
.balance if member else '0' }}</span>
</p>
<button
type="button"
class="btn btn-danger"
onclick="clearBankBalance()"
id="down-button"
style="display: {{ 'block' if member else 'none' }}"
>
下庄
</button>
<button
type="button"
class="btn btn-success"
onclick="openMarket()"
id="open-button"
>
开盘
</button>
</div>
<!-- 上庄操作部分 -->
<div
class="mb-4"
id="bank-balance-section"
style="display: {{ 'none' if member else 'block' }}"
>
<h3>上庄设置</h3>
<form id="bank-balance-form">
<div class="form-group">
<label for="
user-id">会员ID</label>
<input
type="text"
class="form-control"
id="
user-id"
placeholder="输入会员ID"
required
/>
</div>
<div class="form-group">
<label for="bank-balance">上庄余额</label>
<input
type="number"
class="form-control"
id="bank-balance-input"
placeholder="输入上庄余额"
required
/>
</div>
<button
type="button"
class="btn btn-warning"
onclick="setBankBalance()"
>
上庄
</button>
</form>
</div>
<!-- 开奖操作部分 -->
<div class="mb-4">
<h3>开奖</h3>
<div class="form-group">
<label for="period-number">当前需要开奖的期号</label>
<input
type="text"
class="form-control"
id="period-number"
placeholder="获取中
..."
required
readonly
/>
</div>
<form id="lottery-form">
<div class="form-group">
<label for="winning-number-1">1门</label>
<input
type="number"
class="form-control"
id="winning-number-1"
placeholder="输入1门中奖号码"
required
/>
</div>
<div class="form-group">
<label for="winning-number-2">2门</label>
<input
type="number"
class="form-control"
id="winning-number-2"
placeholder="输入2门中奖号码"
required
/>
</div>
<div class="form-group">
<label for="winning-number-3">3门</label>
<input
type="number"
class="form-control"
id="winning-number-3"
placeholder="输入3门中奖号码"
required
/>
</div>
<div class="form-group">
<label for="winning-number-4">4门</label>
<input
type="number"
class="form-control"
id="winning-number-4"
placeholder="输入4门中奖号码"
required
/>
</div>
<div class="form-group">
<label for="winning-number-5">5门</label>
<input
type="number"
class="form-control"
id="winning-number-5"
placeholder="输入5门中奖号码"
required
/>
</div>
<div class="form-group">
<label for="winning-number-6">6门</label>
<input
type="number"
class="form-control"
id="winning-number-6"
placeholder="输入6门中奖号码"
required
/>
</div>
<div class="form-group">
<label for="winning-number-7">7门</label>
<input
type="number"
class="form-control"
id="winning-number-7"
placeholder="输入7门中奖号码"
required
/>
</div>
<div class="form-group">
<label for="winning-number-8">8门</label>
<input
type="number"
class="form-control"
id="winning-number-8"
placeholder="输入8门中奖号码"
required
/>
</div>
<button type="button" class="btn btn-success" onclick="drawLottery()">
开奖
</button>
</form>
</div>
</div>
<script>
const agent_id = {{ agent_id|tojson }};
_data = {};
// 初始化页面时获取期号和上庄信息
window
.onload = function() {
fetchBankInfo();
};
// 获取当前上庄信息
function fetchBankInfo() {
fetch(`/zhuang/huoqu?agent_id=${agent_id}`)
.then((response) => {
if (!response
.ok) {
throw new Error(`HTTP error! Status: ${response
.status}`);
}
return response
.json();
})
.then((data) => {
if (data
.success && data
.member) {
_data = data;
updateBankInfo(data
.member
.nickname, data
.member
.balance);
document.getElementById("down-button")
.style
.display = "block";
document.getElementById("bank-balance-section")
.style
.display = "none";
document.getElementById("open-button")
.style
.display = "block";
fetchPeriodNumber(); // 如果有庄，获取当前期号
} else {
clearBankInfo();
document.getElementById("down-button")
.style
.display = "none";
document.getElementById("bank-balance-section")
.style
.display = "block";
document.getElementById("open-button")
.style
.display = "none";
}
})
.catch((error) => {
console
.error('获取上庄信息时出错:', error);
clearBankInfo();
document.getElementById("down-button")
.style
.display = "none";
document.getElementById("bank-balance-section")
.style
.display = "block";
});
}
// 获取当前期号
function fetchPeriodNumber() {
/* 这里获取 agent_id 的值，例如：
document.getElementById("agent-id")
.value */;
if (!agent_id) {
alert("缺少 agent_id 参数");
document.getElementById("period-number")
.value = "无法获取";
return;
}
fetch('/zhuang/get_current_period?agent_id=' + agent_id)
.then((response) => {
if (!response
.ok) {
throw new Error(`HTTP error! Status: ${response
.status}`);
}
return response
.json();
})
.then((data) => {
if (data
.success) {
document.getElementById("period-number")
.value = data
.draw_period;
} else {
alert("获取期号失败：" + data
.error);
document.getElementById("period-number")
.value = "无法获取";
}
})
.catch((error) => {
console
.error('获取期号时出错:', error);
alert("获取期号时出错：" + error
.message);
document.getElementById("period-number")
.value = "无法获取";
});
}
// 设置上庄余额
function setBankBalance() {
const
userIdInput =
document.getElementById("
user-id");
const balanceInput =
document.getElementById("bank-balance-input");
const
userId =
userIdInput
.value
.trim();
const balance = balanceInput
.value
.trim();
// 验证输入的会员ID和余额是否为空
if (!
userId || !balance) {
alert("请输入会员ID和上庄余额！");
return;
}
// 禁用按钮以防止重复提交
const setBalanceButton =
document.querySelector("button[onclick='setBankBalance()']");
setBalanceButton
.disabled = true;
setBalanceButton
.textContent = "设置中
...";
fetch('/zhuang/set_bank_balance', {
method: "POST",
headers: {
"Content-Type": "application/json",
},
body: JSON
.stringify({
user_id: parseFloat(
userId),
agent_id: parseFloat(agent_id),
balance: parseFloat(balance),
}),
})
.then((response) => response
.json())
.then((data) => {
if (data
.success) {
alert("上庄余额设置成功！");
fetchBankInfo(); // 刷新上庄信息
} else {
alert("设置失败：" + data
.message);
}
})
.catch((error) => {
console
.error('设置上庄余额时出错:', error);
alert("设置上庄余额时出错：" + error
.message);
})
.finally(() => {
// 恢复按钮状态
setBalanceButton
.disabled = false;
setBalanceButton
.textContent = "上庄";
});
}
// 清空庄显示区域的信息
function clearBankInfo() {
document.getElementById("bank-nickname")
.textContent = "未上庄";
document.getElementById("bank-balance")
.textContent = "0";
document.getElementById("period-number")
.value = "获取中
...";
}
// 下庄
function clearBankBalance() {
const
user_Id = _data
.member
.user_id;
const nickname = _data
.member
.nickname;
const agent_Id = _data
.member
.agent_id; // 假设 agent_id 也在 _data
.member 中
const banks_id=_data
.member
.id; // 假设 _id 也在 _data
.member 中
// 禁用按钮以防止重复提交
const clearBalanceButton =
document.querySelector("button[onclick='clearBankBalance()']");
clearBalanceButton
.disabled = true;
clearBalanceButton
.textContent = "下庄中
...";
fetch('/zhuang/clear_bank_balance', {
method: "POST",
headers: {
"Content-Type": "application/json",
},
body: JSON
.stringify({ // 修复 json 为 JSON
user_id: parseFloat(
user_Id),
agent_id: parseFloat(agent_Id), // 修复 agent_id 未定义的问题
banks_id: parseFloat(banks_id), // 修复 _id 未定义的问题
}),
})
.then((response) => response
.json())
.then((data) => {
if (data
.success) {
alert("下庄成功！");
fetchBankInfo(); // 刷新上庄信息
} else {
alert("下庄失败：" + data
.error);
}
})
.catch((error) => {
console
.error('下庄时出错:', error);
alert("下庄时出错：" + error
.message);
})
.finally(() => {
// 恢复按钮状态
clearBalanceButton
.disabled = false;
clearBalanceButton
.textContent = "下庄";
});
}
// 开奖
// 开奖
function drawLottery() {
const periodNumberInput =
document.getElementById("period-number");
const periodNumber = periodNumberInput
.value
.trim();
const winningNumbers = [
document.getElementById("winning-number-1")
.value
.trim(),
document.getElementById("winning-number-2")
.value
.trim(),
document.getElementById("winning-number-3")
.value
.trim(),
document.getElementById("winning-number-4")
.value
.trim(),
document.getElementById("winning-number-5")
.value
.trim(),
document.getElementById("winning-number-6")
.value
.trim(),
document.getElementById("winning-number-7")
.value
.trim(),
document.getElementById("winning-number-8")
.value
.trim()
];
// 验证是否输入了8个中奖号码
if (winningNumbers
.some(num => num === "")) {
alert("请输入所有8个中奖号码！");
return;
}
// 禁用按钮以防止重复提交
const drawButton =
document.querySelector("button[onclick='drawLottery()']");
drawButton
.disabled = true;
drawButton
.textContent = "开奖中
...";
fetch('/zhuang/update_draw_result', {
method: "POST",
headers: {
"Content-Type": "application/json",
},
body: JSON
.stringify({
period_number: periodNumber,
winning_numbers: winningNumbers
.map(num => parseFloat(num)),
room_id: agent_id // 假设 room_id 是 agent_id
}),
})
.then((response) => response
.json())
.then((data) => {
if (data
.success) {
alert("开奖成功！");
location
.reload(); // 如果需要刷新页面以显示新的开奖结果
} else {
alert("开奖失败：" + data
.error);
}
})
.catch((error) => {
console
.error('开奖时出错:', error);
alert("开奖时出错：" + error
.message);
})
.finally(() => {
// 恢复按钮状态
drawButton
.disabled = false;
drawButton
.textContent = "开奖";
});
}
function openMarket() {
// 确保 agent_id 已定义
const agent_id = _data
.member
.agent_id; // 替换为实际的 agent_id
console
.log('请求的 URL:', '/zhuang/insert_pending_draw/' + agent_id); // 调试信息
fetch('/zhuang/insert_pending_draw/' + agent_id)
.then((response) => {
if (!response
.ok) {
throw new Error(`HTTP 错误! 状态码: ${response
.status}${error
.message}`);
}
return response
.json();
})
.then((data) => {
if (data
.success) {
alert("开盘成功！");
location
.reload();
} else {
alert("开盘失败：" + data
.error);
}
})
.catch((error) => {
console
.error('开盘时出错:', error);
alert("开盘时出错：" + error
.message);
});
}
// 更新庄显示区域的信息
function updateBankInfo(nickname, balance) {
document.getElementById("bank-nickname")
.textContent = nickname;
document.getElementById("bank-balance")
.textContent = balance;
}
</script>
</body>
</html>
本文介绍了在ASP.NET中如何正确使用控件ID来避免命名冲突，特别是针对UserControl中的控件。通过动态获取控件ID的方式，可以确保JavaScript能够正确地引用这些控件。
扫一扫
101
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
