sport_pc/.svn/pristine/43/43278d55d4c6634df88c75a496cf0325714786d4.svn-base

<template>
  <div>
    <div class="box">
      <div class="row allAlignment center head_on_box">
        <p
          class="logo"
          style="font-size:.6rem;color:#E1E1DF;font-family:  'Franklin Gothic Medium'"
        >
          <i style="color:#F76649;">HX</i>669
        </p>
        <!-- <img class="log" src="../assets/st-imges/indexlogo.png" alt=""> -->
        <div class="row allAlignment center">
          <yd-button type="primary" bgcolor="rgba(0,0,0,0)" @click.native="urseInfo()">
            <img class="user-ion" src="../assets/st-imges/user.png" alt>
          </yd-button>
          <!-- <div v-if="nameShow" class="row allAlignment center username">
              {{name}}
          </div>-->
          <img
            style="margin-left: 0.44rem;"
            class="user-ion"
            src="../assets/st-imges/contact.png"
            alt
          >
        </div>
      </div>

      <div class="navtitle-box row">
        <div style="width:1rem;height:1rem" class="row center">
          <img
            @click="returnHome"
            :src="headActive=='home'?img1:img2"
            style="width:0.4rem;height:0.4rem;"
            alt
          >
        </div>
        <div class="head_box">
          <nav>
            <div v-for="(item,$index) in title" class="row" :key="item.id">
              <div class="row item-center nav-arr ">
                  <div
                    class="headbox"
                    @click="activityJump($index,item.type_code)"
                    :class="{active:headActive==item.type_code}"
                  >{{item.type_name}}</div>
                  <span
                    :class="{numactive:headActive==item.type_code}"
                    class="head_box_num row center"
                  >{{item.matchNum>99?'1+':item.matchNum}}</span>
                </div>
  
            </div> 
          </nav>
        </div>
      </div>
    </div>
    <div v-if="Lshow==true" class="login">
      <Login></Login>
    </div>
    <div v-else-if="rgShow==true">
      <register></register>
    </div>
  </div>
</template>
<script>
import "../css/index.css";
import Login from "@/pages/Login/index/StLogin";
import register from "@/pages/Login/index/register";
export default {
  name: "SportsHead",
  components: {
    Login,
    register
  },
  data() {
    return {
      show: false,
      img1: require("../assets/st-imges/home.png"),
      img2: require("../assets/st-imges/gengduo-1.png"),
      title:'',
      headActive: "",
      init: true,
      nameShow: false, //展示登录组件或者是名字
      timers: true, //定时器清理
      Lshow: false,
      rgShow: false, //隐藏注册框
      getIsShow:true
    };
  },
  methods: {
      //判断登录是否过期
    getuserData(){
      if(localStorage.getItem('token')){
        this.$http.post(this.$ports.login.getAgent,{token:localStorage.getItem('token')}).then(res=>{
          if(res.data.status==-4001){
            this.$store.dispatch('SET_TOKEN','');
            this.$store.dispatch('GET_ISSHOW',false);
            this.$dialog.toast({mes: '对不起您的登录已过期，请您重新登录', timeout: 3000});
          }
        })
      }
    },
    urseInfo() {
      if (!localStorage.getItem("token")) {
        this.$store.dispatch("GET_ISSHOW", true);
       
        // 设置背景禁止滚动
        this.$store.dispatch('SET_NOROLL',true)
      } else {
        this.$router.push("/PersonalCenter");
      }
    },
    // 数据封装
    getAjax() {
      //this.$store.dispatch("GETSHOW", true);
      this.$http.get(this.$ports.home.navTypeList).then(res => {
        if (res.data.status == 1) {
          this.title = res.data.data;
          this.$store.dispatch("SET_HEADTITLE", res.data.data);
        }
      });
    },

    /**
     * 头部导航
     */
    activityJump: function(index, code) {
        // 头部激活样式
      if(this.headActive!=code){
        this.headActive = code;
      }
      
      this.indeximg = false;
      this.$store.dispatch("GETACTIVITY", code); //将活动类别存入vuex里面
      if (this.$route.query.isTrue) return false;
      this.$router.replace({
        path: "/StRollBallpage",
        query: { home: 1 }
      });
    },

    /**
     * 回到首页
     */
    returnHome: function() {
      this.headActive='home'
      this.$store.dispatch("GETACTIVITY", "home");
      this.$router.replace({ path: "/" });
    }
  },

  /**
   *
   */
  computed: {
    // 获取登录注册状态
    loginAntReg: function() {
      return {
        isshow_code: this.$store.getters.getIsShow,
        rgShow: this.$store.getters.getRgShow
      };
    },
  },

  /**
   *
   */
  watch: {
    // 获取登录注册状态
    loginAntReg(obj) {
      this.Lshow = obj.isshow_code;
      this.rgShow = obj.rgShow;
    }
  },
  mounted() {
    // 导航样式初始化
    if (localStorage.getItem("activity")) {
      this.headActive = localStorage.getItem("activity");
    }else{
      this.headActive='home';
      this.$store.dispatch("GETACTIVITY", "home");
    }
    // 头部导航数据判断储存和更换
    if (this.$store.getters.getHeadTitle) {
      this.title = this.$store.getters.getHeadTitle;
    } else {
      this.getAjax();
    }
    if (localStorage.getItem("name")) {
      this.name = localStorage.getItem("name");
      this.nameShow = true;
    } else {
      this.nameShow = false;
    }
    // 轮询获取头部导航信息
    let _this = this;
    this.$public.ajaxTimerFun(function(timing) {
      if (_this.timers) {
        _this.getAjax();
        _this.getuserData()
      }else{
        clearInterval(timing);
      }
    },(1000*60));
  },
  beforeDestroy() {
    this.timers = false;
  },
  beforeUpdate(){
    // 获取url进入首页更改样式
    if(localStorage.getItem("activity")=='home'){
      this.headActive='home';
    }
    
  }
};
</script>
<style  scoped>
.no-roll{
  position: fixed;
  top: 0;
  left: 0;
}
.head_on_box {
  padding: 0 .32rem;
}
.box {
  height: 1.76rem;
  background: linear-gradient(to bottom, #999999, #6a6a6b);
  overflow: hidden;
}
.navtitle-box {
  height: 1rem;
  padding: 0 0.32rem 0 0;
}

.headbox {
  font-size: 0.3rem;
  font-weight: bold;
  color: #e1e1df;
}
.head_box {
  width: 86%;
  height: 1rem;
  overflow: hidden;

}
.head_box nav {
  /* display: -webkit-box;
  display: -ms-flexbox;
  -webkit-box-align: middle;
  height: 1rem;
  -ms-flex-align: middle;
  align-items: middle;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch; */
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: middle;
  -ms-flex-align: middle;
  align-items: middle;
  overflow: auto;
}
/* .navtitle {
  font-size: 0.16rem;
  height: 1rem;
  -ms-flex-negative: 0;
  flex-shrink: 0;
} */
/* nav{
  width: 8.39rem;
} */
.nav-arr {
  width: 1.3rem;
  /* margin: 0 0.1rem; */
  font-size: 0.16rem;
  height: 1rem;
}
.user-ion {
  width: 0.3rem;
  height: 0.3rem;
}
div.active {
  color: #f76649;
}
.numactive {
  background: #f76649 !important;
  color: #f8f8f8 !important;
}
.head_box_num {
  width: 0.4rem;
  height: 0.4rem;
  border-radius: 50%;
  font-size: 0.2rem;
  background: #e1e1df;
  color: #333;
  margin-left: 0.1rem;
}
.username {
  color: #e1e1df;
}
</style>