From d67f516e7bf77f4c22d881b6a5b279b78fe13bb1 Mon Sep 17 00:00:00 2001 From: tcubic <123456> Date: Wed, 3 Aug 2022 11:27:43 +0800 Subject: [PATCH] =?UTF-8?q?=E6=B7=BB=E5=8A=A0=E8=B5=84=E6=BA=90=E9=A2=84?= =?UTF-8?q?=E5=8A=A0=E8=BD=BD=E5=92=8C=E9=A6=96=E9=A1=B5=E6=95=88=E6=9E=9C?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/Index.vue | 16 +++--- src/data/imgList.js | 70 ++++++++++++++++++++++- src/page/Home/Home.vue | 120 +++++++++++++++++++++++++++++++++++++-- 3 files changed, 191 insertions(+), 15 deletions(-) diff --git a/src/components/Index.vue b/src/components/Index.vue index e6ebb17..a5d5554 100644 --- a/src/components/Index.vue +++ b/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('项目开发中'); diff --git a/src/data/imgList.js b/src/data/imgList.js index e998de1..d2138e3 100644 --- a/src/data/imgList.js +++ b/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'), ]; \ No newline at end of file diff --git a/src/page/Home/Home.vue b/src/page/Home/Home.vue index 96e1908..4f4276a 100644 --- a/src/page/Home/Home.vue +++ b/src/page/Home/Home.vue @@ -3,7 +3,7 @@ - + @@ -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); +}; +