sport_mobile/.svn/pristine/5f/5f046a6255c9541b3e8606768fb8e10058af7cc6.svn-base

<template>
  <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 == 'StStringScene')"
      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="item.id"
        >{{item.title}}</p>
      </nav>
    </div>

    <div class="singleAndDouble" v-for="(item,index) in data" :key="item.id">
      <div style="height:.4rem;background:#ccc;font-size:.16rem;" class="row item-center pdg20">{{item.leagueName}}</div>
      <div v-for="(items,i) in item.matchData" :key="items.id">
        <!-- 此处循环第一层 -->

        <div class="singleAndDouble-header pdg20 row" style="height:.4rem;width:100%">
          <div style="width:8%;font-size:.16rem" class="row item-center">全场</div>
          <div class="row item-center"><p style="margin-right:.1rem;">{{items.match_date}}</p><p style="color:#F76649;">{{items.match_time}}</p></div>
        </div>
        <!-- 列表 -->
        <div class="singleAndDouble-body row pdg20" style="border-bottom:.01rem solid #ddd">
          <div style="width:16%;" class="row item-center">
            <div class="namep">
              <p>{{items.home_team}}</p>
              <p>{{items.guest_team}}</p>
              <p>和局</p>
            </div>
          </div>
          <div style="width:82%;">
     
              <div class="row item-center average" style="width:100%;">
                <div class="singleAndDouble-list-btn"  v-for="(a,k) in items.oddsData" 
                :key="a.id" v-if="a.condition[0]- a.condition[2] > 0"
                  @click="selection(index,i,k,a.id,a.p_code,items.match_id,items.home_team,items.guest_team,items.home_team,'波胆')"
                  :class="{col:a.isTrue,rising:a.change == 'rising',falling:a.change == 'falling'}"
                ><i style="color:#f76649;">{{a.condition}}</i><br />{{a.odds}}</div>
              </div>
              <div class="row item-center average" style="width:100%;">
                <div
                  class="singleAndDouble-list-btn"
                  v-for="(a,k) in items.oddsData"
                  :key="k"
                  v-if="a.condition[0]- a.condition[2] < 0"
                  @click="selection(index,i,k,a.id,a.p_code,items.match_id,items.home_team,items.guest_team,items.guest_team,'波胆')"
                  :class="{col:a.isTrue,rising:a.change == 'rising',falling:a.change == 'falling'}"
                ><i style="color:#f76649;">{{a.condition}}</i><br />{{a.odds}}</div>
              </div>
              <div class="row item-center average" style="width:100%;">
                <div
                  class="singleAndDouble-list-btn"
                  v-for="(a,k) in items.oddsData"
                  :key="a.id"
                  v-if="a.condition[0]- a.condition[2] == 0 || a.condition == '其他'"
                  @click="selection(index,i,k,a.id,a.p_code,items.match_id,items.home_team,items.guest_team,'','波胆')"
                  :class="{col:a.isTrue,rising:a.change == 'rising',falling:a.change == 'falling'}"
                ><i style="color:#f76649;">{{a.condition}}</i><br />{{a.odds}}</div>
                <div v-for="a in 4" :key="a" style="width: 0.48rem;height: 0.38rem; margin: .025rem;"></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 v-if="noData">
      <noData/>
    </div>
  </div>
