更新记录

1.0.1（2026-03-03） 下载此版本

1. 多端兼容：使用 UniApp 原生语法 + rpx 单位，适配 H5、微信小程序、App；
2. 概率控制：精准的概率算法，可通过调整 probability 控制中奖概率；
3. 防重复点击：通过 isDrawing 状态禁止抽奖中重复点击；
4. 图片兜底：图标加载失败时自动替换为在线兜底图标；
5. 流畅动画：使用 CSS 缓动动画，转盘旋转更自然；
6. 次数限制：默认 3 次抽奖次数，可对接后端接口获取真实次数。

1.0.0（2026-03-03） 下载此版本

1. 多端样式兼容（rpx 单位天然适配，无需额外处理）；
2. 动画兼容（使用 CSS transform + transition，UniApp 全端支持）；
3. 图片路径兼容（区分本地路径和网络路径）；
4. 事件绑定兼容（UniApp 支持 Vue3 语法）。

平台兼容性

uni-app(3.6.17)

其他

# 通用商城转盘抽奖

1. 核心适配说明

UniApp 中实现转盘抽奖

1. 多端样式兼容（rpx 单位天然适配，无需额外处理）；
2. 动画兼容（使用 CSS transform + transition，UniApp 全端支持）；
3. 图片路径兼容（区分本地路径和网络路径）；
4. 事件绑定兼容（UniApp 支持 Vue3 语法）。

2. 图片路径适配

• 本地图片：将奖品图标放在项目根目录的 static 文件夹下，小程序路径需去掉开头的 /（如 static/prize1.png）；
• 网络图片：直接替换 prizeList 中的 icon 为网络 URL。

3. 核心功能说明

1. 多端兼容：使用 UniApp 原生语法 + rpx 单位，适配 H5、微信小程序、App；
2. 概率控制：精准的概率算法，可通过调整 probability 控制中奖概率；
3. 防重复点击：通过 isDrawing 状态禁止抽奖中重复点击；
4. 图片兜底：图标加载失败时自动替换为在线兜底图标；
5. 流畅动画：使用 CSS 缓动动画，转盘旋转更自然；
6. 次数限制：默认 3 次抽奖次数，可对接后端接口获取真实次数。

4. 对接后端接口

• 抽奖前：请求接口获取剩余抽奖次数；
• 抽奖中：请求接口获取中奖结果（替代前端概率算法，更安全）；
• 抽奖后：请求接口记录中奖信息。

抽奖前请求次数：

onMounted(async () => {
  // 模拟请求后端接口
  const res = await uni.request({
    url: '/api/getLotteryCount',
    method: 'GET'
  })
  if (res.data.code === 0) {
    lotteryCount.value = res.data.data.count
  }
})

2. 保存抽奖记录

// 抽奖成功后保存记录
const saveLotteryRecord = async () => {
  await uni.request({
    url: '/api/saveLotteryRecord',
    method: 'POST',
    data: {
      prizeName: winPrize.value.name,
      time: new Date().getTime()
    }
  })
}

3. 自定义转盘样式

• 修改 lottery-container 的宽高（如改为 500rpx）可调整转盘大小；
• 修改 wheel-block 的背景色可调整区块样式；
• 修改旋转动画时长（4s）可调整转盘旋转速度。