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:true}" v-if="(footCheck === 'home')">
    <HomePage ref="home"></HomePage>
  </view>
  <view :class="{show:true}">
    <!--    <HomePage v-if="(footCheck === 'order')"></HomePage>-->
  </view>
  <view :class="{show:true}" v-if="(footCheck === 'shop')">
    <ShopPage ref="shop" current="current"></ShopPage>
  </view>
  <view :class="{show:true}" v-if="(footCheck === 'user')">
    <UserPage></UserPage>
  </view>
  <u-tabbar
      :value="value1"
      @change="change1"
      custom-style="z-index:9999;"
  >
    <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>
  <u-modal :show="modalShow" :content="modalContent" @confirm="modalShow = false"></u-modal>
  <uv-popup ref="notDone" round="20" :safeAreaInsetBottom="false">
    <view class="not-done-container" style="padding:0 100rpx;">
      <view class="not-done-icon">
        <u-image mode="widthFix" height="400" width="400" :src="staticImage.popIcon"></u-image>
      </view>
      <view class="not-done-title" style="margin-bottom:74rpx;">
        <u-text text="暂未开启，敬请期待" align="center" color="#020B18" size="28"></u-text>
      </view>
      <view class="not-done-btn" style="margin-bottom:60rpx;">
        <u-button
            text="确定"
            color="#FF9545"
            shape="circle"
            custom-style="color:#020B18;font-size:36rpx;height:80rpx;max-width:320rpx;"
            @click="this.$refs.notDone.close();"
        ></u-button>
      </view>
    </view>
  </uv-popup>
</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 {
      modalShow:false,
      modalContent:'暂未开启,敬请期待',
      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,
      staticImage:{
        popIcon:imghost+ '/not-done-icon.png',
      },
    }
  },
  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,index) {
      if (item.name === 'disabled') {
        this.$refs.notDone.open('center');
        return false;
      }
      if(item.name === 'shop'){
        uni.showLoading({title:'加载中'});
      }
      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) => {
        if(res.code === 200) {
          uni.setStorageSync('user', res.data);
          this.$store.commit('userInfo', res.data);
        }
      });
    },
    openNotDone(){
      this.$refs.notDone.open('center');
    },
    // 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;
}
//@keyframes move {
//  0% {
//    display: block;
//    position: relative;
//    left:-100%;
//  }
//
//  100% {
//    left:0;
//  }
//}
//
//.show {
//  animation: move .5s;
//}
</style>