|
|
@ -6,12 +6,14 @@ const myLucky = ref() |
|
|
|
const wheelConfig = ref({ |
|
|
|
}) |
|
|
|
const prizes = ref([ |
|
|
|
{ fonts: [{ text: '0', top: '10%' }], background: '#e9e8fe' }, |
|
|
|
{ fonts: [{ text: '1', top: '10%' }], background: '#b8c5f2' }, |
|
|
|
{ fonts: [{ text: '2', top: '10%' }], background: '#e9e8fe' }, |
|
|
|
{ fonts: [{ text: '3', top: '10%' }], background: '#b8c5f2' }, |
|
|
|
{ fonts: [{ text: '4', top: '10%' }], background: '#e9e8fe' }, |
|
|
|
{ fonts: [{ text: '5', top: '10%' }], background: '#b8c5f2' }, |
|
|
|
{ fonts: [{ text: '-199', top: '10%' }], background: '#e9e8fe' }, |
|
|
|
{ fonts: [{ text: '-55', top: '10%' }], background: '#b8c5f2' }, |
|
|
|
{ fonts: [{ text: '+200', top: '10%' }], background: '#e9e8fe' }, |
|
|
|
{ fonts: [{ text: '-88', top: '10%' }], background: '#b8c5f2' }, |
|
|
|
{ fonts: [{ text: '-11', top: '10%' }], background: '#e9e8fe' }, |
|
|
|
{ fonts: [{ text: '-299', top: '10%' }], background: '#b8c5f2' }, |
|
|
|
{ fonts: [{ text: '+200', top: '10%' }], background: '#b8c5f2' }, |
|
|
|
{ fonts: [{ text: '-66', top: '10%' }], background: '#b8c5f2' }, |
|
|
|
]) |
|
|
|
const blocks = ref([{ padding: '13px', background: '#617df2' }]) |
|
|
|
const buttons = ref([{ |
|
|
@ -27,7 +29,7 @@ function startCallback() { |
|
|
|
// 模拟调用接口异步抽奖 |
|
|
|
setTimeout(() => { |
|
|
|
// 假设后端返回的中奖索引是0 |
|
|
|
const index = 0 |
|
|
|
const index = 10 |
|
|
|
// 调用stop停止旋转并传递中奖索引 |
|
|
|
myLucky.value.stop(index) |
|
|
|
}, 3000) |
|
|
@ -40,6 +42,7 @@ function endCallback(prize) { |
|
|
|
</script> |
|
|
|
|
|
|
|
<template> |
|
|
|
<dev> |
|
|
|
<h1> 大转盘 </h1> |
|
|
|
|
|
|
|
<div class="luckyWheel"> |
|
|
@ -47,6 +50,7 @@ function endCallback(prize) { |
|
|
|
<LuckyWheel class="lucky" ref="myLucky" width="300px" height="300px" :default-config="wheelConfig" |
|
|
|
:prizes="prizes" :blocks="blocks" :buttons="buttons" @start="startCallback" @end="endCallback" /> |
|
|
|
</div> |
|
|
|
</dev> |
|
|
|
</template> |
|
|
|
|
|
|
|
<style scoped></style> |