添加资源预加载和首页效果
This commit is contained in:
tcubic
parent
ccee9819d8
commit
d67f516e7b
@ -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('项目开发中');
|
||||
|
||||
@ -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'),
|
||||
];
|
||||
@ -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>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user