授权测试

src/api/httpServe.js

@@ -29,7 +29,7 @@ const service = axios.create({
 // 添加请求拦截器
 service.interceptors.request.use(function (config) {
     // 在发送请求之前做些什么
-    console.log("开始请求");
+    // console.log("开始请求");
     config
     return config;
 }, function (error) {

src/components/Draw.vue

@@ -0,0 +1,176 @@
+<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>8.88</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 { Toast } from "vant";
+import { useStore } from "vuex";
+
+// 初始化
+const emit = defineEmits(["drawCon"]); // 声明触发事件，对应父组件上面的方法
+const props = defineProps({ sendMessage: Object }); // 获取props
+const store = useStore();
+
+
+const drawStatus = ref(true)
+const isgetMoney = ref(false)
+
+
+// 页面挂载前
+onBeforeMount(() => {});
+
+// 页面挂载后
+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 = ()=>{
+
+
+    gsap.to('.draw_container',{duration:0.3,scale:0,autoAlpha:0,onComplete:()=>{
+        drawStatus.value = false
+        isgetMoney.value = true
+
+        gsap.form('.add_container',{duration:0.3,scale:0,autoAlpha:0,})
+
+
+    }})
+
+
+
+}
+
+</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>

src/components/LuckyWheel.vue

@@ -37,6 +37,7 @@ import {
 	reactive,
 	ref,
 	toRefs,
+	defineExpose
 } from "vue";
 import gsap from "gsap";
 import axios from "axios";
@@ -161,6 +162,12 @@ const btn = () => {
 	// 第一个参数 对应奖品对应id, 第二个参数是是否多旋转一会儿 fasle旋转一圈就停止
 	showDrawAni(2, true);
 };
+
+// 暴露出方法给父组件调用
+defineExpose({
+	showDrawAni
+})
+
 </script>
 
 <style lang="scss" scoped>

src/components/MyPrize.vue

@@ -1,213 +1,231 @@
 <template>
-    <div class="myPrizeCon" @touchmove.prevent>
+  <div class="myPrizeCon" @touchmove.prevent>
-        <div class="myPrize_container">
+    <div class="myPrize_container">
-            <div class="cake"></div>
+      <!-- 有奖品 -->
-            <div class="prize_box">
+      <div class="prize_has" v-if="prizeList.length != 0">
-                <div class="prize_top">
+        <div class="cake"></div>
-                    <div class="prize_title"></div>
+        <div class="prize_box">
-                </div>
+          <div class="prize_top">
-                <div class="prize_middle">
+            <div class="prize_title"></div>
-                    <div class="prize_item" v-for="(item,key) in prizeList" :key="key" v-show="item.isHas">
+          </div>
-                        <div class="prize_li">
+          <div class="prize_middle">
-                            <div class="prize_num">{{ item.prizeNum }}元红包</div>
+            <div
-                            <div class="prize_spe">{{ item.spe }}</div>
+              class="prize_item"
-                        </div>
+              v-for="(item, key) in prizeList"
-                        <div class="buttom">
+              :key="key"
-                            <img
+              v-show="item.isHas"
-                                :src="item.isGeted ? require('../assets/img/pop/view_btn.png') : require('../assets/img/pop/got_btn.png')" />
+            >
-                        </div>
+              <div class="prize_li">
-                    </div>
+                <div class="prize_num">{{ item.prizeNum }}元红包</div>
-                </div>
+                <div class="prize_spe">{{ item.spe }}</div>
-                <div class="prize_bottom"></div>
+              </div>
+              <div class="buttom">
+                <img
+                  :src="
+                    item.isGeted
+                      ? require('../assets/img/pop/view_btn.png')
+                      : require('../assets/img/pop/got_btn.png')
+                  "
+                />
+              </div>
             </div>
-            <div class="cls_btn" @click="hide"></div>
+          </div>
+          <div class="prize_bottom"></div>
         </div>
+      </div>
+
+      <!-- 没奖品记录 -->
+      <div class="prize_no" v-if="prizeList.length == 0"></div>
+      <div class="cls_btn" @click="hide"></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(["MyPrize"]); // 声明触发事件，对应父组件上面的方法
 const props = defineProps({ sendMessage: Object }); // 获取props
-const store = useStore()
+const store = useStore();
-
 
 const prizeList = reactive([
-    {
+    // {
-        id: 1,
+    //   id: 1,
-        prizeNum: 8.8,
+    //   prizeNum: 8.8,
-        isGeted: true,
+    //   isGeted: true,
-        isHas: true,
+    //   isHas: true,
-        spe: '财富88，与“礼”共见证',
+    //   spe: "财富88，与“礼”共见证",
-    },
+    // },
-    {
+    // {
-        id: 2,
+    //   id: 2,
-        prizeNum: 8.8,
+    //   prizeNum: 8.8,
-        isGeted: false,
+    //   isGeted: false,
-        isHas: true,
+    //   isHas: true,
-        spe: '添加专属服务人员企微',
+    //   spe: "添加专属服务人员企微",
-
+    // },
-    },
+]);
-])
-
 
 // 页面挂载前
-onBeforeMount(() => { })
+onBeforeMount(() => {});
-
-
-
-
 
 // 页面挂载后
 onMounted(() => {
-    gsap.from('.myPrizeCon', { duration: 0.3, autoAlpha: 0 })
+  gsap.from(".myPrizeCon", { duration: 0.3, autoAlpha: 0 });
-    gsap.from('.myPrize_container', { duration: 0.3, scale: 0.2, autoAlpha: 0, delay: 0.1 })
+  gsap.from(".myPrize_container", {
-    // gsap.from('.rule_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('.rule_cls_btn', { duration: 0.3, y: 20, autoAlpha: 0, delay: 0.5 })
+});
 
 const hide = () => {
-    emit('MyPrize')
+  emit("MyPrize");
-}
+};
-
-
-
 </script>
 
 <style lang="scss" scoped>
 .myPrizeCon {
-    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);
+
+  .myPrize_container {
+    width: 750px;
+    height: 1180px;
     display: flex;
     justify-content: center;
     align-items: center;
-    background-color: rgba(0, 0, 0, 0.7);
+    flex-direction: column;
 
-    .myPrize_container {
+    // 有奖品央视
-        width: 750px;
+    .prize_has {
-        height: 1180px;
+      display: flex;
-        display: flex;
+      flex-direction: column;
-        justify-content: center;
+      align-items: center;
-        align-items: center;
+      .cake {
-        flex-direction: column;
+        width: 382px;
+        height: 201px;
+        @include bg_pos("../assets/img/pop/cake.png");
+        z-index: 999;
+      }
 
-        .cake {
+      .prize_box {
-            width: 382px;
+        width: 550px;
-            height: 201px;
+        margin-top: -34px;
-            @include bg_pos('../assets/img/pop/cake.png');
+
-            z-index: 999;
+        .prize_top {
+          width: 550px;
+          height: 135px;
+          @include bg_pos("../assets/img/pop/prize_box_top.png");
+          pointer-events: none;
+          display: flex;
+          justify-content: center;
+          align-items: center;
+
+          .prize_title {
+            width: 267px;
+            height: 58px;
+            @include bg_pos("../assets/img/pop/my_prize.png");
+          }
         }
 
-        .prize_box {
+        .prize_middle {
-            width: 550px;
+          width: 550px;
-            margin-top: -34px;
+          height: 190px;
+          @include bg_pos("../assets/img/pop/prize_box_middle.png");
+          margin-top: 0px;
+          display: flex;
+          justify-content: center;
+          align-items: center;
+          flex-direction: column;
 
-            .prize_top {
+          .prize_item {
-                width: 550px;
+            width: 463px;
-                height: 135px;
+            height: 67px;
-                @include bg_pos('../assets/img/pop/prize_box_top.png');
+            display: flex;
-                pointer-events: none;
+            justify-content: space-between;
-                display: flex;
+            align-items: center;
-                justify-content: center;
+            flex-direction: row;
-                align-items: center;
+            margin: 20px auto;
+            padding-bottom: 10px;
 
-                .prize_title {
+            .prize_li {
-                    width: 267px;
+              display: flex;
-                    height: 58px;
+              // justify-content: center;
-                    @include bg_pos('../assets/img/pop/my_prize.png');
+              // align-items: center;
-                }
+              flex-direction: column;
+
+              .prize_num {
+                color: #ca2f0a;
+                font-weight: 700;
+                font-size: 30px;
+              }
+
+              .prize_spe {
+                color: #ca2f0a;
+                font-weight: 700;
+                font-size: 24px;
+                margin-top: 5px;
+              }
             }
 
-            .prize_middle {
+            .buttom {
-                width: 550px;
+              width: 147px;
-                height: 190px;
+              height: 62px;
-                @include bg_pos('../assets/img/pop/prize_box_middle.png');
+              background-size: 100%;
-                margin-top: 0px;
-                display: flex;
-                justify-content: center;
-                align-items: center;
-                flex-direction: column;
 
-
+              img {
-                .prize_item {
+                width: 100%;
-                    width: 463px;
+                height: 100%;
-                    height: 67px;
+              }
-                    display: flex;
-                    justify-content: space-between;
-                    align-items: center;
-                    flex-direction: row;
-                    margin: 20px auto;
-                    padding-bottom: 10px;
-
-                    .prize_li {
-                        display: flex;
-                        // justify-content: center;
-                        // align-items: center;
-                        flex-direction: column;
-
-                        .prize_num {
-                            color: #ca2f0a;
-                            font-weight: 700;
-                            font-size: 30px;
-                        }
-
-                        .prize_spe {
-                            color: #ca2f0a;
-                            font-weight: 700;
-                            font-size: 24px;
-                            margin-top: 5px;
-                        }
-
-                    }
-
-                    .buttom {
-                        width: 147px;
-                        height: 62px;
-                        background-size: 100%;
-
-                        img {
-                            width: 100%;
-                            height: 100%;
-                        }
-                    }
-
-
-                }
             }
-
+          }
-            .prize_bottom {
-                width: 550px;
-                height: 50px;
-                @include bg_pos('../assets/img/pop/prize_box_bottom.png');
-                margin-top: 0px;
-
-            }
-
         }
 
-        .cls_btn {
+        .prize_bottom {
-            @include box(72px, 72px);
+          width: 550px;
-            @include bg_pos('../assets/img/pop/cls_btn.png');
+          height: 50px;
-            margin-top: 50px;
+          @include bg_pos("../assets/img/pop/prize_box_bottom.png");
+          margin-top: 0px;
         }
+      }
     }
 
+    // 无奖品样式
+    .prize_no {
+      width: 573px;
+      height: 524px;
+      @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;
-
+    }
-
+  }
 }
 </style>

src/page/Home/Home.vue

@@ -57,17 +57,24 @@ const getBrithday = () => {
 			{}
 		)
 		.then((res) => {
-			console.log(res);
+			console.log("生日是否处于当月：",res.data.data);
+      store.state.userAccount.isBirthMon = 1
+      // store.commit({
+			// 	type: "updateBirthMoon",
+			// 	// isBirthMon: res.data.data,
+			// 	isBirthMon: 1,
+			// });
+
 		});
 };
 
 // 查询是否添加了企微： isInActivityDate 0否 1是
 const getIsAddService = ()=>{
-  let isInActivityDate = 0
+  let isInActivityDate = 1
   service
     .post(process.env.VUE_APP_API + "/cms-activity/cms88/qywx/isadded/"+ isInActivityDate,{})
     .then((res) => {
-      console.log("是否添加了企微",res);
+      console.log("是否添加了企微",res.data);
     });
 }
 
@@ -75,12 +82,12 @@ const getMyPrizeRecored = ()=>{
   service
     .post(process.env.VUE_APP_API + "/cms-activity/cms88/prize/list",{})
     .then((res) => {
-      console.log("红包记录：",res);
+      console.log("红包记录：",res.data);
     });
 }
 
 
-// 查询员工企业微信二维码
+// 查询员工企业-微信二维码
 const gerCardId = (carid) => {
 	service
 		.get(
@@ -100,19 +107,30 @@ const getInfo = () => {
 	service
 		.post(process.env.VUE_APP_API + "/cms-activity/cms88/nkh/info", {})
 		.then((res) => {
-			console.log("资金账号：", res);
+			console.log("资金账号：", res.data);
 		});
 };
 
 
 // 页面未挂载
 onBeforeMount(() => {
-  gerCardId(store.state.userAccount.cardId);
+  // gerCardId(store.state.userAccount.cardId);
-	getInfo();
+	// getInfo();
-	getMyPrizeRecored();
+	// getMyPrizeRecored();
-	getBrithday();
+	// getBrithday();
-	getActivityNum();
+	// getActivityNum();
-  getIsAddService()
+  // getIsAddService();
+  // 页面挂载前请求接口
+  let taskAll = Promise.all([
+      gerCardId(store.state.userAccount.cardId),
+      getInfo(),
+      getMyPrizeRecored(),
+      getBrithday(),
+      getActivityNum(),
+      getIsAddService(),
+  ]).then(result =>{
+    console.log("接口都请求完成");
+  })
 
   // 预加载图片资源
   pageImgsArrLoad(imgList)
@@ -165,17 +183,17 @@ 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', 
-  qs.stringify({
+  // qs.stringify({
-    redirect_uri: redirect_uri
-  })
-
-  // {
   //   redirect_uri: redirect_uri
-  // }
+  // })
+
+  {
+    redirect_uri: redirect_uri
+  }
 
   ).then((res) => {
     let code = res.data.data
-    console.log("get code2992",res);
+    console.log("get code结果",res);
     // authCode.value = res.data.data
     // window.location.href = res.data.data
   })
@@ -184,9 +202,14 @@ const getCode = () => {
 // 授权获取openid
 const getOpenId = (code) => {
 
-  service.post(process.env.VUE_APP_API + '/cms-activity/cms88/zsApi/oauthInfo', qs.stringify({
+  service.post(process.env.VUE_APP_API + '/cms-activity/cms88/zsApi/oauthInfo', 
+  // qs.stringify({
+  //   code: code
+  // })
+  {
     code: code
-  })).then((res) => {
+  }
+  ).then((res) => {
 
     if (res.data.code == 0) {
       console.log("后端返回的openid：", res.data);

src/store/index.js

@@ -7,7 +7,7 @@ export default createStore({
     // 数据源
     state: {
         userAccount: {
-            xglOpenid: '',      //用户openid
+            xglOpenid: 'o9B_fvsbOdSIIED6fPHjj_lHL24w',      //用户openid
             token: h5plugin.getQueryString('token'),        //用户token
             cardId: h5plugin.getQueryString('cardId'),                 //carid
             nkh: h5plugin.getQueryString('nkh'),                 //牛卡号
@@ -17,7 +17,8 @@ export default createStore({
             isHasPrize: [],             //是否存在奖品
             participantNum: 0,     //活动参与人数
             prizeResult: 0,        //中奖金额
-            eqcodeImg: ''              //二维码
+            eqcodeImg: '',              //二维码
+            isBirthMon: 0,     //生日是否处于当月
         },
 
     },
@@ -51,6 +52,10 @@ export default createStore({
         updateParticipantNum(state,val){
             state.userAccount.participantNum = val.participantNum
         },
+
+        updateBirthMoon(state,val){
+            state.userAccount.isBirthMon = val.isBirthMon
+        },
         
     },
     // 改变方法：异步