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-image" @click="onSubmit">
                        <img src="@mobile/assets/images/lottery/lottery-hongbao.png" />
                    </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.redpacketvalue.toFixed(2) }}</span>
                    </dd>
                </dl>
            </div>
        </div>
        <app-reward :show="showReward" :value="redEnvelope.RedPacketAmount" button-text="开心收下"
            @click="showReward = false" />
    </app-view>
</template>

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

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

const onSubmit = () => {
    const { curscore = 0 } = userAccount.value
    const { parma1 = 0 } = creditConfig.value
    if (curscore < parma1) {
        Toast.fail('可用积分不足')
    } else {
        fullloading((hideLoading) => {
            formSubmit().then(() => {
                hideLoading()
                showReward.value = true
            }).catch(() => {
                Toast.fail('抽奖失败')
            })
        })
    }
}

formRefresh()
</script>

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