sport_mobile/.svn/pristine/61/61d89094111e07848ac52d21e20759d01311789c.svn-base

<template>
  <div>
    <div class="serch row item-center allAlignment">
      <div class="row item-center">
        <div class="row item-center">
          <input
            class="fz14"
            type="text"
            placeholder="请输入球队名称"
            v-model="serchTxt"
            onkeyup="this.value=this.value.replace(/\s+/g,'')"
            color="#AAA"
          >
          <div class="row center serch-img pointer hover" @click="Serch()">
            <img src="@/assets/st-imges/serch.png" alt>
          </div>
        </div>
        <div class="row item-center">
          <div class="row center clear pointer hover br05 fz14" @click="clearSerchTxt()">清除</div>
        </div>
      </div>
      <div class="row center redraw pointer hover br05" @click="red()">
        <img src="@/assets/st-imges/redraw.png" alt>
      </div>
    </div>
    <div class="theBallSize">
      <div class="theBallSize-list" v-for="(item,index) in data" :key="index">
        <div class="theBallSize-list-title row allAlignment item-center pdg20">
          <span>{{item.leagueName}}</span>
        </div>
        <!-- 标题栏 -->
        <div v-for="(items,i) in item.matchData" :key="i">
          <div class="theBallSize-list-hader row pdg20">
            <div style="width:22%" class="row item-center allAlignment">
              <p style="width:100%;padding-right:.2rem;" class="row item-center average">
                <i>{{items.title}}</i>
                <span>{{items.match_process}}</span>
                <span style="color:#F76649" v-if="items.a_time !=null">{{items.a_time == 0 ? '' : items.a_time}}</span>
                <img style="width:.14rem;height:.14rem" src="@/assets/st-imges/shizhong.png">
              </p>
              <p
                style="font-size:.14rem;color:#fff"
                class="theBallSize-list-hader-num row center triangle"
                @click="getTournamentPlay(items.match_id)"
              >{{items.tag}} ></p>
            </div>
            <div style="width:35%" class="theBallSize-list-full">
              <div class="row center">全场</div>
              <div class="row allAlignment item-center" style="color:#999; padding:0 0.08rem">
                <div class="row center list-left">
                  <span>让球</span>
                </div>
                <div class="row center list-right">
                  <span>大小</span>
                </div>
              </div>
            </div>
            <div style="width:35%" class="theBallSize-list-full">
              <div class="row center">上半场</div>
              <div class="row allAlignment item-center pdg20" style="color:#999;padding:0 0.08rem">
                <div class="row center list-left">
                  <span>让球</span>
                </div>
                <div class="row center list-right">
                  <span>大小</span>
                </div>
              </div>
            </div>
          </div>
          <div class="theBallSize-list-body row pdg20" style="position: relative;">
            <div class="column allAlignment theBallSizeTeam">
              <span>
                <span style="color:#f76649;margin-right:5px;">{{items.home_score}}</span>
                {{items.home_team}}
              </span>
              <span>
                <span style="color: #f76649;margin-right:5px;">
                  {{items.guest_score}}
                </span>
                {{items.guest_team}}
                </span>
            </div>
            <!-- 全场 -->
            <div
              class="row allAlignment"
              style="width:35%;padding: 0.08rem .25rem;border-right:.01rem solid #ededed"
            >
              <!--让球 -->
              <div class="column allAlignment">
                <div
                  class="row rightAlignment"
                  v-for="(e,idx) in items.oddsData"
                  v-if="e.odds_code == 'coh'"
                >
                  <div class="row center conditions">
                    <span>{{e.condition}}</span>
                  </div>
                  <div class="theBallSize-list-txt" :class="{col:e.isTrue,rising:e.change == 'rising',falling:e.change == 'falling'}" @click="selection(index,i,idx,e.id,e.p_code,items.match_id,items.home_team,items.guest_team,items.home_team,'滚球')">
                    <span>{{e.odds}}</span>
                  </div>
                </div>
                <div
                  class="row rightAlignment"
                  v-for="(e,idx) in items.oddsData"
                  v-if="e.odds_code == 'cog'"
                >
                  <div class="row center conditions">
                    <span>{{e.condition}}</span>
                  </div>
                  <div class="theBallSize-list-txt" :class="{col:e.isTrue,rising:e.change == 'rising',falling:e.change == 'falling'}" @click="selection(index,i,idx,e.id,e.p_code,items.match_id,items.home_team,items.guest_team,items.guest_team,'滚球')">
                    <span>{{e.odds}}</span>
                  </div>
                </div>
              </div>
              <!-- 大小 -->
              <div class="column allAlignment">
                <div
                  class="row rightAlignment"
                  v-for="(e,idx) in items.oddsData"
                  v-if="e.odds_code == 'gsb'"
                >
                  <div class="conditions row center">
                    <span>大 {{e.condition}}</span>
                  </div>
                  <div class="theBallSize-list-txt" :class="{col:e.isTrue,rising:e.change == 'rising',falling:e.change == 'falling'}"  @click="selection(index,i,idx,e.id,e.p_code,items.match_id,items.home_team,items.guest_team,'大','滚球')">
                    <span>{{e.odds}}</span>
                  </div>
                </div>
                <div
                  class="row rightAlignment"
                  v-for="(e,idx) in items.oddsData"
                  v-if="e.odds_code == 'gss'"
                >
                  <div class="conditions row center">
                    <span>小 {{e.condition}}</span>
                  </div>
                  <div class="theBallSize-list-txt" :class="{col:e.isTrue,rising:e.change == 'rising',falling:e.change == 'falling'}" @click="selection(index,i,idx,e.id,e.p_code,items.match_id,items.home_team,items.guest_team,'小','滚球')">
                    <span>{{e.odds}}</span>
                  </div>
                </div>
              </div>
            </div>
            <!--半场 -->
            <div class="row allAlignment" style="width:35%;padding: 0.08rem .25rem;">
              <!--让球 -->
              <div class="column allAlignment">
                <div
                  class="row rightAlignment"
                  v-for="(e,idx) in items.oddsData"
                  v-if="e.odds_code == 'coh_h'"
                >
                  <div class="row center conditions">
                    <span>{{e.condition}}</span>
                  </div>
                  <div class="theBallSize-list-txt" :class="{col:e.isTrue,rising:e.change == 'rising',falling:e.change == 'falling'}" @click="selection(index,i,idx,e.id,e.p_code,items.match_id,items.home_team,items.guest_team,items.home_team,'滚球')">
                    <span>{{e.odds}}</span>
                  </div>
                </div>
                <div
                  class="row rightAlignment"
                  v-for="(e,idx) in items.oddsData"
                  v-if="e.odds_code == 'cog_h'"
                >
                  <div class="row center conditions">
                    <span>{{e.condition}}</span>
                  </div>
                  <div class="theBallSize-list-txt" :class="{col:e.isTrue,rising:e.change == 'rising',falling:e.change == 'falling'}" @click="selection(index,i,idx,e.id,e.p_code,items.match_id,items.home_team,items.guest_team,items.guest_team,'滚球')">
                    <span>{{e.odds}}</span>
                  </div>
                </div>
              </div>
              <!-- 大小 -->
              <div class="column allAlignment">
                <div
                  class="row rightAlignment"
                  v-for="(e,idx) in items.oddsData"
                  v-if="e.odds_code == 'gsb_h'"
                >
                  <div class="conditions row center">
                    <span>大{{e.condition}}</span>
                  </div>
                  <div class="theBallSize-list-txt" :class="{col:e.isTrue,rising:e.change == 'rising',falling:e.change == 'falling'}"  @click="selection(index,i,idx,e.id,e.p_code,items.match_id,items.home_team,items.guest_team,'大','滚球')">
                    <span>{{e.odds}}</span>
                  </div>
                </div>
                <div
                  class="row rightAlignment"
                  v-for="(e,idx) in items.oddsData"
                  v-if="e.odds_code == 'gss_h'"
                >
                  <div class="conditions row center">
                    <span>小 {{e.condition}}</span>
                  </div>
                  <div class="theBallSize-list-txt" :class="{col:e.isTrue,rising:e.change == 'rising',falling:e.change == 'falling'}"  @click="selection(index,i,idx,e.id,e.p_code,items.match_id,items.home_team,items.guest_team,'小','滚球')">
                    <span>{{e.odds}}</span>
                  </div>
                </div>
              </div>
            </div>
            <div @click="promptInfo()" class="right-img">
              <img style="margin-bottom:.1rem" src="@/assets/st-imges/TheGame.png">
              <br>
              <img src="@/assets/st-imges/TheScore.png">
            </div>
          </div>
        </div>
      </div>
    </div>
    <div v-if="noData">
      <noData/>
    </div>    
  </div>
