社区生鲜团购电商小程序,覆盖水果蔬菜、肉禽蛋奶、海鲜水产、粮油调味、零食饮料、日用百货等全品类商品。核心功能包括:
1. 首页:顶部搜索栏、公告通知栏、Banner轮播图、8分类导航图标、限时秒杀活动区(含进度条和倒计时)、热门推荐商品瀑布流。
2. 商品分类:左侧一级分类导航(水果/蔬菜/肉禽/水产/粮油/零食/日用/烘焙),右侧二级分类标签筛选,商品网格展示。
3. 商品详情:图片轮播、价格展示(含划线原价)、规格选择弹窗(支持多规格切换)、数量加减、加入购物车和立即购买。
4. 购物车:全选/单选切换、商品数量编辑(加减按钮)、管理模式下批量删除、合计金额展示、去结算。支持空购物车友好提示。
5. 个人中心:用户头像昵称、余额和优惠券、订单状态统计(待付款/配送中/已完成/售后)、功能菜单(地址管理、优惠券、收藏、客服、设置)。
6. 搜索:关键词输入搜索、热门搜索标签、搜索历史管理(支持清除和历史删除)。
技术方案:基于 uni-app (Vue 3 Composition API) 跨端框架开发,使用 Pinia 进行全局状态管理,SCSS 模块化编写样式。
架构设计:组件化架构,核心组件 ProductCard(商品卡片)和 CartItem(购物车项)在多页面间复用。Mock 数据层独立封装,18 个商品覆盖 8 个一级分类和 32 个二级分类,数据结构与真实后端 API 接口完全对齐,可无缝切换。
购物车系统:基于 Pinia + uni.storage 实现了购物车本地持久化,包含增删改查、全选计算、规格区分、数量限制等功能,用户关闭小程序后重新打开数据不丢失。
独立完成从需求分析、UI 设计、前端架构、数据建模到完整编码实现的全流程开发。