prizeDraw.vue 2.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475
  1. <template>
  2. <div class="prizeDrawBox">
  3. <!-- <city @inputChange="null"></city> -->
  4. <gridPage v-if="props.type === '1'" :lotteryId="props.lotteryId" @end="endCallback"></gridPage>
  5. <slotMachinePage v-if="props.type === '2'" :lotteryId="props.lotteryId" height="120" @end="endCallback"></slotMachinePage>
  6. <CtDialog :visible="showDialog" titleClass="text-h6" :footer="false" :widthType="3" title="抽奖详情" @close="showDialog = false">
  7. <div class="d-flex align-center flex-column">
  8. <svg-icon name="submit" size="300"></svg-icon>
  9. {{ prizeData?.prompt }}
  10. <!-- <div class="mt-5 font-weight-bold color-primary text-decoration-underline cursor-pointer" @click="emit('success')">点击前往“我的-我的奖品”中领取</div> -->
  11. <div class="my-10">
  12. <v-btn color="primary" variant="outlined" width="120" @click="showDialog = false">取 消</v-btn>
  13. <v-btn color="primary" width="120" class="ml-5" @click.stop="handleReceive">前往领取</v-btn>
  14. </div>
  15. </div>
  16. </CtDialog>
  17. </div>
  18. </template>
  19. <script setup>
  20. defineOptions({ name: 'prizeDraw'})
  21. import city from './prizeDraw/city.vue'
  22. import gridPage from './prizeDraw/grid.vue'
  23. import slotMachinePage from './prizeDraw/slotMachine.vue'
  24. import { ref } from 'vue'
  25. const emit = defineEmits(['success'])
  26. const props = defineProps({
  27. lotteryId: [Number, String],
  28. type: {
  29. type:String,
  30. default: '1'
  31. }
  32. })
  33. // 抽中奖品信息
  34. const showDialog = ref(false)
  35. const prizeData = ref({})
  36. const endCallback = (value) => {
  37. console.log(value.prize, '抽中的奖品')
  38. prizeData.value = value.prize
  39. showDialog.value = true
  40. }
  41. // const handleReceive = () => {
  42. // showDialog.value = false
  43. // }
  44. </script>
  45. <style scoped lang="scss">
  46. .prizeDrawBox {
  47. padding: 40px;
  48. background-color: var(--default-bgc);
  49. display: flex;
  50. flex-direction: column;
  51. // justify-content: center;
  52. align-items: center;
  53. }
  54. .prizeDraw {
  55. margin: 0 auto;
  56. cursor: pointer;
  57. }
  58. .numberBox {
  59. font-size: 20px;
  60. font-weight: bold;
  61. padding: 2px 38px;
  62. border-bottom: 3px solid var(--v-primary-base);
  63. }
  64. .colorBase {
  65. color: var(--v-primary-base);
  66. margin: 0 6px;
  67. font-size: 22px;
  68. }
  69. </style>