sports_wap/vue_sports/.svn/pristine/13/13b4e2ce2cf8b15f0a506c8b14c522cf367059bd.svn-base

<template>
  <div>
      <div v-if="noData">
      <NotOpend :title="this.info"/>
    </div>
    <!-- 让球&大小 -->
    <div class="match" v-if="isShow && rShow">
      <div v-for="(items,index) in letBallData" :key="items.id" class="mg">
        <!-- <div v-for="items in list[index]" :key="items.id"> -->
        <div class="row allAlignment  haderBox center">
          <span>{{items.leagueName}}</span>
          <div class="row Match-title-num">
            <span>{{items.matchNum}}</span>
          </div>
        </div>
        <div class="Match-box">
          <div v-for="(itemList,index) in items.matchData" :key="itemList.id"   @click="matchInfo(itemList.match_id)">
          
              <div class="row allAlignment Match-box-top">
                <div class="Match-box-top-left">
                  <span>{{itemList.match_date}}</span>
                  <span class="texttop">{{itemList.match_time}}</span>
                </div>
                <div class="Match-box-top-right row">
                  <span style="margin-right: .1rem;" class="Match-box-top-num">{{itemList.tag}}</span>
                  <span style="margin-right: .1rem;">让球</span>
                  <span style="margin-right: .1rem;">大小</span>
                </div>
              </div>
              <div class="row allAlignment center listbox">
                <div class="column average name-box">
                  <div>{{itemList.home_team}}</div>
                  <div>{{itemList.guest_team}}</div>
                </div>
                <div class="Match-list-box row item-center average">
                  <div v-for="(odds,i) in itemList.oddsData[0]" :key="odds.id" class="match-list">
                    <div
                      @click.stop="isclick(index,i)"
                      class="column center"
                      :class="items.istrue == i ?'active':''"
                    >
                      <span style="color:#FD8F26">{{odds.condition}}</span>
                      <span>{{odds.odds}}</span>
                    </div>
                  </div>
                </div>
      
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- 1x2 -->
    <div v-if="!isShow && !ishow && rShow">
      <div v-for="(item,index) in letBallData" :key="item.id" @click="betting()">
        <div class="row allAlignment haderBox center">
          <span>{{item.leagueName}}</span>
          <div class="Match-title-num">
            <span>{{item.matchNum}}</span>
          </div>
        </div>
        <div v-for="(itemList,$index) in item.matchData" :key="itemList.id"   @click="matchInfo(itemList.match_id)">
 
            <div class="box">
              <div class="row allAlignment item-center top-box">
                <span>
                  <i>{{itemList.match_date}}</i>
                  <b style="color:#F76649;font-weight: normal;">{{itemList.match_time}}</b>
                </span>
                <span class="top-num">{{itemList.tag}}</span>
              </div>
            </div>
            <div class="box-bottom">
              <div class="box row item-center main-box">
                <span v-if="itemList.home_score" class="num-box" style="color:#eb921e">{{itemList.home_score}}</span>
                &nbsp;&nbsp;{{itemList.home_team}}
              </div>
              <div class="box row item-center main-box">
                <span v-if="itemList.guest_score? itemList.guest_score:'0'" class="num-box" style="color:#eb921e">{{itemList.guest_score}}</span>
                &nbsp;&nbsp;{{itemList.guest_team}}
              </div>
              <div class="footBox">
                <div
                  class="box row allAlignment bottom-box center"
                  v-for="(odds,idx) in itemList.oddsData[1]"
                  :key="odds.id"
                >
                  <div
                    class="item-center bottom-num"
                    :class="item.istrueA==true?'active':''"
                    @click.stop="isClick(idx,1)"
                  >
                    <p style="color:#eb921e">{{odds.condition}}</p>
                    <p>{{odds.odds}}</p>
                  </div>
                </div>
       
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- 独赢盘 -->
      <div class="match" v-if="!isShow && ishow && rShow">
        <div v-for="(items,index) in letBallData" :key="items.id" class="mg">
        <!-- <div v-for="items in list[index]" :key="items.id"> -->
        <div class="row allAlignment letBallBox center">
          <span>{{items.leagueName}}</span>
          <div class="row Match-title-num">
            <span>{{items.matchNum}}</span>
          </div>
        </div>
        <div class="Match-box">
          <div v-for="(itemList,index) in items.matchData" :key="itemList.id" class="Match-box"   @click="matchInfo(itemList.match_id)">
        
              <div class="row allAlignment Match-box-top">
                <div class="Match-box-top-left">
                  <span>{{itemList.match_date}}</span>
                  <span class="texttop">{{itemList.match_time}}</span>
                </div>
                <div class="Match-box-top-right row">
                  <span style="margin-right: .1rem;" class="Match-box-top-num">{{itemList.tag}}</span>
                  <!-- <span style="margin-right: .1rem;">让球</span> -->
                  <span style="margin-right: .1rem;">独赢盘</span>
                </div>
              </div>
              <div class="row allAlignment center listbox">
                <div class="column average name-box">
                  <div>{{itemList.home_team}}</div>
                  <div>{{itemList.guest_team}}</div>
                </div>
                <div class="Match-list-box row item-center average">
                  <div v-for="(odds,i) in itemList.oddsData[0]" :key="odds.id" class="match-list">
                    <div
                      @click.stop="isclick(index,i)"
                      class="column center"
                      :class="items.istrue==i?'active':''"
                    >
                      <span style="color:#FD8F26">{{odds.condition}}</span>
                      <span>{{odds.odds}}</span>
                    </div>
                  </div>
         
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- 如过是网球则显示 -->
        <div class="match" v-if="isShow && !rShow">
      <div v-for="(items,index) in letBallData" :key="items.id" class="mg">
        <!-- <div v-for="items in list[index]" :key="items.id"> -->
        <div class="row allAlignment letBallBox center">
          <span>{{items.leagueName}}</span>
          <div class="row Match-title-num">
            <span>{{items.matchNum}}</span>
          </div>
        </div>
        <div class="Match-box">
          <div v-for="(itemList,index) in items.matchData" :key="itemList.id" class="Match-box"   @click="matchInfo(itemList.match_id)">
        
              <div class="row allAlignment Match-box-top">
                <div class="Match-box-top-left">
                  <span>{{itemList.match_date}}</span>
                  <span class="texttop">{{itemList.match_time}}</span>
                </div>
                <div class="Match-box-top-right row">
                  <span style="margin-right: .1rem;" class="Match-box-top-num">{{itemList.tag}}</span>
                  <span style="margin-right: .1rem;">独赢盘</span>
                  <span style="margin-right: .1rem;">让盘</span>
                </div>
              </div>
              <div class="row allAlignment center listbox">
                <div class="column average name-box">
                  <div>{{itemList.home_team}}</div>
                  <div>{{itemList.guest_team}}</div>
                </div>
                <div class="Match-list-box row item-center average">
                  <div v-for="(odds,i) in itemList.oddsData[0]" :key="odds.id" class="match-list">
                    <div
                      @click.stop="isclick(index,i)"
                      class="column center"
                      :class="items.istrue ? 'active':''"
                    >
                      <span style="color:#FD8F26">{{odds.condition}}</span>
                      <span>{{odds.odds}}</span>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
      </div>
    </div>
    <div class="BettingWindow" v-if="isWindow">
      <BettingWindow />
    </div>

  </div>
