完全开源-支持二开-可做毕业答辩-众包任务平台 --- 从需求到落地的全栈实践
一个面向众包行业的任务交易与协作平台，覆盖任务发布方 + 服务方 + 管理后台，基于 Vue 3 构建。
项目背景
众包行业长期面临几个痛点：任务匹配效率低、交付验收流程复杂、纠纷处理缺乏透明性、平台信用体系不完善。众包任务平台正是为了解决这些问题而设计的一站式平台，目标是打通"任务发布 → 任务大厅 → 接单报名 → 交付验收 → 评价信用"的完整业务闭环。
适用场景包括：设计外包、技术开发、文案撰写、营销推广、数据标注等各种众包任务场景。
技术选型
| 层级 | 技术栈 |
|---|---|
| 前端框架 | Vue 3 + Composition API |
| 路由 | Vue Router 4 |
| 状态管理 | Pinia |
| 构建工具 | Vite |
| UI 风格 | 自定义 CSS 变量体系，移动端优先 |
| 目标平台 | 微信小程序 / H5 / App（UniApp 可扩展） |
功能全景
服务方端（移动端）
服务方端采用底部 Tab 导航，包含多个主入口和多个二级页面。
1. 登录页
支持手机号登录和验证码登录两种方式，底部提供注册入口和管理员入口。体验账号：13800138000，验证码；123456，勾选协议直接登录即可。
2. 众包首页
展示快捷入口（发布任务、我的任务）、分类导航（设计创意、技术开发、文案写作等）、任务大厅入口和热门任务推荐。
3. 任务大厅与详情
任务列表支持分类筛选、任务类型筛选（悬赏/投标/一口价/众包）、排序方式（最新/预算最高/距离最近）。任务详情页包含完整任务信息（标题、描述、预算、截止时间、技能要求）、发布方信息和报名入口。
4. 发布任务
支持 7 步发布流程：选择分类 → 填写信息 → 设置预算 → 设置时间 → 添加技能标签 → 上传附件 → 预览确认。发布前需完成实名认证。
5. 我的发布与接单
我的发布：展示我发布的任务列表，支持查看报名者、管理任务状态（进行中/待验收/已完成）。
我的接单：展示我承接的任务列表，包含待处理、进行中、待验收、已完成等状态分类。
6. 交付与验收
交付页：服务方上传交付成果、填写交付说明。
验收页：任务发布方确认交付结果，可选择通过/退回/拒绝操作。
7. 钱包与账单
展示账户余额、充值/提现功能、交易账单记录（收入/支出分类）。
8. IM 即时通讯
支持任务双方实时沟通，包含消息列表、聊天界面、敏感词过滤提示。
9. 个人中心
包含用户信息展示、实名认证状态、任务统计（发布数/接单数/完成数）、评价管理、设置等功能入口。
发布方端（移动端）
发布方与 服务方共用同一套移动端界面，通过角色区分功能入口。
1. 任务管理
发布方可在"我的发布"中管理所有发布的任务，包括查看报名者列表、筛选报名者、开始合作、确认验收等操作。
2. 验收流程
当服务方提交交付成果后，发布方收到验收通知，可进行验收操作或发起纠纷。
管理后台（PC 端）
管理后台采用左侧边栏导航，包含 5 个核心功能模块。
1. 数据看板
展示核心运营指标：今日新增任务数、今日新增用户数、今日交易额、平台总任务数。下方提供待处理事项提醒（待审核任务、待处理纠纷、待处理提现）和近 7 天趋势统计。
2. 任务审核
管理待发布任务的审核，支持查看任务详情、通过/驳回操作。驳回时需填写驳回原因。
3. 用户管理
管理平台用户实名认证，支持个人认证和企业认证两种类型。可查看认证详情、审核通过/驳回。
4. 纠纷仲裁
处理用户提交的纠纷申诉，支持查看纠纷详情（任务信息、双方陈述、证据附件）、进行仲裁裁决（支持发布方/服务方/各承担 50%）。
5. 财务管理
展示平台财务概览（总流水、今日交易额、待处理提现、累计用户收益）、提现申请审核、交易记录查询。
项目结构
frontend/src/
├── router/index.js # 路由配置
├── stores/app.js # Pinia 全局状态
├── components/
│ ├── TaskCard.vue # 任务卡片组件
│ ├── ReviewDisplay.vue # 评价展示组件
│ └── ReviewForm.vue # 评价表单组件
├── mock/crowdsourcing/ # Mock 数据
│ ├── user.js # 用户数据
│ ├── task.js # 任务数据
│ ├── wallet.js # 钱包数据
│ ├── chat.js # 聊天数据
│ ├── review.js # 评价数据
│ └── dispute.js # 纠纷数据
├── pages/crowdsourcing/ # 众包平台页面
│ ├── LoginPage.vue # 登录
│ ├── CrowdsourcingHomePage.vue # 众包首页
│ ├── TaskHallPage.vue # 任务大厅
│ ├── TaskDetailPage.vue # 任务详情
│ ├── PublishTaskPage.vue # 发布任务
│ ├── MyPublishedTasksPage.vue # 我的发布
│ ├── MyTakenTasksPage.vue # 我的接单
│ ├── DeliveryPage.vue # 交付
│ ├── AcceptancePage.vue # 验收
│ ├── WalletPage.vue # 钱包
│ ├── ChatPage.vue # IM 聊天
│ ├── DisputePage.vue # 发起纠纷
│ ├── DisputeDetailPage.vue # 纠纷详情
│ ├── ProfilePage.vue # 个人中心
│ ├── ProfileEditPage.vue # 资料编辑
│ ├── RealNameVerifyPage.vue # 实名认证
│ ├── ReviewsPage.vue # 评价管理
│ ├── SettingsPage.vue # 设置
│ └── admin/ # 后台管理页面
│ ├── CsAdminLayout.vue # 后台布局
│ ├── CsDashboardPage.vue # 数据看板
│ ├── CsTaskReviewPage.vue # 任务审核
│ ├── CsUserMgmtPage.vue # 用户管理
│ ├── CsDisputeArbitrationPage.vue # 纠纷仲裁
│ └── CsFinancePage.vue # 财务管理设计亮点
多角色体系：明确区分发布方和服务方角色，根据角色展示不同的功能入口和数据视图。
任务类型丰富：支持悬赏、投标、一口价、众包四种任务类型，满足不同场景需求。
完善的交付流程：从任务发布 → 接单报名 → 开始合作 → 交付成果 → 验收确认，提供完整的任务执行闭环。
信用评价体系：整合用户信用评分、已完成任务数、好评率等指标，提升平台信任度。
纠纷仲裁机制：提供纠纷申诉渠道，管理员可进行公正仲裁，支持多种裁决方式。
财务透明管理：平台流水、用户收益、提现申请全链路可追溯。
移动端体验优先：全部页面按 375px 宽度设计，圆角卡片 + 渐变色彩 + 底部弹窗交互，贴合移动端使用习惯。
CSS 变量体系：全局定义语义化颜色变量，一处修改全局生效，方便后续品牌定制。
特色功能
| 功能 | 说明 |
|---|---|
| 7 步发布向导 | 引导用户完成任务发布的完整流程 |
| 智能任务匹配 | 根据技能标签和分类推荐合适任务 |
| 实时 IM 沟通 | 任务双方可直接在平台内沟通 |
| 交付验收机制 | 标准化的交付物提交和验收流程 |
| 纠纷仲裁 | 平台介入调解，保证公平公正 |
| 钱包系统 | 充值、提现、账单明细全支持 |
| 实名认证 | 个人/企业认证，提升平台信任 |
| 信用评分 | 多维度评估用户信用等级 |
核心业务流程
任务发布流程
任务接单流程
交付验收流程
纠纷处理流程
提现流程
路由设计
| 路径 | 页面 | 说明 |
|---|---|---|
/cs/home |
众包首页 | 快捷入口、分类导航 |
/cs/hall |
任务大厅 | 任务列表、筛选排序 |
/cs/task/:id |
任务详情 | 完整任务信息、报名入口 |
/cs/publish |
发布任务 | 7 步发布流程 |
/cs/my-published |
我的发布 | 发布方任务管理 |
/cs/my-taken |
我的接单 | 服务方任务管理 |
/cs/wallet |
钱包 | 余额、充值、提现 |
/cs/chat/:orderId |
IM 聊天 | 实时沟通 |
/cs/profile |
个人中心 | 用户信息、任务统计 |
/cs-admin/dashboard |
数据看板 | 运营指标统计 |
/cs-admin/tasks |
任务审核 | 待审核任务管理 |
/cs-admin/users |
用户管理 | 实名认证审核 |
/cs-admin/disputes |
纠纷仲裁 | 纠纷处理裁决 |
/cs-admin/finance |
财务管理 | 财务与提现管理 |
其他
本项目为众包行业数字化转型的一次实践探索，支持二次开发，欢迎交流讨论。