🎯 达人端任务详情页面

完整使用指南

重要提示

如果您在达人端任务详情页面看不到以下内容：

请按照下方步骤操作！

操作步骤

1

清空旧数据

  1. 在浏览器中打开：reset-demo-data.html
  2. 点击 "清空并重置所有数据" 按钮
  3. 在弹出的确认对话框中点击 "确定"
2

重新加载数据

点击页面上的任一链接重新初始化Demo数据：

服务商需求管理 达人任务列表
3

查看任务详情

  1. 打开 达人任务列表
  2. 点击任意任务卡片（推荐：蓝牙耳机相关任务）
  3. 查看任务详情页面，确认所有内容正常显示

页面新增功能

1. 产品图片展示（最顶部）

  • 展示2-3张高清产品图片
  • 点击图片可查看大图
  • 带有编号标签和使用提示

2. 拍摄要求（来自服务商Offer）

  • 英文拍摄要求说明
  • 详细的拍摄内容、场景、重点描述
  • 带引号的精美卡片样式

3. 拍摄要求详情

  • 核心拍摄要点（中文，醒目的黄色卡片）
  • 音频类型（口播/字幕等）
  • 特殊要求
  • 创作者要求（年龄、性别、身高、身材）

4. 示例视频参考（如果有）

  • 服务商提供的拍摄示例视频
  • 点击可观看参考视频
  • 帮助达人理解拍摄风格

5. 物流信息（如需邮寄）

  • 收货地址展示
  • 物流追踪信息
  • 实时物流状态更新

6. 视频上传区域（页面底部）

根据任务状态显示不同内容：

  • 待发货/运输中：显示物流状态提示和预计送达时间
  • 待提交：
    • 视频文件上传（拖拽或点击）
    • 视频链接输入
    • 备注说明
    • 💾 保存草稿 → 保存视频但不提交
    • 📤 提交审核 → 正式提交审核
  • 审核中/已完成：显示已提交的视频链接和审核状态

达人视角的任务状态

系统内部有7个任务状态，但达人端简化为5个：

达人视角 系统状态 说明
🚚 待发货 assigned 任务已分配，等待服务商发货
🚛 运输中 in-transit 产品正在配送途中
🎬 待提交 waiting-submit 可以开始拍摄并提交视频
⏳ 审核中 submitted / provider-approved / client-reviewing 视频正在审核中
✅ 已完成 approved 任务完成

推荐测试任务

Demo数据中，蓝牙耳机产品的任务包含最完整的数据：

在任务列表中找到蓝牙耳机相关的任务，点击查看详情即可体验完整功能。

UI 优化亮点

渐变卡片设计

每个模块都有独特的渐变色背景

图标配色

不同模块使用不同颜色的圆形图标

响应式布局

产品图片在手机和电脑上自动调整

悬浮效果

产品图片悬浮时显示放大镜图标

信息提示

每个模块下方都有使用提示

流畅动画

按钮、卡片都有平滑的过渡动画

关于上传按钮

为什么我看不到"保存草稿"和"提交审核"按钮？

上传按钮只在任务状态为"待提交"时显示。以下情况会显示为"待提交"：

  • 不需要邮寄的任务：任务状态为 assigned、in-progress、waiting-submit 或 provider-rejected
  • 需要邮寄的任务：物流状态为 delivered（已送达）且任务状态未提交

其他状态的显示内容

  • 🚚 待发货 / 🚛 运输中： 显示物流状态提示，不显示上传按钮
  • ⏳ 审核中： 显示已提交的视频链接和审核状态，不可再次提交
  • ✅ 已完成： 显示已完成的视频和佣金信息

使用测试工具： 如果不确定哪些任务应该显示按钮，请打开 按钮测试工具 查看所有任务的状态分析。

如果仍然看不到内容

检查浏览器控制台错误

  1. 按 F12 打开开发者工具
  2. 切换到 Console 标签
  3. 查看是否有错误信息（红色文字）
  4. 将错误信息反馈给开发者

手动检查数据

打开 数据检查工具 查看：

  • 任务总数
  • 蓝牙耳机任务数
  • 含示例视频的任务数
  • 含Offer描述的任务数
  • 含产品图片的任务数

如果任何一项为 0 或数据不完整，请重新执行第一步和第二步。

快速链接

重置数据 任务列表 数据检查 按钮测试

如有问题，请联系开发者