sport_pc/.svn/pristine/2b/2b1978bc45dae9b732d3b73acb1a3fd62c43a03b.svn-base

<template>
  <div  :class="norill?'noroll':''">
    <div class="lod">
      <Loading></Loading>
    </div>
    <SportsHead></SportsHead>
    <div v-if="arr.length >0 ">
      <div id="NavSlide" class="row allAlignment center">
        <div class="nav-div">
          <nav>
            <div
              class="column center img-div"
              v-for="(item,$index) in arr"
              @click="toggle(item.game_code,item.game_name)"
            >
              <img
                :class="gameCode == item.game_code?'img-box imgactive':'img-box'"
                :src="item.game_ico_url"
              >
              <span
                class="text"
                style="font-size:.2rem;"
                :class="{active:item.game_code == gameCode}"
              >{{item.game_name}}</span>
            </div>
          </nav>
        </div>
      </div>
      <!-- 显示头部按钮组件1*2/让球&大小/独赢盘 -->
      <RollingBallHead v-if="soon_rollBall == 100" :name="name" :ishow="isShow"/>
    </div>
    <!-- 滚球/即将组件 -->
    <div v-if="soon_rollBall == '100'" >
      <Match  :gameCode="gameCode" :ishow="isShow" :name="name"></Match>
    </div>
    <!-- 剩余4种玩法组件 -->
    <div v-if="soon_rollBall == '-1'">
      <NavBall  :name="name"/>
    </div>
    <!-- <NavBall v-show="!nameShow" :name="name" :headShow = 'headShow'/> -->
    <!-- <LinkFooter></LinkFooter> -->
  </div>
</template>
<script>
import SportsHead from "@/components/StSportsHead";
import SerchBox from "@/components/StSerchBox";
import Match from "@/components/StMatch";
import RollingBallHead from "@/components/StRollingBallHead";
import LinkFooter from "@/components/StLinkFooter";
import ActivitySlider from "@/components/StActivitySlider";
import Loading from "@/components/StLoading";
import NavBall from "@/components/StNavBall";
export default {
  name: "RollBallpage",
  data() {
    return {
      gameCode: "",
      isShow: false, //显示1X2还是独赢盘状态 //true 为1x2
      name: "",//球类名字
      soon_rollBall: 0, //判断是否为(滚球、即将)或者是其他的状态
      arr: [],
      headShow:true, // 如果没有头部导航数据则不显示..
      number:'',//活动别名
      norill:false,
      getIsShow:true,
    };
  },
  /**
   * 计算属性
   */
  computed: {
    // 获取活动vuex的头部活动类型
    getNumber: function() {
      return this.$store.getters.getActivity;
    },
    	noRoll(){
			return this.$store.getters.getNoRoll
		}
  },

  /**
   * 数据监听
   */
  watch: {
    getNumber(val) {
      if ( val != "StSoon" && val != "StRollBall" ) {
        this.soon_rollBall = '-1';
      } else {
        this.soon_rollBall = '100';
      }
      if (this.number != val ) {
        this.getAjax(val);
        this.$store.dispatch('GETSHOW',true);
      }
      this.number = val;
    },
    	noRoll(val){
			this.norill=val
		}
  },
  /**
   * 函数方法
   */
  methods: {
    /*-------------------------------- */
    //切换球类样式
    toggle: function(id, name) {
      this.gameCode = id;
      this.name = name;
      if (id != "zq") {
        this.isShow = true;
      } else {
        this.isShow = false;
      }
      this.$store.dispatch("GET_BALL_ID", id); //将球类别存入vuex里面
    },

    /*------------------------------- */
    //获取头部活动下的球类数据
    getAjax: function(type_code) {
    
      this.$http.get(this.$ports.rollBall.getGame, {type_code,}).then(res => {
        //console.log("球类", res);
        this.arr = [
          {
            game_ico_url: require("@/assets/st-imges/football.png"),
            titel: "足球",
            game_code: "zq"
          },
          {
            game_ico_url: require("@/assets/st-imges/basketball.png"),
            titel: "篮球",
            game_code: "lq"
          },
          {
            game_ico_url: require("@/assets/st-imges/baseball.png"),
            titel: "棒球",
            game_code: "bq"
          },
          {
            game_ico_url: require("@/assets/st-imges/tennis.png"),
            titel: "网球",
            game_code: "wq"
          }
        ];
        //console.log('滚球类',res);
        if (res.data.status == 1 && res.data.data.length > 0 && res.data.data != null ) {
          // this.headShow = true;
          let dtatArry = [];
          this.arr.forEach(e => {
            res.data.data.forEach(val => {
              if (e.game_code == val.game_code) {
                val.game_ico_url = e.game_ico_url;
                dtatArry.push(val);
              }
            });
          });
          this.arr = dtatArry;
          this.gameCode =dtatArry[0].game_code;
          this.name = dtatArry[0].game_name;
          this.$store.dispatch("GET_BALL_ID", this.arr[0].game_code);
          if (this.gameCode != "zq") {
            this.isShow = true;
          } else {
            this.isShow = false;
          }
        } else {
          this.arr = []; 
        }

        let _this = this;
        setTimeout(function(){
          _this.$store.dispatch('GETSHOW',false);
        },1000)
      });
    }
  },
  /**
   * 页面加载完成挂载
   */
  mounted() {
    if(this.getIsShow){
        this.$store.dispatch('GETSHOW',true);
        this.getIsShow=false
    }
    let getActivity =this.$store.getters.getActivity;
    if(getActivity != "StSoon" && getActivity != "StRollBall"){
      this.soon_rollBall = '-1';
    }else{
      this.soon_rollBall = '100';
    }
    this.getAjax(getActivity);
  },
  components: {
    SportsHead,
    SerchBox,
    Match,
    LinkFooter,
    ActivitySlider,
    RollingBallHead,
    Loading,
    NavBall
  }
};
</script>
<style  scoped>
.noroll{
		position: fixed;
     width: 100%;
		top: 0;
		left: 0;
	}
