<template> <HeaderNav :title="title"></HeaderNav> <view :class="{show:(footCheck === 'home')}"> <HomePage v-if="(footCheck === 'home')"></HomePage> </view> <view :class="{show:(footCheck === 'order')}" v-if="$store.state.userInfo.store_id > 0"> <OrderPage ref="orderList" v-if="(footCheck === 'order')"></OrderPage> </view> <view :class="{show:(footCheck === 'chat')}"> <ChatPage v-if="(footCheck === 'chat')"></ChatPage> </view> <view :class="{show:(footCheck === 'user')}"> <UserPage v-if="(footCheck === 'user')" @tabNavTo="footSelect"></UserPage> </view> <RightNav v-if="rightShow"></RightNav> <FooterNav :foot-group="footGroup" @change="footSelect" :footCheck="current"></FooterNav> <u-modal :show="show" title="登录" content="当前未登录是否前往登录" @confirm="userLogin" @cancel="this.show = false;" :closeOnClickOverlay="true" showCancelButton></u-modal> </template> <script> import FooterNav from '@/components/FooterNav/Index.vue'; import RightNav from '@/components/RightNav/Index.vue'; import HeaderNav from '@/components/HeaderNav/Index.vue'; import HomePage from '@/pages/Index/components/HomePage/Index.vue'; import OrderPage from '@/pages/Index/components/OrderPage/Index.vue'; import ChatPage from '@/pages/Index/components/ChatPage/Index.vue'; import UserPage from '@/pages/Index/components/UserPage/Index.vue'; import {imghost} from "@/config/host"; import {UserCache} from "@/config/config.js"; import log from "@/utils/log"; export default { components: { FooterNav, RightNav, HeaderNav, HomePage, OrderPage, ChatPage, UserPage, }, data() { return { current:0, footCheck: 'home', show: false, title: '标题', content: 'uview-plus的目标是成为uni-app生态最优秀的UI框架', footGroup: [{ image: imghost + "/static/image/foot-nav-button-one", name: 'home', title:'汪汪行天下', is_show:true }, { image: imghost + "/static/image/foot-nav-button-two", name: 'order', title:'订单', is_show: UserCache.get('store_id', 0) > 0 }, { image: imghost + "/static/image/foot-nav-button-three", name: 'chat', title:'在线沟通', is_show:true }, { image: imghost + "/static/image/foot-nav-button-four", name: 'user', title:'', is_show:true }, ], rightShow:false, } }, onLoad(option) { this.footSelect(option?.foot_check ?? 0); }, methods: { footSelect(index){ this.current = index; this.footCheck = this.footGroup[index].name; this.title = this.footGroup[index].title; this.rightShow = this.footCheck === 'home' || this.footCheck === 'user'; }, userLogin() { uni.navigateTo({ url:'/pages/Login/index' }) this.show = false; }, // store. }, onReachBottom() { log(this.footCheck); if(this.footCheck === 'order'){ this.$refs.orderList.getOrderList(); } }, onPageScroll(res) { if (res.scrollTop <= 20) { uni.$emit('isTop', true); } else { uni.$emit('isTop', false); } }, created() { // this.pagePadding = (api.navHeight().navPaddingTop+ // api.navHeight().navHeight + (api.navHeight().headerPadding *2)) this.footGroup = this.footGroup.filter(v => v.is_show ); }, mounted() { this.title = this.$store.state.title; let token = uni.getStorageSync('token'); if (!token) { this.show = true; }else{ let user = UserCache.get(); this.$store.commit('userInfo', user); let userExtends = UserCache.extGet(); this.$store.commit('userExtends', userExtends); } }, watch: { "$store.state.footCheck": { handler(newVal, oldVal) { this.footCheck = newVal; } }, "$store.state.title": { handler(newVal, oldVal) { this.title = newVal; } } } } </script> <style lang="scss"> @keyframes show { 0% { display: block; opacity: 0; } 100% { opacity: 1; } } .show { animation: show .5s; } </style>