weipan/cashier
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

1

Browse Source
This commit is contained in:
你的名字
2025-10-15 14:53:54 +08:00
commit ac0f12b21a
864 changed files with 200931 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

207
app/index/view/index/index.html Normal file
View File

@ -0,0 +1,207 @@
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>移动端收银台</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
background: #007bff;
min-height: 100vh;
display: flex;
justify-content: center;
align-items: center;
padding: 20px;
}
.cashier-container {
background: white;
border-radius: 20px;
padding: 30px;
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
width: 100%;
max-width: 400px;
}
.header {
text-align: center;
margin-bottom: 30px;
}
.header h1 {
color: #333;
font-size: 24px;
margin-bottom: 10px;
}
.header p {
color: #666;
font-size: 14px;
}
.form-group {
margin-bottom: 20px;
}
.form-group label {
display: block;
margin-bottom: 8px;
color: #333;
font-weight: 500;
}
.form-group input,
.form-group textarea {
width: 100%;
padding: 15px;
border: 2px solid #e1e5e9;
border-radius: 10px;
font-size: 16px;
transition: border-color 0.3s;
}
.form-group input:focus,
.form-group textarea:focus {
outline: none;
border-color: #007bff;
}
.amount-input {
font-size: 20px;
font-weight: bold;
text-align: center;
padding-left: 45px;
}
.amount-input-container {
position: relative;
display: flex;
align-items: center;
}
.currency-icon {
position: absolute;
left: 15px;
font-size: 20px;
font-weight: bold;
color: #007bff;
z-index: 1;
}
.blinking-cursor {
position: absolute;
left: 35px;
font-size: 20px;
color: #007bff;
animation: blink 1s infinite;
}
@keyframes blink {
0%, 50% {
opacity: 1;
}
51%, 100% {
opacity: 0;
}
}
.payment-method {
background: #f8f9fa;
border-radius: 10px;
padding: 15px;
margin-bottom: 20px;
display: flex;
align-items: center;
justify-content: center;
}
.qq-icon {
width: 30px;
height: 30px;
background: #12b7f5;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
color: white;
font-weight: bold;
margin-right: 10px;
}
.pay-button {
width: 100%;
background: #007bff;
color: white;
border: none;
padding: 18px;
border-radius: 15px;
font-size: 18px;
font-weight: bold;
cursor: pointer;
transition: transform 0.2s;
}
.pay-button:hover {
transform: translateY(-2px);
}
.pay-button:disabled {
opacity: 0.6;
cursor: not-allowed;
transform: none;
}
.error-message {
color: #e74c3c;
font-size: 14px;
margin-top: 5px;
display: none;
}
.amount-range {
color: #666;
font-size: 12px;
margin-top: 5px;
}
textarea {
resize: vertical;
min-height: 80px;
}
</style>
</head>
<body>
<div class="cashier-container">
<div class="header">
<h1>收银台</h1>
<p>安全快捷的移动支付</p>
</div>
<form method="post" action="/">
<div class="form-group">
<label for="amount">支付金额 (元)</label>
<div class="amount-input-container">
<span class="currency-icon">¥</span>
<input type="number" id="amount" name="amount" class="amount-input"
placeholder="请输入金额" min="{:sysConfig('site','site_mix')}" max="{:sysConfig('site','site_max')}" step="1" required>
</div>
<div class="amount-range">支付范围：¥{:sysConfig('site','site_mix')} - ¥{:sysConfig('site','site_max')}</div>
<div class="error-message" id="amountError">请输入{:sysConfig('site','site_mix')}-{:sysConfig('site','site_max')}元之间的金额</div>
</div>
<button type="submit" class="pay-button" id="payButton">
发起支付
</button>
</form>
</div>
</body>
</html>

80
app/index/view/index/reloads.html Normal file
View File

@ -0,0 +1,80 @@
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>获取支付状态</title>
<script src="https://cdn.tailwindcss.com"></script>
<style>
.loading {
animation: spin 1s linear infinite;
}
@keyframes spin {
to { transform: rotate(360deg); }
}
</style>
</head>
<body class="bg-gray-50 min-h-screen flex flex-col items-center justify-center">
<div class="w-11/12 max-w-md bg-white rounded-xl shadow p-5 text-center space-y-3">
<!-- 蓝色提示 -->
<div id="msg-blue" class="bg-blue-100 text-blue-800 py-2 rounded">
若取码失败，可以尝试重新发起支付
</div>
<!-- 黄色提示 -->
<div id="msg-yellow" class="bg-yellow-100 text-yellow-800 py-2 rounded">
正在努力匹配订单中，已等待时间 <span id="waitTime">0</span> 秒
</div>
<!-- 红色提示 -->
<div id="msg-red" class="bg-red-100 text-red-800 py-2 rounded">
系统正在通过安全验证，取码时间较长，请您耐心等待，最长需要 <span id="maxTime">180</span> 秒。
</div>
<div class="flex justify-center pt-3">
<svg class="loading w-6 h-6 text-gray-400" fill="none" stroke="currentColor" stroke-width="2"
viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round"
d="M12 4v4m0 8v4m8-8h4M4 12H0m16.95 7.05l2.83 2.83M4.22 4.22l2.83 2.83m0 10.9l-2.83 2.83M19.78 4.22l-2.83 2.83" />
</svg>
</div>
</div>
<script>
let wait = 0;
const waitSpan = document.getElementById("waitTime");
const maxTime = document.getElementById("maxTime");
function updateWaitTime() {
wait++;
waitSpan.textContent = wait;
}
// 每秒计时
setInterval(updateWaitTime, 1000);
// 每3秒请求一次后端接口
setInterval(async () => {
try {
const urlParams = new URLSearchParams(window.location.search);
const rid = urlParams.get('rid');
const res = await fetch('/index/index/status?rid='+rid); // 后端返回 {status: "blue"|"yellow"|"red"|"success", payUrl: "xxx"}
let data = await res.json();
data = data.data;
// 根据status切换显示状态
// document.getElementById("msg-blue").style.display = data.status === "blue" ? "block" : "none";
// document.getElementById("msg-yellow").style.display = data.status === "yellow" ? "block" : "none";
// document.getElementById("msg-red").style.display = data.status === "red" ? "block" : "none";
// 若status为success，则跳转支付链接
if (data.url !== null && data.url !== undefined && data.url !== "") {
window.location.href = data.url;
}
} catch (e) {
console.error("请求失败", e);
}
}, 3000);
</script>
</body>
</html>