抖音小程序 - 工程设备租赁

一、功能介绍

一款面向工程施工方的工程机械设备租赁小程序，纯前端实现，无需后端接口，数据本地模拟、即装即用。覆盖设备浏览、在线下单、订单全流程管理、归还结算等核心业务，界面精美、交互流畅、自适应各机型。

核心功能模块

1. 工作台首页（数据看板）

• 渐变欢迎卡 + 设备利用率展示

• 浮动统计卡：在租订单 / 租赁中 / 可租 / 待确认 一目了然

• 双列彩色快捷入口（设备大厅 / 租赁订单 / 快速下单 / 数据中心）

• 运营概览：设备利用率环形图 + 累计营收 / 设备总数 / 维修中

• 设备构成柱状图：按类别统计台数与租赁占比

• 热门设备双列推荐 + 平台通知

2. 设备大厅

• 关键字搜索（设备名称 / 品牌 / 型号）

• 7 大分类筛选（挖掘机 / 塔吊 / 压路机 / 泵车 / 装载机 / 叉车 / 全部）

• 排序方式（默认 / 热门 / 价格）

• 双列设备卡片，每类设备配独立渐变色，适配各种屏幕

• 点击查看设备详情

3. 租赁订单

• 关键字搜索（订单号 / 设备 / 工地）

• 6 类状态筛选（全部 / 待确认 / 租赁中 / 已归还 / 已结算 / 已取消）

• 订单列表展示设备、租期、工地、金额

• 悬浮"去租赁"快捷入口

4. 订单详情与流转

• 四步状态时间线：提交订单 → 确认租赁 → 设备归还 → 订单结算

• 完整租赁详情（承租方、工地、起退租日期、数量、调度员）

• 费用明细自动核算

• 动态操作按钮：确认租赁 / 确认归还 / 立即结算 / 取消订单 / 删除

• 库存联动：确认租赁自动扣减库存，归还自动恢复

5. 下单租赁表单

• 设备信息横幅展示

• 承租方、使用工地、起退租日期、租期录入

• 数量加减选择器（受库存上限约束）

• 金额自动计算（单价 × 数量 × 天数，实时联动）

• 备注说明与费用合计

6. 设备详情

• 分类渐变大图区 + 状态标签

• 名称、品牌、型号、评分、租赁次数

• 设备参数表（自重、功率、型号、利用率）

• 设备特点标签 + 设备介绍

• 历史维保记录

• 底部固定租赁栏 + 立即租赁

7. 我的

• 个人 / 公司信息卡（含工种、联系方式）

• 双列数据统计（累计营收 / 设备总数 / 可租设备 / 在租订单）

• 常用服务入口（我的订单 / 设备大厅 / 联系客服）

• 维保动态列表

• 4 项偏好设置开关（消息通知 / 到期提醒 / 归还自动结算 / 显示价格）

• 一键重置本地数据

二、使用场景

• 工程机械租赁：中小型租赁公司面向工地、施工方的设备租赁与订单管理

• 设备调度演示：可作为设备租赁类 SaaS / ERP 产品的前端原型或演示样例

• 学习参考：原生抖音小程序开发教学示例，涵盖列表筛选、表单交互、状态机流转、库存联动、图表可视化等典型场景

• 二次开发基础：纯前端结构清晰，接入真实后端接口即可快速升级为线上产品

三、交付内容

技术特点

• 原生开发：基于抖音小程序原生框架（ttml / ttss / js / json），无第三方依赖

• 模拟接口：内置 mock-api，模拟设备浏览、下单、订单流转、归还结算、维保记录等完整增删改查，本地数据持久化

• 业务闭环：订单状态机（待确认→租赁中→已归还→已结算）+ 库存自动联动，下单金额实时核算

• 自适应布局：统一 rpx 单位 + CSS Grid 双列布局，各机型显示一致

• 设计体系：靛蓝→青工业风渐变主题、分类色卡、状态时间线、利用率环形图、构成柱状图，界面精致统一

• 开箱即用：用抖音开发者工具导入源码目录即可预览运行

运行方式

1. 下载并解压源码 zip

2. 打开「抖音开发者工具」

3. 导入项目，选择解压后的源码目录

4. 自动编译运行即可预览全部功能