sport_mobile/.svn/pristine/7f/7f4760119e8a4e79841e891bd4ddec28f13b37d4.svn-base

<template>
  <div>
    <div>
      <!-- 搜索框 -->
      <div class="serch row item-center allAlignment" v-if="noShow">
        <div class="row center all pointer hover br05 fz14" @click="elasticFrame()">
          <span style="font-size:.14rem;color:#ccc;">选择联赛</span>
        </div>
        <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 class="row center redraw pointer hover br05" @click="red()">
              <img src="@/assets/st-imges/redraw.png" alt>
            </div>
          </div>
        </div>
      </div>


      <!-- 日期 -->
      <div v-if="(this.$store.getters.getActivity == 'StMorningPlate'||this.$store.getters.getActivity == 'StMorningPlate')" class="date row item-center pdg20">
        <nav class="row datebox scroll allAlignment">
          <p @click="dateActive(item.id)" :class="dateClick == item.id?'dateShow':''" v-for="(item,index) in date" :key="index">{{item.title}}</p>
        </nav>
      </div>

      <!-- 列表 -->
      <div v-for="(item,index) in data" :key="index">
        <!-- 联赛 -->
        <div class="header pdg20 row item-center">{{item.leagueName}}</div>
        <!-- 表格 -->
        <div class="list" v-for="(e,i) in item.matchData" :key="e.id">
          <div class="list-header row item-center pdg20">
            <div class="list-header-time row allAlignment">
              <div class="row item-center wrap">
                <p style="width:100%">{{e.match_date}}</p>
                <p style="color:rgb(247, 102, 73);width:100%">{{e.match_time}}</p>
              </div>
              <div
                class="list-header-time-num triangle row center"
                @click="getTournamentPlay(e.match_id)"
              >{{e.tag}} ></div>
            </div>
            <div class="list-header-title row">
              <div class="row item-center pdg20 average" style="min-height:.6rem">
                <span>让分</span>
                <span>大/小</span>
              </div>
              <div class="row center" style="min-height:.5rem;">球队大小</div>
            </div>
          </div>
          <div class="list-body row pdg20" style="position: relative;">
            <div class="list-body-name">
              <p style="width:100%">{{e.home_team}}</p>
              <p style="width:100%">{{e.guest_team}}</p>
            </div>
            <div class="list-body-center row" style="position: relative;">
              <div class="row item-center" style="border-right:.01rem solid #ccc;">
                
                <div class="row average" style="position: relative;">
                  <!-- 让球 -->
                  <div class="column">
                    <div v-for="(itemList,idx) in e.oddsData" :key="itemList.id" v-if="itemList.odds_code == 'coh' || itemList.odds_code == 'cog'">
                    <!-- 让球主队 -->
                      <div v-if="itemList.odds_code == 'coh'" class="row item-center  rightAlignment"
                        style="min-height:.4rem;"  >
                        <div style="color:#f76649;margin-right:.1rem;">{{itemList.condition}}</div>
                        <div
                          class="btn"
                          @click="selection(index,i,idx,itemList.id,itemList.p_code,itemList.match_id,e.home_team,e.guest_team,e.home_team,'让球')"
                          :class="{col:itemList.isTrue,rising:itemList.change == 'rising',falling:itemList.change == 'falling'}"
                        >{{itemList.odds}}</div>
                      </div>
                      <!-- 让球客队 -->
                      <div
                        v-if="itemList.odds_code == 'cog'"
                        class="row item-center  guest rightAlignment"
                        style="min-height:.4rem;"
                      >
                        <div style="color:#f76649;margin-right:.1rem;">{{itemList.condition}}</div>
                        <div
                          class="btn"
                          @click="selection(index,i,idx,itemList.id,itemList.p_code,itemList.match_id,e.home_team,e.guest_team,e.guest_team,'让球')"
                          :class="{col:itemList.isTrue,rising:itemList.change == 'rising',falling:itemList.change == 'falling'}"
                        >{{itemList.odds}}</div>
                      </div>
                    </div>
                  </div>
                  <!-- 大小 -->
                  <div class="column">
                    <div  v-for="(itemList,idx) in e.oddsData" :key="itemList.id" v-if="itemList.odds_code.startsWith('tn')">
                      <div
                        v-if="itemList.odds_code == 'tnb'"
                        class="row item-center size rightAlignment"
                        style="min-height:.4rem;"
                      >
                        <div style="color:#f76649;margin-right:.1rem;">{{itemList.condition}}</div>
                        <div
                          class="btn"
                          @click="selection(index,i,idx,itemList.id,itemList.p_code,itemList.match_id,e.home_team,e.guest_team,e.home_team,'大小')"
                          :class="{col:itemList.isTrue,rising:itemList.change == 'rising',falling:itemList.change == 'falling'}"
                        >{{itemList.odds}}</div>
                      </div>
                      <div
                        v-if="itemList.odds_code == 'tns'"
                        class="row item-center size guest rightAlignment"
                        style="min-height:.4rem;"
                      >
                        <div style="color:#f76649;margin-right:.1rem;">{{itemList.condition}}</div>
                        <div
                          class="btn"
                          @click="selection(index,i,idx,itemList.id,itemList.p_code,itemList.match_id,e.home_team,e.guest_team,e.guest_team,'大小')"
                          :class="{col:itemList.isTrue,rising:itemList.change == 'rising',falling:itemList.change == 'falling'}"
                        >{{itemList.odds}}</div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
              <div class="row center">
                <!--球队大小  -->
                <div class="column item-center">
                  <div v-for="(itemList,idx) in e.oddsData" :key="itemList.id" v-if="itemList.odds_code == 'tbhb'||itemList.odds_code == 'tbgb' " >
                    <div v-if="itemList.odds_code == 'tbhb'" class="row center size rightAlignment" style="min-height:.4rem;" >
                      <div style="color:#f76649;margin-right:.1rem;">大{{itemList.condition}}</div>
                      <div class="btn"
                        @click="selection(index,i,idx,itemList.id,itemList.p_code,itemList.match_id,e.home_team,e.guest_team,e.home_team,'球队得分大小')"
                        :class="{col:itemList.isTrue,rising:itemList.change == 'rising',falling:itemList.change == 'falling'}"
                      >{{itemList.odds}}</div>
                    </div>
                    <div v-if="itemList.odds_code == 'tbgb'" class="row center size guest rightAlignment"  style="min-height:.4rem;"  >
                      <div style="color:#f76649;margin-right:.1rem;">大{{itemList.condition}}</div>
                      <div class="btn"
                        @click="selection(index,i,idx,itemList.id,itemList.p_code,itemList.match_id,e.home_team,e.guest_team,e.guest_team,'球队得分大小')"
                        :class="{col:itemList.isTrue,rising:itemList.change == 'rising',falling:itemList.change == 'falling'}"
                      >{{itemList.odds}}</div>
                    </div>
                  </div> 
                </div>

                <div class="column item-center">
                  <div v-for="(itemList,idx) in e.oddsData" :key="itemList.id" v-if="itemList.odds_code == 'tbhs'||itemList.odds_code == 'tbgs' " >
                    <div v-if="itemList.odds_code == 'tbhs'" class="row item-center size rightAlignment" style="min-height:.4rem;" >
                      <div style="color:#f76649;margin-right:.1rem;">小{{itemList.condition}}</div>
                      <div class="btn"
                        @click="selection(index,i,idx,itemList.id,itemList.p_code,itemList.match_id,e.home_team,e.guest_team,e.home_team,'球队得分大小')"
                        :class="{col:itemList.isTrue,rising:itemList.change == 'rising',falling:itemList.change == 'falling'}"
                      >{{itemList.odds}}</div>
                    </div>
                    <div v-if="itemList.odds_code == 'tbgs'" class="row item-center size guest rightAlignment" style="min-height:.4rem;"  >
                      <div style="color:#f76649;margin-right:.1rem;">小{{itemList.condition}}</div>
                      <div class="btn"
                        @click="selection(index,i,idx,itemList.id,itemList.p_code,itemList.match_id,e.home_team,e.guest_team,e.guest_team,'球队得分大小')"
                        :class="{col:itemList.isTrue,rising:itemList.change == 'rising',falling:itemList.change == 'falling'}"
                      >{{itemList.odds}}</div>
                    </div>
                  </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: "basketballTheBallSize",
  components:{
    noData
  },      
  data() {
    return {
      date: [{id:'all',title:'全部'}],//日期
      dateClick:'all',//激活的日期
      serchTxt: "",
      // pCode: this.$store.getters.getPaly_code, //传入接口的值
      activity: this.$store.getters.getActivity,
      // ballCode: this.$store.getters.getBallCode, //传入接口的值
      data: [], //数据
      noData : false, // 暂无数据显示
      limit : '',
      passLimit:'',
      timers:true,//轮询开关
      dataList:[],
      noShow : true,
      lg_id:'',//联赛 
    };
  },
  methods: {
    
    /*******************直播比赛数据提示*******************/
    promptInfo(){
      this.$dialog.alert({mes: '此功能占未开放'});
    },

    getAJAX(lg_id,search) {
      this.$http
        .get(this.$ports.home.gameList, {
          type: this.$store.getters.getActivity,
          p_code: this.$store.getters.getPaly_code,
          game_code: this.$store.getters.getBallCode,
          match_date:this.dateClick == 'all'? '': this.dateClick,
          lg_id,                                        //需要拷贝
          search
        })
        .then(res => {
            this.data = ''
          if (res.data.status == 1 && res.data.data.length >0 ) {
            this.noData = false;
            //数据匹配判断是否上一次有数据
            // if(this.dataList.length){
            //   this.$public.oddsDataUpdate(res.data.data[0],this.dataList,1)
            // }
            this.data = res.data.data[0];
            let betting = '';
            // console.log(this.data,'res')
            //临时储存数据
            this.dataList = res.data.data[0];
            if(this.$store.getters.getActivity == 'StStringScene'){
              betting = this.$store.getters.getPassBetting;
            }else{
              betting = this.$store.getters.getBetting;
            }                 
            this.dataGroup(this.data,betting)
            this.$store.dispatch("GETLOADING", false); 
          }else{
            this.noData = true;
          }
          this.noShow = true;
          this.$store.dispatch("GETLOADING", false); 
        });
    },
    dataGroup(data,betting){
      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
                  }
                })
              })
            })
          })
        })
      }
    },     
    getTournamentPlay(match_id) {
      this.$store.dispatch("MACTH_ID", match_id);
      this.$store.dispatch("SET_CONTROLROUTING", 10010);
    },
    // 选中
    // 选中
    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 acty =  this.$store.getters.getActivity;
      let ballId = this.$store.getters.getBallCode;      
      let teamName = {
        home : homeName,
        guest : guestName
      }
      if(this.$store.getters.getActivity == 'StStringScene'){
        let betting = this.$store.getters.getPassBetting;
        if(betting == null){
            betting = [];
          }                  
        this.$public.strandPublicBetting(this.data,p_code,id,idx,i,index,betting,acty,match_id,playName,name,ballId,homeName,guestName,this.passLimit,function(data,type){
            if(type){
              _this.$dialog.toast({ mes: "亲，超出表格上限啦。", timeout: 2000 }); 
            }          
          _this.$store.dispatch("SET_PASSBETTING",[]);
            _this.$store.dispatch("SET_PASSBETTING",data);
          })          
        }else{
          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(this.$store.getters.getActivity == 'StStringScene'){
            if(this.passLimit < 10){
              if(val.match_id == match_id){
                // 当isTrue值为true时，点击时置为false
                if(item.id == id){
                  // console.log(item.isTrue)
                  if(item.isTrue == true){
                    this.$forceUpdate();
                      item.isTrue = false
                  }else if(item.isTrue = false){
                    this.$forceUpdate();
                    item.isTrue = true
                  }else{
                    this.$forceUpdate();
                    this.$set(item, "isTrue", item.isTrue ? false : true);
                  }
                }else{
                if(item.isTrue == true){
                    item.isTrue = false;
                  }
                }
              }
            }else{
              if(item.id == id){
                this.$forceUpdate();
                this.$set(item,'isTrue',false)
              }
            }
          }else{
            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)
              }
            })
          })        
      }
    },
    //搜索按钮被点击
    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();
      }
    },
    //跳转到联赛选择页
    elasticFrame() {
      this.$store.dispatch("SET_CONTROLROUTING", 10015);
    },
        // 日期计算
    fun_date() {
      let date = new Date();
      let MonthNum = 0;
      let lastMonth = new Date(date.getFullYear(),date.getMonth() + 1,0).getDate();
      for (let i = 1; i < 7; i++) {
        let years = date.getFullYear();
        let month = date.getMonth() + 1;
        let day =
          date.getDate() + i < 10
            ? "0" + (date.getDate() + i)
            : date.getDate() + i;
        if (date.getDate() + i > lastMonth) {
          MonthNum++;
          month = date.getMonth() + 2;
          day = "0" + MonthNum;
        }
        let time = {};
        time.id = years + "-" + month + "-" + day;
        time.title =years+' - '+month + " - " + day;
        this.date.push(time);
      }
    },
    dateActive(str){
      this.dateClick = str;
      this.data = '';
      this.getAJAX(this.lg_id,this.serchTxt);
    },
  },
    created(){
    this.fun_date();
  },
  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.$store.dispatch("GETLOADING", true);
    this.$store.dispatch("SET_BETTING",[]);    
    this.getAJAX(this.lg_id);
    let _this = this;
    this.$public.ajaxTimerFun((timing)=>{
      if(_this.timers){
         _this.getAJAX(_this.lg_id,_this.serchTxt);
      }else{
        clearInterval(timing)
      }
    })

  },
  beforeDestroy(){
    this.timers = false;
  },
  computed: {
    getActy() {
      return this.$store.getters.getActivity;

    },
    // getPaly_code() {
    //   return this.$store.getters.getPaly_code;
    // },
    // getBallId() {
    //   return this.$store.getters.getBallCode;
    // },
    // 获取投注数量
    getLimit() {
      return this.$store.getters.getLimit;
    },
    getPassLimit(){
      return this.$store.getters.getPassLimit;
    },    
    //获取投注框删除的投注信息
    getDeleteType() {
      return this.$store.getters.getDeleteType;
    }
  },
  watch: {
    getActy(val) {
      this.activity = val;
      //  this.data = '';
      this.getAJAX();
      this.$store.dispatch("SET_BETTING",[]);//设置默认值
      if(val != 'StStringScene'){
        this.$store.dispatch("SET_PASSBETTING",[]);
      }       
    },
    // getPaly_code(val) {
    //   this.pCode = val;
    //   this.getAJAX();
    // },
    // getBallId(val) {
    //   this.ballCode = val;
    //   this.getAJAX();
    // },
     getLimit(val){
       this.limit = val;
       if(this.$store.getters.getActivity == 'StStringScene'){
       }else{
        if(val == 0){
          this.data.forEach(e =>{
            e.matchData.forEach(k =>{
              k.oddsData.forEach(item =>{
                if(item.isTrue){
                  item.isTrue = false;
                }
              })
            })
          })
        }
       }
    }, 
    getPassLimit(val){
      this.passLimit = val;
      if(this.$store.getters.getActivity == 'StStringScene'){
        if(val == 0){
          this.data.forEach(e =>{
            e.matchData.forEach(k =>{
              k.oddsData.forEach(item =>{
                if(item.isTrue){
                  this.$forceUpdate();
                  item.isTrue = false;
                }
              })
            })
          })
        }
      }
    },    
    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;
          }        
      }
    },  
  }  
};
</script>

