鲜花商城（HTML版）

鲜花商城（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 -m http.server 8080

# 方式二：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），建议在手机浏览器或开发者工具移动模式下查看

获取完整源码

• 网站：AI源码
• 本项目详情：https://www.aiyuanma.vip/posts/flower-mall-html