</template>

<script>
import "@/css/index.css";
import noData from '@/components/noData';
export default {
  name: "theBallSize", 
  components:{
    noData
  },
  data() {
    return {
      serchTxt: "",
      data: [], //数据
      pCode: this.$store.getters.getPaly_code, //传入接口的值
      activity: this.$store.getters.getActivity, //传入接口的值
      ballCode: this.$store.getters.getBallCode,
      noData : false, //暂无数据显示      
      timers:true,
      lg_id:'',//联赛
      limit:'',
    }
  },
  methods: {
    //   let BallCode = this.$store.getters.getBallCode;
    //   let code =  10011;//默认足球
    //   if(BallCode == 'lq'){
    //     code = 10012;
    //   }else if(BallCode == 'bq'){
    //     code = 10013;
    //   }else if(BallCode == 'wq'){
    //     code = 10014;
    //  }
    /*******************直播比赛数据提示*******************/
    promptInfo(){
      this.$dialog.alert({mes: '此功能占未开放'});
    },

    //
    getAjax(lg_id,search){
      if(this.$store.getters.getActivity == 'StStringScene'){
        this.$store.dispatch("SET_BETTINGTYPE", 2);
      }else{
        this.$store.dispatch("SET_BETTINGTYPE", 1);
      }
      this.$http.get(this.$ports.home.gameList,{
        type: this.$store.getters.getActivity,
        game_code: this.$store.getters.getBallCode,
        lg_id,                                        //需要拷贝
        search
      }).then(res =>{
        // console.log(res.data)
          if(res.data.status == 1 && res.data.data.length > 0){
            this.noData = false;
            this.data = res.data.data[0]
            // console.log(this.data)
            this.dataGroup(this.data)
          }else{
            this.noData = true;
          } 
          this.$store.dispatch("GETLOADING", false);              
      })
    },
    // 进入添加选中效果
    dataGroup(data){
      let betting = this.$store.getters.getBetting;
      if(betting != null && betting.length > 0){
        // console.log('bet',betting)
        data.forEach(e =>{
          e.matchData.forEach(k =>{
            k.oddsData.forEach(item =>{
              betting.forEach(i =>{
                i.data.forEach(j =>{
                  if(j.id == item.id){
                    item.isTrue = true
                  }
                })
              })
            })
          })
        })
      }
    },     
    // 修改选中样式
    // 选中
    selection(idx,i,index,id,p_code,match_id,homeName,guestName,name,playName) {
      // console.log(idx,i,index,id,p_code,match_id,homeName,guestName,name,playName)
      //调用投注公共方法
      let _this = this;
      let ballId = this.$store.getters.getBallCode;     
      let teamName = {
        home : homeName,
        guest : guestName
      }
      let acty =  this.$store.getters.getActivity;
      let betting = this.$store.getters.getBetting;
      this.$public.publicBetting(this.data,p_code,id,idx,i,index,betting,acty,match_id,teamName,playName,name,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);
      })
      // 串场为单串
      if(this.limit < 10){
        this.data[idx].matchData.forEach((val,i) =>{
          val.oddsData.forEach(item =>{
            if(item.id == id){
              this.$forceUpdate();
              this.$set(item, "isTrue", item.isTrue ? false : true);
            }
          })
        })      
      }else{
        this.data[idx].matchData.forEach(val =>{
          val.oddsData.forEach(item =>{
            if(item.id == id){
              this.$set(item,'isTrue',false)
            }
          })
        })             
      }
      //console.log('111',this.$store.getters.getBetting)
    },    
    getTournamentPlay(match_id) {
     // console.log(match_id)
      this.$store.dispatch("MACTH_ID", match_id);
      this.$store.dispatch("SET_CONTROLROUTING", 10011);
    },
    //搜索按钮被点击
    Serch() {
      if (this.serchTxt === "") {
        this.$dialog.toast({ mes: "请输入您想要搜索的内容。", timeout: 2000 });
        return false;
      } else {
        this.data = [];
        this.$store.dispatch("SET_LEAGUEDATA",[]);     //需要拷贝
        this.getAjax('',this.serchTxt)                 //需要拷贝
      }
    },
    // 删除搜索框内容
    clearSerchTxt() {
      if (this.serchTxt != "") {
        this.data = [];
        this.serchTxt = "";
        this.$store.dispatch("SET_LEAGUEDATA",[]);  //需要拷贝
        this.getAjax();
      }
    },
    // 刷新
    red() {
      this.serchTxt = "";
      this.lg_id ="";
      this.$store.dispatch("SET_LEAGUEDATA",[]);  //需要拷贝
      if (this.serchTxt.length > 0) {
        this.Serch();
      } else {
        this.data = '';
        this.getAjax();
      }
    },
  },
  mounted() {
        //获取选择的联赛id
    if(this.$store.getters.getLeagueData.length >0 ){
      if(this.$store.getters.getLeagueData.length == 1){
        this.lg_id = this.$store.getters.getLeagueData[0]
      }else{
        this.lg_id = this.$store.getters.getLeagueData.join(',');
      }
    }
    this.getAjax(this.lg_id);
    this.$store.dispatch("SET_BETTING",[]);     
    let _this = this;
    this.$public.ajaxTimerFun((timing)=>{
      if(_this.timers){
        _this.getAjax(_this.lg_id,_this.serchTxt);
      }else{
      clearInterval(timing)
      }
    })

  },
  computed:{
    getActy() {
      return this.$store.getters.getActivity;
    },
    getDeleteType() {
      return this.$store.getters.getDeleteType;
    },
     // 获取投注数量
    getLimit() {
      return this.$store.getters.getLimit;
    },       
  },
  watch:{
    getActy(val) {
      // this.activity = val;
      this.getAJAX();
      this.$store.dispatch("SET_BETTING",[]);
    },
    // 删除选中数据
    getDeleteType(val){
      let jumpOut = false;
      for(var i = 0; i < this.data.length; i++){
        for(var k = 0; k < this.data[i].matchData.length; k++){
          for(var j = 0; j < this.data[i].matchData[k].oddsData.length;j++){
              if(this.data[i].matchData[k].oddsData[j].id == val){
                this.$forceUpdate();
                this.data[i].matchData[k].oddsData[j].isTrue = false;
                jumpOut = true;
                break;
              }
          }
          if(jumpOut == true){
            break;
          }
        }
          if(jumpOut == true){
            break;
          }        
      }
    },
     getLimit(val){
       this.limit = val;
        if(val == 0){
          this.data.forEach(e =>{
            e.matchData.forEach(k =>{
              k.oddsData.forEach(item =>{
                if(item.isTrue){
                  item.isTrue = false;
                }
              })
            })
          })
        }
    },           
  },
  beforeDestroy(){
    this.timers = false
  }
  };
