jacy/dukang
1
0
Fork 0
Code Issues Pull Requests Actions 8 Packages Projects Releases Wiki Activity

init

Browse Source
This commit is contained in:
Jacy
2026-06-30 10:33:56 +08:00
commit 6e047dc0a5
607 changed files with 65966 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
pages/user/12_微信支付页_e72f2cf2/code.html
+242
View File
@@ -0,0 +1,242 @@
<!DOCTYPE html><html class="light" lang="zh-CN"><head>
<meta charset="utf-8">
<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" name="viewport">
<title>微信支付 - 杜康好客</title>
<script src="https://cdn.tailwindcss.com?plugins=forms,container-queries"></script>
<link href="https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700&amp;family=Inter:wght@400;500&amp;family=Be+Vietnam+Pro:wght@400;500&amp;display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&amp;display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&amp;display=swap" rel="stylesheet">
<script id="tailwind-config">
tailwind.config = {
darkMode: "class",
theme: {
extend: {
"colors": {
"outline": "#8d706e",
"on-error": "#ffffff",
"inverse-primary": "#ffb3ae",
"surface": "#faf9f7",
"on-primary-fixed-variant": "#910817",
"on-primary": "#ffffff",
"success-green": "#2D6A4F",
"inverse-surface": "#2f3130",
"on-surface": "#1a1c1b",
"on-secondary-fixed": "#241a00",
"secondary-container": "#fed65b",
"error": "#ba1a1a",
"surface-variant": "#e3e2e0",
"on-error-container": "#93000a",
"surface-tint": "#b3272c",
"tertiary": "#37413b",
"secondary-fixed-dim": "#e9c349",
"surface-dim": "#dadad8",
"on-primary-container": "#ffb9b4",
"surface-container-lowest": "#ffffff",
"on-tertiary-fixed-variant": "#3f4943",
"background": "#faf9f7",
"primary-container": "#a61d24",
"heritage-red": "#A61D24",
"on-secondary-fixed-variant": "#574500",
"tertiary-fixed-dim": "#bec9c2",
"surface-container-highest": "#e3e2e0",
"on-background": "#1a1c1b",
"tertiary-container": "#4e5852",
"error-container": "#ffdad6",
"secondary": "#735c00",
"outline-variant": "#e2bebc",
"primary": "#820012",
"on-tertiary": "#ffffff",
"on-primary-fixed": "#410004",
"tertiary-fixed": "#dae5dd",
"on-tertiary-container": "#c2cdc6",
"surface-container": "#efeeec",
"on-secondary-container": "#745c00",
"status-blue": "#2A6EBB",
"primary-fixed-dim": "#ffb3ae",
"inverse-on-surface": "#f1f1ef",
"aged-amber": "#FFBF00",
"surface-container-low": "#f4f3f1",
"on-secondary": "#ffffff",
"on-tertiary-fixed": "#141e19",
"subtle-gray": "#999999",
"secondary-fixed": "#ffe088",
"ink-black": "#1A1A1A",
"surface-bright": "#faf9f7",
"on-surface-variant": "#5a413f",
"surface-container-high": "#e9e8e6",
"primary-fixed": "#ffdad7"
},
"borderRadius": {
"DEFAULT": "0.25rem",
"lg": "0.5rem",
"xl": "0.75rem",
"full": "9999px"
},
"spacing": {
"stack-md": "16px",
"stack-lg": "32px",
"margin-page": "20px",
"base": "8px",
"stack-sm": "4px",
"gutter-card": "12px"
},
"fontFamily": {
"label-md": ["Inter"],
"headline-xl": ["Manrope"],
"headline-md": ["Manrope"],
"headline-lg-mobile": ["Manrope"],
"headline-lg": ["Manrope"],
"coupon-amount": ["Manrope"],
"body-md": ["Be Vietnam Pro"],
"body-lg": ["Be Vietnam Pro"]
},
"fontSize": {
"label-md": ["12px", {"lineHeight": "16px", "letterSpacing": "0.05em", "fontWeight": "500"}],
"headline-xl": ["32px", {"lineHeight": "40px", "letterSpacing": "-0.02em", "fontWeight": "700"}],
"headline-md": ["18px", {"lineHeight": "26px", "fontWeight": "600"}],
"headline-lg-mobile": ["20px", {"lineHeight": "28px", "fontWeight": "600"}],
"headline-lg": ["24px", {"lineHeight": "32px", "fontWeight": "600"}],
"coupon-amount": ["28px", {"lineHeight": "28px", "fontWeight": "700"}],
"body-md": ["14px", {"lineHeight": "20px", "fontWeight": "400"}],
"body-lg": ["16px", {"lineHeight": "24px", "fontWeight": "400"}]
}
},
},
}
</script>
<style>
.material-symbols-outlined {
font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
display: inline-block;
line-height: 1;
text-transform: none;
letter-spacing: normal;
word-wrap: normal;
white-space: nowrap;
direction: ltr;
}
.pay-shadow {
box-shadow: 0px 4px 20px rgba(166, 29, 36, 0.05);
}
.backdrop-blur {
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
}
</style>
</head>
<body class="bg-background text-on-background min-h-screen flex flex-col font-body-md text-body-md">
<!-- Top Navigation Bar -->
<header class="fixed top-0 w-full z-50 flex items-center justify-between px-margin-page h-14 w-full bg-background">
<button class="active:scale-95 transition-transform text-on-surface-variant flex items-center" onclick="window.history.back()">
<span class="material-symbols-outlined">arrow_back</span>
</button>
<h1 class="font-headline-lg-mobile text-headline-lg-mobile font-semibold text-primary">微信支付</h1>
<div class="w-6"></div> <!-- Spacer for balance -->
</header>
<main class="flex-1 pt-20 pb-32 px-margin-page overflow-y-auto">
<!-- Order Summary Section -->
<section class="flex flex-col items-center justify-center py-stack-lg mb-stack-lg">
<div class="w-[60px] h-[60px] mb-stack-md rounded-xl overflow-hidden border border-outline-variant pay-shadow bg-surface">
<img alt="Dukang Hospitality Logo" class="w-full h-full object-contain" src="https://lh3.googleusercontent.com/aida-public/AB6AXuBLR81sOE7QSa5GthGekT_h8-8PyVXPo7yFRpK6-6XOWtxqZXTVd3pRUeileIX-biO_5wxBDbEv3SvVtC7A37xhWZVWEaXT64fAWTX0CgYeQcB5-Fp_Q25u6rEfZtrDOqpsqtg-IAotkSiAicuBK9sNB6Z2kZ5uZqQJEAd_RIJD_d_hcRJ5qaAdel3_ITruQ1BvqoFyIGhM8eRiRw9OLoyoRANkc26unFPA2CGv8Nbtl3TbVxZA8k0CyfwTCqTDF736Mwg1Ts6MB0A">
</div>
<p class="font-headline-md text-headline-md text-on-surface mb-stack-sm">杜康好客</p>
<h2 class="font-headline-xl text-headline-xl text-primary font-bold">¥899.00</h2>
</section>
<!-- Payment Method List -->
<section class="bg-surface-container-lowest rounded-xl pay-shadow overflow-hidden border border-surface-variant">
<div class="px-margin-page py-stack-md flex items-center justify-between border-b border-surface-variant">
<span class="text-on-surface-variant font-medium">订单信息</span>
<span class="text-on-surface">酒水套餐 &amp; 好客权益</span>
</div>
<!-- WeChat Pay Row -->
<div class="px-margin-page py-stack-lg flex items-center justify-between active:bg-surface-container-low transition-colors cursor-pointer">
<div class="flex items-center gap-stack-md">
<div class="bg-[#07C160] w-9 h-9 rounded-full flex items-center justify-center">
<svg fill="none" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg">
<path d="M12 2C6.48 2 2 6.48 2 12C2 17.52 6.48 22 12 22C17.52 22 22 17.52 22 12C22 6.48 17.52 2 12 2ZM17.15 14.85C17.15 15.68 16.48 16.35 15.65 16.35H8.35C7.52 16.35 6.85 15.68 6.85 14.85V9.15C6.85 8.32 7.52 7.65 8.35 7.65H15.65C16.48 7.65 17.15 8.32 17.15 9.15V14.85Z" fill="white"></path>
<path d="M10.5 10.5C10.5 11.05 10.05 11.5 9.5 11.5C8.95 11.5 8.5 11.05 8.5 10.5C8.5 9.95 8.95 9.5 9.5 9.5C10.05 9.5 10.5 9.95 10.5 10.5Z" fill="white"></path>
<path d="M15.5 10.5C15.5 11.05 15.05 11.5 14.5 11.5C13.95 11.5 13.5 11.05 13.5 10.5C13.5 9.95 13.95 9.5 14.5 9.5C15.05 9.5 15.5 9.95 15.5 10.5Z" fill="white"></path>
</svg>
</div>
<div>
<p class="font-body-lg text-body-lg text-on-surface font-medium">微信支付</p>
<p class="text-label-md font-label-md text-on-surface-variant">推荐使用，便捷安全</p>
</div>
</div>
<span class="material-symbols-outlined text-success-green" style="font-variation-settings: 'FILL' 1;">check_circle</span>
</div>
</section>
<!-- Informational Hint -->
<div class="mt-stack-lg flex items-start gap-2 px-stack-sm">
<span class="material-symbols-outlined text-outline text-[18px]">info</span>
<p class="text-label-md font-label-md text-on-surface-variant leading-relaxed">订单包含 ¥500 好客权益，支付成功后将发放至您的个人账户。</p>
</div>
</main>
<!-- Fixed Bottom Action Area -->
<footer class="fixed bottom-0 left-0 w-full z-50 px-margin-page py-stack-md bg-surface border-t border-surface-variant/50">
<button class="w-full bg-heritage-red text-on-primary font-headline-md text-headline-md py-4 rounded-xl active:scale-[0.98] transition-all pay-shadow mb-stack-md" id="pay-trigger">
立即支付 ¥899.00
</button>
<div class="flex items-center justify-center gap-2">
<span class="material-symbols-outlined text-on-surface-variant text-[16px]">verified_user</span>
<span class="text-label-md font-label-md text-on-surface-variant">支付安全由微信支付保障</span>
</div>
<div class="h-6"></div> <!-- iPhone Safe Area Spacer -->
</footer>
<!-- Success Modal -->
<div class="fixed inset-0 z-[100] hidden flex items-end justify-center" id="success-modal">
<div class="absolute inset-0 bg-ink-black/40 backdrop-blur" onclick="closeModal()"></div>
<div class="relative bg-surface w-full max-w-md rounded-t-3xl p-stack-lg animate-[slide-up_0.3s_ease-out] shadow-2xl">
<div class="w-12 h-1 bg-surface-variant rounded-full mx-auto mb-stack-lg"></div>
<div class="flex flex-col items-center py-stack-lg">
<div class="w-20 h-20 bg-success-green/10 rounded-full flex items-center justify-center mb-stack-md">
<span class="material-symbols-outlined text-success-green text-5xl" style="font-variation-settings: 'FILL' 1;">check_circle</span>
</div>
<h3 class="font-headline-lg text-headline-lg text-on-surface mb-stack-sm">支付成功</h3>
<p class="text-body-md font-body-md text-on-surface-variant text-center max-w-[240px] mb-stack-lg">
您的订单已处理完成，感谢您对杜康好客的支持。
</p>
<div class="w-full space-y-stack-md">
<button class="w-full bg-primary text-on-primary font-headline-md text-headline-md py-4 rounded-xl active:scale-95 transition-transform" onclick="closeModal()">
返回订单列表
</button>
<button class="w-full border border-outline text-on-surface font-body-lg text-body-lg py-4 rounded-xl active:bg-surface-variant transition-colors" onclick="closeModal()">
查看订单详情
</button>
</div>
</div>
<div class="h-8"></div>
</div>
</div>
<style>
@keyframes slide-up {
from { transform: translateY(100%); }
to { transform: translateY(0); }
}
.animate-slide-up {
animation: slide-up 0.3s ease-out;
}
</style>
<script>
const payTrigger = document.getElementById('pay-trigger');
const successModal = document.getElementById('success-modal');
payTrigger.addEventListener('click', () => {
// Simulate payment loading
payTrigger.disabled = true;
payTrigger.innerHTML = '<span class="inline-block animate-spin mr-2">◌</span> 正在安全支付...';
setTimeout(() => {
successModal.classList.remove('hidden');
payTrigger.disabled = false;
payTrigger.innerHTML = '立即支付 ¥899.00';
}, 1200);
});
function closeModal() {
successModal.classList.add('hidden');
}
</script>
</body></html>