基于uniapp ts 实现微信小程序动态抽奖幸运大转盘

 这是view视图层布局，内容中有注释，这里就不过多标注

	<view class="page_view">
		<view class="content" :style="`background-image: url(${bgImage})`">
			<!-- <view class="turntable_content" :style="`background-image: url(${turntableImage})`"> -->
			<view class="turntable_content"> //这是luckyWheel插件 下面还有配置项
				<LuckyWheel ref="myLucky" width="450rpx" height="450rpx" :prizes="prizes" :blocks="blocks"
					:buttons="buttons" :defaultConfig="defaultConfig" @start="startCallback" @end="endCallback" />
				<view class="foot">
					<image
						src="xxxxx"
						mode=""></image>
				</view>
			</view>
			<view class="explain_activity">
				<view class="title_content">
					<view class="icon1"></view>
					<view class="title">活动说明：</view>
				</view>
				<view class="content_explain"> //效果图提示部分
					1、活动期间，签到7天即可获取一次转盘机会，获得额外奖励<br />
					2、此活动新老用户均可参与，奖励直接发送至携华出行司机端<br />
					3、活动最终解释权归杭州携华网络科技有限公司所有，如您有任何疑问，请致电客服热线：400-021-7766
				</view>
			</view>
			<view class="return_btn"> //返回首页事件
				<button class="btn" type="warn" @click="goIndex">返回首页</button>
			</view>
		</view>
		<uni-popup ref="popupName" type="bottom">
			<view class="Name_content">
				<view class="image_con">
					<image class="image" :src="prizeImg"></image>
				</view>
				<view class="text_content">
					<view class="gift_image">
						<image :src="giftImage"></image>
					</view>
					<view class="hint_content">
						<view>
							恭喜你！
						</view>
						<view>
							获得【{{luckyName}}】
						</view>
					</view>
					<view class="btn_return">
						<button class="btn" @click="popupName.close()">领取并返回</button>
					</view>
				</view>
			</view>
		</uni-popup>
	</view>

以下是数据层实现方法

	import LuckyWheel from '@lucky-canvas/uni/lucky-wheel' //下载并引入组件
	onMounted(() => {
		getLuckyDrawData()
	})
	// 跳转首页
	const goIndex = () => {
		uni.reLaunch({
			url: 'xxxxxx',
		})
	}
    
	const blocks = [{
		padding: '45rpx',
		imgs: [{
			src: 'xxxxxxx',
			width: '110%',
			height: '100%',
			rotate: true
		}]
	}, ]
	const prizes = ref<any[]>([])//抽奖内容数据
    //这是配置抽奖中心点击按钮配置项
	const buttons = [{
		radius: '25%',
		imgs: [{
			src: 'xxxx',//配置中间按钮图片
			width: '100%',
			top: '-130%'
		}],
		// background: '#fb8c76',
		pointer: true,
		fonts: [{
			text: '点击\n抽奖',
			top: '-15rpx',
			left: '6rpx',
			fontSize: '20rpx',
			fontColor: '#fff'
		}]
	}]
	const defaultConfig = {
		gutter: '5px'
	}
	const popupName = ref()
	const prizeImg = 'xxxxxxx'
	// 点击抽奖按钮会触发star回调.
	const myLucky = ref()
	const luckyName = ref()
	const LuckyDrawData = ref()
	//节流
	const throttled = ref(false);
    //在一定时间内不能重复点击，不然后导致重复调用接口会出问题
	const startCallback = () => {
		let timer: number | null;
		if (!throttled.value) {
			getActivityBox().then((resBox) => {
				isLuckyStatus.value = resBox.data.lucky_status
                   //这里的判断需要根据你们实际情况去选择，我这后端给的条件判断
				if (resBox.data.lucky_status === 1 || resBox.data.lucky_status === 3) {
					// 调用抽奖组件的play方法开始游戏
					myLucky.value.play()
					// 模拟调用接口异步抽奖
					setTimeout(() => {
						createDriverLucky().then((resData) => {
							if (resData.code === 4001) {
								myLucky.value.stop(0)
								uni.showModal({
									title: '提示',
									showCancel: false,
									content: resData.message,
								});
								return
							}
							//匹配ID获取下标
							for (let i = 0; i < LuckyDrawData.value.length; i++) {
								if (LuckyDrawData.value[i].id === resData.data.id) {
									giftImage.value = LuckyDrawData.value[i].image
									luckyName.value = resData.data.activity_prize_name
									myLucky.value.stop(i)
									return; // 返回匹配的下标
								}
							}
							// myLucky.value.stop(resData.data.index)

						}).catch((res) => {
							uni.showToast({
								title: "系统繁忙!",
								icon: 'none',
								duration: 1000
							});
							myLucky.value.stop(0)
						})
					}, 4000)
				} else if (resBox.data.lucky_status === 2) {
					uni.showModal({
						title: '提示',
						showCancel: false,
						content: '您已抽奖!'
					});
				}
			})
			throttled.value = true;
			timer = setTimeout(() => {
				throttled.value = false;
			}, 9000);
		}
	}
	const isLuckyStatus = ref(0)
	// 抽奖结束会触发end回调
	const endCallback = (prize: any) => {
		if (isLuckyStatus.value === 1)
			popupName.value.open('center')
	}

	// 获取大转盘的图片数据
    //方法中有判断是都存在抽奖活动，否会重新回到首页
	const getLuckyDrawData = () => {
		getLuckyDraw().then((resData) => {
			if (resData.code === 4001) return uni.showModal({
				title: '提示',
				showCancel: false,
				content: resData.message,
				success: function(res) {
					if (res.confirm) {
						return uni.reLaunch({
							url: `/pages/index/index?city_id=${uni.getStorageSync('city_id')}`,
						})
					}
				}
			});
			LuckyDrawData.value = [...resData.data]
			resData.data.forEach((item: any) => {
				prizes.value.push({
					fonts: [{
						text: item.number + item.activity_prize_name,
						top: '10%',
						fontSize: '20rpx',
						fontColor: '#e74b44'
					}],
					background: '#ffeaa7',
					imgs: [{
						src: item.image as string,
						width: '25%',
						top: '45%',
						left: '-2%'
					}]
				}, )
			})
			return prizes.value
		})
	}

 注：本人技术比较菜，体谅体谅，有好的建议欢迎提出来

上述是个人理解。描述不恰当的地方欢迎指正。一起进步~