update

.env.prod

@@ -2,16 +2,16 @@
 NODE_ENV = 'production'
 
 // 入口地址
-VUE_APP_BASE_URL = 'https://cdn.xglpa.com/tcubic/pdf/'
+VUE_APP_BASE_URL = 'https://wealthplus.cmschina.com'
 
 // 业务接口
-VUE_APP_API = 'https://cdn.xglpa.com/tcubic/pdf/'
+VUE_APP_API = 'https://wealthplus.cmschina.com'
 
 // CDN地址
-VUE_APP_CDN = 'https://cdn.xglpa.com/tcubic/pdf/'
+VUE_APP_CDN = './'
 
 // XGL授权接口
-VUE_APP_XGL_DOMAIN = https://wealth.newone.com.cn
+VUE_APP_XGL_DOMAIN = https://wealthplus.cmschina.com
 
 // 招商证券授权接口
-VUE_APP_ZS_DOMAIN = https://wealth.newone.com.cn
+VUE_APP_ZS_DOMAIN = https://wealthplus.cmschina.com

package-lock.json

@@ -2350,7 +2350,7 @@
           "dev": true
         },
         "vue-loader-v16": {
-          "version": "npm:vue-loader@16.8.3",
+          "version": "npm:vue-loader-v16@16.8.3",
           "resolved": "https://registry.npmjs.org/vue-loader/-/vue-loader-16.8.3.tgz",
           "integrity": "sha512-7vKN45IxsKxe5GcVCbc2qFU5aWzyiLrYJyUuMz4BQLKctCj/fmCa0w6fGiiQ2cLFetNcek1ppGJQDCup0c1hpA==",
           "dev": true,

postcss.config.js

@@ -2,7 +2,11 @@ const AutoPrefixer = require("autoprefixer");
 const px2rem = require("postcss-px2rem");
 module.exports = ({ file }) => {
     let remUnit; // 判断条件 请自行调整 我使用的是 mand-mobile ui 没有对vant引入进行测试 
-    if (file && file.dirname && file.dirname.indexOf("vant") > -1) { remUnit = 37.5; } else { remUnit = 75; }
+    if (file && file.dirname && file.dirname.indexOf("vant") > -1) {
+        remUnit = 37.5;
+    } else {
+        remUnit = 75;
+    }
     return {
         plugins: [
             px2rem({ remUnit: remUnit, }),

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,230 @@
+<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" @click="hide"></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;
+            getMyPrizeRecored()
+            // gsap.form('.add_container',{duration:0.5,scale:0,autoAlpha:0,})
+          },
+        });
+      } else {
+
+        Dialog.confirm({
+          title: "温馨提示",
+          message: '请先绑定牛卡号',
+          confirmButtonText: '前往绑定',
+        })
+          .then(() => {
+            wx.miniProgram.navigateTo({
+              url: "/subs/bind/pages/login/login?source=zszq",
+            });
+          })
+          .catch(() => {
+            console.log(2);
+            // on cancel
+          });
+      }
+    });
+};
+
+
+// 我的红包记录
+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>
+
+<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/Index.vue

@@ -1,39 +1,39 @@
 <template>
   <div class="indexPage">
     <div class="indexCon">
-			<div class="logo"></div>
+      <div class="logo" @click="deleteData"></div>
       <div class="title_main"></div>
       <div class="cloud_left_1"></div>
       <div class="cloud_right_1"></div>
       <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"
-					><img src="../assets/img/laba.png" alt="" srcset=""
-				/></span>
-				<span class="num"
-					>活动已有{{
-						store.state.userAccount.participantNum
-					}}人参与</span
-				>
+        <span class="icon"><img src="../assets/img/laba.png" alt="" srcset="" /></span>
+        <span class="num">活动已有{{ store.state.userAccount.participantNum }}人参与</span>
       </div>
       <div class="cloud_left_2"></div>
       <div class="icon_left_2"></div>
       <div class="cloud_right_2"></div>
       <!-- 大转盘 -->
       <div class="zhuanpan"></div>
+      <LuckyWheel v-if="true" ref="LuckyWheelCon" @luckyWheel="luckyWheelFn" />
+      <!-- <div class="LuckyWheel_zz"></div> -->
       <div class="icon_right_2"></div>
       <div class="icon_right_3"></div>
       <div class="cloud_left_3"></div>
       <div class="cloud_right_3"></div>
       <div class="icon_right_1"></div>
       <div class="select_box"></div>
-			<div class="draw_btn" @click="drawBtn"></div>
+      <div class="draw_btn" :class="isDraw ? 'is_draw' : ''" @click="drawBtn"></div>
       <div class="rule_btn" @click="showRluesBtn"></div>
       <div class="prize_btn" @click="showMyPrizePop"></div>
       <div class="rule_btn_text"></div>
@@ -47,22 +47,12 @@
           <img src="../assets/img/activity_title.png" alt="" />
         </div>
         <div class="activity_list">
-					<div
-						class="activity_li"
-						v-for="(item, index) in activityList"
-						:key="index"
-						:style="{
+          <div class="activity_li" v-for="(item, index) in activityList" :key="index" :style="{
             'background-image': 'url(' + item.banner + ')',
-						}"
-						v-show="item.show"
-					>
-						<div
-							class="btn"
-							:style="{
+          }" v-show="item.show">
+            <div class="btn" :style="{
               'background-image': 'url(' + item.btnImg + ')',
-							}"
-							@click="activityBtn(item)"
-						></div>
+            }" @click="activityBtn(item)"></div>
           </div>
         </div>
       </div>
@@ -75,8 +65,31 @@
     <MyPrize v-if="showMyPrize" @MyPrize="myPrizePop" />
     <!-- 添加专属服务人员企微弹窗 -->
     <ServiceList v-if="showServicePop" @ServicePop="hideServicePop" />
+    <!-- 抽奖结果弹窗 -->
+    <Draw v-if="showDrawCon" @drawCon="drawConFn" :prizeMsg="prizeMsg" />
+  </div>
 
-		<LuckyWheel v-if="true" />
+  <!-- 如果添加过企微，进入页面后弹窗显示中奖结果，未中奖的不显示 -->、
+  <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 class="cls_btn" @click="hideServiceLuckyPop"></div>
+    </div>
+  </div>
+
+  <div class="ishas_service_pop">
+    <div class="ishas_service_box"></div>
+    <div class="ishas_service_box_cls" @click="ishasServicePopHide"></div>
   </div>
 </template>
 
@@ -93,17 +106,20 @@ import {
   computed,
 } from "vue";
 import gsap from "gsap";
+
 import axios from "axios";
 import { Toast, Dialog } from "vant";
 import { useStore } from "vuex";
 // import { get_authorize, get_jssdk } from '@/api/authorize-api'
 import service from "@/api/httpServe";
 import qs from "qs";
+import wx from "@/utils/wx-jssdk.1.6.0.js";
 import h5plugin from "@/utils/plugin";
 import Rules from "@/components/Rules";
 import MyPrize from "@/components/MyPrize";
 import ServiceList from "@/components/ServiceList";
 import LuckyWheel from "@/components/LuckyWheel";
+import Draw from "@/components/Draw";
 
 // 初始化
 const emit = defineEmits(["indexPage"]); // 声明触发事件，对应父组件上面的方法
