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

uniapp下vue2带图片点击就报错,没有图片可以使用,任何图片都不行

Open ShiJiuHuaSheng opened this issue 9 months ago • 0 comments

  • 你当前是什么框架(必填): uniapp
  • 你使用的是哪个包(必填): vue2
  • 你当前插件的版本(必填): hbuilder安装的
  • 当前环境是小程序还是浏览器(选填):
  • 小程序
  • 详细描述你的bug:

  • 1694602760895
  • 插件带图片在微信开发者工具上没有问题,上体验版直接点击抽奖就报错,可以显示图片,在线本地都可以,但是点击一下抽奖直接垮掉了,成这个b样子了,真服了

  • 1694602972332
  • 没见过这么多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>
// 代码结束

ShiJiuHuaSheng avatar Sep 13 '23 11:09 ShiJiuHuaSheng