<template>
  <div class="home">
    <div class="title"></div>
    <div class="sys-btn btn-margin" @click="toSign">立即报名</div>
    <div class="rule"></div>
    <div class="prize"></div>
    <div class="leap-01"></div>
    <div class="leap-02"></div>
    <div class="leap-03"></div>
    <div class="remain"></div>

    <biz-model v-model="model"></biz-model>
    <bottom-tool v-model="activityIndex"></bottom-tool>
  </div>
</template>

<script>
let urls = {
  index: "/jiajiaCHApi/app/index"
};

import { httpGet } from "@/api/fetch-api";

import BottomTool from "@/components/bottom-tools/bottom-tools";
import BizModel from "@/components/biz-model/biz-model";

import Vue from "vue";
import { Toast } from "vant";
Vue.use(Toast);

export default {
  name: "home",
  data() {
    return {
      activityIndex: 1,
      model: {
        show: false,
        title: "",
        content: "",
        index: "subcribe",
        btnShow: false,
        btnText: "",
        confirmHandler: null,
        labelBtnShow: false,
        labelBtnText: "",
        labelBtnHandler: null
      }
    };
  },
  methods: {
    toSign() {

      Toast.loading({
        mask: true,
        message: "请稍等..."
      });
      
      httpGet({ url: urls.index }).then(res => {
        Toast.clear();
        if (res.isSubcribe == 1) {
          this.$router.push("/sign");
        } else {
          this.model.show = true;
        }
      });
    }
  },
  components: {
    BottomTool,
    BizModel
  }
};
</script>

<style lang="scss" scoped>
.title {
  width: 750px;
  height: 955px;
  background: url(../../assets/imgs/idx-head.jpg);
  background-size: 100%;
}
.rule {
  width: 689px;
  height: 672px;
  background: url(../../assets/imgs/rule.png);
  background-size: 100%;
  margin: auto;
  margin-top: 26px;
}
.prize {
  width: 684px;
  height: 1570px;
  background: url(../../assets/imgs/prize.png);
  background-size: 100%;
  margin: auto;
  margin-top: 40px;
}
.btn-margin {
  margin-top: 10px;
}
.leap-01 {
  width: 87px;
  height: 216px;
  background: url(../../assets/imgs/leap-01.png);
  background-size: 100%;
  position: absolute;
  right: 0;
  top: 990px;
}
.leap-02 {
  width: 138px;
  height: 290px;
  background: url(../../assets/imgs/leap-02.png);
  background-size: 100%;
  position: absolute;
  right: 0;
  top: 1665px;
}
.leap-03 {
  width: 750px;
  height: 355px;
  background: url(../../assets/imgs/leap-03.png);
  background-size: 100%;
  position: absolute;
  bottom: 0px;
}
.remain {
  height: 0px;
}
</style>