九宫格抽奖

src/views/mall/components/prizeDraw.vue

@@ -1,19 +1,7 @@
 <template>
   <div class="prizeDrawBox">
     <city @inputChange="null"></city>
-    <LuckyGrid
-      ref="myLucky"
-      width="300px"
-      height="300px"
-      :prizes="prizes"
-      :blocks="blocks"
-      :buttons="buttons"
-      :default-config="defaultConfig"
-      :disabled="true"
-      class="prizeDraw"
-      @start="startCallback"
-      @end="endCallback"
-    />
+    <gridPage :disabled="!Number(luckyDrawsNum)" :lotteryId="props.lotteryId" @start="startCallback" @end="endCallback"></gridPage>
     <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">
@@ -32,83 +20,20 @@
 
 <script setup>
 defineOptions({ name: 'prizeDraw'})
-import Snackbar from '@/plugins/snackbar'
 import city from './prizeDraw/city.vue'
+import gridPage from './prizeDraw/grid.vue'
 import { ref } from 'vue'
-import { getPrizeByLotteryId, getNumByLotteryId, luckyLotteryRecordReceive } from '@/api/mall/prize'
+import { getNumByLotteryId } from '@/api/mall/prize'
 
 const emit = defineEmits(['success'])
 const props = defineProps({ lotteryId: [Number, String] })
 
-const myLucky = ref()
-// 背景样式
-const blocks = [
-  { padding: '10px', background: '#00897B', borderRadius: 6 }
-]
-const prizes = ref([
-  { x: 0, y: 0, imgs: [] },
-  { x: 1, y: 0, imgs: [] },
-  { x: 2, y: 0, imgs: [] },
-  { x: 2, y: 1, imgs: [] },
-  { x: 2, y: 2, imgs: [] },
-  { x: 1, y: 2, imgs: [] },
-  { x: 0, y: 2, imgs: [] },
-  { x: 0, y: 1, imgs: [] }
-])
-const buttons = [
-  {
-    x: 1, y: 1,
-    background: '#fe920200',
-    borderRadius: '10px',
-    imgs: [{
-      src: 'https://img1.baidu.com/it/u=3949019928,2138080900&fm=253&fmt=auto&app=138&f=PNG?w=300&h=300',
-      width: '100%',
-      height: '100%'
-    }]
-  }
-]
-const defaultConfig = {
-  gutter: 10, // 格子之间的间隙
-  speed: 10 // 旋转速度的峰值
-}
-
 // 获取抽奖次数
 const luckyDrawsNum = ref(0)
 const getLuckyNum = async () => {
   luckyDrawsNum.value = await getNumByLotteryId(props.lotteryId)
 }
-
-// 根据活动id获取奖品列表
-const getPrizeData = async () => {
-  // 抽奖次数
-  getLuckyNum()
-  // 奖品列表
-  const data = await getPrizeByLotteryId(props.lotteryId)
-
-  data.forEach((item, index) => {
-    prizes.value[index].prize = item
-    prizes.value[index].imgs = [{
-      src: item.image,
-      activeSrc: 'https://bpic.588ku.com/element_origin_min_pic/19/11/15/a6f8bd3b208aca40e3de49209ab309ca.jpg',
-      width: '100%',
-      top: '0%'
-    }]
-  })
-}
-if (props.lotteryId) getPrizeData()
-
-const startCallback = () => {
-  if (!luckyDrawsNum.value) return Snackbar.warning('抽奖次数已用完!')
-  // 调用抽奖组件的play方法开始游戏
-  myLucky.value.play()
-  // 模拟调用接口异步抽奖
-  setTimeout(() => {
-    // 假设后端返回的中奖索引是0
-    const index = 3
-    // 调用stop停止旋转并传递中奖索引
-    myLucky.value.stop(index)
-  }, 1500)
-}
+getLuckyNum()
 
 // 抽中奖品信息
 const showDialog = ref(false)
@@ -121,9 +46,9 @@ const endCallback  = (value) => {
   getLuckyNum()
 }
 