</template>
<script>
import Bus from "../assets/bus.js";
import NotOpend from "@/components/StNotOpend";
import BettingWindow from '@/components/StBettingWindow';
export default {
  props: ["gameCode", "name",'ishow'],
  components:{NotOpend,BettingWindow},
  data() {
    return {
      show: false, //暂时状态
      isShow: true,
      noData: true, //显示暂无数据
      rShow:true,//是否为棒球与网球，是则不显示
      info: "没有相关比赛信息",
      status: false,
      isWindow :false,//投注组件隐藏
      isAjax:false,//开关
      list:[],
      letBallData: "" ,//让球大小和1X2数据
    };
  },
  /**
   * 函数方法
   */
  methods: {
    matchInfo(id){
      this.$router.push({path:'/StRollBallBettingPage',query:{gameCode: this.$store.getters.getBallId,number:1,home:true}});
      this.$store.dispatch("MACTH_ID",id);
    },
    //打开联赛投注页面
    goMatchInfo: function(leagueId, sessionId) {
      //console.log(leagueId, sessionId);
      this.$store.dispatch("GETSHOW", true);
      Bus.$on("show", data => {
        this.isShow = data;
      });
    },
    getAjax: function(game_code,type_code) {
      this.$store.dispatch('GETSHOW',true);
      if(!game_code || !type_code) return false;
      this.$http
        .get(this.$ports.match.matchState, { 
          game_code,
          type_code
        })
        .then(res => {
          this.isAjax = true
          if(res.data.status == 1 && res.data.data.length >0  && res.data != null){
            this.letBallData = res.data.data;
          // console.log('  this.letBallData',  this.letBallData)
           this.noData = false;
          }else{
            //  是否显示组件
            this.noData = true;
            //console.log('data',this.noData)
            // 每次更新数据没有数据时则置空。
             this.letBallData = [];
            
          }
          // 状态值数据更改
          this.$store.dispatch('GETSHOW',false);
        });
    },
    isClick() {
    
            if(this.$store.getters.getIsBetting==true){
           return false
       }
      
        this.$store.dispatch('ISBETTING',true)
      // this.$set(this.letBallData.matchData[1].oddsData[1][i], "istrue", (this.letBallData.list[i].istrue = num));
    },
    betting(){
      this.isWindow = true;
    },
    // 点击事件确认选中
    isclick(index, num) {
        console.log(this.letBallData)
       if(this.$store.getters.getIsBetting==true){
           return false
       }
      
        this.$store.dispatch('ISBETTING',true)
    }
  },
  /**
   * 计算属性
   */
  computed: {
    getInfo: function() {
      // 监听vuex状态值的改变
      this.goMatchInfo();
 
      return {game_code: this.$store.getters.getBallId,type_code:this.$store.getters.getActivity}
    },
     IsWindow(){
      return  this.$store.getters.getIsBetting
    }
  },
  watch: {
    getInfo(obj) {
         if(this.$store.getters.getActivity == "StSoon" || this.$store.getters.getActivity == "StRollBall" ){
        if(this.isAjax ){
        this.getAjax(obj.game_code,obj.type_code);
        }
      }
      if(obj.game_code == 'wq'){
          this.rShow = false;
      }else{
        this.rShow = true;
      }
    },
      IsWindow(val){
       this.isWindow = val;
    }
  },
  mounted(){
    this.getAjax(this.$store.getters.getBallId,this.$store.getters.getActivity);
  }
};
</script>
<style scoped>
.yd-cell-box .yd-cell {
  z-index: 99;
  border-radius: 0.2rem;
}
.matchBox {
  background: #f9f9f9;
  padding: 0.27rem 0.34rem 0 0.32rem;
}
.match .tit {
  display: flex;
  justify-content: space-between;
  font-size: 0.32rem;
  margin-bottom: 0.3rem;
}
.match .list {
  overflow: hidden;
  transition: all 0.3s cubic-bezier(0.4, 0.6, 0.2, 1);
}
.match .list div {
  background: #dcdcdc;
  width: 100%;
  height: 0.88rem;
  padding: 0.26rem 0.56rem 0.3rem 0.3rem;
  display: flex;
  justify-content: space-between;
  border-radius: 0.08rem;
  margin-bottom: 0.12rem;
}
.match .list span {
  color: #333333;
  font-size: 0.28rem;
}
.match .list .num {
  width: 0.4rem;
  height: 0.4rem;
  display: inline-block;
  line-height: 0.4rem;
  text-align: center;
  color: #f5f5f5;
  border-radius: 50%;
  font-size: 0.2rem;
  background: #f76649;
}
.yd-accordion {
  background: transparent;
}
.match .list div:nth-last-child(1) {
  margin-bottom: 0.34rem;
}
div /deep/ .yd-accordion-head,
div /deep/ .yd-accordion-head-content,
div /deep/ .yd-accordion-title,
div /deep/ .yd-accordion-title-full {
  height: 0.3rem;
}
div /deep/ .yd-accordion-title {
  min-height: 0;
  font-size: 0.28rem;
}
div /deep/ .yd-accordion-head {
  margin-bottom: 0.3rem;
  border: none;
}
.list-box {
  border: 2px solid #cecece;
  border-radius: 0.2rem;
}
div /deep/ .yd-accordion-head:after {
  height: 0px;
}
div /deep/ .yd-accordion-head-arrow:after {
  border: none;
  width: 0.4rem;
  height: 0.4rem;
  background: url("../assets/st-imges/xiangxia.png") no-repeat;
  background-size: 0.4rem 0.4rem;
}
/* 1x2 */
.top-box {
  height: 0.44rem;
  font-size: 0.24rem;
  background: #fff;
  border-bottom: 1px solid #e4e4e4;
}
.box-bottom {
  /* height: 2.9rem;  */
}
.top-num {
  display: inline-block;
  width: 0.64rem;
  height: 0.44rem;
  line-height: 0.44rem;
  color: #000000;
  text-align: center;
  background: #ebebeb;
  font-size: 0.24rem;
}
.box {
  padding: 0 0.32rem;
  background: #fff;
}
.Match-title-num {
  width: 0.46rem;
  height: 0.46rem;
  line-height: 0.46rem;
  text-align: center;
  background: #f76649;
  font-size: 0.26rem;
  border-radius: 50%;
  color: #e4e4e4;
}
.haderBox {
  padding: 0 0.32rem;
  height: 0.88rem;
  font-size: 0.32rem;
  background: #f8f8f8;
}
.main-box {
  height: 0.9rem;
  background: #fff;
  font-size: 0.28rem;
}
.bottom-box {
  height: 1.1rem;
  background: #fff;
  font-size: 0.24rem;
}
.bottom-box div {
  width: 1.07rem;
  height: 0.76rem;
  border: 2px solid #cecece;
  border-radius: 0.1rem;
  font-size: 0.24rem;
}
.bottom-num {
  padding: 0.1rem;
  text-align: center;
}
.active {
  background: #f76649;
  border: 2px solid #f76649 !important;
}
.active > p {
  color: #e4e4e4 !important;
}
.num-box {
  width: 0.66rem;
  height: 0.34rem;
  background: #f76649;
  border-radius: 0.17rem;
  color: #f5f5f5 !important;
  line-height: 0.34rem;
  text-align: center;
}
.footBox {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}
.footBox .box {
  width: 33%;
  text-align: center;
}
/* 让球&大小 */
.letBallBox {
  padding: 0 0.32rem;
  height: 0.88rem;
  font-size: 0.28rem;
  background: #f4f4f4;
}

