activityLink/src/views/choujiang/index.vue

<template>
  <div class="choujiang-main">
    <Lottery3D ref="lottery3DRef" />
    <PrizePanel
      :prizes="dataManager.state.basicData.prizes"
    />
    <ControlBar
      :lottery-state="lotteryState"
      :is-disabled="isDisabled"
      @lottery-click="handleLotteryClick"
      @reset="handleReset"
      @export="handleExport"
    />
    <MusicPlayer />
    <!-- <UserList
      :lucky-users="
        dataManager.state.basicData.luckyUsers[
          dataManager.state.currentPrize?.type
        ] || []
      "
      :left-users="dataManager.state.basicData.leftUsers"
    /> -->
    <!-- <Qipao :text="qipaoText" :show="showQipao" /> -->
  </div>
</template>

<script setup>
import Lottery3D from "./lottery/Lottery3D.vue";
import PrizePanel from "./lottery/PrizePanel.vue";
import ControlBar from "./lottery/ControlBar.vue";
import MusicPlayer from "./lottery/MusicPlayer.vue";
import Qipao from "./lottery/Qipao.vue";
import UserList from "./lottery/UserList.vue";
import { ref, onMounted, nextTick, computed, watch } from "vue";
import { useDataManager } from "./lottery/dataManager.js";
import { useLotteryEngine } from "./lottery/lotteryEngine.js";

import { useLotteryStore } from "../../store/lottery"; // 路径根据实际情况调整

const qipaoText = ref("");
const showQipao = ref(false);

// const lotteryState = ref('idle'); // idle, ready, rotating, result

// 新增
const lotteryStore = useLotteryStore();
const lotteryState = computed({
  get: () => lotteryStore.lotteryState,
  set: (val) => lotteryStore.setLotteryState(val),
});

const isDisabled = ref(false);

watch(isDisabled, (newVal, oldVal) => {
  console.log("isDisabled 变化:", oldVal, "->", newVal);
});

// 数据与抽奖主流程
const dataManager = useDataManager();
let lottery3DRef = ref(null);
const lotteryEngine = useLotteryEngine(dataManager, {
  resetCard: (...args) => lottery3DRef.value?.resetCard?.(...args),
  addHighlight: (...args) => lottery3DRef.value?.addHighlight?.(...args),
  switchScreen: (...args) => lottery3DRef.value?.switchScreen?.(...args),
  rotateBallStart: (...args) => lottery3DRef.value?.rotateBallStart?.(...args),
  rotateBallStop: (...args) => lottery3DRef.value?.rotateBallStop?.(...args),
  selectCard: (...args) => lottery3DRef.value?.selectCard?.(...args),
});

onMounted(async () => {
  await dataManager.getBasicData();
  await dataManager.getUsers();
});

function showLotteryQipao() {
  const luckys = dataManager.state.currentLuckys;
  const prize = dataManager.state.currentPrize;
  if (!luckys || luckys.length === 0) return;
  const names = luckys.map((item) => item[1]).join("、");
  qipaoText.value = `恭喜${names}获得${prize?.title || ""}！`;
  showQipao.value = true;
  setTimeout(() => {
    showQipao.value = false;
  }, 3000);
}

async function handleLotteryClick() {
  if (isDisabled.value) return; // 2秒内不能重复点击
  isDisabled.value = true;
  setTimeout(() => {
    isDisabled.value = false;
  }, 2000);

  switch (lotteryState.value) {
    case "idle":
      // 先切换到球体布局
      console.log("lotteryState 变更前:", lotteryState.value, "-> ready");
      lotteryState.value = "ready";
      console.log("lotteryState 变更后:", lotteryState.value);
      await lottery3DRef.value?.switchScreen?.("lottery");
      break;
    case "ready":
      // 立即切换为“停止抽奖”
      console.log("lotteryState 变更前:", lotteryState.value, "-> rotating");
      lotteryState.value = "rotating";
      console.log("lotteryState 变更后:", lotteryState.value);
      // 开始转动
                    // isRunning.value = false; // 无论如何都恢复

      await lottery3DRef.value?.rotateBallStart?.();
      break;
    case "rotating":
      // 停止转动并开奖
      await lottery3DRef.value?.rotateBallStop?.();
      await lotteryEngine.executeLottery();
      await nextTick();
      showLotteryQipao();
      console.log("lotteryState 变更前:", lotteryState.value, "-> idle");
      lotteryState.value = "result";

      console.log("lotteryState 变更后:", lotteryState.value);

      break;
    case "result":
      // result 状态下点击不做任何事，或者你可以加提示
      await lottery3DRef.value?.switchScreen?.("lottery");
      
      // 去除高光
      lottery3DRef.value?.changeCard1?.();
      
      lotteryState.value = "ready";

      break;
    default:
      break;
  }
}

function handleReset() {
  lotteryEngine.resetLottery();
}
function handleExport() {
  dataManager.exportData();
}

function handlePrevPrize() {
  if (dataManager.state.currentPrizeIndex > 0) {
    dataManager.state.currentPrizeIndex--;
    dataManager.state.currentPrize =
      dataManager.state.basicData.prizes[dataManager.state.currentPrizeIndex];
  }
}
function handleNextPrize() {
  if (
    dataManager.state.currentPrizeIndex <
    dataManager.state.basicData.prizes.length - 1
  ) {
    dataManager.state.currentPrizeIndex++;
    dataManager.state.currentPrize =
      dataManager.state.basicData.prizes[dataManager.state.currentPrizeIndex];
  }
}
</script>

<style scoped>
.choujiang-main {
  width: 100vw;
  height: 100vh;
  position: relative;
  overflow: hidden;
  /* 添加背景图片 */
  background: url('../../assets/登录.png')  ;
  background-size: 1920px 980px;

}
</style>