基因检测商城模板 | 诺赛基因手机版 WAP 源码，22 页移动电商开箱即用

基于 jQuery + Swiper 打造的基因检测电商移动端（WAP/H5）模板。开箱即用，替换品牌素材即可上线。

基因检测、体检预约、医疗服务类电商，交易链路长、状态多：下单只是开始，后面还跟着支付状态、退款状态、发票、报告、手机号绑定……把这些页面从零做一遍，至少要三周。这套模板以「诺赛基因手机版」为原型，把检测电商的交易后全流程一次做齐——22 个页面覆盖商品、购物车、订单、地址、发票、检测报告与账号体系，且每类都备好了空状态页，直接就是一套可交付的移动端商城骨架。

说明：index.html 为模板自带的页面导航首页，将 22 个页面按业务分组索引，方便演示与逐页查看，交付时可替换为真实商城首页。

模板亮点

1. 22 个页面，检测电商全流程闭环

• 商品 / 购物车：产品详情（轮播主图、价格、加入购物车、立即购买、同类推荐）、购物车（含删除确认弹框与合计金额）
• 我的订单 7 页：订单列表（全部 / 待支付 / 已支付 / 已退款）、订单详情（已支付 / 已退款）、空状态页，订单状态机完整呈现
• 收货地址 4 页：地址管理、地址列表、新增收货地址、编辑收货地址
• 发票 3 页：发票列表、空状态、新增发票
• 检测报告 2 页：报告列表与空状态——检测类电商独有的「慢交付」环节
• 账号 3 页：个人设置、绑定手机、修改手机号

2. 空状态设计齐备

订单、发票、检测报告均单独制作空状态页，图标 + 引导文案 + 行动按钮三要素完整，告别「列表为白板」的尴尬演示。

3. Swiper 商品图轮播

产品详情页主图基于 Swiper 4 实现触摸滑动轮播，带索引指示，是移动端商品页的标准交互形态。

4. 移动端表单与弹框组件

• 新增地址、新增发票、绑定 / 修改手机号等表单页采用移动端标准列表式排版
• 购物车删除操作基于 jquery.reveal.js 弹出确认框，防误删交互完整
• global.js 内置 Tab 切换引擎，订单状态页可直接复用

5. 主色克制、行业感强

主色 #00508f 深海蓝贯穿标题栏、价格与按钮，稳重可信，贴合医疗健康行业的视觉调性；商品示例（基因检测项目、检测报告）文案均为行业真实语境。

技术栈

技术	版本	用途
jQuery	1.7.2	DOM 操作 / Tab 切换
Swiper	4.0.5	产品详情主图触摸轮播
jquery.reveal	—	购物车删除确认弹框
normalize.css	—	浏览器样式基线
HTML + CSS	—	移动端页面结构与样式

项目结构

lsjy/
├── index.html           # 页面导航首页（模板演示入口，22 页分组索引）
├── product.html         # 产品详情（主图轮播 / 价格 / 加购 / 立即购买 / 推荐）
├── gwc.html             # 购物车（删除确认弹框 / 合计金额）
├── wddd.html            # 订单列表（全部）
├── wddd_dzf.html        # 订单列表（待支付）
├── wddd_yzf.html        # 订单列表（已支付）
├── wddd_yzf_show.html   # 订单详情（已支付）
├── wddd_ytk.html        # 订单列表（已退款）
├── wddd_ytk_show.html   # 订单详情（已退款）
├── ddwk.html            # 订单列表（空状态）
├── dzgl.html            # 收货地址管理
├── dzlb.html            # 地址列表
├── xzshdz.html          # 新增收货地址
├── bjshdz.html          # 编辑收货地址
├── fplb.html            # 发票列表
├── fplbwk.html          # 发票列表（空状态）
├── xzfp.html            # 新增发票
├── jcbg.html            # 检测报告
├── jcbgwk.html          # 检测报告（空状态）
├── sz.html              # 个人设置
├── bdsj.html            # 绑定手机
├── xgsjh.html           # 修改手机号
├── css/
│   ├── style.css        # 全部样式（主色 #00508f）
│   ├── normalize.css    # 浏览器样式重置
│   └── swiper.min.css   # 轮播样式
├── js/
│   ├── jquery.js        # jQuery 1.7.2
│   ├── swiper.min.js    # Swiper 4.0.5
│   ├── jquery.reveal.js # 弹框组件
│   └── global.js        # Tab 切换等公共交互
└── img/                 # 商品图、图标、示例报告等素材

快速开始

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

# 方式一：浏览器直接打开
双击 index.html，从导航首页逐页浏览全部 22 页

# 方式二：本地静态服务器
cd lsjy
python3 -m http.server 8080
# 手机访问 http://<本机IP>:8080，或浏览器开发者工具切换设备模拟

也可使用 VS Code 的 Live Server 插件一键预览。

二次开发指南

需求	操作
更换品牌	替换 img/ 下 logo 与商品图，同名覆盖
修改文案 / 价格	各 HTML 内商品名、价格、说明文字直接编辑
更换主题色	修改 css/style.css 中的 #00508f（标题栏 / 按钮 / 价格主色）
换掉导航首页	将 index.html 替换为真实商城首页，其余页面链接关系不变
增删订单状态	复制 wddd_*.html 任一页面，改状态标签与按钮
接入后端	列表区块改为接口渲染，表单页 action 指向真实提交接口

适用场景

基因检测商城、体检预约平台、医疗服务电商、大健康类移动商城的 WAP / H5 端，也可作为任何需要「订单状态机 + 发票 + 报告 + 地址」完整交易链路的移动端电商模板。

从零自研 vs 使用本模板

维度	从零自研	使用本模板
交付周期	3~4 周起	换图改字，1~2 天交付
页面还原度	逐页设计开发	22 页交易全流程现成
交互与动画	自行实现	轮播 / 弹框 / Tab 已内置
适配	自行调试	移动端版式与空状态页齐备
维护成本	自行承担	页面同构，复制改状态即可扩展

在线预览

将整个目录部署至任意静态托管（GitHub Pages / 静态服务器 / OSS）即可在线浏览，手机访问体验最佳。

http://8.166.93.126:8989/lsjy