sport_mobile/.svn/pristine/b3/b3d25d2d411bebf341a75be9a301a8c0a19d35e8.svn-base

<template>
  <div>
    <div v-if=" obj.a">
      <!-- 主 -->
      <div class="tit">
        <span>球队得分大小:{{home_team}}</span>
      </div>
      <div class="playCode">
        <div class="home flex">
          <span class="teamName">大</span>
          <div v-for="(item,index) in data" v-if="item.odds_code == 'tbhb'">
            <span class="condition">{{item.condition}}</span>
            <span
              class="odds"
              :class="{chooseStyle:item.isTrue,rising:item.change == 'rising',falling:item.change == 'falling'}"
              @click="betMethod(index,item.id)"
            >{{item.odds}}</span>
          </div>
        </div>
        <div class="guest flex">
          <span class="teamName">小</span>
          <div
            class="oddsBox"
            v-for="(item,index) in data"
            v-if="item.odds_code == 'tbhs'"
          >
          <span class="condition">{{item.condition}}</span>
            <span
              class="odds"
              :class="{chooseStyle:item.isTrue,rising:item.change == 'rising',falling:item.change == 'falling'}"
              @click="betMethod(index,item.id)"
            >{{item.odds}}</span>
          </div>
        </div>
      </div>

      <!-- 客 -->
      <div class="tit">
        <span>球队得分大小:{{guest_team}}</span>
      </div>
      <div class="playCode">
        <div class="home flex">
          <span class="teamName">大</span>
          <div v-for="(item,index) in data" v-if="item.odds_code == 'tbgb'">
            <span class="condition">{{item.condition}}</span>
            <span
              class="odds"
              :class="{chooseStyle:item.isTrue,rising:item.change == 'rising',falling:item.change == 'falling'}"
              @click="betMethod(index,item.id)"
            >{{item.odds}}</span>
          </div>
        </div>
        <div class="guest flex">
          <span class="teamName">小</span>
          <div
            class="oddsBox"
            v-for="(item,index) in data"
            v-if="item.odds_code == 'tbgs'"
          >
          <span class="condition">{{item.condition}}</span>
            <span
              class="odds"
              :class="{chooseStyle:item.isTrue,rising:item.change == 'rising',falling:item.change == 'falling'}"
              @click="betMethod(index,item.id)"
            >{{item.odds}}</span>
          </div>
        </div>
      </div>
    </div>
    <div v-if=" obj.b">
      <!-- 主 -->
      <div class="tit">
        <span>球队得分大小:{{home_team}}-上半场</span>
      </div>
      <div class="playCode">
        <div class="home flex">
          <span class="teamName">大</span>
          <div v-for="(item,index) in data" v-if="item.odds_code == 'tbhb_h'">
            <span class="condition">{{item.condition}}</span>
            <span
              class="odds"
              :class="{chooseStyle:item.isTrue,rising:item.change == 'rising',falling:item.change == 'falling'}"
              @click="betMethod(index,item.id)"
            >{{item.odds}}</span>
          </div>
        </div>
        <div class="guest flex">
          <span class="teamName">小</span>
          <div
            class="oddsBox"
            v-for="(item,index) in data"
            v-if="item.odds_code == 'tbhs_h'"
          >
          <span class="condition">{{item.condition}}</span>
            <span
              class="odds"
              :class="{chooseStyle:item.isTrue,rising:item.change == 'rising',falling:item.change == 'falling'}"
              @click="betMethod(index,item.id)"
            >{{item.odds}}</span>
          </div>
        </div>
      </div>
      <!-- 客 -->
      <div class="tit">
        <span>球队得分大小:{{guest_team}}-上半场</span>
      </div>
      <div class="playCode">
        <div class="home flex">
          <span class="teamName">大</span>
          <div v-for="(item,index) in data" v-if="item.odds_code == 'tbgb_h'">
          <span class="condition">{{item.condition}}</span>            
            <span
              class="odds"
              :class="{chooseStyle:item.isTrue,rising:item.change == 'rising',falling:item.change == 'falling'}"
              @click="betMethod(index,item.id)"
            >{{item.odds}}</span>
          </div>
        </div>
        <div class="guest flex">
          <span class="teamName">小</span>
          <div
            class="oddsBox"
            v-for="(item,index) in data"
            v-if="item.odds_code == 'tbgs_h'"
          >
          <span class="condition">{{item.condition}}</span>
            <span
              class="odds"
              :class="{chooseStyle:item.isTrue,rising:item.change == 'rising',falling:item.change == 'falling'}"
              @click="betMethod(index,item.id)"
            >{{item.odds}}</span>
          </div>
        </div>
      </div>
    </div>

    <div v-if=" obj.c">
      <!-- 主队 -->
      <div class="tit">
        <span>球队得分大小:{{home_team}}-第一节</span>
      </div>
      <div class="playCode">
        <div class="home flex">
          <span class="teamName">大</span>
          <div
            v-for="(item,index) in data"
            v-if="item.odds_code.startsWith('tbhb')  && item.odds_code.endsWith('_1')"
          >
          <span class="condition">{{item.condition}}</span>
            <span
              class="odds"
              :class="{chooseStyle:item.isTrue,rising:item.change == 'rising',falling:item.change == 'falling'}"
              @click="betMethod(index,item.id)"
            >{{item.odds}}</span>
          </div>
        </div>
        <div class="guest flex">
          <span class="teamName">小</span>
          <div
            class="oddsBox"
            v-for="(item,index) in data"
            v-if="item.odds_code.startsWith('tbhs')  && item.odds_code.endsWith('_1')"
          >
            <span
              class="odds"
              :class="{chooseStyle:item.isTrue,rising:item.change == 'rising',falling:item.change == 'falling'}"
              @click="betMethod(index,item.id)"
            >{{item.odds}}</span>
          </div>
        </div>
      </div>
      <!-- 客队 -->
      <div class="tit">
        <span>球队得分大小:{{guest_team}}-第一节</span>
      </div>
      <div class="playCode">
        <div class="home flex">
          <span class="teamName">大</span>
          <div
            v-for="(item,index) in data"
            v-if="item.odds_code.startsWith('tbgb')  && item.odds_code.endsWith('_1')"
          >
          <span class="condition">{{item.condition}}</span>
            <span
              class="odds"
              :class="{chooseStyle:item.isTrue,rising:item.change == 'rising',falling:item.change == 'falling'}"
              @click="betMethod(index,item.id)"
            >{{item.odds}}</span>
          </div>
        </div>
        <div class="guest flex">
          <span class="teamName">小</span>
          <div
            class="oddsBox"
            v-for="(item,index) in data"
            v-if="item.odds_code.startsWith('tbgs')  && item.odds_code.endsWith('_1')"
          >
          <span class="condition">{{item.condition}}</span>
            <span
              class="odds"
              :class="{chooseStyle:item.isTrue,rising:item.change == 'rising',falling:item.change == 'falling'}"
              @click="betMethod(index,item.id)"
            >{{item.odds}}</span>
          </div>
        </div>
      </div>
    </div>
    <div v-if=" obj.d">
      <!-- 主队 -->
      <div class="tit">
        <span>球队得分大小:{{home_team}}-第二节</span>
      </div>
      <div class="playCode">
        <div class="home flex">
          <span class="teamName">大</span>
          <div
            v-for="(item,index) in data"
            v-if="item.odds_code.startsWith('tbhb')  && item.odds_code.endsWith('_2')"
          >
          <span class="condition">{{item.condition}}</span>
            <span
              class="odds"
              :class="{chooseStyle:item.isTrue,rising:item.change == 'rising',falling:item.change == 'falling'}"
              @click="betMethod(index,item.id)"
            >{{item.odds}}</span>
          </div>
        </div>
        <div class="guest flex">
          <span class="teamName">小</span>
          <div
            class="oddsBox"
            v-for="(item,index) in data"
            v-if="item.odds_code.startsWith('tbhs')  && item.odds_code.endsWith('_2')"
          >
          <span class="condition">{{item.condition}}</span>
            <span
              class="odds"
              :class="{chooseStyle:item.isTrue,rising:item.change == 'rising',falling:item.change == 'falling'}"
              @click="betMethod(index,item.id)"
            >{{item.odds}}</span>
          </div>
        </div>
      </div>
      <!-- 客队 -->
      <div class="tit">
        <span>球队得分大小:{{guest_team}}-第二节</span>
      </div>
      <div class="playCode">
        <div class="home flex">
          <span class="teamName">大</span>
          <div
            v-for="(item,index) in data"
            v-if="item.odds_code.startsWith('tbgb')  && item.odds_code.endsWith('_2')"
          >
          <span class="condition">{{item.condition}}</span>
            <span
              class="odds"
              :class="{chooseStyle:item.isTrue,rising:item.change == 'rising',falling:item.change == 'falling'}"
              @click="betMethod(index,item.id)"
            >{{item.odds}}</span>
          </div>
        </div>
        <div class="guest flex">
          <span class="teamName">小</span>
          <div
            class="oddsBox"
            v-for="(item,index) in data"
            v-if="item.odds_code.startsWith('tbgs')  && item.odds_code.endsWith('_2')"
          >
          <span class="condition">{{item.condition}}</span>
            <span
              class="odds"
              :class="{chooseStyle:item.isTrue,rising:item.change == 'rising',falling:item.change == 'falling'}"
              @click="betMethod(index,item.id)"
            >{{item.odds}}</span>
          </div>
        </div>
      </div>
    </div>
    <div v-if=" obj.e">
      <!-- 主队 -->
      <div class="tit">
        <span>球队得分大小:{{home_team}}-第三节</span>
      </div>
      <div class="playCode">
        <div class="home flex">
          <span class="teamName">大</span>
          <div
            v-for="(item,index) in data"
            v-if="item.odds_code.startsWith('tbhb')  && item.odds_code.endsWith('_3')"
          >
          <span class="condition">{{item.condition}}</span>
            <span
              class="odds"
              :class="{chooseStyle:item.isTrue,rising:item.change == 'rising',falling:item.change == 'falling'}"
              @click="betMethod(index,item.id)"
            >{{item.odds}}</span>
          </div>
        </div>
        <div class="guest flex">
          <span class="teamName">小</span>
          <div
            class="oddsBox"
            v-for="(item,index) in data"
            v-if="item.odds_code.startsWith('tbhs')  && item.odds_code.endsWith('_3')"
          >
          <span class="condition">{{item.condition}}</span>
            <span
              class="odds"
              :class="{chooseStyle:item.isTrue,rising:item.change == 'rising',falling:item.change == 'falling'}"
              @click="betMethod(index,item.id)"
            >{{item.odds}}</span>
          </div>
        </div>
      </div>
      <!-- 客队 -->
      <div class="tit">
        <span>球队得分大小:{{guest_team}}-第三节</span>
      </div>
      <div class="playCode">
        <div class="home flex">
          <span class="teamName">大</span>
          <div
            v-for="(item,index) in data"
            v-if="item.odds_code.startsWith('tbgb')  && item.odds_code.endsWith('_3')"
          >
          <span class="condition">{{item.condition}}</span>
            <span
              class="odds"
              :class="{chooseStyle:item.isTrue,rising:item.change == 'rising',falling:item.change == 'falling'}"
              @click="betMethod(index,item.id)"
            >{{item.odds}}</span>
          </div>
        </div>
        <div class="guest flex">
          <span class="teamName">小</span>
          <div
            class="oddsBox"
            v-for="(item,index) in data"
            v-if="item.odds_code.startsWith('tbgs')  && item.odds_code.endsWith('_3')"
          >
          <span class="condition">{{item.condition}}</span>
            <span
              class="odds"
              :class="{chooseStyle:item.isTrue,rising:item.change == 'rising',falling:item.change == 'falling'}"
              @click="betMethod(index,item.id)"
            >{{item.odds}}</span>
          </div>
        </div>
      </div>
    </div>
    <div v-if=" obj.f">
      <!-- 主队 -->
      <div class="tit">
        <span>球队得分大小:{{home_team}}-第四节</span>
      </div>
      <div class="playCode">
        <div class="home flex">
          <span class="teamName">大</span>
          <div
            v-for="(item,index) in data"
            v-if="item.odds_code.startsWith('tbhb')  && item.odds_code.endsWith('_4')"
          >
          <span class="condition">{{item.condition}}</span>
            <span
              class="odds"
              :class="{chooseStyle:item.isTrue,rising:item.change == 'rising',falling:item.change == 'falling'}"
              @click="betMethod(index,item.id)"
            >{{item.odds}}</span>
          </div>
        </div>
        <div class="guest flex">
          <span class="teamName">小</span>
          <div
            class="oddsBox"
            v-for="(item,index) in data"
            v-if="item.odds_code.startsWith('tbhs')  && item.odds_code.endsWith('_4')"
          >
          <span class="condition">{{item.condition}}</span>
            <span
              class="odds"
              :class="{chooseStyle:item.isTrue,rising:item.change == 'rising',falling:item.change == 'falling'}"
              @click="betMethod(index,item.id)"
            >{{item.odds}}</span>
          </div>
        </div>
      </div>
      <!-- 客队 -->
      <div class="tit">
        <span>球队得分大小:{{guest_team}}-第四节</span>
      </div>
      <div class="playCode">
        <div class="home flex">
          <span class="teamName">大</span>
          <div
            v-for="(item,index) in data"
            v-if="item.odds_code.startsWith('tbgb')  && item.odds_code.endsWith('_4')"
          >
          <span class="condition">{{item.condition}}</span>
            <span
              class="odds"
              :class="{chooseStyle:item.isTrue,rising:item.change == 'rising',falling:item.change == 'falling'}"
              @click="betMethod(index,item.id)"
            >{{item.odds}}</span>
          </div>
        </div>
        <div class="guest flex">
          <span class="teamName">小</span>
          <div
            class="oddsBox"
            v-for="(item,index) in data"
            v-if="item.odds_code.startsWith('tbgs')  && item.odds_code.endsWith('_4')"
          >
          <span class="condition">{{item.condition}}</span>
            <span
              class="odds"
              :class="{chooseStyle:item.isTrue,rising:item.change == 'rising',falling:item.change == 'falling'}"
              @click="betMethod(index,item.id)"
            >{{item.odds}}</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      title: "TB",
      andShow: "",
      guest_team: "", //客队名
      home_team: "", //主队名
      obj: "",
      match_id:'',
      data:[],
      limit:'',//投注数量
      lg_id:'',
    };
  },
  /**
   * 页面初始化完成挂载
   */
  mounted() {
    this.andShow = this.$store.getters.getBallCode;
  },
  /***
   * 方法
   */
  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 =="TB" && 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;
        if (
          e.odds_code == 'tbhb' || e.odds_code == 'tbhs'|| e.odds_code == 'tbgb'|| e.odds_code == 'tbgs'
        ) {
          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;
        }
      });
      this.obj = obj;
    },
    /*---------------------------------- */
    //玩法投注
    betMethod(index, id) {
      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;
      val.oddsData.forEach(e => {
        if (e[0].p_code == this.title) {
          this.data = e;
          this.playGrouping(this.data);
          //console.log("12", 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>
.flex {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.tit {
  background: #cdcdcd;
  font-size: 0.14rem;
  padding: 0 0.1rem;
  height: 0.4rem;
  line-height: 0.4rem;
  color: #333;
}
.playCode,
.andCode {
  color: #333;
  display: flex;
  font-size: .14rem;
}
.playCode .home,
.playCode .guest {
  height: 0.4rem;
  line-height: 0.4rem;
  width: 50%;
  background: #fff;
  padding: 0 0 0 0.1rem;
}
.playCode .home {
  width: calc(50% - 1px);
  padding-right: 0.1rem;
  border-right: 1px solid #e4e4e4;
}
.oddsBox {
  margin-right: 0.1rem;
}
.odds {
  display: inline-block;
  height: 0.3rem;
  border: 1px solid #e4e4e4;
  width: 0.5rem;
  background-color: #fff;
  text-align: center;
  line-height: 0.23rem;
  margin: 0.07rem auto 0.04rem;
  padding: 0.04rem;
}
.odds:hover {
  background: orange !important;
  color: #fff !important;
  border-color: orange !important;
  cursor: pointer;
}
.guest {
  padding-right: 0.1rem;
}
.home:hover,
.guest:hover {
  background: #fff5e9;
}
.draw {
  width: 20%;
  background: #fff;
  padding: 0 0.1rem;
  border-right: 1px solid #e4e4e4;
}
.condition {
  color: #f76649;
  font-weight: bold;
  margin-right: .1rem;
}
</style>