<template>
  <view class="container">
    <view class="content" style="width: 100%;">
      <home v-if="navIndex === 0" />
      <mine v-else />
    </view>
    <nav-bottom @change="onNavChange" @scan="onScan" class="nav-bottom"></nav-bottom>
  </view>
</template>

<script>
import Home from './components/home.vue';
import Mine from './components/mine.vue';

export default {
  components: { Home, Mine },
  data() {
    return {
      navIndex: 0,
    };
  },
  onLoad() {},
  methods: {
    /**
     * 监听nav-bottom的点击事件
     * @param {number} index nav-bottom按钮的索引值
     */
    onNavChange(index) {
      this.navIndex = index;
    },

    // 扫一扫
    onScan() {
      console.log('扫一扫');
    },
  },
};
</script>

<style scoped lang="scss">
.container {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  height: 100vh;

  .content {
    flex: 1;
  }
  .nav-bottom {
    width: 100%;
  }
}
</style>
