THJ_Mobile/src/packages/mobile/views/credit/lottery/index.vue

<template>
    <app-view class="credit-lottery">
        <template #header>
            <app-navbar title="积分红包" />
        </template>
        <div class="credit-lottery__title">
            <img src="@mobile/assets/images/lottery/lottery-title.png" />
        </div>
        <div class="credit-lottery__container">
            <div class="credit-lottery__box credit-lottery__draw">
                <div class="block">
                    <ul class="block-prize">
                        <li>
                            <span>一等奖</span>
                            <span>现金红包</span>
                        </li>
                        <li>
                            <span>二等奖</span>
                            <span>现金红包</span>
                        </li>
                        <li>
                            <span>谢谢参与</span>
                        </li>
                    </ul>
                    <div class="block-button">
                        <button type="button" @click="onSubmit">立即抽奖</button>
                    </div>
                    <div class="block-info">
                        <span>当前积分:{{ userAccount.curscore ?? 0 }}</span>
                        <span>*抽一次消耗{{ creditConfig.parma1 ?? 0 }}积分</span>
                    </div>
                </div>
            </div>
            <div class="credit-lottery__box credit-lottery__record">
                <dl class="block">
                    <dt class="block-title">- 我的红包 -</dt>
                    <dd class="block-item" v-for="(item, index) in creditList" :key="index">
                        <span>{{ item.createtime }}</span>
                        <span>{{ item.score }}</span>
                    </dd>
                </dl>
            </div>
        </div>
        <Reward v-model:show="showReward" :value="redEnvelope.RedPacketAmount" :level="redEnvelope.GearLevel" />
    </app-view>
</template>

<script lang="ts" setup>
import { shallowRef } from 'vue'
import { Button, Toast } from 'vant'
import { fullloading } from '@/utils/vant'
import { useCreditLottery } from '@/business/credit'
import Reward from './components/reward/index.vue'

const { creditConfig, userAccount, creditList, redEnvelope, formSubmit, formRefresh } = useCreditLottery()
const showReward = shallowRef(false) // 显示抽奖红包

const onSubmit = () => {
    //showReward.value = true
    fullloading((hideLoading) => {
        formSubmit().then(() => {
            hideLoading()
            showReward.value = true
        }).catch(() => {
            Toast.fail('抽奖失败')
        })
    })
}

formRefresh()
</script>

<style lang="less">
@import './index.less';
</style>