.lod {
  z-index: 999;
  position: fixed;
  width: 100%;
}
.text {
  margin-top: 0.08rem;
}
#NavSlide {
  height: 1rem;
  background: #f8f8f8;
}
.nav-div {
  width: 6.28rem;
}
.img-icon {
  width: 0.24rem;
  height: 0.4rem;
}
.img-box {
  width: 0.48rem;
  height: 0.48rem;
  margin: 0 0.35rem;
}
@keyframes rotating {
  from {
    transform: rotate(0);
  }
  to {
    transform: rotate(360deg);
  }
}
@-moz-keyframes rotating {
  from {
    transform: rotate(0);
  }
  to {
    transform: rotate(360deg);
  }
}
@-webkit-keyframes rotating {
  from {
    transform: rotate(0);
  }
  to {
    transform: rotate(360deg);
  }
}
@-o-keyframes rotating {
  from {
    transform: rotate(0);
  }
  to {
    transform: rotate(360deg);
  }
}
.imgactive {
  animation: rotating 4s linear infinite;
  -webkit-animation: rotating 4s linear infinite;
  -moz-animation: rotating 4s linear infinite;
  -ms-animation: rotating 4s linear infinite;
  -o-animation: rotating 4s linear infinite;
}
.img-div {
  height: 1rem;
}
#NavSlide nav {
  /* padding: 0 0.43rem; */
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: middle;
  -ms-flex-align: middle;
  align-items: middle;
  overflow-x: auto;
  background-color: #f8f8f8;
  -webkit-overflow-scrolling: touch;
}
#NavSlide div {
  text-align: center;
  font-size: 0.16rem;
  -ms-flex-negative: 0;
  flex-shrink: 0;
  /* padding:0 0.1rem;
        margin:0 0.05rem; */
  color: #000000;
}
span.active {
  color: #f76649;
}
</style>