.mg {
  margin-bottom: 0.1rem;
}
.Match-title-num {
  width: 0.46rem;
  height: 0.46rem;
  align-items: center;
  justify-content: center;
  line-height: 0.46rem;
  text-align: center;
  background: #f76649;
  font-size: 0.2rem;
  border-radius: 50%;
  color: #f5f5f5;
}

.Match-box-top-right > span {
  width: 1.07rem;
  text-align: center;
}
.listbox{
  padding: 0 .32rem;
}
.name-box {
  height: 1.76rem;
  width: 3.8rem;
}
.Match-box-top {
  height: 0.44rem;
  padding: 0 0.32rem;
  line-height: 0.44rem;
  background: #DCDCDC;
  font-size: 0.23rem;
}
.Match-box-top-num {
  width:0.64rem !important;
  
  height: 0.44rem;
  background: #ebebeb;
  font-size: 0.24rem;
}
.texttop{
  color: #f76649
}
.Match-box {
  padding-top: .12rem;
  background: #f8f8f8;
}
.Match-list-box {
  width: 35%;
  height: 1.76rem;
  flex-wrap: wrap;
}
.Match-list-box .match-list div {
  width: 1.07rem;
  height: 0.8rem;
  border: 2px solid #cecece;
  border-radius: 0.1rem;
  flex-wrap: wrap;
}
.active {
  background: #e4e4e4;
}
/* 模态框样式 */
.BettingWindow{
  z-index: 10000;
  position:fixed;
  top:0;
  width: 100%;
}

</style>