330 lines
16 KiB
HTML
330 lines
16 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>Crypto World Mall</title>
|
||
<link rel="stylesheet" href="/css/style.css">
|
||
<link rel="stylesheet" href="/css/spinner.css">
|
||
</head>
|
||
<body>
|
||
<div class="container">
|
||
<!-- 页面头部 -->
|
||
<header class="site-header">
|
||
<h1>Crypto World Mall</h1>
|
||
<p>More professional, Less risk</p>
|
||
</header>
|
||
|
||
<!-- 联系我们按钮 -->
|
||
<button class="contact-floating-btn" onclick="showContactModal()">
|
||
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||
<path d="M12 2C6.48 2 2 6.48 2 12C2 13.75 2.45 15.38 3.24 16.8L2 22L7.2 20.76C8.62 21.55 10.25 22 12 22C17.52 22 22 17.52 22 12C22 6.48 17.52 2 12 2Z" fill="currentColor"/>
|
||
<circle cx="8.5" cy="12" r="1.5" fill="white"/>
|
||
<circle cx="12" cy="12" r="1.5" fill="white"/>
|
||
<circle cx="15.5" cy="12" r="1.5" fill="white"/>
|
||
</svg>
|
||
</button>
|
||
|
||
<main>
|
||
<!-- 产品展示区 -->
|
||
<section class="product-section">
|
||
<div class="product-card">
|
||
<div class="product-image">
|
||
<img src="/images/image01.jpg" alt="产品图片" id="product-img">
|
||
</div>
|
||
<div class="product-details">
|
||
<h2 id="product-name" class="product-title">高级产品</h2>
|
||
<div class="product-price">
|
||
<span class="price-text">$<span id="product-price">99.99</span> USDT</span>
|
||
</div>
|
||
<div class="product-offers">
|
||
<div class="offer-item">💰 购买2个享受<strong>9.5折</strong>优惠</div>
|
||
<div class="offer-item">🎉 购买5个及以上享受<strong>9折</strong>优惠</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- 购买表单区 -->
|
||
<section class="order-section">
|
||
<form id="orderForm">
|
||
<!-- 购买数量和金额汇总 -->
|
||
<div class="order-summary-section">
|
||
<h3 class="section-title">购买数量 & 金额汇总</h3>
|
||
<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>
|
||
<div class="price-summary">
|
||
<div class="price-line">
|
||
<span>单价：</span>
|
||
<span>$<span id="unit-price">99.99</span> USDT</span>
|
||
</div>
|
||
<div class="price-line discount-line" id="discount-line">
|
||
<span>优惠：</span>
|
||
<span id="discount-text">$0.00 USDT (无优惠)</span>
|
||
</div>
|
||
<div class="price-line coupon-discount-line" id="coupon-discount-line" style="display: none;">
|
||
<span>优惠码：</span>
|
||
<span id="coupon-discount-text">$0.00 USDT</span>
|
||
</div>
|
||
<div class="price-line subtotal-line" id="subtotal-line">
|
||
<span>小计：</span>
|
||
<span id="subtotal-price">$99.99 USDT</span>
|
||
</div>
|
||
<div class="price-line total-line">
|
||
<span>总价：</span>
|
||
<span id="total-price">$99.99 USDT</span>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 优惠码输入 -->
|
||
<div class="coupon-section">
|
||
<div class="coupon-input-group">
|
||
<input type="text" id="coupon-code" placeholder="输入优惠码（可选）" maxlength="20">
|
||
<button type="button" id="apply-coupon-btn" onclick="applyCoupon()">使用</button>
|
||
</div>
|
||
<div id="coupon-message" class="coupon-message" style="display: none;"></div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 配送信息分割线 -->
|
||
<div class="section-divider" style="display: none;"></div>
|
||
|
||
<!-- 配送信息 -->
|
||
<div class="shipping-info-section" style="display: none;">
|
||
<h3 class="section-title">配送信息</h3>
|
||
|
||
<div class="form-group">
|
||
<label for="customer_name">收货人姓名：*</label>
|
||
<input type="text" id="customer_name" name="customer_name">
|
||
</div>
|
||
|
||
<div class="form-group">
|
||
<label for="customer_phone">联系电话：*</label>
|
||
<input type="tel" id="customer_phone" name="customer_phone"
|
||
placeholder="请输入11位手机号码">
|
||
</div>
|
||
|
||
<div class="form-group">
|
||
<label for="customer_email">邮箱地址：*</label>
|
||
<input type="email" id="customer_email" name="customer_email"
|
||
placeholder="请输入邮箱地址">
|
||
</div>
|
||
|
||
<!-- 收货地址 -->
|
||
<div class="form-group">
|
||
<label for="shipping_address">详细地址：*</label>
|
||
<textarea id="shipping_address" name="shipping_address" rows="3"
|
||
placeholder="请输入详细的收货地址，包括省市区县和具体地址"></textarea>
|
||
</div>
|
||
</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>
|
||
|
||
<!-- 页面底部 -->
|
||
<footer class="site-footer">
|
||
<div class="footer-content">
|
||
<p>© 2025 Crypto World Mall ｜ More professional, Less risk</p>
|
||
<button class="admin-link-btn" onclick="showAdminLogin()">管理入口</button>
|
||
</div>
|
||
</footer>
|
||
|
||
<!-- 订单确认模态框 -->
|
||
<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="contactModal" class="modal" style="display: none;">
|
||
<div class="modal-content">
|
||
<div class="modal-header">
|
||
<h3>联系我们</h3>
|
||
<span class="close" onclick="closeContactModal()">×</span>
|
||
</div>
|
||
<div class="modal-body">
|
||
<div class="contact-info">
|
||
<h4>微信联系</h4>
|
||
<p>扫描下方二维码添加微信好友</p>
|
||
<div class="qr-code-container">
|
||
<img src="/images/wechat_qr.png" alt="微信二维码" class="wechat-qr" onerror="this.style.display='none'; document.querySelector('.qr-error').style.display='block';">
|
||
<div class="qr-error" style="display: none;">
|
||
<p>⚠️ 二维码图片未找到</p>
|
||
<p>请联系管理员添加微信二维码图片至 /images/wechat_qr.png</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</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>
|
||
|
||
<!-- 配送信息模态框 -->
|
||
<div id="shippingInfoModal" class="modal" style="display: none;">
|
||
<div class="modal-content shipping-modal-content">
|
||
<div class="modal-header">
|
||
<h3>确认订单信息</h3>
|
||
<span class="close" id="closeShippingModal">×</span>
|
||
</div>
|
||
<div class="modal-body shipping-modal-body">
|
||
<!-- 订单汇总（顶部卡片） -->
|
||
<div class="order-summary-card">
|
||
<div class="summary-header">
|
||
<div class="product-info">
|
||
<div class="product-details">
|
||
<h4 id="summary-product-name">高级产品</h4>
|
||
<span class="product-meta">数量: <strong id="summary-quantity">1</strong></span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="price-breakdown">
|
||
<div class="price-row">
|
||
<span>单价</span>
|
||
<span id="summary-unit-price">$99.00 USDT</span>
|
||
</div>
|
||
<div class="price-row discount-row">
|
||
<span>优惠</span>
|
||
<span id="summary-discount-text" class="discount-value">$0.00 USDT (无优惠)</span>
|
||
</div>
|
||
<div class="price-row total-row">
|
||
<span>总计</span>
|
||
<span id="summary-total-price" class="total-value">$99.00 USDT</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 配送信息表单 -->
|
||
<div class="shipping-form-section">
|
||
<h4 class="form-section-title">配送信息</h4>
|
||
<form id="shippingForm" class="shipping-form-grid">
|
||
<div class="form-row">
|
||
<div class="form-col">
|
||
<label for="modal_customer_name">收货人姓名 *</label>
|
||
<input type="text" id="modal_customer_name" name="customer_name" required>
|
||
</div>
|
||
<div class="form-col">
|
||
<label for="modal_customer_phone">联系电话 *</label>
|
||
<input type="tel" id="modal_customer_phone" name="customer_phone" required
|
||
placeholder="请输入11位手机号码">
|
||
</div>
|
||
</div>
|
||
|
||
<div class="form-row">
|
||
<div class="form-col full-width">
|
||
<label for="modal_customer_email">邮箱地址 *</label>
|
||
<input type="email" id="modal_customer_email" name="customer_email" required
|
||
placeholder="请输入邮箱地址">
|
||
</div>
|
||
</div>
|
||
|
||
<div class="form-row">
|
||
<div class="form-col full-width">
|
||
<label for="modal_shipping_address">收货地址 *</label>
|
||
<textarea id="modal_shipping_address" name="shipping_address" rows="2" required
|
||
placeholder="请输入详细的收货地址，包括省市区县和具体地址"></textarea>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 确认下单按钮 -->
|
||
<div class="form-row">
|
||
<div class="form-col full-width">
|
||
<button type="submit" id="submit-shipping-order" class="order-btn">
|
||
<span class="btn-text">确认下单并支付</span>
|
||
<span class="btn-loading" style="display: none;">处理中...</span>
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</form>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<script src="/js/main.js"></script>
|
||
</body>
|
||
</html> |