</script>

<style scoped>
.pdg20 {
  padding: 0 0.2rem;
}
.theBallSize {
  position: relative;
}
.date {
  height: 0.4rem;
  background: #fff;
}
.date > p {
  width: 0.26rem;
  height: 0.26rem;
  background: #bbb;
  border-radius: 0.05rem;
}
.date div {
  width: 88%;
  margin: 0 0.2rem;
}
.datebox {
  overflow-x: auto;
  overflow-y: hidden;
  height: 0.4rem;
}
.datebox p {
  width: 1rem;
  padding: 0.2rem 0;
}
.theBallSize-list-title {
  width: 100%;
  height: 0.4rem;
  background: #898989;
  font-size: 0.16rem;
  color: #fff;
}
.theBallSize-list-title img {
  width: 0.22rem;
  height: 0.22rem;
  margin-left: 0.2rem;
}
.theBallSize-list-hader {
  height: 0.5rem;
  background: #e5e5e5;
  font-size: 0.14rem;
}
.theBallSize-list-hader-num {
  width: 0.8rem;
  height: 0.5rem;
  background: #bbb;
}
.theBallSize-list-hader-num::after {
  border-width: 0.05rem;
  border-left-color: #e5e5e5;
  border-top-color: #e5e5e5;
  left: 40%;
  bottom: -0.05rem;
  transform: rotate(45deg);
}
.theBallSize-list-full div {
  height: 50%;
  line-height: 100%;
}
.theBallSize-list-body {
  background: #fcfcfc;
  font-size: 0.14rem;
  border-bottom: 1px solid #e5e5e5;
}
.theBallSizeTeam {
  width: 22%;
  padding: 0.15rem 0;
  min-height: 0.9rem;
  flex-wrap: wrap;
}
.theBallSize-list-box {
  padding: 0.1rem 0.08rem;
}
.theBallSize-list-box div {
  height: 0.3rem;
  line-height: 0.3rem;
}
.theBallSize-list-box span {
  display: inline-block;
  width: 0.7rem;
}
.theBallSize-list-txt {
  width: 0.48rem !important;
  height: 0.3rem;
  text-align: center;
  line-height: 0.3rem;
  background: #fcfcfc;
  border-radius: 0.05rem;
  border: 0.01rem solid #eee;
  cursor: pointer;
  margin: 0 0.08rem;
}
.list-left {
  width: 0.8rem;
}
.list-right {
  width: 1.4rem;
}
.conditions {
  color: #f76649;
}

