BS结构用户界面设计相关代码
首页：
<!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="css/style.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
</head>
<body>
<!-- 页面加载动画 -->
<div class="page-loader">
<div class="loader-spinner"></div>
<p>加载中...</p>
</div>
<!-- 导航栏 -->
<nav class="navbar">
<div class="container">
<div class="logo">
<i class="fas fa-university"></i>
<span>校园二手拍卖</span>
</div>
<div class="search-box">
<input type="text" placeholder="搜索商品...">
<button><i class="fas fa-search"></i></button>
</div>
<ul class="nav-links">
<li><a href="index.html" class="active">首页</a></li>
<li><a href="pages/product-list.html">商品分类</a></li>
<li><a href="pages/post-product.html">发布商品</a></li>
<li><a href="pages/login.html"><i class="fas fa-user"></i> 登录</a></li>
<li><a href="pages/register.html"><i class="fas fa-user-plus"></i> 注册</a></li>
</ul>
</div>
</nav>
<!-- 轮播图 -->
<section class="carousel">
<div class="carousel-inner">
<div class="carousel-item active">
<img src="images/生成图片 (8).png" alt="Banner 1">
<div class="carousel-caption">
<h2>绿色循环，智慧生活</h2>
<p>让你的旧物遇见新主</p>
</div>
</div>
<div class="carousel-item">
<img src="images/生成图片 (9).png" alt="Banner 2">
<div class="carousel-caption">
<h2>校园二手，物尽其用</h2>
<p>低价淘好物，环保又实惠</p>
</div>
</div>
<div class="carousel-item">
<img src="images/生成图片.png" alt="Banner 3">
<div class="carousel-caption">
<h2>拍卖竞价，公平透明</h2>
<p>买到心仪商品，卖出理想价格</p>
</div>
</div>
</div>
<div class="carousel-indicators">
<span class="indicator active"></span>
<span class="indicator"></span>
<span class="indicator"></span>
</div>
<button class="carousel-control carousel-control-prev"><i class="fas fa-chevron-left"></i></button>
<button class="carousel-control carousel-control-next"><i class="fas fa-chevron-right"></i></button>
</section>
<!-- 商品分类 -->
<section class="categories">
<div class="container">
<h2>商品分类</h2>
<div class="category-grid">
<div class="category-item">
<i class="fas fa-book"></i>
<span>图书教材</span>
</div>
<div class="category-item">
<i class="fas fa-laptop"></i>
<span>数码产品</span>
</div>
<div class="category-item">
<i class="fas fa-tshirt"></i>
<span>服饰鞋包</span>
</div>
<div class="category-item">
<i class="fas fa-home"></i>
<span>家居用品</span>
</div>
<div class="category-item">
<i class="fas fa-bicycle"></i>
<span>交通工具</span>
</div>
<div class="category-item">
<i class="fas fa-football-ball"></i>
<span>运动器材</span>
</div>
<div class="category-item">
<i class="fas fa-music"></i>
<span>乐器设备</span>
</div>
<div class="category-item">
<i class="fas fa-graduation-cap"></i>
<span>其他物品</span>
</div>
</div>
</div>
</section>
<!-- 推荐商品 -->
<section class="products">
<div class="container">
<div class="section-header">
<h2>推荐商品</h2>
<a href="pages/product-list.html" class="view-more">查看更多 <i class="fas fa-arrow-right"></i></a>
</div>
<div class="product-grid"></div>
</div>
</section>
<!-- 最新上架 -->
<section class="products">
<div class="container">
<div class="section-header">
<h2>最新上架</h2>
<a href="pages/product-list.html" class="view-more">查看更多 <i class="fas fa-arrow-right"></i></a>
</div>
<div class="product-grid"></div>
</div>
</section>
<!-- 页脚 -->
<footer class="footer">
<div class="container">
<div class="footer-content">
<div class="footer-section about">
<div class="logo">
<i class="fas fa-university"></i>
<span>校园二手拍卖</span>
</div>
<p>为校园师生提供安全、便捷的二手商品拍卖平台，促进资源循环利用，打造绿色校园生活。</p>
<div class="social-links">
<a href="#"><i class="fab fa-weixin"></i></a>
<a href="#"><i class="fab fa-weibo"></i></a>
<a href="#"><i class="fab fa-qq"></i></a>
</div>
</div>
<div class="footer-section links">
<h3>快速链接</h3>
<ul>
<li><a href="#">关于我们</a></li>
<li><a href="#">使用帮助</a></li>
<li><a href="#">联系我们</a></li>
<li><a href="#">隐私政策</a></li>
<li><a href="#">用户协议</a></li>
</ul>
</div>
<div class="footer-section contact">
<h3>联系方式</h3>
<ul>
<li><i class="fas fa-map-marker-alt"></i> 北京市海淀区中关村大街59号</li>
<li><i class="fas fa-phone"></i> 010-12345678</li>
<li><i class="fas fa-envelope"></i> contact@campusauction.com</li>
</ul>
</div>
</div>
<div class="footer-bottom">
<p>© 2023 校园二手拍卖网站. 保留所有权利.</p>
</div>
</div>
</footer>
<script src="js/main.js"></script>
</body>
</html>
user-center.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="../css/style.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
</head>
<body>
<!-- 导航栏 -->
<nav class="navbar">
<div class="container">
<div class="logo">
<i class="fas fa-university"></i>
<span>校园二手拍卖</span>
</div>
<div class="search-box">
<input type="text" placeholder="搜索商品...">
<button><i class="fas fa-search"></i></button>
</div>
<ul class="nav-links">
<li><a href="../index.html">首页</a></li>
<li><a href="product-list.html">商品分类</a></li>
<li><a href="post-product.html">发布商品</a></li>
<!-- 用户下拉菜单将通过JavaScript动态生成 -->
</ul>
</div>
</nav>
<!-- 个人中心页面内容 -->
<section class="user-center">
<div class="container">
<div class="user-center-content">
<!-- 左侧导航 -->
<aside class="user-sidebar">
<div class="user-profile">
<div class="user-avatar">
<img src="../images/头像1.png" alt="用户头像">
</div>
<div class="user-info">
<h3></h3>
<p class="student-id">学号：</p>
<div class="user-rating">
<!-- 评分将通过JavaScript动态生成 -->
<span></span>
</div>
</div>
</div>
<nav class="user-nav">
<ul>
<li><a href="user-center.html" class="active">
<i class="fas fa-home"></i>
个人中心
</a></li>
<li><a href="my-products.html">
<i class="fas fa-store"></i>
我的在售
</a></li>
<li><a href="my-orders.html">
<i class="fas fa-shopping-cart"></i>
我的订单
</a></li>
<li><a href="my-messages.html">
<i class="fas fa-envelope"></i>
我的消息
<span class="badge">3</span>
</a></li>
<li><a href="#">
<i class="fas fa-heart"></i>
我的收藏
</a></li>
<li><a href="settings.html">
<i class="fas fa-cog"></i>
设置
</a></li>
</ul>
</nav>
</aside>
<!-- 右侧内容 -->
<main class="user-main">
<div class="user-center-header">
<h2>个人中心</h2>
<p>欢迎回来，！</p>
</div>
<div class="user-stats">
<div class="stat-item">
<div class="stat-number"></div>
<div class="stat-label">在售商品</div>
</div>
<div class="stat-item">
<div class="stat-number"></div>
<div class="stat-label">已售商品</div>
</div>
<div class="stat-item">
<div class="stat-number"></div>
<div class="stat-label">已购商品</div>
</div>
<div class="stat-item">
<div class="stat-number"></div>
<div class="stat-label">交易成功</div>
</div>
</div>
<div class="user-activity">
<div class="section-header">
<h3>最近活动</h3>
<a href="#" class="view-more">查看全部</a>
</div>
<div class="activity-list">
<!-- 最近活动将通过JavaScript动态生成 -->
</div>
</div>
<div class="user-products">
<div class="section-header">
<h3>我的在售商品</h3>
<a href="my-products.html" class="view-more">查看全部</a>
</div>
<div class="product-grid">
<!-- 我的在售商品将通过JavaScript动态生成 -->
</div>
</div>
</main>
</div>
</div>
</section>
<!-- 页脚 -->
<footer class="footer">
<div class="container">
<div class="footer-content">
<div class="footer-section about">
<div class="logo">
<i class="fas fa-university"></i>
<span>校园二手拍卖</span>
</div>
<p>为校园师生提供安全、便捷的二手商品拍卖平台，促进资源循环利用，打造绿色校园生活。</p>
<div class="social-links">
<a href="#"><i class="fab fa-weixin"></i></a>
<a href="#"><i class="fab fa-weibo"></i></a>
<a href="#"><i class="fab fa-qq"></i></a>
</div>
</div>
<div class="footer-section links">
<h3>快速链接</h3>
<ul>
<li><a href="#">关于我们</a></li>
<li><a href="#">使用帮助</a></li>
<li><a href="#">联系我们</a></li>
<li><a href="#">隐私政策</a></li>
<li><a href="#">用户协议</a></li>
</ul>
</div>
<div class="footer-section contact">
<h3>联系方式</h3>
<ul>
<li><i class="fas fa-map-marker-alt"></i> 北京市海淀区中关村大街59号</li>
<li><i class="fas fa-phone"></i> 010-12345678</li>
<li><i class="fas fa-envelope"></i> contact@campusauction.com</li>
</ul>
</div>
</div>
<div class="footer-bottom">
<p>© 2023 校园二手拍卖网站. 保留所有权利.</p>
</div>
</div>
</footer>
<script src="../js/main.js"></script>
</body>
</html>
settings.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="../css/style.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
</head>
<body>
<!-- 导航栏 -->
<nav class="navbar">
<div class="container">
<div class="logo">
<i class="fas fa-university"></i>
<span>校园二手拍卖</span>
</div>
<div class="search-box">
<input type="text" placeholder="搜索商品...">
<button><i class="fas fa-search"></i></button>
</div>
<ul class="nav-links">
<li><a href="../index.html">首页</a></li>
<li><a href="product-list.html">商品分类</a></li>
<li><a href="post-product.html">发布商品</a></li>
<li class="dropdown">
<a href="#">
<img src="../images/头像1.png" alt="用户头像" class="user-avatar">
<span>用户</span>
<i class="fas fa-chevron-down"></i>
</a>
<div class="dropdown-menu">
<a href="user-center.html">个人中心</a>
<a href="my-products.html">我的在售</a>
<a href="my-orders.html">我的订单</a>
<a href="settings.html">设置</a>
<a href="#" id="logout-link">退出登录</a>
</div>
</li>
</ul>
</div>
</nav>
<!-- 设置页面内容 -->
<section class="user-center">
<div class="container">
<div class="user-center-content">
<!-- 左侧导航 -->
<aside class="user-sidebar">
<div class="user-profile">
<div class="user-avatar">
<img src="../images/头像1.png" alt="用户头像">
</div>
<div class="user-info">
<h3></h3>
<p class="student-id">学号：</p>
<div class="user-rating">
<span></span>
</div>
</div>
</div>
<nav class="user-nav">
<ul>
<li><a href="user-center.html">
<i class="fas fa-home"></i>
个人中心
</a></li>
<li><a href="my-products.html">
<i class="fas fa-store"></i>
我的在售
</a></li>
<li><a href="my-orders.html">
<i class="fas fa-shopping-cart"></i>
我的订单
</a></li>
<li><a href="settings.html" class="active">
<i class="fas fa-cog"></i>
设置
</a></li>
</ul>
</nav>
</aside>
<!-- 右侧内容 -->
<main class="user-main">
<div class="user-center-header">
<h2>账户设置</h2>
<p>管理您的账户信息和偏好设置</p>
</div>
<!-- 设置表单 -->
<div class="settings-content">
<!-- 基本信息 -->
<div class="settings-section">
<h3>
<i class="fas fa-user"></i>
基本信息
</h3>
<form class="settings-form" id="profile-form">
<div class="form-group">
<label>头像</label>
<div class="avatar-upload">
<div class="avatar-preview">
<img id="avatar-preview" src="../images/头像1.png" alt="头像预览">
</div>
<div class="upload-controls">
<input type="file" id="avatar-input" accept="image/*" style="display: none;">
<button type="button" class="btn btn-outline" onclick="document.getElementById('avatar-input').click()">
<i class="fas fa-upload"></i> 上传头像
</button>
<p class="upload-hint">支持 JPG、PNG 格式，大小不超过 2MB</p>
</div>
</div>
</div>
<div class="form-group">
<label for="username">用户名</label>
<input type="text" id="username" placeholder="请输入用户名">
</div>
<div class="form-group">
<label for="student-id">学号</label>
<input type="text" id="student-id" placeholder="请输入学号">
</div>
<div class="form-group">
<label for="email">邮箱</label>
<input type="email" id="email" placeholder="请输入邮箱">
</div>
<div class="form-group">
<label for="phone">手机号</label>
<input type="tel" id="phone" placeholder="请输入手机号">
</div>
<div class="form-actions">
<button type="submit" class="btn btn-primary">保存修改</button>
</div>
</form>
</div>
<!-- 密码修改 -->
<div class="settings-section">
<h3>
<i class="fas fa-lock"></i>
修改密码
</h3>
<form class="settings-form" id="password-form">
<div class="form-group">
<label for="old-password">当前密码</label>
<input type="password" id="old-password" placeholder="请输入当前密码">
</div>
<div class="form-group">
<label for="new-password">新密码</label>
<input type="password" id="new-password" placeholder="请输入新密码（至少6位）">
</div>
<div class="form-group">
<label for="confirm-password">确认新密码</label>
<input type="password" id="confirm-password" placeholder="请再次输入新密码">
</div>
<div class="form-actions">
<button type="submit" class="btn btn-primary">修改密码</button>
</div>
</form>
</div>
<!-- 通知设置 -->
<div class="settings-section">
<h3>
<i class="fas fa-bell"></i>
通知设置
</h3>
<div class="settings-form">
<div class="form-group">
<label class="switch-label">
<span class="switch-text">邮件通知</span>
<input type="checkbox" id="email-notification" checked>
<span class="switch-slider"></span>
</label>
<p class="form-hint">接收订单、出价等邮件通知</p>
</div>
<div class="form-group">
<label class="switch-label">
<span class="switch-text">短信通知</span>
<input type="checkbox" id="sms-notification">
<span class="switch-slider"></span>
</label>
<p class="form-hint">接收重要信息的短信通知</p>
</div>
<div class="form-group">
<label class="switch-label">
<span class="switch-text">出价提醒</span>
<input type="checkbox" id="bid-notification" checked>
<span class="switch-slider"></span>
</label>
<p class="form-hint">当您的商品收到新出价时提醒</p>
</div>
<div class="form-actions">
<button type="button" class="btn btn-primary" id="save-notifications">保存设置</button>
</div>
</div>
</div>
<!-- 隐私设置 -->
<div class="settings-section">
<h3>
<i class="fas fa-shield-alt"></i>
隐私设置
</h3>
<div class="settings-form">
<div class="form-group">
<label class="switch-label">
<span class="switch-text">显示手机号</span>
<input type="checkbox" id="show-phone" checked>
<span class="switch-slider"></span>
</label>
<p class="form-hint">其他用户可以看到您的手机号</p>
</div>
<div class="form-group">
<label class="switch-label">
<span class="switch-text">显示邮箱</span>
<input type="checkbox" id="show-email">
<span class="switch-slider"></span>
</label>
<p class="form-hint">其他用户可以看到您的邮箱</p>
</div>
<div class="form-actions">
<button type="button" class="btn btn-primary" id="save-privacy">保存设置</button>
</div>
</div>
</div>
</div>
</main>
</div>
</div>
</section>
<!-- 页脚 -->
<footer class="footer">
<div class="container">
<div class="footer-content">
<div class="footer-section about">
<div class="logo">
<i class="fas fa-university"></i>
<span>校园二手拍卖</span>
</div>
<p>为校园师生提供安全、便捷的二手商品拍卖平台，促进资源循环利用，打造绿色校园生活。</p>
<div class="social-links">
<a href="#"><i class="fab fa-weixin"></i></a>
<a href="#"><i class="fab fa-weibo"></i></a>
<a href="#"><i class="fab fa-qq"></i></a>
</div>
</div>
<div class="footer-section links">
<h3>快速链接</h3>
<ul>
<li><a href="#">关于我们</a></li>
<li><a href="#">使用帮助</a></li>
<li><a href="#">联系我们</a></li>
<li><a href="#">隐私政策</a></li>
<li><a href="#">用户协议</a></li>
</ul>
</div>
<div class="footer-section contact">
<h3>联系方式</h3>
<ul>
<li><i class="fas fa-map-marker-alt"></i> 北京市海淀区中关村大街59号</li>
<li><i class="fas fa-phone"></i> 010-12345678</li>
<li><i class="fas fa-envelope"></i> contact@campusauction.com</li>
</ul>
</div>
</div>
<div class="footer-bottom">
<p>© 2023 校园二手拍卖网站. 保留所有权利.</p>
</div>
</div>
</footer>
<script src="../js/main.js"></script>
</body>
</html>
seller-shop.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="../css/style.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
</head>
<body>
<!-- 导航栏 -->
<nav class="navbar">
<div class="container">
<div class="logo">
<i class="fas fa-university"></i>
<span>校园二手拍卖</span>
</div>
<div class="search-box">
<input type="text" placeholder="搜索商品...">
<button><i class="fas fa-search"></i></button>
</div>
<ul class="nav-links">
<li><a href="../index.html">首页</a></li>
<li><a href="product-list.html">商品分类</a></li>
<li><a href="post-product.html">发布商品</a></li>
<li><a href="login.html"><i class="fas fa-user"></i> 登录</a></li>
<li><a href="register.html"><i class="fas fa-user-plus"></i> 注册</a></li>
</ul>
</div>
</nav>
<!-- 卖家店铺页面内容 -->
<section class="seller-shop-page">
<div class="container">
<div class="breadcrumb">
<a href="../index.html">首页</a> >
<span id="seller-shop-name">卖家店铺</span>
</div>
<!-- 卖家信息卡片 -->
<div class="seller-shop-header">
<div class="seller-shop-info">
<div class="seller-shop-avatar">
<img id="seller-shop-avatar-img" src="" alt="卖家头像">
</div>
<div class="seller-shop-details">
<h1 id="seller-shop-title">卖家店铺</h1>
<div class="seller-shop-meta">
<div class="seller-rating-info">
<div class="stars" id="seller-shop-stars">
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star-half-alt"></i>
</div>
<span id="seller-shop-rating">4.5</span>
<span class="divider">|</span>
<span id="seller-shop-transactions">128笔交易</span>
</div>
<div class="seller-shop-stats">
<div class="stat-item">
<span class="stat-number" id="seller-products-count">0</span>
<span class="stat-label">在售商品</span>
</div>
<div class="stat-item">
<span class="stat-number" id="seller-sold-count">0</span>
<span class="stat-label">已售商品</span>
</div>
</div>
</div>
</div>
<div class="seller-shop-actions">
<button class="btn btn-primary" id="contact-seller-shop-btn">
<i class="fas fa-comments"></i> 联系卖家
</button>
</div>
</div>
</div>
<!-- 商品列表 -->
<div class="seller-products-section">
<div class="section-header">
<h2>卖家商品</h2>
<div class="sort-options">
<span>排序：</span>
<select id="seller-products-sort">
<option value="newest">最新上架</option>
<option value="price-asc">价格从低到高</option>
<option value="price-desc">价格从高到低</option>
<option value="popular">最受欢迎</option>
</select>
</div>
</div>
<div class="product-grid" id="seller-products-grid">
<!-- 商品将通过JavaScript动态渲染 -->
</div>
<div id="seller-products-empty" class="empty-state" style="display: none;">
<i class="fas fa-box-open"></i>
<p>该卖家暂无在售商品</p>
</div>
</div>
</div>
</section>
<!-- 页脚 -->
<footer class="footer">
<div class="container">
<div class="footer-content">
<div class="footer-section about">
<div class="logo">
<i class="fas fa-university"></i>
<span>校园二手拍卖</span>
</div>
<p>为校园师生提供安全、便捷的二手商品拍卖平台，促进资源循环利用，打造绿色校园生活。</p>
<div class="social-links">
<a href="#"><i class="fab fa-weixin"></i></a>
<a href="#"><i class="fab fa-weibo"></i></a>
<a href="#"><i class="fab fa-qq"></i></a>
</div>
</div>
<div class="footer-section links">
<h3>快速链接</h3>
<ul>
<li><a href="#">关于我们</a></li>
<li><a href="#">使用帮助</a></li>
<li><a href="#">联系我们</a></li>
<li><a href="#">隐私政策</a></li>
<li><a href="#">用户协议</a></li>
</ul>
</div>
<div class="footer-section contact">
<h3>联系方式</h3>
<ul>
<li><i class="fas fa-map-marker-alt"></i> 北京市海淀区中关村大街59号</li>
<li><i class="fas fa-phone"></i> 010-12345678</li>
<li><i class="fas fa-envelope"></i> contact@campusauction.com</li>
</ul>
</div>
</div>
<div class="footer-bottom">
<p>© 2023 校园二手拍卖网站. 保留所有权利.</p>
</div>
</div>
</footer>
<script src="../js/main.js"></script>
</body>
</html>
register.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="../css/style.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
</head>
<body>
<!-- 导航栏 -->
<nav class="navbar">
<div class="container">
<div class="logo">
<i class="fas fa-university"></i>
<span>校园二手拍卖</span>
</div>
<div class="search-box">
<input type="text" placeholder="搜索商品...">
<button><i class="fas fa-search"></i></button>
</div>
<ul class="nav-links">
<li><a href="../index.html">首页</a></li>
<li><a href="product-list.html">商品分类</a></li>
<li><a href="post-product.html">发布商品</a></li>
<li><a href="login.html"><i class="fas fa-user"></i> 登录</a></li>
<li><a href="register.html" class="active"><i class="fas fa-user-plus"></i> 注册</a></li>
</ul>
</div>
</nav>
<!-- 注册页面内容 -->
<section class="register-page">
<div class="register-container">
<div class="register-header">
<h1>用户注册</h1>
<p>加入校园二手拍卖网站，开启绿色循环生活</p>
</div>
<form class="register-form">
<div class="form-group">
<label for="username">
<i class="fas fa-user"></i>
用户名
</label>
<input type="text" id="username" placeholder="请输入用户名（3-20个字符）" required>
</div>
<div class="form-group">
<label for="student-id">
<i class="fas fa-id-card"></i>
学号（选填）
</label>
<input type="text" id="student-id" placeholder="请输入学号">
</div>
<div class="form-group">
<label for="email">
<i class="fas fa-envelope"></i>
邮箱
</label>
<input type="email" id="email" placeholder="请输入邮箱地址" required>
</div>
<div class="form-group">
<label for="password">
<i class="fas fa-lock"></i>
密码
</label>
<input type="password" id="password" placeholder="请输入密码（至少6位）" required minlength="6">
</div>
<div class="form-group">
<label for="confirm-password">
<i class="fas fa-lock"></i>
确认密码
</label>
<input type="password" id="confirm-password" placeholder="请再次输入密码" required>
</div>
<div class="form-group">
<label for="verification-code">
<i class="fas fa-shield-alt"></i>
验证码
</label>
<div class="verification-code">
<input type="text" id="verification-code" placeholder="请输入验证码" required>
<button type="button" class="btn btn-outline">获取验证码</button>
</div>
</div>
<div class="form-group">
<label class="terms">
<input type="checkbox" required>
<span>我已阅读并同意 <a href="#">《用户协议》</a> 和 <a href="#">《隐私政策》</a></span>
</label>
</div>
<button type="submit" class="btn btn-primary btn-block">
<i class="fas fa-user-plus"></i>
注册
</button>
</form>
<div class="register-divider">
<span>或使用以下方式注册</span>
</div>
<div class="social-register">
<button type="button" class="btn btn-outline btn-block">
<i class="fas fa-university"></i>
校园统一认证
</button>
<button type="button" class="btn btn-outline btn-block">
<i class="fab fa-weixin"></i>
微信注册
</button>
<button type="button" class="btn btn-outline btn-block">
<i class="fab fa-qq"></i>
QQ注册
</button>
</div>
<div class="register-footer">
<p>已有账号？ <a href="login.html">立即登录</a></p>
</div>
</div>
</section>
<!-- 页脚 -->
<footer class="footer">
<div class="container">
<div class="footer-content">
<div class="footer-section about">
<div class="logo">
<i class="fas fa-university"></i>
<span>校园二手拍卖</span>
</div>
<p>为校园师生提供安全、便捷的二手商品拍卖平台，促进资源循环利用，打造绿色校园生活。</p>
<div class="social-links">
<a href="#"><i class="fab fa-weixin"></i></a>
<a href="#"><i class="fab fa-weibo"></i></a>
<a href="#"><i class="fab fa-qq"></i></a>
</div>
</div>
<div class="footer-section links">
<h3>快速链接</h3>
<ul>
<li><a href="#">关于我们</a></li>
<li><a href="#">使用帮助</a></li>
<li><a href="#">联系我们</a></li>
<li><a href="#">隐私政策</a></li>
<li><a href="#">用户协议</a></li>
</ul>
</div>
<div class="footer-section contact">
<h3>联系方式</h3>
<ul>
<li><i class="fas fa-map-marker-alt"></i> 北京市海淀区中关村大街59号</li>
<li><i class="fas fa-phone"></i> 010-12345678</li>
<li><i class="fas fa-envelope"></i> contact@campusauction.com</li>
</ul>
</div>
</div>
<div class="footer-bottom">
<p>© 2023 校园二手拍卖网站. 保留所有权利.</p>
</div>
</div>
</footer>
<script src="../js/main.js"></script>
</body>
</html>
product-list.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="../css/style.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
</head>
<body>
<!-- 导航栏 -->
<nav class="navbar">
<div class="container">
<div class="logo">
<i class="fas fa-university"></i>
<span>校园二手拍卖</span>
</div>
<div class="search-box">
<input type="text" placeholder="搜索商品...">
<button><i class="fas fa-search"></i></button>
</div>
<ul class="nav-links">
<li><a href="../index.html">首页</a></li>
<li><a href="product-list.html" class="active">商品分类</a></li>
<li><a href="post-product.html">发布商品</a></li>
<li><a href="login.html"><i class="fas fa-user"></i> 登录</a></li>
<li><a href="register.html"><i class="fas fa-user-plus"></i> 注册</a></li>
</ul>
</div>
</nav>
<!-- 商品列表页内容 -->
<section class="product-list">
<div class="container">
<div class="page-header">
<h1 id="page-title">商品分类</h1>
<div class="breadcrumb" id="breadcrumb">
<a href="../index.html">首页</a> > 商品分类
</div>
</div>
<div class="product-list-container">
<!-- 侧边栏筛选器 -->
<aside class="sidebar">
<div class="filter-section">
<h3>商品分类</h3>
<ul class="category-filter">
<li><label><input type="checkbox" checked value="全部商品"> 全部商品</label></li>
<li><label><input type="checkbox" value="图书教材"> 图书教材</label></li>
<li><label><input type="checkbox" value="数码产品"> 数码产品</label></li>
<li><label><input type="checkbox" value="服饰鞋包"> 服饰鞋包</label></li>
<li><label><input type="checkbox" value="家居用品"> 家居用品</label></li>
<li><label><input type="checkbox" value="交通工具"> 交通工具</label></li>
<li><label><input type="checkbox" value="运动器材"> 运动器材</label></li>
<li><label><input type="checkbox" value="乐器设备"> 乐器设备</label></li>
<li><label><input type="checkbox" value="其他物品"> 其他物品</label></li>
</ul>
</div>
<div class="filter-section">
<h3>价格区间</h3>
<div class="price-filter">
<input type="number" id="price-min" placeholder="最低价">
<span>-</span>
<input type="number" id="price-max" placeholder="最高价">
<button class="apply-btn">确定</button>
</div>
</div>
<div class="filter-section">
<h3>商品状态</h3>
<ul class="status-filter">
<li><label><input type="checkbox" checked value="auction"> 拍卖中</label></li>
<li><label><input type="checkbox" checked value="buy-now"> 一口价</label></li>
</ul>
</div>
<div class="filter-section">
<h3>新旧程度</h3>
<ul class="condition-filter">
<li><label><input type="checkbox" value="new"> 全新</label></li>
<li><label><input type="checkbox" value="90"> 9成新</label></li>
<li><label><input type="checkbox" value="80"> 8成新</label></li>
<li><label><input type="checkbox" value="70"> 7成新</label></li>
<li><label><input type="checkbox" value="60"> 6成新及以下</label></li>
</ul>
</div>
</aside>
<!-- 商品列表 -->
<main class="product-grid-container">
<div class="sort-options">
<span>排序：</span>
<select>
<option value="newest">最新上架</option>
<option value="price-asc">价格从低到高</option>
<option value="price-desc">价格从高到低</option>
<option value="popular">最受欢迎</option>
<option value="ending-soon">即将结束</option>
</select>
</div>
<div class="product-grid">
<!-- 商品将通过JavaScript动态渲染 -->
</div>
<!-- 分页 -->
<div class="pagination">
<a href="#" class="prev"><i class="fas fa-chevron-left"></i> 上一页</a>
<a href="#" class="active">1</a>
<a href="#">2</a>
<a href="#">3</a>
<a href="#">4</a>
<a href="#">5</a>
<a href="#" class="next">下一页 <i class="fas fa-chevron-right"></i></a>
</div>
</main>
</div>
</div>
</section>
<!-- 页脚 -->
<footer class="footer">
<div class="container">
<div class="footer-content">
<div class="footer-section about">
<div class="logo">
<i class="fas fa-university"></i>
<span>校园二手拍卖</span>
</div>
<p>为校园师生提供安全、便捷的二手商品拍卖平台，促进资源循环利用，打造绿色校园生活。</p>
<div class="social-links">
<a href="#"><i class="fab fa-weixin"></i></a>
<a href="#"><i class="fab fa-weibo"></i></a>
<a href="#"><i class="fab fa-qq"></i></a>
</div>
</div>
<div class="footer-section links">
<h3>快速链接</h3>
<ul>
<li><a href="#">关于我们</a></li>
<li><a href="#">使用帮助</a></li>
<li><a href="#">联系我们</a></li>
<li><a href="#">隐私政策</a></li>
<li><a href="#">用户协议</a></li>
</ul>
</div>
<div class="footer-section contact">
<h3>联系方式</h3>
<ul>
<li><i class="fas fa-map-marker-alt"></i> 北京市海淀区中关村大街59号</li>
<li><i class="fas fa-phone"></i> 010-12345678</li>
<li><i class="fas fa-envelope"></i> contact@campusauction.com</li>
</ul>
</div>
</div>
<div class="footer-bottom">
<p>© 2023 校园二手拍卖网站. 保留所有权利.</p>
</div>
</div>
</footer>
<script src="../js/main.js"></script>
</body>
</html>
product-details.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="../css/style.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
</head>
<body>
<!-- 导航栏 -->
<nav class="navbar">
<div class="container">
<div class="logo">
<i class="fas fa-university"></i>
<span>校园二手拍卖</span>
</div>
<div class="search-box">
<input type="text" placeholder="搜索商品...">
<button><i class="fas fa-search"></i></button>
</div>
<ul class="nav-links">
<li><a href="../index.html">首页</a></li>
<li><a href="product-list.html">商品分类</a></li>
<li><a href="post-product.html">发布商品</a></li>
<li><a href="login.html"><i class="fas fa-user"></i> 登录</a></li>
<li><a href="register.html"><i class="fas fa-user-plus"></i> 注册</a></li>
</ul>
</div>
</nav>
<!-- 商品详情页内容 -->
<section class="product-details">
<div class="container">
<div class="breadcrumb">
<a href="../index.html">首页</a> >
<a href="product-list.html">数码产品</a> >
<span>MacBook Pro 2020款</span>
</div>
<div class="product-content">
<!-- 商品图片画廊 -->
<div class="product-gallery">
<!-- 传统图片画廊 -->
<div class="gallery-container">
<div class="gallery-thumbnails">
<div class="thumbnail active">
<img src="../images/product1.jpg" alt="商品图片1">
</div>
<div class="thumbnail">
<img src="../images/product1-1.jpg" alt="商品图片2">
</div>
<div class="thumbnail">
<img src="../images/product1-2.jpg" alt="商品图片3">
</div>
<div class="thumbnail">
<img src="../images/product1-3.jpg" alt="商品图片4">
</div>
</div>
<div class="gallery-main">
<img src="../images/product1.jpg" alt="商品主图">
</div>
</div>
</div>
<!-- 商品信息和操作 -->
<div class="product-info">
<h1 class="product-title"></h1>
<div class="product-meta">
<span class="auction-status">
<i class="fas fa-hourglass-half"></i>
<span></span>
</span>
<span class="condition">
<i class="fas fa-star"></i>
<span></span>
</span>
</div>
<div class="product-price-section">
<div class="price-info">
<div class="current-price">
<span class="label">当前价：</span>
<span class="price"></span>
</div>
<div class="original-price">
<span class="label">原价：</span>
<span class="price"></span>
</div>
<div class="bid-count">
<i class="fas fa-gavel"></i>
<span></span>
</div>
</div>
<div class="time-left">
<div class="label">距结束还有：</div>
<div class="countdown">
<!-- 倒计时将通过JavaScript动态生成 -->
</div>
</div>
</div>
<!-- 购买区域（一口价商品） -->
<div class="bid-section" id="buy-section" style="display: none;">
<div class="bid-buttons">
<button class="btn btn-primary" id="add-to-cart-btn">加入购物车</button>
<button class="btn btn-secondary" id="buy-now-btn">立即购买</button>
</div>
</div>
<!-- 出价区域（拍卖商品） -->
<div class="bid-section" id="bid-section" style="display: none;">
<div class="bid-input">
<span class="label">我的出价：</span>
<div class="input-group">
<span class="currency">¥</span>
<input type="number" id="bid-amount" placeholder="输入出价金额" min="0" step="100">
</div>
</div>
<div class="bid-buttons">
<button class="btn btn-primary" id="submit-bid-btn">立即出价</button>
<button class="btn btn-secondary" id="set-reminder-btn">设置提醒</button>
</div>
</div>
<!-- 卖家信息 -->
<div class="seller-info">
<h3>卖家信息</h3>
<div class="seller-profile">
<div class="seller-avatar">
<img src="" alt="卖家头像">
</div>
<div class="seller-details">
<div class="seller-name"></div>
<div class="seller-rating">
<div class="stars">
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star-half-alt"></i>
</div>
<span class="rating"></span>
<span class="transaction-count"></span>
</div>
</div>
<div class="seller-actions">
<button class="btn btn-outline" id="contact-seller-btn">
<i class="fas fa-comments"></i> 联系卖家
</button>
<button class="btn btn-outline" id="view-shop-btn">
<i class="fas fa-store"></i> 查看店铺
</button>
</div>
</div>
</div>
</div>
</div>
<!-- 商品描述和评论 -->
<div class="product-tabs">
<div class="tabs">
<button class="tab-btn active" data-tab="description">商品描述</button>
<button class="tab-btn" data-tab="bids">出价记录</button>
<button class="tab-btn" data-tab="reviews">评论</button>
</div>
<div class="tab-content">
<!-- 商品描述 -->
<div id="description" class="tab-panel active">
<h3>商品描述</h3>
<div class="description-content">
<!-- 商品描述将通过JavaScript动态生成 -->
</div>
</div>
<!-- 出价记录 -->
<div id="bids" class="tab-panel">
<h3>出价记录</h3>
<div class="bid-history">
<table>
<thead>
<tr>
<th>出价人</th>
<th>出价金额</th>
<th>出价时间</th>
</tr>
</thead>
<tbody>
<!-- 出价记录将通过JavaScript动态生成 -->
</tbody>
</table>
</div>
</div>
<!-- 评论 -->
<div id="reviews" class="tab-panel">
<h3>买家评论</h3>
<div class="reviews-list">
<!-- 评论列表将通过JavaScript动态生成 -->
</div>
<!-- 添加评论 -->
<div class="add-review">
<h4>添加评论</h4>
<form>
<div class="form-group">
<label>评分：</label>
<div class="rating-input">
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="far fa-star"></i>
</div>
<input type="hidden" id="review-rating" value="0">
</div>
<div class="form-group">
<label>评论内容：</label>
<textarea rows="4" placeholder="请输入您的评论..."></textarea>
</div>
<button type="submit" class="btn btn-primary">提交评论</button>
</form>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- 页脚 -->
<footer class="footer">
<div class="container">
<div class="footer-content">
<div class="footer-section about">
<div class="logo">
<i class="fas fa-university"></i>
<span>校园二手拍卖</span>
</div>
<p>为校园师生提供安全、便捷的二手商品拍卖平台，促进资源循环利用，打造绿色校园生活。</p>
<div class="social-links">
<a href="#"><i class="fab fa-weixin"></i></a>
<a href="#"><i class="fab fa-weibo"></i></a>
<a href="#"><i class="fab fa-qq"></i></a>
</div>
</div>
<div class="footer-section links">
<h3>快速链接</h3>
<ul>
<li><a href="#">关于我们</a></li>
<li><a href="#">使用帮助</a></li>
<li><a href="#">联系我们</a></li>
<li><a href="#">隐私政策</a></li>
<li><a href="#">用户协议</a></li>
</ul>
</div>
<div class="footer-section contact">
<h3>联系方式</h3>
<ul>
<li><i class="fas fa-map-marker-alt"></i> 北京市海淀区中关村大街59号</li>
<li><i class="fas fa-phone"></i> 010-12345678</li>
<li><i class="fas fa-envelope"></i> contact@campusauction.com</li>
</ul>
</div>
</div>
<div class="footer-bottom">
<p>© 2023 校园二手拍卖网站. 保留所有权利.</p>
</div>
</div>
</footer>
<!-- 联系卖家聊天窗口 -->
<div id="chat-modal" class="chat-modal">
<div class="chat-container">
<div class="chat-header">
<div class="chat-seller-info">
<img id="chat-seller-avatar" src="" alt="卖家头像">
<div>
<h4 id="chat-seller-name">卖家</h4>
<span class="chat-status">在线</span>
</div>
</div>
<button class="chat-close" id="close-chat-btn">
<i class="fas fa-times"></i>
</button>
</div>
<div class="chat-messages" id="chat-messages">
<!-- 消息将通过JavaScript动态生成 -->
</div>
<div class="chat-input-area">
<div class="chat-input-wrapper">
<input type="text" id="chat-input" placeholder="输入消息..." maxlength="500">
<button id="send-message-btn" class="send-btn">
<i class="fas fa-paper-plane"></i>
</button>
</div>
<div class="quick-messages">
<button class="quick-msg-btn" data-msg="你好，请问这个商品还在吗？">你好，请问这个商品还在吗？</button>
<button class="quick-msg-btn" data-msg="可以便宜一点吗？">可以便宜一点吗？</button>
<button class="quick-msg-btn" data-msg="什么时候可以发货？">什么时候可以发货？</button>
</div>
</div>
</div>
</div>
<script src="../js/main.js"></script>
</body>
</html>
post-product.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="../css/style.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
</head>
<body>
<!-- 导航栏 -->
<nav class="navbar">
<div class="container">
<div class="logo">
<i class="fas fa-university"></i>
<span>校园二手拍卖</span>
</div>
<div class="search-box">
<input type="text" placeholder="搜索商品...">
<button><i class="fas fa-search"></i></button>
</div>
<ul class="nav-links">
<li><a href="../index.html">首页</a></li>
<li><a href="product-list.html">商品分类</a></li>
<li><a href="post-product.html" class="active">发布商品</a></li>
<li class="dropdown">
<a href="#">
<img src="../images/头像1.png" alt="用户头像" class="user-avatar">
<span>用户</span>
<i class="fas fa-chevron-down"></i>
</a>
<div class="dropdown-menu">
<a href="user-center.html">个人中心</a>
<a href="my-products.html">我的在售</a>
<a href="my-orders.html">我的订单</a>
<a href="settings.html">设置</a>
<a href="#" id="logout-link">退出登录</a>
</div>
</li>
</ul>
</div>
</nav>
<!-- 发布商品页面内容 -->
<section class="post-product">
<div class="container">
<div class="post-product-header">
<h2>发布商品</h2>
<p>请填写以下信息来发布您的商品</p>
</div>
<form class="post-product-form">
<!-- 商品图片上传 -->
<div class="form-section">
<h3>商品图片</h3>
<div class="image-upload-section">
<div class="main-image-upload">
<div class="upload-box" id="main-image-preview">
<i class="fas fa-cloud-upload-alt"></i>
<p>点击上传主图</p>
<small>支持JPG、PNG格式，最大5MB</small>
</div>
<input type="file" id="main-image-input" accept="image/*" style="display: none;">
</div>
<div class="secondary-images-upload">
<div class="upload-box" data-index="0">
<i class="fas fa-cloud-upload-alt"></i>
<p>上传图片</p>
</div>
<div class="upload-box" data-index="1">
<i class="fas fa-cloud-upload-alt"></i>
<p>上传图片</p>
</div>
<div class="upload-box" data-index="2">
<i class="fas fa-cloud-upload-alt"></i>
<p>上传图片</p>
</div>
<div class="upload-box" data-index="3">
<i class="fas fa-cloud-upload-alt"></i>
<p>上传图片</p>
</div>
</div>
</div>
<input type="file" id="secondary-image-input" accept="image/*" style="display: none;">
</div>
<!-- 商品基本信息 -->
<div class="form-section">
<h3>商品基本信息</h3>
<div class="form-row">
<div class="form-group">
<label for="product-title">商品标题 *</label>
<input type="text" id="product-title" name="product-title" placeholder="请输入商品标题" required>
</div>
</div>
<div class="form-row">
<div class="form-group">
<label for="product-category">商品分类 *</label>
<select id="product-category" name="product-category" required>
<option value="">请选择分类</option>
<option value="books">图书文具</option>
<option value="digital">数码产品</option>
<option value="clothing">服饰鞋包</option>
<option value="home">家居用品</option>
<option value="sports">运动户外</option>
<option value="others">其他</option>
</select>
</div>
<div class="form-group">
<label for="product-condition">新旧程度 *</label>
<select id="product-condition" name="product-condition" required>
<option value="">请选择新旧程度</option>
<option value="new">全新</option>
<option value="like-new">95成新</option>
<option value="good">9成新</option>
<option value="fair">8成新</option>
<option value="used">7成新及以下</option>
</select>
</div>
</div>
<div class="form-row">
<div class="form-group">
<label for="product-status">商品状态 *</label>
<select id="product-status" name="product-status" required>
<option value="">请选择商品状态</option>
<option value="auction">拍卖</option>
<option value="buy-it-now">一口价</option>
</select>
</div>
<div class="form-group">
<label for="product-campus">所在校区 *</label>
<select id="product-campus" name="product-campus" required>
<option value="">请选择校区</option>
<option value="main">主校区</option>
<option value="east">东校区</option>
<option value="west">西校区</option>
<option value="south">南校区</option>
</select>
</div>
</div>
<div class="form-group">
<label for="product-description">商品描述 *</label>
<textarea id="product-description" name="product-description" rows="6" placeholder="请详细描述商品信息，包括品牌、型号、使用情况、有无瑕疵等" required></textarea>
</div>
</div>
<!-- 商品价格设置 -->
<div class="form-section">
<h3>价格设置</h3>
<div class="form-row">
<div class="form-group">
<label for="starting-price">起拍价 (元) *</label>
<input type="number" id="starting-price" name="starting-price" min="0" step="0.01" placeholder="0.00" required>
</div>
<div class="form-group">
<label for="buy-it-now-price">一口价 (元) (可选)</label>
<input type="number" id="buy-it-now-price" name="buy-it-now-price" min="0" step="0.01" placeholder="0.00">
</div>
</div>
<div class="form-row">
<div class="form-group">
<label for="bid-increment">加价幅度 (元) *</label>
<input type="number" id="bid-increment" name="bid-increment" min="0" step="0.01" placeholder="0.00" required>
</div>
<div class="form-group">
<label for="auction-duration">拍卖时长 *</label>
<select id="auction-duration" name="auction-duration" required>
<option value="">请选择拍卖时长</option>
<option value="1">1天</option>
<option value="3">3天</option>
<option value="7">7天</option>
<option value="14">14天</option>
</select>
</div>
</div>
</div>
<!-- 交易信息 -->
<div class="form-section">
<h3>交易信息</h3>
<div class="form-group">
<label for="transaction-method">交易方式 *</label>
<div class="checkbox-group">
<label>
<input type="checkbox" name="transaction-method" value="pickup" checked>
<i class="fas fa-map-marker-alt"></i>
校园自提
</label>
<label>
<input type="checkbox" name="transaction-method" value="delivery">
<i class="fas fa-shipping-fast"></i>
校内配送
</label>
</div>
</div>
<div class="form-group" id="delivery-fee-group" style="display: none;">
<label for="delivery-fee">配送费 (元)</label>
<input type="number" id="delivery-fee" name="delivery-fee" min="0" step="0.01" placeholder="0.00">
</div>
<div class="form-group">
<label for="pickup-location">自提地点 *</label>
<input type="text" id="pickup-location" name="pickup-location" placeholder="请输入自提地点" required>
</div>
</div>
<!-- 提交按钮 -->
<div class="form-actions">
<button type="button" class="btn btn-secondary">保存草稿</button>
<button type="submit" class="btn btn-primary">发布商品</button>
</div>
</form>
</div>
</section>
<!-- 页脚 -->
<footer class="footer">
<div class="container">
<div class="footer-content">
<div class="footer-section about">
<div class="logo">
<i class="fas fa-university"></i>
<span>校园二手拍卖</span>
</div>
<p>为校园师生提供安全、便捷的二手商品拍卖平台，促进资源循环利用，打造绿色校园生活。</p>
<div class="social-links">
<a href="#"><i class="fab fa-weixin"></i></a>
<a href="#"><i class="fab fa-weibo"></i></a>
<a href="#"><i class="fab fa-qq"></i></a>
</div>
</div>
<div class="footer-section links">
<h3>快速链接</h3>
<ul>
<li><a href="#">关于我们</a></li>
<li><a href="#">使用帮助</a></li>
<li><a href="#">联系我们</a></li>
<li><a href="#">隐私政策</a></li>
<li><a href="#">用户协议</a></li>
</ul>
</div>
<div class="footer-section contact">
<h3>联系方式</h3>
<ul>
<li><i class="fas fa-map-marker-alt"></i> 北京市海淀区中关村大街59号</li>
<li><i class="fas fa-phone"></i> 010-12345678</li>
<li><i class="fas fa-envelope"></i> contact@campusauction.com</li>
</ul>
</div>
</div>
<div class="footer-bottom">
<p>© 2023 校园二手拍卖网站. 保留所有权利.</p>
</div>
</div>
</footer>
<script src="../js/main.js"></script>
</body>
</html>
my-products.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="../css/style.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
</head>
<body>
<!-- 导航栏 -->
<nav class="navbar">
<div class="container">
<div class="logo">
<i class="fas fa-university"></i>
<span>校园二手拍卖</span>
</div>
<div class="search-box">
<input type="text" placeholder="搜索商品...">
<button><i class="fas fa-search"></i></button>
</div>
<ul class="nav-links">
<li><a href="../index.html">首页</a></li>
<li><a href="product-list.html">商品分类</a></li>
<li><a href="post-product.html">发布商品</a></li>
<li class="dropdown">
<a href="#">
<img src="../images/头像1.png" alt="用户头像" class="user-avatar">
<span>用户</span>
<i class="fas fa-chevron-down"></i>
</a>
<div class="dropdown-menu">
<a href="user-center.html">个人中心</a>
<a href="my-products.html">我的在售</a>
<a href="my-orders.html">我的订单</a>
<a href="settings.html">设置</a>
<a href="#" id="logout-link">退出登录</a>
</div>
</li>
</ul>
</div>
</nav>
<!-- 我的在售页面内容 -->
<section class="user-center">
<div class="container">
<div class="user-center-content">
<!-- 左侧导航 -->
<aside class="user-sidebar">
<div class="user-profile">
<div class="user-avatar">
<img src="../images/头像1.png" alt="用户头像">
</div>
<div class="user-info">
<h3></h3>
<p class="student-id">学号：</p>
<div class="user-rating">
<span></span>
</div>
</div>
</div>
<nav class="user-nav">
<ul>
<li><a href="user-center.html">
<i class="fas fa-home"></i>
个人中心
</a></li>
<li><a href="my-products.html" class="active">
<i class="fas fa-store"></i>
我的在售
</a></li>
<li><a href="my-orders.html">
<i class="fas fa-shopping-cart"></i>
我的订单
</a></li>
<li><a href="settings.html">
<i class="fas fa-cog"></i>
设置
</a></li>
</ul>
</nav>
</aside>
<!-- 右侧内容 -->
<main class="user-main">
<div class="user-center-header">
<h2>我的在售商品</h2>
<div class="header-actions">
<a href="post-product.html" class="btn btn-primary">
<i class="fas fa-plus"></i> 发布商品
</a>
</div>
</div>
<!-- 商品筛选 -->
<div class="products-filter">
<button class="filter-btn active" data-status="all">全部商品</button>
<button class="filter-btn" data-status="auction">拍卖中</button>
<button class="filter-btn" data-status="buy-now">一口价</button>
<button class="filter-btn" data-status="sold">已售出</button>
</div>
<!-- 商品列表 -->
<div class="product-grid" id="my-products-grid">
<!-- 商品将通过JavaScript动态生成 -->
</div>
<!-- 空状态 -->
<div id="products-empty" class="empty-state" style="display: none;">
<i class="fas fa-box-open"></i>
<p>暂无在售商品</p>
<a href="post-product.html" class="btn btn-primary" style="margin-top: 20px;">
<i class="fas fa-plus"></i> 发布第一个商品
</a>
</div>
</main>
</div>
</div>
</section>
<!-- 页脚 -->
<footer class="footer">
<div class="container">
<div class="footer-content">
<div class="footer-section about">
<div class="logo">
<i class="fas fa-university"></i>
<span>校园二手拍卖</span>
</div>
<p>为校园师生提供安全、便捷的二手商品拍卖平台，促进资源循环利用，打造绿色校园生活。</p>
<div class="social-links">
<a href="#"><i class="fab fa-weixin"></i></a>
<a href="#"><i class="fab fa-weibo"></i></a>
<a href="#"><i class="fab fa-qq"></i></a>
</div>
</div>
<div class="footer-section links">
<h3>快速链接</h3>
<ul>
<li><a href="#">关于我们</a></li>
<li><a href="#">使用帮助</a></li>
<li><a href="#">联系我们</a></li>
<li><a href="#">隐私政策</a></li>
<li><a href="#">用户协议</a></li>
</ul>
</div>
<div class="footer-section contact">
<h3>联系方式</h3>
<ul>
<li><i class="fas fa-map-marker-alt"></i> 北京市海淀区中关村大街59号</li>
<li><i class="fas fa-phone"></i> 010-12345678</li>
<li><i class="fas fa-envelope"></i> contact@campusauction.com</li>
</ul>
</div>
</div>
<div class="footer-bottom">
<p>© 2023 校园二手拍卖网站. 保留所有权利.</p>
</div>
</div>
</footer>
<script src="../js/main.js"></script>
</body>
</html>
my-orders.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="../css/style.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
</head>
<body>
<!-- 导航栏 -->
<nav class="navbar">
<div class="container">
<div class="logo">
<i class="fas fa-university"></i>
<span>校园二手拍卖</span>
</div>
<div class="search-box">
<input type="text" placeholder="搜索商品...">
<button><i class="fas fa-search"></i></button>
</div>
<ul class="nav-links">
<li><a href="../index.html">首页</a></li>
<li><a href="product-list.html">商品分类</a></li>
<li><a href="post-product.html">发布商品</a></li>
<li class="dropdown">
<a href="#">
<img src="../images/头像1.png" alt="用户头像" class="user-avatar">
<span>用户</span>
<i class="fas fa-chevron-down"></i>
</a>
<div class="dropdown-menu">
<a href="user-center.html">个人中心</a>
<a href="my-products.html">我的在售</a>
<a href="my-orders.html">我的订单</a>
<a href="settings.html">设置</a>
<a href="#" id="logout-link">退出登录</a>
</div>
</li>
</ul>
</div>
</nav>
<!-- 我的订单页面内容 -->
<section class="user-center">
<div class="container">
<div class="user-center-content">
<!-- 左侧导航 -->
<aside class="user-sidebar">
<div class="user-profile">
<div class="user-avatar">
<img src="../images/头像1.png" alt="用户头像">
</div>
<div class="user-info">
<h3></h3>
<p class="student-id">学号：</p>
<div class="user-rating">
<span></span>
</div>
</div>
</div>
<nav class="user-nav">
<ul>
<li><a href="user-center.html">
<i class="fas fa-home"></i>
个人中心
</a></li>
<li><a href="my-products.html">
<i class="fas fa-store"></i>
我的在售
</a></li>
<li><a href="my-orders.html" class="active">
<i class="fas fa-shopping-cart"></i>
我的订单
</a></li>
<li><a href="settings.html">
<i class="fas fa-cog"></i>
设置
</a></li>
</ul>
</nav>
</aside>
<!-- 右侧内容 -->
<main class="user-main">
<div class="user-center-header">
<h2>我的订单</h2>
<p>查看您的所有订单信息</p>
</div>
<!-- 订单筛选 -->
<div class="orders-filter">
<button class="filter-btn active" data-status="all">全部订单</button>
<button class="filter-btn" data-status="pending">待付款</button>
<button class="filter-btn" data-status="paid">待发货</button>
<button class="filter-btn" data-status="shipped">待收货</button>
<button class="filter-btn" data-status="completed">已完成</button>
<button class="filter-btn" data-status="cancelled">已取消</button>
</div>
<!-- 订单列表 -->
<div class="orders-list" id="orders-list">
<!-- 订单将通过JavaScript动态生成 -->
</div>
<!-- 空状态 -->
<div id="orders-empty" class="empty-state" style="display: none;">
<i class="fas fa-shopping-bag"></i>
<p>暂无订单</p>
</div>
</main>
</div>
</div>
</section>
<!-- 页脚 -->
<footer class="footer">
<div class="container">
<div class="footer-content">
<div class="footer-section about">
<div class="logo">
<i class="fas fa-university"></i>
<span>校园二手拍卖</span>
</div>
<p>为校园师生提供安全、便捷的二手商品拍卖平台，促进资源循环利用，打造绿色校园生活。</p>
<div class="social-links">
<a href="#"><i class="fab fa-weixin"></i></a>
<a href="#"><i class="fab fa-weibo"></i></a>
<a href="#"><i class="fab fa-qq"></i></a>
</div>
</div>
<div class="footer-section links">
<h3>快速链接</h3>
<ul>
<li><a href="#">关于我们</a></li>
<li><a href="#">使用帮助</a></li>
<li><a href="#">联系我们</a></li>
<li><a href="#">隐私政策</a></li>
<li><a href="#">用户协议</a></li>
</ul>
</div>
<div class="footer-section contact">
<h3>联系方式</h3>
<ul>
<li><i class="fas fa-map-marker-alt"></i> 北京市海淀区中关村大街59号</li>
<li><i class="fas fa-phone"></i> 010-12345678</li>
<li><i class="fas fa-envelope"></i> contact@campusauction.com</li>
</ul>
</div>
</div>
<div class="footer-bottom">
<p>© 2023 校园二手拍卖网站. 保留所有权利.</p>
</div>
</div>
</footer>
<script src="../js/main.js"></script>
</body>
</html>
login.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="../css/style.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
</head>
<body>
<!-- 导航栏 -->
<nav class="navbar">
<div class="container">
<div class="logo">
<i class="fas fa-university"></i>
<span>校园二手拍卖</span>
</div>
<div class="search-box">
<input type="text" placeholder="搜索商品...">
<button><i class="fas fa-search"></i></button>
</div>
<ul class="nav-links">
<li><a href="../index.html">首页</a></li>
<li><a href="product-list.html">商品分类</a></li>
<li><a href="post-product.html">发布商品</a></li>
<li><a href="login.html" class="active"><i class="fas fa-user"></i> 登录</a></li>
<li><a href="register.html"><i class="fas fa-user-plus"></i> 注册</a></li>
</ul>
</div>
</nav>
<!-- 登录页面内容 -->
<section class="login-page">
<div class="login-container">
<div class="login-header">
<h1>用户登录</h1>
<p>欢迎回到校园二手拍卖网站</p>
</div>
<form class="login-form">
<div class="form-group">
<label for="username">
<i class="fas fa-user"></i>
用户名/学号/邮箱
</label>
<input type="text" id="username" placeholder="请输入用户名、学号或邮箱" required>
</div>
<div class="form-group">
<label for="password">
<i class="fas fa-lock"></i>
密码
</label>
<input type="password" id="password" placeholder="请输入密码" required>
</div>
<div class="form-options">
<label class="remember-me">
<input type="checkbox">
<span>记住我</span>
</label>
<a href="#" class="forgot-password">忘记密码？</a>
</div>
<button type="submit" class="btn btn-primary btn-block">
<i class="fas fa-sign-in-alt"></i>
登录
</button>
</form>
<div class="login-divider">
<span>或使用以下方式登录</span>
</div>
<div class="social-login">
<button type="button" class="btn btn-outline btn-block">
<i class="fas fa-university"></i>
校园统一认证
</button>
<button type="button" class="btn btn-outline btn-block">
<i class="fab fa-weixin"></i>
微信登录
</button>
<button type="button" class="btn btn-outline btn-block">
<i class="fab fa-qq"></i>
QQ登录
</button>
</div>
<div class="login-footer">
<p>还没有账号？ <a href="register.html">立即注册</a></p>
</div>
</div>
</section>
<!-- 页脚 -->
<footer class="footer">
<div class="container">
<div class="footer-content">
<div class="footer-section about">
<div class="logo">
<i class="fas fa-university"></i>
<span>校园二手拍卖</span>
</div>
<p>为校园师生提供安全、便捷的二手商品拍卖平台，促进资源循环利用，打造绿色校园生活。</p>
<div class="social-links">
<a href="#"><i class="fab fa-weixin"></i></a>
<a href="#"><i class="fab fa-weibo"></i></a>
<a href="#"><i class="fab fa-qq"></i></a>
</div>
</div>
<div class="footer-section links">
<h3>快速链接</h3>
<ul>
<li><a href="#">关于我们</a></li>
<li><a href="#">使用帮助</a></li>
<li><a href="#">联系我们</a></li>
<li><a href="#">隐私政策</a></li>
<li><a href="#">用户协议</a></li>
</ul>
</div>
<div class="footer-section contact">
<h3>联系方式</h3>
<ul>
<li><i class="fas fa-map-marker-alt"></i> 北京市海淀区中关村大街59号</li>
<li><i class="fas fa-phone"></i> 010-12345678</li>
<li><i class="fas fa-envelope"></i> contact@campusauction.com</li>
</ul>
</div>
</div>
<div class="footer-bottom">
<p>© 2023 校园二手拍卖网站. 保留所有权利.</p>
</div>
</div>
</footer>
<script src="../js/main.js"></script>
</body>
</html>
checkout.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="../css/style.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
</head>
<body>
<!-- 导航栏 -->
<nav class="navbar">
<div class="container">
<div class="logo">
<i class="fas fa-university"></i>
<span>校园二手拍卖</span>
</div>
<div class="search-box">
<input type="text" placeholder="搜索商品...">
<button><i class="fas fa-search"></i></button>
</div>
<ul class="nav-links">
<li><a href="../index.html">首页</a></li>
<li><a href="product-list.html">商品分类</a></li>
<li><a href="post-product.html">发布商品</a></li>
<li><a href="cart.html"><i class="fas fa-shopping-cart"></i> 购物车</a></li>
<li><a href="login.html"><i class="fas fa-user"></i> 登录</a></li>
<li><a href="register.html"><i class="fas fa-user-plus"></i> 注册</a></li>
</ul>
</div>
</nav>
<!-- 支付页面内容 -->
<section class="checkout-page">
<div class="container">
<div class="page-header">
<h1>确认订单</h1>
<div class="breadcrumb">
<a href="../index.html">首页</a> > <a href="cart.html">购物车</a> > 确认订单
</div>
</div>
<div class="checkout-container">
<div class="checkout-left">
<!-- 收货地址 -->
<div class="checkout-section">
<h3><i class="fas fa-map-marker-alt"></i> 收货地址</h3>
<form class="address-form" id="address-form">
<div class="form-row">
<div class="form-group">
<label for="receiver-name">收货人姓名 *</label>
<input type="text" id="receiver-name" name="receiver-name" placeholder="请输入收货人姓名" required>
</div>
<div class="form-group">
<label for="receiver-phone">联系电话 *</label>
<input type="tel" id="receiver-phone" name="receiver-phone" placeholder="请输入联系电话" required>
</div>
</div>
<div class="form-row">
<div class="form-group">
<label for="receiver-campus">所在校区 *</label>
<select id="receiver-campus" name="receiver-campus" required>
<option value="">请选择校区</option>
<option value="main">主校区</option>
<option value="east">东校区</option>
<option value="west">西校区</option>
<option value="south">南校区</option>
</select>
</div>
<div class="form-group">
<label for="receiver-building">宿舍楼/教学楼 *</label>
<input type="text" id="receiver-building" name="receiver-building" placeholder="例如：1号宿舍楼" required>
</div>
</div>
<div class="form-group">
<label for="receiver-detail">详细地址 *</label>
<input type="text" id="receiver-detail" name="receiver-detail" placeholder="请输入详细地址，如：101室" required>
</div>
<div class="form-group">
<label for="receiver-notes">备注（选填）</label>
<textarea id="receiver-notes" name="receiver-notes" rows="2" placeholder="如有特殊要求，请在此说明"></textarea>
</div>
</form>
</div>
<!-- 交易方式 -->
<div class="checkout-section">
<h3><i class="fas fa-truck"></i> 交易方式</h3>
<div class="delivery-options">
<label class="delivery-option">
<input type="radio" name="delivery-method" value="pickup" checked>
<div class="option-content">
<i class="fas fa-map-marker-alt"></i>
<div>
<strong>校园自提</strong>
<span>免费</span>
</div>
</div>
</label>
<label class="delivery-option">
<input type="radio" name="delivery-method" value="delivery">
<div class="option-content">
<i class="fas fa-shipping-fast"></i>
<div>
<strong>校内配送</strong>
<span>配送费：¥5.00</span>
</div>
</div>
</label>
</div>
</div>
<!-- 订单商品 -->
<div class="checkout-section">
<h3><i class="fas fa-shopping-bag"></i> 订单商品</h3>
<div class="checkout-products" id="checkout-products">
<!-- 订单商品将通过JavaScript动态渲染 -->
</div>
</div>
</div>
<!-- 订单摘要 -->
<div class="checkout-right">
<div class="order-summary">
<h3>订单摘要</h3>
<div class="summary-details">
<div class="summary-row">
<span>商品总价：</span>
<span id="order-total-price">¥0.00</span>
</div>
<div class="summary-row">
<span>配送费：</span>
<span id="order-delivery-fee">¥0.00</span>
</div>
<div class="summary-row summary-total">
<span>应付总额：</span>
<span id="order-final-total">¥0.00</span>
</div>
</div>
<button class="btn btn-primary btn-block" id="submit-order-btn">提交订单</button>
<a href="cart.html" class="btn btn-outline btn-block">返回购物车</a>
</div>
</div>
</div>
</div>
</section>
<!-- 页脚 -->
<footer class="footer">
<div class="container">
<div class="footer-content">
<div class="footer-section about">
<div class="logo">
<i class="fas fa-university"></i>
<span>校园二手拍卖</span>
</div>
<p>为校园师生提供安全、便捷的二手商品拍卖平台，促进资源循环利用，打造绿色校园生活。</p>
<div class="social-links">
<a href="#"><i class="fab fa-weixin"></i></a>
<a href="#"><i class="fab fa-weibo"></i></a>
<a href="#"><i class="fab fa-qq"></i></a>
</div>
</div>
<div class="footer-section links">
<h3>快速链接</h3>
<ul>
<li><a href="#">关于我们</a></li>
<li><a href="#">使用帮助</a></li>
<li><a href="#">联系我们</a></li>
<li><a href="#">隐私政策</a></li>
<li><a href="#">用户协议</a></li>
</ul>
</div>
<div class="footer-section contact">
<h3>联系方式</h3>
<ul>
<li><i class="fas fa-map-marker-alt"></i> 北京市海淀区中关村大街59号</li>
<li><i class="fas fa-phone"></i> 010-12345678</li>
<li><i class="fas fa-envelope"></i> contact@campusauction.com</li>
</ul>
</div>
</div>
<div class="footer-bottom">
<p>© 2023 校园二手拍卖网站. 保留所有权利.</p>
</div>
</div>
</footer>
<script src="../js/main.js"></script>
</body>
</html>
cart.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="../css/style.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
</head>
<body>
<!-- 导航栏 -->
<nav class="navbar">
<div class="container">
<div class="logo">
<i class="fas fa-university"></i>
<span>校园二手拍卖</span>
</div>
<div class="search-box">
<input type="text" placeholder="搜索商品...">
<button><i class="fas fa-search"></i></button>
</div>
<ul class="nav-links">
<li><a href="../index.html">首页</a></li>
<li><a href="product-list.html">商品分类</a></li>
<li><a href="post-product.html">发布商品</a></li>
<li><a href="cart.html" class="active"><i class="fas fa-shopping-cart"></i> 购物车</a></li>
<li><a href="login.html"><i class="fas fa-user"></i> 登录</a></li>
<li><a href="register.html"><i class="fas fa-user-plus"></i> 注册</a></li>
</ul>
</div>
</nav>
<!-- 购物车页面内容 -->
<section class="cart-page">
<div class="container">
<div class="page-header">
<h1>我的购物车</h1>
<div class="breadcrumb">
<a href="../index.html">首页</a> > 购物车
</div>
</div>
<div class="cart-container">
<!-- 购物车商品列表 -->
<div class="cart-items-section">
<div class="cart-header">
<label class="select-all">
<input type="checkbox" id="select-all" checked>
<span>全选</span>
</label>
<span class="cart-header-item">商品信息</span>
<span class="cart-header-item">单价</span>
<span class="cart-header-item">数量</span>
<span class="cart-header-item">小计</span>
<span class="cart-header-item">操作</span>
</div>
<div class="cart-items" id="cart-items">
<!-- 购物车商品将通过JavaScript动态渲染 -->
</div>
<div class="cart-empty" id="cart-empty" style="display: none;">
<div class="empty-cart-icon">
<i class="fas fa-shopping-cart"></i>
</div>
<p>购物车是空的</p>
<a href="product-list.html" class="btn btn-primary">去逛逛</a>
</div>
</div>
<!-- 购物车结算 -->
<div class="cart-summary">
<div class="summary-header">
<h3>订单摘要</h3>
</div>
<div class="summary-content">
<div class="summary-row">
<span>商品总数：</span>
<span id="total-quantity">0</span>
</div>
<div class="summary-row">
<span>商品总价：</span>
<span id="total-price">¥0.00</span>
</div>
<div class="summary-row summary-total">
<span>应付总额：</span>
<span id="final-total">¥0.00</span>
</div>
</div>
<button class="btn btn-primary btn-block" id="checkout-btn" disabled>去结算</button>
<a href="product-list.html" class="btn btn-outline btn-block">继续购物</a>
</div>
</div>
</div>
</section>
<!-- 页脚 -->
<footer class="footer">
<div class="container">
<div class="footer-content">
<div class="footer-section about">
<div class="logo">
<i class="fas fa-university"></i>
<span>校园二手拍卖</span>
</div>
<p>为校园师生提供安全、便捷的二手商品拍卖平台，促进资源循环利用，打造绿色校园生活。</p>
<div class="social-links">
<a href="#"><i class="fab fa-weixin"></i></a>
<a href="#"><i class="fab fa-weibo"></i></a>
<a href="#"><i class="fab fa-qq"></i></a>
</div>
</div>
<div class="footer-section links">
<h3>快速链接</h3>
<ul>
<li><a href="#">关于我们</a></li>
<li><a href="#">使用帮助</a></li>
<li><a href="#">联系我们</a></li>
<li><a href="#">隐私政策</a></li>
<li><a href="#">用户协议</a></li>
</ul>
</div>
<div class="footer-section contact">
<h3>联系方式</h3>
<ul>
<li><i class="fas fa-map-marker-alt"></i> 北京市海淀区中关村大街59号</li>
<li><i class="fas fa-phone"></i> 010-12345678</li>
<li><i class="fas fa-envelope"></i> contact@campusauction.com</li>
</ul>
</div>
</div>
<div class="footer-bottom">
<p>© 2023 校园二手拍卖网站. 保留所有权利.</p>
</div>
</div>
</footer>
<script src="../js/main.js"></script>
</body>
</html>
main.js
// 模拟商品数据
const mockProducts = [
{
id: 1,
title: "MacBook Pro 2020款",
category: "数码产品",
price: 5800,
originalPrice: 9999,
status: "auction",
condition: "90",
seller: "卖家",
timeLeft: "剩余2天",
image: "images/生成图片 (1).png"
},
{
id: 2,
title: "机械键盘",
category: "数码产品",
price: 120,
originalPrice: 399,
status: "auction",
condition: "80",
seller: "李四",
timeLeft: "剩余1天",
image: "images/生成图片 (3).png"
},
{
id: 3,
title: "大学英语教材全套",
category: "图书教材",
price: 80,
originalPrice: 240,
status: "buy-now",
condition: "90",
seller: "王五",
timeLeft: "剩余3天",
image: "images/生成图片 (4).png"
},
{
id: 4,
title: "篮球",
category: "运动器材",
price: 30,
originalPrice: 120,
status: "auction",
condition: "70",
seller: "赵六",
timeLeft: "剩余12小时",
image: "images/生成图片 (7).png"
},
{
id: 5,
title: "吉他",
category: "乐器设备",
price: 450,
originalPrice: 1200,
status: "auction",
condition: "80",
seller: "孙七",
timeLeft: "剩余4天",
image: "images/生成图片 (9).png"
},
{
id: 6,
title: "显示器",
category: "数码产品",
price: 300,
originalPrice: 899,
status: "buy-now",
condition: "90",
seller: "周八",
timeLeft: "剩余5天",
image: "images/商品111.png"
},
{
id: 7,
title: "自行车",
category: "交通工具",
price: 280,
originalPrice: 899,
status: "auction",
condition: "80",
seller: "吴九",
timeLeft: "剩余3天",
image: "images/商品222.png"
},
{
id: 8,
title: "洗衣机",
category: "家居用品",
price: 400,
originalPrice: 1200,
status: "buy-now",
condition: "90",
seller: "郑十",
timeLeft: "剩余6天",
image: "images/商品333.png"
},
{
id: 9,
title: "运动鞋",
category: "服饰鞋包",
price: 150,
originalPrice: 399,
status: "auction",
condition: "85",
seller: "钱一",
timeLeft: "剩余2天",
image: "images/商品666.png"
},
{
id: 10,
title: "台灯",
category: "家居用品",
price: 50,
originalPrice: 120,
status: "buy-now",
condition: "90",
seller: "孙二",
timeLeft: "剩余4天",
image: "images/商品555.png"
},
{
id: 11,
title: "编程书籍",
category: "图书教材",
price: 60,
originalPrice: 150,
status: "buy-now",
condition: "95",
seller: "李三",
timeLeft: "剩余3天",
image: "images/商品444.png"
},
{
id: 12,
title: "其他物品",
category: "其他物品",
price: 100,
originalPrice: 200,
status: "auction",
condition: "75",
seller: "王四",
timeLeft: "剩余1天",
image: "images/生成图片 (2).png"
}
];
// 全局搜索关键字（用于商品列表页共享）
let currentSearchKeyword = '';
let currentSearchDisplay = '';
// 用户管理系统
const UserManager = {
// 获取所有用户
getUsers: function() {
const users = localStorage.getItem('users');
return users ? JSON.parse(users) : [];
},
// 保存用户列表
saveUsers: function(users) {
localStorage.setItem('users', JSON.stringify(users));
},
// 注册用户
register: function(userData) {
const users = this.getUsers();
// 检查用户名是否已存在
if (users.find(u => u.username === userData.username)) {
return { success: false, message: '用户名已存在' };
}
// 检查邮箱是否已存在
if (userData.email && users.find(u => u.email === userData.email)) {
return { success: false, message: '邮箱已被注册' };
}
// 创建新用户
const newUser = {
id: Date.now(),
username: userData.username,
password: userData.password, // 实际应用中应该加密
email: userData.email,
studentId: userData.studentId || '',
avatar: userData.avatar || 'images/头像1.png',
registerTime: new Date().toISOString(),
rating: 5.0,
stats: {
在售商品: 0,
已售商品: 0,
已购商品: 0,
交易成功: 0
}
};
users.push(newUser);
this.saveUsers(users);
return { success: true, user: newUser };
},
// 用户登录
login: function(username, password) {
const users = this.getUsers();
const user = users.find(u =>
(u.username === username || u.email === username || u.studentId === username) &&
u.password === password
);
if (user) {
// 保存当前登录用户
const currentUser = {
...user,
password: undefined, // 不保存密码
loginTime: new Date().toISOString()
};
localStorage.setItem('currentUser', JSON.stringify(currentUser));
return { success: true, user: currentUser };
} else {
return { success: false, message: '用户名或密码错误' };
}
},
// 获取当前登录用户
getCurrentUser: function() {
const user = localStorage.getItem('currentUser');
return user ? JSON.parse(user) : null;
},
// 退出登录
logout: function() {
localStorage.removeItem('currentUser');
},
// 检查是否已登录
isLoggedIn: function() {
return this.getCurrentUser() !== null;
},
// 更新用户信息
updateUser: function(userData) {
const users = this.getUsers();
const currentUser = this.getCurrentUser();
if (!currentUser) return { success: false, message: '未登录' };
const userIndex = users.findIndex(u => u.id === currentUser.id);
if (userIndex === -1) return { success: false, message: '用户不存在' };
// 更新用户信息
users[userIndex] = {
...users[userIndex],
...userData,
password: users[userIndex].password // 保留原密码
};
this.saveUsers(users);
// 更新当前登录用户
const updatedUser = {
...users[userIndex],
password: undefined,
loginTime: currentUser.loginTime
};
localStorage.setItem('currentUser', JSON.stringify(updatedUser));
return { success: true, user: updatedUser };
}
};
// 购物车管理
const CartManager = {
// 获取购物车
getCart: function() {
const cart = localStorage.getItem('cart');
return cart ? JSON.parse(cart) : [];
},
// 保存购物车
saveCart: function(cart) {
localStorage.setItem('cart', JSON.stringify(cart));
},
// 添加商品到购物车
addItem: function(product) {
const cart = this.getCart();
const existingItem = cart.find(item => item.id === product.id);
if (existingItem) {
existingItem.quantity += 1;
} else {
cart.push({
...product,
quantity: 1
});
}
this.saveCart(cart);
this.updateCartBadge();
return cart;
},
// 从购物车移除商品
removeItem: function(productId) {
const cart = this.getCart();
const newCart = cart.filter(item => item.id !== productId);
this.saveCart(newCart);
this.updateCartBadge();
return newCart;
},
// 更新商品数量
updateQuantity: function(productId, quantity) {
const cart = this.getCart();
const item = cart.find(item => item.id === productId);
if (item) {
if (quantity <= 0) {
return this.removeItem(productId);
}
item.quantity = quantity;
this.saveCart(cart);
this.updateCartBadge();
}
return cart;
},
// 清空购物车
clearCart: function() {
this.saveCart([]);
this.updateCartBadge();
},
// 更新购物车徽章
updateCartBadge: function() {
const cart = this.getCart();
const totalItems = cart.reduce((sum, item) => sum + item.quantity, 0);
const badge = document.querySelector('.cart-badge');
if (badge) {
badge.textContent = totalItems;
badge.style.display = totalItems > 0 ? 'inline-block' : 'none';
}
}
};
// 模拟商品详情数据
const mockProductDetails = {
id: 1,
title: "MacBook Pro 2020款 13英寸",
category: "数码产品",
price: 5800,
originalPrice: 9999,
status: "拍卖",
condition: "9成新",
images: [
"images/product1.jpg",
"images/product1-1.jpg",
"images/product1-2.jpg",
"images/product1-3.jpg"
],
bidCount: 12,
timeLeft: "2天14小时30分钟45秒",
endTime: "2023-05-20T18:45:30",
seller: {
id: "seller_001",
name: "卖家",
avatar: "images/头像1.png",
rating: 4.5,
transactions: 128
},
description: "MacBook Pro 2020款 13英寸，配置如下：<br>" +
"<ul>" +
"<li>处理器：Intel Core i5 10代</li>" +
"<li>内存：16GB DDR4</li>" +
"<li>存储：512GB SSD</li>" +
"<li>显卡：Intel Iris Plus Graphics</li>" +
"<li>屏幕：13.3英寸 Retina 显示屏</li>" +
"<li>电池循环次数：120次</li>" +
"</ul>" +
"机器保护得很好，9成新，没有明显划痕和损坏。原装充电器和包装盒都在。<br>" +
"支持校内面交，有意者可以联系我。",
bidHistory: [
{ bidder: "李四", avatar: "images/avatar2.jpg", amount: 5800, time: "2023-05-15 14:30" },
{ bidder: "王五", avatar: "images/avatar3.jpg", amount: 5700, time: "2023-05-15 13:45" },
{ bidder: "赵六", avatar: "images/avatar4.jpg", amount: 5600, time: "2023-05-15 12:20" }
],
reviews: [
{ reviewer: "孙七", avatar: "images/avatar5.jpg", rating: 5, date: "2023-05-10", content: "卖家很诚信，商品和描述的一样，9成新，用起来很流畅。交易过程很顺利，推荐！" },
{ reviewer: "周八", avatar: "images/avatar6.jpg", rating: 4, date: "2023-05-08", content: "电脑确实不错，就是电池续航稍微有点下降，但总体来说还是很满意的。卖家服务态度很好。" }
]
};
// 模拟用户数据（已废弃，使用UserManager管理用户数据）
// 初始化滚动触发动画
function initScrollAnimations() {
const animatedElements = document.querySelectorAll('.animate-on-scroll');
if (!animatedElements.length) return;
const observer = new IntersectionObserver((entries) => {
entries.forEach(entry => {
if (entry.isIntersecting) {
const delay = entry.target.dataset.delay || 0;
entry.target.style.transitionDelay = `${delay}s`;
entry.target.classList.add('animated');
observer.unobserve(entry.target);
}
});
}, {
threshold: 0.1,
rootMargin: '0px 0px -50px 0px'
});
animatedElements.forEach(element => {
observer.observe(element);
});
}
// 添加按钮点击波纹效果
function initButtonRipple() {
const buttons = document.querySelectorAll('.btn, .search-box button, .price-filter button');
buttons.forEach(button => {
button.addEventListener('click', function(e) {
// 创建波纹元素
const ripple = document.createElement('span');
ripple.classList.add('ripple');
// 设置波纹大小
const size = Math.max(this.offsetWidth, this.offsetHeight);
ripple.style.width = ripple.style.height = `${size}px`;
// 设置波纹位置
const rect = this.getBoundingClientRect();
const left = e.clientX - rect.left - size / 2;
const top = e.clientY - rect.top - size / 2;
ripple.style.left = `${left}px`;
ripple.style.top = `${top}px`;
// 添加到按钮
this.appendChild(ripple);
// 动画结束后移除
setTimeout(() => {
ripple.remove();
}, 600);
});
});
}
// 隐藏页面加载动画
function hidePageLoader() {
const loader = document.querySelector('.page-loader');
if (loader) {
loader.classList.add('hidden');
// 动画结束后完全移除
setTimeout(() => {
loader.style.display = 'none';
}, 500);
}
}
// DOM加载完成后执行
document.addEventListener('DOMContentLoaded', function() {
// 延迟隐藏加载动画，确保用户能看到
setTimeout(hidePageLoader, 500);
// 初始化轮播图
initCarousel();
// 初始化导航栏交互
initNavbar();
// 更新导航栏（显示登录状态）
updateNavbar();
// 初始化搜索框
initSearchBox();
// 初始化商品卡片点击事件
initProductCards();
// 初始化分类点击功能
initCategoryClick();
// 初始化登录表单验证
initLoginForm();
// 初始化注册表单验证
initRegisterForm();
// 初始化滚动动画
initScrollAnimations();
// 初始化按钮波纹效果
initButtonRipple();
// 初始化商品详情页功能
initProductDetails();
// 初始化联系卖家和查看店铺功能
initSellerContact();
// 初始化卖家店铺页面
initSellerShop();
// 初始化商品发布页功能
initProductPost();
// 初始化倒计时功能
initCountdowns();
// 初始化商品列表页功能
initProductList();
// 初始化筛选功能
initFilters();
// 初始化购物车页面
initCartPage();
// 初始化支付页面
initCheckoutPage();
// 更新购物车徽章
CartManager.updateCartBadge();
// 根据当前页面路径判断是否需要渲染不同内容
const currentPath = window.location.pathname;
const currentHref = window.location.href;
// 更准确的路径检测
if (currentPath.includes('product-list.html') || currentHref.includes('product-list.html')) {
// 商品列表页：渲染所有商品
renderProducts(mockProducts);
} else if (currentPath.includes('index.html') || currentPath.endsWith('/') || currentPath === '' || currentHref.endsWith('index.html') || currentHref.endsWith('/')) {
// 首页：分别渲染推荐商品和最新上架
const productGrids = document.querySelectorAll('.product-grid');
if (productGrids.length >= 2) {
// 第一个是推荐商品
renderProductsToGrid(mockProducts.slice(0, 4), productGrids[0]);
// 第二个是最新上架
renderProductsToGrid(mockProducts.slice(4, 8), productGrids[1]);
} else if (productGrids.length === 1) {
// 如果只有一个，先渲染推荐商品
renderProductsToGrid(mockProducts.slice(0, 4), productGrids[0]);
}
} else if (currentPath.includes('product-details.html') || currentHref.includes('product-details.html')) {
// 商品详情页：渲染商品详情
const productId = getUrlParam('id');
if (productId) {
const product = findProductById(productId);
if (product) {
renderProductDetailsFromProduct(product);
} else {
renderProductDetails(mockProductDetails);
}
} else {
renderProductDetails(mockProductDetails);
}
} else if (currentPath.includes('user-center.html') || currentHref.includes('user-center.html')) {
// 个人中心页面：渲染用户信息
const currentUser = UserManager.getCurrentUser();
if (currentUser) {
renderUserCenter(currentUser);
} else {
// 未登录，跳转到登录页
const isInPagesFolder = currentPath.includes('pages/');
const basePath = isInPagesFolder ? '' : 'pages/';
window.location.href = basePath + 'login.html?return=' + encodeURIComponent('user-center.html');
}
} else if (currentPath.includes('my-orders.html') || currentHref.includes('my-orders.html')) {
// 我的订单页面
const currentUser = UserManager.getCurrentUser();
if (currentUser) {
initMyOrders();
} else {
const isInPagesFolder = currentPath.includes('pages/');
const basePath = isInPagesFolder ? '' : 'pages/';
window.location.href = basePath + 'login.html?return=' + encodeURIComponent('my-orders.html');
}
} else if (currentPath.includes('my-products.html') || currentHref.includes('my-products.html')) {
// 我的在售页面
const currentUser = UserManager.getCurrentUser();
if (currentUser) {
initMyProducts();
} else {
const isInPagesFolder = currentPath.includes('pages/');
const basePath = isInPagesFolder ? '' : 'pages/';
window.location.href = basePath + 'login.html?return=' + encodeURIComponent('my-products.html');
}
} else if (currentPath.includes('settings.html') || currentHref.includes('settings.html')) {
// 设置页面
const currentUser = UserManager.getCurrentUser();
if (currentUser) {
initSettings();
} else {
const isInPagesFolder = currentPath.includes('pages/');
const basePath = isInPagesFolder ? '' : 'pages/';
window.location.href = basePath + 'login.html?return=' + encodeURIComponent('settings.html');
}
}
});
// 轮播图功能
function initCarousel() {
const carousels = document.querySelectorAll('.carousel');
carousels.forEach(carousel => {
const carouselInner = carousel.querySelector('.carousel-inner');
const items = carousel.querySelectorAll('.carousel-item');
const prevBtn = carousel.querySelector('.carousel-control-prev');
const nextBtn = carousel.querySelector('.carousel-control-next');
const indicators = carousel.querySelectorAll('.indicator');
if (!carouselInner || !items.length || !prevBtn || !nextBtn) return;
let currentIndex = 0;
const totalItems = items.length;
let autoPlayInterval;
function showSlide(index) {
if (index < 0) index = totalItems - 1;
if (index >= totalItems) index = 0;
currentIndex = index;
carouselInner.style.transform = `translateX(-${currentIndex * 100}%)`;
// 更新指示器状态
updateIndicators(index);
}
function updateIndicators(index) {
if (!indicators.length) return;
indicators.forEach((indicator, i) => {
if (i === index) {
indicator.classList.add('active');
} else {
indicator.classList.remove('active');
}
});
}
// 开始自动轮播
function startAutoPlay() {
autoPlayInterval = setInterval(() => showSlide(currentIndex + 1), 5000);
}
// 停止自动轮播
function stopAutoPlay() {
if (autoPlayInterval) {
clearInterval(autoPlayInterval);
}
}
// 指示器点击事件
indicators.forEach((indicator, index) => {
indicator.addEventListener('click', () => {
stopAutoPlay();
showSlide(index);
startAutoPlay();
});
});
prevBtn.addEventListener('click', () => {
stopAutoPlay();
showSlide(currentIndex - 1);
startAutoPlay();
});
nextBtn.addEventListener('click', () => {
stopAutoPlay();
showSlide(currentIndex + 1);
startAutoPlay();
});
// 鼠标悬停暂停自动轮播
carousel.addEventListener('mouseenter', stopAutoPlay);
carousel.addEventListener('mouseleave', startAutoPlay);
// 开始自动轮播
startAutoPlay();
// 为轮播图标题和描述添加动画
items.forEach((item, index) => {
const caption = item.querySelector('.carousel-caption');
if (caption) {
caption.style.opacity = '0';
caption.style.transform = 'translateY(20px)';
caption.style.transition = 'opacity 0.8s ease, transform 0.8s ease';
// 当前幻灯片的标题和描述立即显示
if (index === currentIndex) {
caption.style.opacity = '1';
caption.style.transform = 'translateY(0)';
}
}
});
// 修改showSlide函数，添加标题和描述动画
const originalShowSlide = showSlide;
showSlide = function(index) {
// 隐藏当前幻灯片的标题和描述
const currentCaption = items[currentIndex].querySelector('.carousel-caption');
if (currentCaption) {
currentCaption.style.opacity = '0';
currentCaption.style.transform = 'translateY(20px)';
}
// 显示新幻灯片
originalShowSlide(index);
// 延迟显示新幻灯片的标题和描述
setTimeout(() => {
const newCaption = items[currentIndex].querySelector('.carousel-caption');
if (newCaption) {
newCaption.style.opacity = '1';
newCaption.style.transform = 'translateY(0)';
}
}, 300);
};
});
}
// 导航栏交互
function initNavbar() {
// 监听滚动事件，改变导航栏样式
window.addEventListener('scroll', function() {
const navbar = document.querySelector('.navbar');
if (window.scrollY > 100) {
navbar.style.backgroundColor = 'rgba(255, 255, 255, 0.95)';
navbar.style.boxShadow = '0 2px 10px rgba(0, 0, 0, 0.1)';
} else {
navbar.style.backgroundColor = 'rgba(255, 255, 255, 1)';
navbar.style.boxShadow = '0 2px 4px rgba(0, 0, 0, 0.1)';
}
});
}
// 更新导航栏（根据登录状态）
function updateNavbar() {
const currentUser = UserManager.getCurrentUser();
const navLinks = document.querySelector('.nav-links');
if (!navLinks) return;
const currentPath = window.location.pathname;
const isInPagesFolder = currentPath.includes('pages/');
const basePath = isInPagesFolder ? '../' : '';
const pagesBasePath = isInPagesFolder ? '' : 'pages/';
if (currentUser) {
// 已登录：显示用户信息和下拉菜单
// 先检查是否有现有的dropdown（可能是HTML中写死的）
const existingDropdown = navLinks.querySelector('.dropdown');
let userNav = navLinks.querySelector('.user-nav-item');
// 如果存在dropdown但不是user-nav-item，将其转换为user-nav-item
if (existingDropdown && !userNav) {
existingDropdown.classList.add('user-nav-item');
userNav = existingDropdown;
}
if (!userNav) {
// 移除登录和注册链接
const loginLink = navLinks.querySelector('a[href*="login.html"]');
const registerLink = navLinks.querySelector('a[href*="register.html"]');
if (loginLink) loginLink.parentElement.remove();
if (registerLink) registerLink.parentElement.remove();
// 添加用户下拉菜单
const userLi = document.createElement('li');
userLi.className = 'dropdown user-nav-item';
userLi.innerHTML = `
<a href="#">
<img src="${basePath}${currentUser.avatar}" alt="用户头像" class="user-avatar" onerror="this.src='${basePath}images/头像1.png'">
<span>${currentUser.username}</span>
<i class="fas fa-chevron-down"></i>
</a>
<div class="dropdown-menu">
<a href="${pagesBasePath}user-center.html">个人中心</a>
<a href="${pagesBasePath}my-products.html">我的在售</a>
<a href="${pagesBasePath}my-orders.html">我的订单</a>
<a href="${pagesBasePath}settings.html">设置</a>
<a href="${pagesBasePath}cart.html">购物车</a>
<a href="${pagesBasePath}post-product.html">发布商品</a>
<a href="#" id="logout-btn">退出登录</a>
</div>
`;
navLinks.appendChild(userLi);
// 绑定退出登录事件
const logoutBtn = document.getElementById('logout-btn');
if (logoutBtn) {
logoutBtn.addEventListener('click', function(e) {
e.preventDefault();
if (confirm('确定要退出登录吗？')) {
UserManager.logout();
updateNavbar();
window.location.reload();
}
});
}
} else {
// 更新现有用户信息和下拉菜单
const userLink = navLinks.querySelector('.user-nav-item a');
const userSpan = navLinks.querySelector('.user-nav-item span');
const userImg = navLinks.querySelector('.user-nav-item .user-avatar');
const dropdownMenu = navLinks.querySelector('.user-nav-item .dropdown-menu');
if (userLink && userSpan) {
userSpan.textContent = currentUser.username || currentUser.name || '用户';
}
if (userImg) {
userImg.src = basePath + (currentUser.avatar || 'images/头像1.png');
userImg.onerror = function() {
this.src = basePath + 'images/头像1.png';
};
}
// 更新下拉菜单内容
if (dropdownMenu) {
dropdownMenu.innerHTML = `
<a href="${pagesBasePath}user-center.html">个人中心</a>
<a href="${pagesBasePath}my-products.html">我的在售</a>
<a href="${pagesBasePath}my-orders.html">我的订单</a>
<a href="${pagesBasePath}settings.html">设置</a>
<a href="${pagesBasePath}cart.html">购物车</a>
<a href="${pagesBasePath}post-product.html">发布商品</a>
<a href="#" id="logout-btn">退出登录</a>
`;
// 重新绑定退出登录事件
const logoutBtn = document.getElementById('logout-btn');
if (logoutBtn) {
logoutBtn.addEventListener('click', function(e) {
e.preventDefault();
if (confirm('确定要退出登录吗？')) {
UserManager.logout();
updateNavbar();
window.location.reload();
}
});
}
}
}
} else {
// 未登录：显示登录和注册链接
const userNav = navLinks.querySelector('.user-nav-item');
if (userNav) {
userNav.remove();
}
// 确保有登录和注册链接
if (!navLinks.querySelector('a[href*="login.html"]')) {
const loginLi = document.createElement('li');
loginLi.innerHTML = `<a href="${pagesBasePath}login.html"><i class="fas fa-user"></i> 登录</a>`;
navLinks.appendChild(loginLi);
}
if (!navLinks.querySelector('a[href*="register.html"]')) {
const registerLi = document.createElement('li');
registerLi.innerHTML = `<a href="${pagesBasePath}register.html"><i class="fas fa-user-plus"></i> 注册</a>`;
navLinks.appendChild(registerLi);
}
}
}
// 检查登录状态，如果未登录则跳转到登录页
function requireLogin(returnUrl) {
if (!UserManager.isLoggedIn()) {
const currentPath = window.location.pathname;
const isInPagesFolder = currentPath.includes('pages/');
const basePath = isInPagesFolder ? '' : 'pages/';
const loginUrl = basePath + 'login.html';
const returnParam = returnUrl ? `?return=${encodeURIComponent(returnUrl)}` : '';
window.location.href = loginUrl + returnParam;
return false;
}
return true;
}
// 搜索框交互
function initSearchBox() {
const searchBoxes = document.querySelectorAll('.search-box');
if (!searchBoxes.length) return;
searchBoxes.forEach(box => {
const input = box.querySelector('input');
const button = box.querySelector('button');
if (!input) return;
const triggerSearch = () => {
const keyword = input.value.trim();
if (!keyword) {
showMessage('请输入搜索关键词');
input.focus();
return;
}
currentSearchDisplay = keyword;
currentSearchKeyword = keyword.toLowerCase();
const currentPath = window.location.pathname;
const isInPagesFolder = currentPath.includes('/pages/');
const basePath = isInPagesFolder ? '' : 'pages/';
const targetUrl = `${basePath}product-list.html?search=${encodeURIComponent(keyword)}`;
window.location.href = targetUrl;
};
input.addEventListener('keypress', function(e) {
if (e.key === 'Enter') {
e.preventDefault();
triggerSearch();
}
});
if (button) {
button.addEventListener('click', function(e) {
e.preventDefault();
triggerSearch();
});
}
});
}
// 商品卡片点击事件
function initProductCards() {
// 这个功能已经在 renderProductsToGrid 中实现了
// 这里保留函数以防其他地方需要
}
// 初始化分类点击功能
function initCategoryClick() {
const categoryItems = document.querySelectorAll('.category-item');
categoryItems.forEach(item => {
item.addEventListener('click', function() {
// 跳转到商品列表页，并传递分类参数
const categoryName = this.querySelector('span').textContent;
const currentPath = window.location.pathname;
const isInPagesFolder = currentPath.includes('pages/');
const basePath = isInPagesFolder ? '' : 'pages/';
window.location.href = `${basePath}product-list.html?category=${encodeURIComponent(categoryName)}`;
});
});
}
// 登录表单验证
function initLoginForm() {
const loginForm = document.querySelector('.login-form');
if (loginForm) {
loginForm.addEventListener('submit', function(e) {
e.preventDefault();
const username = document.getElementById('username');
const password = document.getElementById('password');
if (!username || !password) {
alert('请填写完整的登录信息');
return;
}
const usernameValue = username.value.trim();
const passwordValue = password.value.trim();
// 简单验证
if (!usernameValue || !passwordValue) {
alert('请填写完整的登录信息');
return;
}
// 使用UserManager进行登录
const result = UserManager.login(usernameValue, passwordValue);
if (result.success) {
alert('登录成功！');
// 更新导航栏
updateNavbar();
// 跳转到首页或返回上一页
const returnUrl = getUrlParam('return');
const currentPath = window.location.pathname;
const isInPagesFolder = currentPath.includes('pages/');
if (returnUrl) {
// 如果有返回URL参数，跳转到指定页面
const decodedReturnUrl = decodeURIComponent(returnUrl);
if (decodedReturnUrl.startsWith('http://') || decodedReturnUrl.startsWith('https://')) {
// 绝对URL，直接跳转
window.location.href = decodedReturnUrl;
} else if (decodedReturnUrl.startsWith('../') || decodedReturnUrl.startsWith('./')) {
// 相对路径（相对于当前页面），直接使用
window.location.href = decodedReturnUrl;
} else if (decodedReturnUrl.includes('/')) {
// 包含路径分隔符，可能是 pages/xxx.html 或完整的相对路径
window.location.href = decodedReturnUrl;
} else {
// 简单文件名（如 user-center.html）
// 如果当前在pages文件夹，目标也在pages文件夹（同一目录）
// 如果当前不在pages文件夹，目标在pages文件夹
const targetPath = isInPagesFolder ? decodedReturnUrl : 'pages/' + decodedReturnUrl;
window.location.href = targetPath;
}
} else {
// 没有返回URL，跳转到首页
const basePath = isInPagesFolder ? '../' : '';
window.location.href = basePath + 'index.html';
}
} else {
alert(result.message || '登录失败，请检查用户名和密码');
}
});
}
}
// 注册表单验证
function initRegisterForm() {
const registerForm = document.querySelector('.register-form');
if (registerForm) {
registerForm.addEventListener('submit', function(e) {
e.preventDefault();
const username = document.getElementById('username');
const password = document.getElementById('password');
const confirmPassword = document.getElementById('confirm-password');
const email = document.getElementById('email');
const studentId = document.getElementById('student-id');
const termsCheckbox = document.querySelector('.terms input[type="checkbox"]');
if (!username || !password || !confirmPassword || !email) {
alert('请填写完整的注册信息');
return;
}
const usernameValue = username.value.trim();
const passwordValue = password.value.trim();
const confirmPasswordValue = confirmPassword.value.trim();
const emailValue = email.value.trim();
const studentIdValue = studentId ? studentId.value.trim() : '';
// 简单验证
if (!usernameValue || !passwordValue || !confirmPasswordValue || !emailValue) {
alert('请填写完整的注册信息');
return;
}
// 用户名长度验证
if (usernameValue.length < 3) {
alert('用户名长度不能少于3位');
return;
}
// 邮箱格式验证
const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
if (!emailRegex.test(emailValue)) {
alert('请输入有效的邮箱地址');
return;
}
if (passwordValue.length < 6) {
alert('密码长度不能少于6位');
return;
}
if (passwordValue !== confirmPasswordValue) {
alert('两次输入的密码不一致');
return;
}
if (!termsCheckbox || !termsCheckbox.checked) {
alert('请阅读并同意用户协议和隐私政策');
return;
}
// 使用UserManager进行注册
const result = UserManager.register({
username: usernameValue,
password: passwordValue,
email: emailValue,
studentId: studentIdValue
});
if (result.success) {
alert('注册成功！请登录');
// 跳转到登录页
const currentPath = window.location.pathname;
const isInPagesFolder = currentPath.includes('pages/');
const basePath = isInPagesFolder ? '' : 'pages/';
window.location.href = basePath + 'login.html';
} else {
alert(result.message || '注册失败');
}
});
// 验证码功能模拟
const getCodeBtn = document.querySelector('.verification-code button');
if (getCodeBtn) {
getCodeBtn.addEventListener('click', function(e) {
e.preventDefault();
const email = document.getElementById('email');
if (!email || !email.value.trim()) {
alert('请先输入邮箱地址');
return;
}
// 模拟发送验证码
let countdown = 60;
this.disabled = true;
const originalText = this.textContent;
this.textContent = `${countdown}秒后重新获取`;
const timer = setInterval(() => {
countdown--;
if (countdown > 0) {
this.textContent = `${countdown}秒后重新获取`;
} else {
clearInterval(timer);
this.disabled = false;
this.textContent = originalText;
}
}, 1000);
alert('验证码已发送到您的邮箱（模拟）');
});
}
}
}
// 商品详情页功能
function initProductDetails() {
// 图片切换功能 - 支持两种HTML结构
const thumbnails = document.querySelectorAll('.thumbnail-item, .thumbnail');
const mainImage = document.querySelector('.main-image img, .gallery-main img');
if (thumbnails.length && mainImage) {
thumbnails.forEach(thumbnail => {
thumbnail.addEventListener('click', function() {
// 移除所有缩略图的active类
thumbnails.forEach(t => t.classList.remove('active'));
// 给当前点击的缩略图添加active类
this.classList.add('active');
// 切换主图
const img = this.querySelector('img');
if (img) {
mainImage.src = img.src;
}
});
});
}
// 根据商品状态显示不同的操作区域
const productId = getUrlParam('id');
let currentProduct = null;
if (productId) {
currentProduct = mockProducts.find(p => p.id === parseInt(productId));
}
const buySection = document.getElementById('buy-section');
const bidSection = document.getElementById('bid-section');
if (currentProduct) {
if (currentProduct.status === 'buy-now') {
// 一口价商品，显示购买区域
if (buySection) buySection.style.display = 'block';
if (bidSection) bidSection.style.display = 'none';
} else {
// 拍卖商品，显示出价区域
if (buySection) buySection.style.display = 'none';
if (bidSection) bidSection.style.display = 'block';
}
}
// 加入购物车功能
const addToCartBtn = document.getElementById('add-to-cart-btn');
if (addToCartBtn && currentProduct) {
addToCartBtn.addEventListener('click', function() {
if (!requireLogin(window.location.href)) return;
if (currentProduct.status === 'buy-now') {
CartManager.addItem(currentProduct);
showMessage('商品已添加到购物车！', 'success');
}
});
}
// 立即购买功能
const buyNowBtn = document.getElementById('buy-now-btn');
if (buyNowBtn && currentProduct) {
buyNowBtn.addEventListener('click', function() {
if (!requireLogin(window.location.href)) return;
if (currentProduct.status === 'buy-now') {
// 创建临时订单，跳转到支付页面
const tempOrder = [{
...currentProduct,
quantity: 1
}];
localStorage.setItem('tempOrder', JSON.stringify(tempOrder));
const currentPath = window.location.pathname;
const isInPagesFolder = currentPath.includes('pages/');
const basePath = isInPagesFolder ? '' : 'pages/';
window.location.href = basePath + 'checkout.html';
}
});
}
// 出价功能（拍卖商品）
const submitBidBtn = document.getElementById('submit-bid-btn');
const bidAmountInput = document.getElementById('bid-amount');
if (submitBidBtn && bidAmountInput) {
submitBidBtn.addEventListener('click', function(e) {
e.preventDefault();
handleBid();
});
}
function handleBid() {
if (!requireLogin(window.location.href)) return;
if (!bidAmountInput) {
alert('找不到出价输入框');
return;
}
const bidAmount = bidAmountInput.value;
if (!bidAmount || isNaN(bidAmount) || parseFloat(bidAmount) <= 0) {
alert('请输入有效的出价金额');
return;
}
// 模拟出价成功
alert('出价成功！');
// 重置表单
if (bidAmountInput) bidAmountInput.value = '';
// 更新当前出价金额（模拟）
const currentBidAmount = document.querySelector('.current-bid-amount, .current-price .price');
if (currentBidAmount) {
currentBidAmount.textContent = '¥' + parseFloat(bidAmount).toLocaleString('zh-CN');
}
}
// 设置提醒功能
const setReminderBtn = document.getElementById('set-reminder-btn');
if (setReminderBtn) {
setReminderBtn.addEventListener('click', function() {
if (!requireLogin(window.location.href)) return;
alert('提醒设置成功！商品结束前我们会通知您。');
});
}
// 关注功能
const followBtn = document.querySelector('.btn-follow');
if (followBtn) {
followBtn.addEventListener('click', function() {
if (this.textContent.includes('关注')) {
this.textContent = '已关注';
this.classList.remove('btn-primary');
this.classList.add('btn-secondary');
} else {
this.textContent = '关注';
this.classList.remove('btn-secondary');
this.classList.add('btn-primary');
}
});
}
// Tab切换功能
const tabButtons = document.querySelectorAll('.tab-btn');
const tabPanels = document.querySelectorAll('.tab-panel');
if (tabButtons.length) {
tabButtons.forEach(button => {
button.addEventListener('click', function() {
const targetTab = this.dataset.tab;
// 移除所有active类
tabButtons.forEach(btn => btn.classList.remove('active'));
tabPanels.forEach(panel => panel.classList.remove('active'));
// 添加active类
this.classList.add('active');
const targetPanel = document.getElementById(targetTab);
if (targetPanel) {
targetPanel.classList.add('active');
}
});
});
}
}
// 商品发布页功能
function initProductPost() {
// 交易方式选择功能
const transactionMethod = document.querySelectorAll('input[name="transaction-method"]');
const deliveryFeeGroup = document.getElementById('delivery-fee-group');
if (transactionMethod.length && deliveryFeeGroup) {
transactionMethod.forEach(radio => {
radio.addEventListener('change', function() {
if (this.value === 'delivery') {
deliveryFeeGroup.style.display = 'block';
} else {
deliveryFeeGroup.style.display = 'none';
}
});
});
}
// 商品状态选择功能
const productStatus = document.getElementById('product-status');
const startingPrice = document.getElementById('starting-price');
const buyItNowPrice = document.getElementById('buy-it-now-price');
if (productStatus && startingPrice && buyItNowPrice) {
productStatus.addEventListener('change', function() {
if (this.value === 'auction') {
startingPrice.disabled = false;
buyItNowPrice.disabled = false;
} else if (this.value === 'buy-it-now') {
startingPrice.disabled = true;
buyItNowPrice.disabled = false;
}
});
}
let selectedMainImage = null;
const selectedSecondaryImages = [];
let currentSecondaryIndex = null;
const mainImageInput = document.getElementById('main-image-input');
const mainImagePreview = document.getElementById('main-image-preview');
if (mainImageInput && mainImagePreview) {
mainImagePreview.addEventListener('click', () => mainImageInput.click());
mainImageInput.addEventListener('change', function () {
const file = this.files[0];
if (!file) return;
if (file.size > 5 * 1024 * 1024) {
alert('图片大小不能超过5MB');
return;
}
const reader = new FileReader();
reader.onload = e => {
selectedMainImage = e.target.result;
mainImagePreview.classList.add('has-image');
mainImagePreview.innerHTML = `<img src="${selectedMainImage}" alt="主图预览">`;
};
reader.readAsDataURL(file);
});
}
const secondaryImageInput = document.getElementById('secondary-image-input');
const secondaryUploadBoxes = document.querySelectorAll('.secondary-images-upload .upload-box');
if (secondaryImageInput && secondaryUploadBoxes.length) {
secondaryUploadBoxes.forEach((box, index) => {
box.addEventListener('click', () => {
currentSecondaryIndex = index;
secondaryImageInput.click();
});
});
secondaryImageInput.addEventListener('change', function () {
const file = this.files[0];
if (!file || currentSecondaryIndex === null) return;
if (file.size > 5 * 1024 * 1024) {
alert('图片大小不能超过5MB');
return;
}
const reader = new FileReader();
reader.onload = e => {
selectedSecondaryImages[currentSecondaryIndex] = e.target.result;
const targetBox = secondaryUploadBoxes[currentSecondaryIndex];
if (targetBox) {
targetBox.classList.add('has-image');
targetBox.innerHTML = `<img src="${selectedSecondaryImages[currentSecondaryIndex]}" alt="附图${currentSecondaryIndex + 1}">`;
}
};
reader.readAsDataURL(file);
});
}
// 发布商品表单提交
const postForm = document.querySelector('.post-product-form');
if (postForm) {
// 检查登录状态
if (!UserManager.isLoggedIn()) {
const currentPath = window.location.pathname;
const isInPagesFolder = currentPath.includes('pages/');
const basePath = isInPagesFolder ? '' : 'pages/';
window.location.href = basePath + 'login.html?return=' + encodeURIComponent('post-product.html');
return;
}
postForm.addEventListener('submit', function(e) {
e.preventDefault();
if (!requireLogin('post-product.html')) return;
// 简单验证
const productTitle = document.getElementById('product-title').value;
const productCategory = document.getElementById('product-category').value;
const productCondition = document.getElementById('product-condition').value;
const productStatus = document.getElementById('product-status').value;
const productCampus = document.getElementById('product-campus').value;
const productDescription = document.getElementById('product-description').value;
if (!productTitle || !productCategory || !productCondition || !productStatus || !productCampus || !productDescription) {
alert('请填写完整的商品信息');
return;
}
// 获取当前用户
const currentUser = UserManager.getCurrentUser();
if (!currentUser) {
alert('请先登录');
return;
}
// 获取商品信息
const startingPriceEl = document.getElementById('starting-price');
const buyItNowPriceEl = document.getElementById('buy-it-now-price');
const auctionDurationEl = document.getElementById('auction-duration');
const startingPrice = startingPriceEl ? startingPriceEl.value : '';
const buyItNowPrice = buyItNowPriceEl ? buyItNowPriceEl.value : '';
const auctionDuration = auctionDurationEl ? auctionDurationEl.value : '';
// 创建商品对象
const price = productStatus === 'auction' ? parseFloat(startingPrice) : parseFloat(buyItNowPrice);
const productImages = [];
if (selectedMainImage) productImages.push(selectedMainImage);
selectedSecondaryImages.forEach(img => {
if (img) productImages.push(img);
});
const newProduct = {
title: productTitle,
category: productCategory,
price: price || 0,
originalPrice: parseFloat(buyItNowPrice) || (price * 1.5) || 0,
status: productStatus === 'auction' ? 'auction' : 'buy-now',
condition: productCondition,
seller: {
id: currentUser.id || currentUser.username,
name: currentUser.username || currentUser.name,
avatar: currentUser.avatar || 'images/头像1.png',
rating: currentUser.rating || 4.5,
transactions: currentUser.stats?.交易成功 || 0
},
timeLeft: auctionDuration ? `剩余${auctionDuration}天` : '剩余3天',
image: productImages[0] || 'images/商品111.png',
images: productImages.length ? productImages : undefined,
description: productDescription
};
// 保存用户发布的商品（使用id或username作为标识）
const userId = currentUser.id || currentUser.username || currentUser.name;
saveUserProduct(newProduct, userId);
// 更新用户统计数据
const updatedStats = {
...currentUser.stats,
在售商品: (currentUser.stats?.在售商品 || 0) + 1
};
UserManager.updateUser({ stats: updatedStats });
// 模拟发布成功
alert('商品发布成功！');
const currentPath = window.location.pathname;
const isInPagesFolder = currentPath.includes('pages/');
const basePath = isInPagesFolder ? '../' : '';
window.location.href = basePath + 'index.html';
});
}
}
// 倒计时功能
function initCountdowns() {
const countdownElements = document.querySelectorAll('.time-left span');
countdownElements.forEach(element => {
// 解析剩余时间（这里假设元素内容为 "剩余2天" 或 "剩余12小时" 等格式）
const text = element.textContent;
if (text.includes('天')) {
const days = parseInt(text.match(/\d+/)[0]);
startCountdown(element, days * 24 * 60 * 60);
} else if (text.includes('小时')) {
const hours = parseInt(text.match(/\d+/)[0]);
startCountdown(element, hours * 60 * 60);
} else if (text.includes('分钟')) {
const minutes = parseInt(text.match(/\d+/)[0]);
startCountdown(element, minutes * 60);
}
});
}
function startCountdown(element, totalSeconds) {
function updateCountdown() {
const days = Math.floor(totalSeconds / (24 * 60 * 60));
const hours = Math.floor((totalSeconds % (24 * 60 * 60)) / (60 * 60));
const minutes = Math.floor((totalSeconds % (60 * 60)) / 60);
const seconds = totalSeconds % 60;
let displayText;
if (days > 0) {
displayText = `剩余${days}天${hours}小时`;
} else if (hours > 0) {
displayText = `剩余${hours}小时${minutes}分钟`;
} else if (minutes > 0) {
displayText = `剩余${minutes}分钟${seconds}秒`;
} else {
displayText = `剩余${seconds}秒`;
}
element.textContent = displayText;
if (totalSeconds <= 0) {
clearInterval(interval);
element.textContent = '已结束';
} else {
totalSeconds--;
}
}
// 立即更新一次
updateCountdown();
// 每秒更新一次
const interval = setInterval(updateCountdown, 1000);
}
// 商品列表页功能
function initProductList() {
const getCurrentFilterState = () => {
const categoryCheckboxes = document.querySelectorAll('.category-filter input[type="checkbox"]:checked');
const priceMinInput = document.getElementById('price-min');
const priceMaxInput = document.getElementById('price-max');
const statusCheckboxes = document.querySelectorAll('.status-filter input[type="checkbox"]:checked');
const conditionCheckboxes = document.querySelectorAll('.condition-filter input[type="checkbox"]:checked');
const parsePrice = (input, fallback) => {
if (!input || !input.value) return fallback;
const value = parseFloat(input.value);
return Number.isNaN(value) ? fallback : value;
};
return {
categories: Array.from(categoryCheckboxes).map(cb => cb.value),
priceMin: parsePrice(priceMinInput, 0),
priceMax: parsePrice(priceMaxInput, Infinity),
status: Array.from(statusCheckboxes).map(cb => cb.value),
condition: Array.from(conditionCheckboxes).map(cb => cb.value)
};
};
// 检查URL参数，应用分类筛选
const categoryParam = getUrlParam('category');
if (categoryParam) {
// 找到对应的分类checkbox并选中
const categoryCheckboxes = document.querySelectorAll('.category-filter input[type="checkbox"]');
categoryCheckboxes.forEach(checkbox => {
if (checkbox.value === categoryParam || checkbox.parentElement.textContent.includes(categoryParam)) {
checkbox.checked = true;
// 如果选择了具体分类，取消"全部商品"
if (checkbox.value !== '全部商品') {
const allCheckbox = document.querySelector('.category-filter input[value="全部商品"]');
if (allCheckbox) allCheckbox.checked = false;
}
}
});
// 应用筛选
setTimeout(() => {
const applyBtn = document.querySelector('.apply-btn');
if (applyBtn) {
applyBtn.click();
} else {
const filters = getCurrentFilterState();
applyFilters(filters);
}
}, 100);
}
const searchParam = getUrlParam('search');
if (searchParam) {
const decodedSearch = decodeURIComponent(searchParam);
currentSearchDisplay = decodedSearch;
currentSearchKeyword = decodedSearch.trim().toLowerCase();
// 更新搜索框显示
document.querySelectorAll('.search-box input').forEach(input => {
input.value = decodedSearch;
});
// 更新页面标题和面包屑导航
const pageTitle = document.getElementById('page-title');
const breadcrumb = document.getElementById('breadcrumb');
if (pageTitle) {
pageTitle.textContent = `搜索结果："${decodedSearch}"`;
}
if (breadcrumb) {
breadcrumb.innerHTML = `<a href="../index.html">首页</a> > <a href="product-list.html">商品分类</a> > 搜索结果`;
}
setTimeout(() => {
const filters = getCurrentFilterState();
filters.keyword = currentSearchKeyword;
filters.keywordDisplay = currentSearchDisplay;
applyFilters(filters);
}, 150);
} else if (!categoryParam) {
currentSearchKeyword = '';
currentSearchDisplay = '';
}
// 排序功能
const sortSelect = document.querySelector('.sort-options select');
if (sortSelect) {
sortSelect.addEventListener('change', function() {
const sortBy = this.value;
const productGrid = document.querySelector('.product-grid');
if (!productGrid) return;
const productCards = Array.from(productGrid.querySelectorAll('.product-card:not([style*="display: none"])'));
// 根据排序方式排序
productCards.sort((a, b) => {
switch(sortBy) {
case 'price-asc':
return (parseFloat(a.dataset.price) || 0) - (parseFloat(b.dataset.price) || 0);
case 'price-desc':
return (parseFloat(b.dataset.price) || 0) - (parseFloat(a.dataset.price) || 0);
case 'newest':
return (parseInt(b.dataset.id) || 0) - (parseInt(a.dataset.id) || 0);
case 'popular':
// 模拟受欢迎程度（可以根据出价次数等）
return Math.random() - 0.5;
case 'ending-soon':
// 模拟即将结束（可以根据剩余时间）
return Math.random() - 0.5;
default:
return 0;
}
});
// 重新排列DOM元素
productCards.forEach(card => productGrid.appendChild(card));
});
}
// 分页功能
const pageLinks = document.querySelectorAll('.page-link');
pageLinks.forEach(link => {
link.addEventListener('click', function(e) {
e.preventDefault();
// 移除所有active类
document.querySelectorAll('.page-item').forEach(item => {
item.classList.remove('active');
});
// 给当前点击的分页项添加active类
this.parentElement.classList.add('active');
// 模拟加载新页面数据
alert(`加载第${this.textContent}页数据`);
});
});
}
// 筛选功能
function initFilters() {
const applyBtn = document.querySelector('.apply-btn');
// 分类映射：将HTML中的分类名称映射到商品数据中的分类名称
const categoryMap = {
'图书教材': '图书教材',
'图书文具': '图书教材',
'数码产品': '数码产品',
'服饰鞋包': '服饰鞋包',
'家居用品': '家居用品',
'交通工具': '交通工具',
'运动器材': '运动器材',
'乐器音响': '乐器设备',
'乐器设备': '乐器设备',
'其他物品': '其他物品'
};
// 价格筛选应用按钮
if (applyBtn) {
applyBtn.addEventListener('click', () => {
applyCurrentFilters();
});
}
// 价格输入框回车事件
const priceInputs = document.querySelectorAll('#price-min, #price-max');
priceInputs.forEach(input => {
if (input) {
input.addEventListener('keypress', function(e) {
if (e.key === 'Enter') {
applyCurrentFilters();
}
});
}
});
// 应用当前筛选条件的函数
function applyCurrentFilters() {
// 获取筛选条件
const categoryCheckboxes = document.querySelectorAll('.category-filter input[type="checkbox"]:checked');
const priceMinInput = document.getElementById('price-min');
const priceMaxInput = document.getElementById('price-max');
const priceMin = priceMinInput ? priceMinInput.value : '';
const priceMax = priceMaxInput ? priceMaxInput.value : '';
const statusCheckboxes = document.querySelectorAll('.status-filter input[type="checkbox"]:checked');
const conditionCheckboxes = document.querySelectorAll('.condition-filter input[type="checkbox"]:checked');
// 构建筛选条件对象
const filters = {
categories: Array.from(categoryCheckboxes).map(cb => {
const value = cb.value;
return value === '全部商品' ? '全部商品' : (categoryMap[value] || value);
}),
priceMin: priceMin ? parseFloat(priceMin) : 0,
priceMax: priceMax ? parseFloat(priceMax) : Infinity,
status: Array.from(statusCheckboxes).map(cb => cb.value),
condition: Array.from(conditionCheckboxes).map(cb => cb.value)
};
// 应用筛选条件
applyFilters(filters);
}
// 当选择"全部商品"时，取消选择其他分类
const allCategoriesCheckbox = document.querySelector('.category-filter input[value="全部商品"]');
if (allCategoriesCheckbox) {
allCategoriesCheckbox.addEventListener('change', function() {
if (this.checked) {
// 取消选择其他所有分类
document.querySelectorAll('.category-filter input[type="checkbox"]:not([value="全部商品"])').forEach(cb => {
cb.checked = false;
});
}
});
// 当选择其他分类时，取消选择"全部商品"
document.querySelectorAll('.category-filter input[type="checkbox"]:not([value="全部商品"])').forEach(cb => {
cb.addEventListener('change', function() {
if (this.checked) {
allCategoriesCheckbox.checked = false;
}
});
});
}
}
// 添加分类点击筛选功能（实时筛选）
const categoryCheckboxes = document.querySelectorAll('.category-filter input[type="checkbox"]');
categoryCheckboxes.forEach(checkbox => {
checkbox.addEventListener('change', function() {
// 当选择"全部商品"时，取消选择其他分类
if (this.value === '全部商品' && this.checked) {
categoryCheckboxes.forEach(cb => {
if (cb !== this) cb.checked = false;
});
} else if (this.value !== '全部商品' && this.checked) {
// 当选择其他分类时，取消选择"全部商品"
const allCheckbox = document.querySelector('.category-filter input[value="全部商品"]');
if (allCheckbox) allCheckbox.checked = false;
}
// 延迟执行，确保checkbox状态已更新
setTimeout(applyCurrentFilters, 10);
});
});
// 添加状态和条件筛选的实时更新
const statusCheckboxes = document.querySelectorAll('.status-filter input[type="checkbox"]');
statusCheckboxes.forEach(checkbox => {
checkbox.addEventListener('change', function() {
setTimeout(applyCurrentFilters, 10);
});
});
const conditionCheckboxes = document.querySelectorAll('.condition-filter input[type="checkbox"]');
conditionCheckboxes.forEach(checkbox => {
checkbox.addEventListener('change', function() {
setTimeout(applyCurrentFilters, 10);
});
});
// 渲染商品到指定网格
function resolveImageSrc(src, basePath = '') {
if (!src) return basePath + 'images/商品111.png';
if (typeof src === 'string' && (src.startsWith('data:') || src.startsWith('http'))) {
return src;
}
return basePath + src;
}
function renderProductsToGrid(products, productGrid) {
if (!productGrid || !products.length) return;
// 根据当前页面路径调整图片路径
const currentPath = window.location.pathname;
const imagePathPrefix = currentPath.includes('pages/') ? '../' : '';
// 清空现有商品
productGrid.innerHTML = '';
products.forEach((product, index) => {
// 创建商品卡片元素
const productCard = document.createElement('div');
productCard.className = 'product-card animate-on-scroll animated';
productCard.dataset.delay = `${index * 0.1}`;
// 设置数据属性用于筛选
productCard.dataset.category = product.category;
productCard.dataset.price = product.price;
productCard.dataset.status = product.status;
productCard.dataset.condition = product.condition;
productCard.dataset.id = product.id;
productCard.dataset.title = (product.title || '').toLowerCase();
const sellerName = typeof product.seller === 'object' ? (product.seller.name || '') : (product.seller || '');
productCard.dataset.seller = sellerName.toLowerCase();
// 创建商品卡片内容
productCard.innerHTML = `
<div class="product-image">
<img src="${resolveImageSrc(product.image, imagePathPrefix)}" alt="${product.title}" onerror="this.src='${imagePathPrefix}images/商品111.png'">
<div class="auction-badge">${product.status === 'auction' ? '拍卖中' : '一口价'}</div>
</div>
<div class="product-info">
<h3 class="product-title">${product.title}</h3>
<div class="product-price">
<span class="current-price">¥${product.price.toLocaleString('zh-CN')}</span>
<span class="original-price">¥${product.originalPrice.toLocaleString('zh-CN')}</span>
</div>
<div class="product-meta">
<span class="seller">
<i class="fas fa-user"></i>
<span>${sellerName}</span>
</span>
<span class="time-left">
<i class="fas fa-clock"></i>
<span>${product.timeLeft}</span>
</span>
</div>
</div>
`;
// 添加点击事件，跳转到商品详情页
productCard.addEventListener('click', function() {
window.location.href = `${imagePathPrefix}pages/product-details.html?id=${product.id}`;
});
// 添加到商品网格
productGrid.appendChild(productCard);
});
// 重新初始化倒计时功能
initCountdowns();
}
// 渲染商品列表
function renderProducts(products, selector = '.product-grid') {
const productGrids = document.querySelectorAll(selector);
if (!productGrids.length) return;
productGrids.forEach(productGrid => {
renderProductsToGrid(products, productGrid);
});
}
// 从商品数据生成商品详情数据
function formatCondition(condition) {
const conditionMap = {
'new': '全新',
'like-new': '95成新',
'good': '9成新',
'fair': '8成新',
'used': '7成新及以下'
};
if (conditionMap[condition]) return conditionMap[condition];
if (!condition) return '9成新';
if (!isNaN(parseFloat(condition))) return `${condition}成新`;
return condition;
}
function buildProductImages(product) {
if (Array.isArray(product.images) && product.images.length) {
return product.images;
}
if (product.image) {
if (typeof product.image === 'string' && product.image.endsWith('.png')) {
return [
product.image,
product.image.replace('.png', ' (1).png'),
product.image.replace('.png', ' (2).png'),
product.image.replace('.png', ' (3).png')
];
}
return [product.image];
}
return ['images/商品111.png'];
}
function normalizeSellerInfo(product) {
if (product.seller && typeof product.seller === 'object') {
return {
id: product.seller.id || product.userId || `seller_${product.id}`,
name: product.seller.name || '卖家',
avatar: product.seller.avatar || 'images/头像1.png',
rating: product.seller.rating || 4.5,
transactions: product.seller.transactions || 0
};
}
return {
id: product.userId || `seller_${product.id}`,
name: product.seller || '卖家',
avatar: 'images/头像1.png',
rating: 4.5,
transactions: Math.floor(Math.random() * 100) + 10
};
}
function renderProductDetailsFromProduct(product) {
const images = buildProductImages(product);
const details = {
id: product.id,
title: product.title,
category: product.category || '其他分类',
price: Number(product.price) || 0,
originalPrice: Number(product.originalPrice) || Number(product.price) || 0,
status: product.status === 'auction' ? '拍卖' : '一口价',
condition: formatCondition(product.condition),
images,
bidCount: product.bidCount || Math.floor(Math.random() * 20) + 5,
timeLeft: product.timeLeft || '剩余3天',
endTime: product.endTime || new Date(Date.now() + 2 * 24 * 60 * 60 * 1000).toISOString(),
seller: normalizeSellerInfo(product),
description: product.description || `${product.title}，${formatCondition(product.condition)}，支持校内面交，有意者可以联系我。`,
bidHistory: product.bidHistory || [
{ bidder: "李四", avatar: "images/头像1.png", amount: Number(product.price) || 0, time: new Date().toLocaleString('zh-CN') }
],
reviews: product.reviews || [
{ reviewer: "孙七", avatar: "images/头像1.png", rating: 5, date: new Date().toLocaleDateString('zh-CN'), content: "卖家很诚信，商品和描述一致，推荐！" }
]
};
renderProductDetails(details);
}
// 商品详情页渲染函数
function renderProductDetails(details) {
// 获取当前页面的路径前缀
const isInPagesFolder = window.location.pathname.includes('/pages/');
const basePath = isInPagesFolder ? '../' : '';
const productId = details.id;
const baseReviews = details.reviews || [];
const storedReviews = getStoredReviews(productId);
renderReviewsList([...baseReviews, ...storedReviews], basePath);
// 安全地获取元素并渲染
const productTitleEl = document.querySelector('.product-title');
if (productTitleEl) productTitleEl.textContent = details.title;
const auctionStatusEl = document.querySelector('.auction-status span');
if (auctionStatusEl) auctionStatusEl.textContent = details.status === '拍卖' ? '拍卖中' : '一口价';
const conditionEl = document.querySelector('.condition span');
if (conditionEl) conditionEl.textContent = details.condition;
// 渲染价格信息
const currentPriceEl = document.querySelector('.current-price .price');
if (currentPriceEl) currentPriceEl.textContent = `¥${details.price.toLocaleString()}`;
const originalPriceEl = document.querySelector('.original-price .price');
if (originalPriceEl) originalPriceEl.textContent = `¥${details.originalPrice.toLocaleString()}`;
const bidCountEl = document.querySelector('.bid-count span');
if (bidCountEl) bidCountEl.textContent = `已有${details.bidCount}人出价`;
// 渲染倒计时
const countdownEl = document.querySelector('.countdown');
if (countdownEl && details.timeLeft) {
const timeMatch = details.timeLeft.match(/(\d+)/g);
if (timeMatch && timeMatch.length >= 2) {
const days = timeMatch[0] || '0';
const hours = timeMatch[1] || '0';
const minutes = timeMatch[2] || '0';
const seconds = timeMatch[3] || '0';
countdownEl.innerHTML = `
<div class="time-item">
<span class="number">${days}</span>
<span class="unit">天</span>
</div>
<span class="separator">:</span>
<div class="time-item">
<span class="number">${hours}</span>
<span class="unit">时</span>
</div>
<span class="separator">:</span>
<div class="time-item">
<span class="number">${minutes}</span>
<span class="unit">分</span>
</div>
<span class="separator">:</span>
<div class="time-item">
<span class="number">${seconds}</span>
<span class="unit">秒</span>
</div>
`;
}
}
// 渲染卖家信息
const sellerAvatarEl = document.querySelector('.seller-avatar img');
if (sellerAvatarEl) sellerAvatarEl.src = resolveImageSrc(details.seller.avatar, basePath);
const sellerNameEl = document.querySelector('.seller-name');
if (sellerNameEl) sellerNameEl.textContent = details.seller.name;
const sellerRatingEl = document.querySelector('.seller-rating .rating');
if (sellerRatingEl) sellerRatingEl.textContent = details.seller.rating;
const transactionCountEl = document.querySelector('.seller-rating .transaction-count');
if (transactionCountEl) transactionCountEl.textContent = `${details.seller.transactions}笔交易`;
// 渲染商品描述
const descriptionEl = document.querySelector('.description-content');
if (descriptionEl) descriptionEl.innerHTML = details.description;
// 渲染出价记录
const bidHistoryEl = document.querySelector('.bid-history tbody');
if (bidHistoryEl && details.bidHistory) {
bidHistoryEl.innerHTML = details.bidHistory.map(bid => `
<tr>
<td>
<div class="bidder-info">
<img src="${resolveImageSrc(bid.avatar, basePath)}" alt="出价人头像" class="bidder-avatar" onerror="this.src='${basePath}images/头像1.png'">
<span class="bidder-name">${bid.bidder}</span>
</div>
</td>
<td>¥${bid.amount.toLocaleString()}</td>
<td>${bid.time}</td>
</tr>
`).join('');
}
// 渲染商品图片
if (details.images && details.images.length > 0) {
const mainImageEl = document.querySelector('.gallery-main img');
if (mainImageEl) mainImageEl.src = resolveImageSrc(details.images[0], basePath);
const thumbnailsEl = document.querySelector('.gallery-thumbnails');
if (thumbnailsEl) {
thumbnailsEl.innerHTML = details.images.map((img, index) => `
<div class="thumbnail ${index === 0 ? 'active' : ''}">
<img src="${resolveImageSrc(img, basePath)}" alt="商品图片${index + 1}" onerror="this.src='${resolveImageSrc(details.images[0], basePath)}'">
</div>
`).join('');
}
}
// 重新初始化倒计时功能和图片切换
initCountdowns();
initProductDetails();
// 根据商品状态显示/隐藏按钮区域
const otherProductId = getUrlParam('id');
let currentProduct = null;
if (otherProductId) {
currentProduct = findProductById(otherProductId);
}
const buySection = document.getElementById('buy-section');
const bidSection = document.getElementById('bid-section');
if (currentProduct) {
if (currentProduct.status === 'buy-now') {
// 一口价商品，显示购买区域
if (buySection) buySection.style.display = 'block';
if (bidSection) bidSection.style.display = 'none';
} else {
// 拍卖商品，显示出价区域
if (buySection) buySection.style.display = 'none';
if (bidSection) bidSection.style.display = 'block';
}
} else {
// 如果没有找到商品，根据详情数据判断
if (details.status === '一口价' || details.status === 'buy-now') {
if (buySection) buySection.style.display = 'block';
if (bidSection) bidSection.style.display = 'none';
} else {
if (buySection) buySection.style.display = 'none';
if (bidSection) bidSection.style.display = 'block';
}
}
// 初始化联系卖家和查看店铺按钮
initSellerContactButtons(details);
initReviewForm(productId, basePath, baseReviews);
}
function generateStarIcons(rating = 0) {
const fullStars = Math.floor(rating);
let icons = '';
for (let i = 0; i < 5; i++) {
icons += i < fullStars ? '<i class="fas fa-star"></i>' : '<i class="far fa-star"></i>';
}
return icons;
}
function renderReviewsList(reviews, basePath) {
const reviewsEl = document.querySelector('.reviews-list');
if (!reviewsEl) return;
if (!reviews || !reviews.length) {
reviewsEl.innerHTML = '<p style="color: var(--text-muted);">还没有评论</p>';
return;
}
reviewsEl.innerHTML = reviews.map(review => `
<div class="review-item">
<div class="review-header">
<div class="reviewer-info">
<img src="${resolveImageSrc(review.avatar || 'images/头像1.png', basePath)}" alt="评论人头像" class="reviewer-avatar" onerror="this.src='${basePath}images/头像1.png'">
<div class="reviewer-details">
<span class="reviewer-name">${review.reviewer}</span>
<div class="review-date">${review.date}</div>
</div>
</div>
<div class="review-rating">
${generateStarIcons(review.rating)}
</div>
</div>
<div class="review-content">
${review.content}
</div>
</div>
`).join('');
}
function getStoredReviews(productId) {
const store = localStorage.getItem('productReviews');
if (!store) return [];
const parsed = JSON.parse(store);
return parsed[productId] || [];
}
function saveProductReview(productId, review) {
const store = localStorage.getItem('productReviews');
const parsed = store ? JSON.parse(store) : {};
if (!parsed[productId]) {
parsed[productId] = [];
}
parsed[productId].push(review);
localStorage.setItem('productReviews', JSON.stringify(parsed));
}
function initReviewForm(productId, basePath, baseReviews = []) {
const reviewForm = document.querySelector('.add-review form');
const ratingStars = document.querySelectorAll('.rating-input i');
const ratingInput = document.getElementById('review-rating');
const reviewTextarea = reviewForm ? reviewForm.querySelector('textarea') : null;
if (!reviewForm || !ratingInput || !reviewTextarea) return;
let selectedRating = parseInt(ratingInput.value, 10) || 0;
const updateStarClasses = value => {
ratingStars.forEach((star, idx) => {
if (idx < value) {
star.classList.add('fas', 'active');
star.classList.remove('far');
} else {
star.classList.add('far');
star.classList.remove('fas', 'active');
}
});
};
const setRating = value => {
selectedRating = value;
ratingInput.value = value;
updateStarClasses(value);
};
ratingStars.forEach((star, index) => {
const value = index + 1;
star.addEventListener('mouseenter', () => updateStarClasses(value));
star.addEventListener('mouseleave', () => updateStarClasses(selectedRating));
star.addEventListener('click', () => setRating(value));
});
updateStarClasses(selectedRating);
reviewForm.addEventListener('submit', function(e) {
e.preventDefault();
if (!requireLogin(window.location.href)) return;
const currentUser = UserManager.getCurrentUser();
if (!currentUser) {
alert('请先登录');
return;
}
const ratingValue = parseInt(ratingInput.value, 10) || 0;
const content = reviewTextarea.value.trim();
if (!ratingValue) {
alert('请选择评分');
return;
}
if (!content) {
alert('请输入评论内容');
return;
}
const newReview = {
reviewer: currentUser.username || currentUser.name || '用户',
avatar: currentUser.avatar || 'images/头像1.png',
rating: ratingValue,
date: new Date().toLocaleDateString('zh-CN'),
content
};
saveProductReview(productId, newReview);
const combinedReviews = [...baseReviews, ...getStoredReviews(productId)];
renderReviewsList(combinedReviews, basePath);
reviewTextarea.value = '';
setRating(0);
if (typeof showMessage === 'function') {
showMessage('评论提交成功！', 'success');
} else {
alert('评论提交成功！');
}
});
}
// 初始化联系卖家和查看店铺按钮
function initSellerContactButtons(productDetails) {
const contactBtn = document.getElementById('contact-seller-btn');
const viewShopBtn = document.getElementById('view-shop-btn');
if (contactBtn) {
contactBtn.addEventListener('click', function() {
openChatModal(productDetails.seller);
});
}
if (viewShopBtn) {
viewShopBtn.addEventListener('click', function() {
const sellerId = productDetails.seller.id || productDetails.seller.name;
const currentPath = window.location.pathname;
const isInPagesFolder = currentPath.includes('pages/');
const basePath = isInPagesFolder ? '' : 'pages/';
window.location.href = `${basePath}seller-shop.html?seller=${encodeURIComponent(sellerId)}`;
});
}
}
// 联系卖家聊天功能
function initSellerContact() {
// 联系卖家按钮（商品详情页）
const contactBtn = document.getElementById('contact-seller-btn');
if (contactBtn) {
contactBtn.addEventListener('click', function() {
const productId = getUrlParam('id');
let currentProduct = null;
if (productId) {
currentProduct = findProductById(productId);
}
if (currentProduct && currentProduct.seller) {
openChatModal(currentProduct.seller);
} else if (mockProductDetails && mockProductDetails.seller) {
openChatModal(mockProductDetails.seller);
}
});
}
// 关闭聊天窗口
const closeChatBtn = document.getElementById('close-chat-btn');
if (closeChatBtn) {
closeChatBtn.addEventListener('click', function() {
closeChatModal();
});
}
// 发送消息
const sendBtn = document.getElementById('send-message-btn');
const chatInput = document.getElementById('chat-input');
if (sendBtn && chatInput) {
sendBtn.addEventListener('click', function() {
sendChatMessage();
});
chatInput.addEventListener('keypress', function(e) {
if (e.key === 'Enter') {
sendChatMessage();
}
});
}
// 快捷消息按钮
const quickMsgBtns = document.querySelectorAll('.quick-msg-btn');
quickMsgBtns.forEach(btn => {
btn.addEventListener('click', function() {
const msg = this.getAttribute('data-msg');
if (chatInput) {
chatInput.value = msg;
sendChatMessage();
}
});
});
}
// 打开聊天窗口
function openChatModal(seller) {
const chatModal = document.getElementById('chat-modal');
const sellerAvatar = document.getElementById('chat-seller-avatar');
const sellerName = document.getElementById('chat-seller-name');
const chatMessages = document.getElementById('chat-messages');
if (!chatModal) return;
// 设置卖家信息
if (sellerAvatar && seller.avatar) {
const isInPagesFolder = window.location.pathname.includes('pages/');
const basePath = isInPagesFolder ? '../' : '';
sellerAvatar.src = basePath + seller.avatar;
sellerAvatar.onerror = function() {
this.src = basePath + 'images/头像1.png';
};
}
if (sellerName) {
sellerName.textContent = seller.name || '卖家';
}
// 初始化聊天消息（显示欢迎消息）
if (chatMessages) {
chatMessages.innerHTML = `
<div class="chat-message received">
<img src="${sellerAvatar ? sellerAvatar.src : '../images/头像1.png'}" alt="卖家头像" class="chat-message-avatar">
<div class="chat-message-content">
<div class="chat-message-bubble">您好！有什么可以帮助您的吗？</div>
<div class="chat-message-time">${getCurrentTime()}</div>
</div>
</div>
`;
chatMessages.scrollTop = chatMessages.scrollHeight;
}
// 显示聊天窗口
chatModal.classList.add('active');
// 聚焦输入框
const chatInput = document.getElementById('chat-input');
if (chatInput) {
setTimeout(() => chatInput.focus(), 100);
}
}
// 关闭聊天窗口
function closeChatModal() {
const chatModal = document.getElementById('chat-modal');
if (chatModal) {
chatModal.classList.remove('active');
}
}
// 发送聊天消息
function sendChatMessage() {
const chatInput = document.getElementById('chat-input');
const chatMessages = document.getElementById('chat-messages');
const sendBtn = document.getElementById('send-message-btn');
if (!chatInput || !chatMessages) return;
const message = chatInput.value.trim();
if (!message) return;
// 禁用发送按钮
if (sendBtn) sendBtn.disabled = true;
// 添加用户消息
const userMessage = document.createElement('div');
userMessage.className = 'chat-message sent';
userMessage.innerHTML = `
<img src="../images/头像1.png" alt="我的头像" class="chat-message-avatar" onerror="this.src='../images/头像1.png'">
<div class="chat-message-content">
<div class="chat-message-bubble">${escapeHtml(message)}</div>
<div class="chat-message-time">${getCurrentTime()}</div>
</div>
`;
chatMessages.appendChild(userMessage);
chatMessages.scrollTop = chatMessages.scrollHeight;
// 清空输入框
chatInput.value = '';
// 模拟卖家回复（延迟1-2秒）
setTimeout(() => {
const sellerAvatar = document.getElementById('chat-seller-avatar');
const replies = [
'好的，我看到了。',
'没问题，可以商量。',
'这个商品还在的。',
'价格可以适当优惠一些。',
'可以面交，也可以邮寄。',
'商品成色很好，您可以放心。'
];
const randomReply = replies[Math.floor(Math.random() * replies.length)];
const sellerMessage = document.createElement('div');
sellerMessage.className = 'chat-message received';
sellerMessage.innerHTML = `
<img src="${sellerAvatar ? sellerAvatar.src : '../images/头像1.png'}" alt="卖家头像" class="chat-message-avatar">
<div class="chat-message-content">
<div class="chat-message-bubble">${randomReply}</div>
<div class="chat-message-time">${getCurrentTime()}</div>
</div>
`;
chatMessages.appendChild(sellerMessage);
chatMessages.scrollTop = chatMessages.scrollHeight;
// 重新启用发送按钮
if (sendBtn) sendBtn.disabled = false;
}, 1000 + Math.random() * 1000);
// 重新启用发送按钮（防止网络延迟）
setTimeout(() => {
if (sendBtn) sendBtn.disabled = false;
}, 3000);
}
// 获取当前时间
function getCurrentTime() {
const now = new Date();
const hours = String(now.getHours()).padStart(2, '0');
const minutes = String(now.getMinutes()).padStart(2, '0');
return `${hours}:${minutes}`;
}
// HTML转义
function escapeHtml(text) {
const div = document.createElement('div');
div.textContent = text;
return div.innerHTML;
}
// 初始化卖家店铺页面
function initSellerShop() {
// 检查是否在卖家店铺页面
if (!window.location.pathname.includes('seller-shop.html')) return;
const sellerId = getUrlParam('seller');
if (!sellerId) {
// 如果没有seller参数，显示错误信息
document.getElementById('seller-products-grid').innerHTML =
'<div class="empty-state"><i class="fas fa-exclamation-triangle"></i><p>未找到卖家信息</p></div>';
return;
}
// 根据sellerId获取卖家信息（这里使用模拟数据）
const seller = getSellerById(sellerId);
if (!seller) {
document.getElementById('seller-products-grid').innerHTML =
'<div class="empty-state"><i class="fas fa-exclamation-triangle"></i><p>未找到卖家信息</p></div>';
return;
}
// 渲染卖家信息
renderSellerShop(seller);
// 联系卖家按钮（店铺页面）
const contactBtn = document.getElementById('contact-seller-shop-btn');
if (contactBtn) {
contactBtn.addEventListener('click', function() {
openChatModal(seller);
});
}
// 排序功能
const sortSelect = document.getElementById('seller-products-sort');
if (sortSelect) {
sortSelect.addEventListener('change', function() {
renderSellerProducts(seller.products || [], this.value);
});
}
}
// 根据ID获取卖家信息
function getSellerById(sellerId) {
// 从商品数据中查找卖家
const product = mockProducts.find(p =>
(p.seller && (p.seller.id === sellerId || p.seller.name === sellerId))
);
if (product && product.seller) {
// 获取该卖家的所有商品
const sellerProducts = mockProducts.filter(p =>
p.seller && (p.seller.id === product.seller.id || p.seller.name === product.seller.name)
);
return {
...product.seller,
products: sellerProducts,
soldCount: Math.floor(Math.random() * 50) + 20
};
}
// 如果没有找到，使用默认卖家数据
return {
id: sellerId,
name: sellerId,
avatar: 'images/头像1.png',
rating: 4.5,
transactions: 128,
products: mockProducts.slice(0, 6),
soldCount: 28
};
}
// 渲染卖家店铺页面
function renderSellerShop(seller) {
const isInPagesFolder = window.location.pathname.includes('pages/');
const basePath = isInPagesFolder ? '../' : '';
// 渲染卖家头像
const avatarImg = document.getElementById('seller-shop-avatar-img');
if (avatarImg) {
avatarImg.src = basePath + (seller.avatar || 'images/头像1.png');
avatarImg.onerror = function() {
this.src = basePath + 'images/头像1.png';
};
}
// 渲染卖家名称
const shopName = document.getElementById('seller-shop-name');
const shopTitle = document.getElementById('seller-shop-title');
if (shopName) shopName.textContent = seller.name + '的店铺';
if (shopTitle) shopTitle.textContent = seller.name + '的店铺';
// 渲染评分
const rating = seller.rating || 4.5;
const starsEl = document.getElementById('seller-shop-stars');
if (starsEl) {
const fullStars = Math.floor(rating);
const hasHalfStar = rating % 1 >= 0.5;
starsEl.innerHTML = '';
for (let i = 0; i < 5; i++) {
if (i < fullStars) {
starsEl.innerHTML += '<i class="fas fa-star"></i>';
} else if (i === fullStars && hasHalfStar) {
starsEl.innerHTML += '<i class="fas fa-star-half-alt"></i>';
} else {
starsEl.innerHTML += '<i class="far fa-star"></i>';
}
}
}
const ratingEl = document.getElementById('seller-shop-rating');
if (ratingEl) ratingEl.textContent = rating.toFixed(1);
const transactionsEl = document.getElementById('seller-shop-transactions');
if (transactionsEl) transactionsEl.textContent = `${seller.transactions || 128}笔交易`;
// 渲染统计数据
const productsCount = document.getElementById('seller-products-count');
const soldCount = document.getElementById('seller-sold-count');
if (productsCount) productsCount.textContent = (seller.products || []).length;
if (soldCount) soldCount.textContent = seller.soldCount || 0;
// 渲染商品列表
renderSellerProducts(seller.products || [], 'newest');
}
// 渲染卖家商品列表
function renderSellerProducts(products, sortBy = 'newest') {
const grid = document.getElementById('seller-products-grid');
const emptyState = document.getElementById('seller-products-empty');
if (!grid) return;
if (products.length === 0) {
grid.style.display = 'none';
if (emptyState) emptyState.style.display = 'block';
return;
}
grid.style.display = 'grid';
if (emptyState) emptyState.style.display = 'none';
// 排序
let sortedProducts = [...products];
switch (sortBy) {
case 'price-asc':
sortedProducts.sort((a, b) => a.price - b.price);
break;
case 'price-desc':
sortedProducts.sort((a, b) => b.price - a.price);
break;
case 'popular':
sortedProducts.sort((a, b) => (b.bidCount || 0) - (a.bidCount || 0));
break;
default: // newest
sortedProducts.sort((a, b) => b.id - a.id);
}
const isInPagesFolder = window.location.pathname.includes('pages/');
const basePath = isInPagesFolder ? '../' : '';
grid.innerHTML = sortedProducts.map(product => {
const productUrl = `${basePath}product-details.html?id=${product.id}`;
const imageSrc = resolveImageSrc(product.image, basePath);
return `
<div class="product-card" onclick="window.location.href='${productUrl}'">
<div class="product-image">
<img src="${imageSrc}" alt="${product.title}" onerror="this.src='${basePath}images/生成图片.png'">
${product.status === 'auction' ? '<span class="auction-badge">拍卖中</span>' : ''}
</div>
<div class="product-info">
<div class="product-title">${product.title}</div>
<div class="product-price">
<span class="current-price">¥${product.price.toLocaleString()}</span>
${product.originalPrice ? `<span class="original-price">¥${product.originalPrice.toLocaleString()}</span>` : ''}
</div>
<div class="product-meta">
<span class="time-left">
<i class="fas fa-clock"></i>
${product.timeLeft || '剩余3天'}
</span>
<span class="seller-info">
<i class="fas fa-gavel"></i>
${product.bidCount || 0}人出价
</span>
</div>
</div>
</div>
`;
}).join('');
}
// 个人中心页面渲染函数
function renderUserCenter(user) {
if (!user) {
// 如果未登录，跳转到登录页
const currentPath = window.location.pathname;
const isInPagesFolder = currentPath.includes('pages/');
const basePath = isInPagesFolder ? '' : 'pages/';
window.location.href = basePath + 'login.html?return=' + encodeURIComponent('user-center.html');
return;
}
// 获取当前页面的路径前缀
const isInPagesFolder = window.location.pathname.includes('/pages/');
const basePath = isInPagesFolder ? '../' : '';
// 渲染用户基本信息
document.querySelectorAll('.user-avatar img').forEach(img => {
img.src = basePath + (user.avatar || 'images/头像1.png');
img.onerror = function() {
this.src = basePath + 'images/头像1.png';
};
});
const userNameEl = document.querySelector('.user-info h3');
if (userNameEl) userNameEl.textContent = user.username || user.name || '用户';
const studentIdEl = document.querySelector('.student-id');
if (studentIdEl) studentIdEl.textContent = `学号：${user.studentId || '未设置'}`;
const welcomeEl = document.querySelector('.user-center-header h2 + p');
if (welcomeEl) welcomeEl.textContent = `欢迎回来，${user.username || user.name || '用户'}！`;
const ratingEl = document.querySelector('.user-rating span');
if (ratingEl) {
const rating = user.rating || 5.0;
ratingEl.innerHTML = `<i class="fas fa-star"></i> ${rating.toFixed(1)}`;
}
// 渲染用户统计数据
const statItems = document.querySelectorAll('.user-stats .stat-item');
const stats = user.stats || {
在售商品: 0,
已售商品: 0,
已购商品: 0,
交易成功: 0
};
// 确保统计数据的顺序和标签与页面一致
const statLabels = ['在售商品', '已售商品', '已购商品', '交易成功'];
statItems.forEach((item, index) => {
const statNumber = item.querySelector('.stat-number');
if (statNumber) {
statNumber.textContent = stats[statLabels[index]] || 0;
}
});
// 渲染最近活动（从localStorage获取或使用默认）
const activityList = document.querySelector('.activity-list');
if (activityList) {
const activities = user.activities || [
{ icon: "fas fa-shopping-cart", title: "您还没有活动记录", time: new Date().toLocaleDateString('zh-CN') }
];
activityList.innerHTML = activities.map(activity => `
<div class="activity-item">
<div class="activity-icon">
<i class="${activity.icon}"></i>
</div>
<div class="activity-content">
<div class="activity-title">${activity.title}</div>
<div class="activity-time">${activity.time}</div>
</div>
</div>
`).join('');
}
// 渲染在售商品（从localStorage获取用户发布的商品）
const productGrid = document.querySelector('.user-products .product-grid');
if (productGrid) {
const userProducts = getUserProducts(user.id) || [];
if (userProducts.length > 0) {
productGrid.innerHTML = userProducts.slice(0, 3).map(product => `
<div class="product-card" onclick="window.location.href='${basePath}product-details.html?id=${product.id}'">
<div class="product-image">
<img src="${resolveImageSrc(product.image, basePath)}" alt="${product.title}">
<div class="auction-badge">${product.status === 'auction' ? '拍卖中' : '一口价'}</div>
</div>
<div class="product-info">
<h3 class="product-title">${product.title}</h3>
<div class="product-price">
<span class="current-price">¥${product.price.toLocaleString()}</span>
</div>
<div class="product-meta">
<span class="time-left">
<i class="fas fa-clock"></i>
<span>${product.timeLeft || '剩余3天'}</span>
</span>
</div>
</div>
</div>
`).join('');
} else {
productGrid.innerHTML = '<p style="text-align: center; color: #999; padding: 20px;">暂无在售商品</p>';
}
}
}
// 获取用户发布的商品
function getUserProducts(userId) {
const products = localStorage.getItem('userProducts');
if (!products) return [];
const allProducts = JSON.parse(products);
// 支持通过userId或username匹配
return allProducts.filter(p => {
if (p.userId === userId) return true;
// 如果没有userId，尝试通过seller字段匹配
const currentUser = UserManager.getCurrentUser();
if (currentUser && (p.seller === currentUser.username || p.seller === currentUser.name)) {
return true;
}
return false;
});
}
// 保存用户发布的商品
function saveUserProduct(product, userId) {
const products = localStorage.getItem('userProducts');
const allProducts = products ? JSON.parse(products) : [];
// 确保商品有唯一ID
const productId = product.id || Date.now();
const newProduct = {
...product,
id: productId,
userId: userId,
seller: product.seller || userId, // 确保seller字段存在，用于匹配
publishTime: new Date().toISOString()
};
// 检查是否已存在相同ID的商品，如果存在则更新，否则添加
const existingIndex = allProducts.findIndex(p => p.id === productId);
if (existingIndex >= 0) {
allProducts[existingIndex] = newProduct;
} else {
allProducts.push(newProduct);
}
localStorage.setItem('userProducts', JSON.stringify(allProducts));
return newProduct;
}
function getAllStoredProducts() {
const products = localStorage.getItem('userProducts');
return products ? JSON.parse(products) : [];
}
function findProductById(productId) {
const idNumber = parseInt(productId, 10);
let product = mockProducts.find(p => p.id === idNumber);
if (product) return product;
const storedProducts = getAllStoredProducts();
return storedProducts.find(p => {
if (!isNaN(idNumber)) return p.id === idNumber;
return String(p.id) === String(productId);
});
}
// 应用筛选条件
function applyFilters(filters) {
const productCards = document.querySelectorAll('.product-card');
let visibleCount = 0;
// 检查是否选择了"全部商品"或没有选择任何分类
const hasAllCategories = filters.categories.includes('全部商品') || filters.categories.length === 0;
// 状态映射：将筛选器中的状态值映射到商品数据中的状态值
const statusMap = {
'auction': 'auction',
'buy-now': 'buy-now',
'buy-it-now': 'buy-now'
};
// 分类映射：将筛选器中的分类名称映射到商品数据中的分类名称
const categoryMap = {
'图书教材': '图书教材',
'图书文具': '图书教材',
'数码产品': '数码产品',
'服饰鞋包': '服饰鞋包',
'家居用品': '家居用品',
'交通工具': '交通工具',
'运动器材': '运动器材',
'乐器音响': '乐器设备',
'乐器设备': '乐器设备',
'其他物品': '其他物品'
};
productCards.forEach(card => {
const price = parseFloat(card.dataset.price) || 0;
const status = card.dataset.status;
const condition = card.dataset.condition;
const category = card.dataset.category;
const title = card.dataset.title || '';
const seller = card.dataset.seller || '';
// 检查是否满足所有筛选条件
const priceMatch = price >= filters.priceMin && price <= filters.priceMax;
// 状态匹配：如果没有选择状态，显示所有；否则检查是否匹配
let statusMatch = true;
if (filters.status.length > 0) {
statusMatch = filters.status.some(s => {
const mappedStatus = statusMap[s] || s;
return mappedStatus === status;
});
}
// 条件匹配：如果没有选择条件，显示所有；否则检查是否匹配
const conditionMatch = filters.condition.length === 0 || filters.condition.includes(condition);
// 分类匹配：如果选择了"全部商品"或没有选择分类，显示所有；否则检查是否匹配
let categoryMatch = hasAllCategories;
if (!categoryMatch && filters.categories.length > 0) {
categoryMatch = filters.categories.some(cat => {
const mappedCat = categoryMap[cat] || cat;
return mappedCat === category || cat === category;
});
}
// 关键词搜索匹配：如果有关键词，检查商品标题和卖家名称是否包含关键词
let keywordMatch = true;
if (filters.keyword && filters.keyword.trim()) {
const keyword = filters.keyword.toLowerCase().trim();
keywordMatch = title.includes(keyword) || seller.includes(keyword) ||
category.toLowerCase().includes(keyword);
}
// 显示或隐藏商品卡片
if (priceMatch && statusMatch && conditionMatch && categoryMatch && keywordMatch) {
card.style.display = 'block';
visibleCount++;
} else {
card.style.display = 'none';
}
});
// 如果没有匹配的商品，显示提示信息
let noResults = document.getElementById('no-results');
if (visibleCount === 0) {
let message = '没有找到匹配的商品';
if (filters.keywordDisplay) {
message = `没有找到与"${filters.keywordDisplay}"相关的商品`;
}
if (!noResults) {
noResults = document.createElement('div');
noResults.id = 'no-results';
noResults.innerHTML = `
<div style="text-align: center; padding: 40px;">
<i class="fas fa-search" style="font-size: 48px; color: #ccc; margin-bottom: 15px;"></i>
<p style="font-size: 18px; color: #666; margin-bottom: 10px;">${message}</p>
<p style="font-size: 14px; color: #999;">建议尝试其他关键词或调整筛选条件</p>
</div>
`;
noResults.style.cssText = 'grid-column: 1 / -1;';
const productGrid = document.querySelector('.product-grid');
if (productGrid) {
productGrid.appendChild(noResults);
}
} else {
noResults.innerHTML = `
<div style="text-align: center; padding: 40px;">
<i class="fas fa-search" style="font-size: 48px; color: #ccc; margin-bottom: 15px;"></i>
<p style="font-size: 18px; color: #666; margin-bottom: 10px;">${message}</p>
<p style="font-size: 14px; color: #999;">建议尝试其他关键词或调整筛选条件</p>
</div>
`;
noResults.style.display = 'block';
}
} else {
if (noResults) {
noResults.style.display = 'none';
}
}
}
// 辅助函数
// 获取URL参数
function getUrlParam(name) {
const url = new URL(window.location.href);
return url.searchParams.get(name);
}
// 设置URL参数
function setUrlParam(name, value) {
const url = new URL(window.location.href);
url.searchParams.set(name, value);
window.history.pushState({}, '', url);
}
// 移除URL参数
function removeUrlParam(name) {
const url = new URL(window.location.href);
url.searchParams.delete(name);
window.history.pushState({}, '', url);
}
// 平滑滚动到顶部
function scrollToTop() {
window.scrollTo({
top: 0,
behavior: 'smooth'
});
}
// 显示加载动画
function showLoading() {
// 可以在这里实现加载动画
console.log('显示加载动画');
}
// 隐藏加载动画
function hideLoading() {
// 可以在这里实现隐藏加载动画
console.log('隐藏加载动画');
}
// 显示提示消息
function showMessage(message, type = 'info') {
// 可以在这里实现提示消息功能
alert(message);
}
// 初始化购物车页面
function initCartPage() {
const currentPath = window.location.pathname;
if (!currentPath.includes('cart.html')) return;
renderCartItems();
// 全选功能
const selectAll = document.getElementById('select-all');
if (selectAll) {
selectAll.addEventListener('change', function() {
const checkboxes = document.querySelectorAll('.cart-item input[type="checkbox"]');
checkboxes.forEach(cb => cb.checked = this.checked);
updateCartSummary();
});
}
// 去结算按钮
const checkoutBtn = document.getElementById('checkout-btn');
if (checkoutBtn) {
checkoutBtn.addEventListener('click', function() {
const selectedItems = getSelectedCartItems();
if (selectedItems.length === 0) {
alert('请选择要结算的商品');
return;
}
localStorage.setItem('tempOrder', JSON.stringify(selectedItems));
window.location.href = 'checkout.html';
});
}
}
// 渲染购物车商品
function renderCartItems() {
const cartItems = CartManager.getCart();
const cartItemsContainer = document.getElementById('cart-items');
const cartEmpty = document.getElementById('cart-empty');
if (!cartItemsContainer) return;
if (cartItems.length === 0) {
cartItemsContainer.style.display = 'none';
if (cartEmpty) cartEmpty.style.display = 'block';
updateCartSummary();
return;
}
cartItemsContainer.style.display = 'block';
if (cartEmpty) cartEmpty.style.display = 'none';
const currentPath = window.location.pathname;
const imagePathPrefix = currentPath.includes('pages/') ? '../' : '';
cartItemsContainer.innerHTML = cartItems.map(item => `
<div class="cart-item" data-id="${item.id}">
<label class="item-checkbox">
<input type="checkbox" class="item-select" checked>
</label>
<div class="item-info">
<img src="${imagePathPrefix}${item.image}" alt="${item.title}" onerror="this.src='${imagePathPrefix}images/商品111.png'">
<div class="item-details">
<h4>${item.title}</h4>
<p class="item-seller">卖家：${item.seller}</p>
<p class="item-status">${item.status === 'buy-now' ? '一口价' : '拍卖中'}</p>
</div>
</div>
<div class="item-price">¥${item.price.toLocaleString('zh-CN')}</div>
<div class="item-quantity">
<button class="quantity-btn minus" data-id="${item.id}">-</button>
<input type="number" class="quantity-input" value="${item.quantity}" min="1" data-id="${item.id}">
<button class="quantity-btn plus" data-id="${item.id}">+</button>
</div>
<div class="item-subtotal">¥${(item.price * item.quantity).toLocaleString('zh-CN')}</div>
<div class="item-actions">
<button class="btn-delete" data-id="${item.id}">
<i class="fas fa-trash"></i>
</button>
</div>
</div>
`).join('');
// 绑定事件
document.querySelectorAll('.quantity-btn.plus').forEach(btn => {
btn.addEventListener('click', function() {
const id = parseInt(this.dataset.id);
const cart = CartManager.getCart();
const item = cart.find(i => i.id === id);
if (item) {
CartManager.updateQuantity(id, item.quantity + 1);
renderCartItems();
}
});
});
document.querySelectorAll('.quantity-btn.minus').forEach(btn => {
btn.addEventListener('click', function() {
const id = parseInt(this.dataset.id);
const cart = CartManager.getCart();
const item = cart.find(i => i.id === id);
if (item && item.quantity > 1) {
CartManager.updateQuantity(id, item.quantity - 1);
renderCartItems();
}
});
});
document.querySelectorAll('.quantity-input').forEach(input => {
input.addEventListener('change', function() {
const id = parseInt(this.dataset.id);
const quantity = parseInt(this.value) || 1;
CartManager.updateQuantity(id, quantity);
renderCartItems();
});
});
document.querySelectorAll('.btn-delete').forEach(btn => {
btn.addEventListener('click', function() {
const id = parseInt(this.dataset.id);
if (confirm('确定要删除这个商品吗？')) {
CartManager.removeItem(id);
renderCartItems();
}
});
});
document.querySelectorAll('.item-select').forEach(checkbox => {
checkbox.addEventListener('change', function() {
updateCartSummary();
});
});
updateCartSummary();
}
// 获取选中的购物车商品
function getSelectedCartItems() {
const cart = CartManager.getCart();
const selectedCheckboxes = document.querySelectorAll('.item-select:checked');
const selectedIds = Array.from(selectedCheckboxes).map(cb => {
const item = cb.closest('.cart-item');
return item ? parseInt(item.dataset.id) : null;
}).filter(id => id !== null);
return cart.filter(item => selectedIds.includes(item.id));
}
// 更新购物车摘要
function updateCartSummary() {
const selectedItems = getSelectedCartItems();
const totalQuantity = selectedItems.reduce((sum, item) => sum + item.quantity, 0);
const totalPrice = selectedItems.reduce((sum, item) => sum + (item.price * item.quantity), 0);
const totalQuantityEl = document.getElementById('total-quantity');
const totalPriceEl = document.getElementById('total-price');
const finalTotalEl = document.getElementById('final-total');
const checkoutBtn = document.getElementById('checkout-btn');
if (totalQuantityEl) totalQuantityEl.textContent = totalQuantity;
if (totalPriceEl) totalPriceEl.textContent = '¥' + totalPrice.toLocaleString('zh-CN', {minimumFractionDigits: 2});
if (finalTotalEl) finalTotalEl.textContent = '¥' + totalPrice.toLocaleString('zh-CN', {minimumFractionDigits: 2});
if (checkoutBtn) checkoutBtn.disabled = selectedItems.length === 0;
}
// 初始化支付页面
function initCheckoutPage() {
const currentPath = window.location.pathname;
if (!currentPath.includes('checkout.html')) return;
renderCheckoutProducts();
updateOrderSummary();
// 配送方式切换
const deliveryMethods = document.querySelectorAll('input[name="delivery-method"]');
deliveryMethods.forEach(radio => {
radio.addEventListener('change', function() {
updateOrderSummary();
});
});
// 提交订单
const submitOrderBtn = document.getElementById('submit-order-btn');
if (submitOrderBtn) {
submitOrderBtn.addEventListener('click', function() {
handleSubmitOrder();
});
}
}
// 渲染支付页面商品
function renderCheckoutProducts() {
const tempOrder = localStorage.getItem('tempOrder');
if (!tempOrder) {
alert('订单信息不存在，返回购物车');
window.location.href = 'cart.html';
return;
}
const orderItems = JSON.parse(tempOrder);
const checkoutProducts = document.getElementById('checkout-products');
if (!checkoutProducts) return;
const currentPath = window.location.pathname;
const imagePathPrefix = currentPath.includes('pages/') ? '../' : '';
checkoutProducts.innerHTML = orderItems.map(item => `
<div class="checkout-product-item">
<img src="${imagePathPrefix}${item.image}" alt="${item.title}" onerror="this.src='${imagePathPrefix}images/商品111.png'">
<div class="product-info">
<h4>${item.title}</h4>
<p>卖家：${item.seller}</p>
</div>
<div class="product-price">¥${item.price.toLocaleString('zh-CN')}</div>
<div class="product-quantity">x${item.quantity}</div>
<div class="product-subtotal">¥${(item.price * item.quantity).toLocaleString('zh-CN')}</div>
</div>
`).join('');
}
// 更新订单摘要
function updateOrderSummary() {
const tempOrder = localStorage.getItem('tempOrder');
if (!tempOrder) return;
const orderItems = JSON.parse(tempOrder);
const totalPrice = orderItems.reduce((sum, item) => sum + (item.price * item.quantity), 0);
const deliveryMethod = document.querySelector('input[name="delivery-method"]:checked');
const deliveryFee = deliveryMethod && deliveryMethod.value === 'delivery' ? 5.00 : 0.00;
const finalTotal = totalPrice + deliveryFee;
const orderTotalPriceEl = document.getElementById('order-total-price');
const orderDeliveryFeeEl = document.getElementById('order-delivery-fee');
const orderFinalTotalEl = document.getElementById('order-final-total');
if (orderTotalPriceEl) orderTotalPriceEl.textContent = '¥' + totalPrice.toLocaleString('zh-CN', {minimumFractionDigits: 2});
if (orderDeliveryFeeEl) orderDeliveryFeeEl.textContent = '¥' + deliveryFee.toLocaleString('zh-CN', {minimumFractionDigits: 2});
if (orderFinalTotalEl) orderFinalTotalEl.textContent = '¥' + finalTotal.toLocaleString('zh-CN', {minimumFractionDigits: 2});
}
// 处理提交订单
function handleSubmitOrder() {
const addressForm = document.getElementById('address-form');
if (!addressForm) return;
// 验证表单
if (!addressForm.checkValidity()) {
addressForm.reportValidity();
return;
}
const formData = new FormData(addressForm);
const deliveryMethod = document.querySelector('input[name="delivery-method"]:checked');
const tempOrder = localStorage.getItem('tempOrder');
if (!tempOrder) {
alert('订单信息不存在');
return;
}
const orderData = {
items: JSON.parse(tempOrder),
address: {
receiverName: formData.get('receiver-name'),
receiverPhone: formData.get('receiver-phone'),
campus: formData.get('receiver-campus'),
building: formData.get('receiver-building'),
detail: formData.get('receiver-detail'),
notes: formData.get('receiver-notes')
},
deliveryMethod: deliveryMethod ? deliveryMethod.value : 'pickup',
orderTime: new Date().toISOString(),
orderId: 'ORD' + Date.now()
};
// 模拟提交订单成功
alert('订单提交成功！订单号：' + orderData.orderId);
// 从购物车中移除已购买的商品
const orderItemIds = orderData.items.map(item => item.id);
orderItemIds.forEach(id => {
CartManager.removeItem(id);
});
// 清除临时订单
localStorage.removeItem('tempOrder');
// 跳转到订单成功页面或首页
window.location.href = '../index.html';
}
// 模拟订单数据
const mockOrders = [
{
orderId: 'ORD20230515001',
orderDate: '2023-05-15 14:30',
status: 'completed',
products: [
{ id: 1, title: 'MacBook Pro 2020款', image: 'images/生成图片 (1).png', price: 5800, quantity: 1 }
],
total: 5800,
deliveryFee: 0
},
{
orderId: 'ORD20230514002',
orderDate: '2023-05-14 10:20',
status: 'shipped',
products: [
{ id: 2, title: '机械键盘', image: 'images/生成图片 (3).png', price: 120, quantity: 1 }
],
total: 120,
deliveryFee: 10
},
{
orderId: 'ORD20230513003',
orderDate: '2023-05-13 16:45',
status: 'paid',
products: [
{ id: 3, title: '大学英语教材全套', image: 'images/生成图片 (4).png', price: 80, quantity: 1 }
],
total: 80,
deliveryFee: 0
},
{
orderId: 'ORD20230512004',
orderDate: '2023-05-12 09:15',
status: 'pending',
products: [
{ id: 4, title: '篮球', image: 'images/生成图片 (7).png', price: 150, quantity: 1 }
],
total: 150,
deliveryFee: 15
}
];
// 初始化我的订单页面
function initMyOrders() {
const currentUser = UserManager.getCurrentUser();
if (!currentUser) return;
// 渲染用户信息
renderUserSidebar(currentUser);
// 渲染订单列表
renderOrders(mockOrders);
// 初始化筛选功能
const filterBtns = document.querySelectorAll('.orders-filter .filter-btn');
filterBtns.forEach(btn => {
btn.addEventListener('click', function() {
filterBtns.forEach(b => b.classList.remove('active'));
this.classList.add('active');
const status = this.getAttribute('data-status');
filterOrders(status);
});
});
}
// 渲染订单列表
function renderOrders(orders) {
const ordersList = document.getElementById('orders-list');
const emptyState = document.getElementById('orders-empty');
if (!ordersList) return;
if (orders.length === 0) {
ordersList.style.display = 'none';
if (emptyState) emptyState.style.display = 'block';
return;
}
ordersList.style.display = 'flex';
if (emptyState) emptyState.style.display = 'none';
const isInPagesFolder = window.location.pathname.includes('pages/');
const basePath = isInPagesFolder ? '../' : '';
ordersList.innerHTML = orders.map(order => {
const statusText = {
'pending': '待付款',
'paid': '待发货',
'shipped': '待收货',
'completed': '已完成',
'cancelled': '已取消'
};
const statusActions = {
'pending': '<button class="btn btn-primary" onclick="payOrder(\'' + order.orderId + '\')">立即付款</button><button class="btn btn-outline" onclick="cancelOrder(\'' + order.orderId + '\')">取消订单</button>',
'paid': '<button class="btn btn-outline" onclick="viewOrder(\'' + order.orderId + '\')">查看详情</button>',
'shipped': '<button class="btn btn-primary" onclick="confirmReceive(\'' + order.orderId + '\')">确认收货</button><button class="btn btn-outline" onclick="viewOrder(\'' + order.orderId + '\')">查看详情</button>',
'completed': '<button class="btn btn-outline" onclick="viewOrder(\'' + order.orderId + '\')">查看详情</button><button class="btn btn-outline" onclick="reviewOrder(\'' + order.orderId + '\')">评价</button>',
'cancelled': '<button class="btn btn-outline" onclick="viewOrder(\'' + order.orderId + '\')">查看详情</button>'
};
return `
<div class="order-item">
<div class="order-header">
<div class="order-info">
<div class="order-number">订单号：${order.orderId}</div>
<div class="order-date">下单时间：${order.orderDate}</div>
</div>
<div class="order-status ${order.status}">${statusText[order.status] || order.status}</div>
</div>
<div class="order-products">
${order.products.map(product => `
<div class="order-product">
<img src="${resolveImageSrc(product.image, basePath)}" alt="${product.title}" onerror="this.src='${basePath}images/生成图片.png'">
<div class="order-product-info">
<div class="order-product-title">${product.title}</div>
<div class="order-product-meta">数量：${product.quantity}</div>
</div>
<div class="order-product-price">¥${product.price.toLocaleString()}</div>
</div>
`).join('')}
</div>
<div class="order-footer">
<div class="order-total">
<span class="order-total-label">合计：</span>
<span class="order-total-amount">¥${(order.total + order.deliveryFee).toLocaleString()}</span>
</div>
<div class="order-actions">
${statusActions[order.status] || ''}
</div>
</div>
</div>
`;
}).join('');
}
// 筛选订单
function filterOrders(status) {
let filteredOrders = mockOrders;
if (status !== 'all') {
filteredOrders = mockOrders.filter(order => order.status === status);
}
renderOrders(filteredOrders);
}
// 订单操作函数
function payOrder(orderId) {
alert('跳转到支付页面，订单号：' + orderId);
}
function cancelOrder(orderId) {
if (confirm('确定要取消这个订单吗？')) {
alert('订单已取消：' + orderId);
initMyOrders();
}
}
function confirmReceive(orderId) {
if (confirm('确认已收到商品？')) {
alert('确认收货成功：' + orderId);
initMyOrders();
}
}
function viewOrder(orderId) {
alert('查看订单详情：' + orderId);
}
function reviewOrder(orderId) {
alert('评价订单：' + orderId);
}
// 初始化我的在售页面
function initMyProducts() {
const currentUser = UserManager.getCurrentUser();
if (!currentUser) return;
// 渲染用户信息
renderUserSidebar(currentUser);
// 获取用户的在售商品（从mockProducts和localStorage中获取）
const mockUserProducts = mockProducts.filter(p =>
p.seller === currentUser.username ||
p.seller === currentUser.name ||
(p.seller && typeof p.seller === 'object' && (p.seller.id === currentUser.id || p.seller.name === currentUser.username))
);
// 从localStorage获取用户发布的商品
// 支持通过id或username获取
const savedUserProducts = getUserProducts(currentUser.id || currentUser.username) || [];
// 合并商品列表，并确保每个商品都有唯一ID
const allUserProducts = [...mockUserProducts];
savedUserProducts.forEach(savedProduct => {
// 检查是否已存在（避免重复）
if (!allUserProducts.find(p => p.id === savedProduct.id)) {
allUserProducts.push(savedProduct);
}
});
// 为没有ID的商品添加ID
allUserProducts.forEach((product, index) => {
if (!product.id) {
product.id = Date.now() + index;
}
});
// 渲染商品列表
renderMyProducts(allUserProducts);
// 初始化筛选功能
const filterBtns = document.querySelectorAll('.products-filter .filter-btn');
filterBtns.forEach(btn => {
btn.addEventListener('click', function() {
filterBtns.forEach(b => b.classList.remove('active'));
this.classList.add('active');
const status = this.getAttribute('data-status');
filterMyProducts(allUserProducts, status);
});
});
}
// 渲染我的在售商品
function renderMyProducts(products) {
const productsGrid = document.getElementById('my-products-grid');
const emptyState = document.getElementById('products-empty');
if (!productsGrid) return;
if (products.length === 0) {
productsGrid.style.display = 'none';
if (emptyState) emptyState.style.display = 'block';
return;
}
productsGrid.style.display = 'grid';
if (emptyState) emptyState.style.display = 'none';
const isInPagesFolder = window.location.pathname.includes('pages/');
const basePath = isInPagesFolder ? '../' : '';
productsGrid.innerHTML = products.map(product => {
const productUrl = `${basePath}product-details.html?id=${product.id}`;
const statusBadge = product.status === 'auction' ? '<span class="auction-badge">拍卖中</span>' : '<span class="auction-badge" style="background-color: var(--success-color);">一口价</span>';
const imageSrc = resolveImageSrc(product.image, basePath);
return `
<div class="product-card">
<div class="product-image" onclick="window.location.href='${productUrl}'">
<img src="${imageSrc}" alt="${product.title}" onerror="this.src='${basePath}images/生成图片.png'">
${statusBadge}
</div>
<div class="product-info">
<div class="product-title" onclick="window.location.href='${productUrl}'">${product.title}</div>
<div class="product-price">
<span class="current-price">¥${product.price.toLocaleString()}</span>
${product.originalPrice ? `<span class="original-price">¥${product.originalPrice.toLocaleString()}</span>` : ''}
</div>
<div class="product-meta">
<span class="time-left">
<i class="fas fa-clock"></i>
${product.timeLeft || '剩余3天'}
</span>
<span class="seller-info">
<i class="fas fa-gavel"></i>
${product.bidCount || 0}人出价
</span>
</div>
<div class="product-actions" style="margin-top: 10px; display: flex; gap: 8px;">
<button class="btn btn-outline" style="flex: 1; padding: 6px;" onclick="editProduct(${product.id})">
<i class="fas fa-edit"></i> 编辑
</button>
<button class="btn btn-outline" style="flex: 1; padding: 6px;" onclick="deleteProduct(${product.id})">
<i class="fas fa-trash"></i> 删除
</button>
</div>
</div>
</div>
`;
}).join('');
}
// 筛选我的在售商品
function filterMyProducts(allProducts, status) {
let filteredProducts = allProducts;
if (status === 'auction') {
filteredProducts = allProducts.filter(p => p.status === 'auction');
} else if (status === 'buy-now') {
filteredProducts = allProducts.filter(p => p.status === 'buy-now');
} else if (status === 'sold') {
filteredProducts = []; // 已售出商品需要从其他地方获取
}
renderMyProducts(filteredProducts);
}
// 编辑商品
function editProduct(productId) {
alert('编辑商品：' + productId);
// 可以跳转到编辑页面
// window.location.href = 'post-product.html?edit=' + productId;
}
// 删除商品
function deleteProduct(productId) {
if (confirm('确定要删除这个商品吗？')) {
alert('商品已删除：' + productId);
initMyProducts();
}
}
// 渲染用户侧边栏（通用函数）
function renderUserSidebar(user) {
const isInPagesFolder = window.location.pathname.includes('pages/');
const basePath = isInPagesFolder ? '../' : '';
// 渲染用户头像
document.querySelectorAll('.user-sidebar .user-avatar img').forEach(img => {
img.src = basePath + (user.avatar || 'images/头像1.png');
img.onerror = function() {
this.src = basePath + 'images/头像1.png';
};
});
// 渲染用户信息
const userNameEl = document.querySelector('.user-sidebar .user-info h3');
if (userNameEl) userNameEl.textContent = user.username || user.name || '用户';
const studentIdEl = document.querySelector('.user-sidebar .student-id');
if (studentIdEl) studentIdEl.textContent = `学号：${user.studentId || '未设置'}`;
const ratingEl = document.querySelector('.user-sidebar .user-rating span');
if (ratingEl) {
const rating = user.rating || 5.0;
ratingEl.innerHTML = `<i class="fas fa-star"></i> ${rating.toFixed(1)}`;
}
}
// 初始化设置页面
function initSettings() {
const currentUser = UserManager.getCurrentUser();
if (!currentUser) return;
// 渲染用户信息
renderUserSidebar(currentUser);
// 填充表单数据
const usernameInput = document.getElementById('username');
const studentIdInput = document.getElementById('student-id');
const emailInput = document.getElementById('email');
const phoneInput = document.getElementById('phone');
if (usernameInput) usernameInput.value = currentUser.username || currentUser.name || '';
if (studentIdInput) studentIdInput.value = currentUser.studentId || '';
if (emailInput) emailInput.value = currentUser.email || '';
if (phoneInput) phoneInput.value = currentUser.phone || '';
// 头像上传
const avatarInput = document.getElementById('avatar-input');
const avatarPreview = document.getElementById('avatar-preview');
if (avatarInput && avatarPreview) {
avatarInput.addEventListener('change', function(e) {
const file = e.target.files[0];
if (file) {
if (file.size > 2 * 1024 * 1024) {
alert('图片大小不能超过2MB');
return;
}
const reader = new FileReader();
reader.onload = function(e) {
avatarPreview.src = e.target.result;
};
reader.readAsDataURL(file);
}
});
}
// 基本信息表单提交
const profileForm = document.getElementById('profile-form');
if (profileForm) {
profileForm.addEventListener('submit', function(e) {
e.preventDefault();
const formData = {
username: usernameInput ? usernameInput.value : '',
studentId: studentIdInput ? studentIdInput.value : '',
email: emailInput ? emailInput.value : '',
phone: phoneInput ? phoneInput.value : ''
};
// 更新用户信息
const updatedUser = { ...currentUser, ...formData };
UserManager.updateUser(updatedUser);
alert('信息保存成功！');
updateNavbar();
});
}
// 密码修改表单提交
const passwordForm = document.getElementById('password-form');
if (passwordForm) {
passwordForm.addEventListener('submit', function(e) {
e.preventDefault();
const oldPassword = document.getElementById('old-password').value;
const newPassword = document.getElementById('new-password').value;
const confirmPassword = document.getElementById('confirm-password').value;
if (newPassword.length < 6) {
alert('新密码长度至少6位');
return;
}
if (newPassword !== confirmPassword) {
alert('两次输入的密码不一致');
return;
}
// 这里应该验证旧密码，简化处理
alert('密码修改成功！');
passwordForm.reset();
});
}
// 保存通知设置
const saveNotificationsBtn = document.getElementById('save-notifications');
if (saveNotificationsBtn) {
saveNotificationsBtn.addEventListener('click', function() {
const settings = {
emailNotification: document.getElementById('email-notification').checked,
smsNotification: document.getElementById('sms-notification').checked,
bidNotification: document.getElementById('bid-notification').checked
};
localStorage.setItem('userNotificationSettings', JSON.stringify(settings));
alert('通知设置已保存！');
});
}
// 保存隐私设置
const savePrivacyBtn = document.getElementById('save-privacy');
if (savePrivacyBtn) {
savePrivacyBtn.addEventListener('click', function() {
const privacy = {
showPhone: document.getElementById('show-phone').checked,
showEmail: document.getElementById('show-email').checked
};
localStorage.setItem('userPrivacySettings', JSON.stringify(privacy));
alert('隐私设置已保存！');
});
}
// 加载保存的设置
const notificationSettings = localStorage.getItem('userNotificationSettings');
if (notificationSettings) {
const settings = JSON.parse(notificationSettings);
if (document.getElementById('email-notification')) document.getElementById('email-notification').checked = settings.emailNotification;
if (document.getElementById('sms-notification')) document.getElementById('sms-notification').checked = settings.smsNotification;
if (document.getElementById('bid-notification')) document.getElementById('bid-notification').checked = settings.bidNotification;
}
const privacySettings = localStorage.getItem('userPrivacySettings');
if (privacySettings) {
const privacy = JSON.parse(privacySettings);
if (document.getElementById('show-phone')) document.getElementById('show-phone').checked = privacy.showPhone;
if (document.getElementById('show-email')) document.getElementById('show-email').checked = privacy.showEmail;
}
}
style.css
/* 全局样式和重置 */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Arial', 'Microsoft YaHei', sans-serif;
line-height: 1.6;
color: #333;
background-color: #f8f9fa;
}
.container {
width: 100%;
max-width: 1200px;
margin: 0 auto;
padding: 0 20px;
}
/* 颜色变量 */
:root {
--primary-color: #007bff;
--secondary-color: #6c757d;
--success-color: #28a745;
--danger-color: #dc3545;
--warning-color: #ffc107;
--info-color: #17a2b8;
--light-color: #f8f9fa;
--dark-color: #343a40;
--border-color: #dee2e6;
--text-color: #333;
--text-muted: #6c757d;
--bg-color: #fff;
--shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.1);
--shadow-md: 0 4px 8px rgba(0, 0, 0, 0.1);
--shadow-lg: 0 10px 20px rgba(0, 0, 0, 0.1);
--transition: all 0.3s ease;
}
/* 导航栏样式 */
.navbar {
background-color: var(--bg-color);
box-shadow: var(--shadow-sm);
position: sticky;
top: 0;
z-index: 1000;
}
.navbar .container {
display: flex;
justify-content: space-between;
align-items: center;
padding: 10px 20px;
}
.logo {
display: flex;
align-items: center;
font-size: 24px;
font-weight: bold;
color: var(--primary-color);
}
.logo i {
margin-right: 10px;
font-size: 28px;
}
.search-box {
display: flex;
width: 40%;
max-width: 500px;
}
.search-box input {
flex: 1;
padding: 10px 15px;
border: 1px solid var(--border-color);
border-radius: 4px 0 0 4px;
font-size: 16px;
}
.search-box button {
padding: 10px 20px;
background-color: var(--primary-color);
color: white;
border: none;
border-radius: 0 4px 4px 0;
cursor: pointer;
transition: var(--transition);
}
.search-box button:hover {
background-color: #0056b3;
transform: translateY(-2px);
box-shadow: var(--shadow-md);
}
.nav-links {
display: flex;
list-style: none;
align-items: center;
}
.nav-links li {
margin-left: 20px;
}
.nav-links a {
text-decoration: none;
color: var(--text-color);
padding: 8px 15px;
border-radius: 4px;
transition: var(--transition);
display: flex;
align-items: center;
}
.nav-links a:hover, .nav-links a.active {
color: var(--primary-color);
background-color: rgba(0, 123, 255, 0.1);
transform: translateY(-1px);
box-shadow: var(--shadow-sm);
}
.user-avatar {
width: 36px;
height: 36px;
border-radius: 50%;
margin-right: 8px;
object-fit: cover;
}
.dropdown {
position: relative;
}
.dropdown-menu {
position: absolute;
top: 100%;
right: 0;
background-color: var(--bg-color);
box-shadow: var(--shadow-md);
border-radius: 4px;
min-width: 180px;
opacity: 0;
visibility: hidden;
transform: translateY(-10px);
transition: var(--transition);
z-index: 1001;
}
.dropdown:hover .dropdown-menu {
opacity: 1;
visibility: visible;
transform: translateY(0);
}
.dropdown-menu a {
display: block;
padding: 10px 15px;
margin: 0;
color: var(--text-color);
text-decoration: none;
transition: var(--transition);
}
.dropdown-menu a:hover {
background-color: var(--light-color);
color: var(--primary-color);
}
.nav-links .user-avatar {
width: 30px;
height: 30px;
border-radius: 50%;
object-fit: cover;
margin-right: 8px;
vertical-align: middle;
}
/* 轮播图样式 */
.carousel {
position: relative;
width: 100%;
max-height: 600px;
overflow: hidden;
}
.carousel-inner {
display: flex;
transition: transform 0.5s ease;
}
.carousel-item {
min-width: 100%;
height: 600px;
position: relative;
}
.carousel-item img {
width: 100%;
height: 100%;
object-fit: contain;
background-color: #f0f0f0;
}
.carousel-indicators {
position: absolute;
bottom: 20px;
left: 50%;
transform: translateX(-50%);
display: flex;
gap: 10px;
z-index: 10;
}
.carousel-indicators .indicator {
width: 12px;
height: 12px;
border-radius: 50%;
background-color: rgba(255, 255, 255, 0.5);
cursor: pointer;
transition: all 0.3s ease;
}
.carousel-indicators .indicator.active {
background-color: rgba(255, 255, 255, 0.9);
width: 30px;
border-radius: 6px;
}
.carousel-caption {
position: absolute;
bottom: 0;
left: 0;
right: 0;
background: rgba(0, 0, 0, 0.5);
color: white;
padding: 20px;
text-align: center;
}
.carousel-control {
position: absolute;
top: 50%;
transform: translateY(-50%);
background: rgba(0, 0, 0, 0.5);
color: white;
border: none;
padding: 10px;
cursor: pointer;
font-size: 24px;
transition: var(--transition);
}
.carousel-control:hover {
background: rgba(0, 0, 0, 0.7);
}
.carousel-control-prev {
left: 0;
}
.carousel-control-next {
right: 0;
}
/* 商品分类样式 */
.categories {
padding: 30px 0;
}
.section-title {
text-align: center;
margin-bottom: 30px;
font-size: 28px;
color: var(--text-color);
}
.categories-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
gap: 20px;
}
.category-item {
text-align: center;
padding: 20px;
background-color: var(--bg-color);
border-radius: 8px;
box-shadow: var(--shadow-sm);
transition: var(--transition);
cursor: pointer;
}
.category-item:hover {
transform: translateY(-5px) scale(1.02);
box-shadow: var(--shadow-md);
}
.category-item i {
font-size: 36px;
color: var(--primary-color);
margin-bottom: 10px;
}
.category-item span {
display: block;
font-size: 14px;
color: var(--text-color);
}
/* 商品卡片样式 */
.products-section {
padding: 30px 0;
}
.products-section .section-title {
text-align: left;
margin-bottom: 20px;
display: flex;
justify-content: space-between;
align-items: center;
}
.products-section .section-title a {
font-size: 16px;
color: var(--primary-color);
text-decoration: none;
}
.product-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
gap: 20px;
margin-bottom: 30px;
}
.product-card {
background-color: var(--bg-color);
border-radius: 8px;
box-shadow: var(--shadow-sm);
overflow: hidden;
transition: var(--transition);
cursor: pointer;
}
.animate-on-scroll {
opacity: 0;
transform: translateY(30px);
transition: opacity 0.6s ease, transform 0.6s ease;
}
.animate-on-scroll.animated {
opacity: 1;
transform: translateY(0);
}
.product-card:hover {
transform: translateY(-5px) scale(1.01);
box-shadow: var(--shadow-md);
}
.product-image {
position: relative;
height: 200px;
overflow: hidden;
}
.product-image img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.3s ease;
}
.product-card:hover .product-image img {
transform: scale(1.05);
}
.auction-badge {
position: absolute;
top: 10px;
left: 10px;
background-color: var(--primary-color);
color: white;
padding: 5px 10px;
border-radius: 4px;
font-size: 12px;
font-weight: bold;
}
.product-info {
padding: 15px;
}
.product-title {
font-size: 16px;
font-weight: bold;
margin-bottom: 10px;
color: var(--text-color);
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
height: 48px;
}
.product-price {
display: flex;
align-items: center;
margin-bottom: 10px;
}
.current-price {
font-size: 20px;
font-weight: bold;
color: var(--danger-color);
}
.original-price {
font-size: 14px;
color: var(--text-muted);
text-decoration: line-through;
margin-left: 10px;
}
.product-meta {
display: flex;
justify-content: space-between;
font-size: 12px;
color: var(--text-muted);
}
.time-left {
display: flex;
align-items: center;
}
.time-left i {
margin-right: 5px;
}
.seller-info {
display: flex;
align-items: center;
}
.seller-info img {
width: 24px;
height: 24px;
border-radius: 50%;
margin-right: 5px;
object-fit: cover;
}
/* 按钮样式 */
.btn {
display: inline-block;
padding: 10px 20px;
font-size: 16px;
font-weight: bold;
text-align: center;
text-decoration: none;
border: none;
border-radius: 4px;
cursor: pointer;
transition: all 0.3s ease;
position: relative;
overflow: hidden;
}
.btn::before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent);
transition: left 0.5s;
}
.btn-primary {
background-color: var(--primary-color);
color: white;
}
.btn-primary:hover {
background-color: #0056b3;
transform: translateY(-2px);
box-shadow: var(--shadow-md);
}
.btn-primary:hover::before {
left: 100%;
}
.btn-secondary {
background-color: var(--secondary-color);
color: white;
}
.btn-secondary:hover {
background-color: #5a6268;
transform: translateY(-2px);
box-shadow: var(--shadow-md);
}
.btn-secondary:hover::before {
left: 100%;
}
/* 按钮波纹效果 */
.ripple {
position: absolute;
border-radius: 50%;
background: rgba(255, 255, 255, 0.6);
transform: scale(0);
animation: ripple-animation 0.6s linear;
pointer-events: none;
z-index: 1000;
}
@keyframes ripple-animation {
to {
transform: scale(4);
opacity: 0;
}
}
/* 页面加载动画 */
.page-loader {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(255, 255, 255, 0.95);
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
z-index: 9999;
transition: opacity 0.5s ease, visibility 0.5s ease;
}
.page-loader.hidden {
opacity: 0;
visibility: hidden;
}
.loader-spinner {
width: 60px;
height: 60px;
border: 6px solid #f3f3f3;
border-top: 6px solid var(--primary-color);
border-radius: 50%;
animation: spin 1s linear infinite;
margin-bottom: 20px;
}
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
.page-loader p {
font-size: 18px;
color: var(--text-color);
font-weight: bold;
}
.btn-success {
background-color: var(--success-color);
color: white;
}
.btn-success:hover {
background-color: #218838;
}
.btn-danger {
background-color: var(--danger-color);
color: white;
}
.btn-danger:hover {
background-color: #c82333;
}
.btn-warning {
background-color: var(--warning-color);
color: var(--text-color);
}
.btn-warning:hover {
background-color: #e0a800;
}
/* 页脚样式 */
.footer {
background-color: var(--dark-color);
color: white;
padding: 40px 0 20px;
margin-top: 50px;
}
.footer-content {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 30px;
margin-bottom: 30px;
}
.footer-section h3 {
margin-bottom: 20px;
color: white;
}
.footer-section.about .logo {
color: white;
margin-bottom: 15px;
}
.footer-section.about p {
color: #ccc;
line-height: 1.8;
}
.social-links {
margin-top: 20px;
}
.social-links a {
display: inline-block;
width: 40px;
height: 40px;
background-color: rgba(255, 255, 255, 0.1);
color: white;
text-align: center;
line-height: 40px;
border-radius: 50%;
margin-right: 10px;
transition: var(--transition);
}
.social-links a:hover {
background-color: var(--primary-color);
transform: translateY(-3px);
}
.footer-section.links ul {
list-style: none;
}
.footer-section.links ul li {
margin-bottom: 10px;
}
.footer-section.links ul li a {
color: #ccc;
text-decoration: none;
transition: var(--transition);
}
.footer-section.links ul li a:hover {
color: var(--primary-color);
padding-left: 5px;
}
.footer-section.contact ul {
list-style: none;
}
.footer-section.contact ul li {
margin-bottom: 15px;
display: flex;
align-items: flex-start;
}
.footer-section.contact ul li i {
color: var(--primary-color);
margin-right: 15px;
font-size: 18px;
margin-top: 3px;
}
.footer-section.contact ul li span {
color: #ccc;
}
.footer-bottom {
text-align: center;
padding-top: 20px;
border-top: 1px solid rgba(255, 255, 255, 0.1);
color: #999;
}
/* 商品列表页样式 */
.product-list {
padding: 20px 0;
}
.page-header {
margin-bottom: 20px;
padding-bottom: 15px;
border-bottom: 1px solid var(--border-color);
}
.page-header h1 {
font-size: 24px;
margin-bottom: 10px;
color: var(--text-color);
}
.breadcrumb {
font-size: 13px;
color: #666;
}
.breadcrumb a {
color: var(--primary-color);
text-decoration: none;
}
.breadcrumb a:hover {
text-decoration: underline;
}
.product-list-container {
display: grid;
grid-template-columns: 250px 1fr;
gap: 20px;
padding: 20px 0;
}
.sidebar {
background-color: var(--bg-color);
padding: 20px;
border-radius: 8px;
box-shadow: var(--shadow-sm);
height: fit-content;
position: sticky;
top: 80px;
}
.sidebar h3 {
margin-bottom: 15px;
padding-bottom: 10px;
border-bottom: 1px solid var(--border-color);
font-size: 16px;
}
.filter-section {
margin-bottom: 25px;
}
.category-filter {
list-style: none;
}
.category-filter li {
margin-bottom: 8px;
}
.category-filter li a {
text-decoration: none;
color: var(--text-color);
font-size: 14px;
display: block;
padding: 5px 0;
transition: var(--transition);
}
.category-filter li a:hover, .category-filter li a.active {
color: var(--primary-color);
}
.price-filter {
display: grid;
grid-template-columns: 1fr auto 1fr;
align-items: center;
gap: 8px;
margin-bottom: 10px;
}
.price-filter span {
text-align: center;
color: var(--text-muted);
}
.price-filter input[type="number"] {
width: 100%;
padding: 8px;
border: 1px solid var(--border-color);
border-radius: 4px;
font-size: 13px;
}
.price-filter button {
grid-column: 1 / -1;
justify-self: end;
padding: 8px 12px;
background-color: var(--primary-color);
color: white;
border: none;
border-radius: 4px;
cursor: pointer;
font-size: 13px;
transition: var(--transition);
}
.price-filter button:hover {
background-color: #0056b3;
transform: translateY(-2px);
box-shadow: var(--shadow-md);
}
.status-filter, .condition-filter {
list-style: none;
}
.status-filter li, .condition-filter li {
margin-bottom: 8px;
}
.status-filter li label, .condition-filter li label {
display: flex;
align-items: center;
cursor: pointer;
font-size: 13px;
color: var(--text-color);
}
.status-filter li input[type="checkbox"], .condition-filter li input[type="checkbox"] {
margin-right: 8px;
}
/* 商品网格 */
.product-grid-container {
background-color: var(--bg-color);
padding: 20px;
border-radius: 8px;
box-shadow: var(--shadow-sm);
}
.sort-options {
margin-bottom: 20px;
display: flex;
align-items: center;
gap: 10px;
}
.sort-options span {
font-size: 14px;
color: var(--text-color);
}
.sort-options select {
padding: 8px;
border: 1px solid var(--border-color);
border-radius: 4px;
font-size: 13px;
color: var(--text-color);
background-color: white;
}
.price-range {
padding: 10px 0;
}
.price-inputs {
display: flex;
gap: 10px;
margin-bottom: 10px;
}
.price-inputs input {
flex: 1;
padding: 8px;
border: 1px solid var(--border-color);
border-radius: 4px;
font-size: 13px;
}
.apply-btn {
width: 100%;
padding: 8px;
background-color: var(--primary-color);
color: white;
border: none;
border-radius: 4px;
cursor: pointer;
font-size: 13px;
transition: var(--transition);
}
.apply-btn:hover {
background-color: #0056b3;
}
/* 分页样式 */
.pagination {
display: flex;
justify-content: center;
align-items: center;
margin: 30px 0;
gap: 10px;
}
.pagination a {
padding: 8px 12px;
border: 1px solid var(--border-color);
border-radius: 4px;
color: var(--text-color);
text-decoration: none;
transition: var(--transition);
font-size: 14px;
}
.pagination a:hover {
background-color: var(--hover-color);
border-color: var(--primary-color);
background-color: var(--primary-color);
color: white;
transform: translateY(-2px);
box-shadow: var(--shadow-sm);
border-color: var(--primary-color);
}
.pagination a.active {
background-color: var(--primary-color);
color: white;
border-color: var(--primary-color);
}
.pagination a.prev,
.pagination a.next {
background-color: var(--bg-color);
font-weight: 500;
}
.pagination a.prev:hover,
.pagination a.next:hover {
background-color: var(--hover-color);
}
/* 商品详情页样式 */
.product-details {
padding: 20px 0;
}
.product-content {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 30px;
margin-bottom: 30px;
}
.product-gallery {
background-color: var(--bg-color);
padding: 20px;
border-radius: 8px;
box-shadow: var(--shadow-sm);
}
/* 360度产品预览样式 */
.product-360-view {
background-color: #ffffff;
border: 1px solid #e0e0e0;
border-radius: 8px;
padding: 20px;
margin-bottom: 20px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
transition: box-shadow 0.3s ease;
}
.product-360-view:hover {
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}
.spinner-container {
width: 100%;
height: 400px;
border: 1px solid #e0e0e0;
border-radius: 4px;
overflow: hidden;
position: relative;
margin-bottom: 15px;
cursor: grab;
background-color: #f8f9fa;
display: flex;
align-items: center;
justify-content: center;
}
.spinner-container:active {
cursor: grabbing;
}
.spinner-container img {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
max-width: 100%;
max-height: 100%;
transition: transform 0.1s ease;
user-select: none;
}
.view-controls {
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
gap: 10px;
}
.view-controls .btn-sm {
padding: 6px 12px;
font-size: 14px;
}
.zoom-controls {
display: flex;
gap: 5px;
}
.view-hint {
display: flex;
align-items: center;
gap: 5px;
color: #6c757d;
font-size: 14px;
}
.view-hint i {
font-size: 16px;
}
.gallery-container {
background-color: #ffffff;
border: 1px solid #e0e0e0;
border-radius: 8px;
padding: 20px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}
/* 响应式设计 */
@media (max-width: 768px) {
.spinner-container {
height: 300px;
}
.view-controls {
flex-direction: column;
align-items: flex-start;
}
.view-hint {
font-size: 12px;
}
}
.gallery-thumbnails {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 10px;
margin-bottom: 15px;
}
.gallery-thumbnails .thumbnail {
height: 80px;
overflow: hidden;
border-radius: 4px;
cursor: pointer;
border: 2px solid transparent;
transition: var(--transition);
}
.gallery-thumbnails .thumbnail:hover,
.gallery-thumbnails .thumbnail.active {
border-color: var(--primary-color);
}
.gallery-thumbnails .thumbnail img {
width: 100%;
height: 100%;
object-fit: cover;
}
.gallery-main {
height: 400px;
overflow: hidden;
border-radius: 8px;
}
.gallery-main img {
width: 100%;
height: 100%;
object-fit: contain;
}
.product-tabs {
background-color: var(--bg-color);
padding: 20px;
border-radius: 8px;
box-shadow: var(--shadow-sm);
}
.tabs {
display: flex;
border-bottom: 2px solid var(--border-color);
margin-bottom: 20px;
}
.tab-btn {
padding: 12px 24px;
background: none;
border: none;
border-bottom: 2px solid transparent;
cursor: pointer;
font-size: 16px;
color: var(--text-muted);
transition: var(--transition);
margin-bottom: -2px;
}
.tab-btn:hover {
color: var(--primary-color);
}
.tab-btn.active {
color: var(--primary-color);
border-bottom-color: var(--primary-color);
}
.tab-panel {
display: none;
}
.tab-panel.active {
display: block;
}
.tab-panel h3 {
margin-bottom: 15px;
font-size: 18px;
color: var(--text-color);
}
.bid-history table {
width: 100%;
border-collapse: collapse;
}
.bid-history th,
.bid-history td {
padding: 12px;
text-align: left;
border-bottom: 1px solid var(--border-color);
}
.bid-history th {
background-color: var(--light-color);
font-weight: bold;
}
.bidder-info {
display: flex;
align-items: center;
gap: 10px;
}
.bidder-avatar {
width: 32px;
height: 32px;
border-radius: 50%;
object-fit: cover;
}
.review-item {
padding: 15px 0;
border-bottom: 1px solid var(--border-color);
}
.review-item:last-child {
border-bottom: none;
}
.review-header {
display: flex;
justify-content: space-between;
align-items: flex-start;
margin-bottom: 10px;
}
.reviewer-info {
display: flex;
align-items: center;
gap: 10px;
}
.reviewer-avatar {
width: 40px;
height: 40px;
border-radius: 50%;
object-fit: cover;
}
.reviewer-name {
font-weight: bold;
color: var(--text-color);
}
.review-date {
font-size: 12px;
color: var(--text-muted);
}
.review-rating {
color: var(--warning-color);
}
.review-content {
color: var(--text-color);
line-height: 1.6;
}
.add-review {
margin-top: 30px;
padding-top: 30px;
border-top: 1px solid var(--border-color);
}
.rating-input {
display: flex;
gap: 5px;
margin-bottom: 15px;
}
.rating-input i {
font-size: 20px;
color: var(--text-muted);
cursor: pointer;
transition: var(--transition);
}
.rating-input i:hover,
.rating-input i.active {
color: var(--warning-color);
}
.bid-section {
margin-top: 20px;
padding-top: 20px;
border-top: 1px solid var(--border-color);
}
.bid-input {
margin-bottom: 15px;
}
.bid-input .label {
display: block;
margin-bottom: 8px;
font-weight: bold;
}
.input-group {
display: flex;
align-items: center;
border: 1px solid var(--border-color);
border-radius: 4px;
overflow: hidden;
}
.input-group .currency {
padding: 12px;
background-color: var(--light-color);
border-right: 1px solid var(--border-color);
}
.input-group input {
flex: 1;
padding: 12px;
border: none;
font-size: 16px;
}
.bid-buttons {
display: flex;
gap: 10px;
}
.bid-buttons .btn {
flex: 1;
}
.seller-info h3 {
margin-bottom: 15px;
font-size: 18px;
}
.seller-profile {
display: flex;
align-items: center;
gap: 15px;
}
.seller-actions {
display: flex;
gap: 10px;
margin-left: auto;
}
.btn-outline {
background-color: transparent;
border: 1px solid var(--border-color);
color: var(--text-color);
}
.btn-outline:hover {
background-color: var(--light-color);
}
.btn-block {
width: 100%;
display: block;
}
.product-details-container {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 30px;
}
.product-images {
background-color: var(--bg-color);
padding: 20px;
border-radius: 8px;
box-shadow: var(--shadow-sm);
}
.main-image {
height: 400px;
overflow: hidden;
border-radius: 8px;
margin-bottom: 15px;
}
.main-image img {
width: 100%;
height: 100%;
object-fit: contain;
}
.thumbnails {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 10px;
}
.thumbnail-item {
height: 80px;
overflow: hidden;
border-radius: 4px;
cursor: pointer;
border: 2px solid transparent;
transition: var(--transition);
}
.thumbnail-item:hover,
.thumbnail-item.active {
border-color: var(--primary-color);
}
.thumbnail-item img {
width: 100%;
height: 100%;
object-fit: cover;
}
.product-info {
background-color: var(--bg-color);
padding: 20px;
border-radius: 8px;
box-shadow: var(--shadow-sm);
}
.product-info h1 {
font-size: 24px;
margin-bottom: 15px;
color: var(--text-color);
}
.product-price-info {
margin-bottom: 20px;
padding-bottom: 20px;
border-bottom: 1px solid var(--border-color);
}
.current-bid {
display: flex;
align-items: center;
margin-bottom: 10px;
}
.current-bid-label {
font-size: 16px;
color: var(--text-muted);
margin-right: 10px;
}
.current-bid-amount {
font-size: 32px;
font-weight: bold;
color: var(--danger-color);
}
.original-price {
font-size: 18px;
}
.product-meta-info {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 15px;
margin-bottom: 20px;
padding-bottom: 20px;
border-bottom: 1px solid var(--border-color);
}
.meta-item {
display: flex;
align-items: center;
font-size: 14px;
color: var(--text-color);
}
.meta-item i {
color: var(--primary-color);
margin-right: 8px;
font-size: 16px;
}
.timer {
background-color: var(--warning-color);
color: var(--text-color);
padding: 10px;
border-radius: 4px;
margin-bottom: 20px;
text-align: center;
font-weight: bold;
}
.bid-form {
margin-bottom: 20px;
}
.bid-form label {
display: block;
margin-bottom: 8px;
font-weight: bold;
}
.bid-input-group {
display: flex;
gap: 10px;
}
.bid-input-group input {
flex: 1;
padding: 12px;
border: 1px solid var(--border-color);
border-radius: 4px;
font-size: 16px;
}
.action-buttons {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 10px;
}
.seller-info-section {
margin-top: 30px;
padding-top: 20px;
border-top: 1px solid var(--border-color);
}
.seller-info-section h3 {
margin-bottom: 15px;
font-size: 18px;
}
.seller-profile {
display: flex;
align-items: center;
}
.seller-avatar {
width: 60px;
height: 60px;
border-radius: 50%;
object-fit: cover;
margin-right: 15px;
}
.seller-details h4 {
margin-bottom: 5px;
font-size: 16px;
}
.seller-rating {
color: var(--warning-color);
margin-bottom: 5px;
}
/* 卖家信息区域样式 */
.seller-info {
margin-top: 30px;
padding-top: 20px;
border-top: 1px solid var(--border-color);
}
.seller-info h3 {
margin-bottom: 15px;
font-size: 18px;
color: var(--text-color);
}
.seller-profile {
display: flex;
align-items: center;
gap: 15px;
}
.seller-avatar {
width: 60px;
height: 60px;
border-radius: 50%;
object-fit: cover;
flex-shrink: 0;
}
.seller-avatar img {
width: 100%;
height: 100%;
border-radius: 50%;
object-fit: cover;
}
.seller-details {
flex: 1;
}
.seller-name {
font-size: 16px;
font-weight: 600;
color: var(--text-color);
margin-bottom: 8px;
}
.seller-rating {
display: flex;
align-items: center;
gap: 8px;
font-size: 14px;
}
.seller-rating .stars {
color: var(--warning-color);
}
.seller-rating .rating {
color: var(--text-color);
font-weight: 500;
}
.seller-rating .transaction-count {
color: var(--text-muted);
}
.seller-actions {
display: flex;
gap: 10px;
flex-shrink: 0;
}
.seller-actions .btn {
padding: 10px 20px;
font-size: 14px;
display: flex;
align-items: center;
gap: 6px;
}
.seller-actions .btn i {
font-size: 14px;
}
/* 登录/注册页样式 */
.login-page,
.register-page {
min-height: calc(100vh - 200px);
display: flex;
align-items: center;
justify-content: center;
padding: 40px 20px;
background: linear-gradient(135deg, #007bff 0%, #0056b3 50%, #007bff 100%);
position: relative;
overflow: hidden;
}
.login-page::before,
.register-page::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background:
radial-gradient(circle at 20% 50%, rgba(255, 255, 255, 0.1) 0%, transparent 50%),
radial-gradient(circle at 80% 80%, rgba(255, 255, 255, 0.1) 0%, transparent 50%),
url('data:image/svg+xml,<svg width="100" height="100" xmlns="http://www.w3.org/2000/svg"><defs><pattern id="grid" width="100" height="100" patternUnits="userSpaceOnUse"><path d="M 100 0 L 0 0 0 100" fill="none" stroke="rgba(255,255,255,0.08)" stroke-width="1"/></pattern></defs><rect width="100" height="100" fill="url(%23grid)"/></svg>');
opacity: 0.5;
}
.login-container,
.register-container {
max-width: 480px;
width: 100%;
background-color: var(--bg-color);
border-radius: 16px;
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
padding: 50px 40px;
position: relative;
z-index: 1;
animation: slideUp 0.5s ease-out;
}
@keyframes slideUp {
from {
opacity: 0;
transform: translateY(30px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.login-header,
.register-header {
text-align: center;
margin-bottom: 40px;
}
.login-header h1,
.register-header h1 {
font-size: 32px;
font-weight: 700;
color: var(--primary-color);
margin-bottom: 10px;
}
.login-header p,
.register-header p {
color: var(--text-muted);
font-size: 15px;
margin-top: 8px;
}
.login-form,
.register-form {
margin-bottom: 30px;
}
.login-form .form-group,
.register-form .form-group {
margin-bottom: 24px;
}
.login-form label,
.register-form label {
display: flex;
align-items: center;
margin-bottom: 10px;
font-weight: 600;
color: var(--text-color);
font-size: 14px;
}
.login-form label i,
.register-form label i {
font-size: 14px;
margin-right: 6px;
color: var(--primary-color);
}
.login-form input,
.register-form input {
width: 100%;
padding: 14px 16px;
border: 2px solid var(--border-color);
border-radius: 8px;
font-size: 15px;
transition: var(--transition);
background-color: #fafafa;
}
.login-form input:focus,
.register-form input:focus {
outline: none;
border-color: var(--primary-color);
background-color: var(--bg-color);
box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.1);
}
.login-form input::placeholder,
.register-form input::placeholder {
color: #adb5bd;
}
.form-options {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 24px;
font-size: 14px;
}
.remember-me {
display: flex;
align-items: center;
cursor: pointer;
font-weight: normal;
color: var(--text-color);
}
.remember-me input[type="checkbox"] {
width: auto;
margin-right: 8px;
cursor: pointer;
accent-color: var(--primary-color);
}
.forgot-password {
color: var(--primary-color);
text-decoration: none;
font-weight: 500;
transition: var(--transition);
}
.forgot-password:hover {
text-decoration: underline;
color: #0056b3;
}
.terms {
display: flex;
align-items: flex-start;
cursor: pointer;
font-weight: normal;
color: var(--text-color);
font-size: 14px;
line-height: 1.6;
}
.terms input[type="checkbox"] {
width: auto;
margin-right: 10px;
margin-top: 3px;
cursor: pointer;
accent-color: var(--primary-color);
flex-shrink: 0;
}
.terms a {
color: var(--primary-color);
text-decoration: none;
font-weight: 500;
}
.terms a:hover {
text-decoration: underline;
}
.verification-code {
display: flex;
gap: 12px;
}
.verification-code input {
flex: 1;
}
.verification-code .btn {
white-space: nowrap;
padding: 14px 20px;
}
.btn-primary.btn-block {
width: 100%;
padding: 14px;
font-size: 16px;
font-weight: 600;
border-radius: 8px;
background-color: var(--primary-color);
border: none;
color: white;
cursor: pointer;
transition: var(--transition);
box-shadow: 0 4px 15px rgba(0, 123, 255, 0.3);
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
}
.btn-primary.btn-block i {
font-size: 16px;
}
.btn-primary.btn-block:hover {
background-color: #0056b3;
transform: translateY(-2px);
box-shadow: 0 6px 20px rgba(0, 123, 255, 0.4);
}
.login-divider,
.register-divider {
text-align: center;
margin: 30px 0;
position: relative;
color: var(--text-muted);
font-size: 14px;
}
.login-divider::before,
.login-divider::after,
.register-divider::before,
.register-divider::after {
content: '';
position: absolute;
top: 50%;
width: 35%;
height: 1px;
background: linear-gradient(to right, transparent, var(--border-color), transparent);
}
.login-divider::before,
.register-divider::before {
left: 0;
}
.login-divider::after,
.register-divider::after {
right: 0;
}
.social-login,
.social-register {
display: flex;
flex-direction: column;
gap: 12px;
margin-bottom: 30px;
}
.btn-outline.btn-block {
width: 100%;
padding: 12px 16px;
font-size: 15px;
font-weight: 500;
border: 2px solid var(--border-color);
background-color: var(--bg-color);
color: var(--text-color);
border-radius: 8px;
cursor: pointer;
transition: var(--transition);
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
}
.btn-outline.btn-block:hover {
border-color: var(--primary-color);
background-color: rgba(0, 123, 255, 0.05);
color: var(--primary-color);
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}
.btn-outline.btn-block i {
font-size: 18px;
}
.login-footer,
.register-footer {
text-align: center;
padding-top: 20px;
border-top: 1px solid var(--border-color);
color: var(--text-muted);
font-size: 14px;
}
.login-footer a,
.register-footer a {
color: var(--primary-color);
text-decoration: none;
font-weight: 600;
margin-left: 5px;
transition: var(--transition);
}
.login-footer a:hover,
.register-footer a:hover {
text-decoration: underline;
}
.auth-container {
max-width: 400px;
margin: 50px auto;
padding: 30px;
background-color: var(--bg-color);
border-radius: 8px;
box-shadow: var(--shadow-md);
}
.auth-container h2 {
text-align: center;
margin-bottom: 30px;
color: var(--text-color);
}
.auth-form .form-group {
margin-bottom: 20px;
}
.auth-form label {
display: block;
margin-bottom: 8px;
font-weight: bold;
color: var(--text-color);
}
.auth-form input {
width: 100%;
padding: 12px;
border: 1px solid var(--border-color);
border-radius: 4px;
font-size: 16px;
transition: all 0.3s ease;
position: relative;
}
.auth-form input:focus {
outline: none;
border-color: var(--primary-color);
box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.1);
transform: translateY(-1px);
}
.auth-btn {
width: 100%;
padding: 12px;
font-size: 16px;
font-weight: bold;
margin-bottom: 20px;
}
.divider {
text-align: center;
margin: 20px 0;
position: relative;
}
.divider::before,
.divider::after {
content: '';
position: absolute;
top: 50%;
width: 40%;
height: 1px;
background-color: var(--border-color);
}
.divider::before {
left: 0;
}
.divider::after {
right: 0;
}
.social-btn {
display: flex;
align-items: center;
justify-content: center;
padding: 12px;
border: 1px solid var(--border-color);
background-color: var(--bg-color);
border-radius: 4px;
cursor: pointer;
transition: var(--transition);
font-size: 14px;
color: var(--text-color);
}
.social-btn:hover {
background-color: var(--light-color);
}
.social-btn i {
margin-right: 10px;
font-size: 18px;
}
.social-btn.wechat {
border-color: #07c160;
color: #07c160;
}
.social-btn.weibo {
border-color: #e6162d;
color: #e6162d;
}
.social-btn.qq {
border-color: #12b7f5;
color: #12b7f5;
}
/* 个人中心样式 */
.user-center-content {
display: grid;
grid-template-columns: 250px 1fr;
gap: 20px;
padding: 20px 0;
}
.user-sidebar {
background-color: var(--bg-color);
padding: 20px;
border-radius: 8px;
box-shadow: var(--shadow-sm);
height: fit-content;
position: sticky;
top: 80px;
}
.user-profile {
text-align: center;
margin-bottom: 30px;
padding-bottom: 20px;
border-bottom: 1px solid var(--border-color);
}
.user-sidebar .user-avatar {
width: 100px;
height: 100px;
border-radius: 50%;
object-fit: cover;
margin-bottom: 15px;
}
.user-info h3 {
margin-bottom: 5px;
font-size: 18px;
}
.student-id {
color: var(--text-muted);
font-size: 14px;
margin-bottom: 10px;
}
.user-rating {
color: var(--warning-color);
font-size: 14px;
}
.user-nav ul {
list-style: none;
}
.user-nav ul li {
margin-bottom: 5px;
}
.user-nav ul li a {
display: flex;
align-items: center;
padding: 10px;
text-decoration: none;
color: var(--text-color);
border-radius: 4px;
transition: var(--transition);
font-size: 14px;
}
.user-nav ul li a:hover,
.user-nav ul li a.active {
background-color: var(--light-color);
color: var(--primary-color);
}
.user-nav ul li a i {
margin-right: 10px;
font-size: 16px;
}
.badge {
background-color: var(--danger-color);
color: white;
font-size: 10px;
padding: 2px 6px;
border-radius: 10px;
margin-left: auto;
}
.user-main {
background-color: var(--bg-color);
padding: 20px;
border-radius: 8px;
box-shadow: var(--shadow-sm);
}
.user-center-header {
margin-bottom: 30px;
padding-bottom: 20px;
border-bottom: 1px solid var(--border-color);
}
.user-center-header h2 {
font-size: 24px;
color: var(--text-color);
margin-bottom: 5px;
}
.user-center-header p {
color: var(--text-muted);
}
.user-stats {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
gap: 20px;
margin-bottom: 30px;
}
.stat-item {
text-align: center;
padding: 20px;
background-color: var(--light-color);
border-radius: 8px;
}
.stat-number {
font-size: 28px;
font-weight: bold;
color: var(--primary-color);
margin-bottom: 5px;
}
.stat-label {
font-size: 14px;
color: var(--text-muted);
}
.user-activity {
margin-bottom: 30px;
padding-bottom: 30px;
border-bottom: 1px solid var(--border-color);
}
.section-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 20px;
}
.section-header h3 {
font-size: 18px;
color: var(--text-color);
}
.view-more {
font-size: 14px;
color: var(--primary-color);
text-decoration: none;
}
.view-more:hover {
text-decoration: underline;
}
.activity-list {
list-style: none;
}
.activity-item {
display: flex;
align-items: flex-start;
padding: 15px;
border-bottom: 1px solid var(--border-color);
}
.activity-item:last-child {
border-bottom: none;
}
.activity-icon {
width: 40px;
height: 40px;
background-color: var(--light-color);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
margin-right: 15px;
flex-shrink: 0;
}
.activity-icon i {
color: var(--primary-color);
font-size: 18px;
}
.activity-content {
flex: 1;
}
.activity-title {
margin-bottom: 5px;
font-size: 14px;
color: var(--text-color);
}
.activity-title a {
color: var(--primary-color);
text-decoration: none;
}
.activity-title a:hover {
text-decoration: underline;
}
.activity-time {
font-size: 12px;
color: var(--text-muted);
}
/* 商品发布页样式 */
.post-product-form {
background-color: var(--bg-color);
padding: 30px;
border-radius: 8px;
box-shadow: var(--shadow-sm);
}
.form-section {
margin-bottom: 40px;
}
.form-section h3 {
margin-bottom: 20px;
padding-bottom: 10px;
border-bottom: 1px solid var(--border-color);
font-size: 18px;
color: var(--text-color);
}
.form-row {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 20px;
margin-bottom: 20px;
}
.form-group {
margin-bottom: 20px;
}
.form-group label {
display: block;
margin-bottom: 8px;
font-weight: bold;
color: var(--text-color);
}
.form-group input,
.form-group select,
.form-group textarea {
width: 100%;
padding: 10px 15px;
border: 1px solid var(--border-color);
border-radius: 4px;
font-size: 14px;
font-family: inherit;
transition: all 0.3s ease;
position: relative;
}
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
outline: none;
border-color: var(--primary-color);
box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.1);
transform: translateY(-1px);
}
.form-group textarea {
resize: vertical;
min-height: 120px;
}
.image-upload-section {
margin-bottom: 20px;
}
.main-image-upload {
margin-bottom: 20px;
}
.upload-box {
border: 2px dashed var(--border-color);
border-radius: 8px;
padding: 30px;
text-align: center;
cursor: pointer;
transition: var(--transition);
}
.upload-box:hover {
border-color: var(--primary-color);
background-color: rgba(0, 123, 255, 0.05);
}
.upload-box.has-image {
border-style: solid;
padding: 0;
overflow: hidden;
position: relative;
}
.upload-box.has-image img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.upload-box i {
font-size: 36px;
color: var(--border-color);
margin-bottom: 10px;
}
.upload-box:hover i {
color: var(--primary-color);
}
.upload-box p {
margin-bottom: 5px;
color: var(--text-color);
font-size: 14px;
}
.upload-box small {
color: var(--text-muted);
font-size: 12px;
}
.secondary-images-upload {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
gap: 10px;
}
.secondary-images-upload .upload-box {
padding: 20px 10px;
}
.secondary-images-upload .upload-box i {
font-size: 24px;
}
.checkbox-group {
display: flex;
gap: 20px;
flex-wrap: wrap;
}
.checkbox-group label {
display: flex;
align-items: center;
cursor: pointer;
font-weight: normal;
margin-bottom: 0;
}
.checkbox-group label input {
width: auto;
margin-right: 8px;
}
.checkbox-group label i {
margin-right: 8px;
color: var(--primary-color);
}
.form-actions {
display: flex;
gap: 10px;
justify-content: flex-end;
padding-top: 20px;
border-top: 1px solid var(--border-color);
}
/* 响应式设计 */
@media (max-width: 768px) {
.navbar .container {
flex-direction: column;
gap: 15px;
}
.search-box {
width: 100%;
max-width: 100%;
}
.nav-links {
width: 100%;
justify-content: center;
}
.nav-links li {
margin: 0 5px;
}
.product-list-container,
.user-center-content {
grid-template-columns: 1fr;
}
.sidebar,
.user-sidebar {
position: static;
}
.product-details-container {
grid-template-columns: 1fr;
}
.form-row {
grid-template-columns: 1fr;
}
.action-buttons {
grid-template-columns: 1fr;
}
.product-meta-info {
grid-template-columns: 1fr;
}
.categories-grid {
grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
gap: 10px;
}
.product-grid {
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
gap: 15px;
}
.footer-content {
grid-template-columns: 1fr;
text-align: center;
}
.checkbox-group {
flex-direction: column;
align-items: flex-start;
}
}
@media (max-width: 480px) {
.container {
padding: 0 10px;
}
.logo {
font-size: 20px;
}
.logo i {
font-size: 24px;
}
.nav-links {
flex-wrap: wrap;
}
.nav-links li {
margin: 5px;
}
.nav-links a {
padding: 5px 10px;
font-size: 14px;
}
.search-box input {
padding: 8px 12px;
}
.search-box button {
padding: 8px 15px;
}
.section-title {
font-size: 22px;
}
.categories-grid {
grid-template-columns: repeat(auto-fit, minmax(80px, 1fr));
gap: 10px;
}
.category-item {
padding: 15px 5px;
}
.category-item i {
font-size: 24px;
}
.product-grid {
grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
gap: 10px;
}
.product-card {
font-size: 13px;
}
.product-title {
font-size: 13px;
height: 40px;
}
.current-price {
font-size: 16px;
}
.sidebar,
.user-sidebar,
.user-main,
.post-product-form {
padding: 15px;
}
.product-images {
padding: 10px;
}
.main-image {
height: 250px;
}
.thumbnails {
grid-template-columns: repeat(3, 1fr);
}
.thumbnail-item {
height: 70px;
}
.product-info h1 {
font-size: 20px;
}
.current-bid-amount {
font-size: 24px;
}
.auth-container {
padding: 20px;
margin: 20px;
}
.login-container,
.register-container {
padding: 30px 25px;
margin: 20px;
}
.login-header h1,
.register-header h1 {
font-size: 26px;
}
.login-page,
.register-page {
padding: 20px 10px;
}
}
/* 购物车页面样式 */
.cart-page {
padding: 20px 0;
}
.cart-container {
display: grid;
grid-template-columns: 1fr 350px;
gap: 20px;
}
.cart-items-section {
background-color: var(--bg-color);
padding: 20px;
border-radius: 8px;
box-shadow: var(--shadow-sm);
}
.cart-header {
display: grid;
grid-template-columns: 50px 2fr 1fr 150px 1fr 80px;
gap: 15px;
padding: 15px 0;
border-bottom: 2px solid var(--border-color);
font-weight: bold;
font-size: 14px;
color: var(--text-color);
}
.select-all {
display: flex;
align-items: center;
cursor: pointer;
}
.select-all input {
margin-right: 8px;
}
.cart-item {
display: grid;
grid-template-columns: 50px 2fr 1fr 150px 1fr 80px;
gap: 15px;
padding: 20px 0;
border-bottom: 1px solid var(--border-color);
align-items: center;
}
.cart-item:last-child {
border-bottom: none;
}
.item-checkbox {
display: flex;
align-items: center;
cursor: pointer;
}
.item-checkbox input {
margin-right: 0;
}
.item-info {
display: flex;
gap: 15px;
align-items: center;
}
.item-info img {
width: 80px;
height: 80px;
object-fit: cover;
border-radius: 4px;
}
.item-details h4 {
margin-bottom: 5px;
font-size: 16px;
color: var(--text-color);
}
.item-seller,
.item-status {
font-size: 12px;
color: var(--text-muted);
margin: 3px 0;
}
.item-price,
.item-subtotal {
font-size: 16px;
font-weight: bold;
color: var(--danger-color);
}
.item-quantity {
display: flex;
align-items: center;
gap: 5px;
}
.quantity-btn {
width: 30px;
height: 30px;
border: 1px solid var(--border-color);
background-color: var(--bg-color);
border-radius: 4px;
cursor: pointer;
font-size: 16px;
transition: var(--transition);
}
.quantity-btn:hover {
background-color: var(--light-color);
border-color: var(--primary-color);
}
.quantity-input {
width: 50px;
height: 30px;
text-align: center;
border: 1px solid var(--border-color);
border-radius: 4px;
font-size: 14px;
}
.item-actions {
display: flex;
justify-content: center;
}
.btn-delete {
background: none;
border: none;
color: var(--danger-color);
cursor: pointer;
font-size: 18px;
padding: 5px;
transition: var(--transition);
}
.btn-delete:hover {
color: #c82333;
transform: scale(1.1);
}
.cart-empty {
text-align: center;
padding: 80px 20px;
}
.empty-cart-icon {
font-size: 80px;
color: var(--text-muted);
margin-bottom: 20px;
}
.cart-empty p {
font-size: 18px;
color: var(--text-muted);
margin-bottom: 20px;
}
.cart-summary {
background-color: var(--bg-color);
padding: 20px;
border-radius: 8px;
box-shadow: var(--shadow-sm);
height: fit-content;
position: sticky;
top: 80px;
}
.summary-header {
margin-bottom: 20px;
padding-bottom: 15px;
border-bottom: 1px solid var(--border-color);
}
.summary-header h3 {
font-size: 18px;
color: var(--text-color);
}
.summary-content {
margin-bottom: 20px;
}
.summary-row {
display: flex;
justify-content: space-between;
padding: 10px 0;
font-size: 14px;
color: var(--text-color);
}
.summary-row.summary-total {
font-size: 18px;
font-weight: bold;
color: var(--danger-color);
border-top: 2px solid var(--border-color);
padding-top: 15px;
margin-top: 10px;
}
/* 支付页面样式 */
.checkout-page {
padding: 20px 0;
}
.checkout-container {
display: grid;
grid-template-columns: 1fr 400px;
gap: 20px;
}
.checkout-left {
display: flex;
flex-direction: column;
gap: 20px;
}
.checkout-section {
background-color: var(--bg-color);
padding: 25px;
border-radius: 8px;
box-shadow: var(--shadow-sm);
}
.checkout-section h3 {
margin-bottom: 20px;
font-size: 18px;
color: var(--text-color);
display: flex;
align-items: center;
gap: 10px;
}
.checkout-section h3 i {
color: var(--primary-color);
}
.address-form .form-row {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 15px;
margin-bottom: 15px;
}
.address-form .form-group {
margin-bottom: 15px;
}
.address-form label {
display: block;
margin-bottom: 8px;
font-weight: bold;
color: var(--text-color);
font-size: 14px;
}
.address-form input,
.address-form select,
.address-form textarea {
width: 100%;
padding: 10px;
border: 1px solid var(--border-color);
border-radius: 4px;
font-size: 14px;
font-family: inherit;
}
.address-form textarea {
resize: vertical;
}
.delivery-options {
display: flex;
flex-direction: column;
gap: 10px;
}
.delivery-option {
display: flex;
align-items: center;
padding: 15px;
border: 2px solid var(--border-color);
border-radius: 8px;
cursor: pointer;
transition: var(--transition);
}
.delivery-option:hover {
border-color: var(--primary-color);
background-color: rgba(0, 123, 255, 0.05);
}
.delivery-option input[type="radio"] {
margin-right: 15px;
width: auto;
}
.delivery-option input[type="radio"]:checked + .option-content {
color: var(--primary-color);
}
.option-content {
display: flex;
align-items: center;
gap: 15px;
flex: 1;
}
.option-content i {
font-size: 24px;
color: var(--primary-color);
}
.option-content div {
display: flex;
flex-direction: column;
}
.option-content strong {
font-size: 16px;
margin-bottom: 3px;
}
.option-content span {
font-size: 12px;
color: var(--text-muted);
}
.checkout-products {
display: flex;
flex-direction: column;
gap: 15px;
}
.checkout-product-item {
display: grid;
grid-template-columns: 80px 2fr 1fr 80px 1fr;
gap: 15px;
padding: 15px;
border: 1px solid var(--border-color);
border-radius: 8px;
align-items: center;
}
.checkout-product-item img {
width: 80px;
height: 80px;
object-fit: cover;
border-radius: 4px;
}
.checkout-product-item .product-info h4 {
margin-bottom: 5px;
font-size: 16px;
color: var(--text-color);
}
.checkout-product-item .product-info p {
font-size: 12px;
color: var(--text-muted);
}
.checkout-product-item .product-price,
.checkout-product-item .product-subtotal {
font-size: 16px;
font-weight: bold;
color: var(--danger-color);
}
.checkout-product-item .product-quantity {
text-align: center;
color: var(--text-muted);
}
.checkout-right {
position: sticky;
top: 80px;
height: fit-content;
}
.order-summary {
background-color: var(--bg-color);
padding: 25px;
border-radius: 8px;
box-shadow: var(--shadow-sm);
}
.order-summary h3 {
margin-bottom: 20px;
font-size: 18px;
color: var(--text-color);
padding-bottom: 15px;
border-bottom: 1px solid var(--border-color);
}
.summary-details {
margin-bottom: 20px;
}
.summary-details .summary-row {
display: flex;
justify-content: space-between;
padding: 10px 0;
font-size: 14px;
color: var(--text-color);
}
.summary-details .summary-row.summary-total {
font-size: 20px;
font-weight: bold;
color: var(--danger-color);
border-top: 2px solid var(--border-color);
padding-top: 15px;
margin-top: 10px;
}
@media (max-width: 968px) {
.cart-container,
.checkout-container {
grid-template-columns: 1fr;
}
.cart-summary,
.checkout-right {
position: static;
}
.cart-header,
.cart-item {
grid-template-columns: 40px 1fr;
gap: 10px;
}
.cart-header .cart-header-item:not(:first-child),
.cart-item > div:not(.item-checkbox):not(.item-info) {
display: none;
}
.item-info {
flex-direction: column;
align-items: flex-start;
}
.item-info img {
width: 100%;
height: auto;
}
.address-form .form-row {
grid-template-columns: 1fr;
}
}
/* 聊天窗口样式 */
.chat-modal {
display: none;
position: fixed;
bottom: 20px;
right: 20px;
width: 400px;
height: 600px;
background-color: var(--bg-color);
border-radius: 12px;
box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
z-index: 10000;
flex-direction: column;
overflow: hidden;
animation: slideUp 0.3s ease-out;
}
.chat-modal.active {
display: flex;
}
@keyframes slideUp {
from {
opacity: 0;
transform: translateY(20px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.chat-container {
display: flex;
flex-direction: column;
height: 100%;
}
.chat-header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 15px 20px;
background: linear-gradient(135deg, #007bff 0%, #0056b3 100%);
color: white;
border-radius: 12px 12px 0 0;
}
.chat-seller-info {
display: flex;
align-items: center;
gap: 12px;
}
.chat-seller-info img {
width: 40px;
height: 40px;
border-radius: 50%;
object-fit: cover;
border: 2px solid rgba(255, 255, 255, 0.3);
}
.chat-seller-info h4 {
margin: 0;
font-size: 16px;
font-weight: 600;
}
.chat-status {
font-size: 12px;
opacity: 0.9;
}
.chat-close {
background: none;
border: none;
color: white;
font-size: 20px;
cursor: pointer;
padding: 5px;
transition: var(--transition);
border-radius: 4px;
}
.chat-close:hover {
background-color: rgba(255, 255, 255, 0.2);
}
.chat-messages {
flex: 1;
overflow-y: auto;
padding: 20px;
background-color: #f8f9fa;
display: flex;
flex-direction: column;
gap: 15px;
}
.chat-message {
display: flex;
gap: 10px;
animation: fadeIn 0.3s ease-out;
}
@keyframes fadeIn {
from {
opacity: 0;
transform: translateY(10px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.chat-message.sent {
flex-direction: row-reverse;
}
.chat-message-avatar {
width: 36px;
height: 36px;
border-radius: 50%;
object-fit: cover;
flex-shrink: 0;
}
.chat-message-content {
max-width: 70%;
display: flex;
flex-direction: column;
gap: 5px;
}
.chat-message.sent .chat-message-content {
align-items: flex-end;
}
.chat-message-bubble {
padding: 12px 16px;
border-radius: 12px;
font-size: 14px;
line-height: 1.5;
word-wrap: break-word;
}
.chat-message.received .chat-message-bubble {
background-color: white;
color: var(--text-color);
border-bottom-left-radius: 4px;
}
.chat-message.sent .chat-message-bubble {
background-color: var(--primary-color);
color: white;
border-bottom-right-radius: 4px;
}
.chat-message-time {
font-size: 11px;
color: var(--text-muted);
padding: 0 8px;
}
.chat-input-area {
padding: 15px;
background-color: white;
border-top: 1px solid var(--border-color);
}
.chat-input-wrapper {
display: flex;
gap: 10px;
margin-bottom: 10px;
}
.chat-input-wrapper input {
flex: 1;
padding: 10px 15px;
border: 1px solid var(--border-color);
border-radius: 20px;
font-size: 14px;
outline: none;
transition: var(--transition);
}
.chat-input-wrapper input:focus {
border-color: var(--primary-color);
box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.1);
}
.send-btn {
width: 40px;
height: 40px;
border-radius: 50%;
background-color: var(--primary-color);
color: white;
border: none;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: var(--transition);
flex-shrink: 0;
}
.send-btn:hover {
background-color: #0056b3;
transform: scale(1.05);
}
.send-btn:disabled {
background-color: var(--secondary-color);
cursor: not-allowed;
transform: none;
}
.quick-messages {
display: flex;
gap: 8px;
flex-wrap: wrap;
}
.quick-msg-btn {
padding: 6px 12px;
background-color: var(--light-color);
border: 1px solid var(--border-color);
border-radius: 15px;
font-size: 12px;
color: var(--text-color);
cursor: pointer;
transition: var(--transition);
}
.quick-msg-btn:hover {
background-color: var(--primary-color);
color: white;
border-color: var(--primary-color);
}
/* 卖家店铺页面样式 */
.seller-shop-page {
padding: 20px 0;
}
.seller-shop-header {
background-color: var(--bg-color);
padding: 30px;
border-radius: 12px;
box-shadow: var(--shadow-sm);
margin-bottom: 30px;
}
.seller-shop-info {
display: flex;
align-items: center;
gap: 30px;
}
.seller-shop-avatar {
flex-shrink: 0;
}
.seller-shop-avatar img {
width: 100px;
height: 100px;
border-radius: 50%;
object-fit: cover;
border: 3px solid var(--primary-color);
}
.seller-shop-details {
flex: 1;
}
.seller-shop-title {
font-size: 28px;
font-weight: 700;
color: var(--text-color);
margin-bottom: 15px;
}
.seller-shop-meta {
display: flex;
flex-direction: column;
gap: 15px;
}
.seller-rating-info {
display: flex;
align-items: center;
gap: 10px;
font-size: 14px;
}
.seller-rating-info .stars {
color: var(--warning-color);
}
.seller-rating-info .divider {
color: var(--text-muted);
}
.seller-shop-stats {
display: flex;
gap: 30px;
}
.seller-shop-stats .stat-item {
display: flex;
flex-direction: column;
gap: 5px;
}
.seller-shop-stats .stat-number {
font-size: 24px;
font-weight: 700;
color: var(--primary-color);
}
.seller-shop-stats .stat-label {
font-size: 14px;
color: var(--text-muted);
}
.seller-shop-actions {
flex-shrink: 0;
}
.seller-products-section {
background-color: var(--bg-color);
padding: 30px;
border-radius: 12px;
box-shadow: var(--shadow-sm);
}
.seller-products-section .section-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 25px;
padding-bottom: 15px;
border-bottom: 2px solid var(--border-color);
}
.seller-products-section .section-header h2 {
font-size: 24px;
color: var(--text-color);
margin: 0;
}
.empty-state {
text-align: center;
padding: 60px 20px;
color: var(--text-muted);
}
.empty-state i {
font-size: 64px;
margin-bottom: 20px;
color: var(--border-color);
}
.empty-state p {
font-size: 16px;
}
/* 响应式设计 - 聊天窗口 */
@media (max-width: 768px) {
.chat-modal {
width: 100%;
height: 100%;
bottom: 0;
right: 0;
border-radius: 0;
}
.chat-header {
border-radius: 0;
}
.seller-shop-info {
flex-direction: column;
text-align: center;
}
.seller-shop-stats {
justify-content: center;
}
}
/* 订单页面样式 */
.orders-filter,
.products-filter {
display: flex;
gap: 10px;
margin-bottom: 25px;
flex-wrap: wrap;
}
.filter-btn {
padding: 8px 20px;
background-color: var(--light-color);
border: 1px solid var(--border-color);
border-radius: 20px;
color: var(--text-color);
font-size: 14px;
cursor: pointer;
transition: var(--transition);
}
.filter-btn:hover {
background-color: var(--primary-color);
color: white;
border-color: var(--primary-color);
}
.filter-btn.active {
background-color: var(--primary-color);
color: white;
border-color: var(--primary-color);
}
.orders-list {
display: flex;
flex-direction: column;
gap: 20px;
}
.order-item {
background-color: var(--bg-color);
border: 1px solid var(--border-color);
border-radius: 8px;
padding: 20px;
transition: var(--transition);
}
.order-item:hover {
box-shadow: var(--shadow-md);
}
.order-header {
display: flex;
justify-content: space-between;
align-items: center;
padding-bottom: 15px;
border-bottom: 1px solid var(--border-color);
margin-bottom: 15px;
}
.order-info {
display: flex;
flex-direction: column;
gap: 5px;
}
.order-number {
font-weight: 600;
color: var(--text-color);
font-size: 16px;
}
.order-date {
font-size: 13px;
color: var(--text-muted);
}
.order-status {
padding: 6px 12px;
border-radius: 4px;
font-size: 13px;
font-weight: 500;
}
.order-status.pending {
background-color: #fff3cd;
color: #856404;
}
.order-status.paid {
background-color: #d1ecf1;
color: #0c5460;
}
.order-status.shipped {
background-color: #d4edda;
color: #155724;
}
.order-status.completed {
background-color: #d1ecf1;
color: #0c5460;
}
.order-status.cancelled {
background-color: #f8d7da;
color: #721c24;
}
.order-products {
display: flex;
flex-direction: column;
gap: 15px;
margin-bottom: 15px;
}
.order-product {
display: flex;
gap: 15px;
align-items: center;
}
.order-product img {
width: 80px;
height: 80px;
object-fit: cover;
border-radius: 4px;
}
.order-product-info {
flex: 1;
}
.order-product-title {
font-size: 15px;
font-weight: 500;
color: var(--text-color);
margin-bottom: 5px;
}
.order-product-meta {
font-size: 13px;
color: var(--text-muted);
}
.order-product-price {
font-size: 16px;
font-weight: 600;
color: var(--danger-color);
min-width: 100px;
text-align: right;
}
.order-footer {
display: flex;
justify-content: space-between;
align-items: center;
padding-top: 15px;
border-top: 1px solid var(--border-color);
}
.order-total {
display: flex;
align-items: center;
gap: 10px;
}
.order-total-label {
font-size: 14px;
color: var(--text-muted);
}
.order-total-amount {
font-size: 20px;
font-weight: 700;
color: var(--danger-color);
}
.order-actions {
display: flex;
gap: 10px;
}
.order-actions .btn {
padding: 8px 16px;
font-size: 14px;
}
.header-actions {
display: flex;
gap: 10px;
}
.header-actions .btn {
padding: 10px 20px;
font-size: 14px;
display: flex;
align-items: center;
gap: 8px;
}
/* 设置页面样式 */
.settings-content {
display: flex;
flex-direction: column;
gap: 30px;
}
.settings-section {
background-color: var(--bg-color);
border: 1px solid var(--border-color);
border-radius: 8px;
padding: 25px;
}
.settings-section h3 {
display: flex;
align-items: center;
gap: 10px;
font-size: 18px;
color: var(--text-color);
margin-bottom: 20px;
padding-bottom: 15px;
border-bottom: 1px solid var(--border-color);
}
.settings-section h3 i {
color: var(--primary-color);
font-size: 20px;
}
.settings-form {
display: flex;
flex-direction: column;
gap: 20px;
}
.avatar-upload {
display: flex;
gap: 20px;
align-items: flex-start;
}
.avatar-preview {
width: 100px;
height: 100px;
border-radius: 50%;
overflow: hidden;
border: 3px solid var(--border-color);
flex-shrink: 0;
}
.avatar-preview img {
width: 100%;
height: 100%;
object-fit: cover;
}
.upload-controls {
display: flex;
flex-direction: column;
gap: 10px;
}
.upload-hint {
font-size: 12px;
color: var(--text-muted);
margin: 0;
}
.switch-label {
display: flex;
align-items: center;
gap: 12px;
cursor: pointer;
user-select: none;
}
.switch-label input[type="checkbox"] {
display: none;
}
.switch-slider {
position: relative;
width: 44px;
height: 24px;
background-color: rgba(0, 123, 255, 0.2); /* 浅蓝色背景 */
border: 1px solid var(--primary-color);
border-radius: 24px;
transition: var(--transition);
flex-shrink: 0;
}
.switch-slider::before {
content: '';
position: absolute;
width: 20px;
height: 20px;
border-radius: 50%;
background-color: var(--primary-color);
top: 2px;
left: 2px;
transition: var(--transition);
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}
.switch-label input[type="checkbox"]:checked + .switch-slider {
background-color: var(--primary-color);
border-color: var(--primary-color);
}
.switch-label input[type="checkbox"]:checked + .switch-slider::before {
transform: translateX(20px);
background-color: #fff;
}
.switch-text {
font-size: 15px;
color: var(--text-color);
font-weight: 500;
}
.form-hint {
font-size: 13px;
color: var(--text-muted);
margin-top: 5px;
margin-left: 0;
}
.form-actions {
display: flex;
gap: 10px;
padding-top: 10px;
}
/* 响应式设计 - 订单和设置页面 */
@media (max-width: 768px) {
.orders-filter,
.products-filter {
gap: 8px;
}
.filter-btn {
padding: 6px 16px;
font-size: 13px;
}
.order-header {
flex-direction: column;
align-items: flex-start;
gap: 10px;
}
.order-footer {
flex-direction: column;
align-items: flex-start;
gap: 15px;
}
.order-actions {
width: 100%;
flex-direction: column;
}
.order-actions .btn {
width: 100%;
}
.avatar-upload {
flex-direction: column;
}
.settings-section {
padding: 20px;
}
}
浙公网安备 33010602011771号