menduner/src/views/mall/components/prizeDraw.vue

<template>
  <div class="prizeDrawBox">
    <div class="text-end cursor-pointer color-666" @click="emit('success')">
      <v-btn color="primary" variant="tonal" append-icon="mdi-pan-right">我的奖品</v-btn>
    </div>
    <div class="d-flex flex-column align-center">
      <div class="numberBox mb-5">恭喜您获得房券抽奖机会</div>
      <gridPage v-if="props.type === '1'" :lotteryId="props.lotteryId" :disabled="disabled" @end="endCallback"></gridPage>
      <slotMachinePage v-if="props.type === '2'" :lotteryId="props.lotteryId" height="120" :disabled="disabled" @end="endCallback"></slotMachinePage>

      <CtDialog :visible="showDialog" titleClass="text-h6" :footer="false" :widthType="3" title="抽奖详情" @close="showDialog = false">
        <div class="d-flex align-center flex-column">
          <svg-icon name="submit" size="300"></svg-icon>
          <p v-for="(k, i) in prizeData" :key="i" class="mb-3">{{ k.prize.prompt }}</p>
          <div class="my-10">
            <v-btn color="primary" variant="outlined" width="120" @click="showDialog = false">取 消</v-btn>
            <v-btn color="primary" width="120" class="ml-5" @click.stop="emit('success')">前往领取</v-btn>
          </div>
        </div>
      </CtDialog>
    </div>
  </div>
</template>

<script setup>
defineOptions({ name: 'prizeDraw'})
import gridPage from './prizeDraw/grid.vue'
import slotMachinePage from './prizeDraw/slotMachine.vue'
import { ref } from 'vue'
import { getLuckLotteryRecordByOrderId } from '@/api/mall/prize'
import Snackbar from '@/plugins/snackbar'

const emit = defineEmits(['success'])
const props = defineProps({
  lotteryId: [Number, String],
  orderId: [Number, String],
  type: {
    type: String,
    default: '1'
  }
})

const disabled = ref(false)

// 获取中奖记录
const prizeData = ref({})
const getRecord = async () => {
  const data = await getLuckLotteryRecordByOrderId(props.orderId)
  prizeData.value = data || []
  if (!data || !data.length) disabled.value = true
}
if (props.orderId) getRecord()

const showDialog = ref(false)
const endCallback = () => {
  if (!prizeData.value.length) return Snackbar.warning('您已经抽过奖了哦')
  showDialog.value = true
  disabled.value = true
}
</script>

<style scoped lang="scss">
.prizeDrawBox {
  padding: 20px 40px;
  background-color: var(--default-bgc);
}
.prizeDraw {
  margin: 0 auto; 
}
.numberBox {
  font-size: 20px;
  font-weight: bold;
  padding: 2px 38px;
  border-bottom: 3px solid var(--v-primary-base);
}
.colorBase {
  color: var(--v-primary-base);
  margin: 0 6px;
  font-size: 22px;
}
</style>