---
url: https://www.lingpapl.cn/projects/fruit-shop.md
description: 基于 Vue3、TypeScript、Pinia 和移动端适配的水果商城项目复盘。
---

# 水果商城

![水果商城项目截图占位](/images/project-placeholder.svg)

## 项目概览

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

## 项目背景

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

## 技术栈

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

## 我的职责

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

## 核心功能

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

## 技术亮点

### 购物车状态设计

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

### 商品组件复用

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

### 移动端体验优化

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

## 难点与解决方案

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

## 项目截图

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

## 面试可讲点

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

## 后续优化

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