430 lines
22 KiB
HTML
430 lines
22 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 data-i18n="checkout_title">vizee为之甄选 - 结算</title>
|
||
|
|
<link rel="stylesheet" href="assets/css/reset.css">
|
||
|
|
<link rel="stylesheet" href="assets/css/common.css">
|
||
|
|
<link rel="stylesheet" href="assets/css/header.css">
|
||
|
|
<link rel="stylesheet" href="assets/css/footer.css">
|
||
|
|
<link rel="stylesheet" href="assets/css/checkout.css">
|
||
|
|
<link rel="stylesheet" href="assets/css/toast.css">
|
||
|
|
<script src="assets/js/toast.js"></script>
|
||
|
|
<script src="assets/js/api.js"></script>
|
||
|
|
</head>
|
||
|
|
<body>
|
||
|
|
<!-- Header -->
|
||
|
|
<header class="header">
|
||
|
|
<!-- Announcement Banner -->
|
||
|
|
<div class="announcement-banner">
|
||
|
|
<div class="announcement-slider">
|
||
|
|
<div class="announcement-item">
|
||
|
|
<span data-i18n="announcement_1">🚚 FREE SHIPPING OVER $59</span>
|
||
|
|
</div>
|
||
|
|
<div class="announcement-item">
|
||
|
|
<span data-i18n="announcement_2">🔥 FINAL SALE | PRICES LIKE THIS WON'T LAST</span>
|
||
|
|
</div>
|
||
|
|
<div class="announcement-item">
|
||
|
|
<span data-i18n="announcement_3">💰 SITEWIDE OFFER | 25% OFF ALL ORDERS</span>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="header-top">
|
||
|
|
<div class="container">
|
||
|
|
<div class="header-top-content">
|
||
|
|
<div class="promo-text" data-i18n="promo_banner">全场最高6折优惠</div>
|
||
|
|
<div class="header-actions">
|
||
|
|
<div class="language-switcher">
|
||
|
|
<select id="languageSelect" aria-label="Language Selector">
|
||
|
|
<option value="zh-CN">中文</option>
|
||
|
|
<option value="en-US">English</option>
|
||
|
|
<option value="ja-JP">日本語</option>
|
||
|
|
</select>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="header-main">
|
||
|
|
<div class="container">
|
||
|
|
<div class="header-main-content">
|
||
|
|
<div class="logo">
|
||
|
|
<a href="index.html">
|
||
|
|
<h1 data-i18n="site_name">vizee<span style="font-size: 0.7em; margin-left: 6px;">为之甄选</span></h1>
|
||
|
|
</a>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<nav class="main-nav">
|
||
|
|
<ul>
|
||
|
|
<li><a href="index.html" data-i18n="nav_home">首页</a></li>
|
||
|
|
<li><a href="home.html" data-i18n="nav_all_products">所有商品</a></li>
|
||
|
|
</ul>
|
||
|
|
</nav>
|
||
|
|
|
||
|
|
<div class="header-tools">
|
||
|
|
<div class="search-box">
|
||
|
|
<input type="text" data-i18n-placeholder="search_placeholder" placeholder="搜索商品...">
|
||
|
|
<button type="button" class="search-btn" aria-label="Search">
|
||
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||
|
|
<circle cx="11" cy="11" r="8"></circle>
|
||
|
|
<path d="m21 21-4.35-4.35"></path>
|
||
|
|
</svg>
|
||
|
|
</button>
|
||
|
|
</div>
|
||
|
|
<a href="javascript:void(0)" class="cart-icon">
|
||
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||
|
|
<circle cx="9" cy="21" r="1"></circle>
|
||
|
|
<circle cx="20" cy="21" r="1"></circle>
|
||
|
|
<path d="M1 1h4l2.68 13.39a2 2 0 0 0 2 1.61h9.72a2 2 0 0 0 2-1.61L23 6H6"></path>
|
||
|
|
</svg>
|
||
|
|
<span class="cart-count" id="cartCount">0</span>
|
||
|
|
</a>
|
||
|
|
<a href="login.html" class="user-icon">
|
||
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||
|
|
<path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"></path>
|
||
|
|
<circle cx="12" cy="7" r="4"></circle>
|
||
|
|
</svg>
|
||
|
|
</a>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</header>
|
||
|
|
|
||
|
|
<!-- Main Content -->
|
||
|
|
<main class="checkout-page">
|
||
|
|
<div class="container">
|
||
|
|
<div class="checkout-wrapper">
|
||
|
|
<!-- Left Column: Checkout Form -->
|
||
|
|
<div class="checkout-form">
|
||
|
|
<!-- 收货地址 -->
|
||
|
|
<div class="form-section address-section">
|
||
|
|
<h2 data-i18n="delivery">收货地址</h2>
|
||
|
|
|
||
|
|
<div class="address-card" id="selectedAddressCard">
|
||
|
|
<div class="no-address" id="noAddress">
|
||
|
|
<p>请选择收货地址</p>
|
||
|
|
<button class="btn btn-primary" id="selectAddressBtn">
|
||
|
|
选择地址
|
||
|
|
</button>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="address-info" id="addressInfo" style="display: none;">
|
||
|
|
<div class="address-header">
|
||
|
|
<div class="address-user">
|
||
|
|
<span class="user-name" id="addressName"></span>
|
||
|
|
<span class="user-phone" id="addressPhone"></span>
|
||
|
|
</div>
|
||
|
|
<div class="address-actions-top">
|
||
|
|
<button class="btn-edit-selected" id="editSelectedAddressBtn" title="编辑地址">
|
||
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||
|
|
<path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"></path>
|
||
|
|
<path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z"></path>
|
||
|
|
</svg>
|
||
|
|
编辑
|
||
|
|
</button>
|
||
|
|
<button class="btn-change-address" id="changeAddressBtn">更换</button>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="address-detail" id="addressDetail"></div>
|
||
|
|
<div class="address-tag">
|
||
|
|
<span class="tag tag-default" id="addressTag"></span>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<!-- 商品列表 -->
|
||
|
|
<div class="form-section goods-section">
|
||
|
|
<h2 data-i18n="order_items">商品清单</h2>
|
||
|
|
<div class="goods-list" id="goodsList">
|
||
|
|
<!-- 商品将通过 JS 加载 -->
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<!-- 优惠券选择 -->
|
||
|
|
<div class="form-section coupon-section">
|
||
|
|
<h2 data-i18n="coupons">优惠券</h2>
|
||
|
|
<div class="coupon-selector" id="couponSelector">
|
||
|
|
<div class="coupon-placeholder">
|
||
|
|
<span id="couponText">选择优惠券</span>
|
||
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||
|
|
<polyline points="9 18 15 12 9 6"></polyline>
|
||
|
|
</svg>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<!-- 订单备注 -->
|
||
|
|
<div class="form-section">
|
||
|
|
<h2 data-i18n="order_notes">订单备注</h2>
|
||
|
|
<textarea id="orderNotes" data-i18n-placeholder="order_notes_placeholder" placeholder="选填，建议先和商家沟通确认" maxlength="200" rows="3"></textarea>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<!-- 支付方式 -->
|
||
|
|
<div class="form-section payment-section">
|
||
|
|
<h2>支付方式</h2>
|
||
|
|
<div class="payment-methods">
|
||
|
|
<div class="payment-method active" data-payment="wechat">
|
||
|
|
<div class="payment-method-content">
|
||
|
|
<div class="payment-icon">
|
||
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" fill="#09BB07">
|
||
|
|
<path d="M9.5 4C5.36 4 2 6.69 2 10c0 1.89 1.08 3.56 2.78 4.66L4 17.5l3.5-1.5c.63.14 1.3.21 2 .21 4.14 0 7.5-2.69 7.5-6S13.64 4 9.5 4zm5.5 6c-1.66 0-3-1.34-3-3s1.34-3 3-3 3 1.34 3 3-1.34 3-3 3z"/>
|
||
|
|
<path d="M15 12c-3.31 0-6 2.24-6 5s2.69 5 6 5c.67 0 1.33-.1 1.95-.27L21 23l-.62-2.72C21.55 19.28 22 18.19 22 17c0-2.76-2.69-5-6-5zm-2 6.5l-1.5-1 3.5-3 1.5 1-3.5 3z"/>
|
||
|
|
</svg>
|
||
|
|
</div>
|
||
|
|
<div class="payment-info">
|
||
|
|
<div class="payment-name">微信支付</div>
|
||
|
|
<div class="payment-desc">支持微信扫码支付</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="payment-check">
|
||
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3">
|
||
|
|
<polyline points="20 6 9 17 4 12"></polyline>
|
||
|
|
</svg>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="payment-method disabled" data-payment="alipay" title="暂未开放">
|
||
|
|
<div class="payment-method-content">
|
||
|
|
<div class="payment-icon">
|
||
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" fill="#1678FF">
|
||
|
|
<path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zm-1-13h2v6h-2zm0 8h2v2h-2z"/>
|
||
|
|
</svg>
|
||
|
|
</div>
|
||
|
|
<div class="payment-info">
|
||
|
|
<div class="payment-name">支付宝 <span class="badge-disabled">暂未开放</span></div>
|
||
|
|
<div class="payment-desc">支持支付宝扫码支付</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<!-- Pay Now Button -->
|
||
|
|
<button class="btn btn-primary btn-pay-now" id="payNowBtn">
|
||
|
|
<span data-i18n="submit_order">提交订单</span>
|
||
|
|
</button>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<!-- Right Column: Order Summary -->
|
||
|
|
<div class="order-summary">
|
||
|
|
<h3 data-i18n="order_summary">订单摘要</h3>
|
||
|
|
|
||
|
|
<div class="order-totals">
|
||
|
|
<div class="total-row">
|
||
|
|
<span>商品总额</span>
|
||
|
|
<span id="subtotalAmount">￥0.00</span>
|
||
|
|
</div>
|
||
|
|
<div class="total-row">
|
||
|
|
<span>运费</span>
|
||
|
|
<span id="shippingAmount">免运费</span>
|
||
|
|
</div>
|
||
|
|
<div class="total-row" id="promotionRow" style="display: none;">
|
||
|
|
<span>活动优惠</span>
|
||
|
|
<span class="discount-amount" id="promotionAmount">-￥0.00</span>
|
||
|
|
</div>
|
||
|
|
<div class="total-row" id="couponRow" style="display: none;">
|
||
|
|
<span>优惠券</span>
|
||
|
|
<span class="discount-amount" id="couponAmount">-￥0.00</span>
|
||
|
|
</div>
|
||
|
|
<div class="total-row total-final">
|
||
|
|
<span>应付总额</span>
|
||
|
|
<div class="total-price">
|
||
|
|
<span class="amount" id="totalAmount">￥0.00</span>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</main>
|
||
|
|
|
||
|
|
<!-- 地址选择弹窗 -->
|
||
|
|
<div class="modal" id="addressModal">
|
||
|
|
<div class="modal-content">
|
||
|
|
<div class="modal-header">
|
||
|
|
<h3>选择收货地址</h3>
|
||
|
|
<button class="modal-close" id="closeAddressModal">×</button>
|
||
|
|
</div>
|
||
|
|
<div class="modal-body">
|
||
|
|
<div class="address-list" id="addressList">
|
||
|
|
<!-- 地址列表将通过 JS 加载 -->
|
||
|
|
</div>
|
||
|
|
<button class="btn btn-primary btn-add-address" id="addAddressBtn">
|
||
|
|
+ 新增收货地址
|
||
|
|
</button>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<!-- 优惠券选择弹窗 -->
|
||
|
|
<div class="modal" id="couponModal">
|
||
|
|
<div class="modal-content">
|
||
|
|
<div class="modal-header">
|
||
|
|
<h3>选择优惠券</h3>
|
||
|
|
<button class="modal-close" id="closeCouponModal">×</button>
|
||
|
|
</div>
|
||
|
|
<div class="modal-body">
|
||
|
|
<div class="coupon-list" id="couponList">
|
||
|
|
<!-- 优惠券列表将通过 JS 加载 -->
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="modal-footer">
|
||
|
|
<button class="btn btn-primary btn-confirm-coupon" id="confirmCouponBtn">
|
||
|
|
确定
|
||
|
|
</button>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<!-- 新增地址弹窗 -->
|
||
|
|
<div class="modal" id="addAddressModal">
|
||
|
|
<div class="modal-content modal-address">
|
||
|
|
<div class="modal-header">
|
||
|
|
<h3>
|
||
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" style="vertical-align: middle; margin-right: 8px;">
|
||
|
|
<path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z"></path>
|
||
|
|
<circle cx="12" cy="10" r="3"></circle>
|
||
|
|
</svg>
|
||
|
|
新增收货地址
|
||
|
|
</h3>
|
||
|
|
<button class="modal-close" id="closeAddAddressModal">×</button>
|
||
|
|
</div>
|
||
|
|
<div class="modal-body">
|
||
|
|
<form id="addAddressForm" class="address-form">
|
||
|
|
<div class="form-row">
|
||
|
|
<div class="form-group">
|
||
|
|
<label for="newAddressName">
|
||
|
|
<span class="label-icon">👤</span>
|
||
|
|
收货人 *
|
||
|
|
</label>
|
||
|
|
<input type="text" id="newAddressName" placeholder="请输入收货人姓名" required>
|
||
|
|
</div>
|
||
|
|
<div class="form-group">
|
||
|
|
<label for="newAddressPhone">
|
||
|
|
<span class="label-icon">📱</span>
|
||
|
|
联系电话 *
|
||
|
|
</label>
|
||
|
|
<input type="tel" id="newAddressPhone" placeholder="请输入11位手机号" maxlength="11" required>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="form-group">
|
||
|
|
<label>
|
||
|
|
<span class="label-icon">📍</span>
|
||
|
|
所在地区 *
|
||
|
|
</label>
|
||
|
|
<div class="region-selector">
|
||
|
|
<select id="newAddressProvince" class="region-select" aria-label="选择省份" required>
|
||
|
|
<option value="">请选择省份</option>
|
||
|
|
</select>
|
||
|
|
<select id="newAddressCity" class="region-select" aria-label="选择城市" required disabled>
|
||
|
|
<option value="">请选择城市</option>
|
||
|
|
</select>
|
||
|
|
<select id="newAddressDistrict" class="region-select" aria-label="选择区县" required disabled>
|
||
|
|
<option value="">请选择区县</option>
|
||
|
|
</select>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="form-group">
|
||
|
|
<label for="newAddressDetail">
|
||
|
|
<span class="label-icon">🏠</span>
|
||
|
|
详细地址 *
|
||
|
|
</label>
|
||
|
|
<textarea id="newAddressDetail" rows="3" placeholder="请输入详细地址，如街道、门牌号等" required></textarea>
|
||
|
|
<div class="char-count">
|
||
|
|
<span id="detailCharCount">0</span>/100
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="form-group checkbox-group">
|
||
|
|
<label class="checkbox-label-new">
|
||
|
|
<input type="checkbox" id="newAddressIsDefault">
|
||
|
|
<span class="checkbox-custom"></span>
|
||
|
|
<span class="checkbox-text">设为默认地址</span>
|
||
|
|
</label>
|
||
|
|
</div>
|
||
|
|
</form>
|
||
|
|
</div>
|
||
|
|
<div class="modal-footer">
|
||
|
|
<button class="btn btn-secondary" id="cancelAddAddressBtn">
|
||
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" style="vertical-align: middle; margin-right: 4px;">
|
||
|
|
<line x1="18" y1="6" x2="6" y2="18"></line>
|
||
|
|
<line x1="6" y1="6" x2="18" y2="18"></line>
|
||
|
|
</svg>
|
||
|
|
取消
|
||
|
|
</button>
|
||
|
|
<button class="btn btn-primary" id="saveAddressBtn">
|
||
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" style="vertical-align: middle; margin-right: 4px;">
|
||
|
|
<polyline points="20 6 9 17 4 12"></polyline>
|
||
|
|
</svg>
|
||
|
|
保存
|
||
|
|
</button>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<!-- 支付二维码弹窗 -->
|
||
|
|
<div class="modal" id="paymentModal">
|
||
|
|
<div class="modal-content payment-modal-content">
|
||
|
|
<button class="modal-close" id="closePaymentModal" aria-label="关闭">
|
||
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||
|
|
<line x1="18" y1="6" x2="6" y2="18"></line>
|
||
|
|
<line x1="6" y1="6" x2="18" y2="18"></line>
|
||
|
|
</svg>
|
||
|
|
</button>
|
||
|
|
<div class="modal-header">
|
||
|
|
<h2>微信扫码支付</h2>
|
||
|
|
</div>
|
||
|
|
<div class="modal-body payment-modal-body">
|
||
|
|
<div class="payment-status" id="paymentStatus">
|
||
|
|
<div class="payment-amount">
|
||
|
|
<div class="amount-label">应付金额</div>
|
||
|
|
<div class="amount-value" id="paymentAmount">￥0.00</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="qrcode-container" id="qrcodeContainer">
|
||
|
|
<div class="qrcode-loading">
|
||
|
|
<div class="spinner"></div>
|
||
|
|
<p>正在生成二维码...</p>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="payment-tips">
|
||
|
|
<p>请使用微信扫一扫上方二维码完成支付</p>
|
||
|
|
<p class="tips-secondary">支付成功后页面将自动跳转</p>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="payment-countdown">
|
||
|
|
<span>二维码有效期：</span>
|
||
|
|
<span class="countdown-time" id="countdownTime">5:00</span>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<!-- Footer -->
|
||
|
|
<footer class="footer">
|
||
|
|
<div class="container">
|
||
|
|
<div class="footer-content">
|
||
|
|
<p>© 2024 vizee为之甄选. All rights reserved.</p>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</footer>
|
||
|
|
|
||
|
|
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
|
||
|
|
<script src="assets/js/toast.js"></script>
|
||
|
|
<script src="assets/js/api.js"></script>
|
||
|
|
<script src="assets/js/china-regions.js"></script>
|
||
|
|
<script src="assets/js/i18n.js"></script>
|
||
|
|
<script src="assets/js/common.js"></script>
|
||
|
|
<script src="assets/js/checkout.js"></script>
|
||
|
|
</body>
|
||
|
|
</html>
|