大致完成所有逻辑，今晚调试一下大转盘样式

src/components/Draw.vue

@@ -114,7 +114,7 @@ const redpacket = (prizeId) => {
           },
         });
       } else {
-        Toast(data.msg);
+        // Toast(data.msg);
 
         Dialog.confirm({
           title: "温馨提示",

src/components/Index.vue

@@ -12,7 +12,9 @@
       <div class="lucky_bag_2" v-if="gameOver">
         <div class="no_prize_text" v-if="drawAmount == 0"></div>
         <div class="prize_text" v-if="drawAmount != 0"></div>
-        <div class="prize_num" v-if="drawAmount != 0">{{ drawAmount }}<span>元</span></div>
+        <div class="prize_num" v-if="drawAmount != 0">
+          {{ drawAmount }}<span>元</span>
+        </div>
       </div>
       <div class="notice">
         <span class="icon"
@@ -84,6 +86,22 @@
     <!-- 抽奖结果弹窗 -->
     <Draw v-if="showDrawCon" @drawCon="drawConFn" :prizeMsg="prizeMsg" />
   </div>
+
+  <!-- 如果添加过企微，进入页面后弹窗显示中奖结果，未中奖的不显示 -->、
+  <div class="serviceLuckyPop">
+    <div class="serviceLuckyPop_container">
+      <!-- 企微中奖弹窗 -->
+      <div class="serviceLuckyPop_box" v-if="serviceLuckyPopBox">
+        <div class="money">{{serviceLuckyMsg.money}}</div>
+        <div class="get_luckybag" @click="getServiceLucky"></div>
+      </div>
+
+      <!-- 领奖弹窗 -->
+      <div class="serviceLuckyPop_get_box" v-if="!serviceLuckyPopBox">
+        <div class="go_index_btn" @click="hideServiceLuckyPop"></div>
+      </div>
+    </div>
+  </div>
 </template>
 
 <script setup>
@@ -128,18 +146,58 @@ const showRulesPop = ref(false);
 const showMyPrize = ref(false);
 const showServicePop = ref(false);
 
-
+const gameOver = ref(false);
-const gameOver = ref(false)
 const drawType = ref(1);
 const isDraw = ref(false);
 const LuckyWheelCon = ref(null);
 const showDrawCon = ref(false); //抽奖结果弹窗组件
-const drawAmount = ref('')  //显示的红包金额
+const drawAmount = ref(""); //显示的红包金额
 const prizeMsg = reactive({
   amount: 0,
   id: 1,
+});
+const serviceLuckyPopBox = ref(true)
+
+// 企微红包弹窗金额
+const isGetedServiceLucky = ref(false)
+const serviceLuckyMsg = reactive({
+  money: 0,
+  id: 1,
 })
 
+const hideServiceLuckyPop = ()=>{
+  gsap.to('.serviceLuckyPop',{duration:0.5,autoAlpha:0})
+}
+
+// 点击领取企微红包
+const getServiceLucky = ()=>{
+  console.log("getServiceLucky:",serviceLuckyMsg);
+  redpacket(serviceLuckyMsg.id)
+}
+
+// 领取红包接口
+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) {
+        serviceLuckyPopBox.value = false
+        getMyPrizeRecored(); // 更新我的奖品列表
+        
+      } else {
+        Toast(data.msg);
+
+      }
+    });
+};
 
 // 活动列表
 const activityList = reactive([
@@ -183,17 +241,24 @@ const activityList = reactive([
 
 // 页面挂载前
 onBeforeMount(() => {
-  
   // 判断参与活动红包是否领取
-  let arr = store.state.userAccount.prizeList
+  let arr = store.state.userAccount.prizeList;
-  arr.forEach(element => {
+  arr.forEach((element) => {
-    if(element.type == 1){
+    if (element.type == 1) {
-    isDraw.value = true;
+      isDraw.value = true;
-    gameOver.value = true
+      gameOver.value = true;
-    drawAmount.value = element.amount
+      drawAmount.value = element.amount;
+    }
+
+    // 判断红包记录里面是否存在企微红包
+    if(element.type == 2){
+      isGetedServiceLucky.value = true
     }
   });
 
+
+
+
 });
 
 // 入场动画
@@ -224,12 +289,6 @@ const animationIndex = () => {
       y: 200,
       autoAlpha: 0,
       onComplete: () => {
-        gsap.from(".luckybag_left,.luckybag_right", {
-          duration: 2,
-          y: -10,
-          repeat: -1,
-          yoyo: true,
-        });
         gsap.from(".icon_right_3", {
           duration: 1,
           rotation: -10,
@@ -237,6 +296,22 @@ const animationIndex = () => {
           repeat: -1,
           yoyo: true,
         });
+        gsap.from(".luckybag_left", {
+          duration: 0.75,
+          rotation: 10,
+          scale: 1.2,
+          repeat: -1,
+          yoyo: true,
+          ease: 'Bounce.easeIn'
+        });
+        gsap.from(".luckybag_right", {
+          duration: 1,
+          rotation: -10,
+          scale: 1.2,
+          repeat: -1,
+          yoyo: true,
+          ease: 'Bounce.easeInOut'
+        });
         gsap.to(".title_main", {
           duration: 2,
           y: -10,
@@ -253,27 +328,35 @@ const animationIndex = () => {
 onMounted(() => {
   // 挂载后执行入场动画
   animationIndex();
+
+  // 如果添加了企微,直接调抽奖结果,中奖了就弹窗,未中奖的话不弹窗
+  if (store.state.userAccount.isAddCustomer == 1 && !isGetedServiceLucky.value) {
+    getluckyBag2(2)
+  }
+
+  if(!isDraw.value){
+    gsap.to('.draw_btn',{duration:0.5,scale:1.1,repeat:-1,yoyo:true,ease:'Bounce.easeIn'})
+  }
+
 });
 
 // 抽奖按钮
 const drawBtn = () => {
   if (!isDraw.value) {
     // LuckyWheelCon.value.showDrawAni(3, true)
-
+    gsap.killTweensOf('.draw_btn')
     getluckyBag(1); //大转盘抽奖：传参数1
-    
+  } else {
-  }else{
+    Toast("您已经抽过奖");
-    Toast('您已经抽过奖')
   }
 };
 
 // 大转盘结束后的处理事件
-const luckyWheelFn = ()=>{
+const luckyWheelFn = () => {
   console.log("game over");
   showDrawCon.value = true;
-  gameOver.value = true
+  gameOver.value = true;
-}
+};
-
 
 // 活动点击
 const activityBtn = (item) => {
@@ -415,44 +498,74 @@ const getluckyBag = (id) => {
     })
     .then((res) => {
       console.log("抽取红包结果：", res);
-        if (res.data.code == 0) {
+      if (res.data.code == 0) {
-
+        isDraw.value = true;
-            isDraw.value = true;
+        let prizeNum = res.data.data.amount;
-            let prizeNum = res.data.data.amount;
+        drawAmount.value = res.data.data.amount;
-            drawAmount.value = res.data.data.amount
+        prizeMsg.amount = res.data.data.amount;
-            prizeMsg.amount = res.data.data.amount
+        prizeMsg.id = res.data.data.id;
-            prizeMsg.id = res.data.data.id
+        // 大转盘正常抽奖
-          // 大转盘正常抽奖
+        if (prizeNum == 0) {
-          if (prizeNum == 0) {
+          // 谢谢参与
-            // 谢谢参与
+          LuckyWheelCon.value.showDrawAni(5, true);
-            LuckyWheelCon.value.showDrawAni(5, true);
+        }
-          }
+        if (prizeNum == 1.08) {
-          if (prizeNum == 1.08) {
+          // 1.88元
-            // 1.88元
+          LuckyWheelCon.value.showDrawAni(1, true);
-            LuckyWheelCon.value.showDrawAni(1, true);
+        }
-          }
+        if (prizeNum == 2.68) {
-          if (prizeNum == 2.68) {
+          // 2.68元
-            // 2.68元
+          LuckyWheelCon.value.showDrawAni(2, true);
-            LuckyWheelCon.value.showDrawAni(2, true);
+        }
-          }
+        if (prizeNum == 6.66) {
-          if (prizeNum == 6.66) {
+          // 6.66元
-            // 6.66元
+          LuckyWheelCon.value.showDrawAni(3, true);
-            LuckyWheelCon.value.showDrawAni(3, true);
+        }
-          }
+        if (prizeNum == 8.88) {
-          if (prizeNum == 8.88) {
+          // 6.66元
-            // 6.66元
+          LuckyWheelCon.value.showDrawAni(4, true);
-            LuckyWheelCon.value.showDrawAni(4, true);
-          }
-
-          getMyPrizeRecored() // 更新我的奖品列表
-
-        } else {
-          Toast(res.data.msg)
         }
 
+        getMyPrizeRecored(); // 更新我的奖品列表
+      } else {
+        Toast(res.data.msg);
+      }
     });
 };
 
+const getluckyBag2 = (id) => {
+  let type = id;
+  service
+    .post(process.env.VUE_APP_API + "/cms-activity/cms88/redpacket/draw", {
+      xglOpenId: store.state.userAccount.xglOpenId,
+      redpacketType: type,
+    })
+    .then((res) => {
+      console.log("抽取红包结果2：", res);
+      if (res.data.code == 0) {
+
+        // 如果中奖就弹窗
+        if(res.data.data.amount != 0){
+          serviceLuckyMsg.money = res.data.data.amount
+          serviceLuckyMsg.id = res.data.data.id
+          console.log("企微中奖");
+          gsap.to('.serviceLuckyPop',{duration:0.5,autoAlpha:1})
+          gsap.from('.serviceLuckyPop_box',{duration:0.5,autoAlpha:0,scale:0})
+
+        }else{
+          console.log("企微不中奖");
+
+        }
+
+
+        getMyPrizeRecored(); // 更新我的奖品列表
+      } else {
+        Toast(res.data.msg);
+      }
+    });
+};
+
+
 // 活动参与人数
 const getActivityNum = () => {
   service
@@ -479,6 +592,9 @@ const getBrithday = () => {
     });
 };
 
+
+
+
 const deleteNum = ref(0);
 // 清数据接口
 const deleteData = (type) => {
@@ -662,13 +778,13 @@ const deleteData = (type) => {
 
       // display: flex;
 
-      .no_prize_text{
+      .no_prize_text {
         @include pos(221px, 59px, 55px, 55px);
         @include bg_pos("../assets/img/no_prize_text.png");
         pointer-events: none;
       }
 
-      .prize_text{
+      .prize_text {
         @include pos(172px, 23px, 80px, 37px);
         @include bg_pos("../assets/img/prize_text.png");
         pointer-events: none;
@@ -818,4 +934,58 @@ const deleteData = (type) => {
     }
   }
 }
+
+.serviceLuckyPop {
+  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);
+  visibility: hidden;
+
+  .serviceLuckyPop_container {
+    width: 750px;
+    height: 1180px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    flex-direction: column;
+
+    .serviceLuckyPop_box {
+      @include box(530px, 594px);
+      @include bg_pos("../assets/img/pop/service_pop_1.png");
+      position: relative;
+
+      .money {
+        @include pos(90px, 45px, 198px, 150px);
+
+        text-align: center;
+        line-height: 45px;
+        color: #ca2f0a;
+        font-weight: 700;
+      }
+
+      .get_luckybag {
+        @include pos(274px, 92px, 139px, 389px);
+        @include bg_pos("../assets/img/pop/get_luckyBag_btn.png");
+      }
+    }
+  }
+
+  .serviceLuckyPop_get_box{
+    @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");
+      }
+  }
+}
 </style>

src/components/Loading.vue

@@ -0,0 +1,204 @@
+<template>
+  <div class="loadCon" @touchmove.prevent>
+    <div class="load_container">
+      <div class="load_box">
+        <div></div>
+        <div></div>
+        <div></div>
+        <div></div>
+        <div></div>
+        <div></div>
+        <div></div>
+        <div></div>
+        <div></div>
+        <div></div>
+        <div></div>
+        <div></div>
+      </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 { Toast } from "vant";
+import { useStore } from "vuex";
+
+// 初始化
+const emit = defineEmits(["RulesPop"]); // 声明触发事件，对应父组件上面的方法
+const props = defineProps({ sendMessage: Object }); // 获取props
+const store = useStore();
+
+// 页面挂载前
+onBeforeMount(() => {});
+
+// 页面挂载后
+onMounted(() => {});
+
+const hidePop = () => {
+  emit("RulesPop");
+};
+</script>
+
+<style lang="scss" scoped>
+.loadCon {
+  width: 100%;
+  height: 100%;
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  background-image: -moz-linear-gradient( 90deg, rgb(254,186,136) 37%, rgb(253,240,227) 100%);
+  background-image: -webkit-linear-gradient( 90deg, rgb(254,186,136) 37%, rgb(253,240,227) 100%);
+  background-image: -ms-linear-gradient( 90deg, rgb(254,186,136) 37%, rgb(253,240,227) 100%);
+
+
+
+
+
+  .load_container {
+    width: 750px;
+    height: 1180px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    flex-direction: column;
+
+    @keyframes load_box {
+    0% {
+      opacity: 1
+    }
+
+    100% {
+      opacity: 0
+    }
+  }
+
+  .load_box{
+    width: 40px !important;
+    height: 100px !important;
+  }
+
+  .load_box div {
+    // left: 94px;
+    // top: 48px;
+    position: absolute;
+    animation: load_box linear 1s infinite;
+    background: #df1317;
+    width: 12px;
+    height: 24px;
+    border-radius: 6px / 12px;
+    transform-origin: 6px 52px;
+  }
+
+  .load_box div:nth-child(1) {
+    transform: rotate(0deg);
+    animation-delay: -0.9166666666666666s;
+    background: #df1317;
+  }
+
+  .load_box div:nth-child(2) {
+    transform: rotate(30deg);
+    animation-delay: -0.8333333333333334s;
+    background: #df1317;
+  }
+
+  .load_box div:nth-child(3) {
+    transform: rotate(60deg);
+    animation-delay: -0.75s;
+    background: #df1317;
+  }
+
+  .load_box div:nth-child(4) {
+    transform: rotate(90deg);
+    animation-delay: -0.6666666666666666s;
+    background: #df1317;
+  }
+
+  .load_box div:nth-child(5) {
+    transform: rotate(120deg);
+    animation-delay: -0.5833333333333334s;
+    background: #df1317;
+  }
+
+  .load_box div:nth-child(6) {
+    transform: rotate(150deg);
+    animation-delay: -0.5s;
+    background: #df1317;
+  }
+
+  .load_box div:nth-child(7) {
+    transform: rotate(180deg);
+    animation-delay: -0.4166666666666667s;
+    background: #df1317;
+  }
+
+  .load_box div:nth-child(8) {
+    transform: rotate(210deg);
+    animation-delay: -0.3333333333333333s;
+    background: #df1317;
+  }
+
+  .load_box div:nth-child(9) {
+    transform: rotate(240deg);
+    animation-delay: -0.25s;
+    background: #df1317;
+  }
+
+  .load_box div:nth-child(10) {
+    transform: rotate(270deg);
+    animation-delay: -0.16666666666666666s;
+    background: #df1317;
+  }
+
+  .load_box div:nth-child(11) {
+    transform: rotate(300deg);
+    animation-delay: -0.08333333333333333s;
+    background: #df1317;
+  }
+
+  .load_box div:nth-child(12) {
+    transform: rotate(330deg);
+    animation-delay: 0s;
+    background: #df1317;
+  }
+
+  .loadingio-spinner-spinner-z60ni5wxaaj {
+    width: 200px;
+    height: 200px;
+    display: inline-block;
+    overflow: hidden;
+    background: #f1f2f3;
+  }
+
+  .load_box {
+    width: 100%;
+    height: 100%;
+    position: relative;
+    transform: translateZ(0) scale(1);
+    backface-visibility: hidden;
+    transform-origin: 0 0;
+    /* see note above */
+  }
+
+  .load_box div {
+    box-sizing: content-box;
+  }
+
+  }
+}
+</style>

src/components/MyPrize.vue

@@ -60,8 +60,9 @@ import gsap from "gsap";
 import axios from "axios";
 import service from "@/api/httpServe";
 import qs from "qs";
-import { Toast } from "vant";
+import { Toast, Dialog } from "vant";
 import { useStore } from "vuex";
+import wx from "@/utils/wx-jssdk.1.6.0.js";
 
 // 初始化
 const emit = defineEmits(["MyPrize"]); // 声明触发事件，对应父组件上面的方法
@@ -141,7 +142,21 @@ const getMoney = (val) => {
   // 红包类型未参与红包： 需先绑定牛卡号
   if (val.type == 1) {
     if (!store.state.userAccount.nkh) {
-      Toast("牛卡号为空，先绑定牛卡号");
+      // Toast("牛卡号为空，先绑定牛卡号");
+      Dialog.confirm({
+        title: "温馨提示",
+        message: "牛卡号为空，先绑定牛卡号",
+        confirmButtonText: "前往绑定",
+      })
+        .then(() => {
+          wx.miniProgram.navigateTo({
+            url: "/subs/bind/pages/login/login",
+          });
+        })
+        .catch(() => {
+          console.log(2);
+          // on cancel
+        });
     } else {
       getLuckyBag(val.id);
     }
@@ -164,8 +179,30 @@ const getLuckyBag = (id) => {
     )
     .then((res) => {
       console.log("领取红包结果", res);
-      gsap.to(".GotedPop", { duration: 1, autoAlpha: 1, delay: 0.2 });
+
-      gsap.to(".myPrizeCon", { duration: 1, autoAlpha: 0 });
+      let data = res.data;
+
+      if (data.code == 0) {
+        gsap.to(".GotedPop", { duration: 1, autoAlpha: 1, delay: 0.2 });
+        gsap.to(".myPrizeCon", { duration: 1, autoAlpha: 0 });
+        getMyPrizeRecored();
+      } else {
+        Toast(data.msg);
+      }
+    });
+};
+
+// 我的红包记录
+const getMyPrizeRecored = () => {
+  service
+    .post(process.env.VUE_APP_API + "/cms-activity/cms88/prize/list", {})
+    .then((res) => {
+      console.log("红包记录：", res.data);
+
+      store.commit({
+        type: "updatePrizeList",
+        prizeList: res.data.data,
+      });
     });
 };
 </script>

src/components/Rules.vue

@@ -1,82 +1,118 @@
 <template>
-    <div class="rulesCon" @touchmove.prevent>
+  <div class="zz" @touchmove.prevent></div>
-        <div class="rules_container">
+  <div class="rulesCon">
-            <div class="rule_t"></div>
+    <div class="rules_container">
-            <div class="rule_cls_btn" @click="hidePop"></div>
+      <div class="rule_t">
+        <div class="rule_text">
+            <img src="../assets/img/rule_text.png" alt="" srcset="">
         </div>
+      </div>
+      <div class="rule_cls_btn" @click="hidePop"></div>
     </div>
+  </div>
 </template>
 
 <script setup>
-import { onBeforeMount, onMounted, defineEmits, defineProps, reactive, ref, toRefs } from 'vue'
+import {
+  onBeforeMount,
+  onMounted,
+  defineEmits,
+  defineProps,
+  reactive,
+  ref,
+  toRefs,
+} from "vue";
 import gsap from "gsap";
-import axios from 'axios'
+import axios from "axios";
-import { Toast } from 'vant';
+import { Toast } from "vant";
 import { useStore } from "vuex";
 
 // 初始化
 const emit = defineEmits(["RulesPop"]); // 声明触发事件，对应父组件上面的方法
 const props = defineProps({ sendMessage: Object }); // 获取props
-const store = useStore()
+const store = useStore();
-
-
-
 
 // 页面挂载前
-onBeforeMount(() => { })
+onBeforeMount(() => {});
 
 // 页面挂载后
 onMounted(() => {
-    gsap.from('.rulesCon', { duration: 0.3, autoAlpha: 0 })
+  gsap.from(".rulesCon", { duration: 0.3, autoAlpha: 0 });
-    gsap.from('.rule_t', { duration: 0.3, scale: 0.2, autoAlpha: 0, delay: 0.1 })
+  gsap.from(".rule_t", { 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 })
+  gsap.from(".rule_cls_btn", {
-
+    duration: 0.3,
-})
+    y: 20,
-
+    autoAlpha: 0,
+    delay: 0.5,
+  });
+});
 
 const hidePop = () => {
-    emit('RulesPop')
+  emit("RulesPop");
-}
+};
-
-
-
-
 </script>
 
 <style lang="scss" scoped>
+.zz {
+  width: 100%;
+  height: 100%;
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
 .rulesCon {
-    width: 100%;
+  width: 100%;
-    height: 100%;
+  height: 100%;
-    position: fixed;
+  position: fixed;
-    top: 0;
+  top: 0;
-    left: 0;
+  left: 0;
-    right: 0;
+  right: 0;
-    bottom: 0;
+  bottom: 0;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  background-color: rgba(0, 0, 0, 0.7);
+
+  .rules_container {
+    width: 750px;
+    height: 1180px;
     display: flex;
     justify-content: center;
     align-items: center;
-    background-color: rgba(0, 0, 0, 0.7);
+    flex-direction: column;
 
-    .rules_container {
+    .rule_t {
-        width: 750px;
+      @include box(629px, 762px);
-        height: 1180px;
+      @include bg_pos("../assets/img/pop/rule_pop.png");
-        display: flex;
+      //   pointer-events: none;
-        justify-content: center;
+      
-        align-items: center;
+      position: relative;
-        flex-direction: column;
 
-        .rule_t {
+      .rule_text{
-            @include box(629px, 762px);
+        @include pos(563px, 630px, 30px, 95px);
-            @include bg_pos('../assets/img/pop/rule_pop.png');
+        overflow: hidden;
-            pointer-events: none;
+        overflow-y: scroll;
+
+        // @include bg_pos("../assets/img/rule_text.png");
+        img{
+            width: 100%;
+            height: 2874px;
         }
+      }
 
-        .rule_cls_btn {
-            @include box(72px, 72px);
-            @include bg_pos('../assets/img/pop/cls_btn.png');
-            margin-top: 50px;
-        }
     }
 
+    .rule_cls_btn {
+      @include box(72px, 72px);
+      @include bg_pos("../assets/img/pop/cls_btn.png");
+      margin-top: 50px;
+    }
+  }
 }
 </style>

src/components/ServiceList.vue

@@ -13,13 +13,21 @@
 
       <!-- 已经添加过：未领取了红包 -->
       <div class="has_service_box" v-if="isadd == 1 && !isgot">
-        <div class="money">{{moneyNum}}</div>
+        <div class="money">{{ moneyNum }}</div>
         <div class="get_luckybag" @click="getLuckyBag"></div>
       </div>
 
       <div class="service_cls_btn" @click="hidePop"></div>
     </div>
   </div>
+  <!-- 领奖页面 -->
+  <div class="getMoneyCon">
+    <div class="getMoney_container">
+      <div class="is_added">
+        <div class="go_index_btn" @click="hidePop"></div>
+      </div>
+    </div>
+  </div>
 </template>
 
 <script setup>
@@ -47,9 +55,11 @@ const store = useStore();
 const eqcode = ref(require("../assets/img/pop/eqcode.png"));
 
 const isadd = ref(0); // 是否已经添加
-const isgot = ref(false);
+const isgot = ref(false); //是否领取
-const redpacketId = ref(0);
+const isDraw = ref(false); //是否抽过奖
-const moneyNum = ref('1.99');
+const redpacketId = ref(0); //奖品Id
+const moneyNum = ref(""); //奖品金额
+const isBingo = ref(false); //是否中过奖
 
 // 页面挂载前
 onBeforeMount(() => {
@@ -67,7 +77,12 @@ onBeforeMount(() => {
     if (element.type == 2) {
       console.log("已经抽过》》》》》");
       isgot.value = true;
+      isDraw.value = true;
     }
+
+    // if(element.amount != 0){
+    //   isBingo.value = true
+    // }
   });
 });
 
@@ -93,9 +108,8 @@ onMounted(() => {
   if (isadd.value == 1) {
     if (isgot.value == false) {
       draw();
-    }else{
+    } else {
-        // 已经抽过奖的
+      // 已经抽过奖的
-        
     }
   }
 });
@@ -116,6 +130,8 @@ const draw = () => {
       console.log("添加企微-抽取红包结果：", res);
       redpacketId.value = res.data.data.id;
       moneyNum.value = res.data.data.amount;
+
+      getMyPrizeRecored();
     });
 };
 
@@ -130,6 +146,28 @@ const getLuckyBag = () => {
     )
     .then((res) => {
       console.log("领取红包结果", res);
+      let data = res.data;
+      if (data.code == 0) {
+        gsap.to(".serviceCon", { duration: 0.5, autoAlpha: 0 });
+        gsap.to(".getMoneyCon", { duration: 0.5, autoAlpha: 1 });
+        getMyPrizeRecored();
+      } else {
+        Toast(data.msg);
+      }
+    });
+};
+
+// 我的红包记录
+const getMyPrizeRecored = () => {
+  service
+    .post(process.env.VUE_APP_API + "/cms-activity/cms88/prize/list", {})
+    .then((res) => {
+      console.log("红包记录：", res.data);
+
+      store.commit({
+        type: "updatePrizeList",
+        prizeList: res.data.data,
+      });
     });
 };
 </script>
@@ -166,14 +204,13 @@ const getLuckyBag = () => {
       @include bg_pos("../assets/img/pop/service_pop_1.png");
       position: relative;
 
-      .money{
+      .money {
         @include pos(90px, 45px, 198px, 150px);
 
         text-align: center;
         line-height: 45px;
         color: #ca2f0a;
         font-weight: 700;
-
       }
 
       .get_luckybag {
@@ -209,4 +246,46 @@ const getLuckyBag = () => {
     }
   }
 }
+
+.getMoneyCon {
+  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);
+  visibility: hidden;
+
+  .getMoney_container {
+    width: 750px;
+    height: 1180px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    flex-direction: column;
+
+    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");
+      }
+    }
+  }
+}
 </style>

src/page/Home/Home.vue

@@ -1,9 +1,11 @@
 <template>
   <div class="homePage">
-    <!-- 加载页 -->
 
     <!-- 首页 -->
     <Index @indexPage="indexPage" v-if="showIndex" />
+
+    <!-- 加载页 -->
+    <Loading v-if="!showIndex" />
   </div>
 </template>
 
@@ -28,6 +30,7 @@ import service from "@/api/httpServe";
 import qs from "qs";
 import h5plugin from "@/utils/plugin";
 import Index from "@/components/Index";
+import Loading from "@/components/Loading";
 import imgList from "@/data/imgList";
 
 // 初始化
@@ -182,7 +185,7 @@ const apiAll = ()=>{
 
 // 页面未挂载
 onBeforeMount(() => {
-  // apiAll()
+  apiAll()
 
   console.log("link：", window.location.href);
   console.log("用户活动信息：", store.state.userAccount);