warm_man/pages/Index/index.vue

<template>
	<u-navbar
      :title="title"
      :auto-back="false"
      left-icon=""
      left-icon-size="40rpx"
      :safe-area-inset-top="true"
      :placeholder="true"
      :bgColor="(footCheck === 'shop')?'#ffffff':'transparent'"
  ></u-navbar>
	<view :class="{show:(footCheck === 'home')}">
		<HomePage v-show="(footCheck === 'home')"></HomePage>
	</view>
	<view :class="{show:(footCheck === 'order')}">
<!--    <HomePage v-show="(footCheck === 'order')"></HomePage>-->
	</view>
	<view :class="{show:(footCheck === 'shop')}">
    <ShopPage ref="shop" v-show="(footCheck === 'shop')"></ShopPage>
	</view>
	<view :class="{show:(footCheck === 'user')}">
    <UserPage v-show="(footCheck === 'user')"></UserPage>
	</view>
  <u-tabbar
      :value="value1"
      @change="change1"

  >
    <FooterNav :button="buttonGroup" style="width:100%;" @change="footSelect"></FooterNav>
  </u-tabbar>
	<u-modal :show="show" title="登录" content="当前未登录是否前往登录" @confirm="userLogin" @cancel="this.show = false;"
		:closeOnClickOverlay="true" showCancelButton></u-modal>
  <u-notify ref="uNotify" message="Hi uview-plus"></u-notify>

</template>

<script>
	import RightNav from '@/components/RightNav/index.vue';
	import FooterNav from '@/components/FooterNav/index.vue';
	import HeaderNav from '@/components/HeaderNav/index.vue';
	import HomePage from '@/pages/Index/components/HomePage/index.vue';
	import UserPage from '@/pages/Index/components/UserPage/index.vue';
	import ShopPage from '@/pages/Index/components/ShopPage/index.vue';
	import {
		testLogin,
		userDetail,
		userExtends
	} from "@/api/user";
  import {imghost} from "@/config/host";

	export default {
		components: {
			RightNav,
			HeaderNav,
			HomePage,
			UserPage,
      FooterNav,
      ShopPage,
		},
		data() {
			return {
        marginTop:0,
        value1: 0,
				footCheck: 'home',
				show: false,
				title: '标题',
        buttonGroup:[{
          image: imghost + "/static/image/foot-1",
          name: 'home',
          title: '暖新人',
        },
          {
            image: imghost + "/static/image/foot-2",
            name: 'disabled',
            title: '暖新活动',
          },
          {
            image: imghost + "/static/image/foot-3",
            name: 'shop',
            title: '暖新商城',
          },
          {
            image: imghost + "/static/image/foot-4",
            name: 'user',
            title: '我的',
          },],
			}
		},
		onLoad() {

		},
    onReady() {
      let that = this;
      // let height = api.wxSystemInfo().system.windowHeight
      this.marginTop = (uni.$u.getPx(44) + uni.$u.sys().statusBarHeight)
    },
    onReachBottom() {
      if(this.footCheck === 'shop'){
        this.$refs.shop.getRoomList();
      }
    },
		methods: {
      footSelect(item){
        if(item.name === 'disabled'){
          this.$refs.uNotify.show({
            top: this.marginTop+'px',
            type: 'warning',
            message: '暂未开放,敬请期待',
            duration: 1000 * 5,
            fontSize: 32,
            safeAreaInsetTop:false
          })
          return false;
        }
        this.footCheck = item.name;
        this.title = item.title;
      },
      change1(e) {
        this.value1=e
      },
			userLogin() {
				testLogin({
					user_id: 1
				}).then((res) => {
					uni.setStorageSync('token', res.data);
					this.show = false;
					this.getUserDetail();
				});

			},
			getUserDetail() {
				userDetail().then((res) => {
					uni.setStorageSync('user', res.data);
					this.$store.commit('userInfo', res.data);
				});
			},
			getUserExtend() {
				userExtends().then((res) => {
					uni.setStorageSync('user-extends', res.data);
					this.$store.commit('userExtends', res.data);
				});
			}
			// store.
		},
		onPageScroll(res) {
			if (res.scrollTop <= 20) {
				uni.$emit('isTop', true);
			} else {
				uni.$emit('isTop', false);
			}

		},
    onShow() {
      console.log('show123123')
      this.$nextTick(() => {

      })
    },
		created() {
			// this.pagePadding = (api.navHeight().navPaddingTop+
			// api.navHeight().navHeight + (api.navHeight().headerPadding *2))
		},
		mounted() {
			this.title = this.$store.state.title;
			// let token = uni.getStorageSync('token');
			// let user = uni.getStorageSync('user');
			// let userExtends = uni.getStorageSync('user-extends');
			// if (!token) {
			// 	this.show = true;
			// } else if (!user) {
			// 	this.getUserDetail();
			// } else if (!userExtends) {
			// 	this.getUserExtend();
			// } else {
			// 	this.$store.commit('userInfo', user);
			// 	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">
  ::v-deep .u-tabs__wrapper__nav__line{
    left:24rpx;
  }
	@keyframes show {
		0% {
			display: block;
			opacity: 0;
		}

		100% {
			opacity: 1;
		}
	}

	.show {
		animation: show .5s;
	}
</style>