商品详情介绍

抖音小程序 - 电子合同

一套高颜值、开箱即用的电子合同小程序源码。纯前端实现，无后端依赖，界面与业务全部原创，可直接在抖音开发者工具中导入运行。

一、产品简介

「电子合同」是一款面向企业法务、商务合作、房屋租赁、人事入职、采购供应等场景的电子合同在线发起、签署与管理工具。用户可在小程序内浏览标准合同模板（劳动 / 租赁 / 采购 / 借款 / 服务 / 保密），选择模板填写合同要素后生成合同，阅读完整条款，通过手写签名 + 印章盖章完成签署，随后在「我的合同」中按状态管理全部合同。

整体设计以渐变色彩 + 卡片化布局 + 流畅微交互为核心，强调「专业、现代、可信」的视觉与体验。

二、核心功能

🏠 首页 · 合同模板市场

• 渐变 Hero 区：含企业定位、用户头像、问候语、合同总数 / 待签署 / 已完成实时统计；
• 快捷发起：一键发起全新合同；
• 搜索：支持按模板名称 / 描述关键词检索；
• 最近合同：横向滑动卡片，展示最近 3 份合同及状态；
• 分类筛选：全部 / 劳动 / 租赁 / 采购 / 借款 / 服务 / 保密；
• 模板市场网格：渐变封面、图标、使用次数、要素数量、HOT 标识。

📝 发起合同

• 选定模板后展示模板横幅（渐变 + 图标 + 简介）；
• 填写合同名称与合同要素（甲乙方、金额、期限、标的等，随模板动态生成）；
• 预览合同条款入口；
• 必填校验，一键生成合同草稿。

📄 合同详情

• 合同头部卡：渐变封面、状态徽标、合同编号；
• 签署进度时间轴：发起 → 甲方签署 → 乙方签署 → 合同生效，含完成时间；
• 签约主体：甲乙方卡片、印章状态（已盖章 / 未盖章，红色印章图标）；
• 合同要素：金额、期限、起止日期；
• 完整条款：逐条展示合同正文，带序号；
• 一键复制合同信息。

✍️ 签名盖章

• canvas 手写签名板：支持真实手写，含引导线与清空按钮；
• 甲 / 乙双方切换：分别签署，已签署方显示对勾；
• 印章盖章动画：点击「加盖印章」，印章落下并震动反馈；
• 双方签署完成后合同自动生效；
• 签署成功弹层：可继续签另一方或完成。

📋 我的合同

• 顶部统计条（全部 / 进行中 / 已完成）；
• 状态 Tab：全部 / 待签署 / 进行中 / 已完成 / 已过期，带数量徽标；
• 卡片式列表，左侧色条、印章图标、金额、期限、创建时间；
• 草稿 / 进行中合同支持撤回（带二次确认弹层）与去签署；
• 空状态引导。

👤 个人中心

• 用户资料卡片、PRO 标识、合同统计；
• 5 套个性主题实时换肤（靛青 / 海蓝 / 藏青 / 碧潭 / 雅紫）；
• 功能菜单：我的证书、签署密码、账号安全、帮助中心、关于；
• 偏好设置：签署提醒、自动存档、防伪水印开关。

三、使用场景

四、技术特点

• 纯前端、零接口：数据本地持久化，无需部署服务端，导入即用；
• 原生抖音小程序：非跨端框架，性能与兼容性更佳；
• 彩色 PNG 图标方案：基于 IconPark 官方 SVG，改色后用 sharp 批量转换为 96px PNG，9 套颜色（与主题统一），无纯色背景；
• 自定义导航栏 + TabBar：完全可控的视觉风格；
• 实时换肤：通过事件总线驱动全局主题更新，所有页面与组件同步响应；
• canvas 手写签名 + 印章动画：真实手写体验 + 盖章动效；
• 版本号缓存刷新：APP_VER 变更即清空旧缓存，真机调试永远最新；
• 自适应布局：rpx + flex + 安全区适配，各机型显示一致。

五、交付内容

运行步骤

1. 下载并解压源码 zip；
2. 打开「抖音开发者工具」，选择「导入项目」；
3. 项目目录指向解压后的工程根目录（含 app.json）；
4. 填入您的 AppID（或使用测试号）；
5. 点击编译，即可在模拟器中体验全部功能。

重新生成彩色图标：在工程目录执行 npm install sharp 后 node tools/gen-icons.js。

六、适用对象

• 想要快速上线电子合同签署能力的企业 / 法务团队；
• 需要高质量抖音小程序 UI 参考的开发者；
• 学习小程序原生开发、自定义组件、canvas 签名、动画与状态管理的开发者。

本项目界面与业务均为原创，可在此基础上自由二次开发与商用。所有公司名 / 人名均为「某某公司 / 张某某」占位，无任何真实信息。