通用 B2C 商城前台

2026-08-06 16:38:08

行业：电商

载体：网站、Windows应用

技术：axios、Vue

业务和功能介绍

本项目是一款面向 C 端的移动端商城 H5，覆盖从浏览到售后的完整购物流程。核心模块包括：
① 商品侧：首页（推荐位 / 楼层 / 秒杀 / 拼团入口）、分类页（多级联动 + 筛选 + 排序）、搜索（热门词 + 历史 + 联想）、商品详情（SKU 选择 + 评价 + 详情图轮播 + 猜你喜欢）。

② 交易侧：购物车（多店铺聚合 + 失效商品识别）、订单提交（地址 / 优惠券 / 积分 / 配送方式四联动算价）、订单列表（待付 / 待发 / 待收 / 待评 / 售后）、订单详情、物流轨迹、申请退款。

③ 用户侧：注册登录（手机号 + 短信验证码 + 微信一键）、个人中心（订单 / 优惠券 / 收藏 / 地址 / 积分）、会员等级、签到、分享海报生成。
④ 运营侧：新人礼包、限时秒杀、拼团、优惠券、积分商城、消息中心、客服 IM。

整套设计对齐大厂主流电商 App 体验，强调首屏加载速度（路由懒加载 + 骨架屏 + 图片懒加载 + 资源预加载）与离线可用（关键页面缓存 + Pinia 持久化）。

项目实现

整体架构：采用 Vue 3 + Vite 工程化搭建，目录按 views / components / stores / api / utils / assets 分层。状态管理用 Pinia 按业务域拆 6 个 store（user / cart / order / goods / coupon / app），单文件最大不超过 400 行。

我负责的模块：

商品详情页：封装 SKU 选择组件（库存联动 / 规格禁用 / 限购规则），价格计算支持优惠券预核 + 积分抵扣预览
购物车：多店铺分组 + 失效商品灰显 + 编辑模式（数量步进 / 删除 / 移入收藏），通过 Pinia + localStorage 持久化，离线可用
订单提交页：地址 / 优惠券 / 配送方式 / 积分四个维度联动算价，用 computed 组合 4 个 store 数据，结算金额响应式
性能优化：首屏用路由懒加载 + defineAsyncComponent + 骨架屏；列表页虚拟滚动；图片用 v-lazy + WebP；包体首屏压缩到 180KB
遇到的难点：

多端适配：用 postcss-px-to-viewport 一套代码兼容 iPhone / 安卓 / 小程序，375/750 双稿视觉稿
SKU 联动：嵌套规格时用「笛卡尔积 + 库存过滤」算法，确保无库存组合不出现在 UI 上
离线体验：Service Worker 缓存首屏 HTML 和关键接口，用户弱网也能浏览已加载内容

示例图片视频

梅子熟了

30天前活跃

方向：前端-Web前端、桌面端-Electron、

交付率：100.00%

查看主页

相似推荐

粮食收购点出入口系统-粮食收购点出入口系统

1.为了乡镇粮食收购点的业务功能如：出入库、记录库存、统计查询使用方便 2.满足多个收购点多租户登录使用 3.满足多个品种地磅进行系统适配使用 4.满足多个品牌摄像头接入 5.能够进行实时小票打印，包含销售模块、收购模块，能够根据小票的二维码快速查询信息

江西省人民医院医疗廉洁防控平台

对接医院信息系统，自动归集：处方、医嘱、药品耗材使用、检查检验申请、收费结算、耗材采购、设备采购、患者就诊、医保结算等全量业务数据，形成医疗行为大数据池。内置风控规则模型，自动筛查异常行为并预警：大处方、重复开药、高频开同类检查、耗材异常使用、同一医生高频开具特定药品 / 耗材、超适应症检查、医保违规结算等；按风险等级分为红 / 黄预警，自动推送至医务、医德医风办、纪检部门。

课表查询（正方教务系统多校适配版）

高校教务系统（正方 jwglxt 等）是学生查询课表、成绩、考试安排的唯一官方入口，但普遍存在四个现实问题：一是登录需 RSA 加密加密并对接 CSRF 令牌，页面为服务端渲染的复杂表格，手机浏览器打开体验极差；二是课表的单双周、分段奇偶、调休与临时停课信息只能靠学生自己推算，极易看错；三是成绩与绩点口径混乱，挂科课程常被错误计入"已获得学分"，导致学生无法与学校数字对账；四是空教室只能逐节次手工查询，效率极低。学生每周都要反复核对课表与空教室，却缺少一个能在手机上清晰查看、并可一键导入系统日历的工具。本项目立项，即为解决高校学生在课表、成绩、考试、空教室四类高频信息上的查询成本问题。

WPF上位机-上位机SCADA/HMI

🌟 核心架构与技术亮点 (Architecture Highlights) 🔄 内存级环形缓冲区：采用手搓环形队列实现高频采集与消费解耦，极大地降低 C# 垃圾回收 (GC) 压力支撑界面流畅渲染。 ⚡ 自研轻量级数据核心：轻量级内存数据核心，高性能内存状态机，实时采集点位高速路由，实时状态响应与事件报警分发。 ⏱️ 自适应时间补偿：基于高精度 Stopwatch 计时，动态修正采集调度周期，抑制高频采集任务的时间漂移与时序抖动 🔒 无饥饿并发控制：基于轻量级异步锁+线程池隔离策略，PLC通信负载与UI线程解耦。

智能汽车项目

完成汽车某些功能的座仓设计与交付，使座仓具备了高端的应用场景与用户使用感受；汽车座仓的流畅度设计，保障汽车在整体市场的高竞争力；汽车座仓的人因设计效果的落地与实施效果跟踪与改进，保障汽车在整体市场的高竞争力。