添加资源预加载和首页效果

src/components/Index.vue

@@ -161,16 +161,18 @@ const activityList = reactive([
 // 页面挂载前
 onBeforeMount(() => {
 	// 获取企微二维码
-	gerCardId(94207);
+
-	getInfo();
-	getMyPrizeRecored();
-	getBrithday();
-	getActivityNum();
-  getIsAddService()
 });
 
 // 页面挂载后
-onMounted(() => {});
+onMounted(() => {
+  gsap.from('.title_main',{duration:0.5,scale:0})
+  gsap.from('.cloud_left_1,.cloud_left_2,.cloud_left_3',{duration:0.5,x:-200})
+  gsap.from('.cloud_right_1,.cloud_right_2',{duration:0.5,x:200})
+  gsap.from('.lucky_bag_2,.lucky_bag,.notice',{duration:0.5,y:200})
+  gsap.from('.activityCon,.zhuanpan',{duration:0.5,y:200,autoAlpha:0})
+
+});
 
 const btn = () => {
 	// Toast('项目开发中');

src/data/imgList.js

@@ -1,4 +1,70 @@
 export default [
-
+    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_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_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/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/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/rule_btn.png'),
+    require('../assets/img/rule_btn_text.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/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/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'),
 ];

src/page/Home/Home.vue

@@ -3,7 +3,7 @@
     <!-- 加载页 -->
 
     <!-- 首页 -->
-    <Index @indexPage="indexPage" />
+    <Index @indexPage="indexPage" v-if="showIndex" />
   </div>
 </template>
 
@@ -18,6 +18,7 @@ import service from "@/api/httpServe"
 import qs from 'qs'
 import h5plugin from '@/utils/plugin'
 import Index from "@/components/Index"
+import imgList from '@/data/imgList'
 
 
 // 初始化
@@ -31,12 +32,100 @@ const { proxy } = getCurrentInstance();  //初始化全局方法：plugin工具
 // 变量定义
 const authData = ref('')
 const authCode = ref('')
+const showIndex = ref(false)
+
+
+// 活动参与人数
+const getActivityNum = () => {
+	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 = () => {
+	service
+		.post(
+			process.env.VUE_APP_API + "/cms-activity/cms88/user/isin/birthday",
+			{}
+		)
+		.then((res) => {
+			console.log(res);
+		});
+};
+
+// 查询是否添加了企微： isInActivityDate 0否 1是
+const getIsAddService = ()=>{
+  let isInActivityDate = 0
+  service
+    .post(process.env.VUE_APP_API + "/cms-activity/cms88/qywx/isadded/"+ isInActivityDate,{})
+    .then((res) => {
+      console.log("是否添加了企微",res);
+    });
+}
+
+const getMyPrizeRecored = ()=>{
+  service
+    .post(process.env.VUE_APP_API + "/cms-activity/cms88/prize/list",{})
+    .then((res) => {
+      console.log("红包记录：",res);
+    });
+}
+
+
+// 查询员工企业微信二维码
+const gerCardId = (carid) => {
+	service
+		.get(
+			process.env.VUE_APP_API + "/cms-activity/cms88/card/qrcode/" + carid
+		)
+		.then((res) => {
+			console.log("企微二维码：", res.data.data);
+			store.commit({
+				type: "updateeEqcodeImg",
+				eqcodeImg: res.data.data,
+			});
+		});
+};
+
+// 获取绑定的资金账号
+const getInfo = () => {
+	service
+		.post(process.env.VUE_APP_API + "/cms-activity/cms88/nkh/info", {})
+		.then((res) => {
+			console.log("资金账号：", res);
+		});
+};
 
 
 // 页面未挂载
 onBeforeMount(() => {
+  gerCardId(store.state.userAccount.cardId);
+	getInfo();
+	getMyPrizeRecored();
+	getBrithday();
+	getActivityNum();
+  getIsAddService()
+
+  // 预加载图片资源
+  pageImgsArrLoad(imgList)
+  .then(() => {
+    console.log("load done");
+    showIndex.value =true
+    gsap.from('.homePage',{duration:0.1,autoAlpha:0,y:100})
+  })
+
+
   console.log("link：",window.location.href);
 
+
     // 从URL中获取token等数据
   // store.commit({ type: "updateToken", token: h5plugin.getQueryString('token') });
   // store.commit({ type: "updateCardId", cardId: h5plugin.getQueryString('cardId') });
@@ -56,11 +145,6 @@ onBeforeMount(() => {
     }
   }
 
-
-
-
-
-
 });
 
 
@@ -119,6 +203,30 @@ const getOpenId = (code) => {
 }
 
 
+
+// 资源预加载器
+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);
+};
+
 </script>
 
 <style lang="scss" scoped>