163 lines
7.2 KiB
HTML
163 lines
7.2 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="zh-CN">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<title>USDT 商城</title>
|
||
<link rel="stylesheet" href="/css/style.css">
|
||
<link rel="stylesheet" href="/css/spinner.css">
|
||
</head>
|
||
<body>
|
||
<div class="container">
|
||
<!-- 浮动管理按钮 -->
|
||
<button class="admin-floating-btn" onclick="showAdminLogin()">订单管理</button>
|
||
|
||
<main>
|
||
<!-- 产品展示区 -->
|
||
<section class="product-section">
|
||
<div class="product-card" id="product-card">
|
||
<div class="product-image">
|
||
<img src="/images/image01.jpg" alt="产品图片" id="product-img">
|
||
</div>
|
||
<div class="product-info">
|
||
<h2 id="product-name">高级产品</h2>
|
||
<p class="product-description" id="product-description">这是我们的高级产品，质量优秀</p>
|
||
<div class="price">
|
||
<span class="currency">$</span>
|
||
<span id="product-price">99.99</span>
|
||
<span class="unit">USDT</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- 购买表单区 -->
|
||
<section class="order-section">
|
||
<form id="orderForm">
|
||
<!-- 数量选择 -->
|
||
<div class="form-group">
|
||
<label for="quantity">购买数量：</label>
|
||
<div class="quantity-controls">
|
||
<button type="button" id="decrease-qty">-</button>
|
||
<input type="number" id="quantity" name="quantity" value="1" min="1" max="999">
|
||
<button type="button" id="increase-qty">+</button>
|
||
</div>
|
||
<div class="total-price">
|
||
总价：<span id="total-price">$99.99</span> USDT
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 客户信息 -->
|
||
<div class="form-group">
|
||
<label for="customer_name">姓名：*</label>
|
||
<input type="text" id="customer_name" name="customer_name" required>
|
||
</div>
|
||
|
||
<div class="form-group">
|
||
<label for="customer_email">邮箱：</label>
|
||
<input type="email" id="customer_email" name="customer_email">
|
||
</div>
|
||
|
||
<div class="form-group">
|
||
<label for="customer_phone">电话：</label>
|
||
<input type="tel" id="customer_phone" name="customer_phone">
|
||
</div>
|
||
|
||
<!-- 收货地址 -->
|
||
<div class="form-group">
|
||
<label for="shipping_address">收货地址：*</label>
|
||
<textarea id="shipping_address" name="shipping_address" rows="3" required
|
||
placeholder="请输入详细的收货地址，包括省市区县和具体地址"></textarea>
|
||
</div>
|
||
|
||
<!-- 提交按钮 -->
|
||
<button type="submit" id="submit-order" class="order-btn">
|
||
<span class="btn-text">立即下单</span>
|
||
<span class="btn-loading" style="display: none;">处理中...</span>
|
||
</button>
|
||
</form>
|
||
</section>
|
||
</main>
|
||
|
||
<!-- 订单确认模态框 -->
|
||
<div id="orderModal" class="modal" style="display: none;">
|
||
<div class="modal-content">
|
||
<div class="modal-header">
|
||
<h3>订单确认</h3>
|
||
<span class="close" id="closeModal">×</span>
|
||
</div>
|
||
<div class="modal-body">
|
||
<div class="order-summary">
|
||
<h4>订单信息</h4>
|
||
<div class="summary-item">
|
||
<span>订单号：</span>
|
||
<span id="modal-order-id"></span>
|
||
</div>
|
||
<div class="summary-item">
|
||
<span>产品：</span>
|
||
<span id="modal-product-name"></span>
|
||
</div>
|
||
<div class="summary-item">
|
||
<span>数量：</span>
|
||
<span id="modal-quantity"></span>
|
||
</div>
|
||
<div class="summary-item">
|
||
<span>总价：</span>
|
||
<span id="modal-total-price"></span>
|
||
</div>
|
||
<div class="summary-item">
|
||
<span>收货地址：</span>
|
||
<span id="modal-address"></span>
|
||
</div>
|
||
</div>
|
||
<div class="payment-section">
|
||
<p>请使用USDT(TRC20)完成支付</p>
|
||
<button id="pay-now-btn" class="pay-btn">前往支付</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 支付状态页面 -->
|
||
<div id="paymentStatus" class="payment-status" style="display: none;">
|
||
<div class="status-content">
|
||
<div class="status-icon" id="status-icon">
|
||
<div class="loading-spinner"></div>
|
||
</div>
|
||
<h3 id="status-title">支付处理中...</h3>
|
||
<p id="status-message">请完成USDT支付，我们正在确认您的交易</p>
|
||
<div class="order-info">
|
||
<p>订单号：<span id="status-order-id"></span></p>
|
||
<p>金额：<span id="status-amount"></span> USDT</p>
|
||
</div>
|
||
<button id="check-status-btn" class="status-btn">检查支付状态</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 管理员登录模态框 -->
|
||
<div id="adminLoginModal" class="modal" style="display: none;">
|
||
<div class="modal-content">
|
||
<div class="modal-header">
|
||
<h3>管理员登录</h3>
|
||
<span class="close" onclick="closeAdminLogin()">×</span>
|
||
</div>
|
||
<div class="modal-body">
|
||
<div class="login-form">
|
||
<div class="form-group">
|
||
<label for="adminPassword">请输入管理密码：</label>
|
||
<input type="password" id="adminPassword" placeholder="输入密码" autofocus>
|
||
</div>
|
||
<div class="form-actions">
|
||
<button onclick="verifyAdminPassword()" class="btn-primary">登录</button>
|
||
<button onclick="closeAdminLogin()" class="btn-secondary">取消</button>
|
||
</div>
|
||
<div id="loginError" class="error-message" style="display: none;"></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<script src="/js/main.js"></script>
|
||
</body>
|
||
</html> |