palc-newyear2024/src/components/Draw.vue

<script setup>
import gsap from "gsap";
import { addPoint, debounceTap } from "@/plugins";
import { Toast } from "vant";
import useClipboard from 'vue-clipboard3'
import { useMainStore } from "@/store";
import { drawApi } from "@/api";

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



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

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

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

      drawApi(
        { subAnswerKey: userStore.drawKey },
        userStore.token
      ).then(res => {
        if (res.code == 0) {
          console.log('正常抽奖');
          // 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);
          }

          setTimeout(() => {
            Toast.clear();
            showResult.value = true;
            gsap.from(".result-container", {
              duration: 0.5,
              scale: 0.7,
              autoAlpha: 0,
            });
            gsap.killTweensOf(".draw-light,.draw");
          }, 1000);
        } else {
          console.log('抽奖异常');
          if (res.code == 6003) {
            console.log('6003', res);
            Toast(res.msg)
            userStore.updateDraw();

          } else {
            console.log('eroor', res);
            hasPrize.value = false; // true 中奖 || 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);
          }
        }
      }).catch(error =>{
        console.log('eroor', error);
            hasPrize.value = false; // true 中奖 || 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);
      })
    } else {
      Toast('今日抽奖次数已用完！')
    }

  });
};

const hide = (event) => {
  let e = event.target;
  debounceTap(e, () => {
    gsap.to(".DrawPage", {
      duration: 0.3,
      autoAlpha: 0,
      onComplete: () => {
        emit("DrawPage", {action:"hide"});
      },
    });
  });
};
const copyFn = (event) => {
  let e = event.target;
  toClipboard(code.value)
  debounceTap(e, async() => {
    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 class="draw-cls-btn" @click="hide($event)"></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="code-tips">
          <div>兑奖流程：前往微信搜索【平安理财服务号】</div>
          <div>公众号发送“清凉一夏”获取兑换链接，</div>
          <div>输入兑换码兑换奖品。</div>
          <div class="code-tips-text">（兑换码可在主页面“奖品”再次查看并复制）</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-cls-btn {
      @include pos(82px, 82px, 300.5px, 670px);
      @include bg_pos("prize/cls-btn.png");
    }

    .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");
    position: relative;
    left: 30px;
    .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(390px, 52px, 100px, 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-btn2.png");
      }
    }

    .code-tips{
      display: flex;
      flex-direction: column;
      justify-content: space-around;
      @include pos(410px, 120px, 100px, 560px);
      // background: rgba($color: #000000, $alpha: .7);
      font-size: 20px;
        font-weight: 700;
        color: #fff6cc;
      .code-tips-text{
        font-size: 17px;
        text-align: center;
      }
    }

    .cls-btn {
      @include pos(43px, 43px, 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>