269 lines
15 KiB
HTML
269 lines
15 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="user_center_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/user-center.css">
|
||
|
|
<link rel="stylesheet" href="assets/css/toast.css">
|
||
|
|
</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">0</span>
|
||
|
|
</a>
|
||
|
|
<a href="user-center.html" class="user-icon active">
|
||
|
|
<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="user-center-page">
|
||
|
|
<div class="container">
|
||
|
|
<div class="user-center-wrapper">
|
||
|
|
<!-- Sidebar -->
|
||
|
|
<aside class="user-sidebar">
|
||
|
|
<div class="user-profile">
|
||
|
|
<div class="user-avatar">
|
||
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="60" height="60" 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>
|
||
|
|
</div>
|
||
|
|
<h3 class="user-name" id="userName">用户名</h3>
|
||
|
|
<p class="user-email" id="userEmail">user@example.com</p>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<!-- 移除侧边栏导航，改用简洁的账户信息显示 -->
|
||
|
|
</aside>
|
||
|
|
|
||
|
|
<!-- Main Content Area -->
|
||
|
|
<div class="user-content">
|
||
|
|
<div class="account-header">
|
||
|
|
<h1 data-i18n="account_title">账户</h1>
|
||
|
|
<a href="#" id="logoutLink" data-i18n="logout">退出登录</a>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="account-sections">
|
||
|
|
<!-- Order History Section -->
|
||
|
|
<section class="account-section" id="orderHistorySection">
|
||
|
|
<h2 data-i18n="order_history">订单历史</h2>
|
||
|
|
<div class="empty-message">
|
||
|
|
<p data-i18n="no_orders_placed">您还没有下过任何订单。</p>
|
||
|
|
</div>
|
||
|
|
</section>
|
||
|
|
|
||
|
|
<!-- Account Details Section -->
|
||
|
|
<section class="account-section" id="accountDetailsSection">
|
||
|
|
<h2 data-i18n="account_details">账户详情</h2>
|
||
|
|
<div class="account-details-grid">
|
||
|
|
<!-- 用户名 -->
|
||
|
|
<div class="detail-item">
|
||
|
|
<div class="detail-label" data-i18n="nickname_label">用户名</div>
|
||
|
|
<div class="detail-value">
|
||
|
|
<span id="nicknameValue" class="value-text"></span>
|
||
|
|
<a href="#" class="edit-link" id="editNickname" data-i18n="set_btn">设置</a>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<!-- 邮箱 -->
|
||
|
|
<div class="detail-item">
|
||
|
|
<div class="detail-label" data-i18n="email_label">邮箱</div>
|
||
|
|
<div class="detail-value">
|
||
|
|
<span id="emailValue" class="value-text"></span>
|
||
|
|
<a href="#" class="edit-link" id="editEmail" data-i18n="set_btn">设置</a>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<!-- 手机号 -->
|
||
|
|
<div class="detail-item">
|
||
|
|
<div class="detail-label" data-i18n="phone_label">手机号</div>
|
||
|
|
<div class="detail-value">
|
||
|
|
<span id="phoneValue" class="value-text not-set" data-i18n="not_set">未设置</span>
|
||
|
|
<a href="#" class="edit-link" id="editPhone" data-i18n="set_btn">设置</a>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</section>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</main>
|
||
|
|
|
||
|
|
<!-- 支付二维码弹窗 -->
|
||
|
|
<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">
|
||
|
|
<div class="footer-section">
|
||
|
|
<h3 data-i18n="footer_about">关于我们</h3>
|
||
|
|
<ul>
|
||
|
|
<li><a href="#" data-i18n="footer_about_us">公司简介</a></li>
|
||
|
|
<li><a href="#" data-i18n="footer_contact">联系我们</a></li>
|
||
|
|
<li><a href="#" data-i18n="footer_careers">加入我们</a></li>
|
||
|
|
</ul>
|
||
|
|
</div>
|
||
|
|
<div class="footer-section">
|
||
|
|
<h3 data-i18n="footer_help">帮助中心</h3>
|
||
|
|
<ul>
|
||
|
|
<li><a href="#" data-i18n="footer_shipping">配送信息</a></li>
|
||
|
|
<li><a href="#" data-i18n="footer_returns">退换货政策</a></li>
|
||
|
|
<li><a href="#" data-i18n="footer_faq">常见问题</a></li>
|
||
|
|
</ul>
|
||
|
|
</div>
|
||
|
|
<div class="footer-section">
|
||
|
|
<h3 data-i18n="footer_service">客户服务</h3>
|
||
|
|
<ul>
|
||
|
|
<li><a href="#" data-i18n="footer_account">我的账户</a></li>
|
||
|
|
<li><a href="#" data-i18n="footer_orders">订单查询</a></li>
|
||
|
|
<li><a href="#" data-i18n="footer_track">物流跟踪</a></li>
|
||
|
|
</ul>
|
||
|
|
</div>
|
||
|
|
<div class="footer-section">
|
||
|
|
<h3 data-i18n="footer_follow">关注我们</h3>
|
||
|
|
<div class="social-links">
|
||
|
|
<a href="#" aria-label="Facebook">
|
||
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="currentColor">
|
||
|
|
<path d="M24 12.073c0-6.627-5.373-12-12-12s-12 5.373-12 12c0 5.99 4.388 10.954 10.125 11.854v-8.385H7.078v-3.47h3.047V9.43c0-3.007 1.792-4.669 4.533-4.669 1.312 0 2.686.235 2.686.235v2.953H15.83c-1.491 0-1.956.925-1.956 1.874v2.25h3.328l-.532 3.47h-2.796v8.385C19.612 23.027 24 18.062 24 12.073z"/>
|
||
|
|
</svg>
|
||
|
|
</a>
|
||
|
|
<a href="#" aria-label="Instagram">
|
||
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="currentColor">
|
||
|
|
<path d="M12 2.163c3.204 0 3.584.012 4.85.07 3.252.148 4.771 1.691 4.919 4.919.058 1.265.069 1.645.069 4.849 0 3.205-.012 3.584-.069 4.849-.149 3.225-1.664 4.771-4.919 4.919-1.266.058-1.644.07-4.85.07-3.204 0-3.584-.012-4.849-.07-3.26-.149-4.771-1.699-4.919-4.92-.058-1.265-.07-1.644-.07-4.849 0-3.204.013-3.583.07-4.849.149-3.227 1.664-4.771 4.919-4.919 1.266-.057 1.645-.069 4.849-.069zm0-2.163c-3.259 0-3.667.014-4.947.072-4.358.2-6.78 2.618-6.98 6.98-.059 1.281-.073 1.689-.073 4.948 0 3.259.014 3.668.072 4.948.2 4.358 2.618 6.78 6.98 6.98 1.281.058 1.689.072 4.948.072 3.259 0 3.668-.014 4.948-.072 4.354-.2 6.782-2.618 6.979-6.98.059-1.28.073-1.689.073-4.948 0-3.259-.014-3.667-.072-4.947-.196-4.354-2.617-6.78-6.979-6.98-1.281-.059-1.69-.073-4.949-.073zm0 5.838c-3.403 0-6.162 2.759-6.162 6.162s2.759 6.163 6.162 6.163 6.162-2.759 6.162-6.163c0-3.403-2.759-6.162-6.162-6.162zm0 10.162c-2.209 0-4-1.79-4-4 0-2.209 1.791-4 4-4s4 1.791 4 4c0 2.21-1.791 4-4 4zm6.406-11.845c-.796 0-1.441.645-1.441 1.44s.645 1.44 1.441 1.44c.795 0 1.439-.645 1.439-1.44s-.644-1.44-1.439-1.44z"/>
|
||
|
|
</svg>
|
||
|
|
</a>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="footer-bottom">
|
||
|
|
<p data-i18n="footer_copyright">© 2024 vizee为之甄选. 保留所有权利.</p>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</footer>
|
||
|
|
|
||
|
|
<!-- Scripts -->
|
||
|
|
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
|
||
|
|
<script src="https://cdn.bootcdn.net/ajax/libs/qrcodejs/1.0.0/qrcode.min.js"></script>
|
||
|
|
<script src="assets/js/toast.js"></script>
|
||
|
|
<script src="assets/js/api.js"></script>
|
||
|
|
<script src="assets/js/i18n.js"></script>
|
||
|
|
<script src="assets/js/common.js"></script>
|
||
|
|
<script src="assets/js/user-center.js"></script>
|
||
|
|
</body>
|
||
|
|
</html>
|