水果商城

项目概览

• 项目类型：移动端电商应用
• 核心方向：商品浏览、购物车、订单确认、地址管理
• 负责角色：前端开发
• 当前状态：内容可继续按真实项目细节补充

项目背景

水果商城是一个偏移动端体验的电商项目，覆盖首页推荐、商品分类、商品详情、购物车、订单确认和地址管理等核心流程。项目重点在于商品展示、购物车状态同步、移动端适配和下单链路体验。

技术栈

• 前端：Vue 3、TypeScript、Vite
• 状态管理：Pinia、持久化存储
• UI 与样式：Vant、SCSS、移动端适配
• 请求层：Axios、接口状态封装
• 工程化：路由懒加载、组件拆分、构建优化

我的职责

• 负责商城首页、分类页、商品详情页、购物车和订单确认页开发。
• 使用 Pinia 管理购物车状态，实现商品数量增减、选中状态和总价计算。
• 封装商品卡片、价格展示、数量步进器和地址选择等业务组件。
• 处理移动端布局适配，保证不同屏幕尺寸下页面展示稳定。
• 封装请求方法和接口模块，统一管理商品、购物车、订单相关接口。

核心功能

• 商品展示：支持首页推荐、分类列表、商品详情和价格展示。
• 购物车：支持数量调整、选中状态、总价计算和持久化。
• 订单确认：支持地址选择、商品确认和结算入口。
• 移动端适配：处理底部操作栏、安全间距和触控区域。

技术亮点

购物车状态设计

购物车状态集中维护在 Pinia 中，商品数量、选中状态、总价和结算数量都通过派生计算得到，降低页面之间状态不同步的问题。

商品组件复用

商品卡片在首页推荐、分类列表和搜索结果中复用，通过 props 控制展示模式，通过事件回调处理加入购物车和跳转详情。

移动端体验优化

页面使用固定底部操作栏、图片懒加载和合理的触控区域，保证商品浏览、加购和结算流程更顺畅。

难点与解决方案

难点	解决方案
购物车多页面状态同步	使用 Pinia 统一维护购物车数据
商品卡片在多个场景复用	抽离展示字段和交互事件，减少页面耦合
移动端底部操作栏遮挡内容	页面底部预留安全间距
下单链路状态复杂	按购物车、地址、订单确认拆分状态模块

项目截图

后续替换为真实页面截图，建议包含首页、商品详情页、购物车页和订单确认页。

面试可讲点

• 电商购物车状态如何设计，如何计算总价和选中数量。
• 移动端商城页面如何处理底部栏、安全区域和滚动体验。
• 商品卡片如何复用，哪些逻辑应该放组件内，哪些交给页面。
• 从商品详情到订单确认的前端数据流如何组织。

后续优化

• 补充真实移动端页面截图。
• 增加购物车状态流转图。
• 补充移动端适配方案和安全区域处理细节。