弹窗

src/views/mall/components/prizeDraw.vue

@@ -15,6 +15,17 @@
       @end="endCallback"
     />
     <div class="numberBox mt-5">您还剩余<span class="colorBase">{{ number }}</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>
+        恭喜您获得三亚五日游
+        <div class="my-10">
+          <v-btn color="primary" variant="outlined" width="120">取 消</v-btn>
+          <v-btn color="primary" width="120" class="ml-5">领 取</v-btn>
+        </div>
+      </div>
+    </CtDialog>
   </div>
 </template>
 
@@ -30,8 +41,6 @@ import { ref } from 'vue'
 //   }
 // })
 
-// const blocksImg1 = { src: 'https://img1.baidu.com/it/u=681765036,1809656907&fm=253&fmt=auto&app=138&f=JPEG?w=400&h=400', width: '100%', height: '100%' }
-
 const myLucky = ref()
 const blocks = [
   // { padding: '10px', background: '#fff', imgs:[] },
@@ -83,8 +92,10 @@ const startCallback = () => {
   }, 1500)
 }
 
+const showDialog = ref(false)
 const endCallback  = (prize) => {
   console.log(prize, 'end')
+  showDialog.value = true
   getData()
 }