完成红包领取逻辑

src/components/Draw.vue

@@ -4,7 +4,10 @@
     <div class="draw_container" v-if="!isgetMoney">
       <!-- 正常中奖 -->
       <div class="has_prize" v-if="drawStatus">
-        <div class="money_num"><span>8.88</span>元</div>
+        <div class="money_num">
+          <span>{{ amount }}</span
+          >元
+        </div>
         <div class="get_btn" @click="getMoney"></div>
       </div>
 
@@ -21,9 +24,7 @@
         <div class="go_index_btn"></div>
       </div>
 
-
       <div class="cls_btn" @click="hide"></div>
-
     </div>
   </div>
 </template>
@@ -42,23 +43,30 @@ import gsap from "gsap";
 import axios from "axios";
 import service from "@/api/httpServe";
 import qs from "qs";
-
-
-import { Toast } from "vant";
+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({ sendMessage: Object }); // 获取props
+const props = defineProps({ prizeMsg: Object }); // 获取props
 const store = useStore();
 
-
-const drawStatus = ref(true)
-const isgetMoney = ref(false)
-
+const drawStatus = ref(true);
+const isgetMoney = ref(false);
+const amount = ref(0);
+const prizeId = ref(1);
 
 // 页面挂载前
-onBeforeMount(() => {});
+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(() => {
@@ -76,27 +84,14 @@ const hide = () => {
   emit("drawCon");
 };
 
-
-
-
 // 立即领取红包
-const getMoney = ()=>{
-redpacket()
-
-    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,})
-
-    }})
-
-
-
-}
+const getMoney = () => {
+  redpacket(prizeId.value);
+};
 
 // 领取接口
 const redpacket = (prizeId) => {
-  let redpacketId = 84;
+  let redpacketId = prizeId;
   service
     .post(
       process.env.VUE_APP_API +
@@ -106,10 +101,38 @@ const redpacket = (prizeId) => {
     )
     .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>
@@ -157,14 +180,13 @@ const redpacket = (prizeId) => {
       }
     }
 
-    .no_prize{
+    .no_prize {
       @include box(573px, 362px);
       @include bg_pos("../assets/img/pop/no_prize_pop.png");
     }
-
   }
 
-  .add_container{
+  .add_container {
     width: 750px;
     height: 1180px;
     display: flex;
@@ -172,21 +194,18 @@ const redpacket = (prizeId) => {
     align-items: center;
     flex-direction: column;
 
-    .is_added{
+    .is_added {
       @include box(530px, 594px);
       @include bg_pos("../assets/img/pop/got_luckyBag_pop.png");
       position: relative;
 
-        .go_index_btn{
+      .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");

src/components/Index.vue

@@ -8,9 +8,11 @@
       <div class="luckybag_left"></div>
       <div class="luckybag_right"></div>
       <div class="icon_left_1"></div>
-      <div class="lucky_bag"></div>
-      <div class="lucky_bag_2">
-        <div class="prize_num">{{ prizeResult }}<span>元</span></div>
+      <div class="lucky_bag" v-if="!gameOver"></div>
+      <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>
       <div class="notice">
         <span class="icon"
@@ -25,7 +27,7 @@
       <div class="cloud_right_2"></div>
       <!-- 大转盘 -->
       <div class="zhuanpan"></div>
-      <LuckyWheel v-if="true" ref="LuckyWheelCon" />
+      <LuckyWheel v-if="true" ref="LuckyWheelCon" @luckyWheel="luckyWheelFn" />
 
       <div class="icon_right_2"></div>
       <div class="icon_right_3"></div>
@@ -80,7 +82,7 @@
     <!-- 添加专属服务人员企微弹窗 -->
     <ServiceList v-if="showServicePop" @ServicePop="hideServicePop" />
     <!-- 抽奖结果弹窗 -->
-    <Draw v-if="showDrawCon" @drawCon="drawConFn" />
+    <Draw v-if="showDrawCon" @drawCon="drawConFn" :prizeMsg="prizeMsg" />
   </div>
 </template>
 
@@ -126,10 +128,18 @@ const showRulesPop = ref(false);
 const showMyPrize = ref(false);
 const showServicePop = 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 prizeMsg = reactive({
+  amount: 0,
+  id: 1,
+})
+
 
 // 活动列表
 const activityList = reactive([
@@ -179,7 +189,8 @@ onBeforeMount(() => {
   arr.forEach(element => {
     if(element.type == 1){
     isDraw.value = true;
-    console.log("222222222222222222222222222222222");
+    gameOver.value = true
+    drawAmount.value = element.amount
     }
   });
 
@@ -250,10 +261,20 @@ const drawBtn = () => {
     // LuckyWheelCon.value.showDrawAni(3, true)
 
     getluckyBag(1); //大转盘抽奖：传参数1
-    isDraw.value = true;
+    
+  }else{
+    Toast('您已经抽过奖')
   }
 };
 
+// 大转盘结束后的处理事件
+const luckyWheelFn = ()=>{
+  console.log("game over");
+  showDrawCon.value = true;
+  gameOver.value = true
+}
+
+
 // 活动点击
 const activityBtn = (item) => {
   console.log(item.id);
@@ -265,8 +286,6 @@ const activityBtn = (item) => {
   if (item.id == 2) {
     console.log("新客专享页面");
     // let url = "/subs/financial/pages/index/index";
-    // console.log(wx);
-
     wx.miniProgram.navigateTo({
       url: "/subs/financial/pages/index/index",
     });
@@ -361,7 +380,12 @@ const getMyPrizeRecored = () => {
   service
     .post(process.env.VUE_APP_API + "/cms-activity/cms88/prize/list", {})
     .then((res) => {
-      console.log("红包记录：", res);
+      console.log("红包记录：", res.data);
+
+      store.commit({
+        type: "updatePrizeList",
+        prizeList: res.data.data,
+      });
     });
 };
 
@@ -391,17 +415,16 @@ const getluckyBag = (id) => {
     })
     .then((res) => {
       console.log("抽取红包结果：", res);
-
-      let prizeNum = res.data.data.amount;
-
-      // 判断抽奖类型drawType = 1时转动大转盘
-      if (drawType.value == 1) {
-        // 判断抽奖结果状态
         if (res.data.code == 0) {
+
+            isDraw.value = true;
+            let prizeNum = res.data.data.amount;
+            drawAmount.value = res.data.data.amount
+            prizeMsg.amount = res.data.data.amount
+            prizeMsg.id = res.data.data.id
           // 大转盘正常抽奖
           if (prizeNum == 0) {
             // 谢谢参与
-            console.log("抽中1：");
             LuckyWheelCon.value.showDrawAni(5, true);
           }
           if (prizeNum == 1.08) {
@@ -420,15 +443,13 @@ const getluckyBag = (id) => {
             // 6.66元
             LuckyWheelCon.value.showDrawAni(4, true);
           }
+
+          getMyPrizeRecored() // 更新我的奖品列表
+
         } else {
-          if (res.data.data == 0) {
-            // 谢谢参与
-            LuckyWheelCon.value.showDrawAni(5, true);
-          }
-        }
-      } else {
-        // 加企业微信奖
+          Toast(res.data.msg)
         }
+
     });
 };
 
@@ -631,7 +652,7 @@ const deleteData = (type) => {
       @include pos(308px, 355px, 227px, 356px);
       @include bg_pos("../assets/img/luckybag.png");
       pointer-events: none;
-      visibility: hidden;
+      // visibility: hidden;
     }
 
     .lucky_bag_2 {
@@ -641,6 +662,18 @@ const deleteData = (type) => {
 
       // display: flex;
 
+      .no_prize_text{
+        @include pos(221px, 59px, 55px, 55px);
+        @include bg_pos("../assets/img/no_prize_text.png");
+        pointer-events: none;
+      }
+
+      .prize_text{
+        @include pos(172px, 23px, 80px, 37px);
+        @include bg_pos("../assets/img/prize_text.png");
+        pointer-events: none;
+      }
+
       .prize_num {
         @include pos(330px, 50px, 0px, 79px);
         font-weight: 700;

src/components/LuckyWheel.vue

@@ -37,7 +37,7 @@ import {
   reactive,
   ref,
   toRefs,
-	defineExpose
+  defineExpose,
 } from "vue";
 import gsap from "gsap";
 import axios from "axios";
@@ -51,7 +51,7 @@ import { MotionPathPlugin } from "gsap/MotionPathPlugin.js";
 gsap.registerPlugin(MotionPathPlugin);
 
 // 初始化
-const emit = defineEmits(["ServicePop"]); // 声明触发事件，对应父组件上面的方法
+const emit = defineEmits(["luckyWheel"]); // 声明触发事件，对应父组件上面的方法
 const props = defineProps({ sendMessage: Object }); // 获取props
 const store = useStore();
 const p1 = ref(null);
@@ -76,6 +76,16 @@ const p19 = ref(null);
 const aniGroup = ref([]);
 
 const eqcode = ref(require("../assets/img/pop/eqcode.png"));
+const luckyWheelStatus = ref(false);
+
+// 大转盘结束回调
+const isStop = () => {
+  if (!luckyWheelStatus.value) {
+    luckyWheelStatus.value = true;
+    console.log("大转盘结束");
+	emit('luckyWheel')  //告诉主页弹出相应结果弹窗
+  }
+};
 
 // 页面挂载前
 onBeforeMount(() => {});
@@ -138,6 +148,16 @@ const showDrawAni = (bingo, repeat) => {
         onUpdate: () => {
           // if (i === 1) console.log(ani.progress());
         },
+        onStart: () => {
+          if (i == pArr.length - 1) {
+            setTimeout(() => {
+            //   console.log("停止2");
+			  isStop()
+            }, 5000);
+          }
+        },
+
+        onComplete: () => {},
       },
       "same"
     );
@@ -165,9 +185,8 @@ const btn = () => {
 
 // 暴露出方法给父组件调用
 defineExpose({
-	showDrawAni
-})
-
+  showDrawAni,
+});
 </script>
 
 <style lang="scss" scoped>

src/components/MyPrize.vue

@@ -93,6 +93,7 @@ onBeforeMount(() => {
       if (element.type == 1) {
         prizeList.push({
           id: element.id,
+          type: element.type,
           prizeNum: element.amount,
           isGeted: element.receiveStatus,
           spe: "财富88，与“礼”共见证",
@@ -102,6 +103,7 @@ onBeforeMount(() => {
       if (element.type == 2) {
         prizeList.push({
           id: element.id,
+          type: element.type,
           prizeNum: element.amount,
           isGeted: element.receiveStatus,
           spe: "添加专属服务人员企微",
@@ -128,15 +130,28 @@ const hide = () => {
 };
 
 const hidePop = () => {
-    gsap.to('.GotedPop',{duration:0.5,autoAlpha:0})
-    gsap.to('.myPrizeCon',{duration:0.5,autoAlpha:1,delay:0.2})
+  gsap.to(".GotedPop", { duration: 0.5, autoAlpha: 0 });
+  gsap.to(".myPrizeCon", { duration: 0.5, autoAlpha: 1, delay: 0.2 });
 };
 
 // 领取按钮
 const getMoney = (val) => {
+  console.log("val:", val);
+
+  // 红包类型未参与红包： 需先绑定牛卡号
+  if (val.type == 1) {
+    if (!store.state.userAccount.nkh) {
+      Toast("牛卡号为空，先绑定牛卡号");
+    } else {
+      getLuckyBag(val.id);
+    }
+  }
+
+  if (val.type == 2) {
     if (val.isGeted == 0) {
       console.log("未领取", val);
-    getLuckyBag(val.id)
+      getLuckyBag(val.id);
+    }
   }
 };
 
@@ -144,19 +159,15 @@ const getMoney = (val) => {
 const getLuckyBag = (id) => {
   service
     .post(
-      process.env.VUE_APP_API +
-        "/cms-activity/cms88/redpacket/receive/" + id,
+      process.env.VUE_APP_API + "/cms-activity/cms88/redpacket/receive/" + id,
       {}
     )
     .then((res) => {
       console.log("领取红包结果", res);
-      gsap.to('.GotedPop',{duration:1,autoAlpha:1,delay:0.2})
-      gsap.to('.myPrizeCon',{duration:1,autoAlpha:0})
+      gsap.to(".GotedPop", { duration: 1, autoAlpha: 1, delay: 0.2 });
+      gsap.to(".myPrizeCon", { duration: 1, autoAlpha: 0 });
     });
 };
-
-
-
 </script>
 
 <style lang="scss" scoped>
@@ -312,19 +323,17 @@ const getLuckyBag = (id) => {
     align-items: center;
     flex-direction: column;
 
-    .goted_box{
-        
+    .goted_box {
       @include box(530px, 594px);
       @include bg_pos("../assets/img/pop/got_luckyBag_pop.png");
       position: relative;
 
-      .to_index_btn{
+      .to_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");

src/page/Home/Home.vue

@@ -146,7 +146,7 @@ onBeforeMount(() => {
     getActivityNum(),
     getIsAddService(),
   ]).then((result) => {
-    console.log("接口都请求完成");
+    console.log("接口都请求完成",result);
     // 预加载图片资源
     pageImgsArrLoad(imgList).then(() => {
       console.log("load done");
@@ -156,11 +156,6 @@ onBeforeMount(() => {
   });
 
   console.log("link：", window.location.href);
-
-  // 从URL中获取token等数据
-  // store.commit({ type: "updateToken", token: h5plugin.getQueryString('token') });
-  // store.commit({ type: "updateCardId", cardId: h5plugin.getQueryString('cardId') });
-  // store.commit({ type: "updateNkh", nkh: h5plugin.getQueryString('nkh') });
   console.log("用户活动信息：", store.state.userAccount);
 
   // 微信环境授权