buuing / lucky-canvas

🎖🎖🎖 基于 TS + Canvas 开发的【大转盘 / 九宫格 / 老虎机】抽奖插件,🌈 一套源码适配多端框架 JS / Vue / React / Taro / UniApp / 微信小程序等,🎨 奖品 / 文字 / 图片 / 颜色 / 按钮均可配置,支持同步 / 异步抽奖,🎯 概率前 / 后端可控,🚀 自动根据 dpr 调整清晰度适配移动端

Home Page:https://100px.net

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

uniapp 开发,模拟器正常显示奖品图片,体验版不能正常显示

Michaelwong0820 opened this issue · comments

  • 你当前是什么框架(必填):uniapp
  • 你使用的是哪个包(必填):@lucky-canvas/uni/lucky-grid
  • 你当前插件的版本(必填):0.0.13
  • 详细描述你的bug:uniapp 开发,模拟器正常显示奖品图片,体验版不能正常显示
  • 问题代码(重要):
// 代码开始, 别再放歪了行吗
![WechatIMG445](https://github.com/buuing/lucky-canvas/assets/48703701/10fe3f86-71aa-4718-8b27-76d69d2037fa)
![WechatIMG446](https://github.com/buuing/lucky-canvas/assets/48703701/fc465198-9b19-41e3-8207-fa817696dbe8)

<template>
  <view class="pt-[50px]">
    <LuckyGrid
      ref="luckyRef"
      width="600rpx"
      height="600rpx"
      :rows="3"
      :cols="3"
      :blocks="options.blocks"
      :prizes="options.prizes"
      :default-style="options.defaultStyle"
      :active-style="options.activeStyle"
      @end="endLottery"
    />
    <button @click="startLottery">开始抽奖</button>
  </view>
</template>

<script setup>
import { requestLotteryAwardDetail } from '@/api/activity'
import LuckyGrid from '@lucky-canvas/uni/lucky-grid'
import { onMounted, ref } from 'vue'

const luckyRef = ref(null)

const options = {
  blocks: [
    { padding: '10px', background: '#869cfa' },
    { padding: '10px', background: '#b8c5f2' },
  ],
  prizes: [
    {
      x: 0,
      y: 0,
      imgs: [
        {
          src: 'https://derucci-app-test-obs.iderucci.com/mp-derucci-member/20240220/YjBGbzM5WE5wWVdpNWE5NTE0YTc2MzJlNTMyZDRhNWZhYjA4MjI2NzhiMjcuMTcwODQxMDk0MjUzOQ==.jpg',
          width: '90%',
          height: '90%',
          top: '5%',
        },
      ],
    },
    {
      x: 1,
      y: 0,
      imgs: [
        {
          src: 'https://avatars.githubusercontent.com/u/46644748?v=4',
          width: '90%',
          height: '90%',
          top: '5%',
        },
      ],
    },
    {
      x: 2,
      y: 0,
      imgs: [
        {
          src: 'https://derucci-app-test-obs.iderucci.com/mp-derucci-member/20240220/YjBGbzM5WE5wWVdpNWE5NTE0YTc2MzJlNTMyZDRhNWZhYjA4MjI2NzhiMjcuMTcwODQxMDk0MjUzOQ==.jpg',
          width: '90%',
          height: '90%',
          top: '5%',
        },
      ],
    },
    {
      x: 2,
      y: 1,
      imgs: [
        {
          src: 'https://derucci-app-test-obs.iderucci.com/mp-derucci-member/20240220/YjBGbzM5WE5wWVdpNWE5NTE0YTc2MzJlNTMyZDRhNWZhYjA4MjI2NzhiMjcuMTcwODQxMDk0MjUzOQ==.jpg',
          width: '90%',
          height: '90%',
          top: '5%',
        },
      ],
    },
    {
      x: 2,
      y: 2,
      imgs: [
        {
          src: 'https://derucci-app-test-obs.iderucci.com/mp-derucci-member/20240220/YjBGbzM5WE5wWVdpNWE5NTE0YTc2MzJlNTMyZDRhNWZhYjA4MjI2NzhiMjcuMTcwODQxMDk0MjUzOQ==.jpg',
          width: '90%',
          height: '90%',
          top: '5%',
        },
      ],
    },
    {
      x: 1,
      y: 2,
      imgs: [
        {
          src: 'https://derucci-app-test-obs.iderucci.com/mp-derucci-member/20240220/YjBGbzM5WE5wWVdpNWE5NTE0YTc2MzJlNTMyZDRhNWZhYjA4MjI2NzhiMjcuMTcwODQxMDk0MjUzOQ==.jpg',
          width: '90%',
          height: '90%',
          top: '5%',
        },
      ],
    },
    {
      x: 0,
      y: 2,
      imgs: [
        {
          src: 'https://derucci-app-test-obs.iderucci.com/mp-derucci-member/20240220/YjBGbzM5WE5wWVdpNWE5NTE0YTc2MzJlNTMyZDRhNWZhYjA4MjI2NzhiMjcuMTcwODQxMDk0MjUzOQ==.jpg',
          width: '90%',
          height: '90%',
          top: '5%',
        },
      ],
    },
    {
      x: 0,
      y: 1,
      imgs: [
        {
          src: 'https://derucci-app-test-obs.iderucci.com/mp-derucci-member/20240220/YjBGbzM5WE5wWVdpNWE5NTE0YTc2MzJlNTMyZDRhNWZhYjA4MjI2NzhiMjcuMTcwODQxMDk0MjUzOQ==.jpg',
          width: '90%',
          height: '90%',
          top: '5%',
        },
      ],
    },
  ],
  defaultStyle: {
    background: '#b8c5f2',
    borderRadius: '8px',
  },
  activeStyle: {
    background: 'rgb(255,255,255)',
  },
}

const startLottery = () => {
  luckyRef.value.play()
  setTimeout(() => {
    // 假设后端返回的中奖索引是0
    const index = 0
    // 调用stop停止旋转并传递中奖索引
    luckyRef.value.stop(index)
  }, 3000)
}

const endLottery = (prize) => {
  console.log('中奖结果:', prize)
}
</script>

<style lang="scss"></style>

// 代码结束
commented

uniapp和taro暂不支持vue3, vue2可以使用