抖音小程序 - 自助打印

随到随印 · 立等可取。基于抖音小程序（字节跳动小程序）原生框架开发的自助打印 O2O 平台模板，开箱即用，可二次开发接入真实打印门店与支付能力。

一、产品简介

抖音小程序 - 自助打印 是一套面向校园、商务区、社区场景的自助打印服务类小程序源码。覆盖「找门店 → 上传文件 → 配置打印 → 自动计价 → 下单支付 → 到店取件 → 订单管理」完整业务闭环，界面精致、交互流畅。内置本地模拟数据与模拟接口层（钱包、订单、门店 CRUD），无需后端即可在抖音开发者工具中直接预览运行，是搭建打印类、快印类 O2O 小程序的优质起步模板。

二、功能介绍

1. 首页

• 平台品牌信息与服务时间展示

• 钱包余额、优惠券、积分快速入口

• 快捷服务入口：文档打印 / 照片冲印 / 证件照 / 装订胶装

• 附近门店推荐（按距离排序，含评分、距离、预计时间）

• 进行中订单状态卡片

• 平台公告通知

2. 门店列表与详情

• 门店关键字搜索（名称 / 地址 / 标签）

• 门店列表按距离排序，展示评分、销量、营业状态、距离、预计时间、服务标签

• 门店详情：地址、服务项目与价格（黑白/彩色/照片/胶装/证件照/海报等）、一键去打印

3. 上传打印（核心下单）

• 文件添加 / 删除（模拟上传）

• 打印配置：颜色（黑白/彩色）、单双面、纸张（A4/A3/B5）、方向、装订方式（不装订/订书钉/胶装/螺旋圈）

• 份数调整

• 实时价格试算（按页数 × 单价 × 份数 + 装订费，双面自动减半）

• 备注、提交下单、余额不足引导充值

4. 订单管理

• 状态筛选：全部 / 打印中 / 待取件 / 已完成

• 订单列表：门店、文件、配置、金额、状态、取件码

• 订单汇总统计

5. 订单详情

• 订单号、状态、取件码、取件方式

• 文件清单、打印配置、份数、总页数

• 金额、支付方式、时间、备注

• 操作：确认取件（完成）、取消订单（退款）、修改备注、删除

6. 我的（个人中心）

• 用户资料展示（昵称、会员等级、手机号）

• 钱包余额、优惠券、积分

• 钱包充值（多档金额选择）

• 钱包交易记录（消费 / 充值 / 奖励）

• 优惠券管理（可用 / 已过期）

• 我的订单、消息通知、帮助反馈、关于我们等菜单

• 修改昵称、重置演示数据

7. 底部导航

• 自定义 TabBar：首页 / 门店 / 打印（凸起按钮）/ 订单 / 我的

三、使用场景

四、技术特点

• 框架：抖音小程序（字节跳动小程序）原生开发，基于 tt API

• 界面：自定义导航栏（nav-bar 组件）+ 自定义 TabBar，适配状态栏与胶囊按钮

• 数据：内置本地 Mock 数据与模拟接口层（utils/mock-api.js），基于本地存储模拟后端 CRUD，含异步延迟，调用方式贴近真实 API

• 业务逻辑完备：自动计价（单双面、彩色黑白、装订）、钱包扣款/退款、取件码生成、订单状态流转、交易记录

• 结构：页面（pages）、组件（components）、数据（data）、工具（utils）、资源（assets）分层清晰，注释完善

• 图标：内置多套配色图标资源

• 版本管理：含 APP 版本号机制，便于发版时清理旧缓存

五、交付内容

项目目录结构（解压后）

源码_自助打印/
├── app.js                  # 小程序入口（导航栏适配、缓存初始化）
├── app.json                # 全局配置（页面路由、窗口、自定义组件）
├── app.ttss                # 全局样式
├── project.config.json     # 项目配置
├── assets/                 # 静态资源（多套配色图标）
├── components/             # 公共组件
│   ├── tabbar/             # 自定义底部导航
│   ├── nav-bar/            # 自定义顶部导航栏
│   └── empty/              # 空状态组件
├── data/
│   └── mock-data.js        # 种子演示数据（门店/订单/钱包/优惠券等）
├── utils/
│   └── mock-api.js         # 模拟接口层（门店/订单/钱包/计价 CRUD）
└── pages/                  # 页面
    ├── index/              # 首页
    ├── shops/              # 门店列表
    ├── shop-detail/        # 门店详情
    ├── upload/             # 上传打印（下单）
    ├── orders/             # 订单列表
    ├── order-detail/       # 订单详情
    └── my/                 # 个人中心（钱包/优惠券/设置）

六、运行方式

1. 下载并安装 抖音开发者工具（字节跳动小程序开发者工具）。

2. 解压 源码_自助打印.zip。

3. 在开发者工具中选择「导入项目」，项目目录指向解压后的 源码_自助打印 文件夹。

4. 填写自己的 AppID（或使用测试号），点击导入即可预览。

5. 如需接入真实能力，替换 utils/mock-api.js 中的门店、订单、钱包、支付等接口实现，对接实际后端即可上线运营。

说明：源码中所有商家、人员、地点、电话均为演示占位数据，无任何真实信息。