老虎机

pages/lucky/slotMachine.vue

@@ -0,0 +1,95 @@
+<!-- 老虎机 -->
+<template>
+  <view 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"
+    />
+    <image
+      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"
+    />
+  </view>
+</template>
+
+<script setup>
+import PrizeApi from '@/sheep/api/prizeDraw'
+import SlotMachine from '@lucky-canvas/uni/slot-machine'
+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: 15, direction: -1 },
+    { speed: 15, direction: 1 },
+    { speed: 15, direction: -1 },
+  ]
+const prizes = ref([])
+const defaultConfig = {
+  rowSpacing: '10px',
+  colSpacing: '10px',
+  accelerationTime: 1000, // 开始旋转时间
+  decelerationTime: 5000, // 缓慢停止时间
+}
+debugger
+// 根据活动id获取奖品列表
+const getPrizeData = async (lotteryId) => {
+  let id = lotteryId || props.lotteryId
+  const data = await PrizeApi.getPrizeByLotteryId(id)
+  prizes.value = []
+  debugger
+  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 sheep.$helper.toast('抽奖次数已用完')
+  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>

pages/pay/prizeDraw.vue

@@ -1,15 +1,42 @@
 <template>
-  <view>
+  <view v-if="showPrizeDraw">
     <!-- <luckyWheel></luckyWheel> -->
     <luckyGrid></luckyGrid>
-    <!-- <div class="numberBox mt-5">你还剩余<span class="colorBase">{{ number }}</span>次抽奖机会</div> -->
+    <!-- <slotMachine v-if="props.type === '2'" :lotteryId="lotteryId"></slotMachine> -->
+    <!-- <view class="numberBox mt-5">您还剩余<span class="colorBase">{{ luckyDrawsNum }}</span>次抽奖机会</view> -->
   </view>
 </template>
 <script setup>
 // import luckyWheel from '@/pages/lucky/Wheel'
 import luckyGrid from '@/pages/lucky/Grid'
+// import slotMachine from '@/pages/lucky/slotMachine'
+// import PrizeApi from '@/sheep/api/prizeDraw'
+import { ref } from 'vue'
+// const props = defineProps({
+//   skuId: [Number, String],
+//   type: {
+//     type:String,
+//     default: '1'
+//   }
+// })
+
+// // 获取抽奖次数
+// const luckyDrawsNum = ref(0)
+// const getLuckyNum = async () => {
+//   luckyDrawsNum.value = await PrizeApi.getNumByLotteryId(lotteryId.value)
+// }
+
+const showPrizeDraw = ref(true)
+// const lotteryId = ref('')
+// const getLottery = async () => {
+//   if (!props.skuId) return
+//   const data = await PrizeApi.getPrizeByGoodsId(props.skuId)
+//   lotteryId.value = data.id
+//   showPrizeDraw.value = data && Object.keys(data).length > 0
+//   if (showPrizeDraw.value) getLuckyNum()
+// }
+// getLottery()
 
-const number = 10
 </script>
 <style lang="scss" scoped>
 .numberBox {

sheep/api/prizeDraw/index.js

@@ -0,0 +1,32 @@
+import request from '@/sheep/request';
+
+const PrizeApi = {
+  // 根据活动id获取奖品
+  getPrizeByLotteryId: (lotteryId) => {
+    return request({
+      url: '/promotion/luck-prize/get',
+      method: 'GET',
+      params: { lotteryId },
+    });
+  },
+
+  // 根据商品id获取抽奖活动
+  getPrizeByGoodsId: (spuId) => {
+    return request({
+      url: '/promotion/luck-lottery/get/by-spu-id',
+      method: 'GET',
+      params: { spuId },
+    });
+  },
+
+  // 据活动id获取用户抽奖次数
+  getNumByLotteryId: (lotteryId) => {
+    return request({
+      url: '/promotion/luck-lottery/get/user-num',
+      method: 'GET',
+      params: { lotteryId },
+    });
+  },
+};
+
+export default PrizeApi;