PaymentCenter/front/templates/payPage.html

330 lines
11 KiB
HTML

{{define "payPage.html"}}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>收银台页面</title>
<style>
/* 基础样式 */
body {
font-family: Arial, sans-serif;
max-width: 800px;
margin: 0 auto;
padding: 20px;
}
/* 段落样式 */
p {
color: #666666;
margin-bottom: 10px;
}
/* 无序列表样式 */
ul {
list-style: none;
padding: 0;
}
/* 列表项样式 */
li {
margin: 10px 0;
display: flex;
align-items: center;
}
/* 按钮样式 */
button {
background-color: #007BFF;
color: #fff;
border: none;
padding: 10px 20px;
cursor: pointer;
transition: background-color 0.3s ease;
border-radius: 4px;
font-size: 16px;
margin-top: 20px;
}
/* 按钮悬停样式 */
button:hover {
background-color: #0056b3;
}
/* loading样式 */
.loading-container {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: 200px;
}
.loading-spinner {
border: 5px solid #f3f3f3;
border-top: 5px solid #007BFF;
border-radius: 50%;
width: 50px;
height: 50px;
animation: spin 1s linear infinite;
margin-bottom: 20px;
}
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
.loading-text {
color: #666;
font-size: 18px;
}
/* 支付信息卡片 */
.payment-info {
background: #f9f9f9;
padding: 20px;
border-radius: 8px;
margin-bottom: 20px;
}
.payment-info h2 {
margin-top: 0;
color: #333;
}
/* 支付方式选项 */
.payment-option {
padding: 15px;
border: 1px solid #ddd;
border-radius: 8px;
margin-bottom: 10px;
cursor: pointer;
transition: all 0.3s ease;
}
.payment-option:hover {
border-color: #007BFF;
background-color: #f0f7ff;
}
.payment-option input[type="radio"] {
margin-right: 15px;
}
.payment-option.selected {
border-color: #007BFF;
background-color: #f0f7ff;
}
</style>
</head>
{{if eq .code 200 }}
<body>
<!-- 页面内容 -->
<div class="payment-info" id="payment-info">
<h2>订单支付</h2>
<p>{{.desc}}</p>
<p>交易号:{{ .id }}</p>
<p>交易金额:<strong style="color: #ff5500; font-size: 24px;">{{ .amount }}</strong></p>
</div>
<!-- 支付方式选择区域 -->
<div id="pay-container">
<div id="pay"></div>
<!-- 支付方式列表 -->
<ul id="payment-list"></ul>
</div>
<!-- Loading状态 -->
<div id="loading" class="loading-container" style="display: none;">
<div class="loading-spinner"></div>
<p class="loading-text">支付处理中,请稍等...</p>
</div>
</body>
<script>
// 从 URL 中提取参数
function getQueryParam(param) {
const queryString = window.location.search.substring(1);
const params = queryString.split('&');
for (let i = 0; i < params.length; i++) {
const [key, value] = params[i].split('=');
if (key === param) {
return decodeURIComponent(value);
}
}
return null;
}
// 显示Loading状态
function showLoading() {
document.getElementById('payment-info').style.display = 'none';
document.getElementById('pay-container').style.display = 'none';
document.getElementById('loading').style.display = 'flex';
}
// 处理支付回调
function handlePaymentCallback() {
showLoading();
const loadingText = document.querySelector('.loading-text');
loadingText.textContent = `支付处理中,请稍等...`;
// 1秒后刷新页面
setTimeout(() => {
clearInterval(dotInterval);
window.location.reload();
}, 1000);
}
// 获取支付方式列表
function fetchPaymentMethods() {
const id = getQueryParam('no');
console.log('Order no:', id);
if (id) {
fetch(`/pay/front/api/v1/payPage/list?id=${id}`, {
method: 'POST',
})
.then(async response => {
if (response.ok) {
const data = await response.json()
console.log(data)
if (data.code !== 200) {
throw new Error('无效');
} else {
return data;
}
} else {
throw new Error('无效');
}
})
.then(data => {
// 处理返回的数据,例如渲染支付方式列表
if (data === null || data.data.length === 0) {
const pay = document.getElementById('pay');
pay.innerHTML = '<h3>支付环境异常,请检查</h3>';
} else if (data.data.length === 1) {
// 只有一个支付方式时,显示空白页并直接跳转
showLoading();
window.location.href = `/pay/front/api/v1/payPage/submit?pay_channel_id=${data.data[0].pay_channel_id}&no=${id}`;
} else {
renderPaymentMethods(data.data);
}
})
.catch(error => {
console.error('获取支付方式失败:', error);
const pay = document.getElementById('pay');
pay.innerHTML = '<h3 style="color: red;">获取支付方式失败,请刷新重试</h3>';
});
} else {
console.error('Order no not found in URL');
}
}
// 渲染支付方式列表
function renderPaymentMethods(paymentMethods) {
const pay = document.getElementById('pay');
pay.innerHTML = '<h3>请选择支付方式</h3>';
const paymentList = document.getElementById('payment-list');
paymentList.innerHTML = '';
// 标记是否是第一个支付方式
let isFirstMethod = true;
paymentMethods.forEach(method => {
const listItem = document.createElement('li');
listItem.className = 'payment-option';
const radioInput = document.createElement('input');
radioInput.type = 'radio';
radioInput.name = 'paymentMethod';
radioInput.value = method.pay_channel_id;
radioInput.id = `method-${method.pay_channel_id}`;
// 如果是第一个支付方式,默认选中
if(isFirstMethod) {
radioInput.checked = true;
listItem.classList.add('selected');
isFirstMethod = false;
}
const label = document.createElement('label');
label.htmlFor = `method-${method.pay_channel_id}`;
label.textContent = method.pay_name;
if (method.icon_url) {
const icon = document.createElement('img');
icon.src = method.icon_url;
icon.style.height = '24px';
icon.style.marginRight = '10px';
label.prepend(icon);
}
listItem.appendChild(radioInput);
listItem.appendChild(label);
paymentList.appendChild(listItem);
// 点击整个区域也可以选择
listItem.addEventListener('click', () => {
// 移除所有选中样式
document.querySelectorAll('.payment-option').forEach(item => {
item.classList.remove('selected');
});
// 添加当前选中样式
listItem.classList.add('selected');
radioInput.checked = true;
});
});
// 添加提交按钮
const submitButton = document.createElement('button');
submitButton.type = 'button';
submitButton.textContent = '立即支付';
submitButton.onclick = function () {
const no = getQueryParam('no');
const selectedMethod = document.querySelector('input[name="paymentMethod"]:checked');
if (selectedMethod) {
showLoading();
window.location.href = `/pay/front/api/v1/payPage/submit?pay_channel_id=${selectedMethod.value}&no=${no}`;
} else {
alert('请选择支付方式');
}
};
const buttonContainer = document.createElement('div');
buttonContainer.style.textAlign = 'center';
buttonContainer.appendChild(submitButton);
paymentList.appendChild(buttonContainer);
}
// 页面加载时执行
window.onload = function() {
if (getQueryParam('return')) {
// 如果是支付回调,处理支付结果
handlePaymentCallback();
} else {
// 否则获取支付方式
fetchPaymentMethods();
}
};
</script>
{{ else}}
<body>
<div class="payment-info" style="text-align: center;">
<h2 style="color: #ff0000;">支付异常</h2>
<p>{{.message}}</p>
<button onclick="window.location.href='/'">返回首页</button>
</div>
</body>
{{end}}
</html>
{{end}}