sport_pc/.svn/pristine/87/8796718146dc9ac13e7da747301b8045fd148a2d.svn-base

<template>
  <div>
    <div v-if="tennisShow">
      <h3 style="color:#F76649;">{{title}}</h3>
      <div class="tennis">
        <div class="tennis-dtl" v-for="(item,index) in dat" :key="index"  @click="getInfo(index,item.match_id,item.game_code)">
          <div class="teamName">
            <span>{{item.home_team}}</span>
            <div>vs</div>
            <span>{{item.guest_team}}</span>
          </div>
          <div class="frequency">
            <div :class="item.match_process == 1? 'status':''">
              <span>第一盘</span>
              <span v-if="item.first_inning_score && item.first_inning_score != null">{{item.first_inning_score}}</span>
              <span v-else>0 - 0</span>
            </div>
            <div :class="item.match_process == 2? 'status':''">
              <span>第二盘</span>
              <span v-if="item.second_inning_score && item.second_inning_score != null">{{item.second_inning_score}}</span>
              <span v-else>0 - 0</span>
            </div>
            <div :class="item.match_process == 3? 'status':''">
              <span>第三盘</span>
              <span  v-if="item.third_inning_score && item.third_inning_score != null">{{item.third_inning_score}}</span>
              <span v-else>0 - 0</span>
            </div>
          </div>
        </div>
      </div>
      <div class="ballBtn">
        <rollingBall
          :name="name"
          :index="ball.index"
          :id="ball.id"
          :ballName="ball.name"
          :gameCode="gameCode"
          :bm ="bm"
        ></rollingBall>
      </div>
    </div>
  </div>
</template>
<script>
import rollingBall from "@/components/StRollingBall";
export default {
  data() {
    return {
      title: "网球",
      tennisShow: false,
      selection: true,
      ballName: "",
      name: "", //球类名称传值
      ball: {
        name: "",
        index: "",
        id: ''
      },
      gameCode: "", //球类别名
      dat: [],
      getIsShow:true,
      bm :'gq'
    };
  },
  components: { rollingBall },
     /**
   * 计算属性
   */
  computed: {
    getHomeRollBall() {
      return this.$store.getters.getHomeRollBall;
    },
  },
  /**
   * 监听器
   */
  watch: {
    getHomeRollBall(val){
      this.getAjax(val.wqData);
    }
  },
  mounted() {
     if (this.getIsShow) {
      this.$store.dispatch("GETSHOW", true);
      this.getIsShow = false;
    }
  },
  methods: {
    getInfo(idx,match_id,game_code){
      this.$store.dispatch('GET_BALL_ID',game_code)
      this.$store.dispatch("GETACTIVITY", "StRollBall");
      this.$router.push({
        path: "./StRollBallBettingPage",
        query: {
          gameCode: this.gameCode,
          status: 1,
          number: 0,
          home: true,
          name: this.title
        }
      });
      this.$store.dispatch("MACTH_ID", match_id);      
    },
    getAjax(data) {
      if(!data.matchData ) return false
      // console.log(data.matchData);
      if(data.matchData.length  == 0) return false
      let dat_length = data.matchData.length;
      for(var i = 0; i < dat_length; i++){
        data.matchData[i].game_code = data.game_code;
      }        
      if(dat_length > 6){
        this.dat = data.matchData.slice(0,6);
      }else{
        this.dat = data.matchData;
      }
      this.title = data.gameName;
      this.ball.index = this.dat.length;
      this.name = this.title;
      this.ball.name = "所有" + this.title + "滚球";
      this.gameCode = data.game_code;
      this.tennisShow = true;
    }
  }
};
</script>
<style scoped>
.tennis {
  margin-top: 0.13rem;
  width: 100%;
  border-radius: 0.08rem;
  /* height: 6.42rem; */
  background: #dcdcdc;
  /* padding: 0 0.3rem 0 0.35rem; */

  margin-bottom: 0.2rem;
  padding: 0.3rem;
}
h3 {
  text-align: left;
  font-size: 0.3rem;
  color: #000000;
  padding: 0.25rem 0 0.05rem;
  font-weight: 500;
}
.tennis-dtl {
  width: 100%;
  background: #dcdcdc;
  border-bottom: 1px solid #e4e4e4;
  margin-top: 0.2rem;
  /* height: 1.89rem; */
  height: auto;
  padding: 0.24rem 0.89rem 0.25rem 0.31rem;
  position: relative;
  display: flex;
  justify-content: space-between;
  /* align-items: center; */
}

.teamName {
  color: #333333;
  font-size: 0.28rem;
  width: 2.7rem;
  text-align: left;
}
.frequency {
  width: 1.57rem;
  vertical-align: middle;
  /* 垂直对齐 */
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.frequency div {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.24rem;
  color: #333333;
}
.frequency div:nth-last-child(1) {
  margin-bottom: 0;
}
.frequency .status {
  color: #f76649;
}
.tennis-dtl .icon {
  width: 0.08rem;
  height: 0.08rem;
  position: absolute;
  top: 0.8rem;
  right: 0.33rem;
}
.tennis-dtl .icon i {
  display: inline-block;
  background: #000000;
  width: 0.08rem;
  height: 0.08rem;
}
.ballBtn {
  padding-top: 0.41rem;
  padding-bottom: 0.46rem;
}
</style>