</template>
<script>
import "@/css/index.css";
import noData from "@/components/noData";
export default {
  name: "WaveBravery",
  components: {
    noData
  },
  data() {
    return {
      date: [{id:'all',title:'全部'}],//日期
      dateClick:'all',//激活的日期
      data: [],
      pCode: this.$store.getters.getPaly_code, //传入接口的值
      activity: this.$store.getters.getActivity, //传入接口的值
      ballCode: this.$store.getters.getBallCode,
      serchTxt: "",
      timers: true,
      noData: false, // 无数据显示
      limit: "",
      passLimit:'',
      dataList: [],
      noShow:false,
      lg_id:'',//联赛 
    };
  },
  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.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);
      }
    });
  },
  beforeDestroy() {
    this.timers = false;
  },
  methods: {
    /*******************直播比赛数据提示*******************/
    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.activity,
          p_code: this.pCode,
          game_code: this.ballCode,
          match_date:this.dateClick == 'all'? '': this.dateClick,
          lg_id,                                        //需要拷贝
          search
        }) .then(res => {
          //console.log(res.data)
          if (res.data.status == 1 && res.data.data.length>0) {
            this.noData = false;            //no
            this.dataSort(res.data.data[0]);
          //  //数据匹配判断是否上一次有数据
          //   if(this.dataList.length){
          //     this.$public.oddsDataUpdate(res.data.data[0],this.dataList,1)
          //   }
          // console.log();
            this.data = res.data.data[0];
            //临时储存数据
            this.dataList = res.data.data[0];
            let betting = '';
            if (this.$store.getters.getActivity == "StStringScene") {
                betting = this.$store.getters.getPassBetting;
            }else{
                betting = this.$store.getters.getBetting;
            }
           this.dataGroup(this.data,betting);
          }else{
            this.noData = true;
          }
          this.noShow = true;    //true
          this.$store.dispatch("GETLOADING", false);
        });
    },
    // 进入添加选中效果
    dataGroup(data,betting) {
      if (betting != null && betting.length > 0) {
        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;
                  }
                });
              });
            });
          });
        });
      }
    },
    // 数据排序
    dataSort(data) {
      let flag = true;
      if (data) {
        // 将主队，客队，和和区分开来，还有其他
        data.forEach(a => {
          a.matchData.forEach((b, k) => {
            let arr = [],home = [],goust = [],other;
            b.oddsData.forEach((c, i) => {
              let odds_code = c.odds_code;
              if (odds_code == "bo") {
                other = c;
              }else{
                if (odds_code[1] < odds_code[2]) {
                  //客队
                  goust.push(c);
                } else if (odds_code[1] > odds_code[2]) {
                  //主队
                  home.push(c);
                } else if (odds_code[1] == odds_code[2]) {
                  //和局
                  arr.push(c);
                }
              }
            });

            //客队排序
            goust.sort((a, z) => {
              let str1 = a.condition.split("-");
              let str2 = z.condition.split("-");
              if (str1[1] - str2[1] != 0) {
                return str1[1] - str2[1];
              } else {
                return str1[0] - str2[0];
              }
            });

            //主队排序
            home.sort((a, z) => {
              let str1 = a.condition.split("-");
              let str2 = z.condition.split("-");
              if (str1[0] - str2[0] != 0) {
                return str1[0] - str2[0];
              } else {
                return str1[1] - str2[1];
              }
            });

            //和排序
            arr.sort((a, z) => {
              let str1 = a.condition.split("-");
              let str2 = z.condition.split("-");
              return str1[0] - str2[0];
            });

            b.oddsData = [...home, ...goust, ...arr];
            // b.oddsData = [...home, ...goust, ...arr];
            b.oddsData.push(other);
            // console.log(b.oddsData)
          });
        });
      }
    },
    // 修改样式
    // 选中
    selection(
      idx,
      i,
      index,
      id,
      p_code,
      match_id,
      homeName,
      guestName,
      name,
      playName
    ) {
      //调用投注公共方法
      let _this = this;
      let ballId = this.$store.getters.getBallCode;
      let acty = this.$store.getters.getActivity;
      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();
  },
  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();
      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>
.pdg20 {
  padding: 0 0.2rem;
}
.singleAndDouble-header {
  height: 0.4rem;
  background: #e5e5e5;
}
.singleAndDouble-header-title p {
  font-size: 0.12rem;
}
.singleAndDouble-body {
  position: relative;
  background: #fff;
}
.namep > p{
  height: .38rem;
  margin: .025rem;
  line-height: .38rem;
}
.singleAndDouble-body:hover {
  background: #fff5e9;
}
.singleAndDouble-list-btn {
     width: 0.48rem !important;
    height: 0.44rem;
    text-align: center;
    background: #fcfcfc;
    margin: .025rem;
    border-radius: 0.05rem;
    border: 0.01rem solid #eee;
    cursor: pointer;
}
.singleAndDouble-list-btn:hover {
  background: #ddd;
  color: #f76649;
}
.right-img {
  width: 0.15rem;
  position: absolute;
  right: 0.18rem;
  bottom: 30%;
}
.right-img img {
  width: 0.22rem;
  height: 0.2rem;
}
* {
  font-size: 0.14rem;
}

.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;
}
.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>