sports_wap/vue_sports/.svn/pristine/81/813c870fdab83f52d2381a5c160d3604440e89a7.svn-base

<template>
  <div class="sports">
    <div class="title">
      <span style="font-size:.3rem;color:#fff; font-weight: bold;">体育</span>
      <i></i>
    </div>
    <div class="box-active row average item-center">
      <div class="row center" :class="{active:issurvey==true}" @click="survey(true)">显示</div>
      <div class="row center" :class="{active:issurvey==false}" @click="survey(false)">即将开赛</div>
    </div>
    <!-- 显示 -->
    <div v-if="issurvey" v-for="item in list" class="sportName" :key="item.id">
      <!-- <div  v-for="item in list" class="sportName" :key="item.id"  v-if="list[0].match.length != 0">  -->
      <!-- <div class="sportName" v-if="list.match.length != 0"> -->
      <!-- <h3>{{item.title}}</h3> -->
      <h3 class="row item-center allAlignment">
        {{item.name}}
        <img v-if="list.name=='足球'" src="../assets/st-imges/footballimg.png">
        <img v-if="list.name=='篮球'" src="../assets/st-imges/basketballimg.png">
        <img v-if="list.name=='棒球'" src="../assets/st-imges/baseballimg.png">
        <img v-if="list.name=='网球'" src="../assets/st-imges/tennisimg.png">
      </h3>
      <div
        class="list"
        v-for="(items,index) in item.match"
        :key="index"
        @click="leagueBetting(item.game_code,items.match_id)"
      >
        <div class="teamName">
          <span>{{items.home_team}}</span>
          <div>vs</div>
          <span>{{items.guest_team}}</span>
        </div>
        <div class="timer">
          <span>{{items.match_date}}</span>
          <div>
            <i :style="field"></i>
          </div>
          <span>{{items.match_time}}</span>
        </div>
      </div>
      <rollingBall
        :ballName="ball.name"
        :index="ball.index"
        style="margin-top:0.47rem;margin-bottom:0.16rem;"
      ></rollingBall>
      <div v-for=" item_a in item.league" :key="item_a.id">
        <rollingBall :ballName="item_a.name" :index="item_a.count" style="margin-bottom:0.16rem;"></rollingBall>
      </div>
    </div>
    <!-- 即将开赛 -->
    <div v-if="!issurvey" v-for="item in list" :key="item.id" class="sportName">
      <!-- <div  v-for="item in list" class="sportName" :key="item.id"  v-if="item.match.length != 0">  -->
      <!-- <div class="sportName" v-if="list.match.length != 0"> -->
      <!-- <h3>{{item.title}}</h3> -->
      <h3 class="row item-center allAlignment">{{item.gameName}}</h3>
      <div
        class="list"
        v-for="(items,index) in item.matchData"
        :key="index"
        @click="leagueBetting(item.gameCode,items.match_id)"
      >
        <div class="teamName">
          <span>{{items.home_team}}</span>
          <div>vs</div>
          <span>{{items.guest_team}}</span>
        </div>
        <div class="timer minute">
          <span>{{items.wait_time}}分钟</span>
        </div>
      </div>
      <rollingBall
        :ballName="issurvey?ball.name:'所有' + item.gameName + '即将开赛' "
        :index="issurvey?ball.index:item.matchNum"
        style="margin-top:0.47rem;margin-bottom:0.16rem;"
      ></rollingBall>
      <!-- <div v-for=" item_a in list.league" :key="item_a.id">
        <rollingBall :ballName="item_a.name" :index="item_a.count" style="margin-bottom:0.16rem;"></rollingBall>
      </div>-->
    </div>
  </div>
</template>
<script>
import rollingBall from "@/components/StRollingBall";
import "../css/index.css";
export default {
  data() {
    return {
      issurvey: true,
      field: {
        backgroundImage:
          "url(" + require("../assets/st-imges/stadium.png") + ")",
        backgroundRepeat: "no-repeat",
        backgroundSize: "100% 100%"
      },
      list: "",
      ball: {
        name: "今日",
        index: 0
      },
      matchNum: "", //btn数量
      gameCode: "", //传入betting的值
    };
  },
  methods: {
    // leagueBetting: function(pId, id) {
    //   this.$router.push({ path: "/StBallBettingPage", query: { pId, id } });
    // }
    leagueBetting: function(game_code, id) {
      //console.log(game_code,id);
        this.$router.push({
          path: "/StRollBallBettingPage",
          query: { gameCode:game_code}
        });
         this.$store.dispatch("MACTH_ID", id);
      
    },
    // 体育概览激活样式
    survey(val) {
      this.issurvey = val;
    },
    getAjax(url) {
      this.$store.dispatch("GETSHOW", true);
      this.$http.get(url).then(res => {
        if (res.data.status == 1 && res.data != [] && res.data != null) {
          if (this.issurvey == true) {
            this.list = res.data.data;
            console.log("体育", this.list);
            this.list.forEach(res => {
              res.league.forEach(val => {
                this.ball.index += Number(val.count);
              });
            });
          } else {
            let arr = Object.values(res.data.data);
            this.list = arr;
          }
        }
        this.$store.dispatch("GETSHOW", false);
      });
    }
  },
  components: { rollingBall },
  mounted() {
    this.getAjax(this.$ports.home.sports);
  },
  computed: {
    getInfo: function() {
      return this.issurvey;
    }
  },
  watch: {
    getInfo(val) {
      if (val == true) {
        this.getAjax(this.$ports.home.sports);
      } else {
        this.getAjax(this.$ports.home.getSon);
      }
    }
  }
};
</script>
<style scoped>
.box-active {
  height: 1.1rem;
}
.box-active div {
  width: 1.84rem;
  height: 0.68rem;
  background: #a0a0a0;
  color: #dcdcdc;
  font-size: 0.28rem;
  border-radius: 8px;
}
.box-active div.active {
  background: #dcdcdc;
  color: #363636;
}
.sports {
  background: #f8f8f8;
  /* padding: 0.28rem 0.3rem  0.34rem 0.45rem; */
  text-align: left;
  /* padding-bottom: 0.68rem; */
}
.sports .title {
  color: #000000;
  font-size: 0.32rem;
  display: flex;
  background: #a0a0a0;
  height: 0.88rem;
  line-height: 0.88rem;
  padding: 0 0.32rem 0;
  justify-content: space-between;
}
.sportName {
  padding: 0.1rem 0rem 0.4rem;
  background: #f8f8f8;
  width: 92%;
  margin: 0 auto;
  border-bottom: 1px solid #dfdfdf;
}
.sportName h3 {
  color: #f76649;
  font-size: 0.28rem;
  font-weight: 400;
  margin-bottom: 0.25rem;
}
.sportName h3 img {
  width: 0.44rem;
  height: 0.44rem;
  margin-right: 0.3rem;
}
.sportName .list {
  background: #dcdcdc;
  border-radius: 0.08rem;
  padding: 0.28rem 0.5rem 0.28rem 0.3rem;
  display: flex;
  justify-content: space-between;
  margin-bottom: 0.2rem;
}
.sportName .list .teamName {
  font-size: 0.28rem;
  color: #333333;
  max-width: 50%;
}
.sportName .list .teamName div {
  margin: 0.05rem 0;
}
.sportName .timer {
  text-align: center;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.sportName .minute {
  align-items: center;
  flex-direction: row;
}
.timer div i {
  display: inline-block;
  width: 0.34rem;
  height: 0.24rem;
}
</style>