sport_mobile/.svn/pristine/24/24f8b152cbf88951eb1710292418401be8225fbb.svn-base

<template>
  <div>
    <div v-if="isData">
      <div v-if="obj.a ">
        <div class="tit">
          <span>总分:大/小</span>
        </div>
        <div class="playCode ">
          <div class="row item-center">
            <div class="teamName wrap">大</div>
            <div class="row allAlignment " >
              <div class="row center obbsBox rightAlignment" v-for="(item,index) in data"  v-if="item.odds_code == 'tnb'">
                <span class="condation">{{item.condition}}</span>
                <div class="odds row center" :class="{chooseStyle:item.isTrue,rising:item.change == 'rising',falling:item.change == 'falling'}" @click="betMethod(index,item.id,'大','总分:大/小')">
                  <span >{{item.odds}}</span>
                </div>
              </div>
            </div>
          </div>
          <div class="row item-center">
            <div class="teamName wrap">小</div>
            <div class="row allAlignment" >
              <div class="row center obbsBox rightAlignment" v-for="(item,index) in data" v-if="item.odds_code == 'tns'">
                <span class="condation">{{item.condition}}</span>
                <div class="odds row center" :class="{chooseStyle:item.isTrue,rising:item.change == 'rising',falling:item.change == 'falling'}" @click="betMethod(index,item.id,'小','总分:大/小')">
                  <span >{{item.odds}}</span>
                </div>
              </div>
            </div>
          </div>
        </div> 
      </div>
      <div v-if="obj.b ">
        <div class="tit">
          <span>总分:大/小-上半场</span>
        </div>
        <div class="playCode ">
          <div class="row item-center">
            <div class="teamName wrap">大</div>
            <div class="row allAlignment " >
              <div class="row center obbsBox rightAlignment" v-for="(item,index) in data" v-if="item.odds_code.startsWith('tnb')  && item.odds_code.endsWith('_h') ">
                <span class="condation">{{item.condition}}</span>
                <div class="odds row center" :class="{chooseStyle:item.isTrue,rising:item.change == 'rising',falling:item.change == 'falling'}" @click="betMethod(index,item.id,'大','总分:大/小-上半场')">
                  <span >{{item.odds}}</span>
                </div>
              </div>
            </div>
          </div>
          <div class="row item-center">
            <div class="teamName wrap">小</div>
            <div class="row allAlignment" >
              <div class="row center obbsBox rightAlignment" v-for="(item,index) in data" v-if="item.odds_code.startsWith('tns')  && item.odds_code.endsWith('_h')">
                <span class="condation">{{item.condition}}</span>
                <div class="odds row center" :class="{chooseStyle:item.isTrue,rising:item.change == 'rising',falling:item.change == 'falling'}" @click="betMethod(index,item.id,'小','总分:大/小-上半场')">
                  <span >{{item.odds}}</span>
                </div>
              </div>
            </div>
          </div>
        </div> 
      </div>
      <div v-if="obj.c ">
        <div class="tit">
          <span>总分:大/小-第一节</span>
        </div>
        <div class="playCode ">
          <div class="row item-center">
            <div class="teamName wrap">大</div>
            <div class="row allAlignment " >
              <div class="row center obbsBox rightAlignment" v-for="(item,index) in data" v-if="item.odds_code.startsWith('tnb')  && item.odds_code.endsWith('_1') ">
                <span class="condation">{{item.condition}}</span>
                <div class="odds row center" :class="{chooseStyle:item.isTrue,rising:item.change == 'rising',falling:item.change == 'falling'}" @click="betMethod(index,item.id,'大','总分:大/小-第一节')">
                  <span >{{item.odds}}</span>
                </div>
              </div>
            </div>
          </div>
          <div class="row item-center">
            <div class="teamName wrap">小</div>
            <div class="row allAlignment" >
              <div class="row center obbsBox rightAlignment" v-for="(item,index) in data" v-if="item.odds_code.startsWith('tns')  && item.odds_code.endsWith('_1')">
                <span class="condation">{{item.condition}}</span>
                <div class="odds row center" :class="{chooseStyle:item.isTrue,rising:item.change == 'rising',falling:item.change == 'falling'}" @click="betMethod(index,item.id,'小','总分:大/小-第一节')">
                  <span >{{item.odds}}</span>
                </div>
              </div>
            </div>
          </div>
        </div> 
      </div>
      <div v-if="obj.d ">
        <div class="tit">
          <span>总分:大/小-第二节</span>
        </div>
        <div class="playCode ">
          <div class="row item-center">
            <div class="teamName wrap">大</div>
            <div class="row allAlignment " >
              <div class="row center obbsBox rightAlignment" v-for="(item,index) in data" v-if="item.odds_code.startsWith('tnb')  && item.odds_code.endsWith('_2') ">
                <span class="condation">{{item.condition}}</span>
                <div class="odds row center" :class="{chooseStyle:item.isTrue,rising:item.change == 'rising',falling:item.change == 'falling'}" @click="betMethod(index,item.id,'大','总分:大/小-第二节')">
                  <span >{{item.odds}}</span>
                </div>
              </div>
            </div>
          </div>
          <div class="row item-center">
            <div class="teamName wrap">小</div>
            <div class="row allAlignment" >
              <div class="row center obbsBox rightAlignment" v-for="(item,index) in data" v-if="item.odds_code.startsWith('tns')  && item.odds_code.endsWith('_2')">
                <span class="condation">{{item.condition}}</span>
                <div class="odds row center" :class="{chooseStyle:item.isTrue,rising:item.change == 'rising',falling:item.change == 'falling'}" @click="betMethod(index,item.id,'小','总分:大/小-第二节')">
                  <span >{{item.odds}}</span>
                </div>
              </div>
            </div>
          </div>
        </div> 
      </div>
      <div v-if="obj.e ">
        <div class="tit">
          <span>总分:大/小-第三节</span>
        </div>
        <div class="playCode ">
          <div class="row item-center">
            <div class="teamName wrap">大</div>
            <div class="row allAlignment " >
              <div class="row center obbsBox rightAlignment" v-for="(item,index) in data" v-if="item.odds_code.startsWith('tnb')  && item.odds_code.endsWith('_3') ">
                <span class="condation">{{item.condition}}</span>
                <div class="odds row center" :class="{chooseStyle:item.isTrue,rising:item.change == 'rising',falling:item.change == 'falling'}" @click="betMethod(index,item.id,'大','总分:大/小-第三节')">
                  <span >{{item.odds}}</span>
                </div>
              </div>
            </div>
          </div>
          <div class="row item-center">
            <div class="teamName wrap">小</div>
            <div class="row allAlignment" >
              <div class="row center obbsBox rightAlignment" v-for="(item,index) in data" v-if="item.odds_code.startsWith('tns')  && item.odds_code.endsWith('_3')">
                <span class="condation">{{item.condition}}</span>
                <div class="odds row center" :class="{chooseStyle:item.isTrue,rising:item.change == 'rising',falling:item.change == 'falling'}" @click="betMethod(index,item.id,'小','总分:大/小-第三节')">
                  <span >{{item.odds}}</span>
                </div>
              </div>
            </div>
          </div>
        </div> 
      </div>
      <div v-if="obj.f ">
        <div class="tit">
          <span>总分:大/小-第四节</span>
        </div>
        <div class="playCode ">
          <div class="row item-center">
            <div class="teamName wrap">大</div>
            <div class="row allAlignment " >
              <div class="row center obbsBox rightAlignment" v-for="(item,index) in data" v-if="item.odds_code.startsWith('tnb')  && item.odds_code.endsWith('_4') ">
                <span class="condation">{{item.condition}}</span>
                <div class="odds row center" :class="{chooseStyle:item.isTrue,rising:item.change == 'rising',falling:item.change == 'falling'}" @click="betMethod(index,item.id,'大','总分:大/小-第四节')">
                  <span >{{item.odds}}</span>
                </div>
              </div>
            </div>
          </div>
          <div class="row item-center">
            <div class="teamName wrap">小</div>
            <div class="row allAlignment" >
              <div class="row center obbsBox rightAlignment" v-for="(item,index) in data" v-if="item.odds_code.startsWith('tns')  && item.odds_code.endsWith('_4')">
                <span class="condation">{{item.condition}}</span>
                <div class="odds row center" :class="{chooseStyle:item.isTrue,rising:item.change == 'rising',falling:item.change == 'falling'}" @click="betMethod(index,item.id,'小','总分:大/小-第四节')">
                  <span >{{item.odds}}</span>
                </div>
              </div>
            </div>
          </div>
        </div> 
      </div>
      <div v-if="obj.g ">
        <div class="tit">
          <span>总分:大/小-前五局</span>
        </div>
        <div class="playCode ">
          <div class="row item-center">
            <div class="teamName wrap">大</div>
            <div class="row allAlignment " >
              <div class="row center obbsBox rightAlignment" v-for="(item,index) in data" v-if="item.odds_code.startsWith('tnb')  && item.odds_code.endsWith('_5') ">
                <span class="condation">{{item.condition}}</span>
                <div class="odds row center" :class="{chooseStyle:item.isTrue,rising:item.change == 'rising',falling:item.change == 'falling'}" @click="betMethod(index,item.id,'大','总分:大/小-前五局')">
                  <span >{{item.odds}}</span>
                </div>
              </div>
            </div>
          </div>
          <div class="row item-center">
            <div class="teamName wrap">小</div>
            <div class="row allAlignment" >
              <div class="row center obbsBox rightAlignment" v-for="(item,index) in data" v-if="item.odds_code.startsWith('tns')  && item.odds_code.endsWith('_5')">
                <span class="condation">{{item.condition}}</span>
                <div class="odds row center" :class="{chooseStyle:item.isTrue,rising:item.change == 'rising',falling:item.change == 'falling'}" @click="betMethod(index,item.id,'小','总分:大/小-前五局')">
                  <span >{{item.odds}}</span>
                </div>
              </div>
            </div>
          </div>
        </div> 
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data(){
    return{
      title:'TN',
      data:[],//数据源
      isData:'',//
      guest_team:'',//客队名
      home_team:'',//主队名
      obj:'',//
      match_id:'',
      limit:'',//投注数量
      lg_id:'',
    }
  },
  /***
  * 方法
  */
  methods:{
    //玩法分类
    playGrouping(data){
      let obj={};
      let betting = this.$store.getters.getBetting;
      data.forEach(e=>{
         if(betting.length > 0){
          for(let i= 0; i< betting.length; i++){
            if(betting[i].title =="TN" && betting[i].data.length >0){
              for(let j = 0 ; j < betting[i].data.length ; j++ ){
                if(betting[i].data[j].id == e.id){
                  this.$set(e,'isTrue',true);
                  //betting[i].data.splice(j,1);
                }
              }
              break;
            }
          }
        }
        e.lg_id = this.lg_id;
        console.log('odds_code:', e.odds_code)
        if(e.odds_code == 'tnb'||e.odds_code == 'tns'){
          obj.a= true
        }else if(e.odds_code.endsWith('_h')){
          obj.b= true;
        }else if(e.odds_code.endsWith('_1')){
          obj.c= true;
        }else if(e.odds_code.endsWith('_2')){
          obj.d= true;
        }else if(e.odds_code.endsWith('_3')){
          obj.e= true;
        }else if(e.odds_code.endsWith('_4')){
          obj.f= true;
        }else if(e.odds_code.endsWith('_5')){
          obj.g= true;
        }
      })
      this.obj = obj;
    },

    /*---------------------------------- */
    //玩法投注
    betMethod(index,id,name,playName){
      if(this.data[index].isTrue){
        this.$set(this.data[index],'isTrue',false);
      }else{
        this.$set(this.data[index],'isTrue',true);
      }
      //调用投注公共方法
      let betting = this.$store.getters.getBetting;
      let _this = this;
      let ballId = this.$store.getters.getBallCode;
      let teamName ={
        home:this.home_team,
        guest:this.guest_team
      }
      this.$public.publicBetMethod(this.data,this.title,id,index,betting,teamName,playName,name,this.match_id,ballId,this.limit,function(data,type){
        if(type){
          _this.$dialog.toast({ mes: "亲，超出表格上限啦。", timeout: 2000 }); 
        }
        _this.$store.dispatch("SET_BETTING",[]);
        _this.$store.dispatch("SET_BETTING",data);
      })
    }
  },
  /**
  * 计算属性
  */
  computed: {
    getGameRatio(){
      return this.$store.getters.getGameRatio
    },
    //获取投注数据
    getBetting(){
      return this.$store.getters.getBetting
    },
    //获取投注数据数量
    getLimit(){
      return this.$store.getters.getLimit
    }

  },
  /**
   * 监听器
   */
  watch: {
    getGameRatio(val){
      this.lg_id = val.lg_id
       this.match_id = val.match_id;
        this.guest_team = val.guest_team;
        this.home_team = val.home_team
        console.log('Data', val)
        val.oddsData.forEach(e => {
            if(e[0].p_code == this.title){
              this.data = e
              this.isData = true;
              this.playGrouping(this.data );
            }
        });
      //console.log(this.data);
    },
     //投注数据监听和处理
    getBetting(val){
      if(val.length > 0){
        let id = this.$store.getters.getDeleteType;
        for(let i= 0; i < val.length; i++ ){
          if(val[i].title == this.title){
            for(let j = 0;j < this.data.length ;j++){
              if(this.data[j].id == id){
                this.$set(this.data[j],'isTrue',false)
                break;
              }
            }
            break;
          }
        }
        
      }else{
        for(let j = 0;j < this.data.length ;j++){
          if(this.data[j].isTrue){
            this.$set(this.data[j],'isTrue',false)
          }
        }
      }
    },
    //投注数量
    getLimit(val){
      this.limit = val
    },
    
  },
};
</script>
<style scoped>
.tit {
  background: #cdcdcd;
  font-size: 0.14rem;
  padding: 0 0.2rem;
  height: 0.4rem;
  line-height: 0.4rem;
  color: #333;
}
.playCode {
  background: #fff;
  font-size: .16rem;
  padding: 0 .1rem;
}
.obbsBox{
  width: 1.3rem;
  min-height: 0.4rem;
}
.teamName{
  width: 1.5rem;
}
.odds {
    display: inline-block;
    width: 0.48rem;
    height: 0.3rem;
    font-size: .14rem;
    border: 0.01rem solid #ccc;
    line-height: 0.3rem;
    text-align: center;
    border-radius: 0.05rem;
    cursor: pointer;
}
.odds:hover,
.odds:hover span {
     background: #ddd;
    color: #f76649;
}
.condation {
  color: #f76649;
  font-size: .14rem;
  font-weight: bold;
  margin-right: 0.1rem;
}
.guest .odds span {
  line-height: 0.44rem;
}
/*玩法加注样式*/
.chooseStyle{
  background: #F76649;
  color: #fff;
  border-color: #F76649;
}
</style>