sports_wap/vue_sports/.svn/pristine/35/356f09a59b32420fc114a5039bf44692ff61e41a.svn-base

<template>
  <div>
    <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>
      <RollingBallHead v-if="nameShow" :name="name" :ishow="ishow"/>
    </div>
    <Match v-show="nameShow" :gameCode="gameCode" :ishow="ishow"></Match>
    <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: "",
      ishow: false, //显示1X2还是独赢盘状态 //true 为1x2
      name: "",//球类名字
      // code: "",
      nameShow: true, //判断是否为滚球或者是即将的状态
      getNameId: "", //获取头部导航别名
      arr: [],
      headShow:true, // 如果没有头部导航数据则不显示..
      number:'',//活动别名
    };
  },
  /**
   * 计算属性
   */
  computed: {
    // 获取活动vuex的活动类型
    getNumber: function() {
      //this.$store.getters.getActivity;
      if (
        this.$store.getters.getActivity != "StSoon" &&
        this.$store.getters.getActivity != "StRollBall"
      ) {
        this.nameShow = false;
      } else {
        this.nameShow = true;
      }
      return this.$store.getters.getActivity;
    }
  },
  /**
   * 数据监听
   */
  watch: {
    getNumber(val) {
      this.getNameId = val;
      let activityId = val;
      // 判定别名是否为滚球或者即将，否则调用另外一个组件
      //   if (val != "StSoon" && val != "StRollBall") {
      //     this.nameShow = false;
      //   } else {
      //     this.nameShow = true;
      //   }
      //   console.log('valll',val)
      //
      if (this.number != activityId ) {
        this.getAjax(this.$store.getters.getActivity);
        // this.gameCode = this.arr[0].game_code;
        // this.$store.dispatch("GET_BALL_ID", this.arr[0].game_code);
      }
      this.number = activityId;
    }
  },
  /**
   * 函数方法
   */
  methods: {
    //切换球类样式
    toggle: function(id, name) {
      this.gameCode = id;
      this.name = name;
      console.log("id", name);
      if (id != "zq") {
        this.ishow = true;
      } else {
        this.ishow = 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.ishow = true;
            } else {
              this.ishow = false;
            }
          } else {
            this.arr = [];
            this.headShow = false;
            this.$store.dispatch('GETSHOW',false);
          }
        });
    }
  },
  mounted() {
    this.getAjax(this.$store.getters.getActivity);
  },
  components: {
    SportsHead,
    SerchBox,
    Match,
    LinkFooter,
    ActivitySlider,
    RollingBallHead,
    Loading,
    NavBall
  }
};
</script>
<style  scoped>
.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>