智能零售商城WAP模板 | 13页购物H5源码，购物车+优惠券+订单开箱即用

基于 HTML + CSS + jQuery 打造的智能零售会员店移动端（WAP/H5）购物模板。开箱即用，替换品牌素材即可上线。

智能零售、无人便利店、会员制门店做线上购物入口时，购物车、结算、优惠券、订单这套交易闭环页面往往要反复打磨多轮。这套模板把从进店扫码到订单完成的完整购物流水线全部做好，且金额计算、库存限制、满减抵扣等交互逻辑均已用 jQuery 实现并可演示。

模板共 13 个页面（含 1 个演示导航首页），覆盖进店二维码、购物车、结算、优惠券、订单与个人中心六大场景，直接替换商品图与文案即可交付。

模板亮点

1. 13 个页面开箱即用

进店二维码、购物车（含空状态）、购物车结算、订单列表 / 详情 / 已完成 / 空状态、优惠券三态（未使用 / 已使用 / 暂无）、个人中心，购物流水线一页不缺。index.html 为模板演示导航首页，汇总全部页面入口，便于逐页预览与验收。

2. 真实可用的购物交互逻辑

• 数量加减器：加号受 stock 最大库存约束，超出即弹窗提示”该商品最大库存量”
• 金额实时联动：勾选商品、切换数量后，商品总价与实付金额即时重算
• 优惠券满减引擎：切换”满49减10 / 满99减25″等券种时，系统自动判断是否达到门槛并计算抵扣额与实付金额
• 编辑模式：购物车支持”编辑 / 完成”两种状态切换

3. 零售场景专用组件

• 进店 / 离店二维码页（配合闸机扫描的智能零售场景说明文案）
• 结算页优惠券选择器 + 微信支付方式选择
• 底部吸底支付栏（合计支付 + 立即付款）
• 订单状态 tab（全部 / 待付款 / 已完成）与优惠券状态 tab

4. 移动端 WAP 精细适配

320px ~ 640px 经典 WAP 视口布局，rem 相对字号 + flex 弹性布局，针对 480px、320px 两档断点做了密度与间距降级，小屏手机依然排版工整。

5. 轻量技术栈，二次开发友好

无构建依赖、无框架，仅 jQuery 一个库；样式附带 less/style.less 源码，改主题色、调间距均有源可循；内置一套自定义 Dialog 弹窗组件（alert/）。

技术栈

技术	版本	用途
HTML / CSS	—	页面结构与样式
jQuery	1.10	购物车计算与交互逻辑
Less	—	样式源码（style.less）
normalize.css	—	样式重置
自研 alert 组件	—	弹窗 / 加载提示

项目结构

znls/
├── index.html        # 演示导航首页（模板入口，汇总全部页面链接）
├── jdewm.html        # 进店二维码（扫码进店 / 离店开闸说明）
├── gwc.html          # 购物车（勾选、数量加减、编辑模式）
├── gwc_wdd.html      # 购物车空状态
├── gwc_qjs.html      # 购物车结算（优惠券选择、微信支付、金额合计）
├── wddd.html         # 订单列表（全部 / 待付款 / 已完成）
├── wddd_show.html    # 订单详情
├── wddd_ywc.html     # 订单列表（已完成）
├── wddd_wzt.html     # 订单列表空状态
├── wdyhj_wsy.html    # 优惠券（未使用）
├── wdyhj_ysy.html    # 优惠券（已使用）
├── wdyhj_zw.html     # 优惠券（暂无）
├── user.html         # 个人中心（订单 / 优惠券 / 购物车入口）
├── css/
│   ├── style.css     # 主样式（主题色在此修改）
│   └── normalize.css # 样式重置
├── less/
│   └── style.less    # 样式源码
├── js/
│   └── jquery.min.js # jQuery 1.10
├── img/              # 商品图、图标、优惠券背景等素材
└── alert/            # 自研弹窗组件（css / js / images）

快速开始

纯静态模板，无需安装任何依赖：

# 方式一：浏览器直接打开
双击 index.html 即可通过导航页浏览全部页面

# 方式二：本地静态服务器（推荐）
cd znls
python3 -m http.server 8080
# 浏览器访问 http://localhost:8080

# 方式三：VS Code Live Server 插件
右键 index.html → Open with Live Server

二次开发指南

需求	操作
更换品牌	替换 img/ 中的店铺 logo、商品图，同名覆盖即可
修改文案 / 链接	各 HTML 内文案与 href 直接修改
更换主题色	修改 css/style.css 中的 #f02233（主色）及 #ff2530、#ff3c45 系列红色，同步修改 less/style.less 源码
调整商品数据	修改数量输入框上的 univalent（单价）、stock（库存）属性
调整优惠券	修改结算页 data-txt、data-jiantotal、data-jianprice 满减参数
增删页面	复制任一页面 HTML 改内容即可，并在 index.html 导航页补链接

适用场景

智能零售会员店、无人便利店、自助购物门店的移动端购物 H5，也可作为社区团购、生鲜零售、线下门店会员商城的购物流程页面底版，或微信公众号 / 小程序内嵌 H5 的交易闭环页面。

从零自研 vs 使用本模板

维度	从零自研	使用本模板
交付周期	2~3 周起	半天上线
页面还原度	需反复打磨	13 页成品直接交付
交互与计算	自行实现	加减购 / 满减 / 合计逻辑已内置
移动端适配	需额外调试	320~640px WAP 适配已完成
维护成本	自行承担	纯静态 + less 源码，改即所用

在线预览

将整个目录部署至 GitHub Pages / Vercel / Netlify 或任意静态托管、服务器站点根目录即可，无需构建流程。

http://case.fedshare.cn/znls/