palc-newyear2024/src/components/Draw.vue

<script setup>
import gsap from "gsap";
import { addPoint, debounceTap } from "@/plugins";
import { Toast } from "vant";
import { Clipboard } from "v-clipboard";
import { useMainStore } from "@/store";
import { drawApi } from "@/api";

// 页面配置初始化
const emit = defineEmits(["DrawPage"]);
const userStore = useMainStore();

const money = ref("8.88");
const code = ref("sss");

const showResult = ref(false);
const hasPrize = ref(true);

const drawFn = (event) => {
  let e = event.target.parentElement;
  debounceTap(e, async () => {
    console.log("抽奖");
    Toast.loading({
      message: "抽奖中",
      forbidClick: true,
      duration: 0,
    });
    gsap.fromTo(
      e,
      { rotation: "-30" },
      { rotation: "+30", repeat: -1, yoyo: true, ease: "none", duration: 0.3 }
    );

    try {
      const res = await drawApi(
        { subAnswerKey: userStore.drawKey },
        userStore.token
      );
      if (res.code == 0) {
        // isDrawn后端判断有没有中奖
        hasPrize.value = res.data.isDrawn == 1 ? true : false; // true 中奖 || false 未中奖
        userStore.updateDraw(); // 更新抽奖机会

        // 有奖品的话更新奖品信息
        if (res.data.isDrawn == 1) {
          money.value = res.data.prizeAmount;
          code.value = res.data.prizeCode;
          userStore.updatePrize(res.data);
        }
      } else {
        hasPrize.value = false; // true 中奖 || false 未中奖
      }
    } catch (e) {
      hasPrize.value = false;
    }

    userStore.updateDraw();
    setTimeout(() => {
      Toast.clear();
      showResult.value = true;
      gsap.from(".result-container", {
        duration: 0.5,
        scale: 0.7,
        autoAlpha: 0,
      });
      gsap.killTweensOf(".draw-light,.draw");
    }, 1000);
  });
};

const hide = (event) => {
  let e = event.target;
  debounceTap(e, () => {
    gsap.to(".DrawPage", {
      duration: 0.3,
      autoAlpha: 0,
      onComplete: () => {
        emit("DrawPage", "hide");
      },
    });
  });
};
const copyFn = (event) => {
  let e = event.target;
  debounceTap(e, () => {
    Clipboard.copy(code.value);
    Toast(`复制成功：${code.value}`);
  });
};

const entryAni = () => {
  gsap.from(".DrawPage", { duration: 0.2, autoAlpha: 0 });
  gsap.from(".draw-container", { duration: 0.5, autoAlpha: 0, scale: 0.7 });
  gsap.from(".draw-light", {
    duration: 3,
    rotation: "+=360",
    ease: "none",
    repeat: -1,
  });
};

onMounted(() => {
  entryAni();
});
</script>


<template>
  <div class="DrawPage" @touchmove.prevent>
    <!-- 抽奖容器 -->
    <div v-show="!showResult" class="draw-container">
      <div class="draw-light"></div>
      <div class="draw-box">
        <div class="draw" @click="drawFn($event)"></div>
      </div>
      <div class="draw-star"></div>
      <div class="draw-tips"></div>
    </div>
    <div v-show="showResult" class="result-container">
      <!-- 有奖品 -->
      <div class="draw-has" v-show="hasPrize">
        <div class="money">¥{{ money }}元</div>
        <div class="code-box">
          <div class="code">{{ code }}</div>
          <div class="copy-btn" @click="copyFn($event)"></div>
        </div>
        <div class="cls-btn" @click="hide($event)"></div>
      </div>
      <!-- 没有奖品 -->
      <div class="draw-none" v-show="!hasPrize">
        <div class="none-prize"></div>
        <div class="cls-btn" @click="hide($event)"></div>
      </div>
    </div>
  </div>
</template>  

<style lang="scss" scoped>
.DrawPage {
  @include fixed();
  @include flexCen();
  background-color: rgba($color: #000000, $alpha: 0.8);

  // 抽奖弹窗样式
  .draw-container {
    @include box(685px, 694px);
    position: relative;

    .draw-light {
      pointer-events: none;
      @include pos(685px, 694px, 0px, 0px);
      @include bg_pos("prize/light.png");
    }

    .draw-star {
      pointer-events: none;
      @include pos(515px, 551px, 89px, 56px);
      @include bg_pos("prize/star.png");
    }

    .draw-box {
      @include pos(690px, 680px, 0px, 0px);
      @include bg_pos("prize/draw-box.png");

      .draw {
        @include pos(350px, 347px, 164px, 172px);
      }
    }

    .draw-tips {
      pointer-events: none;
      @include pos(187px, 34px, 250px, 605px);
      @include bg_pos("prize/tips.png");
    }
  }

  // 中奖弹窗样式
  .draw-has {
    position: relative;
    @include box(665px, 731px);
    @include bg_pos("prize/myPrize-box.png");

    .money {
      @include pos(370px, 81px, 139px, 239px);
      display: flex;
      justify-content: center;
      align-items: center;
      color: #e95b46;
      font-weight: 700;
      font-size: 58px;
      letter-spacing: 4px;
    }

    .code-box {
      @include pos(312px, 52px, 197px, 508px);
      display: flex;
      flex-direction: row;
      align-items: center;

      .code {
        font-size: 25px;
        font-weight: 700;
        margin-right: 10px;
        color: #fff6cc;
      }

      .copy-btn {
        @include box(77px, 39px);
        @include bg_pos("prize/copy-btn.png");
      }
    }

    .cls-btn {
      @include pos(82px, 82px, 517px, 114px);
      @include bg_pos("prize/cls-btn.png");
    }
  }

  // 未中奖弹窗样式
  .draw-none {
    @include flexCen();

    .none-prize {
      @include box(521px, 447px);
      @include bg_pos("prize/no-prize.png");
    }

    .cls-btn {
      @include box(82px, 82px);
      @include bg_pos("prize/cls-btn.png");
      margin-top: 40px;
    }
  }
}
</style>