通用 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 和关键接口，用户弱网也能浏览已加载内容

示例图片视频

梅子熟了

15天前活跃

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

交付率：100.00%

查看主页

相似推荐

Eleconet智能知识库系统-Eleconet

本系统是一个 RAG 智能知识库问答平台，包含八个功能模块。用户认证模块支持用户名、邮箱或手机号注册登录，也支持短信验证码免密登录，修改密码和联系方式均需验证，会话采用 JWT Token。知识库管理模块允许用户创建、编辑和删除知识库。文档上传支持多文件批量操作，后台异步完成解析和向量化。文件格式覆盖 TXT、PDF、Word、Excel、PPT，图片通过 OCR 提取文字，音视频通过 Whisper 转录。系统按 Free、Pro、Enterprise 三档套餐限制知识库数量、文档数和文件大小。 RAG 智能问答模块是系统核心。用户提问后，系统先语义检索知识库内容，再发送给大语言模型生成答案并附带引用来源。支持流式输出和多轮对话，历史对话可管理。分享与访客模块允许高级用户生成限时分享链接，访客无需登录即可对知识库提问。付费模块支持月付和年付，通过微信扫码或支付宝付款，自动确认支付并升级套餐，支持沙箱模拟支付。知识库市场模块由管理员发布模板，用户可一键基于模板创建知识库。系统管理模块赋予管理员用户管理、角色套餐修改、批量重置密码等权限。系统配置模块供管理员配置 AI 模型、OCR、短信、支付渠道等参数，密钥脱敏展示。后端 API 分为十组：/api/auth/ 为注册登录等九个认证接口；/api/kb/ 为知识库和文档管理七个接口；/api/chat/ 为问答和对话管理五个接口；/api/share/ 为分享链接四个接口；/api/guest/ 为访客免登录问答两个接口；/api/payment/ 为下单支付和配置八个接口；/api/kb-market/ 为模板管理五个接口；/api/settings/ 为系统配置十个接口；/api/admin/ 为用户管理五个接口；/api/stats/ 返回统计数据。前端页面中，/login 为登录页，/pricing 为价格页，/guest 为访客问答页。登录后 / 为仪表盘，/knowledge-base 为知识库列表，/knowledge-base/:id 为知识库详情，/market 为模板市场，/chat 为问答对话页，/conversations 为对话列表，/profile 为个人资料，/payment 为支付页，/settings 和 /admin 为管理员专用页。

车险智能报价与强交互作业平台-智能作业助理

项目简介：构建线上保险销售作业场景，引入AI技术优化业务流程；提升客户体验与业务员作业效率，推动业务线上化、智能化转型。业务流程：内勤通过后台客户数据推送进行企业微信好友添加，后台根据内勤业务特点和标签，每日定时下发作业清单及智能报价数据，内勤进行预览和确认后，系统协助向客户推送推荐报价单，以及后续客户线上确认和支付流程。

CodeWeaver-CodeWeaver

### 市场定位 CodeWeaver 是面向**高安全嵌入式/工业软件（军工GJB438C、航空DO‑178C、汽车ISO26262等）**的智能化单元测试用例生成工具，定位为**研发效率辅助工具，不做取证级工具**，采用本地私有化大模型Ollama，支持离线运行。 **对标产品**：LDRA/VectorCAST，但不走取证工具路线；做研发阶段前置增效，和国外取证工具互补。 **客户对象**：研究所、汽车零部件、医疗器械、核电、铁路软件团队。 ### 产品边界 - 明确是**研发辅助工具**，输出用例需要人工复核，不直接用于A级安全等级取证 - 规避高昂漫长的官方工具鉴定流程 - 核心价值：把设计文档业务约束自动转化测试场景，减轻工程师手工编写单元测试的重复劳动 ### 核心创新 **文档‑代码双向信息融合 + 约束‑场景映射的文档驱动测试**，并非单纯调用大模型生成测试代码的玩具Demo。

基于移动端的AI深度学习目标智能检测算法开发

本项目立足于移动端人工智能轻量化落地应用背景，针对传统目标检测算法依赖电脑端设备、实时性差、部署不便的问题，旨在实现深度学习检测模型的手机端本地化部署与实时推理。项目目标是开发一款安卓智能检测小程序，将训练完成的80类通用YOLOv5s目标检测模型移植并集成至移动端设备。软件核心包含模型轻量化适配、相机实时视频采集、多类别目标检测识别、检测结果渲染展示与移动端设备适配运行模块。整体业务流程为：启动安卓小程序后调用手机摄像头，实时读取画面帧数据，通过本地集成的YOLOv5s模型完成推理计算，自动识别画面中的各类目标物体并输出类别与位置信息。本项目全程在华为安卓手机上完成程序安装、调试、测试与运行验证，实现了脱离电脑与云端的端侧实时智能检测功能。

泛微OA替代型-智能审批与费控管理平台

1.立项背景和目标：旧有OA系统扩展性差，且无法适应复杂的差旅报销标准。目标自研一套集预算控制、发票验真、多级审批于一体的轻量级费控系统，覆盖全公司2000+员工日常报销。 2.核心功能模块：可视化流程设计器、动态自定义表单、预算冻结与释放、员工报销申请及OCR发票识别、出纳支付打款模块。 3.业务流程与路径：员工填写报销单（OCR识别发票） -> 系统自动校验预算余额并冻结额度 -> 根据金额路由至不同审批链（主管->财务） -> 审批通过后出纳批量支付 -> 支付完成后回传凭证并释放剩余预算。