<style scoped>
.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: #666;
  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!important;
}
.hover:hover span{
  color: #fff!important;
}
.pointer {
  cursor: pointer;
}

.pdg20 {
  padding: 0 0.2rem;
}
.header {
  width: 100%;
  min-height: 0.4rem;
  background: #ccc;
  font-size: 0.16rem;
  color: #333;
}
.list {
  width: 100%;
}
.list-header {
  height: 0.5rem;
  background: #e5e5e5;
  font-size: 0.14rem;
}
.list-header-time {
  width: 26%;
}
.list-header-time-num {
  width: 0.5rem;
  min-height: 0.5rem;
  background: #bbb;
  color: #fff;
  cursor: pointer;
}
.list-header-time-num::after {
  border-width: 0.05rem;
  border-left-color: #e5e5e5;
  border-top-color: #e5e5e5;
  left: 40%;
  bottom: -0.05rem;
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
}
.list-header-title {
  width: 70%;
  min-height: 0.5rem;
}
.list-header-title > div {
  width: 50%;
  height: 100%;
  color: #aaa;
}
.list-body {
  font-size: 0.14rem;
  min-height: 0.8rem;
  background: #fcfcfc;
}
.list-body:hover {
  background: #fff5e9;
}
.list-body-name {
  width: 26%;
  line-height: 0.4rem;
}
.list-body-center {
  width: 70%;
}
.list-body-center > div {
  width: 50%;
  min-height: 0.5rem;
}
.list-body-center > div > div {
  width: 100%;
  height: 100%;
}
.list-body-center > div > div span {
  display: block;
  line-height: 0.4rem;
  text-align: right;
  color: #f76649;
}
.btn {
  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;
}
.btn:hover {
  background: #ddd;
  color: #f76649;
}
.list-header-title p {
  width: 0.82rem;
  text-align: center;
  min-height: 0.5rem;
  line-height: 0.5rem;
}
/* .theball {
  position: absolute;
  left: 10%;
  top: 2%;
  width: 1rem;
} */
/* .size {
  position: absolute;
  left: 54%;
  top: 2%;
  width: 1rem;
} */
.guest {
  top: 50%;
}
.ballbig {
  /* position: absolute; */
  left: 10%;
  top: 8%;
  width: 1rem;
}
.ballsmall {
  /* position: absolute; */
  left: 60%;
  top: 8%;
  width: 1rem;
}
.right-img {
  width: 0.15rem;
  position: absolute;
  right: 0.3rem;
  bottom: 0.1rem;
}
.right-img img {
  width: 0.22rem;
  height: 0.2rem;
}
.col {
  border-radius: 2px;
  background: #f76649;
  color: #fff;
}








/* 日期样式 */
.date {
  height: 0.4rem;
  background: #898989;
  font-size: .16rem;
  color: #fff;
  font-weight: bold;
}
.date > p {
  width: 0.26rem;
  height: 0.26rem;
  background: #bbb;
  border-radius: 0.05rem;
}
.date div {
  width: 100%;
  height: 100%;
}
.datebox {
  overflow-x: auto;
  overflow-y: hidden;
  width: 100%;
  height: 0.4rem;
}
.datebox p {
  text-align: center;
  line-height: .4rem;
  padding: 0 .05rem;
  cursor: pointer;
  font-size: .16rem;
}
.dateShow{
  color: #f76649;
}
</style>