From 758198ec7157ae0bd0187a5ef529dfea5b477204 Mon Sep 17 00:00:00 2001
From: zpc <zpc1131@gamil.com>
Date: Thu, 15 May 2025 20:47:39 +0800
Subject: [PATCH] 222

---
 components/detail-lucky/README.md          | 164 ++++++
 components/detail-lucky/detail-lucky.vue   | 575 ++++++++++++++++++++-
 components/detail-lucky/detail-lucky_1.vue | 489 ++++++++++++++++++
 components/detail-lucky/detail-lucky_3.vue | 493 ++++++++++++++++++
 components/detail-lucky/detail-lucky_5.vue | 485 +++++++++++++++++
 pages/shouye/detail_wuxian.vue             |  22 +-
 pages/shouye/slots.vue                     | 416 +++++----------
 7 files changed, 2346 insertions(+), 298 deletions(-)
 create mode 100644 components/detail-lucky/README.md
 create mode 100644 components/detail-lucky/detail-lucky_1.vue
 create mode 100644 components/detail-lucky/detail-lucky_3.vue
 create mode 100644 components/detail-lucky/detail-lucky_5.vue

diff --git a/components/detail-lucky/README.md b/components/detail-lucky/README.md
new file mode 100644
index 0000000..6d63036
--- /dev/null
+++ b/components/detail-lucky/README.md
@@ -0,0 +1,164 @@
+# 老虎机抽奖组件使用指南
+
+## 组件简介
+
+本组件是一个整合了1列、3列和5列老虎机功能的抽奖组件，可根据传入的参数动态切换不同列数的老虎机模式。
+
+## 使用方法
+
+### 1. 引入组件
+
+```vue
+import DetailLucky from "@/components/detail-lucky/detail-lucky.vue";
+
+export default {
+  components: { 
+    DetailLucky 
+  }
+}
+```
+
+### 2. 在模板中使用
+
+```vue
+<template>
+  <DetailLucky ref="luckySlot" :mode="3"></DetailLucky>
+</template>
+```
+
+### 3. 组件属性
+
+| 属性名 | 类型 | 默认值 | 说明 |
+|-------|------|-------|------|
+| mode  | Number/String | 1 | 老虎机模式，可选值：1, 3, 5 |
+
+### 4. 组件方法
+
+#### 初始化老虎机
+
+```js
+// 初始化老虎机，传入奖品列表和模式
+this.$refs.luckySlot.init(prizeList, mode);
+
+// 例如：初始化3列老虎机
+this.$refs.luckySlot.init(myPrizes, 3);
+
+// 也可以仅传入奖品列表，使用组件默认的模式
+this.$refs.luckySlot.init(myPrizes);
+```
+
+#### 开始抽奖
+
+```js
+// 开始抽奖，可选传入回调函数
+this.$refs.luckySlot.startDraw(() => {
+  console.log('老虎机开始旋转');
+});
+```
+
+#### 停止抽奖并指定中奖结果
+
+```js
+// 停止抽奖，传入中奖索引数组
+// 对于1列老虎机，传入1个索引
+this.$refs.luckySlot.stopDraw([5]);
+
+// 对于3列老虎机，传入3个索引
+this.$refs.luckySlot.stopDraw([3, 2, 8]);
+
+// 对于5列老虎机，传入5个索引
+this.$refs.luckySlot.stopDraw([1, 2, 3, 4, 5]);
+
+// 也可以不传入索引，组件会随机生成
+this.$refs.luckySlot.stopDraw();
+```
+
+#### 其他方法
+
+```js
+// 强制结束抽奖
+this.$refs.luckySlot.forceEndDraw();
+
+// 隐藏老虎机
+this.$refs.luckySlot.hide();
+
+// 显示老虎机
+this.$refs.luckySlot.show();
+
+// 重置组件状态
+this.$refs.luckySlot.reset();
+```
+
+### 5. 组件事件
+
+| 事件名 | 说明 | 返回值 |
+|-------|------|-------|
+| start | 开始抽奖时触发 | - |
+| end   | 结束抽奖时触发 | 中奖信息对象 |
+
+### 使用示例
+
+```vue
+<template>
+  <view>
+    <button @click="startLottery">开始抽奖</button>
+    <DetailLucky ref="luckySlot" :mode="slotMode"></DetailLucky>
+  </view>
+</template>
+
+<script>
+import DetailLucky from "@/components/detail-lucky/detail-lucky.vue";
+
+export default {
+  components: { DetailLucky },
+  data() {
+    return {
+      slotMode: 3,
+      prizeList: [] // 奖品列表
+    }
+  },
+  mounted() {
+    // 获取奖品列表
+    this.getPrizeList();
+  },
+  methods: {
+    // 获取奖品列表
+    async getPrizeList() {
+      // 这里可以从API获取奖品列表
+      this.prizeList = [...]; // 示例奖品列表
+    },
+    
+    // 开始抽奖
+    startLottery() {
+      // 初始化老虎机
+      this.$refs.luckySlot.init(this.prizeList, this.slotMode);
+      
+      // 开始抽奖
+      this.$refs.luckySlot.startDraw();
+      
+      // 模拟3秒后停止抽奖
+      setTimeout(() => {
+        // 这里可以调用API获取中奖结果
+        const winIndex = Math.floor(Math.random() * this.prizeList.length);
+        
+        // 停止抽奖并指定中奖索引
+        if (this.slotMode === 1) {
+          this.$refs.luckySlot.stopDraw([winIndex]);
+        } else if (this.slotMode === 3) {
+          this.$refs.luckySlot.stopDraw([winIndex, winIndex, winIndex]);
+        } else {
+          this.$refs.luckySlot.stopDraw([winIndex, winIndex, winIndex, winIndex, winIndex]);
+        }
+      }, 3000);
+    }
+  }
+}
+</script>
+```
+
+## 注意事项
+
+1. 使用前必须先调用`init`方法初始化组件
+2. 中奖索引数组的长度应与当前模式的列数匹配，如果不匹配会自动补足或截取
+3. 组件高度会根据模式自动调整
+4. 如果不传入奖品列表，将使用默认的奖品列表 
\ No newline at end of file
diff --git a/components/detail-lucky/detail-lucky.vue b/components/detail-lucky/detail-lucky.vue
index a61fc56..ce6df87 100644
--- a/components/detail-lucky/detail-lucky.vue
+++ b/components/detail-lucky/detail-lucky.vue
@@ -1,7 +1,570 @@
-<template></template>
-  
- <script>
+<template>
+  <view class="content-container" v-if="isVisible && isInitialized">
+    <view class="slot-container">
+      <view class="slot-icon">
+        <image
+          src="https://image.zfunbox.cn/static/image/lucky/icon.png"
+          mode="widthFix"
+          style="height: 90rpx; width: 249rpx"
+        ></image>
+      </view>
+      <view class="slot-view" :class="'slot-view-' + currentMode">
+        <!-- 老虎机组件 -->
+        <SlotMachine
+          ref="myLucky"
+          :width="windowWidth"
+          :height="slotHeight"
+          :blocks="blocks"
+          :slots="slots"
+          :prizes="prizes"
+          :defaultConfig="defaultConfig"
+          @start="startCallBack"
+          @end="endCallBack"
+        >
+        </SlotMachine>
+      </view>
+      <view style="color: #484848;font-size: 19rpx;text-align: center;padding-top: 20rpx;">动画结果因设备差异可能会显示异常，获得赏品以（恭喜获得）结果为准</view>
+      <view style="color: #249073;font-size: 21rpx;text-align: center;padding-top: 20rpx;">跳过动画</view>
+    </view>
+  </view>
+</template>
+
+<script>
+// 导入老虎机组件
+import SlotMachine from "@/components/@lucky-canvas/uni/slot-machine";
+
+function shuffle(array) {
+  for (let i = array.length - 1; i > 0; i--) {
+    // 生成一个 0 到 i 之间的随机整数
+    const j = Math.floor(Math.random() * (i + 1));
+    // 交换 array[i] 和 array[j]
+    [array[i], array[j]] = [array[j], array[i]];
+  }
+  return array;
+}
+
+export default {
+  components: { SlotMachine },
+  props: {
+    // 老虎机模式: 1, 3, 5 (分别代表1列、3列、5列)
+    mode: {
+      type: [Number, String],
+      default: 1,
+      validator: function(value) {
+        return [1, 3, 5, '1', '3', '5'].includes(value);
+      }
+    }
+  },
+  data() {
+    return {
+      isVisible: false, // 控制组件显示/隐藏
+      isInitialized: false, // 控制是否已初始化
+      windowWidth: "0px",
+      blocks: [],
+      slots: [],
+      prizes: [],
+      prizeList: [], // 移到data中
+      defaultConfig: {
+        mode: "horizontal", // 水平模式
+        rowSpacing: "10px", // 行间距
+        colSpacing: "10px", // 列间距
+        accelerationTime: 1500,
+      },
+      luckyMessage: "恭喜您获得奖品",
+      luckyPrize: null,
+      currentPrizeIndex: -1,
+      internalMode: 1, // 内部存储模式的状态
+    };
+  },
+  computed: {
+    // 计算抽奖项尺寸
+    lotteryItemSize() {
+      let height = uni.upx2px(220);
+      let width = uni.upx2px(170);
+      return [width, height];
+    },
+    // 计算当前模式
+    currentMode() {
+      return parseInt(this.internalMode);
+    },
+    // 根据模式计算高度
+    slotHeight() {
+      const modeMap = {
+        1: "160rpx",
+        3: "480rpx",
+        5: "800rpx"
+      };
+      return modeMap[this.currentMode] || "480rpx";
+    },
+    // 根据模式获取背景图
+    backgroundImage() {
+      const modeMap = {
+        1: "di_5.png",
+        3: "di_3.png",
+        5: "di_5.png"
+      };
+      return modeMap[this.currentMode] || "di_3.png";
+    }
+  },
+  methods: {
+    // 初始化老虎机组件
+    init(prizeList, mode) {
+      // 如果传入了模式，更新当前模式
+      if (mode !== undefined && [1, 3, 5].includes(parseInt(mode))) {
+        this.internalMode = parseInt(mode);
+      } else {
+        // 没有传入模式时使用props中的mode初始化内部模式
+        this.internalMode = parseInt(this.mode);
+      }
+
+      // 设置奖品列表
+      if (prizeList && Array.isArray(prizeList) && prizeList.length > 0) {
+        this.prizeList = prizeList;
+      } else {
+        this.prizeList = this.getDefaultPrizes();
+      }
+
+      let windowWidth = uni.getSystemInfoSync().windowWidth;
+      let t = this.prizeList;
+
+      let prizes = [];
+      for (let i = 0; i < t.length; i++) {
+        prizes.push({
+          imgs: [
+            {
+              src: t[i].imgurl,
+              width: "152.78rpx",
+              height: "152.78rpx",
+            },
+          ],
+          background: "#ffffff",
+          data: t[i], // 将原始数据保存到prize中，方便后续使用
+        });
+      }
+      
+      // 根据当前模式创建slots
+      const arr = Array.from({ length: t.length }, (_, i) => i);
+      let slots = [];
+      
+      // 根据模式创建对应数量的列
+      for (let i = 0; i < this.currentMode; i++) {
+        slots.push({ order: shuffle([...arr]), speed: 20 });
+      }
+
+      this.windowWidth = windowWidth + "px";
+      this.slots = slots;
+      this.prizes = prizes;
+
+      // 标记为已初始化
+      this.isInitialized = true;
+
+      return this; // 返回this以支持链式调用
+    },
+
+    // 显示老虎机组件
+    show() {
+      if (!this.isInitialized) {
+        console.error("老虎机尚未初始化，请先调用init方法");
+        return this;
+      }
+      this.isVisible = true;
+      return this;
+    },
+
+    // 隐藏老虎机组件
+    hide() {
+      this.isVisible = false;
+      return this;
+    },
+
+    // 获取默认奖品列表
+    getDefaultPrizes() {
+      return [
+        {
+          id: 1128,
+          title: "兹琪露娜提亚斯",
+          imgurl:
+            "https://image.zfunbox.cn/topic/20250515/2986e27e673ef675e02771cdebd9b822.jpg",
+          price: "350.00",
+          real_pro: "0.02000",
+          goods_type: 1,
+          doubling: 1,
+          is_lingzhu: 0,
+        },
+        {
+          id: 1129,
+          title: "月岗恋钟",
+          imgurl:
+            "https://image.zfunbox.cn/topic/20250515/2c5ed2097716db6bef01da718bc3c091.jpg",
+          price: "132.00",
+          real_pro: "0.02000",
+          goods_type: 1,
+          doubling: 3,
+          is_lingzhu: 0,
+        },
+        {
+          id: 1130,
+          title: "BANDAI万代拼装模型 1/100 MG 机动战士高达 倒A 逆A-15岁以上",
+          imgurl:
+            "https://image.zfunbox.cn/topic/20250515/e35da49b4976f156f2f98dec002274a5.png",
+          price: "305.00",
+          real_pro: "0.03000",
+          goods_type: 1,
+          doubling: 1,
+          is_lingzhu: 0,
+        },
+        {
+          id: 1131,
+          title: "BANDAI 万代拼装模型 MG 主天使-15岁以上",
+          imgurl:
+            "https://image.zfunbox.cn/topic/20250515/77302c6f1ea9ea6a8516cc1208174aee.png",
+          price: "289.00",
+          real_pro: "0.03000",
+          goods_type: 1,
+          doubling: 1,
+          is_lingzhu: 0,
+        },
+        {
+          id: 1132,
+          title: "BANDAI万代 HG00 09 1/144 座天使高达一型-15岁以上",
+          imgurl:
+            "https://image.zfunbox.cn/topic/20250515/55e816c93b5e4103a30682c586816b11.jpg",
+          price: "114.00",
+          real_pro: "0.50000",
+          goods_type: 1,
+          doubling: 3,
+          is_lingzhu: 0,
+        },
+        {
+          id: 1133,
+          title: "BANDAI万代拼装模型 HGUC 130 机动战士高达 杰斯塔-15岁以上",
+          imgurl:
+            "https://image.zfunbox.cn/topic/20250515/aeb6bfb8b4aa8a29796b242e4f5d56d9.png",
+          price: "113.00",
+          real_pro: "1.50000",
+          goods_type: 1,
+          doubling: 1,
+          is_lingzhu: 0,
+        },
+        {
+          id: 1134,
+          title: "BANDAI万代拼装模型HG26 1/144 凯列班高达 异灵高达-15岁以上",
+          imgurl:
+            "https://image.zfunbox.cn/topic/20250515/329e3a7e21772a63cea03d31f948345d.png",
+          price: "112.00",
+          real_pro: "1.00000",
+          goods_type: 1,
+          doubling: 2,
+          is_lingzhu: 0,
+        },
+        {
+          id: 1135,
+          title: "梦幻",
+          imgurl:
+            "https://image.zfunbox.cn/topic/20250515/d2c7e48515d393084000595074209042.jpg",
+          price: "41.00",
+          real_pro: "2.50000",
+          goods_type: 1,
+          doubling: 2,
+          is_lingzhu: 0,
+        },
+        {
+          id: 1136,
+          title: "谜拟丘",
+          imgurl:
+            "https://image.zfunbox.cn/topic/20250515/6031827bc455cbf86ff778d74ddffbd3.jpg",
+          price: "38.00",
+          real_pro: "1.50000",
+          goods_type: 1,
+          doubling: 1,
+          is_lingzhu: 0,
+        },
+        {
+          id: 1137,
+          title: "小提琴模型1个",
+          imgurl:
+            "https://image.zfunbox.cn/topic/20250515/22846dea5a933ab314998afc51abb7bb.jpg",
+          price: "13.80",
+          real_pro: "92.90000",
+          goods_type: 1,
+          doubling: 1,
+          is_lingzhu: 0,
+        },
+      ];
+    },
+
+    // 老虎机开始回调
+    startCallBack() {
+      console.log("开始抽奖");
+      this.$emit("start");
+    },
+
+    // 抽奖结束回调
+    endCallBack(prize) {
+      // 奖品详情
+      console.log("抽奖结束", prize);
+
+      try {
+        // 准备中奖信息
+        const prizeData =
+          this.prizes[this.currentPrizeIndex]?.data || this.prizes[0]?.data;
+
+        if (!prizeData) {
+          console.error("无法获取奖品数据");
+          return;
+        }
+
+        // 获取所有中奖奖品
+        let allPrizes = [];
+
+        // 检查prize是否是数组，如果是则使用map，否则只使用当前prize
+        if (Array.isArray(prize)) {
+          allPrizes = prize
+            .map((item) => {
+              const index = typeof item.index === "number" ? item.index : 0;
+              return this.prizes[index]?.data || this.prizes[0]?.data;
+            })
+            .filter((item) => !!item);
+        } else if (prize && typeof prize.index === "number") {
+          // 如果prize是单个对象
+          const index = prize.index;
+          const itemData = this.prizes[index]?.data;
+          if (itemData) {
+            allPrizes.push(itemData);
+          }
+        } else {
+          // 都不符合则使用当前索引的奖品
+          allPrizes.push(prizeData);
+        }
+
+        // 发送中奖信息到父组件
+        this.$emit("end", {
+          prize: prize,
+          prizeData: prizeData, // 主要奖品数据
+          allPrizes: allPrizes, // 所有中奖奖品数据
+          message: `恭喜您获得 ${prizeData.title}`,
+          prizeInfo: {
+            name: prizeData.title,
+            image: prizeData.imgurl,
+            description: `价值：${prizeData.price} 元`,
+            data: prizeData,
+          },
+        });
+
+        // // 延迟隐藏组件
+        // setTimeout(() => {
+        //   this.hide();
+        // }, 2000);
+      } catch (error) {
+        console.error("处理抽奖结果时出错:", error);
+        this.hide();
+      }
+    },
+
+    // 开始抽奖方法
+    startDraw(callback) {
+      // 检查是否已初始化
+      if (!this.isInitialized) {
+        console.error("老虎机尚未初始化，请先调用init方法");
+        return this;
+      }
+
+      // 不再自动初始化，需要先手动调用init
+      this.show();
+
+      setTimeout(() => {
+        // 确保DOM已渲染完成后再调用play方法
+        this.$nextTick(() => {
+          // 检查组件是否已初始化
+          if (this.$refs.myLucky) {
+            // 开始旋转
+            this.$refs.myLucky.play();
+            if (this.bgmCtx && this.bgmCtx.slotBgm) {
+              this.bgmCtx.slotBgm.play();
+            }
+
+            if (typeof callback === "function") {
+              callback();
+            }
+          } else {
+            console.error("老虎机组件未初始化");
+          }
+        });
+      }, 100);
+
+      return this; // 返回this以支持链式调用
+    },
+
+    // 停止抽奖并指定中奖索引
+    stopDraw(prizeIndices) {
+      // 检查是否已初始化
+      if (!this.isInitialized) {
+        console.error("老虎机尚未初始化，请先调用init方法");
+        return this;
+      }
+
+      if (!this.$refs.myLucky) {
+        console.error("老虎机组件未初始化");
+        return this;
+      }
+
+      // 如果没有传入奖品索引数组或传入的不是数组
+      if (
+        !prizeIndices ||
+        !Array.isArray(prizeIndices) ||
+        prizeIndices.length === 0
+      ) {
+        // 生成与当前模式对应数量的随机索引
+        const randomIndices = [];
+        for (let i = 0; i < this.currentMode; i++) {
+          randomIndices.push(Math.floor(Math.random() * this.prizes.length));
+        }
+        this.currentPrizeIndex = randomIndices[0]; // 使用第一个作为主要中奖索引
+        this.$refs.myLucky.stop(randomIndices);
+        return this;
+      }
+
+      // 如果传入的数组长度不够当前模式需要的数量，补足
+      let indices = [...prizeIndices];
+      while (indices.length < this.currentMode) {
+        indices.push(indices[indices.length - 1] || 0);
+      }
+
+      // 确保所有索引都在有效范围内
+      indices = indices.map((index) => {
+        if (index < 0 || index >= this.prizes.length) {
+          return Math.floor(Math.random() * this.prizes.length);
+        }
+        return index;
+      });
+
+      // 记录第一个索引作为主要中奖索引
+      this.currentPrizeIndex = indices[0];
+
+      // 如果传入的索引超过当前模式，只使用前currentMode个
+      if(indices.length > this.currentMode){
+        indices=indices.slice(0,this.currentMode)
+      }
+      // // 如果模式是3，且传入的索引超过3个，只使用前3个
+      // if (this.currentMode === 3 && indices.length > 3) {
+      //   indices = indices.slice(0, 3);
+      // }
+
+      // 调用stop方法停止旋转
+      this.$refs.myLucky.stop(indices);
+
+      return this;
+    },
+
+    // 强制结束抽奖
+    forceEndDraw() {
+      if (!this.isInitialized) {
+        console.error("老虎机尚未初始化，请先调用init方法");
+        return this;
+      }
+
+      this.hide();
+      return this; // 返回this以支持链式调用
+    },
+
+    // 重置组件状态
+    reset() {
+      this.isInitialized = false;
+      this.isVisible = false;
+      this.slots = [];
+      this.prizes = [];
+      this.prizeList = [];
+      this.currentPrizeIndex = -1;
+      return this;
+    },
+  },
+  mounted() {
+    // 不再自动初始化
+  },
+  watch: {
+    // 监听外部mode变化，同步到内部状态
+    mode: {
+      immediate: true,
+      handler(newVal) {
+        if ([1, 3, 5, '1', '3', '5'].includes(newVal)) {
+          this.internalMode = parseInt(newVal);
+        }
+      }
+    }
+  }
+};
 </script>
