94 lines
2.7 KiB
Vue
94 lines
2.7 KiB
Vue
<template>
|
|
<view class="content">
|
|
<view class="lottery">
|
|
<dengbo-lotteryWheel :prizes="prizes" :size="626" :duration="5000" @run="Click" @done="Done"
|
|
ref="luckyWheel" :lightImgs="lightImages" customStyle="borderRadius: 50%;">
|
|
<template v-slot:bg>
|
|
<image src="https://static.tbmall.xin/static/turntable.png"
|
|
style="width: 100%; height: 100%" />
|
|
</template>
|
|
<template v-slot:pointer>
|
|
<up-image src="https://static.tbmall.xin/static/zz.png" width="40" height="40"
|
|
mode="widthFix" @click="startWheel"></up-image>
|
|
</template>
|
|
</dengbo-lotteryWheel>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
data() {
|
|
return {
|
|
lightImages: ['https://static.tbmall.xin/static/zz.png', 'https://static.tbmall.xin/static/turntable.png'],
|
|
prizes: [{
|
|
name: '积分',
|
|
image: '/static/turntable/record.png',
|
|
pro: '50积分',
|
|
},
|
|
{
|
|
name: '积分',
|
|
image: '/static/turntable/record.png',
|
|
pro: '100积分',
|
|
},
|
|
{
|
|
name: '优惠券',
|
|
image: '/static/turntable/record.png',
|
|
pro: '15元优惠券',
|
|
},
|
|
{
|
|
name: '家用电器',
|
|
image: '/static/turntable/record.png',
|
|
pro: '微波炉',
|
|
},
|
|
{
|
|
name: '谢谢参与',
|
|
image: '/static/turntable/record.png',
|
|
pro: '15元优惠券',
|
|
},
|
|
{
|
|
name: '办公用品',
|
|
image: '/static/turntable/record.png',
|
|
pro: '机械键盘',
|
|
},
|
|
{
|
|
name: '生活用品',
|
|
image: '/static/turntable/record.png',
|
|
pro: '化妆刷',
|
|
},
|
|
],
|
|
}
|
|
},
|
|
onLoad() {
|
|
|
|
},
|
|
methods: {
|
|
startWheel() {
|
|
this.$refs.luckyWheel.run(2);
|
|
},
|
|
Click() {
|
|
console.log('用户点击了转盘');
|
|
this.$refs.luckyWheel.run(2);
|
|
},
|
|
Done(prize) {
|
|
console.log('抽奖结束，中奖奖品：', prize);
|
|
},
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style>
|
|
.content {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
}
|
|
|
|
.lottery {
|
|
position: relative;
|
|
display: inline-block;
|
|
width: 626rpx;
|
|
height: 626rpx;
|
|
margin-top: 100rpx;
|
|
}
|
|
</style> |