<template>
  <div class="background">
    <div class="text">
      <p>随时随地，发生有趣事。</p>
      <p>上传故事，分享你的研学之旅！</p>
    </div>
    <ul class="icons">
      <li @click="goFoot">
        <img src="../assets/headGS.png" alt="" />
        <p>发布故事</p>
      </li>
      <li @click="saoYiSao">
        <img src="../assets/headDK.png" alt="" />
        <p>一键打卡</p>
      </li>
    </ul>
    <div class="close">
      <van-icon name="cross" @click="close" />
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      background: false,
      userInfo: '',
    }
  },
  created() {
    var userInfo = localStorage.getItem('userInfo')
    if (userInfo) {
      this.userInfo = JSON.parse(userInfo)
    }
  },
  methods: {
    close() {
      this.$parent.backgroundShow('')
    },
    goFoot() {
      this.$router.push({ path: '/Foot', query: { tabId: 1 } })
    },
    saoYiSao() {
      let isLogin = this.checkLogin()
      if (!isLogin) return
      if (process.env.NODE_ENV === 'production' && this.common.isWeiXin()) {
        location.href = `http://sao315.com/w/api/saoyisao?redirect_uri=https://zlyanxue.cn/wap/index.html%23/MyClassList`
      } else {
        this.$router.push({ name: 'MyClassList', query: { qrresult: '188' } })
      }
    },
    // 判断是否已登录
    checkLogin() {
      if (process.env.NODE_ENV != 'production') return true
      const userInfo = JSON.parse(localStorage.getItem('userInfo'))
      if (!userInfo?.phone) {
        localStorage.setItem('prePage', 'HomeYX')
        localStorage.setItem('prePageQuery', JSON.stringify({ showTab: this.$route.query.showTab }))
        this.$router.push({ name: 'LoginPublic' })
        return false
      }
      return true
    },
  },
}
</script>

<style lang="stylus" scoped>
.background {
  position: fixed;
  width: 100%;
  height: 100%;
  background-color: rgba(214, 214, 214, 0.9);
  z-index: 50000;
  left: 0;
  top: 0;

  .text {
    position: absolute;
    top: 10%;
    left: 0;
    width: 100%;
    padding-left: 20px;
    font-size: 1.6rem;
  }

  .icons {
    overflow: hidden;
    position: absolute;
    left: 0;
    bottom: 50px;
    width: 100%;

    li {
      float: left;
      width: 33.33%;
      text-align: center;

      img {
        width: 50%;
      }

      p {
        font-size: 1.4rem;
      }
    }
  }

  .close {
    position: absolute;
    width: 100%;
    text-align: center;
    bottom: 0;
    left: 0;
    padding: 10px 0;
    font-size: 1.8rem;
  }
}
</style>