老虎机

src/views/mall/components/prizeDraw.vue

@@ -1,7 +1,8 @@
 <template>
   <div class="prizeDrawBox">
     <city @inputChange="null"></city>
-    <gridPage :disabled="!Number(luckyDrawsNum)" :lotteryId="props.lotteryId" @start="startCallback" @end="endCallback"></gridPage>
+    <gridPage v-if="type === '1'" :disabled="!Number(luckyDrawsNum)" :lotteryId="props.lotteryId" @end="endCallback"></gridPage>
+    <slotMachinePage v-if="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">
@@ -22,11 +23,18 @@
 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] })
+const props = defineProps({
+  lotteryId: [Number, String],
+  type: {
+    type:String,
+    default: '1'
+  }
+})
 
 // 获取抽奖次数
 const luckyDrawsNum = ref(0)
@@ -40,7 +48,6 @@ const showDialog = ref(false)
 const prizeData = ref({})
 const endCallback  = (value) => {
   console.log(value.prize, '抽中的奖品')
-
   prizeData.value = value.prize
   showDialog.value = true
   getLuckyNum()

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

@@ -1,4 +1,4 @@
-<!--  -->
+<!-- 九宫格 -->
 <template>
   <LuckyGrid
     ref="myLucky"

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

@@ -0,0 +1,95 @@
+<!-- 老虎机 -->
+<template>
+  <div class="mb-n5" v-if="prizes?.length">
+    <SlotMachine
+      ref="myLucky"
+      width="300px"
+      height="300px"
+      :prizes="prizes"
+      :blocks="blocks"
+      :slots="slots"
+      accelerationTime="1000"
+      decelerationTime="10000"
+      :default-config="defaultConfig"
+      :disabled="true"
+      class="prizeDraw"
+      @start="startCallback"
+      @end="endCallback"
+    />
+    <!-- <div style="position: absolute; top: 50%; right: 0; transform: translateY(50%);"></div> -->
+    <v-img
+      src="https://img1.baidu.com/it/u=3949019928,2138080900&fm=253&fmt=auto&app=138&f=PNG?w=300&h=300"
+      :width="100"
+      style="margin: 0 auto;"
+      @click="startCallback"
+    />
+  </div>
+</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 slots = [
+    { speed: 18 },
+    { speed: 15 },
+    { speed: 12 },
+  ]
+const prizes = ref([])
+const defaultConfig = {
+  rowSpacing: '10px',
+  colSpacing: '10px',
+  accelerationTime: 1000,
+  decelerationTime: 5000,
+}
+
+// 根据活动id获取奖品列表
+const getPrizeData = async (lotteryId) => {
+  let id = lotteryId || props.lotteryId
+  const data = await getPrizeByLotteryId(id)
+  prizes.value = []
+  data.forEach(item => {
+    prizes.value.push({
+      prize: item,
+      background: '#fe920200',
+      borderRadius: '10px',
+      imgs: [{
+        width: '100%',
+        top: '0%',
+        src: item.image
+      }]
+    })
+  })
+}
+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

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