gypsy-crm-frontend-vu/pages/activities/components/DrawLotteryRaffle.vue

<template>
    <view class="draw-lottery">
        <view class="title">{{ t('wallet.item65') }}</view>
        <view class="times">{{ t('wallet.item10') }}{{ curLuckyDrawTimesF }}{{ t('wallet.item11') }}</view>

        <view class="lottery-grid">
            <view v-for="(item, index) in lotteryList" :key="index" class="lottery-item"
                :class="{ active: drawIndex === index }">
                <image :src="item.icon" mode="aspectFill" />
                <text>{{ item.name }}</text>
            </view>
        </view>

        <button hover-class="" class="draw-btn" type="primary" :disabled="curLuckyDrawTimesF <= 0 || drawing"
            @click="startDraw">
            {{ drawing ? t('common.drawing') : t('wallet.item66') }}
        </button>

        <view v-if="drawResult" class="draw-result">
            <text>{{ t('wallet.item67') }}: {{ drawResult.name }}</text>
        </view>
    </view>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { useI18n } from 'vue-i18n'

const { t } = useI18n()

const props = defineProps<{
    curLuckyDrawTimesF: string | number
}>()

const emit = defineEmits(['draw-complete'])

const lotteryList = ref([
    { name: '$10', icon: '/static/images/lottery/10.png' },
    { name: '$20', icon: '/static/images/lottery/20.png' },
    { name: '$50', icon: '/static/images/lottery/50.png' },
    { name: '$100', icon: '/static/images/lottery/100.png' },
    { name: '$200', icon: '/static/images/lottery/200.png' },
    { name: '$500', icon: '/static/images/lottery/500.png' },
    { name: '$1000', icon: '/static/images/lottery/1000.png' },
    { name: t('wallet.item68'), icon: '/static/images/lottery/thanks.png' }
])

const drawIndex = ref(-1)
const drawing = ref(false)
const drawResult = ref<any>(null)

const startDraw = () => {
    if (drawing.value) return

    drawing.value = true
    drawResult.value = null
    let count = 0
    const maxCount = 20

    const interval = setInterval(() => {
        drawIndex.value = Math.floor(Math.random() * lotteryList.value.length)
        count++

        if (count >= maxCount) {
            clearInterval(interval)
            drawing.value = false
            const result = lotteryList.value[drawIndex.value]
            drawResult.value = result
            emit('draw-complete', result)
        }
    }, 100)
}
</script>

<style scoped lang="scss">
.draw-lottery {
    padding: 20rpx;

    .title {
        font-size: 32rpx;
        font-weight: bold;
        color: var(--bs-heading-color);
        text-align: center;
        margin-bottom: 20rpx;
    }

    .times {
        font-size: 28rpx;
        color: var(--bs-heading-color);
        text-align: center;
        margin-bottom: 40rpx;
    }

    .lottery-grid {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 20rpx;
        margin-bottom: 40rpx;

        .lottery-item {
            display: flex;
            flex-direction: column;
            align-items: center;
            padding: 20rpx;
            background-color: #f5f5f5;
            border-radius: 16rpx;
            transition: all 0.3s;

            image {
                width: 80rpx;
                height: 80rpx;
                margin-bottom: 10rpx;
            }

            text {
                font-size: 24rpx;
                color: var(--bs-heading-color);
            }

            &.active {
                transform: scale(1.1);
                background-color: #ffd700;
                box-shadow: 0 0 20rpx rgba(255, 215, 0, 0.5);

                text {
                    color: var(--bs-heading-color);
                    font-weight: bold;
                }
            }
        }
    }

    .draw-btn {
        width: 100%;
        height: 80rpx;
        line-height: 80rpx;
        font-size: 28rpx;
        border-radius: 40rpx;
        margin-bottom: 30rpx;

        &[disabled] {
            opacity: 0.5;
        }
    }

    .draw-result {
        text-align: center;
        font-size: 28rpx;
        color: #ff4d4f;
        font-weight: bold;
    }
}
</style>