2ea0a83090
- 恢复 Drone CI 配置中注释的 docker compose 部署步骤 - 更新 Go 版本至 1.25.2 - 修正 alipay-jump.html 中调用 AlipayJSBridge 的订单字符串为模板变量 - 在 page_controller.go 中为模版添加空的 AlipayJump 数据字段 - 删除 views/alipay-jump.html 中多余空行和代码格式调整
459 lines
12 KiB
HTML
459 lines
12 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="zh-CN">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
|
|
<title>支付宝支付</title>
|
|
<script src="../static/js/jquery.min.js"></script>
|
|
<style>
|
|
:root {
|
|
--alipay-blue: #1677FF;
|
|
--alipay-blue-light: #4096FF;
|
|
--alipay-bg: #F0F5FF;
|
|
--primary: #1677FF;
|
|
--primary-soft: rgba(22, 119, 255, .1);
|
|
--apple-white: #ffffff;
|
|
--gray: #8e8e93;
|
|
--gray-light: #bfbfbf;
|
|
--light: #f5f5f7;
|
|
--border: #e5e5ea;
|
|
--shadow: rgba(22, 119, 255, 0.15);
|
|
}
|
|
|
|
* {
|
|
margin: 0;
|
|
padding: 0;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
html, body {
|
|
height: 100%;
|
|
overflow-x: hidden;
|
|
}
|
|
|
|
body {
|
|
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', 'Helvetica Neue', Helvetica, Arial, sans-serif;
|
|
background: linear-gradient(135deg, #F0F5FF 0%, #E6F4FF 50%, #F0F5FF 100%);
|
|
color: #1d1d1f;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
min-height: 100vh;
|
|
position: relative;
|
|
}
|
|
|
|
/* 背景装饰 */
|
|
.bg-decoration {
|
|
position: fixed;
|
|
width: 100%;
|
|
height: 100%;
|
|
top: 0;
|
|
left: 0;
|
|
pointer-events: none;
|
|
overflow: hidden;
|
|
z-index: 1;
|
|
}
|
|
|
|
.bg-circle {
|
|
position: absolute;
|
|
border-radius: 50%;
|
|
background: linear-gradient(135deg, var(--alipay-blue), var(--alipay-blue-light));
|
|
opacity: 0.03;
|
|
animation: float 20s ease-in-out infinite;
|
|
}
|
|
|
|
.bg-circle:nth-child(1) {
|
|
width: 300px;
|
|
height: 300px;
|
|
top: -100px;
|
|
right: -100px;
|
|
animation-delay: 0s;
|
|
}
|
|
|
|
.bg-circle:nth-child(2) {
|
|
width: 200px;
|
|
height: 200px;
|
|
bottom: 100px;
|
|
left: -50px;
|
|
animation-delay: 5s;
|
|
}
|
|
|
|
.bg-circle:nth-child(3) {
|
|
width: 150px;
|
|
height: 150px;
|
|
top: 50%;
|
|
right: 10%;
|
|
animation-delay: 10s;
|
|
}
|
|
|
|
@keyframes float {
|
|
0%, 100% {
|
|
transform: translateY(0) rotate(0deg);
|
|
}
|
|
33% {
|
|
transform: translateY(-20px) rotate(120deg);
|
|
}
|
|
66% {
|
|
transform: translateY(20px) rotate(240deg);
|
|
}
|
|
}
|
|
|
|
/* 主容器 */
|
|
.container {
|
|
position: relative;
|
|
z-index: 10;
|
|
width: 100%;
|
|
max-width: 400px;
|
|
padding: 20px;
|
|
text-align: center;
|
|
}
|
|
|
|
/* 支付宝Logo区域 */
|
|
.logo-section {
|
|
margin-bottom: 30px;
|
|
position: relative;
|
|
}
|
|
|
|
.alipay-logo {
|
|
width: 80px;
|
|
height: 80px;
|
|
margin: 0 auto 20px;
|
|
background: linear-gradient(135deg, var(--alipay-blue), var(--alipay-blue-light));
|
|
border-radius: 16px;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
box-shadow: 0 8px 24px var(--shadow);
|
|
position: relative;
|
|
animation: logoEntrance 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
|
|
}
|
|
|
|
.alipay-logo::before {
|
|
content: '';
|
|
position: absolute;
|
|
inset: -2px;
|
|
background: linear-gradient(135deg, var(--alipay-blue-light), var(--alipay-blue));
|
|
border-radius: 18px;
|
|
z-index: -1;
|
|
opacity: 0.5;
|
|
filter: blur(8px);
|
|
}
|
|
|
|
.alipay-logo svg {
|
|
width: 50px;
|
|
height: 50px;
|
|
filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.1));
|
|
}
|
|
|
|
@keyframes logoEntrance {
|
|
0% {
|
|
transform: scale(0) rotate(180deg);
|
|
opacity: 0;
|
|
}
|
|
50% {
|
|
transform: scale(1.1) rotate(90deg);
|
|
}
|
|
100% {
|
|
transform: scale(1) rotate(0deg);
|
|
opacity: 1;
|
|
}
|
|
}
|
|
|
|
/* 标题区域 */
|
|
.title-section {
|
|
margin-bottom: 32px;
|
|
opacity: 0;
|
|
animation: fadeInUp 0.8s ease 0.2s forwards;
|
|
}
|
|
|
|
.main-title {
|
|
font-size: 28px;
|
|
font-weight: 600;
|
|
color: var(--alipay-blue);
|
|
margin-bottom: 8px;
|
|
letter-spacing: 0.5px;
|
|
}
|
|
|
|
.sub-title {
|
|
font-size: 15px;
|
|
color: var(--gray);
|
|
font-weight: 400;
|
|
line-height: 1.5;
|
|
}
|
|
|
|
/* 支付状态卡片 */
|
|
.status-card {
|
|
background: rgba(255, 255, 255, 0.95);
|
|
backdrop-filter: blur(20px);
|
|
-webkit-backdrop-filter: blur(20px);
|
|
border: 1px solid rgba(255, 255, 255, 0.8);
|
|
border-radius: 20px;
|
|
padding: 28px 24px;
|
|
margin-bottom: 24px;
|
|
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.08);
|
|
position: relative;
|
|
overflow: hidden;
|
|
opacity: 0;
|
|
animation: fadeInUp 0.8s ease 0.4s forwards;
|
|
}
|
|
|
|
.status-card::before {
|
|
content: '';
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
height: 3px;
|
|
background: linear-gradient(90deg, var(--alipay-blue), var(--alipay-blue-light));
|
|
}
|
|
|
|
.status-content {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
gap: 16px;
|
|
margin-bottom: 8px;
|
|
}
|
|
|
|
.loading-spinner {
|
|
width: 24px;
|
|
height: 24px;
|
|
position: relative;
|
|
}
|
|
|
|
.loading-spinner::after {
|
|
content: '';
|
|
position: absolute;
|
|
inset: 0;
|
|
border: 2px solid var(--gray-light);
|
|
border-top: 2px solid var(--alipay-blue);
|
|
border-radius: 50%;
|
|
animation: spin 1s linear infinite;
|
|
}
|
|
|
|
@keyframes spin {
|
|
0% {
|
|
transform: rotate(0deg);
|
|
}
|
|
100% {
|
|
transform: rotate(360deg);
|
|
}
|
|
}
|
|
|
|
.status-text {
|
|
font-size: 16px;
|
|
font-weight: 500;
|
|
color: #1d1d1f;
|
|
}
|
|
|
|
.loading-dots {
|
|
display: inline-flex;
|
|
gap: 4px;
|
|
margin-left: 8px;
|
|
}
|
|
|
|
.loading-dot {
|
|
width: 6px;
|
|
height: 6px;
|
|
background: var(--alipay-blue);
|
|
border-radius: 50%;
|
|
animation: loadingDot 1.4s ease-in-out infinite;
|
|
}
|
|
|
|
.loading-dot:nth-child(1) {
|
|
animation-delay: 0s;
|
|
}
|
|
|
|
.loading-dot:nth-child(2) {
|
|
animation-delay: 0.2s;
|
|
}
|
|
|
|
.loading-dot:nth-child(3) {
|
|
animation-delay: 0.4s;
|
|
}
|
|
|
|
@keyframes loadingDot {
|
|
0%, 60%, 100% {
|
|
transform: scale(0.8);
|
|
opacity: 0.4;
|
|
}
|
|
30% {
|
|
transform: scale(1.2);
|
|
opacity: 1;
|
|
}
|
|
}
|
|
|
|
/* 支付信息 */
|
|
.payment-info {
|
|
background: var(--alipay-bg);
|
|
border-radius: 12px;
|
|
padding: 16px;
|
|
margin-top: 16px;
|
|
opacity: 0;
|
|
animation: fadeInUp 0.8s ease 0.6s forwards;
|
|
}
|
|
|
|
.info-row {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
margin-bottom: 8px;
|
|
font-size: 14px;
|
|
}
|
|
|
|
.info-row:last-child {
|
|
margin-bottom: 0;
|
|
padding-top: 8px;
|
|
border-top: 1px solid rgba(22, 119, 255, 0.1);
|
|
}
|
|
|
|
.info-label {
|
|
color: var(--gray);
|
|
}
|
|
|
|
.info-value {
|
|
color: #1d1d1f;
|
|
font-weight: 500;
|
|
}
|
|
|
|
.amount {
|
|
color: var(--alipay-blue);
|
|
font-weight: 600;
|
|
font-size: 16px;
|
|
}
|
|
|
|
/* 安全提示 */
|
|
.security-badge {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 6px;
|
|
background: rgba(82, 196, 26, 0.1);
|
|
color: #52C41A;
|
|
padding: 6px 12px;
|
|
border-radius: 20px;
|
|
font-size: 12px;
|
|
font-weight: 500;
|
|
opacity: 0;
|
|
animation: fadeInUp 0.8s ease 0.8s forwards;
|
|
}
|
|
|
|
.security-badge svg {
|
|
width: 14px;
|
|
height: 14px;
|
|
}
|
|
|
|
@keyframes fadeInUp {
|
|
0% {
|
|
opacity: 0;
|
|
transform: translateY(20px);
|
|
}
|
|
100% {
|
|
opacity: 1;
|
|
transform: translateY(0);
|
|
}
|
|
}
|
|
|
|
/* 响应式设计 */
|
|
@media (max-width: 480px) {
|
|
.container {
|
|
padding: 16px;
|
|
max-width: 100%;
|
|
}
|
|
|
|
.main-title {
|
|
font-size: 24px;
|
|
}
|
|
|
|
.status-card {
|
|
padding: 24px 20px;
|
|
}
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<!-- 背景装饰 -->
|
|
<div class="bg-decoration">
|
|
<div class="bg-circle"></div>
|
|
<div class="bg-circle"></div>
|
|
<div class="bg-circle"></div>
|
|
</div>
|
|
|
|
<!-- 主容器 -->
|
|
<div class="container">
|
|
<!-- 支付宝Logo区域 -->
|
|
<div class="logo-section">
|
|
<div class="alipay-logo">
|
|
<!-- 支付宝官方风格Logo -->
|
|
<svg viewBox="0 0 24 24" fill="white">
|
|
<circle cx="12" cy="12" r="10" fill="currentColor" opacity="0.2"/>
|
|
<path d="M12 7c-2.76 0-5 2.24-5 5s2.24 5 5 5 5-2.24 5-5-2.24-5-5-5zm0 8c-1.66 0-3-1.34-3-3s1.34-3 3-3 3 1.34 3 3-1.34 3-3 3z"
|
|
fill="currentColor"/>
|
|
<path d="M12 2v4m0 12v4m11-7h-4M7 12H3" stroke="currentColor" stroke-width="2" stroke-linecap="round"
|
|
opacity="0.5"/>
|
|
<circle cx="12" cy="12" r="2" fill="white"/>
|
|
</svg>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 标题区域 -->
|
|
<div class="title-section">
|
|
<h1 class="main-title">支付宝支付</h1>
|
|
<p class="sub-title">正在为您拉起支付，请稍候...</p>
|
|
</div>
|
|
|
|
<!-- 支付状态卡片 -->
|
|
<div class="status-card">
|
|
<div class="status-content">
|
|
<div class="loading-spinner"></div>
|
|
<div class="status-text">
|
|
正在调起支付
|
|
<div class="loading-dots">
|
|
<div class="loading-dot"></div>
|
|
<div class="loading-dot"></div>
|
|
<div class="loading-dot"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 支付信息 -->
|
|
<div class="payment-info">
|
|
<div class="info-row">
|
|
<span class="info-label">支付方式</span>
|
|
<span class="info-value">支付宝</span>
|
|
</div>
|
|
<div class="info-row">
|
|
<span class="info-label">订单状态</span>
|
|
<span class="info-value amount">处理中</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 安全提示 -->
|
|
<div class="security-badge">
|
|
<svg viewBox="0 0 24 24" fill="currentColor">
|
|
<path d="M12 1L3 5V11C3 16.55 6.84 21.74 12 23C17.16 21.74 21 16.55 21 11V5L12 1M12 7C13.4 7 14.8 8.6 14.8 10V11.5C15.4 11.5 16 12.1 16 12.7V16.2C16 16.8 15.4 17.4 14.7 17.4H9.2C8.6 17.4 8 16.8 8 16.2V12.7C8 12.1 8.6 11.5 9.2 11.5V10C9.2 8.6 10.6 7 12 7M12 8.2C11.2 8.2 10.5 8.7 10.5 10V11.5H13.5V10C13.5 8.7 12.8 8.2 12 8.2Z"/>
|
|
</svg>
|
|
安全加密，资金保障
|
|
</div>
|
|
</div>
|
|
|
|
<script type="text/javascript">
|
|
function ready(callback) {
|
|
if (window.AlipayJSBridge) {
|
|
callback && callback();
|
|
} else {
|
|
document.addEventListener('AlipayJSBridgeReady', callback, false);
|
|
}
|
|
}
|
|
ready(function () {
|
|
AlipayJSBridge.call("tradePay", {
|
|
orderStr: "{{.realOrderUrl}}"
|
|
}, function (result) {
|
|
$.post('/home/open/log', result, function (e) {
|
|
|
|
})
|
|
});
|
|
});
|
|
</script>
|
|
</body>
|
|
</html> |