-const handleReceive = () => {
-  showDialog.value = false
-}
+// const handleReceive = () => {
+//   showDialog.value = false
+// }
 </script>
 
 <style scoped lang="scss">

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

@@ -0,0 +1,95 @@
+<!--  -->
+<template>
+  <LuckyGrid
+    ref="myLucky"
+    width="300px"
+    height="300px"
+    :prizes="prizes"
+    :blocks="blocks"
+    :buttons="buttons"
+    :default-config="defaultConfig"
+    :disabled="true"
+    class="prizeDraw"
+    @start="startCallback"
+    @end="endCallback"
+  />
+</template>
+
+<script setup>
+defineOptions({name: 'prizeDraw-LuckyGrid'})
+import { getPrizeByLotteryId } from '@/api/mall/prize'
+import Snackbar from '@/plugins/snackbar'
+import { ref } from 'vue'
+const emit = defineEmits(['start', 'end'])
+const props = defineProps({ lotteryId: [Number, String], disabled: [Number, Boolean] })
+
+const myLucky = ref()
+// 背景样式
+const blocks = [
+  { padding: '10px', background: '#00897B', borderRadius: 6 }
+]
+const prizes = ref([
+  { x: 0, y: 0, imgs: [] },
+  { x: 1, y: 0, imgs: [] },
+  { x: 2, y: 0, imgs: [] },
+  { x: 2, y: 1, imgs: [] },
+  { x: 2, y: 2, imgs: [] },
+  { x: 1, y: 2, imgs: [] },
+  { x: 0, y: 2, imgs: [] },
+  { x: 0, y: 1, imgs: [] }
+])
+const buttons = [
+  {
+    x: 1, y: 1,
+    background: '#fe920200',
+    borderRadius: '10px',
+    imgs: [{
+      src: 'https://img1.baidu.com/it/u=3949019928,2138080900&fm=253&fmt=auto&app=138&f=PNG?w=300&h=300',
+      width: '100%',
+      height: '100%'
+    }]
+  }
+]
+const defaultConfig = {
+  gutter: 10, // 格子之间的间隙
+  speed: 10 // 旋转速度的峰值
+}
+
+// 根据活动id获取奖品列表
+const getPrizeData = async (lotteryId) => {
+  let id = lotteryId || props.lotteryId
+  const data = await getPrizeByLotteryId(id)
+
+  data.forEach((item, index) => {
+    prizes.value[index].prize = item
+    prizes.value[index].imgs = [{
+      src: item.image,
+      activeSrc: 'https://bpic.588ku.com/element_origin_min_pic/19/11/15/a6f8bd3b208aca40e3de49209ab309ca.jpg',
+      width: '100%',
+      top: '0%'
+    }]
+  })
+}
+if (props.lotteryId) getPrizeData()
+
+const startCallback = () => {
+  if (props.disabled) return Snackbar.warning('抽奖次数已用完!')
+  emit('start')
+  // 调用抽奖组件的play方法开始游戏
+  myLucky.value.play()
+  // 模拟调用接口异步抽奖
+  setTimeout(() => {
+    // 假设后端返回的中奖索引是0
+    const index = 3
+    // 调用stop停止旋转并传递中奖索引
+    myLucky.value.stop(index)
+  }, 1500)
+}
+
+const endCallback  = (value) => {
+  emit('end', value)
+}
+
+</script>
+<style lang="scss" scoped>
+</style>

src/views/mall/payOver/index.vue

@@ -2,7 +2,7 @@
 <template>
   <Navbar class="mb-3" />
   <v-card class="default-width my-3">
-    <showText :class="{'mb-15': !showPrizeDraw}"></showText>
+    <showText :class="showPrizeDraw ? '' : 'mb-15'"></showText>
 
     <!-- 抽奖 -->
     <prizeDraw v-if="showPrizeDraw" :lotteryId="lotteryId" class="prizeDraw mx-15 my-7" @success="handleReceive"></prizeDraw>