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

<template>
  <div class="prizeDrawBox">
    <city @inputChange="null"></city>
    <gridPage v-if="props.type === '1'" :disabled="!Number(luckyDrawsNum)" :lotteryId="props.lotteryId" @end="endCallback"></gridPage>
    <slotMachinePage v-if="props.type === '2'" :disabled="!Number(luckyDrawsNum)" :lotteryId="props.lotteryId" @end="endCallback"></slotMachinePage>
    <div class="numberBox mt-5">您还剩余<span class="colorBase">{{ luckyDrawsNum }}</span>次抽奖机会</div>

    <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>
        <!-- {{ prizeData?.prompt }}
        <div class="mt-5 font-weight-bold color-primary text-decoration-underline cursor-pointer" @click="emit('success')">点击前往“我的-我的奖品”中领取</div> -->
        <!-- <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="handleReceive">前往领取</v-btn>
        </div> -->
      </div>
    </CtDialog>
  </div>
</template>

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

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

// 获取抽奖次数
const luckyDrawsNum = ref(0)
const getLuckyNum = async () => {
  luckyDrawsNum.value = await getNumByLotteryId(props.lotteryId)
}
getLuckyNum()

// 抽中奖品信息
const showDialog = ref(false)
const prizeData = ref({})
const endCallback  = (value) => {
  console.log(value.prize, '抽中的奖品')
  prizeData.value = value.prize
  showDialog.value = true
  getLuckyNum()
}

// const handleReceive = () => {
//   showDialog.value = false
// }
</script>

<style scoped lang="scss">
.prizeDrawBox {
  padding: 40px;
  background-color: var(--default-bgc);
  display: flex;
  flex-direction: column;
  // justify-content: center;
  align-items: center;
}
.prizeDraw {
  margin: 0 auto; 
  cursor: pointer;
}
.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>