255 lines
10 KiB
HTML
255 lines
10 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>我的有品 - 米家智能家居</title>
|
|
<link rel="stylesheet" href="../styles/common.css">
|
|
<link rel="stylesheet" href="styles/my-youpin.css">
|
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
|
|
</head>
|
|
<body>
|
|
<div class="container" id="my-youpin-page">
|
|
<!-- 头部导航 -->
|
|
<header class="page-header">
|
|
<div class="header-content">
|
|
<button class="back-btn" onclick="history.back()">
|
|
<i class="fas fa-chevron-left"></i>
|
|
</button>
|
|
<h1 class="page-title">我的有品</h1>
|
|
</div>
|
|
</header>
|
|
|
|
<!-- 功能列表 -->
|
|
<div class="function-list">
|
|
<!-- 我的订单 -->
|
|
<div class="function-item" onclick="navigateToPage('orders')">
|
|
<div class="function-icon">
|
|
<i class="fas fa-file-alt" style="color: #4facfe;"></i>
|
|
</div>
|
|
<div class="function-content">
|
|
<span class="function-title">我的订单</span>
|
|
</div>
|
|
<div class="function-action">
|
|
<i class="fas fa-chevron-right"></i>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 退款/售后 -->
|
|
<div class="function-item" onclick="navigateToPage('refund')">
|
|
<div class="function-icon">
|
|
<i class="fas fa-undo-alt" style="color: #4facfe;"></i>
|
|
</div>
|
|
<div class="function-content">
|
|
<span class="function-title">退款/售后</span>
|
|
</div>
|
|
<div class="function-action">
|
|
<i class="fas fa-chevron-right"></i>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 购物车 -->
|
|
<div class="function-item" onclick="navigateToPage('cart')">
|
|
<div class="function-icon">
|
|
<i class="fas fa-shopping-cart" style="color: #4facfe;"></i>
|
|
<span class="cart-badge">3</span>
|
|
</div>
|
|
<div class="function-content">
|
|
<span class="function-title">购物车</span>
|
|
</div>
|
|
<div class="function-action">
|
|
<i class="fas fa-chevron-right"></i>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 我的收藏 -->
|
|
<div class="function-item" onclick="navigateToPage('favorites')">
|
|
<div class="function-icon">
|
|
<i class="fas fa-star" style="color: #4facfe;"></i>
|
|
</div>
|
|
<div class="function-content">
|
|
<span class="function-title">我的收藏</span>
|
|
</div>
|
|
<div class="function-action">
|
|
<i class="fas fa-chevron-right"></i>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 收货地址 -->
|
|
<div class="function-item" onclick="navigateToPage('address')">
|
|
<div class="function-icon">
|
|
<i class="fas fa-map-marker-alt" style="color: #4facfe;"></i>
|
|
</div>
|
|
<div class="function-content">
|
|
<span class="function-title">收货地址</span>
|
|
</div>
|
|
<div class="function-action">
|
|
<i class="fas fa-chevron-right"></i>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 分隔线 -->
|
|
<div class="section-divider"></div>
|
|
|
|
<!-- 更多功能 -->
|
|
<div class="function-list">
|
|
<!-- 优惠·购买码 -->
|
|
<div class="function-item" onclick="navigateToPage('coupons')">
|
|
<div class="function-icon">
|
|
<i class="fas fa-ticket-alt" style="color: #4facfe;"></i>
|
|
</div>
|
|
<div class="function-content">
|
|
<span class="function-title">优惠·购买码</span>
|
|
</div>
|
|
<div class="function-action">
|
|
<i class="fas fa-chevron-right"></i>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 分隔线 -->
|
|
<div class="section-divider"></div>
|
|
|
|
<!-- 服务与帮助 -->
|
|
<div class="function-list">
|
|
<!-- 消息通知 -->
|
|
<div class="function-item" onclick="navigateToPage('notifications')">
|
|
<div class="function-icon">
|
|
<i class="fas fa-bell" style="color: #4facfe;"></i>
|
|
</div>
|
|
<div class="function-content">
|
|
<span class="function-title">消息通知</span>
|
|
</div>
|
|
<div class="function-action">
|
|
<i class="fas fa-chevron-right"></i>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 售后服务政策 -->
|
|
<div class="function-item" onclick="navigateToPage('service-policy')">
|
|
<div class="function-icon">
|
|
<i class="fas fa-headset" style="color: #4facfe;"></i>
|
|
</div>
|
|
<div class="function-content">
|
|
<span class="function-title">售后服务政策</span>
|
|
</div>
|
|
<div class="function-action">
|
|
<i class="fas fa-chevron-right"></i>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 资质证照 -->
|
|
<div class="function-item" onclick="navigateToPage('certificates')">
|
|
<div class="function-icon">
|
|
<i class="fas fa-certificate" style="color: #4facfe;"></i>
|
|
</div>
|
|
<div class="function-content">
|
|
<span class="function-title">资质证照</span>
|
|
</div>
|
|
<div class="function-action">
|
|
<i class="fas fa-chevron-right"></i>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 协议规则 -->
|
|
<div class="function-item" onclick="navigateToPage('agreements')">
|
|
<div class="function-icon">
|
|
<i class="fas fa-file-contract" style="color: #4facfe;"></i>
|
|
</div>
|
|
<div class="function-content">
|
|
<span class="function-title">协议规则</span>
|
|
</div>
|
|
<div class="function-action">
|
|
<i class="fas fa-chevron-right"></i>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 隐私设置 -->
|
|
<div class="function-item" onclick="navigateToPage('privacy')">
|
|
<div class="function-icon">
|
|
<i class="fas fa-shield-alt" style="color: #4facfe;"></i>
|
|
</div>
|
|
<div class="function-content">
|
|
<span class="function-title">隐私设置</span>
|
|
</div>
|
|
<div class="function-action">
|
|
<i class="fas fa-chevron-right"></i>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 关于有品 -->
|
|
<div class="function-item" onclick="navigateToPage('about')">
|
|
<div class="function-icon">
|
|
<i class="fas fa-info-circle" style="color: #4facfe;"></i>
|
|
</div>
|
|
<div class="function-content">
|
|
<span class="function-title">关于有品</span>
|
|
</div>
|
|
<div class="function-action">
|
|
<i class="fas fa-chevron-right"></i>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script src="../scripts/main.js"></script>
|
|
<script>
|
|
// 我的有品页面特定的JavaScript逻辑
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
// 页面导航函数
|
|
window.navigateToPage = function(pageType) {
|
|
switch(pageType) {
|
|
case 'orders':
|
|
alert('我的订单功能开发中...');
|
|
break;
|
|
case 'refund':
|
|
alert('退款/售后功能开发中...');
|
|
break;
|
|
case 'cart':
|
|
alert('购物车功能开发中...');
|
|
break;
|
|
case 'favorites':
|
|
alert('我的收藏功能开发中...');
|
|
break;
|
|
case 'address':
|
|
alert('收货地址功能开发中...');
|
|
break;
|
|
case 'coupons':
|
|
alert('优惠·购买码功能开发中...');
|
|
break;
|
|
case 'notifications':
|
|
alert('消息通知功能开发中...');
|
|
break;
|
|
case 'service-policy':
|
|
alert('售后服务政策功能开发中...');
|
|
break;
|
|
case 'certificates':
|
|
alert('资质证照功能开发中...');
|
|
break;
|
|
case 'agreements':
|
|
alert('协议规则功能开发中...');
|
|
break;
|
|
case 'privacy':
|
|
alert('隐私设置功能开发中...');
|
|
break;
|
|
case 'about':
|
|
alert('关于有品功能开发中...');
|
|
break;
|
|
default:
|
|
console.log('未知页面类型:', pageType);
|
|
}
|
|
};
|
|
|
|
// 功能项点击事件
|
|
const functionItems = document.querySelectorAll('.function-item');
|
|
functionItems.forEach(item => {
|
|
item.addEventListener('click', function() {
|
|
const title = this.querySelector('.function-title').textContent;
|
|
console.log(`点击了功能项: ${title}`);
|
|
});
|
|
});
|
|
});
|
|
</script>
|
|
</body>
|
|
</html> |