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>
// 代码结束
uniapp和taro暂不支持vue3, vue2可以使用