HaniBlindBox/honey_box/pages/shouye/slots.vue

<template>
  <page-container title="抽奖特效" :showBack="true">
    <!-- 使用抽取的老虎机组件 -->
    <DetailLucky ref="detailLucky" @start="onLuckyStart" @end="onLuckyEnd" />

    <!-- 页面上的开始抽奖按钮 -->
    <button class="start-draw-btn" @click="startDrawing">开始抽奖</button>
    
    <!-- 新增的传入结果抽奖按钮 -->
    <button class="start-draw-btn custom-draw-btn" @click="startCustomDraw">自定义结果抽奖</button>
    <button class="start-draw-btn custom-draw-btn" @click="startGrandPrize"  >超神特效</button>
    <DetailGrandPrize ref="detailGrandPrize" @end="onLuckyEnd" />
  </page-container>
</template>

<script>
// 导入抽取的老虎机组件
import DetailLucky from "@/components/detail-lucky/detail-lucky.vue";
import DetailGrandPrize from "@/components/detail-lucky/detail-grand-prize.vue";
export default {
  components: { DetailLucky, DetailGrandPrize },
  data() {
    return {
      // 示例奖品列表
      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,
        },
        // 可以添加更多奖品...
      ],
      // 弹窗相关数据
      luckyMessage: "恭喜您获得奖品",
      luckyPrize: null,
    };
  },
  mounted() {
    // 在组件挂载后初始化老虎机
    this.initLuckyMachine();
  },
  methods: {
    startGrandPrize() {
      this.$refs.detailGrandPrize.init([],5);
      this.$refs.detailGrandPrize.show();
    },
    // 初始化老虎机
    initLuckyMachine() {
      try {
        // 初始化并传入奖品列表（也可以使用默认奖品）
        this.$refs.detailLucky.init([], 10);
        console.log("老虎机初始化完成");
      } catch (error) {
        console.error("初始化老虎机时出错:", error);
      }
    },

    // 点击按钮开始抽奖
    startDrawing() {
      try {
        // 按照初始化->开始->结束的顺序调用

        // 开始抽奖
        this.$refs.detailLucky.startDraw(() => {
          console.log("抽奖开始了");

          // 模拟2秒后停止抽奖
          setTimeout(() => {
            try {
              // 方法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",
        });
      }
    },
    
    // 新增方法：自定义结果抽奖
    startCustomDraw() {
      // 调用自定义方法示例
      const prizeIndices = [1, 1, 1]; // 示例：所有列都显示第二个奖品
      this.startLuckyDraw(prizeIndices, () => {
        console.log("自定义抽奖完成的回调执行了");
        uni.showToast({
          title: "自定义抽奖完成",
          icon: "success",
        });
      });
    },
    
    /**
     * 开始抽奖并传入抽奖结果
     * @param {Array} resultIndices 抽奖结果索引数组
     * @param {Function} callback 抽奖结束后的回调函数
     */
    startLuckyDraw(resultIndices, callback) {
      try {
        if (!resultIndices || !Array.isArray(resultIndices)) {
          console.error("抽奖结果必须是数组");
          return;
        }
        
        // 开始抽奖
        this.$refs.detailLucky.startDraw(() => {
          console.log("抽奖开始了，将在2秒后展示指定结果");
          
          // 2秒后停止抽奖并显示结果
          setTimeout(() => {
            try {
              this.$refs.detailLucky.stopDraw(resultIndices);
              
              // 如果有回调函数，在onLuckyEnd中触发
              if (typeof callback === 'function') {
                // 保存回调以在抽奖结束时调用
                this.luckyDrawCallback = callback;
              }
            } 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);

      // // 检查是否是跳过动画
      // if (data.skipped) {
      //   console.log("用户跳过了动画");
      // }

      this.$refs.detailLucky.hide();
    

      // 打开弹窗
      this.$refs.luckyPopup && this.$refs.luckyPopup.open();
      
      // 如果存在回调函数，则执行
      if (this.luckyDrawCallback && typeof this.luckyDrawCallback === 'function') {
        this.luckyDrawCallback(data);
        // 清除回调，避免重复调用
        this.luckyDrawCallback = null;
      }
    },

    // 弹窗确认按钮点击处理
    onPrizeConfirm(prize) {
      uni.showToast({
        title: "奖品已领取",
        icon: "success",
      });
    },

    // 弹窗取消按钮点击处理
    onPrizeCancel() {
      uni.showToast({
        title: "已关闭弹窗",
        icon: "none",
      });
    },
  },
};
</script>

<style lang="scss">
// 开始抽奖按钮样式
.start-draw-btn {
  margin: 20rpx;
  background-color: #ff6b6b;
  color: #fff;
  border-radius: 50rpx;
  padding: 20rpx 40rpx;
}

// 自定义抽奖按钮样式
.custom-draw-btn {
  background-color: #4a9eff;
  margin-top: 10rpx;
}
</style>