lucky-canvas
lucky-canvas copied to clipboard
uniapp下vue2带图片点击就报错,没有图片可以使用,任何图片都不行
- 你当前是什么框架(必填): uniapp
- 你使用的是哪个包(必填): vue2
- 你当前插件的版本(必填): hbuilder安装的
- 当前环境是小程序还是浏览器(选填):
- 小程序
-
详细描述你的bug:
-
-
插件带图片在微信开发者工具上没有问题,上体验版直接点击抽奖就报错,可以显示图片,在线本地都可以,但是点击一下抽奖直接垮掉了,成这个b样子了,真服了
-
-
没见过这么多bug的插件,都逼着换技术栈了还有问题,ps使用图片报nodeId的错误直接改源码解决了,
- 问题代码(重要):
// 代码开始, 别再放歪了行吗
<template>
<view class="mybox">
<view class="mytitle">
幸运大转盘
</view>
<view class="myNum">
你还有1次抽奖机会
</view>
<LuckyWheel ref="myLucky" :width="'700rpx'" :height="'700rpx'" :blocks="blocks" :prizes="prizes"
:default-config="defaultConfig" :buttons="buttons" :defaultStyle="defaultStyle" @start="startCallBack"
@end="endCallBack" />
<!-- <view class="myCantainer">
抽奖记录
<view class="myCantainer-child">
</view>
</view> -->
<uni-popup ref="popup" type="dialog">
<uni-popup-dialog mode="base" message="成功消息" :is-mask-click="false" confirmText="去领奖" cancelText="再抽一次" title="抽奖结果" :duration="2000" :before-close="true" @close="close"
@confirm="confirm" content="恭喜抽中一等奖(200元京东卡)"></uni-popup-dialog>
</uni-popup>
</view>
</template>
<script>
import LuckyWheel from '@/components/@lucky-canvas/uni/lucky-wheel'
export default {
components: {
LuckyWheel
},
data() {
return {
defaultConfig: {
gutter: '10px'
},
defaultStyle: {
wordWrap: true,
},
blocks: [{
// padding: '26.2px',
background: '#f8def8',
imgs: [{
src: '/static/lottery/bg36eea79f7.png',
width: '100.3%',
// top: '-3px',
// rotate: true
}]
}],
prizes: [{
fonts: [{
text: '200元京东卡',
top: '10%',
fontSize: '30rpx'
}],
// imgs: [{
// src: '',
// top: 40,
// width: '30%',
// }],
background: '#b8c5f2'
},
{
fonts: [{
text: '米家螺丝刀套装',
top: '10%',
fontSize: '30rpx'
}],
// imgs: [{
// src: '‘,
// top: 40,
// width: '30%',
// }],
background: '#b8c5f2'
},
{
fonts: [{
text: '抱枕',
top: '10%',
fontSize: '30rpx'
}],
// imgs: [{
// src: '',
// top: 40,
// width: '30%',
// }],
background: '#b8c5f2'
},
{
fonts: [{
text: '笔记本',
top: '10%',
fontSize: '30rpx'
}],
// imgs: [{
// src: '/static/lottery/four.jpg',
// top: 40,
// width: '30%',
// }],
background: '#b8c5f2'
},
{
fonts: [{
text: '签字笔',
top: '10%',
fontSize: '30rpx'
}],
// imgs: [{
// src: '/static/lottery/five.jpg',
// top: 40,
// width: '30%',
// }],
background: '#b8c5f2'
},
],
buttons: [{
radius: '15%',
background: '#8a9bf3',
pointer: false,
lengthLimit: '10%',
wordWrap: true,
fonts: [{
text: '抽奖',
top: '-10px',
fontColor: '#fff',
fontSize: '30rpx',
}],
imgs: [{
src: '/static/lottery/btn2.d9033fb9.png',
// top: '-38',
width: '100%',
}],
}],
}
},
methods: {
// 点击抽奖按钮触发回调
startCallBack() {
// 先开始旋转
this.$refs.myLucky.play()
// 使用定时器来模拟请求接口
setTimeout(() => {
// 假设后端返回的中奖索引是0
const index = 0
// 调用stop停止旋转并传递中奖索引
this.$refs.myLucky.stop(index)
}, 3000)
},
// 抽奖结束触发回调
endCallBack(prize) {
// 奖品详情
// uni.showToast({
// title: '恭喜抽中1等奖'
// });
console.log(prize)
this.$refs.popup.open()
},
// open() {
// this.$refs.popup.open()
// },
// 点击取消按钮触发
close() {
// TODO 做一些其他的事情,before-close 为true的情况下,手动执行 close 才会关闭对话框
// ...
this.$refs.popup.close()
},
// 点击确认按钮触发
confirm(value) {
// 输入框的值
console.log(value)
// TODO 做一些其他的事情,手动执行 close 才会关闭对话框
// ...
this.$refs.popup.close()
}
}
}
</script>
<style scoped>
.mybox {
width: 100vw;
height: 100vh;
display: flex;
align-items: center;
/* justify-content: space-around; */
/* background-color: #9be0ff; */
flex-direction: column;
background-image: url('https://s2.loli.net/2023/09/13/1hvBnzkp7boYXAS.png');
}
.myNum {
/* border: 5rpx solid linear-gradient(to right, #35daff , #e62fff); */
padding: 20rpx 30rpx 20rpx;
border: 4px solid transparent;
border-radius: 80rpx;
position: relative;
background-image: linear-gradient(to right, #e62fff, #ff5374);
background-clip: padding-box;
color: #fff;
margin: 30rpx;
/*important*/
}
.myNum::before {
content: '';
position: absolute;
top: 0;
right: 0;
left: 0;
bottom: 0;
z-index: -1;
margin: -4px;
border-radius: inherit;
/*important*/
background: linear-gradient(to right, #e62fff, #8968e1);
}
.mytitle {
margin-top: 200rpx;
/* font-size: 70rpx;
font-weight: bold;
color: #105391;
text-shadow: 4px 4px 0 #2260b1; */
font-size: 50px;
text-align: center;
letter-spacing: 5px;
font-weight: 700;
color: #fff;
text-shadow:
1px 1px 0 #105391,
2px 2px 0 #105391,
3px 3px 0 #105391,
4px 4px 0 #105391;
}
.myCantainer {
margin-top: 40rpx;
width: 80vw;
text-align: center;
color: #fff;
font-size: 30rpx;
}
.myCantainer-child {
margin-top: 15rpx;
border-radius: 20rpx;
width: 100%;
height: 13vh;
border: 3px solid #18a6fa;
}
.flex-item{
z-index: 999999;
}
</style>
// 代码结束