分销商城模板 | 购物全流程 + 双加盟通道 + 商户后台 14 页全套

基于 jQuery + Swiper + PhotoSwipe 打造的分销商城模板。14 个页面覆盖购物全流程、分销加盟体系与商户经营后台，新零售项目半天出前台。

一个带加盟模式的商城，页面量与业务复杂度都是硬成本。这套模板把商品、购物车、下单、订单、地址管理、实体/虚拟双加盟通道、商户数据后台全部做完，你只需对接后端接口，即可跑通一个完整的分销商城。

模板亮点

1. 14 页完整商城链路

首页、商品列表、商品详情、购物车、购买（地址确认）、我的订单、地址管理、地址详情、专场页面——从逛到买到收货的全流程页面闭环。

2. 双通道分销加盟体系

分销实体加盟（面向已有实体店的商户）+ 线上虚拟加盟（轻资产通道）+ 申请等待审核页，招商加盟业务的完整线上化流程，新零售项目的核心差异化模块。

3. 商户经营后台

今日成交量、成交金额、浏览量、待付款、退款中等核心经营数据看板，商户侧管理界面无需再设计。

4. 商品图沉浸式浏览

商品详情页 Swiper 主图轮播 + PhotoSwipe 相册放大浏览，商品展示的交互体验对齐主流电商。

5. 商品列表完整要素

搜索分类、排序、商品图、付款人数、库存、价格、运费，列表页的信息密度与电商转化要素均已落位。

技术栈

技术	用途
HTML + CSS	页面结构与样式
jQuery	DOM 交互
Swiper	商品主图轮播
PhotoSwipe	商品图放大浏览

项目结构

zimmur/
├── index.html           # 全部页面导航索引
├── 首页.html            # 商城首页（轮播 Banner + 促销入口）
├── 商品列表.html        # 列表页（筛选/排序/付款人数/库存）
├── 商品详情.html        # 详情页（Swiper 轮播 + PhotoSwipe）
├── 购物车.html          # 购物车（规格/数量/删除）
├── 购买.html            # 下单（收货地址确认）
├── 我的订单.html        # 订单列表
├── 地址管理.html / 地址管理详情.html
├── 分销实体加盟.html    # 实体店加盟申请
├── 线上虚拟加盟.html    # 虚拟加盟申请
├── 申请加盟-等待审核.html
├── 商户后台.html        # 经营数据看板
├── 专场页面.html        # 活动专场
├── css/  ├── js/  ├── photoswipe/  └── img/

快速开始

# 直接用浏览器打开 index.html 即可查看全部页面导航
npx serve .

无需 Node 环境、无需构建，部署时将整个目录上传至任意虚拟主机 / Nginx / OSS 静态托管即可。

二次开发指南

需求	操作
更换品牌	替换 img/ 中的 logo 与商品图，同名覆盖即可
修改文案 / 价格	各 HTML 内文案与价格直接修改
更换主题色	全局搜索替换 css/ 中的 #bda470 主色
对接后端接口	商品/订单卡片为静态结构，套入模板循环即可
调整加盟表单	两个加盟页为独立表单，按业务增删字段即可

适用场景

品牌分销商城、新零售加盟平台、区域代理电商、美妆/服饰/快消品商城、连锁门店线上化，也可作为任何带招商加盟需求的 B2C 商城前台模板。

从零自研 vs 使用本模板

维度	从零自研	使用本模板
交付周期	2~3 周起	半天出前台
加盟体系	需自行梳理	实体/虚拟双通道已内置
商户后台	需设计	经营数据看板已就绪
商品浏览	需接入组件	Swiper+PhotoSwipe 已调通
维护成本	自行承担	结构清晰，改文案即迭代

在线预览

将整个目录部署至任意静态托管（Vercel / Netlify / 虚拟主机）即可，入口为 index.html。

http://case.fedshare.cn/zimmur/