1. 互动类组件1.1. 签到组件组件说明用户每日点击签到连续签到可获得递增奖励断签后重置通常展示日历或打卡格子状态checkedDays[]数组记录7天是否已签streak记录连续天数逻辑点击按钮 → 判断今天是否已签 → 未签则把今天索引置为truestreak 1 → 按钮变灰禁用时序图1.2. 抽奖组件组件说明包含大转盘、九宫格、老虎机等形式用户消耗积分/次数触发随机奖励后端控制中奖概率状态spinning是否旋转中、result中奖结果、angleRef当前角度逻辑点击 → 计算目标角度当前角度 随机圈数→requestAnimationFrame逐帧用缓动函数更新角度并重绘 canvas → 3秒后停止 → 根据最终角度反推落在哪个扇区 → 显示奖品时序图1.3. 刮刮卡组件组件说明用户手指滑动刮开涂层露出奖励内容本质是 canvas 遮罩擦除状态revealed是否已完全刮开、drawing鼠标是否按下逻辑初始化时用 canvas 画灰色遮罩 → 鼠标按下移动时以destination-out合成模式擦除圆形区域 → 每次擦除后统计透明像素占比 → 超过60%自动设revealedtrue显示全部时序图1.4. 翻牌组件组件说明多张牌面朝下用户选择翻开限制翻牌次数随机或预设奖励状态flipped[]已翻开的牌索引、flips已用次数逻辑点击牌 → 判断是否已翻或次数已用完 → 未翻则加入flipped数组次数1 → CSSrotateY(180deg)触发3D翻转动画 → 正反面用backface-visibility: hidden控制显隐时序图1.5. 砸金蛋组件组件说明点击蛋壳触发破碎动画揭示奖励通常限制次数状态broken[]已砸碎的蛋索引、rewards{}各蛋对应奖励逻辑点击蛋 → 判断是否已砸 → 未砸则加入broken数组写入对应奖励 → CSS scale 放大 图标切换为爆炸效果时序图1.6. 摇一摇组件组件说明监听设备陀螺仪/加速度传感器摇动手机触发抽奖或红包状态shaking是否摇动中、result抽奖结果逻辑点击 → 设shakingtrue触发 CSSshake关键帧动画 → 1秒后setTimeout回调 → 随机从奖品数组取一个 → 显示结果时序图2. 红包/优惠类组件2.1. 红包雨组件组件说明屏幕上随机飘落红包用户点击收集限时限量状态active是否开始、items[]红包列表含位置/金额/是否已收集、total累计金额逻辑点击开始 → 生成10个随机 x 坐标和金额的红包对象 → CSSanimate-bounce展示 → 点击某个红包 → 将其collected置为true累加金额到total时序图2.2. 优惠券组件组件说明展示券面额/使用条件支持领取、使用、过期状态流转领取后存入用户账户状态claimed[]已领取的券ID列表逻辑点击领取 → 判断是否已在claimed中 → 未领则加入数组 → 按钮变灰卡片加grayscale滤镜时序图2.3. 满减/折扣组件组件说明展示阶梯优惠规则满100减20实时计算当前购物车距下一档差额状态amount购物车金额滑块控制逻辑根据amount找到下一个未达到的阶梯 → 计算进度百分比 → 进度条宽度动态更新 → 显示还差X元提示时序图2.4. 秒杀倒计时组件组件说明展示活动开始/结束倒计时到点自动切换状态预热→进行中→已结束状态statusbefore/active/ended、seconds剩余秒数逻辑statusactive时setInterval每秒seconds-1→ 格式化为HH:MM:SS显示 → 点击状态按钮手动切换三种状态时序图3. 任务/成长类组件3.1. 任务中心组件组件说明展示任务列表浏览商品、分享、购买等完成后领取奖励支持一次性/每日任务状态completedTasks[]已完成任务ID、points积分余额逻辑点击完成 → 判断是否已完成 → 未完成则加入数组积分 任务奖励 → 按钮变为已完成绿色状态时序图3.2. 积分商城组件组件说明积分兑换商品或权益展示积分余额、兑换记录、商品库存状态points余额、confirmItem待确认兑换的商品ID、exchanged[]已兑换列表逻辑点击兑换 → 显示确认按钮 → 确认后判断积分是否足够 → 足够则扣减积分加入exchanged数组时序图3.3. 成长值/等级组件组件说明展示用户当前等级、进度条、升级所需成长值及对应权益纯展示逻辑根据当前成长值和等级区间计算进度百分比 → 进度条宽度 (当前值 - 当前等级下限) / (下一等级下限 - 当前等级下限) * 100%3.4. 签约组件组件说明用户同意自动续费/定期扣款协议展示扣款规则需用户主动确认授权状态agreed是否勾选协议、signed是否已签约逻辑勾选协议 →agreedtrue→ 按钮解除禁用 → 点击确认 →signedtrue→ 切换为成功状态页面时序图4. 社交裂变类组件4.1. 邀请好友组件组件说明生成专属邀请码/海报被邀请人注册后双方获得奖励追踪邀请链路状态copied是否已复制逻辑点击复制 →copiedtrue→ 按钮文字变已复制 → 2秒后setTimeout重置为false时序图4.2. 助力组件组件说明发起助力任务分享给好友点击助力达到人数目标后解锁奖励状态helpers[]已助力用户列表逻辑点击邀请 → 判断人数是否已满5人 → 未满则 push 一个新用户对象 → 进度条 helpers.length * 20%时序图4.3. 拼团组件组件说明发起/参与拼团展示团员头像、剩余名额、倒计时成团后自动下单状态groupJoined是否已加入逻辑点击参团 →groupJoinedtrue→ 显示我的头像加入团员列表 → 按钮变为已加入绿色时序图4.4. 砍价组件组件说明分享砍价链接好友点击帮砍每次随机砍掉一定金额砍到底价可购买状态currentPrice当前价格、cutRecords[]砍价记录逻辑点击分享砍价 → 随机生成5-15元砍价金额 →currentPrice减去该金额最低50元 → 新记录插入cutRecords头部时序图5. 展示/氛围类组件5.1. 实时播报组件组件说明滚动展示XX用户刚刚购买/领取营造热销氛围数据可真实或模拟状态currentIndex当前显示的消息索引、visible是否可见控制动画逻辑setInterval每2秒 → 先设visiblefalse淡出→ 300ms后切换索引并设visibletrue淡入→ CSStransition实现滑入效果时序图5.2. 库存紧张组件组件说明展示剩余库存数量低于阈值时高亮提示制造紧迫感状态状态stock库存数量逻辑setInterval每800msstock-1减到1后重置为100 →stock 20时文字加animate-pulse红色闪烁 → 进度条 (500-stock)/500 * 100%时序图5.3. 排行榜组件组件说明展示消费/积分/邀请排名支持实时刷新激励用户竞争状态ranking[]排名列表逻辑点击刷新 →sort(() Math.random() - 0.5)随机打乱数组 → 重新赋值id→ 列表重新渲染时序图5.4. 进度条组件组件说明展示活动整体参与进度已领XX%或个人任务完成进度纯展示逻辑percent current/target * 100→ 进度条宽度 → 遍历里程碑节点percent milestone.percent则高亮时序图6. 权益/会员类组件6.1. 会员开通组件组件说明展示会员权益对比、价格方案月/季/年引导开通或续费状态selected选中的套餐ID、success是否显示成功弹窗逻辑点击套餐卡片 → 更新selected→ 对应卡片加高亮边框 → 点击开通 →successtrue→ 显示全屏遮罩弹窗时序图6.2. 免费试用组件组件说明限时免费体验权益到期前提醒续费降低用户决策门槛状态trying是否试用中、seconds倒计时秒数逻辑setInterval每秒seconds-1→ 格式化显示 → 点击试用 →tryingtrue→ 按钮替换为试用中状态时序图6.3. 礼包组件组件说明打包多种权益/商品以低价售卖展示原价与现价对比突出超值感状态stock库存、bought是否已购、seconds倒计时逻辑setInterval倒计时 → 点击抢购 →stock-1boughttrue→ 按钮禁用变灰进度条更新时序图
营销组件大全
1. 互动类组件1.1. 签到组件组件说明用户每日点击签到连续签到可获得递增奖励断签后重置通常展示日历或打卡格子状态checkedDays[]数组记录7天是否已签streak记录连续天数逻辑点击按钮 → 判断今天是否已签 → 未签则把今天索引置为truestreak 1 → 按钮变灰禁用时序图1.2. 抽奖组件组件说明包含大转盘、九宫格、老虎机等形式用户消耗积分/次数触发随机奖励后端控制中奖概率状态spinning是否旋转中、result中奖结果、angleRef当前角度逻辑点击 → 计算目标角度当前角度 随机圈数→requestAnimationFrame逐帧用缓动函数更新角度并重绘 canvas → 3秒后停止 → 根据最终角度反推落在哪个扇区 → 显示奖品时序图1.3. 刮刮卡组件组件说明用户手指滑动刮开涂层露出奖励内容本质是 canvas 遮罩擦除状态revealed是否已完全刮开、drawing鼠标是否按下逻辑初始化时用 canvas 画灰色遮罩 → 鼠标按下移动时以destination-out合成模式擦除圆形区域 → 每次擦除后统计透明像素占比 → 超过60%自动设revealedtrue显示全部时序图1.4. 翻牌组件组件说明多张牌面朝下用户选择翻开限制翻牌次数随机或预设奖励状态flipped[]已翻开的牌索引、flips已用次数逻辑点击牌 → 判断是否已翻或次数已用完 → 未翻则加入flipped数组次数1 → CSSrotateY(180deg)触发3D翻转动画 → 正反面用backface-visibility: hidden控制显隐时序图1.5. 砸金蛋组件组件说明点击蛋壳触发破碎动画揭示奖励通常限制次数状态broken[]已砸碎的蛋索引、rewards{}各蛋对应奖励逻辑点击蛋 → 判断是否已砸 → 未砸则加入broken数组写入对应奖励 → CSS scale 放大 图标切换为爆炸效果时序图1.6. 摇一摇组件组件说明监听设备陀螺仪/加速度传感器摇动手机触发抽奖或红包状态shaking是否摇动中、result抽奖结果逻辑点击 → 设shakingtrue触发 CSSshake关键帧动画 → 1秒后setTimeout回调 → 随机从奖品数组取一个 → 显示结果时序图2. 红包/优惠类组件2.1. 红包雨组件组件说明屏幕上随机飘落红包用户点击收集限时限量状态active是否开始、items[]红包列表含位置/金额/是否已收集、total累计金额逻辑点击开始 → 生成10个随机 x 坐标和金额的红包对象 → CSSanimate-bounce展示 → 点击某个红包 → 将其collected置为true累加金额到total时序图2.2. 优惠券组件组件说明展示券面额/使用条件支持领取、使用、过期状态流转领取后存入用户账户状态claimed[]已领取的券ID列表逻辑点击领取 → 判断是否已在claimed中 → 未领则加入数组 → 按钮变灰卡片加grayscale滤镜时序图2.3. 满减/折扣组件组件说明展示阶梯优惠规则满100减20实时计算当前购物车距下一档差额状态amount购物车金额滑块控制逻辑根据amount找到下一个未达到的阶梯 → 计算进度百分比 → 进度条宽度动态更新 → 显示还差X元提示时序图2.4. 秒杀倒计时组件组件说明展示活动开始/结束倒计时到点自动切换状态预热→进行中→已结束状态statusbefore/active/ended、seconds剩余秒数逻辑statusactive时setInterval每秒seconds-1→ 格式化为HH:MM:SS显示 → 点击状态按钮手动切换三种状态时序图3. 任务/成长类组件3.1. 任务中心组件组件说明展示任务列表浏览商品、分享、购买等完成后领取奖励支持一次性/每日任务状态completedTasks[]已完成任务ID、points积分余额逻辑点击完成 → 判断是否已完成 → 未完成则加入数组积分 任务奖励 → 按钮变为已完成绿色状态时序图3.2. 积分商城组件组件说明积分兑换商品或权益展示积分余额、兑换记录、商品库存状态points余额、confirmItem待确认兑换的商品ID、exchanged[]已兑换列表逻辑点击兑换 → 显示确认按钮 → 确认后判断积分是否足够 → 足够则扣减积分加入exchanged数组时序图3.3. 成长值/等级组件组件说明展示用户当前等级、进度条、升级所需成长值及对应权益纯展示逻辑根据当前成长值和等级区间计算进度百分比 → 进度条宽度 (当前值 - 当前等级下限) / (下一等级下限 - 当前等级下限) * 100%3.4. 签约组件组件说明用户同意自动续费/定期扣款协议展示扣款规则需用户主动确认授权状态agreed是否勾选协议、signed是否已签约逻辑勾选协议 →agreedtrue→ 按钮解除禁用 → 点击确认 →signedtrue→ 切换为成功状态页面时序图4. 社交裂变类组件4.1. 邀请好友组件组件说明生成专属邀请码/海报被邀请人注册后双方获得奖励追踪邀请链路状态copied是否已复制逻辑点击复制 →copiedtrue→ 按钮文字变已复制 → 2秒后setTimeout重置为false时序图4.2. 助力组件组件说明发起助力任务分享给好友点击助力达到人数目标后解锁奖励状态helpers[]已助力用户列表逻辑点击邀请 → 判断人数是否已满5人 → 未满则 push 一个新用户对象 → 进度条 helpers.length * 20%时序图4.3. 拼团组件组件说明发起/参与拼团展示团员头像、剩余名额、倒计时成团后自动下单状态groupJoined是否已加入逻辑点击参团 →groupJoinedtrue→ 显示我的头像加入团员列表 → 按钮变为已加入绿色时序图4.4. 砍价组件组件说明分享砍价链接好友点击帮砍每次随机砍掉一定金额砍到底价可购买状态currentPrice当前价格、cutRecords[]砍价记录逻辑点击分享砍价 → 随机生成5-15元砍价金额 →currentPrice减去该金额最低50元 → 新记录插入cutRecords头部时序图5. 展示/氛围类组件5.1. 实时播报组件组件说明滚动展示XX用户刚刚购买/领取营造热销氛围数据可真实或模拟状态currentIndex当前显示的消息索引、visible是否可见控制动画逻辑setInterval每2秒 → 先设visiblefalse淡出→ 300ms后切换索引并设visibletrue淡入→ CSStransition实现滑入效果时序图5.2. 库存紧张组件组件说明展示剩余库存数量低于阈值时高亮提示制造紧迫感状态状态stock库存数量逻辑setInterval每800msstock-1减到1后重置为100 →stock 20时文字加animate-pulse红色闪烁 → 进度条 (500-stock)/500 * 100%时序图5.3. 排行榜组件组件说明展示消费/积分/邀请排名支持实时刷新激励用户竞争状态ranking[]排名列表逻辑点击刷新 →sort(() Math.random() - 0.5)随机打乱数组 → 重新赋值id→ 列表重新渲染时序图5.4. 进度条组件组件说明展示活动整体参与进度已领XX%或个人任务完成进度纯展示逻辑percent current/target * 100→ 进度条宽度 → 遍历里程碑节点percent milestone.percent则高亮时序图6. 权益/会员类组件6.1. 会员开通组件组件说明展示会员权益对比、价格方案月/季/年引导开通或续费状态selected选中的套餐ID、success是否显示成功弹窗逻辑点击套餐卡片 → 更新selected→ 对应卡片加高亮边框 → 点击开通 →successtrue→ 显示全屏遮罩弹窗时序图6.2. 免费试用组件组件说明限时免费体验权益到期前提醒续费降低用户决策门槛状态trying是否试用中、seconds倒计时秒数逻辑setInterval每秒seconds-1→ 格式化显示 → 点击试用 →tryingtrue→ 按钮替换为试用中状态时序图6.3. 礼包组件组件说明打包多种权益/商品以低价售卖展示原价与现价对比突出超值感状态stock库存、bought是否已购、seconds倒计时逻辑setInterval倒计时 → 点击抢购 →stock-1boughttrue→ 按钮禁用变灰进度条更新时序图