-  
-  <style lang="scss" scoped>
-</style> 
\ No newline at end of file
+
+<style lang="scss" scoped>
+// 内容容器样式
+.content-container {
+  width: 100%;
+  height: 100vh;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  box-sizing: border-box;
+  background-image: url($imgurl + "common/slot_bg.webp");
+  background-size: cover;
+  background-position: center;
+  position: fixed;
+  top: 0;
+  left: 0;
+  z-index: 999;
+}
+
+// 老虎机容器样式
+.slot-container {
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  position: relative;
+}
+
+.slot-icon {
+  padding-bottom: 25rpx;
+}
+
+// 老虎机视图样式
+.slot-view {
+  background-size: 100% 100%;
+  width: 100%;
+  padding-top: 80rpx;
+  padding-bottom: 80rpx;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+// 根据模式设置不同的背景
+.slot-view-1 {
+  background: url("https://image.zfunbox.cn/static/image/lucky/di_5.png") no-repeat;
+  background-size: 100% 100%;
+}
+
+.slot-view-3 {
+  background: url("https://image.zfunbox.cn/static/image/lucky/di_3.png") no-repeat;
+  background-size: 100% 100%;
+}
+
+.slot-view-5 {
+  background: url("https://image.zfunbox.cn/static/image/lucky/di_5.png") no-repeat;
+  background-size: 100% 100%;
+}
+
+// 抽奖项样式
+.item-lottry {
+  height: 152.78rpx;
+  width: 152.78rpx;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  font-size: 30rpx;
+  border-radius: 16rpx;
+  color: black;
+  box-sizing: border-box;
+  background-color: rgba(255, 255, 255, 1);
+}
+</style>
diff --git a/components/detail-lucky/detail-lucky_1.vue b/components/detail-lucky/detail-lucky_1.vue
new file mode 100644
index 0000000..a11dd56
--- /dev/null
+++ b/components/detail-lucky/detail-lucky_1.vue
@@ -0,0 +1,489 @@
+<template>
+  <view class="content-container" v-if="isVisible && isInitialized">
+    <view class="slot-container">
+      <view class="slot-icon">
+        <image
+          src="https://image.zfunbox.cn/static/image/lucky/icon.png"
+          mode="widthFix"
+          style="height: 90rpx; width: 249rpx"
+        ></image>
+      </view>
+      <view class="slot-view">
+        <!-- 老虎机组件 -->
+        <SlotMachine
+          ref="myLucky"
+          :width="windowWidth"
+          height="160rpx"
+          :blocks="blocks"
+          :slots="slots"
+          :prizes="prizes"
+          :defaultConfig="defaultConfig"
+          @start="startCallBack"
+          @end="endCallBack"
+        >
+        </SlotMachine>
+      </view>
+    </view>
+  </view>
+</template>
+
+<script>
+// 导入老虎机组件
+import SlotMachine from "@/components/@lucky-canvas/uni/slot-machine";
+
+function shuffle(array) {
+  for (let i = array.length - 1; i > 0; i--) {
+    // 生成一个 0 到 i 之间的随机整数
+    const j = Math.floor(Math.random() * (i + 1));
+    // 交换 array[i] 和 array[j]
+    [array[i], array[j]] = [array[j], array[i]];
+  }
+  return array;
+}
+
+export default {
+  components: { SlotMachine },
+  props: {
+    // 移除prizeList props
+  },
+  data() {
+    return {
+      isVisible: false, // 控制组件显示/隐藏
+      isInitialized: false, // 控制是否已初始化
+      windowWidth: "0px",
+      blocks: [],
+      slots: [],
+      prizes: [],
+      prizeList: [], // 移到data中
+      defaultConfig: {
+        mode: "horizontal", // 水平模式
+        rowSpacing: "10px", // 行间距
+        colSpacing: "10px", // 列间距
+        accelerationTime: 1500,
+      },
+      luckyMessage: "恭喜您获得奖品",
+      luckyPrize: null,
+      currentPrizeIndex: -1,
+    };
+  },
+  computed: {
+    // 计算抽奖项尺寸
+    lotteryItemSize() {
+      let height = uni.upx2px(220);
+      let width = uni.upx2px(170);
+      return [width, height];
+    },
+  },
+  methods: {
+    // 初始化老虎机组件
+    init(prizeList) {
+      // 设置奖品列表
+      if (prizeList && Array.isArray(prizeList) && prizeList.length > 0) {
+        this.prizeList = prizeList;
+      } else {
+        this.prizeList = this.getDefaultPrizes();
+      }
+
+      let windowWidth = uni.getSystemInfoSync().windowWidth;
+      let t = this.prizeList;
+
+      let prizes = [];
+      for (let i = 0; i < t.length; i++) {
+        prizes.push({
+          imgs: [
+            {
+              src: t[i].imgurl,
+              width: "152.78rpx",
+              height: "152.78rpx",
+            },
+          ],
+          background: "#ffffff",
+          data: t[i], // 将原始数据保存到prize中，方便后续使用
+        });
+      }
+      const arr = Array.from({ length: t.length }, (_, i) => i);
+      let slots = [
+        { order: shuffle([...arr]), speed: 20 }, // 第一列速度
+      ];
+
+      this.windowWidth = windowWidth + "px";
+      this.slots = slots;
+      this.prizes = prizes;
+
+      // 标记为已初始化
+      this.isInitialized = true;
+
+      return this; // 返回this以支持链式调用
+    },
+
+    // 显示老虎机组件
+    show() {
+      if (!this.isInitialized) {
+        console.error("老虎机尚未初始化，请先调用init方法");
+        return this;
+      }
+      this.isVisible = true;
+      return this;
+    },
+
+    // 隐藏老虎机组件
+    hide() {
+      this.isVisible = false;
+      return this;
+    },
+
+    // 获取默认奖品列表
+    getDefaultPrizes() {
+      return [
+        {
+          id: 1128,
+          title: "兹琪露娜提亚斯",
+          imgurl:
+            "https://image.zfunbox.cn/topic/20250515/2986e27e673ef675e02771cdebd9b822.jpg",
+          price: "350.00",
+          real_pro: "0.02000",
+          goods_type: 1,
+          doubling: 1,
+          is_lingzhu: 0,
+        },
+        {
+          id: 1129,
+          title: "月岗恋钟",
+          imgurl:
+            "https://image.zfunbox.cn/topic/20250515/2c5ed2097716db6bef01da718bc3c091.jpg",
+          price: "132.00",
+          real_pro: "0.02000",
+          goods_type: 1,
+          doubling: 3,
+          is_lingzhu: 0,
+        },
+        {
+          id: 1130,
+          title: "BANDAI万代拼装模型 1/100 MG 机动战士高达 倒A 逆A-15岁以上",
+          imgurl:
+            "https://image.zfunbox.cn/topic/20250515/e35da49b4976f156f2f98dec002274a5.png",
+          price: "305.00",
+          real_pro: "0.03000",
+          goods_type: 1,
+          doubling: 1,
+          is_lingzhu: 0,
+        },
+        {
+          id: 1131,
+          title: "BANDAI 万代拼装模型 MG 主天使-15岁以上",
+          imgurl:
+            "https://image.zfunbox.cn/topic/20250515/77302c6f1ea9ea6a8516cc1208174aee.png",
+          price: "289.00",
+          real_pro: "0.03000",
+          goods_type: 1,
+          doubling: 1,
+          is_lingzhu: 0,
+        },
+        {
+          id: 1132,
+          title: "BANDAI万代 HG00 09 1/144 座天使高达一型-15岁以上",
+          imgurl:
+            "https://image.zfunbox.cn/topic/20250515/55e816c93b5e4103a30682c586816b11.jpg",
+          price: "114.00",
+          real_pro: "0.50000",
+          goods_type: 1,
+          doubling: 3,
+          is_lingzhu: 0,
+        },
+        {
+          id: 1133,
+          title: "BANDAI万代拼装模型 HGUC 130 机动战士高达 杰斯塔-15岁以上",
+          imgurl:
+            "https://image.zfunbox.cn/topic/20250515/aeb6bfb8b4aa8a29796b242e4f5d56d9.png",
+          price: "113.00",
+          real_pro: "1.50000",
+          goods_type: 1,
+          doubling: 1,
+          is_lingzhu: 0,
+        },
+        {
+          id: 1134,
+          title: "BANDAI万代拼装模型HG26 1/144 凯列班高达 异灵高达-15岁以上",
+          imgurl:
+            "https://image.zfunbox.cn/topic/20250515/329e3a7e21772a63cea03d31f948345d.png",
+          price: "112.00",
+          real_pro: "1.00000",
+          goods_type: 1,
+          doubling: 2,
+          is_lingzhu: 0,
+        },
+        {
+          id: 1135,
+          title: "梦幻",
+          imgurl:
+            "https://image.zfunbox.cn/topic/20250515/d2c7e48515d393084000595074209042.jpg",
+          price: "41.00",
+          real_pro: "2.50000",
+          goods_type: 1,
+          doubling: 2,
+          is_lingzhu: 0,
+        },
+        {
+          id: 1136,
+          title: "谜拟丘",
+          imgurl:
+            "https://image.zfunbox.cn/topic/20250515/6031827bc455cbf86ff778d74ddffbd3.jpg",
+          price: "38.00",
+          real_pro: "1.50000",
+          goods_type: 1,
+          doubling: 1,
+          is_lingzhu: 0,
+        },
+        {
+          id: 1137,
+          title: "小提琴模型1个",
+          imgurl:
+            "https://image.zfunbox.cn/topic/20250515/22846dea5a933ab314998afc51abb7bb.jpg",
+          price: "13.80",
+          real_pro: "92.90000",
+          goods_type: 1,
+          doubling: 1,
+          is_lingzhu: 0,
+        },
+      ];
+    },
+
+    // 老虎机开始回调
+    startCallBack() {
+      console.log("开始抽奖");
+      this.$emit("start");
+    },
+
+    // 抽奖结束回调
+    endCallBack(prize) {
+      // 奖品详情
+      console.log("抽奖结束", prize);
+
+      try {
+        // 准备中奖信息
+        const prizeData =
+          this.prizes[this.currentPrizeIndex]?.data || this.prizes[0]?.data;
+
+        if (!prizeData) {
+          console.error("无法获取奖品数据");
+          return;
+        }
+
+        // 获取所有中奖奖品
+        let allPrizes = [];
+
+        // 检查prize是否是数组，如果是则使用map，否则只使用当前prize
+        if (Array.isArray(prize)) {
+          allPrizes = prize
+            .map((item) => {
+              const index = typeof item.index === "number" ? item.index : 0;
+              return this.prizes[index]?.data || this.prizes[0]?.data;
+            })
+            .filter((item) => !!item);
+        } else if (prize && typeof prize.index === "number") {
+          // 如果prize是单个对象
+          const index = prize.index;
+          const itemData = this.prizes[index]?.data;
+          if (itemData) {
+            allPrizes.push(itemData);
+          }
+        } else {
+          // 都不符合则使用当前索引的奖品
+          allPrizes.push(prizeData);
+        }
+
+        // 发送中奖信息到父组件
+        this.$emit("end", {
+          prize: prize,
+          prizeData: prizeData, // 主要奖品数据
+          allPrizes: allPrizes, // 所有中奖奖品数据
+          message: `恭喜您获得 ${prizeData.title}`,
+          prizeInfo: {
+            name: prizeData.title,
+            image: prizeData.imgurl,
+            description: `价值：${prizeData.price} 元`,
+            data: prizeData,
+          },
+        });
+
+        // 延迟隐藏组件
+        setTimeout(() => {
+          this.hide();
+        }, 2000);
+      } catch (error) {
+        console.error("处理抽奖结果时出错:", error);
+        this.hide();
+      }
+    },
+
+    // 开始抽奖方法
+    startDraw(callback) {
+      // 检查是否已初始化
+      if (!this.isInitialized) {
+        console.error("老虎机尚未初始化，请先调用init方法");
+        return this;
+      }
+
+      // 不再自动初始化，需要先手动调用init
+      this.show();
+
+      setTimeout(() => {
+        // 确保DOM已渲染完成后再调用play方法
+        this.$nextTick(() => {
+          // 检查组件是否已初始化
+          if (this.$refs.myLucky) {
+            // 开始旋转
+            this.$refs.myLucky.play();
+            if (this.bgmCtx && this.bgmCtx.slotBgm) {
+              this.bgmCtx.slotBgm.play();
+            }
+
+            if (typeof callback === "function") {
+              callback();
+            }
+          } else {
+            console.error("老虎机组件未初始化");
+          }
+        });
+      }, 100);
+
+      return this; // 返回this以支持链式调用
+    },
+
+    // 停止抽奖并指定中奖索引
+    stopDraw(prizeIndices) {
+      // 检查是否已初始化
+      if (!this.isInitialized) {
+        console.error("老虎机尚未初始化，请先调用init方法");
+        return this;
+      }
+
+      if (!this.$refs.myLucky) {
+        console.error("老虎机组件未初始化");
+        return this;
+      }
+
+      // 如果没有传入奖品索引数组或传入的不是数组
+      if (
+        !prizeIndices ||
+        !Array.isArray(prizeIndices) ||
+        prizeIndices.length === 0
+      ) {
+        // 生成5个随机索引
+        const randomIndices = [];
+        for (let i = 0; i < 5; i++) {
+          randomIndices.push(Math.floor(Math.random() * this.prizes.length));
+        }
+        this.currentPrizeIndex = randomIndices[0]; // 使用第一个作为主要中奖索引
+        this.$refs.myLucky.stop(randomIndices);
+        return this;
+      }
+
+      // 如果传入的数组长度不够5个，补足到5个
+      let indices = [...prizeIndices];
+      while (indices.length < 5) {
+        indices.push(indices[indices.length - 1] || 0);
+      }
+
+      // 确保所有索引都在有效范围内
+      indices = indices.map((index) => {
+        if (index < 0 || index >= this.prizes.length) {
+          return Math.floor(Math.random() * this.prizes.length);
+        }
+        return index;
+      });
+
+      // 记录第一个索引作为主要中奖索引
+      this.currentPrizeIndex = indices[0];
+
+      // 调用stop方法停止旋转
+      this.$refs.myLucky.stop(indices[0]);
+
+      return this;
+    },
+
+    // 强制结束抽奖
+    forceEndDraw() {
+      if (!this.isInitialized) {
+        console.error("老虎机尚未初始化，请先调用init方法");
+        return this;
+      }
+
+      this.hide();
+      return this; // 返回this以支持链式调用
+    },
+
+    // 重置组件状态
+    reset() {
+      this.isInitialized = false;
+      this.isVisible = false;
+      this.slots = [];
+      this.prizes = [];
+      this.prizeList = [];
+      this.currentPrizeIndex = -1;
+      return this;
+    },
+  },
+  mounted() {
+    // 不再自动初始化
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+// 内容容器样式
+.content-container {
+  width: 100%;
+  height: 100vh;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  box-sizing: border-box;
+  background-image: url($imgurl + "common/slot_bg.webp");
+  background-size: cover;
+  background-position: center;
+  position: fixed;
+  top: 0;
+  left: 0;
+  z-index: 999;
+}
+
+// 老虎机容器样式
+.slot-container {
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  position: relative;
+}
+.slot-icon {
+  padding-bottom: 25rpx;
+}
+// 老虎机视图样式
+.slot-view {
+  background: url("https://image.zfunbox.cn/static/image/lucky/di_5.png")
+    no-repeat;
+  background-size: 100% 100%;
+  width: 100%;
+  padding-top: 80rpx;
+  padding-bottom: 80rpx;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+// 抽奖项样式
+.item-lottry {
+  height: 152.78rpx;
+  width: 152.78rpx;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  font-size: 30rpx;
+  border-radius: 16rpx;
+  color: black;
+  box-sizing: border-box;
+  background-color: rgba(255, 255, 255, 1);
+}
+</style>
diff --git a/components/detail-lucky/detail-lucky_3.vue b/components/detail-lucky/detail-lucky_3.vue
new file mode 100644
index 0000000..a5b6d26
--- /dev/null
+++ b/components/detail-lucky/detail-lucky_3.vue
@@ -0,0 +1,493 @@
+<template>
+  <view class="content-container" v-if="isVisible && isInitialized">
+    <view class="slot-container">
+      <view class="slot-icon">
+        <image
+          src="https://image.zfunbox.cn/static/image/lucky/icon.png"
+          mode="widthFix"
+          style="height: 90rpx; width: 249rpx"
+        ></image>
+      </view>
+      <view class="slot-view">
+        <!-- 老虎机组件 -->
+        <SlotMachine
+          ref="myLucky"
+          :width="windowWidth"
+          height="480rpx"
+          :blocks="blocks"
+          :slots="slots"
+          :prizes="prizes"
+          :defaultConfig="defaultConfig"
+          @start="startCallBack"
+          @end="endCallBack"
+        >
+        </SlotMachine>
+      </view>
+    </view>
+  </view>
+</template>
+
+<script>
+// 导入老虎机组件
+import SlotMachine from "@/components/@lucky-canvas/uni/slot-machine";
+
+function shuffle(array) {
+  for (let i = array.length - 1; i > 0; i--) {
+    // 生成一个 0 到 i 之间的随机整数
+    const j = Math.floor(Math.random() * (i + 1));
+    // 交换 array[i] 和 array[j]
+    [array[i], array[j]] = [array[j], array[i]];
+  }
+  return array;
+}
+
+export default {
+  components: { SlotMachine },
+  props: {
+    // 移除prizeList props
+  },
+  data() {
+    return {
+      isVisible: false, // 控制组件显示/隐藏
+      isInitialized: false, // 控制是否已初始化
+      windowWidth: "0px",
+      blocks: [],
+      slots: [],
+      prizes: [],
+      prizeList: [], // 移到data中
+      defaultConfig: {
+        mode: "horizontal", // 水平模式
+        rowSpacing: "10px", // 行间距
+        colSpacing: "10px", // 列间距
+        accelerationTime: 1500,
+      },
+      luckyMessage: "恭喜您获得奖品",
+      luckyPrize: null,
+      currentPrizeIndex: -1,
+    };
+  },
+  computed: {
+    // 计算抽奖项尺寸
+    lotteryItemSize() {
+      let height = uni.upx2px(220);
+      let width = uni.upx2px(170);
+      return [width, height];
+    },
+  },
+  methods: {
+    // 初始化老虎机组件
+    init(prizeList) {
+      // 设置奖品列表
+      if (prizeList && Array.isArray(prizeList) && prizeList.length > 0) {
+        this.prizeList = prizeList;
+      } else {
+        this.prizeList = this.getDefaultPrizes();
+      }
+
+      let windowWidth = uni.getSystemInfoSync().windowWidth;
+      let t = this.prizeList;
+
+      let prizes = [];
+      for (let i = 0; i < t.length; i++) {
+        prizes.push({
+          imgs: [
+            {
+              src: t[i].imgurl,
+              width: "152.78rpx",
+              height: "152.78rpx",
+            },
+          ],
+          background: "#ffffff",
+          data: t[i], // 将原始数据保存到prize中，方便后续使用
+        });
+      }
+      const arr = Array.from({ length: t.length }, (_, i) => i);
+      let slots = [
+        { order: shuffle([...arr]), speed: 20 }, // 第一列速度
+        { order: shuffle([...arr]), speed: 20 }, // 第二列速度
+        { order: shuffle([...arr]), speed: 20 }, // 第三列速度
+      ];
+
+      this.windowWidth = windowWidth + "px";
+      this.slots = slots;
+      this.prizes = prizes;
+
+      // 标记为已初始化
+      this.isInitialized = true;
+
+      return this; // 返回this以支持链式调用
+    },
+
+    // 显示老虎机组件
+    show() {
+      if (!this.isInitialized) {
+        console.error("老虎机尚未初始化，请先调用init方法");
+        return this;
+      }
+      this.isVisible = true;
+      return this;
+    },
+
+    // 隐藏老虎机组件
+    hide() {
+      this.isVisible = false;
+      return this;
+    },
+
+    // 获取默认奖品列表
+    getDefaultPrizes() {
+      return [
+        {
+          id: 1128,
+          title: "兹琪露娜提亚斯",
+          imgurl:
+            "https://image.zfunbox.cn/topic/20250515/2986e27e673ef675e02771cdebd9b822.jpg",
+          price: "350.00",
+          real_pro: "0.02000",
+          goods_type: 1,
+          doubling: 1,
+          is_lingzhu: 0,
+        },
+        {
+          id: 1129,
+          title: "月岗恋钟",
+          imgurl:
+            "https://image.zfunbox.cn/topic/20250515/2c5ed2097716db6bef01da718bc3c091.jpg",
+          price: "132.00",
+          real_pro: "0.02000",
+          goods_type: 1,
+          doubling: 3,
+          is_lingzhu: 0,
+        },
+        {
+          id: 1130,
+          title: "BANDAI万代拼装模型 1/100 MG 机动战士高达 倒A 逆A-15岁以上",
+          imgurl:
+            "https://image.zfunbox.cn/topic/20250515/e35da49b4976f156f2f98dec002274a5.png",
+          price: "305.00",
+          real_pro: "0.03000",
+          goods_type: 1,
+          doubling: 1,
+          is_lingzhu: 0,
+        },
+        {
+          id: 1131,
+          title: "BANDAI 万代拼装模型 MG 主天使-15岁以上",
+          imgurl:
+            "https://image.zfunbox.cn/topic/20250515/77302c6f1ea9ea6a8516cc1208174aee.png",
+          price: "289.00",
+          real_pro: "0.03000",
+          goods_type: 1,
+          doubling: 1,
+          is_lingzhu: 0,
+        },
+        {
+          id: 1132,
+          title: "BANDAI万代 HG00 09 1/144 座天使高达一型-15岁以上",
+          imgurl:
+            "https://image.zfunbox.cn/topic/20250515/55e816c93b5e4103a30682c586816b11.jpg",
+          price: "114.00",
+          real_pro: "0.50000",
+          goods_type: 1,
+          doubling: 3,
+          is_lingzhu: 0,
+        },
+        {
+          id: 1133,
+          title: "BANDAI万代拼装模型 HGUC 130 机动战士高达 杰斯塔-15岁以上",
+          imgurl:
+            "https://image.zfunbox.cn/topic/20250515/aeb6bfb8b4aa8a29796b242e4f5d56d9.png",
+          price: "113.00",
+          real_pro: "1.50000",
+          goods_type: 1,
+          doubling: 1,
+          is_lingzhu: 0,
+        },
+        {
+          id: 1134,
+          title: "BANDAI万代拼装模型HG26 1/144 凯列班高达 异灵高达-15岁以上",
+          imgurl:
+            "https://image.zfunbox.cn/topic/20250515/329e3a7e21772a63cea03d31f948345d.png",
+          price: "112.00",
+          real_pro: "1.00000",
+          goods_type: 1,
+          doubling: 2,
+          is_lingzhu: 0,
+        },
+        {
+          id: 1135,
+          title: "梦幻",
+          imgurl:
+            "https://image.zfunbox.cn/topic/20250515/d2c7e48515d393084000595074209042.jpg",
+          price: "41.00",
+          real_pro: "2.50000",
+          goods_type: 1,
+          doubling: 2,
+          is_lingzhu: 0,
+        },
+        {
+          id: 1136,
+          title: "谜拟丘",
+          imgurl:
+            "https://image.zfunbox.cn/topic/20250515/6031827bc455cbf86ff778d74ddffbd3.jpg",
+          price: "38.00",
+          real_pro: "1.50000",
+          goods_type: 1,
+          doubling: 1,
+          is_lingzhu: 0,
+        },
+        {
+          id: 1137,
+          title: "小提琴模型1个",
+          imgurl:
+            "https://image.zfunbox.cn/topic/20250515/22846dea5a933ab314998afc51abb7bb.jpg",
+          price: "13.80",
+          real_pro: "92.90000",
+          goods_type: 1,
+          doubling: 1,
+          is_lingzhu: 0,
+        },
+      ];
+    },
+
+    // 老虎机开始回调
+    startCallBack() {
+      console.log("开始抽奖");
+      this.$emit("start");
+    },
+
+    // 抽奖结束回调
+    endCallBack(prize) {
+      // 奖品详情
+      console.log("抽奖结束", prize);
+
+      try {
+        // 准备中奖信息
+        const prizeData =
+          this.prizes[this.currentPrizeIndex]?.data || this.prizes[0]?.data;
+
+        if (!prizeData) {
+          console.error("无法获取奖品数据");
+          return;
+        }
+
+        // 获取所有中奖奖品
+        let allPrizes = [];
+
+        // 检查prize是否是数组，如果是则使用map，否则只使用当前prize
+        if (Array.isArray(prize)) {
+          allPrizes = prize
+            .map((item) => {
+              const index = typeof item.index === "number" ? item.index : 0;
+              return this.prizes[index]?.data || this.prizes[0]?.data;
+            })
+            .filter((item) => !!item);
+        } else if (prize && typeof prize.index === "number") {
+          // 如果prize是单个对象
+          const index = prize.index;
+          const itemData = this.prizes[index]?.data;
+          if (itemData) {
+            allPrizes.push(itemData);
+          }
+        } else {
+          // 都不符合则使用当前索引的奖品
+          allPrizes.push(prizeData);
+        }
+
+        // 发送中奖信息到父组件
+        this.$emit("end", {
+          prize: prize,
+          prizeData: prizeData, // 主要奖品数据
+          allPrizes: allPrizes, // 所有中奖奖品数据
+          message: `恭喜您获得 ${prizeData.title}`,
+          prizeInfo: {
+            name: prizeData.title,
+            image: prizeData.imgurl,
+            description: `价值：${prizeData.price} 元`,
+            data: prizeData,
+          },
+        });
+
+        // 延迟隐藏组件
+        setTimeout(() => {
+          this.hide();
+        }, 2000);
+      } catch (error) {
+        console.error("处理抽奖结果时出错:", error);
+        this.hide();
+      }
+    },
+
+    // 开始抽奖方法
+    startDraw(callback) {
+      // 检查是否已初始化
+      if (!this.isInitialized) {
+        console.error("老虎机尚未初始化，请先调用init方法");
+        return this;
+      }
+
+      // 不再自动初始化，需要先手动调用init
+      this.show();
+
+      setTimeout(() => {
+        // 确保DOM已渲染完成后再调用play方法
+        this.$nextTick(() => {
+          // 检查组件是否已初始化
+          if (this.$refs.myLucky) {
+            // 开始旋转
+            this.$refs.myLucky.play();
+            if (this.bgmCtx && this.bgmCtx.slotBgm) {
+              this.bgmCtx.slotBgm.play();
+            }
+
+            if (typeof callback === "function") {
+              callback();
+            }
+          } else {
+            console.error("老虎机组件未初始化");
+          }
+        });
+      }, 100);
+
+      return this; // 返回this以支持链式调用
+    },
+
+    // 停止抽奖并指定中奖索引
+    stopDraw(prizeIndices) {
+      // 检查是否已初始化
+      if (!this.isInitialized) {
+        console.error("老虎机尚未初始化，请先调用init方法");
+        return this;
+      }
+
+      if (!this.$refs.myLucky) {
+        console.error("老虎机组件未初始化");
+        return this;
+      }
+
+      // 如果没有传入奖品索引数组或传入的不是数组
+      if (
+        !prizeIndices ||
+        !Array.isArray(prizeIndices) ||
+        prizeIndices.length === 0
+      ) {
+        // 生成5个随机索引
+        const randomIndices = [];
+        for (let i = 0; i < 5; i++) {
+          randomIndices.push(Math.floor(Math.random() * this.prizes.length));
+        }
+        this.currentPrizeIndex = randomIndices[0]; // 使用第一个作为主要中奖索引
+        this.$refs.myLucky.stop(randomIndices);
+        return this;
+      }
+
+      // 如果传入的数组长度不够5个，补足到5个
+      let indices = [...prizeIndices];
+      while (indices.length < 5) {
+        indices.push(indices[indices.length - 1] || 0);
+      }
+
+      // 确保所有索引都在有效范围内
+      indices = indices.map((index) => {
+        if (index < 0 || index >= this.prizes.length) {
+          return Math.floor(Math.random() * this.prizes.length);
+        }
+        return index;
+      });
+
+      // 记录第一个索引作为主要中奖索引
+      this.currentPrizeIndex = indices[0];
+      if (indices.length > 3) {
+        indices = indices.slice(0, 3);
+      }
+      // 调用stop方法停止旋转
+      this.$refs.myLucky.stop(indices);
+
+      return this;
+    },
+
+    // 强制结束抽奖
+    forceEndDraw() {
+      if (!this.isInitialized) {
+        console.error("老虎机尚未初始化，请先调用init方法");
+        return this;
+      }
+
+      this.hide();
+      return this; // 返回this以支持链式调用
+    },
+
+    // 重置组件状态
+    reset() {
+      this.isInitialized = false;
+      this.isVisible = false;
+      this.slots = [];
+      this.prizes = [];
+      this.prizeList = [];
+      this.currentPrizeIndex = -1;
+      return this;
+    },
+  },
+  mounted() {
+    // 不再自动初始化
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+// 内容容器样式
+.content-container {
+  width: 100%;
+  height: 100vh;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  box-sizing: border-box;
+  background-image: url($imgurl + "common/slot_bg.webp");
+  background-size: cover;
+  background-position: center;
+  position: fixed;
+  top: 0;
+  left: 0;
+  z-index: 999;
+}
+.slot-icon {
+  padding-bottom: 25rpx;
+}
+// 老虎机容器样式
+.slot-container {
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  position: relative;
+}
+
+// 老虎机视图样式
+.slot-view {
+  background: url("https://image.zfunbox.cn/static/image/lucky/di_3.png")
+    no-repeat;
+  background-size: 100% 100%;
+  width: 100%;
+  padding-top: 80rpx;
+  padding-bottom: 80rpx;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+// 抽奖项样式
+.item-lottry {
+  height: 152.78rpx;
+  width: 152.78rpx;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  font-size: 30rpx;
+  border-radius: 16rpx;
+  color: black;
+  box-sizing: border-box;
+  background-color: rgba(255, 255, 255, 1);
+}
+</style>
diff --git a/components/detail-lucky/detail-lucky_5.vue b/components/detail-lucky/detail-lucky_5.vue
new file mode 100644
index 0000000..627ae8c
--- /dev/null
+++ b/components/detail-lucky/detail-lucky_5.vue
@@ -0,0 +1,485 @@
+<template>
+  <view class="content-container" v-if="isVisible && isInitialized">
+    <view class="slot-container">
+      <view class="slot-icon">
+        <image
+          src="https://image.zfunbox.cn/static/image/lucky/icon.png"
+          mode="widthFix"
+          style="height: 90rpx; width: 249rpx"
+        ></image>
+      </view>
+      <view class="slot-view">
+        <!-- 老虎机组件 -->
+        <SlotMachine
+          ref="myLucky"
+          :width="windowWidth"
+          height="800rpx"
+          :blocks="blocks"
+          :slots="slots"
+          :prizes="prizes"
+          :defaultConfig="defaultConfig"
+          @start="startCallBack"
+          @end="endCallBack"
+        >
+        </SlotMachine>
+      </view>
+    </view>
+  </view>
+</template>
+
+<script>
+// 导入老虎机组件
+import SlotMachine from "@/components/@lucky-canvas/uni/slot-machine";
+
+function shuffle(array) {
+  for (let i = array.length - 1; i > 0; i--) {
+    // 生成一个 0 到 i 之间的随机整数
+    const j = Math.floor(Math.random() * (i + 1));
+    // 交换 array[i] 和 array[j]
+    [array[i], array[j]] = [array[j], array[i]];
+  }
+  return array;
+}
+
+export default {
+  components: { SlotMachine },
+  props: {
+    // 移除prizeList props
+  },
+  data() {
+    return {
+      isVisible: false, // 控制组件显示/隐藏
+      isInitialized: false, // 控制是否已初始化
+      windowWidth: "0px",
+      blocks: [],
+      slots: [],
+      prizes: [],
+      prizeList: [], // 移到data中
+      defaultConfig: {
+        mode: "horizontal", // 水平模式
+        rowSpacing: "10px", // 行间距
+        colSpacing: "10px", // 列间距
+        accelerationTime: 1500,
+      },
+      luckyMessage: "恭喜您获得奖品",
+      luckyPrize: null,
+      currentPrizeIndex: -1,
+    };
+  },
+  computed: {
+    // 计算抽奖项尺寸
+    lotteryItemSize() {
+      let height = uni.upx2px(220);
+      let width = uni.upx2px(170);
+      return [width, height];
+    },
+  },
+  methods: {
+    // 初始化老虎机组件
+    init(prizeList) {
+      // 设置奖品列表
+      if (prizeList && Array.isArray(prizeList) && prizeList.length > 0) {
+        this.prizeList = prizeList;
+      } else {
+        this.prizeList = this.getDefaultPrizes();
+      }
+      
+      let windowWidth = uni.getSystemInfoSync().windowWidth;
+      let t = this.prizeList;
+      
+      let prizes = [];
+      for (let i = 0; i < t.length; i++) {
+        prizes.push({
+          imgs: [
+            {
+              src: t[i].imgurl,
+              width: "152.78rpx",
+              height: "152.78rpx",
+            },
+          ],
+          background: "#ffffff",
+          data: t[i], // 将原始数据保存到prize中，方便后续使用
+        });
+      }
+      const arr = Array.from({ length: t.length }, (_, i) => i);
+      let slots = [
+        { order: shuffle([...arr]), speed: 20 }, // 第一列速度
+        { order: shuffle([...arr]), speed: 20 }, // 第二列速度
+        { order: shuffle([...arr]), speed: 20 }, // 第三列速度
+        { order: shuffle([...arr]), speed: 20 }, // 第四列速度
+        { order: shuffle([...arr]), speed: 20 }, // 第五列速度
+      ];
+      
+      this.windowWidth = windowWidth + "px";
+      this.slots = slots;
+      this.prizes = prizes;
+      
+      // 标记为已初始化
+      this.isInitialized = true;
+      
+      return this; // 返回this以支持链式调用
+    },
+    
+    // 显示老虎机组件
+    show() {
+      if (!this.isInitialized) {
+        console.error('老虎机尚未初始化，请先调用init方法');
+        return this;
+      }
+      this.isVisible = true;
+      return this;
+    },
+    
+    // 隐藏老虎机组件
+    hide() {
+      this.isVisible = false;
+      return this;
+    },
+    
+    // 获取默认奖品列表
+    getDefaultPrizes() {
+      return [
+        {
+          id: 1128,
+          title: "兹琪露娜提亚斯",
+          imgurl:
+            "https://image.zfunbox.cn/topic/20250515/2986e27e673ef675e02771cdebd9b822.jpg",
+          price: "350.00",
+          real_pro: "0.02000",
+          goods_type: 1,
+          doubling: 1,
+          is_lingzhu: 0,
+        },
+        {
+          id: 1129,
+          title: "月岗恋钟",
+          imgurl:
+            "https://image.zfunbox.cn/topic/20250515/2c5ed2097716db6bef01da718bc3c091.jpg",
+          price: "132.00",
+          real_pro: "0.02000",
+          goods_type: 1,
+          doubling: 3,
+          is_lingzhu: 0,
+        },
+        {
+          id: 1130,
+          title: "BANDAI万代拼装模型 1/100 MG 机动战士高达 倒A 逆A-15岁以上",
+          imgurl:
+            "https://image.zfunbox.cn/topic/20250515/e35da49b4976f156f2f98dec002274a5.png",
+          price: "305.00",
+          real_pro: "0.03000",
+          goods_type: 1,
+          doubling: 1,
+          is_lingzhu: 0,
+        },
+        {
+          id: 1131,
+          title: "BANDAI 万代拼装模型 MG 主天使-15岁以上",
+          imgurl:
+            "https://image.zfunbox.cn/topic/20250515/77302c6f1ea9ea6a8516cc1208174aee.png",
+          price: "289.00",
+          real_pro: "0.03000",
+          goods_type: 1,
+          doubling: 1,
+          is_lingzhu: 0,
+        },
+        {
+          id: 1132,
+          title: "BANDAI万代 HG00 09 1/144 座天使高达一型-15岁以上",
+          imgurl:
+            "https://image.zfunbox.cn/topic/20250515/55e816c93b5e4103a30682c586816b11.jpg",
+          price: "114.00",
+          real_pro: "0.50000",
+          goods_type: 1,
+          doubling: 3,
+          is_lingzhu: 0,
+        },
+        {
+          id: 1133,
+          title: "BANDAI万代拼装模型 HGUC 130 机动战士高达 杰斯塔-15岁以上",
+          imgurl:
+            "https://image.zfunbox.cn/topic/20250515/aeb6bfb8b4aa8a29796b242e4f5d56d9.png",
+          price: "113.00",
+          real_pro: "1.50000",
+          goods_type: 1,
+          doubling: 1,
+          is_lingzhu: 0,
+        },
+        {
+          id: 1134,
+          title: "BANDAI万代拼装模型HG26 1/144 凯列班高达 异灵高达-15岁以上",
+          imgurl:
+            "https://image.zfunbox.cn/topic/20250515/329e3a7e21772a63cea03d31f948345d.png",
+          price: "112.00",
+          real_pro: "1.00000",
+          goods_type: 1,
+          doubling: 2,
+          is_lingzhu: 0,
+        },
+        {
+          id: 1135,
+          title: "梦幻",
+          imgurl:
+            "https://image.zfunbox.cn/topic/20250515/d2c7e48515d393084000595074209042.jpg",
+          price: "41.00",
+          real_pro: "2.50000",
+          goods_type: 1,
+          doubling: 2,
+          is_lingzhu: 0,
+        },
+        {
+          id: 1136,
+          title: "谜拟丘",
+          imgurl:
+            "https://image.zfunbox.cn/topic/20250515/6031827bc455cbf86ff778d74ddffbd3.jpg",
+          price: "38.00",
+          real_pro: "1.50000",
+          goods_type: 1,
+          doubling: 1,
+          is_lingzhu: 0,
+        },
+        {
+          id: 1137,
+          title: "小提琴模型1个",
+          imgurl:
+            "https://image.zfunbox.cn/topic/20250515/22846dea5a933ab314998afc51abb7bb.jpg",
+          price: "13.80",
+          real_pro: "92.90000",
+          goods_type: 1,
+          doubling: 1,
+          is_lingzhu: 0,
+        },
+      ];
+    },
+    
+    // 老虎机开始回调
+    startCallBack() {
+      console.log("开始抽奖");
+      this.$emit('start');
+    },
+    
+    // 抽奖结束回调
+    endCallBack(prize) {
+      // 奖品详情
+      console.log("抽奖结束", prize);
+
+      try {
+        // 准备中奖信息
+        const prizeData = this.prizes[this.currentPrizeIndex]?.data || this.prizes[0]?.data;
+        
+        if (!prizeData) {
+          console.error('无法获取奖品数据');
+          return;
+        }
+        
+        // 获取所有中奖奖品
+        let allPrizes = [];
+        
+        // 检查prize是否是数组，如果是则使用map，否则只使用当前prize
+        if (Array.isArray(prize)) {
+          allPrizes = prize.map(item => {
+            const index = typeof item.index === 'number' ? item.index : 0;
+            return this.prizes[index]?.data || this.prizes[0]?.data;
+          }).filter(item => !!item);
+        } else if (prize && typeof prize.index === 'number') {
+          // 如果prize是单个对象
+          const index = prize.index;
+          const itemData = this.prizes[index]?.data;
+          if (itemData) {
+            allPrizes.push(itemData);
+          }
+        } else {
+          // 都不符合则使用当前索引的奖品
+          allPrizes.push(prizeData);
+        }
+
+        // 发送中奖信息到父组件
+        this.$emit('end', {
+          prize: prize,
+          prizeData: prizeData, // 主要奖品数据
+          allPrizes: allPrizes, // 所有中奖奖品数据
+          message: `恭喜您获得 ${prizeData.title}`,
+          prizeInfo: {
+            name: prizeData.title,
+            image: prizeData.imgurl,
+            description: `价值：${prizeData.price} 元`,
+            data: prizeData,
+          }
+        });
+        
+        // 延迟隐藏组件
+        setTimeout(() => {
+          this.hide();
+        }, 2000);
+      } catch (error) {
+        console.error('处理抽奖结果时出错:', error);
+        this.hide();
+      }
+    },
+    
+    // 开始抽奖方法
+    startDraw(callback) {
+      // 检查是否已初始化
+      if (!this.isInitialized) {
+        console.error('老虎机尚未初始化，请先调用init方法');
+        return this;
+      }
+      
+      // 不再自动初始化，需要先手动调用init
+      this.show();
+      
+      setTimeout(() => {
+        // 确保DOM已渲染完成后再调用play方法
+        this.$nextTick(() => {
+          // 检查组件是否已初始化
+          if (this.$refs.myLucky) {
+            // 开始旋转
+            this.$refs.myLucky.play();
+            if (this.bgmCtx && this.bgmCtx.slotBgm) {
+              this.bgmCtx.slotBgm.play();
+            }
+            
+            if (typeof callback === 'function') {
+              callback();
+            }
+          } else {
+            console.error('老虎机组件未初始化');
+          }
+        });
+      }, 100);
+      
+      return this; // 返回this以支持链式调用
+    },
+    
+    // 停止抽奖并指定中奖索引
+    stopDraw(prizeIndices) {
+      // 检查是否已初始化
+      if (!this.isInitialized) {
+        console.error('老虎机尚未初始化，请先调用init方法');
+        return this;
+      }
+      
+      if (!this.$refs.myLucky) {
+        console.error('老虎机组件未初始化');
+        return this;
+      }
+      
+      // 如果没有传入奖品索引数组或传入的不是数组
+      if (!prizeIndices || !Array.isArray(prizeIndices) || prizeIndices.length === 0) {
+        // 生成5个随机索引
+        const randomIndices = [];
+        for (let i = 0; i < 5; i++) {
+          randomIndices.push(Math.floor(Math.random() * this.prizes.length));
+        }
+        this.currentPrizeIndex = randomIndices[0]; // 使用第一个作为主要中奖索引
+        this.$refs.myLucky.stop(randomIndices);
+        return this;
+      }
+      
+      // 如果传入的数组长度不够5个，补足到5个
+      let indices = [...prizeIndices];
+      while (indices.length < 5) {
+        indices.push(indices[indices.length - 1] || 0);
+      }
+      
+      // 确保所有索引都在有效范围内
+      indices = indices.map(index => {
+        if (index < 0 || index >= this.prizes.length) {
+          return Math.floor(Math.random() * this.prizes.length);
+        }
+        return index;
+      });
+      
+      // 记录第一个索引作为主要中奖索引
+      this.currentPrizeIndex = indices[0];
+      
+      // 调用stop方法停止旋转
+      this.$refs.myLucky.stop(indices);
+      
+      return this;
+    },
+    
+    // 强制结束抽奖
+    forceEndDraw() {
+      if (!this.isInitialized) {
+        console.error('老虎机尚未初始化，请先调用init方法');
+        return this;
+      }
+      
+      this.hide();
+      return this; // 返回this以支持链式调用
+    },
+    
+    // 重置组件状态
+    reset() {
+      this.isInitialized = false;
+      this.isVisible = false;
+      this.slots = [];
+      this.prizes = [];
+      this.prizeList = [];
+      this.currentPrizeIndex = -1;
+      return this;
+    }
+  },
+  mounted() {
+    // 不再自动初始化
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+// 内容容器样式
+.content-container {
+  width: 100%;
+  height: 100vh;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  box-sizing: border-box;
+  background-image: url($imgurl + "common/slot_bg.webp");
+  background-size: cover;
+  background-position: center;
+  position: fixed;
+  top: 0;
+  left: 0;
+  z-index: 999;
+}
+.slot-icon {
+  padding-bottom: 25rpx;
+}
+// 老虎机容器样式
+.slot-container {
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  position: relative;
+}
+
+// 老虎机视图样式
+.slot-view {
+  background: url("https://image.zfunbox.cn/static/image/lucky/di_5.png") no-repeat;
+  background-size: 100% 100%;
+  width: 100%;
+  padding-top: 80rpx;
+  padding-bottom: 80rpx;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+// 抽奖项样式
+.item-lottry {
+  height: 152.78rpx;
+  width: 152.78rpx;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  font-size: 30rpx;
+  border-radius: 16rpx;
+  color: black;
+  box-sizing: border-box;
+  background-color: rgba(255, 255, 255, 1);
+}
+</style>
diff --git a/pages/shouye/detail_wuxian.vue b/pages/shouye/detail_wuxian.vue
index 8373f34..d3455ed 100644
--- a/pages/shouye/detail_wuxian.vue
+++ b/pages/shouye/detail_wuxian.vue
@@ -264,7 +264,8 @@
 			</view>
 
 		</uni-popup>
-
+		<!-- 使用抽取的老虎机组件 -->
+		<DetailLucky ref="detailLucky" @end="onLuckyEnd" />
 	</page-container>
 </template>
 
@@ -278,7 +279,8 @@ import DetailPreviewPopup from '@/components/detail-preview-popup/detail-preview
 import preview from '@/components/detail-preview-popup/index.js'
 import DetailWuxianLingzhu from '@/components/detail-wuxian-lingzhu/detail-wuxian-lingzhu.vue'
 import DetailWuxianRage from '@/components/detail-wuxian-rage/detail-wuxian-rage.vue'
-
+// 导入抽取的老虎机组件
+import DetailLucky from "@/components/detail-lucky/detail-lucky.vue";
 export default {
 	components: {
 		PageContainer,
@@ -287,7 +289,8 @@ export default {
 		DetailButton,
 		DetailPreviewPopup,
 		DetailWuxianLingzhu,
-		DetailWuxianRage // 注册新组件
+		DetailWuxianRage, // 注册新组件
+		DetailLucky
 	},
 	data() {
 		return {
@@ -415,6 +418,14 @@ export default {
 	},
 
 	methods: {
+		// 老虎机结束抽奖回调
+		onLuckyEnd(data) {
+			console.log("抽奖结束", data);
+
+			// 获取所有中奖奖品
+			console.log("所有中奖奖品:", data.allPrizes);
+			this.$refs.detailLucky.hide();
+		},
 		previewDetail(item, a) {
 
 			const obj = {
@@ -545,7 +556,7 @@ export default {
 								return
 							}
 							// console.log(' res.data.prize_num', res.data.prize_num);
-							
+
 							if (that.buyNum == 0 || that.buyNum == null) {
 								if (res.data.prize_num != null) {
 									that.buyNum = res.data.prize_num;
@@ -657,8 +668,9 @@ export default {
 								})
 
 								if (status == 'success') {
-									this.getPrize(res.data.order_num)
+									this.getPrize(res.data.order_num);
 									this.doRefresh()
+									// this.$refs.detailLucky.init([], this.buyNum);
 								}
 							} else {
 								this.$c.toast({
diff --git a/pages/shouye/slots.vue b/pages/shouye/slots.vue
index 1ea95ab..5a40b5f 100644
--- a/pages/shouye/slots.vue
+++ b/pages/shouye/slots.vue
@@ -1,312 +1,154 @@
 <template>
   <page-container title="抽奖特效" :showBack="true">
-    <view class="content-container">
-      <view>
-        <view class="slot-view">
-          <!-- 老虎机组件 -->
-          <SlotMachine
-            ref="myLucky"
-            :width="windowWidth"
-            height="800rpx"
-            :blocks="blocks"
-            :slots="slots"
-            :prizes="prizes"
-            :defaultConfig="defaultConfig"
-            @start="startCallBack"
-            @end="endCallBack"
-          >
-          </SlotMachine>
-        </view>
-      </view>
-    </view>
+    <!-- 使用抽取的老虎机组件 -->
+    <DetailLucky ref="detailLucky" @start="onLuckyStart" @end="onLuckyEnd" />
 
-    <!-- 开始抽奖按钮 -->
-    <button
-      style="
-        margin-top: 20rpx;
-        position: absolute;
-        bottom: 20rpx;
-        left: 50%;
-        transform: translateX(-50%);
-      "
-      @click="onStartDraw"
-    >
-      开始抽奖
-    </button>
+    <!-- 页面上的开始抽奖按钮 -->
+    <button class="start-draw-btn" @click="startDrawing">开始抽奖</button>
   </page-container>
 </template>
 
 <script>
-// 导入老虎机组件
-import SlotMachine from "@/components/@lucky-canvas/uni/slot-machine";
-function shuffle(array) {
-  for (let i = array.length - 1; i > 0; i--) {
-    // 生成一个 0 到 i 之间的随机整数
-    const j = Math.floor(Math.random() * (i + 1));
-    // 交换 array[i] 和 array[j]
-    [array[i], array[j]] = [array[j], array[i]];
-  }
-  return array;
-}
-// import SlotMachine from '@lucky-canvas/uni/slot-machine' // 老虎机
+// 导入抽取的老虎机组件
+import DetailLucky from "@/components/detail-lucky/detail-lucky.vue";
+
 export default {
-  components: { SlotMachine },
+  components: { DetailLucky },
   data() {
-    let windowWidth = uni.getSystemInfoSync().windowWidth;
-    console.log(windowWidth);
-    let t = [
-      {
-        id: 1128,
-        title: "兹琪露娜提亚斯",
-        imgurl:
-          "https://image.zfunbox.cn/topic/20250515/2986e27e673ef675e02771cdebd9b822.jpg",
-        price: "350.00",
-        real_pro: "0.02000",
-        goods_type: 1,
-        doubling: 1,
-        is_lingzhu: 0,
-      },
-      {
-        id: 1129,
-        title: "月岗恋钟",
-        imgurl:
-          "https://image.zfunbox.cn/topic/20250515/2c5ed2097716db6bef01da718bc3c091.jpg",
-        price: "132.00",
-        real_pro: "0.02000",
-        goods_type: 1,
-        doubling: 3,
-        is_lingzhu: 0,
-      },
-      {
-        id: 1130,
-        title: "BANDAI万代拼装模型 1/100 MG 机动战士高达 倒A 逆A-15岁以上",
-        imgurl:
-          "https://image.zfunbox.cn/topic/20250515/e35da49b4976f156f2f98dec002274a5.png",
-        price: "305.00",
-        real_pro: "0.03000",
-        goods_type: 1,
-        doubling: 1,
-        is_lingzhu: 0,
-      },
-      {
-        id: 1131,
-        title: "BANDAI 万代拼装模型 MG 主天使-15岁以上",
-        imgurl:
-          "https://image.zfunbox.cn/topic/20250515/77302c6f1ea9ea6a8516cc1208174aee.png",
-        price: "289.00",
-        real_pro: "0.03000",
-        goods_type: 1,
-        doubling: 1,
-        is_lingzhu: 0,
-      },
-      {
-        id: 1132,
-        title: "BANDAI万代 HG00 09 1/144 座天使高达一型-15岁以上",
-        imgurl:
-          "https://image.zfunbox.cn/topic/20250515/55e816c93b5e4103a30682c586816b11.jpg",
-        price: "114.00",
-        real_pro: "0.50000",
-        goods_type: 1,
-        doubling: 3,
-        is_lingzhu: 0,
-      },
-      {
-        id: 1133,
-        title: "BANDAI万代拼装模型 HGUC 130 机动战士高达 杰斯塔-15岁以上",
-        imgurl:
-          "https://image.zfunbox.cn/topic/20250515/aeb6bfb8b4aa8a29796b242e4f5d56d9.png",
-        price: "113.00",
-        real_pro: "1.50000",
-        goods_type: 1,
-        doubling: 1,
-        is_lingzhu: 0,
-      },
-      {
-        id: 1134,
-        title: "BANDAI万代拼装模型HG26 1/144 凯列班高达 异灵高达-15岁以上",
-        imgurl:
-          "https://image.zfunbox.cn/topic/20250515/329e3a7e21772a63cea03d31f948345d.png",
-        price: "112.00",
-        real_pro: "1.00000",
-        goods_type: 1,
-        doubling: 2,
-        is_lingzhu: 0,
-      },
-      {
-        id: 1135,
-        title: "梦幻",
-        imgurl:
-          "https://image.zfunbox.cn/topic/20250515/d2c7e48515d393084000595074209042.jpg",
-        price: "41.00",
-        real_pro: "2.50000",
-        goods_type: 1,
-        doubling: 2,
-        is_lingzhu: 0,
-      },
-      {
-        id: 1136,
-        title: "谜拟丘",
-        imgurl:
-          "https://image.zfunbox.cn/topic/20250515/6031827bc455cbf86ff778d74ddffbd3.jpg",
-        price: "38.00",
-        real_pro: "1.50000",
-        goods_type: 1,
-        doubling: 1,
-        is_lingzhu: 0,
-      },
-      {
-        id: 1137,
-        title: "小提琴模型1个",
-        imgurl:
-          "https://image.zfunbox.cn/topic/20250515/22846dea5a933ab314998afc51abb7bb.jpg",
-        price: "13.80",
-        real_pro: "92.90000",
-        goods_type: 1,
-        doubling: 1,
-        is_lingzhu: 0,
-      },
-    ];
-    let prizes = [];
-    for (let i = 0; i < t.length; i++) {
-      prizes.push({
-        imgs: [
-          {
-            src: t[i].imgurl,
-            width: "152.78rpx",
-            height: "152.78rpx",
-          },
-        ],
-        background: "#ffffff",
-      });
-    }
-	const arr = Array.from({ length: t.length }, (_, i) => i);
-	let slots = [
-		{ order:shuffle([...arr]), speed: 20 }, // 第一列速度
-        { order:shuffle([...arr]), speed: 20 }, // 第二列速度
-        { order:shuffle([...arr]), speed: 20 }, // 第三列速度
-		{ order:shuffle([...arr]), speed: 20 }, // 第三列速度
-		{ order:shuffle([...arr]), speed: 20 }, // 第三列速度
-	]
-	console.log(slots);
-	
     return {
-      windowWidth: windowWidth + "px",
-      // 外部边框配置
-      blocks: [
-        // { padding: "100px 0px 0px 0px", imgs:[{src:"https://image.zfunbox.cn/di.png",width:"100%",height:"100%"}]},
-        //https://image.zfunbox.cn/di.png
-        // {background:"#238E71"},
-        // { padding: "0px", background: "transparent" }, // 外边框
-        // { padding: "0px", background: "transparent" }, // 内边框
+      // 示例奖品列表
+      prizeList: [
+        {
+          id: 1001,
+          title: "iPhone 15 Pro Max",
+          imgurl:
+            "https://image.zfunbox.cn/topic/20250515/2986e27e673ef675e02771cdebd9b822.jpg",
+          price: "9999.00",
+          real_pro: "0.01000",
+          goods_type: 1,
+          doubling: 1,
+          is_lingzhu: 0,
+        },
+        {
+          id: 1002,
+          title: "AirPods Pro",
+          imgurl:
+            "https://image.zfunbox.cn/topic/20250515/2c5ed2097716db6bef01da718bc3c091.jpg",
+          price: "1999.00",
+          real_pro: "0.05000",
+          goods_type: 1,
+          doubling: 1,
+          is_lingzhu: 0,
+        },
+        // 可以添加更多奖品...
       ],
-      // 老虎机各列的速度配置
-		slots: slots,
-      // 奖品列表配置
-      prizes: prizes,
-      // 老虎机默认配置
-      defaultConfig: {
-        mode: "horizontal", // 水平模式
-        rowSpacing: "10px", // 行间距
-        colSpacing: "10px", // 列间距
-		accelerationTime:1500
-      },
+      // 弹窗相关数据
+      luckyMessage: "恭喜您获得奖品",
+      luckyPrize: null,
     };
   },
-  computed: {
-    // 计算抽奖项尺寸
-    lotteryItemSize() {
-      let height = uni.upx2px(220);
-      let width = uni.upx2px(170);
-      return [width, height];
-    },
+  mounted() {
+    // 在组件挂载后初始化老虎机
+    this.initLuckyMachine();
   },
   methods: {
-    // 点击抽奖按钮触发回调
-    startCallBack() {
-      console.log("开始抽奖");
+    // 初始化老虎机
+    initLuckyMachine() {
+      try {
+        // 初始化并传入奖品列表（也可以使用默认奖品）
+        this.$refs.detailLucky.init([], 1);
+        console.log("老虎机初始化完成");
+      } catch (error) {
+        console.error("初始化老虎机时出错:", error);
+      }
     },
-    // 抽奖结束触发回调
-    endCallBack(prize) {
-      // 奖品详情
-      console.log("抽奖结束", prize);
-    },
-    // 开始抽奖方法
-    onStartDraw() {
-      let windowWidth = uni.getSystemInfoSync().windowWidth;
-      console.log(windowWidth);
 
-      // 开始旋转
-      this.$refs.myLucky.play();
-	  this.bgmCtx.slotBgm.play()
-      // 使用定时器来模拟请求接口
-      setTimeout(() => {
-        // 生成随机中奖索引
-        const index = Math.floor(Math.random() * this.prizes.length);
-        // 调用stop停止旋转并传递中奖索引
-        this.$refs.myLucky.stop([0, 1, 2,3,4]);
-      }, 2000); // 3秒后停止
+    // 点击按钮开始抽奖
+    startDrawing() {
+      try {
+        // 按照初始化->开始->结束的顺序调用
+
+        // 开始抽奖
+        this.$refs.detailLucky.startDraw(() => {
+          console.log("抽奖开始了");
+
+          // 模拟2秒后停止抽奖
+          setTimeout(() => {
+            try {
+              // 生成5个随机中奖索引或指定特定奖品
+              // 方法1：随机生成 - 不传参数则自动随机
+              // this.$refs.detailLucky.stopDraw();
+
+              // 方法2：指定相同奖品 - 所有列都显示同一个奖品
+              // this.$refs.detailLucky.stopDraw([0, 0, 0, 0, 0]);
+
+              // 方法3：指定不同奖品 - 每列显示不同奖品
+              const prizeIndices = [0, 1, 0, 1, 0]; // 示例：交替显示两种奖品
+              this.$refs.detailLucky.stopDraw(prizeIndices);
+            } catch (error) {
+              console.error("停止抽奖时出错:", error);
+              uni.showToast({
+                title: "抽奖异常，请重试",
+                icon: "none",
+              });
+            }
+          }, 2000);
+        });
+      } catch (error) {
+        console.error("开始抽奖时出错:", error);
+        uni.showToast({
+          title: "抽奖异常，请重试",
+          icon: "none",
+        });
+      }
+    },
+
+    // 老虎机开始抽奖回调
+    onLuckyStart() {
+      console.log("父组件接收到开始抽奖事件");
+    },
+
+    // 老虎机结束抽奖回调
+    onLuckyEnd(data) {
+      console.log("抽奖结束", data);
+
+      // 获取所有中奖奖品
+      console.log("所有中奖奖品:", data.allPrizes);
+      this.$refs.detailLucky.hide();
+      // 设置弹窗数据
+      this.luckyMessage = data.message;
+      this.luckyPrize = data.prizeInfo;
+
+      // 打开弹窗
+      this.$refs.luckyPopup && this.$refs.luckyPopup.open();
+    },
+
+    // 弹窗确认按钮点击处理
+    onPrizeConfirm(prize) {
+      uni.showToast({
+        title: "奖品已领取",
+        icon: "success",
+      });
+    },
+
+    // 弹窗取消按钮点击处理
+    onPrizeCancel() {
+      uni.showToast({
+        title: "已关闭弹窗",
+        icon: "none",
+      });
     },
   },
 };
 </script>
 
 <style lang="scss">
-// 内容容器样式
-.content-container {
-  width: 100%;
-  height: 100vh;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  box-sizing: border-box;
-  background-image: url($imgurl + "common/slot_bg.webp");
-  background-size: cover;
-  background-position: center;
-}
-.slot-title{
-	background: url('https://image.zfunbox.cn/di.png') no-repeat;
-	background-size: 100% 100%;
-	width: 100vw;
-	height: 100rpx;
-}
-// 老虎机视图样式
-.slot-view {
-//   background: linear-gradient(to right, #0c1b21, #218c78, #0c1b21);
-    background: url('https://image.zfunbox.cn/di.png') no-repeat;
-  background-size: 100% 100%;
-    // background-size: cover;
-//   background-position: center;
-  width: 100vw;
-  padding-top: 200rpx;
-  padding-bottom: 80rpx;
-//   height: 520rpx;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-//   padding: 0rpx;
-}
-
-// 中心线样式
-.view-center-line {
-  position: absolute;
-  width: 1rpx;
-  background-color: red;
-  height: 300rpx;
-  z-index: 10;
-}
-
-// 抽奖项样式
-.item-lottry {
-  height: 152.78rpx;
-  width: 152.78rpx;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  font-size: 30rpx;
-  border-radius: 16rpx;
-  color: black;
-  box-sizing: border-box;
-  background-color: rgba(255, 255, 255, 1);
+// 开始抽奖按钮样式
+.start-draw-btn {
+  margin: 20rpx;
+  background-color: #ff6b6b;
+  color: #fff;
+  border-radius: 50rpx;
+  padding: 20rpx 40rpx;
 }
 </style>
\ No newline at end of file