FootStyle鞋类电商

项目简介

FootStyle 是一款面向 PC 端的时尚鞋类电商演示网站，采用纯前端技术实现，无需后端服务即可运行。项目以单页面应用（SPA）形式组织，通过原生 HTML、CSS、JavaScript 完成商品展示、购物车、下单结算、订单查询及用户登录注册等完整购物流程，数据持久化使用浏览器 localStorage 模拟存储。

---

技术栈

类别	技术
页面结构	HTML5
样式	CSS3（CSS 变量、Grid 布局、响应式设计）
交互逻辑	原生 JavaScript（ES6+）
数据存储	localStorage（购物车、用户、订单）
运行方式	浏览器直接打开 index.html

---

功能介绍

1. 首页

• 顶部 Banner 宣传区，展示品牌主视觉
• 热门商品网格列表，展示 6 款鞋类商品（名称、价格、图片）
• 支持「查看详情」与「加入购物车」快捷操作
• 顶部导航栏固定（sticky），可随时切换页面

2. 商品详情

• 展示商品大图、名称、价格、详细描述
• 数量选择器（增减按钮），可指定购买数量
• 一键加入购物车，并实时更新头部购物车角标

3. 购物车

• 展示已添加商品（图片、名称、单价、数量）
• 支持修改商品数量、删除单品
• 自动计算并显示购物车总价
• 头部购物车图标显示商品总件数角标
• 点击「结算」进入下单流程（需先登录）

4. 下单结算

• 填写收货信息：姓名、手机号、地址、城市、邮编
• 选择支付方式：支付宝、微信支付、银行卡
• 右侧订单摘要实时展示商品明细与合计金额
• 提交订单后自动清空购物车，并跳转至「我的订单」

5. 我的订单

• 按时间倒序展示历史订单列表
• 每条订单包含：订单号、下单时间、订单状态、商品明细、订单总额
• 默认订单状态为「待发货」

6. 用户登录 / 注册

• 登录 / 注册 Tab 切换，同一页面完成两种操作
• 注册：用户名、邮箱、密码，邮箱唯一性校验
• 登录：邮箱 + 密码验证，成功后显示欢迎语
• 登录后头部显示用户名与「退出」按钮
• 结算下单前强制要求登录

7. 页面导航

• 单页应用架构，通过 data-page 属性切换视图，无页面刷新
• 包含页面：首页、商品详情、购物车、结算、我的订单、登录注册

---

商品数据

项目内置 6 款鞋类商品，涵盖运动鞋、高跟鞋、休闲鞋、靴子等品类：

ID	商品名称	价格	分类
1	经典款白色运动鞋	¥599	运动鞋
2	时尚黑色高跟鞋	¥799	高跟鞋
3	简约休闲小白鞋	¥399	休闲鞋
4	冬季保暖短靴	¥899	靴子
5	复古慢跑鞋	¥699	运动鞋
6	优雅尖头高跟鞋	¥899	高跟鞋

---

本地存储说明

localStorage 键名	用途
cart	购物车商品列表
users	注册用户数据
currentUser	当前登录用户
orders	历史订单记录

---

文件夹目录

pc-shop/
├── index.html              # 项目主入口（HTML 结构 + CSS 样式 + JavaScript 逻辑）
├── images/                 # 商品与页面图片资源
│   ├── shoes_1.png         # 首页 Banner 背景图
│   ├── shoes_2.png         # 经典款白色运动鞋
│   ├── shoes_3.png         # 时尚黑色高跟鞋
│   ├── shoes_4.png         # 简约休闲小白鞋
│   ├── shoes_5.png         # 复古慢跑鞋
│   ├── shoes_6.png         # 冬季保暖短靴
│   └── shoes_7.png         # 优雅尖头高跟鞋
├── 演示材料/               # 项目演示相关素材
│   └── 演示视频.mp4        # 功能演示录屏
└── 项目说明.md             # 本说明文档

---

快速启动

1. 克隆或下载项目到本地
2. 使用浏览器直接打开根目录下的 index.html
3. 无需安装依赖、无需启动服务器

若通过 file:// 协议打开，部分浏览器对 localStorage 有限制，建议使用本地静态服务器（如 VS Code Live Server）以获得最佳体验。

---

项目特点

• 零依赖：不依赖任何前端框架或构建工具，代码结构清晰，适合学习与实践
• 完整流程：覆盖浏览商品 → 加购 → 结算 → 下单 → 查单的完整电商链路
• 现代 UI：卡片式布局、悬停动效、品牌配色，适配 PC 端浏览体验
• 数据持久化：刷新页面后购物车、登录状态、订单记录均保留（同一浏览器内）