完成我的奖品页逻辑

src/components/Index.vue

@@ -173,9 +173,16 @@ const activityList = reactive([
 
 // 页面挂载前
 onBeforeMount(() => {
-  if (store.state.userAccount.isHasPrize.length != 0) {
+  
+  // 判断参与活动红包是否领取
+  let arr = store.state.userAccount.prizeList
+  arr.forEach(element => {
+    if(element.type == 1){
     isDraw.value = true;
+    console.log("222222222222222222222222222222222");
     }
+  });
+
 });
 
 // 入场动画
@@ -267,11 +274,8 @@ const activityBtn = (item) => {
 
   if (item.id == 3) {
     console.log("生日专享页面");
-    wx.miniProgram.navigateTo({
+    window.location.href =
-      url: "https://appstatic.cmschina.com/activity/cmszhyxpt/bees/index.html?id=INT_SMKTC_8rrkjpiS",
+      "https://appstatic.cmschina.com/activity/cmszhyxpt/bees/index.html?id=INT_SMKTC_8rrkjpiS";
-    });
-    // window.location.href =
-    //   "https://appstatic.cmschina.com/activity/cmszhyxpt/bees/index.html?id=INT_SMKTC_8rrkjpiS";
   }
 
   if (item.id == 4) {

src/components/MyPrize.vue

@@ -9,12 +9,7 @@
             <div class="prize_title"></div>
           </div>
           <div class="prize_middle">
-            <div
+            <div class="prize_item" v-for="(item, key) in prizeList" :key="key">
-              class="prize_item"
-              v-for="(item, key) in prizeList"
-              :key="key"
-              v-show="item.isHas"
-            >
               <div class="prize_li">
                 <div class="prize_num">{{ item.prizeNum }}元红包</div>
                 <div class="prize_spe">{{ item.spe }}</div>
@@ -22,10 +17,11 @@
               <div class="buttom">
                 <img
                   :src="
-                    item.isGeted
+                    item.isGeted == 0
                       ? require('../assets/img/pop/view_btn.png')
                       : require('../assets/img/pop/got_btn.png')
                   "
+                  @click="getMoney(item)"
                 />
               </div>
             </div>
@@ -39,6 +35,15 @@
       <div class="cls_btn" @click="hide"></div>
     </div>
   </div>
+  <!-- 领取成功反馈弹窗 -->
+  <div class="GotedPop" @touchmove.prevent>
+    <div class="goted_container">
+      <div class="goted_box">
+        <div class="to_index_btn" @click="hide"></div>
+      </div>
+      <div class="cls_btn" @click="hidePop"></div>
+    </div>
+  </div>
 </template>
 
 <script setup>
@@ -53,6 +58,8 @@ import {
 } from "vue";
 import gsap from "gsap";
 import axios from "axios";
+import service from "@/api/httpServe";
+import qs from "qs";
 import { Toast } from "vant";
 import { useStore } from "vuex";
 
@@ -79,7 +86,30 @@ const prizeList = reactive([
 ]);
 
 // 页面挂载前
-onBeforeMount(() => {});
+onBeforeMount(() => {
+  let arr = store.state.userAccount.prizeList;
+  arr.forEach((element) => {
+    if (element.receiveStatus != -1) {
+      if (element.type == 1) {
+        prizeList.push({
+          id: element.id,
+          prizeNum: element.amount,
+          isGeted: element.receiveStatus,
+          spe: "财富88，与“礼”共见证",
+        });
+      }
+
+      if (element.type == 2) {
+        prizeList.push({
+          id: element.id,
+          prizeNum: element.amount,
+          isGeted: element.receiveStatus,
+          spe: "添加专属服务人员企微",
+        });
+      }
+    }
+  });
+});
 
 // 页面挂载后
 onMounted(() => {
@@ -96,6 +126,37 @@ onMounted(() => {
 const hide = () => {
   emit("MyPrize");
 };
+
+const hidePop = () => {
+    gsap.to('.GotedPop',{duration:0.5,autoAlpha:0})
+    gsap.to('.myPrizeCon',{duration:0.5,autoAlpha:1,delay:0.2})
+};
+
+// 领取按钮
+const getMoney = (val) => {
+  if (val.isGeted == 0) {
+    console.log("未领取", val);
+    getLuckyBag(val.id)
+  }
+};
+
+// 领取接口
+const getLuckyBag = (id) => {
+  service
+    .post(
+      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})
+    });
+};
+
+
+
 </script>
 
 <style lang="scss" scoped>
@@ -221,6 +282,49 @@ const hide = () => {
       @include bg_pos("../assets/img/pop/no_recored_pop.png");
     }
 
+    .cls_btn {
+      @include box(72px, 72px);
+      @include bg_pos("../assets/img/pop/cls_btn.png");
+      margin-top: 50px;
+    }
+  }
+}
+
+.GotedPop {
+  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;
+
+  .goted_container {
+    width: 750px;
+    height: 1180px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    flex-direction: column;
+
+    .goted_box{
+        
+        @include box(530px, 594px);
+      @include bg_pos("../assets/img/pop/got_luckyBag_pop.png");
+      position: relative;
+
+      .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/components/ServiceList.vue

@@ -1,48 +1,137 @@
 <template>
   <div class="serviceCon" @touchmove.prevent>
     <div class="service_container">
-            <div class="service_box">
+      <!-- 未添加 -->
+      <div class="service_box" v-if="isadd == 0">
         <div class="eqcode_box">
-                    <img :src="store.state.userAccount.eqcodeImg" alt="">
+          <img :src="store.state.userAccount.eqcodeImg" alt="" />
         </div>
       </div>
+
+      <!-- 已经添加过：并且领取了红包 -->
+      <div class="is_got_box" v-if="isadd == 1 && isgot"></div>
+
+      <!-- 已经添加过：未领取了红包 -->
+      <div class="has_service_box" v-if="isadd == 1 && !isgot">
+        <div class="money">{{moneyNum}}</div>
+        <div class="get_luckybag" @click="getLuckyBag"></div>
+      </div>
+
       <div class="service_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";
+import service from "@/api/httpServe";
+import qs from "qs";
 
 // 初始化
 const emit = defineEmits(["ServicePop"]); // 声明触发事件，对应父组件上面的方法
 const props = defineProps({ sendMessage: Object }); // 获取props
-const store = useStore()
+const store = useStore();
 
+const eqcode = ref(require("../assets/img/pop/eqcode.png"));
 
-const eqcode = ref(require('../assets/img/pop/eqcode.png'))
+const isadd = ref(0); // 是否已经添加
-
+const isgot = ref(false);
+const redpacketId = ref(0);
+const moneyNum = ref('1.99');
 
 // 页面挂载前
-onBeforeMount(() => { })
+onBeforeMount(() => {
+  if (store.state.userAccount.isAddCustomer == 1) {
+    isadd.value = 1;
+  }
+
+  if (store.state.userAccount.isAddCustomer == 0) {
+    isadd.value = 0;
+  }
+
+  let arr = store.state.userAccount.prizeList;
+
+  arr.forEach((element) => {
+    if (element.type == 2) {
+      console.log("已经抽过》》》》》");
+      isgot.value = true;
+    }
+  });
+});
 
 // 页面挂载后
 onMounted(() => {
-    gsap.from('.serviceCon', { duration: 0.3, autoAlpha: 0 })
+  gsap.from(".serviceCon", { duration: 0.3, autoAlpha: 0 });
-    gsap.from('.service_box', { duration: 0.3, scale: 0.2, autoAlpha: 0, delay: 0.1 })
+  gsap.from(".service_box,.has_service_box,.is_got_box", {
-    gsap.from('.service_cls_btn', { duration: 0.3, y: 20, autoAlpha: 0, delay: 0.5 })
+    duration: 0.3,
-})
+    scale: 0.2,
+    autoAlpha: 0,
+    delay: 0.1,
+  });
+  gsap.from(".service_cls_btn", {
+    duration: 0.3,
+    y: 20,
+    autoAlpha: 0,
+    delay: 0.5,
+  });
 
+  console.log("添加企微状态：", isadd.value);
+
+  // 如果已经添加但是没有抽奖的话，调抽奖接口
+  if (isadd.value == 1) {
+    if (isgot.value == false) {
+      draw();
+    }else{
+        // 已经抽过奖的
+        
+    }
+  }
+});
 
 const hidePop = () => {
-    emit('ServicePop')
+  emit("ServicePop");
-}
+};
 
+// 抽奖接口
+const draw = () => {
+  let type = 2;
+  service
+    .post(process.env.VUE_APP_API + "/cms-activity/cms88/redpacket/draw", {
+      xglOpenId: store.state.userAccount.xglOpenId,
+      redpacketType: type,
+    })
+    .then((res) => {
+      console.log("添加企微-抽取红包结果：", res);
+      redpacketId.value = res.data.data.id;
+      moneyNum.value = res.data.data.amount;
+    });
+};
 
+// 领取接口
+const getLuckyBag = () => {
+  service
+    .post(
+      process.env.VUE_APP_API +
+        "/cms-activity/cms88/redpacket/receive/" +
+        redpacketId.value,
+      {}
+    )
+    .then((res) => {
+      console.log("领取红包结果", res);
+    });
+};
 </script>
 
 <style lang="scss" scoped>
@@ -59,7 +148,6 @@ const hidePop = () => {
   align-items: center;
   background-color: rgba(0, 0, 0, 0.7);
 
-
   .service_container {
     width: 750px;
     height: 1180px;
@@ -68,13 +156,37 @@ const hidePop = () => {
     align-items: center;
     flex-direction: column;
 
-        .service_box {
+    .is_got_box {
-            @include box(573px, 688px);
+      @include box(530px, 594px);
-            @include bg_pos('../assets/img/pop/service_box.png');
+      @include bg_pos("../assets/img/pop/has_service_pop.png");
-            // pointer-events: none;
+    }
+
+    .has_service_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");
+      }
+    }
+
+    .service_box {
+      @include box(573px, 688px);
+      @include bg_pos("../assets/img/pop/service_box.png");
+      // pointer-events: none;
+      position: relative;
 
       .eqcode_box {
         width: 210px;
@@ -85,17 +197,16 @@ const hidePop = () => {
 
         img {
           width: 100%;
-                    height: 100%
+          height: 100%;
         }
       }
     }
 
     .service_cls_btn {
       @include box(72px, 72px);
-            @include bg_pos('../assets/img/pop/cls_btn.png');
+      @include bg_pos("../assets/img/pop/cls_btn.png");
       margin-top: 50px;
     }
   }
-
 }
 </style>

src/page/Home/Home.vue

@@ -8,32 +8,38 @@
 </template>
 
 <script setup>
-import { onBeforeMount, onMounted, defineEmits, defineProps, reactive, ref, toRefs, getCurrentInstance, computed } from 'vue'
+import {
+  onBeforeMount,
+  onMounted,
+  defineEmits,
+  defineProps,
+  reactive,
+  ref,
+  toRefs,
+  getCurrentInstance,
+  computed,
+} from "vue";
 import gsap from "gsap";
-import axios from 'axios'
+import axios from "axios";
-import { Toast, Dialog } from 'vant';
+import { Toast, Dialog } from "vant";
 import { useStore } from "vuex";
 // import { get_authorize, get_jssdk } from '@/api/authorize-api'
-import service from "@/api/httpServe"
+import service from "@/api/httpServe";
-import qs from 'qs'
+import qs from "qs";
-import h5plugin from '@/utils/plugin'
+import h5plugin from "@/utils/plugin";
-import Index from "@/components/Index"
+import Index from "@/components/Index";
-import imgList from '@/data/imgList'
+import imgList from "@/data/imgList";
-
 
 // 初始化
 const emit = defineEmits(["indexPage"]); // 声明触发事件，对应父组件上面的方法
 const props = defineProps({ sendMessage: Object }); // 获取props
-const store = useStore()  //初始化vuex
+const store = useStore(); //初始化vuex
 const { proxy } = getCurrentInstance(); //初始化全局方法：plugin工具箱
 
-
-
 // 变量定义
-const authData = ref('')
+const authData = ref("");
-const authCode = ref('')
+const authCode = ref("");
-const showIndex = ref(false)
+const showIndex = ref(false);
-
 
 // 活动参与人数
 const getActivityNum = () => {
@@ -48,7 +54,6 @@ const getActivityNum = () => {
     });
 };
 
-
 // 是否在活动期间生日
 const getBrithday = () => {
   service
@@ -57,42 +62,55 @@ const getBrithday = () => {
       {}
     )
     .then((res) => {
-			console.log("生日是否处于当月：",res.data.data);
+      console.log("生日是否处于当月：", res.data.data);
-      store.state.userAccount.isBirthMon = 1
+      // store.state.userAccount.isBirthMon = 1
-      // store.commit({
+      store.commit({
-			// 	type: "updateBirthMoon",
+        type: "updateBirthMoon",
-			// 	// isBirthMon: res.data.data,
+        isBirthMon: res.data.data,
         // isBirthMon: 1,
-			// });
+      });
-
     });
 };
 
 // 查询是否添加了企微： isInActivityDate 0否 1是
-const getIsAddService = ()=>{
+const getIsAddService = () => {
-  let isInActivityDate = 1
+  let isInActivityDate = 1;
   service
-    .post(process.env.VUE_APP_API + "/cms-activity/cms88/qywx/isadded/"+ isInActivityDate,{})
+    .post(
+      process.env.VUE_APP_API +
+        "/cms-activity/cms88/qywx/isadded/" +
+        isInActivityDate,
+      {}
+    )
     .then((res) => {
-      console.log("是否添加了企微",res.data);
+      console.log("是否添加了企微", res.data);
+      // store.state.userAccount.isBirthMon = res.data.data
+      store.commit({
+        type: "updateIsAddCustomer",
+        // isBirthMon:res.data.data,
+        isAddCustomer: res.data.data,
       });
-}
+    });
+};
 
-const getMyPrizeRecored = ()=>{
+// 红包记录
+const getMyPrizeRecored = () => {
   service
-    .post(process.env.VUE_APP_API + "/cms-activity/cms88/prize/list",{})
+    .post(process.env.VUE_APP_API + "/cms-activity/cms88/prize/list", {})
     .then((res) => {
-      console.log("红包记录：",res.data);
+      console.log("红包记录：", res.data);
-    });
-}
 
+      store.commit({
+        type: "updatePrizeList",
+        prizeList: res.data.data,
+      });
+    });
+};
 
 // 查询员工企业-微信二维码
 const gerCardId = (carid) => {
   service
-		.get(
+    .get(process.env.VUE_APP_API + "/cms-activity/cms88/card/qrcode/" + carid)
-			process.env.VUE_APP_API + "/cms-activity/cms88/card/qrcode/" + carid
-		)
     .then((res) => {
       console.log("企微二维码：", res.data.data);
       store.commit({
@@ -111,7 +129,6 @@ const getInfo = () => {
     });
 };
 
-
 // 页面未挂载
 onBeforeMount(() => {
   // gerCardId(store.state.userAccount.cardId);
@@ -121,28 +138,24 @@ onBeforeMount(() => {
   // getActivityNum();
   // getIsAddService();
   // 页面挂载前请求接口
-  let taskAll = Promise.all([
+  Promise.all([
     gerCardId(store.state.userAccount.cardId),
     getInfo(),
     getMyPrizeRecored(),
     getBrithday(),
     getActivityNum(),
     getIsAddService(),
-  ]).then(result =>{
+  ]).then((result) => {
     console.log("接口都请求完成");
-  })
-
     // 预加载图片资源
-  pageImgsArrLoad(imgList)
+    pageImgsArrLoad(imgList).then(() => {
-  .then(() => {
       console.log("load done");
-    showIndex.value =true
+      showIndex.value = true;
-    gsap.from('.homePage',{duration:0.1,autoAlpha:0,y:100})
+      gsap.from(".homePage", { duration: 0.1, autoAlpha: 0, y: 100 });
-  })
+    });
-
+  });
-
-  console.log("link：",window.location.href);
 
+  console.log("link：", window.location.href);
 
   // 从URL中获取token等数据
   // store.commit({ type: "updateToken", token: h5plugin.getQueryString('token') });
@@ -152,83 +165,76 @@ onBeforeMount(() => {
 
   // 微信环境授权
   if (h5plugin.isWX()) {
-    console.log('code:', h5plugin.getQueryString('code'));
+    console.log("code:", h5plugin.getQueryString("code"));
 
-    if (h5plugin.getQueryString('code')) {
+    if (h5plugin.getQueryString("code")) {
       // 存在code的话去换取openid
-      authCode.value = h5plugin.getQueryString('code')
+      authCode.value = h5plugin.getQueryString("code");
-      getOpenId(authCode.value)
+      getOpenId(authCode.value);
     } else {
-      getCode()
+      getCode();
     }
   }
-
 });
 
-
 // 页面挂载
-onMounted(() => {
+onMounted(() => {});
-
- });
-
 
 // 来自首页的事件
 const indexPage = (actions) => {
   console.log("来自index组件：", actions);
-}
+};
-
 
 // 授权获取code
 const getCode = () => {
   let redirect_uri = window.location.href;
   // service.post(process.env.VUE_APP_API + '/cms-activity/cms88/zsApi/xfhdAuthorize?redirect_uri='+redirect_uri,
-  service.post(process.env.VUE_APP_API + '/cms-activity/cms88/zsApi/xfhdAuthorize', 
+  service
+    .post(
+      process.env.VUE_APP_API + "/cms-activity/cms88/zsApi/xfhdAuthorize",
       // qs.stringify({
       //   redirect_uri: redirect_uri
       // })
 
       {
-    redirect_uri: redirect_uri
+        redirect_uri: redirect_uri,
       }
-
+    )
-  ).then((res) => {
+    .then((res) => {
-    let code = res.data.data
+      let code = res.data.data;
-    console.log("get code结果3",res);
+      console.log("get code结果3", res);
-    authCode.value = res.data.data
+      authCode.value = res.data.data;
-    window.location.href = res.data.data
+      window.location.href = res.data.data;
-  })
+    });
-}
+};
 
 // 授权获取openid
 const getOpenId = (code) => {
-
+  service
-  service.post(process.env.VUE_APP_API + '/cms-activity/cms88/zsApi/oauthInfo', 
+    .post(
+      process.env.VUE_APP_API + "/cms-activity/cms88/zsApi/oauthInfo",
       // qs.stringify({
       //   code: code
       // })
       {
-    code: code
+        code: code,
       }
-  ).then((res) => {
+    )
-
+    .then((res) => {
       if (res.data.code == 0) {
         console.log("后端返回的openid：", res.data);
         // 更新openid
-      store.commit({ type: 'updateXGLOpenid', openid: res.data.data })
+        store.commit({ type: "updateXGLOpenid", openid: res.data.data });
         // store.commit({ type: "updateToken", token: h5plugin.getQueryString('token') });
         // store.commit({ type: "updateCardId", cardId: h5plugin.getQueryString('cardId') });
         // store.commit({ type: "updateNkh", cardId: h5plugin.getQueryString('nkh') });
         // console.log("用户活动信息：", store.state.userAccount);
-
       }
-
+    });
-  })
+};
-}
-
-
 
 // 资源预加载器
-const imgPreloader = url => {
+const imgPreloader = (url) => {
   return new Promise((resolve, reject) => {
     let image = new Image();
     image.src = url;
@@ -242,14 +248,13 @@ const imgPreloader = url => {
 };
 
 // 加载进度监控
-const pageImgsArrLoad = imgs => {
+const pageImgsArrLoad = (imgs) => {
   let promiseArr = [];
-  imgs.forEach(element => {
+  imgs.forEach((element) => {
     promiseArr.push("img", imgPreloader(element));
   });
   return Promise.all(promiseArr);
 };
-
 </script>
 
 <style lang="scss" scoped>
@@ -260,10 +265,8 @@ const pageImgsArrLoad = imgs => {
   -moz-user-select: none;
   -ms-user-select: none;
   user-select: none;
-
 }
 
-
 div {
   color: #fff;
 }

src/store/index.js

@@ -13,12 +13,13 @@ export default createStore({
             nkh: h5plugin.getQueryString('nkh'),                 //牛卡号
             isDraw: false,              //是否抽过奖
             isHasAccount: false,        //是否存在牛卡号
-            isAddCustomer: false,       //是否添加过服务人员
+            isAddCustomer: 0,       //是否添加过服务人员
             isHasPrize: [],             //是否存在奖品
             participantNum: 0,     //活动参与人数
             prizeResult: 0,        //中奖金额
             eqcodeImg: '',              //二维码
             isBirthMon: 1,     //生日是否处于当月
+            prizeList: []       //奖品列表
         },
 
     },
@@ -29,7 +30,7 @@ export default createStore({
     mutations: {
         // 更新信广龙openid
         updateXGLOpenid(state, val) {
-            state.userAccount.xglOpenid = val.openid
+            state.userAccount.xglOpenId = val.openid
         },
 
         // 更新token
@@ -57,6 +58,15 @@ export default createStore({
             state.userAccount.isBirthMon = val.isBirthMon
         },
 
+        updateIsAddCustomer(state,val){
+            state.userAccount.isAddCustomer = val.isAddCustomer
+        },
+
+        // 更新奖品
+        updatePrizeList(state,val){
+            state.userAccount.prizeList = val.prizeList
+        }
+        
     },
     // 改变方法：异步
     actions: {},