# ourMall **Repository Path**: meikaiaoxue/our-mall ## Basic Information - **Project Name**: ourMall - **Description**: 轻量化电子商城 - **Primary Language**: Unknown - **License**: Not specified - **Default Branch**: main - **Homepage**: None - **GVP Project**: No ## Statistics - **Stars**: 0 - **Forks**: 0 - **Created**: 2025-06-06 - **Last Updated**: 2025-06-09 ## Categories & Tags **Categories**: Uncategorized **Tags**: None ## README # 手机端电子商城系统 基于 React + Ant Design 开发的现代化手机端电子商城系统，采用 iPhone 15 显示尺寸设计，提供完整的购物体验。 ## 🚀 功能特性 ### 📱 手机端商城前台 - **用户认证**：登录、注册、忘记密码 - **商品浏览**：首页瀑布流展示、分类浏览、搜索功能 - **商品详情**：图片轮播、规格选择、评价展示 - **购物车**：商品管理、数量调整、批量结算 - **订单系统**：订单确认、支付流程、订单跟踪 - **用户中心**：个人信息、订单管理、收藏夹、浏览历史 - **地址管理**：收货地址的增删改查 - **积分系统**：积分获取、积分抵扣 ### 🎨 设计特色 - **响应式设计**：适配 iPhone 15 显示尺寸 (375px) - **现代化UI**：采用 Ant Design 组件库 - **流畅动画**：页面切换和交互动画 - **瀑布流布局**：商品展示采用无限滚动瀑布流 - **渐变设计**：登录页面采用渐变背景 ## 📁 项目结构 ``` ourMall/ ├── src/ │ ├── components/ # 组件 │ │ ├── Mobile/ # 手机端组件 │ │ │ └── Layout.js # 移动端布局组件 │ │ └── Admin/ # 管理端组件 │ ├── pages/ # 页面 │ │ ├── Mobile/ # 手机端页面 │ │ │ ├── Home.js # 首页 │ │ │ ├── Category.js # 分类页 │ │ │ ├── Cart.js # 购物车 │ │ │ ├── Profile.js # 个人中心 │ │ │ ├── Login.js # 登录页 │ │ │ ├── ProductDetail.js # 商品详情 │ │ │ ├── OrderConfirm.js # 订单确认 │ │ │ ├── Orders.js # 订单列表 │ │ │ ├── Favorites.js # 收藏夹 │ │ │ └── History.js # 浏览历史 │ │ └── Admin/ # 管理端页面 │ ├── services/ # API服务 │ │ ├── api.js # API接口 │ │ └── mockData.js # 模拟数据 │ ├── utils/ # 工具函数 │ │ ├── auth.js # 认证相关 │ │ └── storage.js # 本地存储 │ ├── App.js # 主应用 │ └── App.css # 全局样式 ``` ## 🛠️ 技术栈 - **前端框架**：React 19.1.0 - **UI组件库**：Ant Design 5.12.8 - **路由管理**：React Router DOM 6.20.1 - **图标库**：@ant-design/icons - **加密库**：crypto-js - **样式方案**：CSS + Styled Components - **数据存储**：LocalStorage (模拟后端) ## 🚀 快速开始 ### 环境要求 - Node.js >= 14.0.0 - npm >= 6.0.0 ### 安装依赖 ```bash cd ourMall npm install ``` ### 启动开发服务器 ```bash npm start ``` 项目将在 http://localhost:3000 启动 ### 访问地址 - **手机端商城**：http://localhost:3000/app - **管理端后台**：http://localhost:3000/admin ## 📱 页面功能详解 ### 1. 登录注册页 (/app/login) - 用户登录/注册 - 表单验证 - 测试账号：user/user 或 admin/admin ### 2. 首页 (/app) - 搜索框 - 轮播图广告 - 商品瀑布流展示 - 无限滚动加载 ### 3. 分类页 (/app/category) - 左侧分类导航 - 右侧商品网格展示 - 分类筛选 ### 4. 商品详情页 (/app/product/:id) - 商品图片轮播 - 商品信息展示 - 规格选择 - 加入购物车/立即购买 - 收藏功能 ### 5. 购物车页 (/app/cart) - 商品列表展示 - 数量调整 - 全选/取消全选 - 结算功能 ### 6. 订单确认页 (/app/order/confirm) - 收货地址选择 - 商品信息确认 - 积分抵扣 - 支付方式选择 ### 7. 个人中心 (/app/profile) - 用户信息展示 - 订单状态统计 - 功能菜单导航 ### 8. 订单列表 (/app/orders) - 订单状态筛选 - 订单详情查看 - 订单操作 ### 9. 收藏夹 (/app/favorites) - 收藏商品展示 - 取消收藏 - 跳转商品详情 ### 10. 浏览历史 (/app/history) - 按日期分组展示 - 历史记录管理 ## 🎯 核心功能流程 ### 购物流程 1. 用户浏览商品 → 点击商品进入详情页 2. 选择规格数量 → 加入购物车或立即购买 3. 购物车管理 → 选择商品进行结算 4. 订单确认 → 选择地址、使用积分、选择支付方式 5. 提交订单 → 模拟支付 → 支付成功 ### 用户体验 - **响应式设计**：完美适配手机屏幕 - **流畅动画**：页面切换和交互动画 - **直观导航**：底部导航栏，快速切换页面 - **数据持久化**：使用 LocalStorage 保存用户数据 ## 🔧 开发说明 ### 数据存储 项目使用 LocalStorage 模拟后端数据存储： - 用户信息 - 购物车数据 - 订单信息 - 收藏夹 - 浏览历史 - 收货地址 ### 模拟数据 在 `src/services/mockData.js` 中提供了完整的模拟数据： - 商品数据 - 分类数据 - 用户数据 - 轮播图数据 ### API接口 在 `src/services/api.js` 中模拟了完整的 API 接口： - 用户认证 - 商品管理 - 订单管理 - 分类管理 ## 🎨 样式设计 ### 设计规范 - **宽度**：375px (iPhone 15 标准) - **主色调**：#ff6b35 (橙色) - **辅助色**：#667eea, #764ba2 (渐变色) - **字体**：系统默认字体栈 ### 组件样式 - **卡片设计**：圆角、阴影效果 - **按钮设计**：圆角、渐变背景 - **导航设计**：固定底部导航 - **表单设计**：现代化输入框样式 ## 📝 待优化功能 - [ ] 商品评价系统 - [ ] 优惠券系统 - [ ] 物流跟踪 - [ ] 客服聊天 - [ ] 商品推荐算法 - [ ] 支付宝/微信支付集成 - [ ] 图片懒加载优化 - [ ] PWA 支持 ## 🤝 贡献指南 1. Fork 项目 2. 创建功能分支 (`git checkout -b feature/AmazingFeature`) 3. 提交更改 (`git commit -m 'Add some AmazingFeature'`) 4. 推送到分支 (`git push origin feature/AmazingFeature`) 5. 打开 Pull Request ## 📄 许可证 本项目采用 MIT 许可证 - 查看 [LICENSE](LICENSE) 文件了解详情 ## 📞 联系方式 如有问题或建议，请通过以下方式联系： - 邮箱：your-email@example.com - GitHub Issues：[提交问题](https://github.com/your-username/ourMall/issues) --- ⭐ 如果这个项目对你有帮助，请给它一个星标！ ### 首次运行项目 1. 安装依赖 ```bash npm install ``` 2. 启动开发服务器 ```bash npm start ``` ### 登录问题解决方案 如果遇到无法登录的问题，可能是因为本地数据未正确初始化。请按以下步骤操作： #### 方法一：清除浏览器数据重新初始化 1. 打开浏览器开发者工具（F12） 2. 在控制台（Console）中输入以下命令： ```javascript window.resetMallData() ``` 3. 刷新页面，系统会自动重新初始化所有数据 #### 方法二：手动清除localStorage 1. 打开浏览器开发者工具（F12） 2. 转到Application（应用程序）选项卡 3. 在左侧找到"Local Storage"，点击对应的域名 4. 删除所有以"mall_"开头的键值对 5. 刷新页面 ### 测试账号 #### 前台用户登录（/login） - 用户名：`user` 密码：`user` - 用户名：`admin` 密码：`admin` #### 后台管理员登录（/admin/login） - 超级管理员：`superadmin` / `admin` - 商品管理员：`productadmin` / `admin` - 订单管理员：`orderadmin` / `admin` ### 项目特性 - 📱 响应式设计，支持移动端和桌面端 - 🛍️ 完整的购物流程（浏览、加购、下单、支付） - 🎯 后台管理系统（商品、订单、用户管理） - 🔐 基于角色的权限控制 - 💾 本地数据持久化（localStorage） - 🎨 现代化UI设计 ### 开发说明 - 项目使用localStorage模拟后端数据存储 - 数据会在首次访问时自动初始化 - 开发环境下可使用`window.resetMallData()`重置所有数据 - 密码使用SHA256加密存储 ### 故障排除 1. **登录失败**：按照上述方法重置本地数据 2. **页面空白**：检查控制台错误，可能需要重新安装依赖 3. **数据不同步**：清除localStorage重新初始化 ### 技术栈 - React 18 - Ant Design 5 - React Router 6 - CryptoJS - CSS3 / Flexbox