anonymous
147 lines
3.4 KiB
Vue
147 lines
3.4 KiB
Vue
<route lang="json5">
|
||
{
|
||
style: {
|
||
navigationBarTitleText: '转盘抽奖',
|
||
navigationBarBackgroundColor: '#fff',
|
||
navigationStyle: 'custom',
|
||
},
|
||
}
|
||
</route>
|
||
|
||
<script setup lang="ts">
|
||
import NavBar from '@/components/NavBar.vue'
|
||
import GridLottery from '@/components/GridLottery.vue'
|
||
|
||
import lotteryIcon from '@/static/images/home/nav-2.png'
|
||
|
||
const list = [
|
||
{
|
||
id: 1,
|
||
sort: 0,
|
||
title: '\u6BDB\u5DFE',
|
||
icon: lotteryIcon,
|
||
},
|
||
{
|
||
id: 2,
|
||
sort: 1,
|
||
title: '\u6BDB\u5DFE',
|
||
icon: lotteryIcon,
|
||
},
|
||
{
|
||
id: 3,
|
||
sort: 2,
|
||
title: '\u6BDB\u5DFE',
|
||
icon: lotteryIcon,
|
||
},
|
||
{
|
||
id: 4,
|
||
sort: 3,
|
||
title: '\u6BDB\u5DFE',
|
||
icon: lotteryIcon,
|
||
},
|
||
{
|
||
id: 5,
|
||
sort: 4,
|
||
title: '\u6BDB\u5DFE',
|
||
icon: lotteryIcon,
|
||
},
|
||
{
|
||
id: 6,
|
||
sort: 5,
|
||
title: '\u6BDB\u5DFE',
|
||
icon: lotteryIcon,
|
||
},
|
||
{
|
||
id: 7,
|
||
sort: 6,
|
||
title: '\u6BDB\u5DFE',
|
||
icon: lotteryIcon,
|
||
},
|
||
{
|
||
id: 8,
|
||
sort: 7,
|
||
title: '\u6BDB\u5DFE',
|
||
icon: lotteryIcon,
|
||
},
|
||
]
|
||
|
||
const gridLotteryRef = ref(null)
|
||
const onStart = () => {
|
||
// 中奖id,抽奖轮转时间毫秒
|
||
gridLotteryRef.value.start(3, 10000)
|
||
}
|
||
const onEnd = () => {
|
||
console.log('onEnd')
|
||
}
|
||
</script>
|
||
|
||
<template>
|
||
<view class="min-h-screen lottery-page">
|
||
<NavBar />
|
||
<view class="mt-240 w-315 h-315 flex items-center justify-center mx-auto lottery-container">
|
||
<grid-lottery
|
||
:itemHeight="186"
|
||
ref="gridLotteryRef"
|
||
class="w-280 ml-8 mt-8"
|
||
:list="list"
|
||
@onStart="onStart"
|
||
@onEnd="onEnd"
|
||
>
|
||
<!-- <view slot="lottery-item" slot-scope="slotProps">{{ slotProps }}</view> -->
|
||
<template #lottery-item="{ data, index, currIndex }">
|
||
<view
|
||
class="overflow-hidden relative lottery-item flex flex-col items-center justify-center rounded-10 bg-[linear-gradient(180deg,#fffdf7,#fff1ca)] w-86 h-86"
|
||
:class="{
|
||
mask: currIndex !== index,
|
||
}"
|
||
>
|
||
<image :src="data.icon" class="w-30 h-30" />
|
||
<view class="text-14 text-#333 mt-8">{{ data.title }}</view>
|
||
</view>
|
||
</template>
|
||
<template #start-button>
|
||
<view
|
||
class="w-86 flex flex-col items-center justify-center h-86 bg-[linear-gradient(180deg,#FF8282,#D73434)] text-#FBEDC6 text-25 rounded-10"
|
||
>
|
||
<view>点击</view>
|
||
<view>抽奖</view>
|
||
</view>
|
||
</template>
|
||
<template #activity-box>
|
||
<view class="w-86 h-86 bg-red-500"></view>
|
||
</template>
|
||
</grid-lottery>
|
||
</view>
|
||
<view class="text-16 mx-auto w-315 mb-15 font-bold text-#fff mt-30">抽奖规则</view>
|
||
<view class="text-12 mx-auto w-315 mb-15 text-#fff mt-15">
|
||
1. 每轮抽奖消耗10000认购点，每轮抽奖次数为3次，每轮抽奖结束后，消耗的认购点将恢复为0。
|
||
</view>
|
||
</view>
|
||
</template>
|
||
<style scoped>
|
||
.lottery-item {
|
||
&.mask {
|
||
&::after {
|
||
position: absolute;
|
||
top: 0;
|
||
left: 0;
|
||
width: 100%;
|
||
height: 100%;
|
||
content: '';
|
||
background: rgba(0, 0, 0, 0.1);
|
||
}
|
||
}
|
||
}
|
||
.lottery-container {
|
||
background-image: url('@/static/images/lottery-bar.png');
|
||
background-size: 100% 100%;
|
||
}
|
||
.lottery-page {
|
||
background-color: #517aae;
|
||
background-image: url('@/static/images/lottery-bg.png');
|
||
background-repeat: no-repeat;
|
||
background-position: top;
|
||
background-size: 100%;
|
||
}
|
||
</style>
|