zszq-celebration-88/src/components/Draw.vue

<template>
  <div class="drawCon" @touchmove.prevent>
    <!-- 抽奖结果反馈 -->
    <div class="draw_container" v-if="!isgetMoney">
      <!-- 正常中奖 -->
      <div class="has_prize" v-if="drawStatus">
        <div class="money_num">
          <span>{{ amount }}</span
          >元
        </div>
        <div class="get_btn" @click="getMoney"></div>
      </div>

      <!-- 谢谢参与 -->
      <div class="no_prize" v-if="!drawStatus"></div>

      <div class="cls_btn" @click="hide"></div>
    </div>

    <!-- 领奖后的弹窗 -->
    <div class="add_container" v-if="isgetMoney">
      <!-- 已经添加过企微人员 -->
      <div class="is_added">
        <div class="go_index_btn"></div>
      </div>

      <div class="cls_btn" @click="hide"></div>
    </div>
  </div>
</template>

<script setup>
import {
  onBeforeMount,
  onMounted,
  defineEmits,
  defineProps,
  reactive,
  ref,
  toRefs,
} from "vue";
import gsap from "gsap";
import axios from "axios";
import service from "@/api/httpServe";
import qs from "qs";
import wx from "@/utils/wx-jssdk.1.6.0.js";
import { Toast, Dialog } from "vant";
import { useStore } from "vuex";

// 初始化
const emit = defineEmits(["drawCon"]); // 声明触发事件，对应父组件上面的方法
const props = defineProps({ prizeMsg: Object }); // 获取props
const store = useStore();

const drawStatus = ref(true);
const isgetMoney = ref(false);
const amount = ref(0);
const prizeId = ref(1);

// 页面挂载前
onBeforeMount(() => {
  amount.value = props.prizeMsg.amount;
  prizeId.value = props.prizeMsg.id;

  if (props.prizeMsg.amount == 0) {
    drawStatus.value = false;
  }
  console.log("props:", props.prizeMsg);
});

// 页面挂载后
onMounted(() => {
  gsap.from(".drawCon", { duration: 0.3, autoAlpha: 0 });
  gsap.from(".draw_container", {
    duration: 0.3,
    scale: 0.2,
    autoAlpha: 0,
    delay: 0.1,
  });
  // gsap.from('.rule_cls_btn', { duration: 0.3, y: 20, autoAlpha: 0, delay: 0.5 })
});

const hide = () => {
  emit("drawCon");
};

// 立即领取红包
const getMoney = () => {
  redpacket(prizeId.value);
};

// 领取接口
const redpacket = (prizeId) => {
  let redpacketId = prizeId;
  service
    .post(
      process.env.VUE_APP_API +
        "/cms-activity/cms88/redpacket/receive/" +
        redpacketId,
      {}
    )
    .then((res) => {
      console.log("领取红包结果", res);
      let data = res.data;
      if (data.code == 0) {
        gsap.to(".draw_container", {
          duration: 0.3,
          scale: 0,
          autoAlpha: 0,
          onComplete: () => {
            drawStatus.value = false;
            isgetMoney.value = true;
            // gsap.form('.add_container',{duration:0.5,scale:0,autoAlpha:0,})
          },
        });
      } else {
        Toast(data.msg);

        Dialog.confirm({
          title: "温馨提示",
          message: data.msg,
          confirmButtonText: '前往绑定',
        })
          .then(() => {
            wx.miniProgram.navigateTo({
              url: "/subs/bind/pages/login/login",
            });
          })
          .catch(() => {
            console.log(2);
            // on cancel
          });
      }
    });
};
</script>

<style lang="scss" scoped>
.drawCon {
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: rgba(0, 0, 0, 0.7);

  .draw_container {
    width: 750px;
    height: 1180px;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;

    .has_prize {
      @include box(530px, 594px);
      @include bg_pos("../assets/img/pop/luckybag.png");
      position: relative;

      .money_num {
        @include pos(530px, 92px, 0px, 134px);
        color: #ff480e;
        font-size: 32px;
        text-align: center;
        font-weight: 700;

        span {
          font-size: 82px;
        }
      }

      .get_btn {
        @include pos(274px, 92px, 139px, 389px);
        @include bg_pos("../assets/img/pop/draw_got_btn.png");
      }
    }

    .no_prize {
      @include box(573px, 362px);
      @include bg_pos("../assets/img/pop/no_prize_pop.png");
    }
  }

  .add_container {
    width: 750px;
    height: 1180px;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;

    .is_added {
      @include box(530px, 594px);
      @include bg_pos("../assets/img/pop/got_luckyBag_pop.png");
      position: relative;

      .go_index_btn {
        @include pos(394px, 92px, 79px, 389px);
        @include bg_pos("../assets/img/pop/to_index_btn.png");
      }
    }
  }

  .cls_btn {
    @include box(72px, 72px);
    @include bg_pos("../assets/img/pop/cls_btn.png");
    margin-top: 50px;
  }
}
</style>