.serch {
  width: 100%;
  height: 0.5rem;
  background: #aaa;
  padding: 0 0.2rem;
}
input {
  border: none;
  background: #efefef;
  padding-left: 0.2rem;
  width: 4.6rem;
  height: 0.3rem;
  border-radius: 0.05rem 0 0 0.05rem;
}
.serch-img {
  width: 0.5rem;
  height: 0.3rem;
  background: #666;
  border-radius: 0 0.05rem 0.05rem 0;
  margin-right: 0.3rem;
}
.all {
  width: 1.2rem;
  height: 0.3rem;
  background: #ddd;
  color: #333;
}
.clear {
  width: 0.6rem;
  height: 0.3rem;
  background: #666;
  color: #ccc;
  margin-right: 0.1rem;
}
.redraw {
  width: 0.3rem;
  height: 0.3rem;
  background: #666;
}
img {
  width: 0.2rem;
  height: 0.2rem;
}
.br05 {
  border-radius: 0.05rem;
}
.fz14 {
  font-size: 0.14rem;
}
.hover:hover {
  background: #bbb;
  color: #fff;
}
.pointer {
  cursor: pointer;
}
.right-img {
  width: 0.15rem;
  position: absolute;
  right: .4rem;
  bottom: .15rem;
}
.right-img img {
  width: 0.22rem;
  height: 0.2rem;
}
.col {
  border-radius: 2px;
  background: #f76649;
  color: #fff;
}
</style>