这是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
})
}注：本人技术比较菜，体谅体谅，有好的建议欢迎提出来文章来源：https://www.toymoban.com/news/detail-777469.html
上述是个人理解。描述不恰当的地方欢迎指正。一起进步~文章来源地址https://www.toymoban.com/news/detail-777469.html
到了这里，关于基于uniapp ts 实现微信小程序动态抽奖幸运大转盘的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
