抽奖

src/views/mall/components/prizeDraw.vue

@@ -1,12 +1,16 @@
 <template>
   <div class="prizeDrawBox">
     <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" @start="disabled = true" @end="endCallback"></gridPage>
-      <slotMachinePage v-if="props.type === '2'" :lotteryId="props.lotteryId" height="120" :class="{'mb-3': disabled}" :disabled="disabled" @start="disabled = true" @end="endCallback"></slotMachinePage>
+      <CtDialog :visible="showDialog" :widthType="3" :footer="false" titleClass="text-h6" title="房券抽奖" @close="showDialog = false">
+        <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" @start="disabled = true" @end="endCallback"></gridPage>
+          <slotMachinePage v-if="props.type === '2'" :lotteryId="props.lotteryId" height="120" :class="{'mb-3': disabled}" :disabled="disabled" @start="disabled = true" @end="endCallback"></slotMachinePage>
+        </div>
+      </CtDialog>
 
       <v-card min-height="300" width="700" class="pa-5" :class="{'mt-3': !disabled}" style="position: relative;">
-        <div v-if="showDialog">
+        <div v-if="showPrize">
           <p v-for="(k, i) in prizeData" :key="i" class="color-primary">
             {{ k.prize.prompt }}
             <span class="color-999">（10天内未领取的，则视为主动放弃当前奖品）</span>
@@ -60,7 +64,7 @@
 defineOptions({ name: 'prizeDraw'})
 import gridPage from './prizeDraw/grid.vue'
 import slotMachinePage from './prizeDraw/slotMachine.vue'
-import { ref } from 'vue'
+import { onMounted, ref } from 'vue'
 import { getLuckLotteryRecordByOrderId } from '@/api/mall/prize'
 import { getMallUserAddressList } from '@/api/mall/address'
 import Snackbar from '@/plugins/snackbar'
@@ -78,6 +82,11 @@ const props = defineProps({
   }
 })
 
+const showDialog = ref(false)
+onMounted(() =>{
+  showDialog.value = true
+})
+
 const router = useRouter()
 const newAddress = ref({
   name: '',
@@ -128,10 +137,11 @@ const getRecord = async () => {
 }
 if (props.orderId) getRecord()
 
-const showDialog = ref(false)
+const showPrize = ref(false)
 const endCallback = () => {
   // if (!prizeData.value.length) return Snackbar.warning('您已经抽过奖了哦')
-  showDialog.value = true
+  showDialog.value = false
+  showPrize.value = true
   // disabled.value = true
 }