pet_uni/pages/Index/index.vue

<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 ref="chat" v-if="(footCheck === 'chat')"></ChatPage>
	</view>
	<view :class="{show:(footCheck === 'user')}">
		<UserPage v-if="(footCheck === 'user')" @tabNavTo="footSelect"></UserPage>
	</view>
	<RightNav ref="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";
  import {userDetail, userExtends} from "@/api/user";
  import {allChatCount, waitOrderCount} from "../../api/other";
	export default {
		components: {
			FooterNav,
			RightNav,
			HeaderNav,
			HomePage,
			OrderPage,
			ChatPage,
			UserPage,
		},
		data() {
			return {
        inter:{},
        current:0,
				footCheck: 'home',
				show: false,
				title: '标题',
				content: 'uview-plus的目标是成为uni-app生态最优秀的UI框架',
        footGroup: [
          {
            image: imghost + "/foot-nav-button-one",
            name: 'home',
            title: '汪汪行天下',
            is_show: true,
            badge:0,
          },
          {
            image: imghost + "/foot-nav-button-two",
            name: 'order',
            title: '订单',
            is_show: false,
            badge:0,
          },
          {
            image: imghost + "/foot-nav-button-three",
            name: 'chat',
            title: '在线沟通',
            is_show: true,
            badge:0,
          },
          {
            image: imghost + "/foot-nav-button-four",
            name: 'user',
            title: '',
            is_show: true,
            badge:0,
          },
        ],
        rightShow:false,
			}
		},
		onLoad(option) {
      this.footSelect(option?.foot_check ?? 0);
      this.showUserInfo();
		},
		methods: {
      getCountBadges(type = 1){
        allChatCount({type:type}).then(res => {
          console.log(res)
          this.footGroup[2].badge = res.data.count;
        });
        waitOrderCount().then(res => {
          this.footGroup[1].badge = res.data.count;
        })
      },
      footSelect(index){
        if(index === 1|| index === 2){
          if (!uni.getStorageSync('token')) {
           this.userLogin();
            return false;
          }
        }
        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.
      showUserInfo(){
        let token = uni.getStorageSync('token');
        if(token){
          userDetail().then(res => {
            this.$store.commit('userInfo', UserCache.setAndReturn(res.data));
          })
          userExtends().then(res => {
            this.$store.commit('userExtends', UserCache.extSetAndReturn(res.data));
          })
        }
      }
		},
		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);
			}

		},
    onShow(){
      console.log(this.footGroup)
      this.footGroup[1].is_show = (UserCache.get('store_id', 0) > 0)
      // this.footGroup[2].is_show = (UserCache.get('store_id', 0) === 0)
      if(this.footCheck === 'chat'){
        this.$refs.chat.chatShow();
      }
      if(this.footCheck === 'order'){
        this.$refs.orderList.orderShow();
      }
      this.$emit('getMsgNumber',1)

      let user = uni.getStorageSync('user');
      if(user){
        let type = 1;
        if(user.is_waitstaff===1){
          type = 3;
        } else if (user.store_id > 0) {
          type = 2;
        } else {
          type = 1;
        }
        if(this.inter)clearInterval(this.inter);
        this.inter = setInterval(() => {
          this.getCountBadges(type);
        },5000)
      }
    },
		created() {
			// this.pagePadding = (api.navHeight().navPaddingTop+
			// api.navHeight().navHeight + (api.navHeight().headerPadding *2))
      // this.footGroup = this.footGroup.filter(v => v.is_show );
		},
    onHide() {
      clearInterval(this.inter);
    },
    // destroyed() {
    //   clearInterval(this.inter);
    // },
		mounted() {

      // uni.getClipboardData({
      //   success: function (res) {
      //     console.log('res',res)
      //     uni.showModal({
      //       content:JSON.stringify(res.data)
      //     })
      //   },fail:function(err){
      //     console.log('err',err)
      //   }
      // });
			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);
			}
      this.rightShow = (this.footCheck === 'home')
		},
		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>