<template>
  <div class="index-page">
    <img src="../../assets/img/index-bg.jpg" class="index-bg"/>
    <img src="../../assets/img/index-bg-cover.png" class="index-bg-cover" />
    <img src="../../assets/img/index-start-button.jpg" class="index-start-button" @click="handleStart"/>
    <!-- <navigator
    v-if="config.more_fun && !config.more_fun.hide"
    class="navigator"
    path=""
    target="miniProgram" open-type="navigate" :app-id="config.more_fun.appid" > -->
    <img src="../../assets/img/btn-more.png" class="btn-more" @tap="handleMore" v-if="config.more_fun && !config.more_fun.hide" />
    <!-- </navigator> -->
  </div>
</template>

<script>
import store from '@/store'
export default {
  computed: {
    config() {
      return store.state.indexPage.config
    }
  },
  onLoad () {
    console.log(this.$root.$mp.query, this.$root.$mp.appOptions, this.$root.$mp)
  },
  onPageScroll () {
    console.log('page is scroll')
  },
  beforeCreate () {
    console.log('page is before create')
  },
  data () {
    return {
      userInfo: {}
    }
  },

  components: {
  },

  methods: {
    handleStart() {
      wx.navigateTo({
        url: '/pages/counter/main'
      })
    },
    handleMore() {
      wx.navigateToMiniProgram({
        appId: this.config.more_fun.appid,
        path: '',
        success() {
          console.log('打开成功')
        }
      })
    }
  },

  created () {
  }
}
</script>

<style scoped lang="scss">
.index-page {
  position: relative;
  width: 100%;
  height: 100vh;
  background: #c9baa8;
  text-align: center;
  padding: 30rpx 0 0;
}
.index-bg {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
}
.index-bg-cover {
  position: relative;
  width: 659rpx;
  height: 798rpx;
  z-index: 1;
}
.index-start-button {
  position: relative;
  width: 489rpx;
  height: 123rpx;
  z-index: 3;
  margin: 50rpx 0 30rpx;
}
.btn-more {
  position: relative;
  width: 489rpx;
  height: 123rpx;
  z-index: 4;
}
</style>
