<template>
  <LayoutApp title="邀新返佣" :show-back="false">
    <div class="body" ref="body">
      <Banner></Banner>
      <List></List>
    </div>
    <Footer class="footer"></Footer>
  </LayoutApp>
</template>

<script>
import Layout from '../components/layout/layout-app';
import Footer from './components/footer';
import Banner from './components/banner';
import List from './components/list';

import {createNamespacedHelpers} from 'vuex';

const {mapActions} = createNamespacedHelpers('gain');

export default {
  provide() {
    return {
      getBody: this.getBodyElem
    };
  },
  mounted() {
    this.fetchResource();
  },
  methods: {
    ...mapActions(['fetchResource']),
    getBodyElem(found) {
      return found && found(this.$refs.body);
    }
  },
  components: {
    LayoutApp: Layout,
    Footer,
    Banner,
    List
  }
};
</script>

<style lang="scss" scoped>
.footer {
  position: absolute;
  bottom: 0;
  width: 100%;
  z-index: 100;
}

.body {
  height: 100%;
  overflow-y: auto;
}
</style>