免费获取

获取 Demo 源代码请在公众号回复“刮刮卡抽奖” 。

刮刮卡抽奖游戏

https://code.ifrontend.net/case/scratch-card

项目简介

基于 Vue 3 + Vite + TailwindCSS 实现的”刮刮卡抽奖”H5 小程序，界面美观，交互流畅，适合各类线上活动、品牌推广、用户活跃等场景。用户每天可参与刮奖，奖品丰富，支持抽奖记录展示和活动说明。

主要功能

• 刮刮卡抽奖：模拟真实刮奖体验，刮开后随机获得奖品。
• 奖品弹窗：中奖后弹窗展示奖品及领奖联系方式。
• 抽奖记录：自动记录每次抽奖结果，支持无缝滚动查看历史中奖信息。
• 活动说明：支持活动时间、参与方式、奖品设置、领奖方式等说明展示。
• 再来一张：支持一键重置，继续抽奖。

技术栈

• 前端框架：Vue 3
• 路由管理：Vue Router 4
• 构建工具：Vite
• 样式框架：TailwindCSS
• 动画与交互：原生 Canvas 实现刮奖效果

目录结构

src/
  pages/                # 页面文件（核心：ScratchCardGame.vue）
  components/           # 可复用组件（当前为空）
  assets/               # 静态资源与全局样式
  router/               # 路由配置
  main.js               # 项目入口
  App.vue               # 根组件
public/                 # 公共资源
index.html              # 入口 HTML

快速开始

1. 安装依赖

   npm install

2. 本地开发

   npm run dev

3. 打包构建

   npm run build

4. 预览构建结果

   npm run preview

活动规则示例

• 活动时间：2024 年 3 月 1 日 – 2024 年 3 月 31 日
• 参与方式：每日登录即可获得 1 次刮刮卡机会，分享活动可获得额外机会
• 奖品设置：iPhone 15、MacBook、AirPods、iPad、手表、音箱
• 中奖规则：每次刮开随机获得一个奖品，奖品不可重复获得
• 领奖方式：中奖后请及时联系客服领取奖品，奖品将在 7 个工作日内发出
• 活动说明：本活动最终解释权归主办方所有

项目亮点

• 体验真实，动画流畅，UI 现代
• 代码结构清晰，易于二次开发
• 支持移动端优先，适配主流浏览器
• 可灵活扩展奖品、活动规则等