Group-Buy App UI Spec: 3-Person Deal Countdown Page

Answered using AI by Vibe Coding

Code Question:

帮我写一段拼单app页面

Code Solution:

拼单 App – 页面原型（可直接交付 UI 开发）

场景定位
「3 人成团，今晚 8 点前自动结算」—— 以倒计时+进度条为核心动效，让用户一眼看懂“还差 1 人、还有 2 小时”。

──────────────────
页面名称：拼单详情页（移动端）

  1. 顶部状态栏
  • 左侧：返回箭头（系统原生）
  • 右侧：：分享（微信/朋友圈/复制口令）+ 收藏（❤空心→实心动画）

  1. 主视觉
    [商品主图轮播 375×375]
    自动轮播 3 张：主图 → 实拍 → 成分表。底部放「商品标签云」：#临期特价 #官方直营 #满99包邮。

  2. 拼单进度卡片（吸顶，可收起）
    ┌────────────────────────────┐
    │ 原价 ¥79.9 → 拼单价 ¥49.9（省 ¥30） │
    │ 进度条：■■■■■□□ 2/3 人已成团（动画从左到右填充） │
    │ 倒计时：02:14:32 后自动解散（红字跳动，每 1 秒一次震动反馈） │
    │ [立即参团] 45°斜切按钮，按压有弹簧回弹，文案“再邀请 1 人立减 ¥5” │
    └────────────────────────────┘

  3. 拼友贡献榜（折叠面板，默认展开）

用户头像圆角 40px，带绿色✅

    1. 张**（团长）¥49.9（已支付）
    1. 李**（好友）¥49.9（已支付）
    1. ？（虚拟占位，灰色头像+“等你上车”）
  1. 规格 & 地址选择
  • 规格：单选 Chips（500ml / 1L / 2L），选后价格实时刷新。
  • 地址：顶部浮层选择，支持「一键带入上次地址」。
  1. 领券 & 红包
  • 横幅：「团长再返 ¥3 红包」点击后复制口令到剪切板并 Toast「已复制，快去邀请好友」。

  1. 图文详情（懒加载）
    折叠标题 + 展开箭头，图片用 WebP，首次进入占位灰图 20KB 以内。

  2. 底部操作栏（悬浮）
    左：客服（icon + 文本）+ 店铺（跳店）
    右：橙色大按钮「发起拼单」/「加入拼单」状态切换；按钮内嵌动态数字：「还差 1 人」。

  3. 弹层：分享引导

  • 半屏弹窗：顶部文案“分享到群聊，成功率提升 300%”
  • 下方 3 个渠道：微信群/朋友圈/QQ，带图标。点击后立即调起系统分享并关闭弹窗。
  1. 空状态 & 异常
  • 拼单失败：灰色插图+文案「拼单超时，已为你原路退款」+「去逛逛」按钮。
  • 网络异常：占位图+

色彩与字体

  • 主色 #FF4734（高亮按钮、倒计时）
  • 辅色 #32C5FF（进度条完成部分）
  • 标题 18 Sans 20px Regular，正文 16px Regular，价格 24px Medium

交互动效清单

  1. 进度条 1.5 s 水波纹填充。
  2. 按钮按压 0.1 s 缩放 0.95。
  3. 参团成功顶部出现 Confetti 粒子 1 s。
  4. 收到 WebSocket 推送“新成员加入”时，头像从右侧滑入 300 ms。

前端备注

  • 倒计时用 Server Time + Worker 防止客户端篡改。
  • 图片 CDN 自适应：@2x/@3x 自动切换。
  • 埋点：page_view、click_share、click_order、countdown_end。

可直接粘贴给 UI：「按如上 10pi 文件输出，切图以 3x 为基准，命名：ic_share、bg_progress_half」。