lucky-canvas icon indicating copy to clipboard operation
lucky-canvas copied to clipboard

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

Open Michaelwong0820 opened this issue 1 year ago • 2 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>

// 代码结束

Michaelwong0820 avatar Feb 20 '24 07:02 Michaelwong0820

WechatIMG445 WechatIMG446

Michaelwong0820 avatar Feb 20 '24 07:02 Michaelwong0820

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

buuing avatar Mar 20 '24 07:03 buuing