抖音小程序 - 代驾

深夜守护 · 安全到家。基于抖音小程序（字节跳动小程序）原生框架开发的代驾呼叫与行程管理小程序模板，开箱即用，可二次开发接入真实司机调度、地图导航与在线支付能力。

一、产品简介

抖音小程序 - 代驾 是一套面向酒后代驾、商务代驾、长途代驾等出行服务的代驾呼叫小程序源码。覆盖「选择服务 → 输入路线 → 一键叫代驾 → 智能派单 → 司机接驾 → 行程完成」完整业务闭环，界面精致、交互流畅、布局自适应。内置本地模拟数据与模拟接口层（司机、订单、行程、设置完整 CRUD），无需后端即可在抖音开发者工具中直接预览运行，是搭建代驾、网约车、出行服务类小程序的优质起步模板。

二、功能介绍

1. 首页（叫代驾）

• 平台品牌信息与口号展示（含平均等待时长、已服务人次）
• 雷达扫描区（动态扫描圈 + 附近在线司机数 + 分布光点）
• 概览统计：空闲司机 / 等待订单 / 代驾中 / 今日流水（上浮卡片）
• 路线输入卡（出发地 / 目的地，绿红圆点标识）
• 服务类型双列选择：经济代驾 / 商务代驾 / 长途代驾 / 婚庆代驾（含起步价）
• 一键叫代驾大按钮（带光环动效）
• 附近司机列表（头像、评分、接单数、驾龄、标签、一键呼叫）

2. 代驾司机（司机大厅）

• 司机关键字搜索（姓名 / 工号 / 标签）
• 状态筛选：全部 / 可接单 / 服务中 / 休息中（含数量徽标）
• 司机卡片：头像（带在线状态点）、工号、状态标签、评分、接单数、年龄、驾龄、车型、技能标签
• 可接单司机一键呼叫（非可接单按钮置灰）

3. 代驾订单（CRUD）

• 订单关键字搜索（订单号 / 起点 / 终点 / 司机）
• 状态筛选：全部 / 等待中 / 代驾中 / 已完成（含数量徽标）
• 订单卡片：订单号、状态色标、起终点路线（绿红圆点）、司机、里程、时间、服务类型、金额
• 状态流转操作：司机出发（等待中→代驾中）、取消订单

4. 叫代驾（派单确认）

• 路线与服务类型确认卡
• 派单状态机：匹配中（雷达扫描动效）→ 已派单（司机信息卡）
• 费用明细（起步价、夜间服务费、优惠减免、预估总价）
• 确认呼叫下单 / 查看订单详情

5. 订单详情（行程追踪）

• 订单号与状态色标
• 3 步流程时间轴（已下单 → 代驾中 → 已完成，自动高亮，取消态独立展示）
• 起终点路线 + 里程 / 金额 / 服务类型统计
• 司机信息卡（一键联系）
• 订单信息（下单时间、服务时间、支付方式、备注）
• 状态流转操作：司机出发 / 完成行程 / 取消订单

6. 个人中心

• 用户资料卡（昵称、等级、认证标签）
• 数据统计：总订单 / 进行中 / 已完成 / 累计消费
• 功能菜单：我的订单 / 常用地址 / 我的钱包 / 优惠券 / 安全中心 / 出行设置
• 出行设置开关：智能派单 / 夜间服务费 / 行程分享 / 语音播报
• 平台信息卡与恢复初始数据

7. 底部导航

• 自定义 TabBar：叫代驾 / 司机 / 订单 / 我的

三、使用场景

四、技术特点

• 框架：抖音小程序（字节跳动小程序）原生开发，基于 tt API
• 界面：自定义导航栏 + 自定义 TabBar，适配状态栏与右上角原生胶囊按钮；夜间深蓝霓虹主题视觉（深空蓝 + 霓虹蓝 + 青绿光点，体现夜间出行的科技与安全感）
• 数据：内置本地 Mock 数据与模拟接口层（utils/mock-api.js），基于本地存储模拟后端 CRUD，调用方式贴近真实 API
• 业务逻辑完备：司机 / 订单全链路增删改查、订单 3 步流程状态流转（等待中→代驾中→已完成）与进度联动、派单自动匹配空闲司机、司机状态自动联动（接单占用、完成释放）、按服务类型计价、运营数据看板汇总
• 自适应布局：双列卡片使用百分比宽度（calc(50% - 8rpx)）、服务类型网格自适应，不同手机屏宽下始终保持固定列数展示
• 结构：页面（pages）、组件（components）、数据（data）、工具（utils）、资源（assets）分层清晰，注释完善
• 图标：内置多套配色图标资源（蓝 / 紫 / 深色 / 灰 / 白 等）
• 版本管理：含 APP 版本号机制，发版时自动清空旧缓存与旧数据，保证真机调试始终为最新代码

五、交付内容

项目目录结构（解压后）

源码_代驾/
├── app.js                  # 小程序入口（导航栏适配、版本缓存初始化）
├── app.json                # 全局配置（页面路由、窗口、自定义组件）
├── app.ttss                # 全局样式（主题变量、通用类）
├── project.config.json     # 项目配置
├── assets/                 # 静态资源（多套配色图标）
├── components/             # 公共组件
│   ├── tabbar/             # 自定义底部导航
│   └── empty/              # 空状态组件
├── data/
│   ├── mock-data.js        # 种子演示数据（平台/服务类型/司机/订单/公告/设置）
│   └── mock-data.json      # 同结构 JSON 数据
├── utils/
│   └── mock-api.js         # 模拟接口层（司机/订单/设置 CRUD + 看板）
└── pages/                  # 页面
    ├── index/              # 首页（叫代驾 + 雷达扫描）
    ├── drivers/            # 代驾司机（司机大厅）
    ├── orders/             # 代驾订单
    ├── call/               # 叫代驾（派单确认）
    ├── detail/             # 订单详情（行程追踪）
    └── my/                 # 个人中心（设置/数据管理）

六、运行方式

1. 下载并安装 抖音开发者工具（字节跳动小程序开发者工具）。
2. 解压 源码_代驾.zip。
3. 在开发者工具中选择「导入项目」，项目目录指向解压后的 源码_代驾 文件夹。
4. 填写自己的 AppID（或使用测试号），点击导入即可预览。
5. 真机调试时如遇旧缓存，可在「个人中心」页点击「恢复初始数据」，或调大 app.js 中 APP_VER 版本号强制刷新。
6. 如需接入真实能力，替换 utils/mock-api.js 中的司机、订单等接口实现，对接实际后端与地图导航即可上线运营。

说明：源码中所有平台、公司、人员、司机、地址、电话均为演示占位数据，无任何真实信息。