@@ -120,6 +136,90 @@ 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 serviceLuckyPopBox = ref(true);
+
+// 企微红包弹窗金额
+const isGetedServiceLucky = ref(false);
+const serviceLuckyMsg = reactive({
+  money: 0,
+  id: 1,
+});
+
+// 判断红包是否生效
+const isLost1 = ref(false);
+const isLost2 = ref(false);
+
+const hideServiceLuckyPop = () => {
+  gsap.to(".serviceLuckyPop", { duration: 0.5, autoAlpha: 0 });
+};
+
+// 已经添加企微逻辑
+const ishasServicePop = () => {
+  gsap.to(".ishas_service_pop", { duration: 0.5, autoAlpha: 1 });
+};
+const ishasServicePopHide = () => {
+  gsap.to(".ishas_service_pop", { duration: 0.5, autoAlpha: 0 });
+};
+
+// 点击领取企微红包
+const getServiceLucky = () => {
+  if (
+    store.state.userAccount.nkh == "" ||
+    store.state.userAccount.nkh == undefined
+  ) {
+    // Toast("牛卡号为空，先绑定牛卡号");
+    Dialog.confirm({
+      title: "温馨提示",
+      message: "请先绑定牛卡号",
+      confirmButtonText: "前往绑定",
+    })
+      .then(() => {
+        wx.miniProgram.navigateTo({
+          url: "/subs/bind/pages/login/login?source=zszq",
+        });
+      })
+      .catch(() => {
+        // on cancel
+      });
+  } else {
+    // 有牛卡号的话领取
+    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([
   {
@@ -136,7 +236,8 @@ const activityList = reactive([
   },
   {
     id: 3,
-		show: true,
+    show: store.state.userAccount.isBirthMon,
+    // show: 1,
     banner: require("../assets/img/activity_3.png"),
     btnImg: require("../assets/img/li_btn_3.png"),
   },
@@ -152,55 +253,219 @@ const activityList = reactive([
     banner: require("../assets/img/activity_5.png"),
     btnImg: require("../assets/img/li_btn_5.png"),
   },
+  {
+    id: 6,
+    show: true,
+    banner: require("../assets/img/activity_6.png"),
+    btnImg: require("../assets/img/li_btn_6.png"),
+  },
 ]);
 
+// const hasServicePrize = ref(false)
+
 // 页面挂载前
 onBeforeMount(() => {
-	// 获取企微二维码
-	gerCardId(94207);
-	getInfo();
-	getMyPrizeRecored();
-	getBrithday();
-	getActivityNum();
+  // 判断参与活动红包是否领取
+  let arr = store.state.userAccount.prizeList;
+  arr.forEach((element) => {
+    if (element.type == 1) {
+      isDraw.value = true;
+      gameOver.value = true;
+      drawAmount.value = element.amount;
+
+      if (element.receiveStatus == -2) {
+        isLost1.value = true;
+      }
+    }
+
+    // 判断红包记录里面是否存在企微红包
+    if (element.type == 2) {
+      isGetedServiceLucky.value = true;
+      if (element.receiveStatus == -2) {
+        isLost2.value = true;
+      }
+    }
   });
+});
+
+// 入场动画
+const animationIndex = () => {
+  gsap.from(".title_main", { duration: 0.5, scale: 0 });
+  gsap.from(".indexCon", { duration: 0.5, autoAlpha: 0 });
+
+  gsap.from(".cloud_left_1,.cloud_left_2,.cloud_left_3", {
+    duration: 0.5,
+    x: -200,
+    delay: 0.5,
+  });
+  gsap.from(".cloud_right_1,.cloud_right_2", {
+    duration: 0.5,
+    x: 200,
+    delay: 0.5,
+  });
+  gsap.from(".lucky_bag_2,.lucky_bag,.notice", {
+    duration: 0.5,
+    y: -200,
+    autoAlpha: 0,
+  });
+  gsap.from(".LuckyWheelCon", { duration: 0.5, autoAlpha: 0, delay: 1 });
+  gsap.from(".activity_li", {
+    duration: 1,
+    autoAlpha: 0,
+    y: 150,
+    stagger: 0.1,
+  });
+
+  gsap.from(
+    ".activityCon,.zhuanpan,.select_box,.draw_btn,.rule_btn,.rule_btn_text,.prize_btn,.prize_btn_text",
+    {
+      duration: 0.5,
+      y: 200,
+      autoAlpha: 0,
+      onComplete: () => {
+        gsap.from(".icon_right_3", {
+          duration: 1,
+          rotation: -10,
+          scale: 1.1,
+          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,
+          scale: 1.05,
+          repeat: -1,
+          yoyo: true,
+        });
+      },
+    }
+  );
+};
 
 // 页面挂载后
-onMounted(() => {});
+onMounted(() => {
+  // 挂载后执行入场动画
+  animationIndex();
 
-const btn = () => {
-	// Toast('项目开发中');
-	emit("indexPage", "hello");
+  // 埋点
+  addPoint();
 
-	Dialog.alert({
-		title: "招商证券88司庆活动",
-		message: "项目开发中",
-		confirmButtonText: "确定",
-		showCancelButton: true,
-	})
-		.then((e) => {
-			// 更新openid
-			store.commit({ type: "updateOpenid", openid: "openid110" });
+  // 如果添加了企微,直接调抽奖结果,中奖了就弹窗,未中奖的话不弹窗
+  if (
+    store.state.userAccount.isAddCustomerBefore == 0 &&
+    !isGetedServiceLucky.value
+  ) {
+    if (
+      store.state.userAccount.isAddCustomer == 1 &&
+      !isGetedServiceLucky.value
+    ) {
+      if (!isLost2.value) {
+        getluckyBag2(2);
+      }
+    }
+  }
 
-			console.log(e, store.state.userAccount);
-		})
-		.catch((e) => {
-			console.log(e);
+  if (!isDraw.value) {
+    gsap.to(".draw_btn", {
+      duration: 0.5,
+      scale: 1.1,
+      repeat: -1,
+      yoyo: true,
+      ease: "Bounce.easeIn",
+    });
+  }
 });
-};
 
 // 抽奖按钮
 const drawBtn = () => {
-	console.log("抽奖：");
-	getluckyBag(1);
+  if (!isDraw.value) {
+    // LuckyWheelCon.value.showDrawAni(3, true)
+    gsap.killTweensOf(".draw_btn");
+    if (!isLost1.value) {
+      getluckyBag(1); //大转盘抽奖：传参数1
+
+    }
+  } else {
+    Toast("您已经抽过奖");
+  }
+};
+
+// 大转盘结束后的处理事件
+const luckyWheelFn = () => {
+  console.log("game over");
+  showDrawCon.value = true;
+  gameOver.value = true;
 };
 
 // 活动点击
 const activityBtn = (item) => {
   console.log(item.id);
+  console.log(wx);
 
   if (item.id == 1) {
+    if (store.state.userAccount.isAddCustomerBefore == 1) {
+      // Toast("您已添加过专属服务人员，请参与下方其他活动吧")
+      ishasServicePop();
+    } else {
       showServicePop.value = true;
     }
+  }
+
+  if (item.id == 2) {
+    console.log("新客专享页面");
+    // let url = "/subs/financial/pages/index/index";
+    wx.miniProgram.navigateTo({
+      url: "/subs/financial/pages/index/index",
+    });
+  }
+
+  if (item.id == 3) {
+    console.log("生日专享页面");
+    console.log("跳转：", "https://appstatic.cmschina.com/activity/cmszhyxpt/bees/index.html?id=INT_SMKTC_MxCbQgYb&uuid=" + store.state.userAccount.uuid);
+    window.location.href =
+      "https://appstatic.cmschina.com/activity/cmszhyxpt/bees/index.html?id=INT_SMKTC_MxCbQgYb&uuid=" + store.state.userAccount.uuid;
+  }
+
+  if (item.id == 4) {
+    console.log("牛牛杯");
+
+    window.location.href =
+      "https://appstatic.cmschina.com/activity/cmszhyxpt/bees/index.html?id=INT_SMKTC_uD5KUL2d";
+    // setTimeout(()=>{
+    //   location.replace(location.href)
+    // },1000)
+  }
+
+  if (item.id == 5) {
+    console.log("财富微课堂");
+    // window.location.href='/subs/activity/pages/classroom/classroom'
+    wx.miniProgram.navigateTo({
+      url: "/subs/activity/pages/classroom/classroom",
+    });
+  }
+
+  if (item.id == 6) {
+    console.log("财富日报");
+    wx.miniProgram.navigateTo({
+      url: "/subs/wealthpaper/wealthpaper",
+    });
+  }
 };
 
 // 活动规则弹窗
@@ -215,10 +480,17 @@ const hideRulesPop = () => {
 const showMyPrizePop = () => {
   showMyPrize.value = true;
 };
+
+// 关闭我的奖品中心弹窗
 const myPrizePop = () => {
   showMyPrize.value = false;
 };
 
+// 关闭抽奖弹窗
+const drawConFn = () => {
+  showDrawCon.value = false;
+};
+
 // 企微弹窗
 const hideServicePop = () => {
   showServicePop.value = false;
@@ -236,9 +508,7 @@ const getAuthorize = (scopeState) => {
 // 查询员工企业微信二维码
 const gerCardId = (carid) => {
   service
-		.get(
-			process.env.VUE_APP_API + "/cms-activity/cms88/card/qrcode/" + carid
-		)
+    .get(process.env.VUE_APP_API + "/cms-activity/cms88/card/qrcode/" + carid)
     .then((res) => {
       console.log("企微二维码：", res.data.data);
       store.commit({
@@ -262,36 +532,113 @@ 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,
+      });
     });
 };
 
-// 查询是否添加了企微： isInActivityDate 0否 1是
-const getIsAddService = () => {
-	let isInActivityDate = 0;
+// 查询是否添加了企微： isInActivityDate 0活动前是否存在 1活动期间是否存在
+const getIsAddService = (id) => {
+  let isInActivityDate = id;
   service
     .post(
       process.env.VUE_APP_API +
       "/cms-activity/cms88/qywx/isadded/" +
-				isInActivityDate
+      isInActivityDate,
+      {}
     )
     .then((res) => {
-			console.log(res);
+      console.log("是否添加了企微", res);
     });
 };
 
 // 抽取红包 type为红包类型 1为参与红包 2为加企微
 const getluckyBag = (id) => {
   let type = id;
+  drawType.value = id;
   service
-		.post(
-			process.env.VUE_APP_API +
-				"/cms-activity/cms88/redpacket/draw/" +
-				type,
-			{}
-		)
+    .post(process.env.VUE_APP_API + "/cms-activity/cms88/redpacket/draw", {
+      xglOpenId: store.state.userAccount.xglOpenId,
+      redpacketType: type,
+    })
     .then((res) => {
-			console.log(res);
+      console.log("抽取红包结果：", res);
+      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;
+        gsap.set(".LuckyWheel_zz", { autoAlpha: 0 });
+
+        // 大转盘正常抽奖
+        if (prizeNum == 0) {
+          // 谢谢参与
+          LuckyWheelCon.value.showDrawAni(5, true);
+        }
+        if (prizeNum == 1.08) {
+          // 1.88元
+          LuckyWheelCon.value.showDrawAni(1, true);
+        }
+        if (prizeNum == 2.68) {
+          // 2.68元
+          LuckyWheelCon.value.showDrawAni(2, true);
+        }
+        if (prizeNum == 6.66) {
+          // 6.66元
+          LuckyWheelCon.value.showDrawAni(3, true);
+        }
+        if (prizeNum == 8.88) {
+          // 6.66元
+          LuckyWheelCon.value.showDrawAni(4, true);
+        }
+
+        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,
+          });
+          gsap.from(".cls_btn", {
+            duration: 0.5,
+            autoAlpha: 0,
+            y: 50,
+            delay: 0.5,
+          });
+        } else {
+          console.log("企微不中奖");
+        }
+
+        getMyPrizeRecored(); // 更新我的奖品列表
+      } else {
+        Toast(res.data.msg);
+      }
     });
 };
 
@@ -320,6 +667,44 @@ const getBrithday = () => {
       console.log(res);
     });
 };
+
+// 埋点接口
+const addPoint = () => {
+  service
+    .post(
+      process.env.VUE_APP_API + "/action/application/action/event/user/brows",
+      {
+        actionType: 24,
+        actionId: 20220805,
+        cardId: store.state.userAccount.cardId,
+      }
+    )
+    .then((res) => {
+      console.log("埋点成功：", res);
+    });
+};
+
+const deleteNum = ref(0);
+// 清数据接口
+const deleteData = (type) => {
+  if (process.env.NODE_ENV == "test") {
+    deleteNum.value++;
+    if (deleteNum.value == 3) {
+      let type = 0;
+      service
+        .post(
+          process.env.VUE_APP_API +
+          "/cms-activity/cms88/redpacket/delete/" +
+          type,
+          {}
+        )
+        .then((res) => {
+          console.log("数据已清空", res);
+          deleteNum.value = 0;
+        });
+    }
+  }
+};
 </script>
 
 <style lang="scss" scoped>
@@ -333,6 +718,7 @@ const getBrithday = () => {
   right: 0;
   overflow: hidden;
   overflow-y: scroll;
+  background: #ffd195;
 
   .indexCon {
     // @include pos(100%, 1090px, 0, 0);
@@ -347,7 +733,7 @@ const getBrithday = () => {
     .logo {
       @include pos(241px, 36px, 31px, 41px);
       @include bg_pos("../assets/img/logo.png");
-			pointer-events: none;
+      // pointer-events: none;
     }
 
     .notice {
@@ -385,6 +771,12 @@ const getBrithday = () => {
       pointer-events: none;
     }
 
+    .LuckyWheel_zz {
+      @include pos(750px, 496px, 0px, 657px);
+      @include bg_pos("../assets/img/zz.png");
+      pointer-events: none;
+    }
+
     .caidai {
       @include pos(641px, 503px, 47px, 79px);
       @include bg_pos("../assets/img/caidai.png");
@@ -473,7 +865,7 @@ const getBrithday = () => {
       @include pos(308px, 355px, 227px, 356px);
       @include bg_pos("../assets/img/luckybag.png");
       pointer-events: none;
-			visibility: hidden;
+      // visibility: hidden;
     }
 
     .lucky_bag_2 {
@@ -483,6 +875,18 @@ const getBrithday = () => {
 
       // 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;
@@ -509,6 +913,11 @@ const getBrithday = () => {
       @include bg_pos("../assets/img/draw_btn.png");
     }
 
+    .is_draw {
+      -webkit-filter: grayscale(100%);
+      filter: grayscale(100%);
+    }
+
     .rule_btn {
       @include pos(137px, 153px, 75px, 883px);
       @include bg_pos("../assets/img/rule_btn.png");
@@ -616,10 +1025,99 @@ const getBrithday = () => {
 
     .cloud_bottom {
       width: 750px;
-			height: 255px;
-			margin-top: -160px;
+      height: 132px;
+      margin-top: 0px;
       @include bg_pos("../assets/img/cloud_bottom.png");
     }
   }
 }
+
+.serviceLuckyPop {
+  width: 100%;
+  height: 100%;
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  flex-direction: column;
+  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");
+      }
+    }
+
+    .cls_btn {
+      @include box(72px, 72px);
+      @include bg_pos("../assets/img/pop/cls_btn.png");
+      margin-top: 50px;
+    }
+  }
+
+  .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");
+    }
+  }
+}
+
+.ishas_service_pop {
+  width: 100%;
+  height: 100%;
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  flex-direction: column;
+  background-color: rgba(0, 0, 0, 0.7);
+  visibility: hidden;
+
+  .ishas_service_box {
+    @include box(573px, 362px);
+    @include bg_pos("../assets/img/pop/ishas_service.png");
+  }
+
+  .ishas_service_box_cls {
+    @include box(72px, 72px);
+    @include bg_pos("../assets/img/pop/cls_btn.png");
+    margin-top: 50px;
+  }
+}
 </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/LuckyWheel copy.vue

@@ -0,0 +1,280 @@
+<template>
+  <div class="LuckyWheelCon" @touchmove.prevent>
+    <div class="LuckyWheel_container">
+      <div class="LuckyWheel_box">
+        <div class="prize p-1" ref="p1"></div>
+        <div class="prize p-2" ref="p2"></div>
+        <div class="prize p-3" ref="p3"></div>
+        <div class="prize p-4" ref="p4"></div>
+        <div class="prize p-5" ref="p5"></div>
+        <div class="prize p-1" ref="p6"></div>
+        <div class="prize p-2" ref="p7"></div>
+        <div class="prize p-3" ref="p8"></div>
+        <div class="prize p-4" ref="p9"></div>
+        <div class="prize p-5" ref="p10"></div>
+        <div class="prize p-1" ref="p11"></div>
+        <div class="prize p-2" ref="p12"></div>
+        <div class="prize p-3" ref="p13"></div>
+        <div class="prize p-4" ref="p14"></div>
+        <div class="prize p-5" ref="p15"></div>
+        <div class="prize p-5" ref="p16"></div>
+        <div class="prize p-5" ref="p17"></div>
+        <div class="prize p-5" ref="p18"></div>
+        <div class="prize p-5" ref="p19"></div>
+        <!-- <div class="prize p-3" ref="p20"></div> -->
+      </div>
+      <!-- <div class="btn" @click="btn">开始抽奖</div> -->
+	  
+    </div>
+  </div>
+</template>
+
+<script setup>
+import {
+  onBeforeMount,
+  onMounted,
+  defineEmits,
+  defineProps,
+  reactive,
+  ref,
+  toRefs,
+  defineExpose,
+} from "vue";
+import gsap from "gsap";
+import axios from "axios";
+import { Toast } from "vant";
+import { useStore } from "vuex";
+
+// import { PixiPlugin } from "gsap/PixiPlugin.js";
+import { MotionPathPlugin } from "gsap/MotionPathPlugin.js";
+// import { MorphSVGPlugin } from "gsap/MorphSVGPlugin";
+
+gsap.registerPlugin(MotionPathPlugin);
+
+// 初始化
+const emit = defineEmits(["luckyWheel"]); // 声明触发事件，对应父组件上面的方法
+const props = defineProps({ sendMessage: Object }); // 获取props
+const store = useStore();
+const p1 = ref(null);
+const p2 = ref(null);
+const p3 = ref(null);
+const p4 = ref(null);
+const p5 = ref(null);
+const p6 = ref(null);
+const p7 = ref(null);
+const p8 = ref(null);
+const p9 = ref(null);
+const p10 = ref(null);
+const p11 = ref(null);
+const p12 = ref(null);
+const p13 = ref(null);
+const p14 = ref(null);
+const p15 = ref(null);
+const p16 = ref(null);
+const p17 = ref(null);
+const p18 = ref(null);
+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(() => {});
+
+onMounted(() => {
+  showDrawAni();
+});
+
+// bingo 为中奖index  对应 pArr的index
+const showDrawAni = (bingo, repeat) => {
+
+  const pArr = [
+    p1, // 1.08
+    p2, // 2.68
+    p3, // 6.66
+    p4, // 8.88
+    p5, // 谢谢  默认选中值
+    p6, //以下皆为填充奖品 可随便填充
+    p7,
+    p8,
+    p9,
+    p10,
+    p11,
+    p12,
+    p13,
+    p14,
+    p15,
+    p16,
+    p17,
+    p18,
+    p19,
+  ];
+  const singleRate = 1 / pArr.length; // 路径平均分 单个元素在路径上的位置
+  const delta = singleRate + 0.068; // 修正偏移量
+  let rotateDelta = 0; //转到哪一个停止 | 默认为第五个奖品 谢谢参与
+  if (bingo) {
+    rotateDelta = (5 - bingo) * singleRate;
+  }
+  for (let i = 1; i < pArr.length + 1; i++) {
+    let ani = gsap.to(
+      [pArr[i - 1].value],
+      {
+        duration: 10,
+        paused: bingo ? false : true, //没有中奖结果则为初始化
+        // repeat: -1,
+        // delay: i * 0.5 - 1,
+        // stagger: 0.5,
+        // repeatDelay: 3,
+        // yoyo: true,
+        ease: "back.out(1.4)",
+        motionPath: {
+          path: "M115.37,73.45C177.05-25.14,462-22.69,535,70,686.45,248.93,797.17,321.7,324.48,321.7-121,321.7-20.39,248.93,115.37,73.45Z",
+          // align: [1, 1],
+          autoRotate: true,
+          start: i * singleRate + rotateDelta - delta, // 动画开始于路径的位置 0-1
+          end: i * singleRate + 1 + rotateDelta - delta, // 动画结束于路径的位置 0-无穷
+          offsetX: -177,
+          offsetY: -43,
+          alignOrigin: [0.5, 0],
+        },
+        onUpdate: () => {
+          // if (i === 1) console.log(ani.progress());
+        },
+        onStart: () => {
+          if (i == pArr.length - 1) {
+            setTimeout(() => {
+            //   console.log("停止2");
+			  isStop()
+            }, 5000);
+          }
+        },
+
+        onComplete: () => {},
+      },
+      "same"
+    );
+    // 更新视图
+    ani.seek(0);
+    if (bingo && repeat) {
+      setTimeout(() => {
+        showDrawAni(bingo, false);
+      }, 800);
+    }
+  }
+};
+
+const btn = () => {
+  console.log("抽奖");
+  // 中奖奖品ID
+  // 奖品 1 - 1.08
+  // 奖品 2 - 2.68
+  // 奖品 3 - 6.66
+  // 奖品 4 - 8.88
+  // 奖品 5 - 谢谢参与
+  // 第一个参数 对应奖品对应id, 第二个参数是是否多旋转一会儿 fasle旋转一圈就停止
+  showDrawAni(2, true);
+};
+
+// 暴露出方法给父组件调用
+defineExpose({
+  showDrawAni,
+});
+</script>
+
+<style lang="scss" scoped>
+.LuckyWheelCon {
+  width: 100%;
+  height: 100%;
+  position: absolute;
+  top: 0;
+  left: 0;
+  pointer-events: none;
+
+
+  .LuckyWheel_container {
+    position: absolute;
+    top: 770px;
+    left: 0px;
+    width: 760px;
+    height: 500px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    flex-direction: column;
+
+    .LuckyWheel_box {
+
+    width: 760px;
+    height: 500px;
+
+      // // border-width: 123px;
+      // border-style: solid;
+      // border-radius: 50%;
+      // // box-shadow: -1.569px -17.932px 16px 0px rgba(234, 6, 16, 0.16);
+      // width: 831px;
+      // height: 305px;
+
+      // width: 100%;
+      // height: 100%;
+      // position: absolute;
+      // top: 0;
+      // left: 20px;
+
+      .li {
+        width: 100px;
+        height: 100px;
+        background-color: #ff6000;
+      }
+    }
+
+    .btn {
+      width: 200px;
+      height: 100px;
+      text-align: center;
+      line-height: 100px;
+      font-size: 30px;
+      color: #fff;
+      background: #ff6000;
+    }
+  }
+  .prize {
+    position: absolute;
+    width: 160px;
+    height: 96px;
+    left: 0px;
+    top: 10px;
+    // 奖品图
+    &.p-1 {
+      background-image: url("~@/assets/img/p_1.png");
+      background-size: 160px 96px;
+    }
+    &.p-2 {
+      background-image: url("~@/assets/img/p_2.png");
+      background-size: 160px 96px;
+    }
+    &.p-3 {
+      background-image: url("~@/assets/img/p_3.png");
+      background-size: 160px 96px;
+    }
+    &.p-4 {
+      background-image: url("~@/assets/img/p_4.png");
+      background-size: 160px 96px;
+    }
+    &.p-5 {
+      background-image: url("~@/assets/img/p_5.png");
+      background-size: 160px 96px;
+    }
+    // background-color: #f00;
+  }
+}
+</style>

src/components/LuckyWheel.vue

@@ -37,7 +37,7 @@
 			<!-- 对照div 重点 -->
 			<div class="relative-box" ref="container"></div>
 
-			<div class="btn" @click="btn">开始抽奖</div>
+			<!-- <div class="btn" @click="btn">开始抽奖</div> -->
 		</div>
 	</div>
 </template>
@@ -60,7 +60,6 @@ import { useStore } from "vuex";
 // import { PixiPlugin } from "gsap/PixiPlugin.js";
 import { MotionPathPlugin } from "gsap/MotionPathPlugin.js";
 // import { MorphSVGPlugin } from "gsap/MorphSVGPlugin";
-
 gsap.registerPlugin(MotionPathPlugin);
 
 // 初始化
@@ -90,6 +89,19 @@ const aniGroup = ref([]);
 const container = 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(() => {});
@@ -169,6 +181,14 @@ const showDrawAni = (bingo, repeat) => {
 					offsetY: 70,
 					alignOrigin: [0.5, 0],
 				},
+				onStart: ()=>{
+					if (i == pArr.length - 1) {
+            setTimeout(() => {
+            //   console.log("停止2");
+			  isStop()
+            }, 5000);
+          }
+				},
 				onUpdate: () => {
 					// if (i === 1) console.log(ani.progress());
 				},
@@ -196,22 +216,30 @@ const btn = () => {
 	// 第一个参数 对应奖品对应id, 第二个参数是是否多旋转一会儿 fasle旋转一圈就停止
 	showDrawAni(1, true);
 };
+
+// 暴露出方法给父组件调用
+defineExpose({
+  showDrawAni,
+});
+
+
 </script>
 
 <style lang="scss" scoped>
 .LuckyWheelCon {
 	width: 100%;
-	height: 100%;
-	position: fixed;
-	z-index: 10;
+	height: 800px;
+	position: absolute;
+	// z-index: 10;
 	top: 0;
 	left: 0;
+	pointer-events: none;
 	// right: 0;
 	// bottom: 0;
 	// display: flex;
 	// justify-content: center;
 	// align-items: center;
-	background-color: rgba(0, 0, 0, 0.3);
+	// background-color: rgba(0, 0, 0, 0.3);
 
 	.LuckyWheel_container {
 		position: absolute;

src/components/MyPrize.vue

@@ -1,82 +1,240 @@
 <template>
   <div class="myPrizeCon" @touchmove.prevent>
     <div class="myPrize_container">
+      <!-- 有奖品 -->
+      <div class="prize_has" v-if="prizeList.length != 0">
         <div class="cake"></div>
         <div class="prize_box">
           <div class="prize_top">
             <div class="prize_title"></div>
           </div>
           <div class="prize_middle">
-                    <div class="prize_item" v-for="item in prizeList" v-show="item.isHas">
+            <div class="prize_item" v-for="(item, key) in prizeList" :key="key">
               <div class="prize_li">
                 <div class="prize_num">{{ item.prizeNum }}元红包</div>
                 <div class="prize_spe">{{ item.spe }}</div>
               </div>
               <div class="buttom">
                 <img
-                                :src="item.isGeted ? require('../assets/img/pop/view_btn.png') : require('../assets/img/pop/got_btn.png')" />
+                  :src="
+                    item.isGeted == 1
+                      ? require('../assets/img/pop/got_btn.png')
+                      : require('../assets/img/pop/view_btn.png')
+                  "
+                  @click="getMoney(item)"
+                />
               </div>
             </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>
+  <!-- 领取成功反馈弹窗 -->
+  <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>
-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 { Toast } from 'vant';
+import axios from "axios";
+import service from "@/api/httpServe";
+import qs from "qs";
+import { Toast, Dialog } from "vant";
 import { useStore } from "vuex";
+import wx from "@/utils/wx-jssdk.1.6.0.js";
 
 // 初始化
 const emit = defineEmits(["MyPrize"]); // 声明触发事件，对应父组件上面的方法
 const props = defineProps({ sendMessage: Object }); // 获取props
-const store = useStore()
-
+const store = useStore();
 
 const prizeList = reactive([
-    {
-        id: 1,
-        prizeNum: 8.8,
-        isGeted: true,
-        isHas: true,
-        spe: '财富88，与“礼”共见证',
-    },
-    {
-        id: 2,
-        prizeNum: 8.8,
-        isGeted: false,
-        isHas: true,
-        spe: '添加专属服务人员企微',
-
-    },
-])
-
+  // {
+  //   id: 1,
+  //   prizeNum: 8.8,
+  //   isGeted: true,
+  //   isHas: true,
+  //   spe: "财富88，与“礼”共见证",
+  // },
+  // {
+  //   id: 2,
+  //   prizeNum: 8.8,
+  //   isGeted: false,
+  //   isHas: true,
+  //   spe: "添加专属服务人员企微",
+  // },
+]);
 
 // 页面挂载前
-onBeforeMount(() => { })
-
-
-
+onBeforeMount(() => {
+  let arr = store.state.userAccount.prizeList;
+  arr.forEach((element) => {
+    if (element.receiveStatus != -1) {
+      if (element.type == 1) {
+        prizeList.push({
+          id: element.id,
+          type: element.type,
+          prizeNum: element.amount,
+          isGeted: element.receiveStatus,
+          spe: "财富88，与“礼”共见证",
+        });
+      }
 
+      if (element.type == 2) {
+        prizeList.push({
+          id: element.id,
+          type: element.type,
+          prizeNum: element.amount,
+          isGeted: element.receiveStatus,
+          spe: "添加专属服务人员企微",
+        });
+      }
+    }
+  });
+});
 
 // 页面挂载后
 onMounted(() => {
-    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(".myPrizeCon", { duration: 0.3, autoAlpha: 0 });
+  gsap.from(".myPrize_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('MyPrize')
+  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) => {
+  console.log("val:", val);
+
+  // 先判断红包是否生效
+  if (val.isGeted == -2) {
+    Toast("红包已过24小时，不能再提现啦");
+  } else {
+    // 红包类型未参与红包： 需先绑定牛卡号
+    if (val.type == 1) {
+      console.log("牛卡号：", store.state.userAccount.nkh);
+      if (
+        store.state.userAccount.nkh == "" ||
+        store.state.userAccount.nkh == undefined
+      ) {
+        // Toast("牛卡号为空，先绑定牛卡号");
+        Dialog.confirm({
+          title: "温馨提示",
+          message: "请先绑定牛卡号",
+          confirmButtonText: "前往绑定",
+        })
+          .then(() => {
+            wx.miniProgram.navigateTo({
+              url: "/subs/bind/pages/login/login?source=zszq",
+            });
+          })
+          .catch(() => {
+            console.log(2);
+            // on cancel
+          });
+      } else {
+        getLuckyBag(val.id);
+      }
     }
 
+    if (val.type == 2) {
+      if (val.isGeted == 0) {
+        if (
+          store.state.userAccount.nkh == "" ||
+          store.state.userAccount.nkh == undefined
+        ) {
+          // Toast("牛卡号为空，先绑定牛卡号");
+          Dialog.confirm({
+            title: "温馨提示",
+            message: "请先绑定牛卡号",
+            confirmButtonText: "前往绑定",
+          })
+            .then(() => {
+              wx.miniProgram.navigateTo({
+                url: "/subs/bind/pages/login/login?source=zszq",
+              });
+            })
+            .catch(() => {
+              console.log(2);
+              // on cancel
+            });
+        } else {
+          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);
 
+      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>
 
 <style lang="scss" scoped>
@@ -101,10 +259,15 @@ const hide = () => {
     align-items: center;
     flex-direction: column;
 
+    // 有奖品央视
+    .prize_has {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
       .cake {
         width: 382px;
         height: 201px;
-            @include bg_pos('../assets/img/pop/cake.png');
+        @include bg_pos("../assets/img/pop/cake.png");
         z-index: 999;
       }
 
@@ -115,7 +278,7 @@ const hide = () => {
         .prize_top {
           width: 550px;
           height: 135px;
-                @include bg_pos('../assets/img/pop/prize_box_top.png');
+          @include bg_pos("../assets/img/pop/prize_box_top.png");
           pointer-events: none;
           display: flex;
           justify-content: center;
@@ -124,21 +287,20 @@ const hide = () => {
           .prize_title {
             width: 267px;
             height: 58px;
-                    @include bg_pos('../assets/img/pop/my_prize.png');
+            @include bg_pos("../assets/img/pop/my_prize.png");
           }
         }
 
         .prize_middle {
           width: 550px;
           height: 190px;
-                @include bg_pos('../assets/img/pop/prize_box_middle.png');
+          @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_item {
             width: 463px;
             height: 67px;
@@ -167,7 +329,6 @@ const hide = () => {
                 font-size: 24px;
                 margin-top: 5px;
               }
-
             }
 
             .buttom {
@@ -180,34 +341,71 @@ const hide = () => {
                 height: 100%;
               }
             }
-
-
           }
         }
 
         .prize_bottom {
           width: 550px;
           height: 50px;
-                @include bg_pos('../assets/img/pop/prize_box_bottom.png');
+          @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');
+      @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");
+      margin-top: 50px;
+    }
+  }
 }
 </style>

src/components/Rules.vue

@@ -1,49 +1,71 @@
 <template>
-    <div class="rulesCon" @touchmove.prevent>
+  <div class="zz" @touchmove.prevent></div>
+  <div class="rulesCon">
     <div class="rules_container">
-            <div class="rule_t"></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 { Toast } from 'vant';
+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()
-
-
-
+const store = useStore();
 
 // 页面挂载前
-onBeforeMount(() => { })
+onBeforeMount(() => {});
 
 // 页面挂载后
 onMounted(() => {
-    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_cls_btn', { duration: 0.3, y: 20, autoAlpha: 0, delay: 0.5 })
-
-})
-
+  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_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%;
   height: 100%;
@@ -67,16 +89,30 @@ const hidePop = () => {
 
     .rule_t {
       @include box(629px, 762px);
-            @include bg_pos('../assets/img/pop/rule_pop.png');
-            pointer-events: none;
+      @include bg_pos("../assets/img/pop/rule_pop.png");
+      //   pointer-events: none;
+      
+      position: relative;
+
+      .rule_text{
+        @include pos(563px, 630px, 30px, 95px);
+        overflow: hidden;
+        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');
+      @include bg_pos("../assets/img/pop/cls_btn.png");
       margin-top: 50px;
     }
   }
-
 }
 </style>

src/components/ServiceList.vue

@@ -1,48 +1,269 @@
 <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="update" v-if="!isgot" @click="updateStaus"></div>
+
+      <!-- 已经添加过：并且领取了红包 -->
+      <div class="is_got_box" v-if="isadd == 1 && isgot"></div>
+
+      <!-- 红包中奖 -->
+      <div class="has_service_box" v-if="isadd == 1 && !isgot && !noPrize">
+        <div class="money">{{ moneyNum }}</div>
+        <div class="get_luckybag" @click="getMoneyFn"></div>
+      </div>
+
+      <!-- 红包未中奖 -->
+      <div class="no_prize" v-if="isadd == 1 && !isgot && noPrize"></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>
-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 { Toast } from 'vant';
+import axios from "axios";
+import { Toast, Dialog } 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 isDraw = ref(false); //是否抽过奖
+const redpacketId = ref(0); //奖品Id
+const moneyNum = ref(""); //奖品金额
+const isBingo = ref(false); //是否中过奖
 
+const noPrize = ref(false); //未中奖
+
+const noFirstAdd = ref(false);
+
+// 刷新添加状态
+const updateStaus = () => {
+  getIsAddService();
+};
+
+const isLost = ref(false);
 
 // 页面挂载前
-onBeforeMount(() => { })
+onBeforeMount(() => {
+  let arr = store.state.userAccount.prizeList;
+
+  arr.forEach((element) => {
+    if (element.type == 2) {
+      console.log("已经抽过》》》》》");
+      isgot.value = true;
+      isDraw.value = true;
+      noFirstAdd.value = true;
+      if (element.receiveStatus == -2) {
+        isLost.value = true;
+      }
+    }
+
+    // if(element.amount != 0){
+    //   isBingo.value = true
+    // }
+  });
+
+  if (store.state.userAccount.isAddCustomer == 1) {
+    isadd.value = 1;
+  }
+
+  if (store.state.userAccount.isAddCustomer == 0 && !noFirstAdd.value) {
+    isadd.value = 0;
+  }
+});
 
 // 页面挂载后
 onMounted(() => {
-    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_cls_btn', { duration: 0.3, y: 20, autoAlpha: 0, delay: 0.5 })
-})
+  gsap.from(".serviceCon", { duration: 0.3, autoAlpha: 0 });
+  gsap.from(".service_box,.has_service_box,.is_got_box", {
+    duration: 0.3,
+    scale: 0.2,
+    autoAlpha: 0,
+    delay: 0.1,
+  });
 
+  gsap.from(".update", {
+    duration: 0.3,
+    y: 20,
+    autoAlpha: 0,
+    delay: 0.3,
+  });
+  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);
+
+      let data = res.data;
+      getMyPrizeRecored();
+
+      if (data.code == 0) {
+        isadd.value = true;
+        redpacketId.value = data.data.id;
+        moneyNum.value = data.data.amount;
+        if (data.data.amount == 0) {
+          noPrize.value = true;
+        }
+      } else {
+        Toast(data.msg);
+      }
+    });
+};
+
+const getMoneyFn = () => {
+  if (!isLost.value) {
+    if (
+      store.state.userAccount.nkh == "" ||
+      store.state.userAccount.nkh == undefined
+    ) {
+      // Toast("牛卡号为空，先绑定牛卡号");
+      Dialog.confirm({
+        title: "温馨提示",
+        message: "请先绑定牛卡号",
+        confirmButtonText: "前往绑定",
+      })
+        .then(() => {
+          wx.miniProgram.navigateTo({
+            url: "/subs/bind/pages/login/login?source=zszq",
+          });
+        })
+        .catch(() => {
+          // on cancel
+        });
+    } else {
+      // 有牛卡号的话领取
+      getLuckyBag();
+    }
+  }
+};
+
+// 领取接口
+const getLuckyBag = () => {
+  service
+    .post(
+      process.env.VUE_APP_API +
+        "/cms-activity/cms88/redpacket/receive/" +
+        redpacketId.value,
+      {}
+    )
+    .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,
+      });
+    });
+};
+
+// 查询是否添加了企微： isInActivityDate 0否 1是
+const getIsAddService = () => {
+  let isInActivityDate = 1;
+  return service
+    .post(
+      process.env.VUE_APP_API +
+        "/cms-activity/cms88/qywx/isadded/" +
+        isInActivityDate,
+      {}
+    )
+    .then((res) => {
+      console.log("是否添加了企微", res.data);
+      // store.state.userAccount.isBirthMon = res.data.data
+      store.commit({
+        type: "updateIsAddCustomer",
+        isAddCustomer: res.data.data,
+      });
+
+      let data = res.data;
+
+      if (data.data == 1) {
+        draw();
       }
 
-
+      if (data.data == 0) {
+        Toast("您还未添加企微，请扫码添加");
+      }
+    });
+};
 </script>
 
 <style lang="scss" scoped>
@@ -59,7 +280,6 @@ const hidePop = () => {
   align-items: center;
   background-color: rgba(0, 0, 0, 0.7);
 
-
   .service_container {
     width: 750px;
     height: 1180px;
@@ -68,13 +288,42 @@ const hidePop = () => {
     align-items: center;
     flex-direction: column;
 
-        .service_box {
-            @include box(573px, 688px);
-            @include bg_pos('../assets/img/pop/service_box.png');
-            pointer-events: none;
+    .is_got_box {
+      @include box(530px, 594px);
+      @include bg_pos("../assets/img/pop/has_service_pop.png");
+    }
+
+    .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");
+      }
+    }
+
+    // 未中奖
+    .no_prize {
+      @include box(573px, 362px);
+      @include bg_pos("../assets/img/pop/no_prize_pop.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 +334,63 @@ const hidePop = () => {
 
         img {
           width: 100%;
-                    height: 100%
+          height: 100%;
         }
       }
     }
+    .update {
+      @include box(274px, 92px);
+      @include bg_pos("../assets/img/update_btn.png");
+      margin-top: 20px;
+    }
 
     .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;
     }
   }
+}
 
+.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/data/imgList.js

@@ -1,4 +1,79 @@
 export default [
-
-
+    require('../assets/img/rule_text.png'),
+    require('../assets/img/zz.png'),
+    require('../assets/img/select_box.png'),
+    require('../assets/img/title_main.png'),
+    require('../assets/img/top_bg.jpg'),
+    require('../assets/img/zhuanpan.png'),
+    require('../assets/img/activity_1.png'),
+    require('../assets/img/activity_2.png'),
+    require('../assets/img/activity_3.png'),
+    require('../assets/img/activity_4.png'),
+    require('../assets/img/activity_5.png'),
+    require('../assets/img/activity_6.png'),
+    require('../assets/img/activity_bg.jpg'),
+    require('../assets/img/activity_box.png'),
+    require('../assets/img/activity_title.png'),
+    require('../assets/img/caidai.png'),
+    require('../assets/img/cloud_bottom.png'),
+    require('../assets/img/cloud_bottom3.png'),
+    require('../assets/img/cloud_left_1.png'),
+    require('../assets/img/cloud_left_2.png'),
+    require('../assets/img/cloud_left_3.png'),
+    require('../assets/img/cloud_right_1.png'),
+    require('../assets/img/cloud_right_2.png'),
+    require('../assets/img/cloud_right_3.png'),
+    require('../assets/img/draw_btn.png'),
+    require('../assets/img/icon_left_1.png'),
+    require('../assets/img/icon_left_2.png'),
+    require('../assets/img/icon_right_1.png'),
+    require('../assets/img/icon_right_2.png'),
+    require('../assets/img/laba.png'),
+    require('../assets/img/li_btn_1.png'),
+    require('../assets/img/li_btn_2.png'),
+    require('../assets/img/li_btn_3.png'),
+    require('../assets/img/li_btn_4.png'),
+    require('../assets/img/li_btn_5.png'),
+    require('../assets/img/li_btn_6.png'),
+    require('../assets/img/logo.png'),
+    require('../assets/img/luckybag.png'),
+    require('../assets/img/luckybag_2.png'),
+    require('../assets/img/luckybag_left.png'),
+    require('../assets/img/luckybag_right.png'),
+    require('../assets/img/luckybag_right_2.png'),
+    require('../assets/img/no_prize_text.png'),
+    require('../assets/img/notice_box.png'),
+    require('../assets/img/p_1.png'),
+    require('../assets/img/p_2.png'),
+    require('../assets/img/p_3.png'),
+    require('../assets/img/p_4.png'),
+    require('../assets/img/p_5.png'),
+    require('../assets/img/prize_btn.png'),
+    require('../assets/img/prize_btn_text.png'),
+    require('../assets/img/prize_text.png'),
+    require('../assets/img/rule_btn.png'),
+    require('../assets/img/rule_btn_text.png'),
+    require('../assets/img/pop/cake.png'),
+    require('../assets/img/pop/cls_btn.png'),
+    require('../assets/img/pop/draw_got_btn.png'),
+    require('../assets/img/pop/eqcode.png'),
+    require('../assets/img/pop/get_luckyBag_btn.png'),
+    require('../assets/img/pop/got_btn.png'),
+    require('../assets/img/pop/got_luckyBag_pop.png'),
+    require('../assets/img/pop/has_service_pop.png'),
+    require('../assets/img/pop/luckybag.png'),
+    require('../assets/img/pop/my_prize.png'),
+    require('../assets/img/pop/no_prize_pop.png'),
+    require('../assets/img/pop/no_recored_pop.png'),
+    require('../assets/img/pop/prize_box.png'),
+    require('../assets/img/pop/prize_box_bottom.png'),
+    require('../assets/img/pop/prize_box_middle.png'),
+    require('../assets/img/pop/prize_box_top.png'),
+    require('../assets/img/pop/rule_pop.png'),
+    require('../assets/img/pop/service_box.png'),
+    require('../assets/img/pop/service_pop_1.png'),
+    require('../assets/img/pop/service_pop_2.png'),
+    require('../assets/img/pop/to_index_btn.png'),
+    require('../assets/img/pop/view_btn.png'),
+    require('../assets/img/pop/ishas_service.png'),
 ];

src/page/Home/Home.vue

@@ -1,112 +1,305 @@
 <template>
   <div class="homePage">
-    <!-- 加载页 -->
-
     <!-- 首页 -->
-    <Index @indexPage="indexPage" />
+    <Index @indexPage="indexPage" v-if="showIndex" />
+
+    <!-- 加载页 -->
+    <Loading v-if="!showIndex" />
   </div>
 </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 { Toast, Dialog } from 'vant';
+import axios from "axios";
+import { Toast, Dialog } from "vant";
 import { useStore } from "vuex";
 // import { get_authorize, get_jssdk } from '@/api/authorize-api'
-import service from "@/api/httpServe"
-import qs from 'qs'
-import h5plugin from '@/utils/plugin'
-import Index from "@/components/Index"
+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";
+import wx from "@/utils/wx-jssdk.1.6.0.js";
 
 
 // 初始化
 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 authCode = ref('')
+const authData = ref("");
+const authCode = ref("");
+const showIndex = ref(false);
 
+// 活动参与人数
+const getActivityNum = () => {
+  return service.post(
+    process.env.VUE_APP_API + "/cms-activity/cms88/user/count/"
+  );
+  // .then((res) => {
+  //   console.log(res.data.data);
+  //   store.commit({
+  //     type: "updateParticipantNum",
+  //     participantNum: res.data.data,
+  //   });
+  // });
+};
+
+// 是否在活动期间生日
+const getBrithday = () => {
+  return service.post(
+    process.env.VUE_APP_API + "/cms-activity/cms88/user/isin/birthday/",{}
+  );
+};
+
+// 查询是否添加了企微： isInActivityDate 0活动前是否存在 1活动期间是否存在
+const getIsAddService = (id) => {
+  let isInActivityDate = id;
+  return service.post(
+    process.env.VUE_APP_API +
+      "/cms-activity/cms88/qywx/isadded/" +
+      isInActivityDate,
+    {}
+  );
+};
+
+// 红包记录
+const getMyPrizeRecored = () => {
+  return service.post(
+    process.env.VUE_APP_API + "/cms-activity/cms88/prize/list",
+    {}
+  );
+};
+
+// 查询员工企业-微信二维码
+const gerCardId = (carid) => {
+  return service.get(
+    process.env.VUE_APP_API + "/cms-activity/cms88/card/qrcode/" + carid
+  );
+};
+
+// 获取绑定的资金账号
+const getInfo = () => {
+  return service.post(
+    process.env.VUE_APP_API + "/cms-activity/cms88/nkh/info",
+    {}
+  );
+};
+
+// 接口数据处理
+const apiAll = () => {
+  // 页面挂载前请求接口
+  Promise.all([
+    gerCardId(store.state.userAccount.cardId),
+    getInfo(),
+    getMyPrizeRecored(),
+    getBrithday(),
+    getActivityNum(),
+    getIsAddService(0),
+    getIsAddService(1),
+  ]).then((result) => {
+    // console.log("接口都请求完成", result);
+    console.log("1.获取企业微信二维码：", result[0].data);
+    console.log("2.获取资金账号：", result[1].data);
+    console.log("3.获取红包记录：", result[2].data);
+    console.log("4.获取生日状态：", result[3].data);
+    console.log("5.获取活动人数：", result[4].data);
+    console.log("6.获取添加企业微信状态【活动前是否存在】：", result[5].data);
+    console.log("7.获取添加企业微信状态【活动期间是否添加】：", result[6].data);
+
+    // 更细二维码
+    store.commit({ type: "updateeEqcodeImg", eqcodeImg: result[0].data.data });
+    // 更新资金账号记录
+    store.commit({ type: "updateeNkh", nkh: result[1].data.data });
+
+    // 更新红包记录
+    store.commit({ type: "updatePrizeList", prizeList: result[2].data.data });
+
+    // 更新生日状态
+    store.commit({ type: "updateBirthMoon", isBirthMon: result[3].data.data });
+
+    // 更新活动人数
+    store.commit({
+      type: "updateParticipantNum",
+      participantNum: result[4].data.data,
+    });
+
+    // 更新添加企微状态：活动前是否存在
+    store.commit({
+      type: "updateisAddCustomerBefore",
+      isAddCustomerBefore: result[5].data.data,
+    });
+
+    // 更新添加企微状态：活动期间
+    store.commit({
+      type: "updateIsAddCustomer",
+      isAddCustomer: result[6].data.data,
+    });
+
+    // 预加载图片资源
+    pageImgsArrLoad(imgList).then(() => {
+      console.log("load done");
+      showIndex.value = true;
+      gsap.from(".homePage", { duration: 0.1, autoAlpha: 0, y: 100 });
+    });
+  });
+};
 
 // 页面未挂载
 onBeforeMount(() => {
+  goBackEvent()
+
+  if (!h5plugin.isWX()) {
+    apiAll();
+  }
+
   console.log("link：", window.location.href);
+  console.log("用户活动信息：", store.state.userAccount);
+
+  console.log("code:", h5plugin.getQueryString("code"));
 
   // 微信环境授权
   if (h5plugin.isWX()) {
-    console.log('code:', h5plugin.getQueryString('code'));
-
-    if (h5plugin.getQueryString('code')) {
+    if (h5plugin.getQueryString("code")) {
       // 存在code的话去换取openid
-      authCode.value = h5plugin.getQueryString('code')
-      getOpenId(authCode.value)
+      authCode.value = h5plugin.getQueryString("code");
+      getOpenId(authCode.value);
     } else {
-      getCode()
+      getCode();
     }
   }
-
-
-  // let token = h5plugin.getQueryString('token')
-  // 更新openid
-  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);
-
-
 });
 
-
 // 页面挂载
 onMounted(() => {
-
+  fontAdpat();
+  // stopBack()
 });
 
-
 // 来自首页的事件
 const indexPage = (actions) => {
   console.log("来自index组件：", actions);
-}
+};
 
-
-// 授权获取code
 const getCode = () => {
   let redirect_uri = window.location.href;
-  service.post(process.env.VUE_APP_API + '/zsApi/xfhdAuthorize', qs.stringify({
-    redirect_uri: redirect_uri
 
-  })).then((res) => {
-    let code = res.data.data
-    authCode.value = res.data.data
-    window.location.href = res.data.data
+  service
+    .post(process.env.VUE_APP_API + "/cms-activity/cms88/zsApi/xfhdAuthorize", {
+      redirect_uri: redirect_uri,
     })
-}
+    .then((res) => {
+      let code = res.data.data;
+      console.log("get code结果3", res);
+      authCode.value = res.data.data;
+      window.location.href = res.data.data;
+      // location.href = res.data.data;
+      // window.open(res.data.data)
+    });
+};
 
 // 授权获取openid
 const getOpenId = (code) => {
-
-  service.post(process.env.VUE_APP_API + '/zsApi/oauthInfo', qs.stringify({
-    code: code
-  })).then((res) => {
-
+  service
+    .post(
+      process.env.VUE_APP_API + "/cms-activity/cms88/zsApi/oauthInfo",
+      // qs.stringify({
+      //   code: code
+      // })
+      {
+        code: code,
+      }
+    )
+    .then((res) => {
       if (res.data.code == 0) {
         console.log("后端返回的openid：", res.data);
         // 更新openid
-      store.commit({ type: 'updateXGLOpenid', openid: res.data.data })
-      console.log("用户活动信息2：", store.state.userAccount);
-
-
+        store.commit({ type: "updateXGLOpenid", openid: res.data.data });
+        apiAll();
       }
+    });
+};
 
-  })
+// 资源预加载器
+const imgPreloader = (url) => {
+  return new Promise((resolve, reject) => {
+    let image = new Image();
+    image.src = url;
+    image.onload = () => {
+      resolve();
+    };
+    image.onerror = () => {
+      reject();
+    };
+  });
+};
+
+// 加载进度监控
+const pageImgsArrLoad = (imgs) => {
+  let promiseArr = [];
+  imgs.forEach((element) => {
+    promiseArr.push("img", imgPreloader(element));
+  });
+  return Promise.all(promiseArr);
+};
+
+// 字体适配
+const fontAdpat = () => {
+  if (
+    typeof WeixinJSBridge == "object" &&
+    typeof WeixinJSBridge.invoke == "function"
+  ) {
+    handleFontSize();
+  } else {
+    if (document.addEventListener) {
+      document.addEventListener("WeixinJSBridgeReady", handleFontSize, false);
+    } else if (document.attachEvent) {
+      document.attachEvent("onWeixinJSBridgeReady", handleFontSize);
     }
+  }
+  function handleFontSize() {
+    // 设置网页字体为默认大小
+    WeixinJSBridge.invoke("setFontSizeCallback", { fontSize: 0 });
+    // 重写设置网页字体大小的事件
+    WeixinJSBridge.on("menu:setfont", function () {
+      WeixinJSBridge.invoke("setFontSizeCallback", { fontSize: 0 });
+    });
+  }
+};
 
+// 禁止返回
+const stopBack = () => {
+  history.pushState(null, null, document.URL);
 
+  window.addEventListener("popstate", function () {
+    // history.pushState(null, null, document.URL);
+    history.back(-1);
+  });
+};
+
+// 监听后退事件
+const goBackEvent = () => {
+  history.pushState({ page: 1 }, null, window.location.href);
+  //然后监听popstate事件
+  window.addEventListener("popstate", (event) => {
+    console.log("退出");
+    wx.miniProgram.navigateBack();
+  });
+};
 </script>
 
 <style lang="scss" scoped>
@@ -119,7 +312,6 @@ const getOpenId = (code) => {
   user-select: none;
 }
 
-
 div {
   color: #fff;
 }
@@ -133,6 +325,6 @@ div {
   position: absolute;
   top: 0;
   left: 0;
-  background: rgb(255, 255, 255);
+  background: #ffd195;
 }
 </style>

src/router/index.js

@@ -3,7 +3,8 @@ import { createRouter, createWebHashHistory } from 'vue-router';
 const router = createRouter({
     history: createWebHashHistory(),
     routes: [
-        { path: '/', component: () => import('@/views/Home.vue') }
+        { path: '/', component: () => import('@/views/Home/Home.vue') },
+        { path: '/login', component: () => import('@/views/Home/Login.vue') }
     ]
 });
 

src/store/index.js

@@ -1,21 +1,30 @@
 import { createStore } from 'vuex';
 import h5plugin from "@/utils/plugin.js"
 
+
+
 export default createStore({
     // 数据源
     state: {
         userAccount: {
-            xglOpenid: 'openid12138',      //用户openid
-            token: '13f88993882b4dc0832351566c11a1eb',        //用户token
-            cardId: '94207',                 //carid
+            // xglOpenId: 'o9B_fvjtyh2KELQYc2t9A3MEh7JQ',      //用户openid
+            xglOpenId: '',      //用户openid
+            // xglOpenId: h5plugin.getQueryString('openid'),      //用户openid
+            token: h5plugin.getQueryString('token'),        //用户token
+            cardId: h5plugin.getQueryString('cardId'),                 //carid
             nkh: '',                 //牛卡号
             isDraw: false,              //是否抽过奖
             isHasAccount: false,        //是否存在牛卡号
-            isAddCustomer: false,       //是否添加过服务人员
+            isAddCustomer: 0,       //活动期间内是否添加过服务人员
+            isAddCustomerBefore:0,  //活动前是否存在服务人员
             isHasPrize: [],             //是否存在奖品
-            participantNum: 1213821,     //活动参与人数
-            prizeResult: 73.11,        //中奖金额
-            eqcodeImg: ''              //二维码
+            participantNum: 0,     //活动参与人数
+            prizeResult: 0,        //中奖金额
+            eqcodeImg: '',              //二维码
+            isBirthMon: 1,     //生日是否处于当月
+            prizeList: [],       //奖品列表
+            uuid: h5plugin.getQueryString('uuid'),                 //carid
+
         },
 
     },
@@ -26,7 +35,7 @@ export default createStore({
     mutations: {
         // 更新信广龙openid
         updateXGLOpenid(state, val) {
-            state.userAccount.xglOpenid = val.openid
+            state.userAccount.xglOpenId = val.openid
         },
 
         // 更新token
@@ -34,22 +43,46 @@ export default createStore({
             state.userAccount.token = val.token
         },
 
+        // 更新牛卡号
+        updateeNkh(state,val){
+            state.userAccount.nkh = val.nkh
+        },
+
+        // 更新cardId
         updateCardId(state,val){
             state.userAccount.cardId = val.cardId
         },
 
-        updateNkh(state,val){
-            state.userAccount.nkh = val.nkh
-        },
-
+        // 更新二维码
         updateeEqcodeImg(state,val){
             state.userAccount.eqcodeImg = val.eqcodeImg
         },
 
+        // 更新活动参与人数
         updateParticipantNum(state,val){
             state.userAccount.participantNum = val.participantNum
         },
 
+        // 更新生日是否处于当月状态
+        updateBirthMoon(state,val){
+            state.userAccount.isBirthMon = val.isBirthMon
+        },
+
+        // 更新活动期间内是否添加过企微状态
+        updateIsAddCustomer(state,val){
+            state.userAccount.isAddCustomer = val.isAddCustomer
+        },
+
+        // 更新活动前是否存在企微状态
+        updateisAddCustomerBefore(state,val){
+            state.userAccount.isAddCustomerBefore = val.isAddCustomerBefore
+        },
+
+        // 更新奖品列表
+        updatePrizeList(state,val){
+            state.userAccount.prizeList = val.prizeList
+        }
+        
     },
     // 改变方法：异步
     actions: {},