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')}" v-if="(footCheck === 'home')">
    <HomePage ref="home"></HomePage>
  </view>
  <view :class="{show:(footCheck === 'order')}">
    <!--    <HomePage v-if="(footCheck === 'order')"></HomePage>-->
  </view>
  <view :class="{show:(footCheck === 'shop')}" v-if="(footCheck === 'shop')">
    <ShopPage ref="shop" current="current"></ShopPage>
  </view>
  <view :class="{show:(footCheck === 'user')}" v-if="(footCheck === 'user')">
    <UserPage></UserPage>
  </view>
  <u-tabbar
      :value="value1"
      @change="change1"

  >
    <FooterNav ref="footNav" :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 + "/foot-1",
          name: 'home',
          title: '暖新人',
        },
        {
          image: imghost + "/foot-2",
          name: 'disabled',
          title: '暖新活动',
        },
        {
          image: imghost + "/foot-3",
          name: 'shop',
          title: '暖新商城',
        },
        {
          image: imghost + "/foot-4",
          name: 'user',
          title: '我的',
        },
      ],
      current:0,
    }
  },
  onLoad(option) {
    console.log(option)
    if (option.footCheck) {
      this.buttonGroup.forEach((item,index) => {
        if(item.name === option.footCheck){
          console.log('foot',item)
          this.footCheck = this.$refs.footNav.footCheck = item.name;
          this.title = item.title;
        }
      })
    }
    if(option.tabCheck){
      // this.$refs.shop.tabCheck = option.tabCheck;
      // this.$refs.shop.list.forEach((item,index) => {
      //   if(item.id === option.tabCheck){
      //     console.log('current',index)
      //     this.$refs.shop.current = index;
      //   }
      // })
      if(option.tabCheck === 'item'){
        uni.setStorageSync('shopMore',true);
      }
    }
  },
  onReady() {
    let that = this;
    // let height = api.wxSystemInfo().system.windowHeight
    this.marginTop = (uni.$u.getPx(44) + uni.$u.sys().statusBarHeight);
    this.$refs.home.marginTop = this.marginTop;
  },
  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 * 3,
          fontSize: 32,
          safeAreaInsetTop: false
        })
        return false;
      }
      this.footCheck = item.name;
      this.title = item.title;
      let token = uni.getStorageSync('token');
      if (token && (this.footCheck === 'user' || this.footCheck === 'home')) {
        this.getUserExtend();
      }
    },
    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', res.data);
        this.$store.commit('userInfo', res.data);
      });
    }
    // store.
  },
  onPageScroll(res) {
    if (res.scrollTop <= 20) {
      uni.$emit('isTop', true);
    } else {
      uni.$emit('isTop', false);
    }

  },
  onShow() {

  },
  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');
    if (token) {
      this.getUserExtend();
    }
  },
  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;
}
::v-deep .u-text__price{
  display:none;
}

@keyframes show {
  0% {
    display: block;
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

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