sports_wap/vue_sports/.svn/pristine/73/736c0d7a9702f014b63cfaeb92213e23c4d93903.svn-base

<template>
  <div>
    <div class="title" v-if="isShow">
      <span style="font-size:.28rem;color:#F76649;">{{titel}}</span>
    </div>
    <div
      v-for="(item,id) in data"
      @click="getInfo(id,item.match_id)"
      class="macth row allAlignment"
      :key="id"
      v-if="isShow"
    >
      <div class="row">
        <div class="column allAlignment center">
          <div class="score-icon row center">
            <span style=" margin:0.07rem; ">{{item.home_score}}</span>
          </div>
          <div class="score-icon row center">
            <span style=" margin:0.07rem; ">{{item.guest_score}}</span>
          </div>
        </div>
        <div class="team-box column allAlignment">
          <span class="teamName">{{item.home_team}}</span>
          <span style="font-size:0.2rem;padding:0.06rem 0 ;">vs</span>
          <span class="teamName">{{item.guest_team}}</span>
        </div>
      </div>
      <div class="row">
        <div class="column allAlignment center">
          <span class="macth-time">{{item.match_process}}</span>
          <img src="../assets/st-imges/stadium.png" alt>
          <span class="macth-time">{{item.match_time}}</span>
        </div>
      </div>
    </div>
    <div class="rolling" v-if="isShow">
      <RollingBall :ballName="ball.name" :name="name" :index="ball.index" :gameCode="gameCode"></RollingBall>
    </div>
  </div>
</template>
<script>
import "../css/index.css";
import RollingBall from "./StRollingBall";
import Loading from "./StLoading";
export default {
  name: "BasketballBlock",
  props: ["type"],
  data() {
    return {
      titel: "篮球",
      timer: [], //存储时间
      idx: "",
      isShow : false,
      gameCode: "", //球类别名
      name: "", //球类名称传值

      ball: {
        name: "",
        index: ""
      },
      data: "",
      timers:true // 定时器
    };
  },
  components: {
    RollingBall,
    Loading
  },
  methods: {
    getInfo: function(val, match_id) {
      console.log("id", val);
      this.$router.push({
        path: "./StRollBallBettingPage",
        query: { gameCode: this.gameCode, match_id: match_id,status : 1, number: 0 ,home:true}
      });
    },
    getAjax:function(){
      if (this.type == 1) {
      let _this = this;
      // vuex传值，状态管理
      this.$store.dispatch('GETSHOW',true);
      this.$http.get(this.$ports.home.trollingBall).then(res => {
        console.log("这是足球",res)
          // this.sssd();
        if (res.data.status == 1 && res.data.data != null && res.data.data.matchData.length > 0) {
            this.isShow = true;
          console.log('res', res.data)
          this.data = res.data.data.matchData;
          this.titel = res.data.data.gameName;
          this.name = this.titel;
          this.ball.name = "所有" + this.titel + "滚球";
          this.ball.index = this.data.length;
          this.gameCode = res.data.data.game_code;
          let [f, s] = this.data[0].match_time.split(":");
          _this.data.forEach(val => {
            if (val.match_time != "") {
              let [f, s] = val.match_time.split(":");
              this.$public.timer(f, s, function(f, s) {
                val.match_time = f + ":" + s;
              });
            }
          });
          
           this.$store.dispatch('GETSHOW',false);
        }else{
            this.$store.dispatch('GETSHOW',false);

        }
      });
    } else if (this.type == 2) {
      this.$store.dispatch('GETSHOW',true);
      this.$http.get(this.$ports.home.rollingBall).then(res => {
        if (res.data.status == 1 && res.data.data != null && res.data.data.matchData.length > 0) {
             this.isShow = true;
            
          
          this.data = res.data.data.matchData;
          this.titel = res.data.data.gameName;
          this.name = this.titel;
          this.ball.index = this.data.length;
          this.ball.name = "所有" + this.titel + "滚球";
          this.gameCode = res.data.data.game_code;
           this.$store.dispatch('GETSHOW',false);
        }else{
            this.$store.dispatch('GETSHOW',false);
        }
      });
    } else if (this.type == 3) {
        this.$store.dispatch('GETSHOW',true);
      this.$http.get(this.$ports.home.bqrollingBall).then(res => {
        if (res.data.status == 1 && res.data.data != null && res.data.data.matchData.length > 0) {
             this.isShow = true;
        
          this.data = res.data.data.matchData;
          this.titel = res.data.data.gameName;
          this.ball.index = this.data.length;
          this.name = this.titel;
         
          this.ball.name = "所有" + this.titel + "滚球";
          this.gameCode = res.data.data.game_code;
            this.$store.dispatch('GETSHOW',false);
        }else{
           this.$store.dispatch('GETSHOW',false);
        }
      });
    }
    },
  },
  mounted() {
    let _this =this;
    this.$public.ajaxTimerFun(function(timing){
       _this.getAjax();
      if (!_this.timers){
      clearInterval(timing);
    }
    })
    this.getAjax();
  },
  beforeDestroy(){
    this.timers = false;
  }
};
</script>
<style scoped>
/* .box{
        border-bottom: 1px soild  red;
    } */
.macth {
  height: 1.76rem;
  margin-top: 0.2rem;
  color: #333333;
  background: #dcdcdc;
  border-radius: 0.08rem;
  /* border:2px solid #CECECE; */
  padding: 0.24rem;
  font-size: 0.22rem;
}
.score-icon {
  min-width: 0.66rem;
  background: #f76649;
  border-radius: 0.17rem;
  color: #f5f5f5;
  font-size: 0.2rem;
}
.teamName {
  font-size: 0.26rem;
}
.team-box {
  margin-left: 0.29rem;
  max-width: 3.4rem;
}
.macth-time {
  font-size: 0.24rem;
}
.title {
  padding-top: 0.1rem;
  margin: 0.1rem 0;
  font-size: 0.28rem;
  color: #000000;
}
.rolling {
  padding-top: 0.41rem;
  padding-bottom: 0.46rem;
}
</style>