鲜花商城（HTML 版）
项目简介
鲜花商城是一个面向移动端的鲜花电商前端演示项目，采用纯 HTML + CSS + JavaScript 实现，无需构建工具即可直接运行。项目模拟了完整的购物流程：浏览商品、查看详情、下单确认、订单管理以及用户登录注册，适合作为前端大作业或移动端页面练习。
技术栈
| 技术 | 说明 |
|---|---|
| HTML5 | 页面结构 |
| CSS3 | 样式与移动端适配 |
| JavaScript | 交互逻辑与 Mock 数据 |
| Swiper 8 | 首页与详情页轮播图（CDN 引入） |
| localStorage | 模拟用户登录态与注册数据持久化 |
功能介绍
1. 首页（index.html）
- 顶部轮播图自动播放
- 鲜花分类导航：全部、爱情鲜花、生日鲜花、友情鲜花、婚礼鲜花
- 商品排序筛选：综合、销量、价格、新品
- 双列商品列表展示（图片、名称、价格、原价、销量、标签）
- 点击商品跳转详情页，通过 URL 参数传递商品 ID
- 底部导航：首页、订单、我的
2. 商品详情（flower-detail.html）
- 商品图片轮播展示
- 展示商品名称、价格、描述、花语、配送范围、温馨提示
- 服务标签：新鲜直达、3 小时送达
- 「立即下单」跳转至订单确认页
3. 订单确认（orderComfirm.html）
- 展示待购商品信息
- 收货地址、配送时间与配送方式
- 订单备注输入
- 价格明细：商品金额、配送费、优惠券、实付款
- 提交订单后提示成功并返回首页
4. 订单列表（orderList.html）
- 订单状态 Tab：全部、待付款、待发货、待收货、已完成
- 订单卡片展示：订单号、状态、商品信息、规格、价格
- 不同状态对应操作按钮（取消订单、去支付、联系客服、查看物流、确认收货、删除订单、再次购买）
- 支持返回上一页
5. 个人中心（my.html）
- 展示用户头像、昵称、用户 ID
- 功能入口：我的订单、退出登录
- 退出登录清除登录态并跳转登录页
6. 用户登录（login.html）
- 用户名 / 密码登录
- 表单校验（非空校验）
- 「记住我」选项（UI 展示）
- 登录成功后将用户信息写入
localStorage - 已登录用户自动跳转首页
7. 用户注册（register.html）
- 用户名、昵称、密码、确认密码
- 密码强度实时检测（弱 / 中 / 强）
- 用户名重复校验、密码长度与一致性校验
- 注册数据持久化至
localStorage
测试账号
| 用户名 | 密码 |
|---|---|
| user1 | 123456 |
| user2 | 123456 |
| user3 | 123456 |
运行方式
直接用浏览器打开index.html即可，或使用本地静态服务器：
# 方式一：Python 内置服务python3-mhttp.server8080# 方式二：VS Code Live Server 插件# 右键 index.html → Open with Live Server访问地址示例：http://localhost:8080/index.html
文件夹目录
flower-mall-html/ ├── index.html # 首页：轮播图、分类、商品列表 ├── flower-detail.html # 商品详情页 ├── orderComfirm.html # 订单确认页 ├── orderList.html # 订单列表页 ├── my.html # 个人中心 ├── login.html # 登录页 ├── register.html # 注册页 ├── flower.jpg # 商品与轮播图示例图片 ├── 项目说明.md # 项目说明文档（本文件） └── 演示材料/ └── 效果演示.mp4 # 项目效果演示视频页面跳转关系
login.html ←→ register.html ↓ index.html → flower-detail.html → orderComfirm.html → index.html ↓ ↓ orderList.html my.html说明
- 本项目为前端静态演示，商品、订单、用户数据均为 Mock 数据，无真实后端接口
- 样式内联在各 HTML 文件中，未拆分独立 CSS / JS 文件
- 页面按移动端设计（最大宽度约 750px），建议在手机浏览器或开发者工具移动模式下查看
