sport_mobile/.svn/pristine/5e/5edcbe6d15e491ae5992cc9888fb5a32801f9cab.svn-base

<template>
  <div>
    <div class="header">
      <div class="title">
        <div @click="returnEvent()" class="row item-center">
          <i class="backSingPage"></i>
          <span class="header-title triangle">滚球{{title}}</span>
          <span style="color:#333;margin-left:.3rem;">{{data.leagueName}}</span>
        </div>
        <div>
          <i></i>
          <div class="redraw">
            <i class="refresh"></i>
          </div>
        </div>
      </div>

      <!-- 足球头部 -->
      <div class="tennisHead" style="padding:0.1rem;">
        <!-- <div style="padding:0.1rem;"> -->
        <!-- <div class="match"> -->
        <!-- <div class="tit">
              <span>{{data.leagueName}}</span>
        </div>-->
        <div class="ballTable">
          <div class="listHead row allAlignment">
            <div class="txt">
              <div class="spanCol">第{{scoreDetails.schedule == "1"?'一' : scoreDetails.schedule =="2" ? "二": scoreDetails.schedule =="3" ? "三": scoreDetails.schedule=="4" ? "四":"五" }}节</div>
              <!-- <div class="delay">天气原因延期</div> -->
            </div>
            <div class="headerTop row rightAlignment">
              <span :class="{spanCol:scoreDetails.schedule == 1}" >1</span>
              <span :class="{spanCol:scoreDetails.schedule == 2}" >2</span>
              <span :class="{spanCol:scoreDetails.schedule == 3}" >3</span>
              <span v-if="scoreDetails.best >3" :class="{spanCol:scoreDetails.schedule == 4}" >4</span>
              <span v-if="scoreDetails.best >3" :class="{spanCol:scoreDetails.schedule == 5}" >5</span>
              <span class="mg-5">分数</span>
              <span class="mg-5">盘</span>
              <span class="mg-5">总局数</span>
            </div>
          </div>
          <div class="row allAlignment list">
            <div class="row">
              <!-- <div class="ballhold" style="color: rgb(197, 210, 60);">•</div> -->
              <div class="team" style="text-align:left;">{{data.home_team}}</div>
            </div>
            <div class="score row rightAlignment">
              <span :class="{spanCol:scoreDetails.schedule == 1}" > {{scoreDetails.sc_1th_H}}</span>
              <span :class="{spanCol:scoreDetails.schedule == 2}" > {{scoreDetails.sc_2th_H}}</span>
              <span :class="{spanCol:scoreDetails.schedule == 3}" > {{scoreDetails.sc_3th_H}}</span>
              <span v-if="scoreDetails.best >3" :class="{spanCol:scoreDetails.schedule == 4}" > {{scoreDetails.sc_4th_H}}</span>
              <span v-if="scoreDetails.best >3" :class="{spanCol:scoreDetails.schedule == 5}" > {{scoreDetails.sc_5th_H}}</span>
              <span v-if="scoreDetails" class="mg-5 mark cl" style="background: rgba(255, 165, 0, 0.49);">{{scoreDetails.spot_H}}</span>
              <span  v-if="scoreDetails" class="mg-5 mark">{{scoreDetails.disc_H}}</span>
              <span  v-if="scoreDetails" class="mg-5 mark sumCl">{{scoreDetails.game_num_H}}</span>
            </div>
          </div>
          <div class="row allAlignment list">
            <div class="row">
              <!-- <span class="ballhold" style="color:#fff;">•</span> -->
              <span class="team" style="text-align:left;">{{data.guest_team}}</span>
            </div>
            <div class="score row rightAlignment">
              <span :class="{spanCol:scoreDetails.schedule == 1}" > {{scoreDetails.sc_1th_C}}</span>
              <span :class="{spanCol:scoreDetails.schedule == 2}" > {{scoreDetails.sc_2th_C}}</span>
              <span :class="{spanCol:scoreDetails.schedule == 3}" > {{scoreDetails.sc_3th_C}}</span>
              <span v-if="scoreDetails.best >3" :class="{spanCol:scoreDetails.schedule == 4}" > {{scoreDetails.sc_4th_C}}</span>
              <span v-if="scoreDetails.best >3" :class="{spanCol:scoreDetails.schedule == 5}" > {{scoreDetails.sc_5th_C}}</span>
           
              <span v-if="scoreDetails" class="mg-5 mark cl" style="background: rgba(255, 165, 0, 0.49);">{{scoreDetails.spot_C}}</span>
              <span  v-if="scoreDetails" class="mg-5 mark">{{scoreDetails.disc_C}}</span>
              <span  v-if="scoreDetails" class="mg-5 mark sumCl">{{scoreDetails.game_num_C}}</span>
            </div>
          </div>
          <div></div>
        </div>
        <!-- </div>
        </div>-->
      </div>

      <div class="welcome row NavSlide">
        <nav class="scroll">
          <div class="row center" v-for="(itme,$index) in key" @click="toggleNav($index)">
            <span :class="{active:$index == active}">{{itme}}</span>
          </div>
        </nav>
      </div>
    </div>
    <div class="cont">
      <!-- 让局 -->
      <div v-show=" Single =='让局'|| isAll">
        <theBureau/>
        <!-- <concede/> -->
      </div>
      
      <!-- <letBall/> -->
      <!-- 独赢 -->
      <div v-show=" Single =='独赢' || isAll">
        <winAlone/>
      </div>
      <!-- 波胆 -->
      <div v-show=" Single =='波胆'|| isAll">
        <waveBladder/>
      </div>
      <!-- 总局数:单/双 -->
      <div v-show="Single == '总局数:单/双'|| isAll">
        <BureauOddEven/>
        <!-- <teamTotalScoreSize/> -->
      </div>
      <!-- 让盘 -->
      <div v-show=" Single =='让盘'|| isAll">
        <thePlate/>
        <!-- <teamTotalScoreSize/> -->
      </div>
   
      <!-- 总局数:大/小 -->
      <div v-show=" Single =='总局数:大/小'|| isAll">
        <BureauSizeOfThe/>
        <!-- <teamTotalScoreSize/> -->
      </div>
      <!-- 角球 -->
      <!-- <corner/> -->
      <!-- 进球 -->
      <!-- <goal/> -->
      <!-- 进球半场 -->
      <!-- <goalHalfCourt/> -->
      <!-- 让盘  -->
      <!-- <letPlate/> -->
      <!-- 球队得分 -->
      <score/>
    </div>
  </div>
</template>
<script>
import "@/css/index.css";
// import letBall from "@/components/betting/letBall";
import goalsSize from "@/components/betting/goalsSize";
import teamGoalsSize from "@/components/betting/teamGoalsSize";
import teamTotalScoreSize from "@/components/betting/teamTotalScoreSize";
import scoreSingleDouble from "@/components/betting/scoreSingleDouble";
import winAlone from "@/components/betting/winAlone";
import sumGoal from "@/components/betting/sumGoal";
import waveBladder from "@/components/betting/waveBladder";
import goalEntry from "@/components/betting/goalEntry";
// import corner from "@/components/betting/corner";
import halfCount from "@/components/betting/halfCount";
import concede from "@/components/betting/concede";
// import goal from "@/components/betting/goal";
// import goalHalfCourt from "@/components/betting/goalHalfCourt";
// import letPlate from "@/components/betting/letPlate";
import totalScore from "@/components/betting/totalScore";
import score from "@/components/betting/score";
import theBureau from "@/components/betting/theBureau"; //让局
import BureauOddEven from "@/components/betting/BureauOddEven"; //总局数单双
import BureauSizeOfThe from "@/components/betting/BureauSizeOfThe"; //总局数大小
import TopGame from "@/components/betting/TopGame"; //冠军
import thePlate from "@/components/betting/thePlate"; //让盘
export default {
  data() {
    return {
      activity: "", //活动代码
      active: 0, // 投注页是否打开
      ballCode: "", //球类代码
      matchId: "", //赛事idd
      data: [], //赛事数据源
      scoreDetails:'',//
      previousStorage: "", //前一次data储存数据
      title: "", //
      key: "", //玩法名字
      Single: "", //
      isAll: true, //
      timers: true,
    };
  },
  components: {
    // letBall,
    goalsSize,
    winAlone,
    sumGoal,
    waveBladder,
    goalEntry,
    // corner,
    halfCount,
    concede,
    // goal,
    // goalHalfCourt,
    // letPlate,
    totalScore,
    score,
    scoreSingleDouble,
    teamGoalsSize,
    teamTotalScoreSize,
    BureauOddEven,
    BureauSizeOfThe,
    theBureau,
    TopGame,
    thePlate
  },
  /**
   * 页面加载完成挂载
   */
  mounted() {
   
    this.activity = this.$store.getters.getActivity;
    this.ballCode = this.$store.getters.getBallCode;
    this.matchId = this.$store.getters.getMatchId;
    this.$store.dispatch("SET_BETTING", []); //设置默认值
    this.getAjax();
    this.gteTitle(this.ballCode, this.activity);
    this.$store.dispatch("SET_BETTINGTYPE", 1);
    let _this = this;
    this.$public.ajaxTimerFun(timing => {
      if (_this.timers) {
        _this.getAjax();
      } else {
        clearInterval(timing);
      }
    }, 10000);
 
  },
  beforeDestroy() {
    this.timers = false;
  },
  /***
   * 方法
   */
  methods: {
    /*------------------------------------------------ */
    //玩法数据请求
    getAjax() {
      let type = this.activity == "StRollBall" ? 2 : 1;
      let data = {
        game_code: this.ballCode,
        matchID: this.matchId,
        status: type,
        oddsType: this.activity
      };
      this.$http.get(this.$ports.gambling.matchOdds, data).then(res => {
        if (res.data.status == 1) {
          this.data = res.data.data;
          let arrayData = [];
          let palyCode = this.$store.getters.getPlayAlias;
          let key = ["所有盘口"];
          // console.log(this.data.p_code_array);
          // console.log('1231231',palyCode);
          this.data.p_code_array.forEach((e, index) => {
            let palyData = [];
            //组合玩法title
            palyCode.forEach(p => {
              // console.log(e,this.ballCode );
              if (e == p.odds_code && p.game_code == this.ballCode) {
                key.push(p.odds_name);
              }
            });
            //玩法数据分类
            this.data.oddsData.forEach(val => {
              if (e == val.p_code) {
                palyData.push(val);
              }
              arrayData[index] = palyData;
            });
          });
        
          //处理赛事比分信息
          this.scoreDetails = JSON.parse(this.data.result_mark);
          this.scoreDetails.schedule = this.scoreDetails.schedule.replace(/[^0-9]/ig,"");
          console.log(this.scoreDetails);
          let numArray = [];
        //  this.scoreDetails.ps.forEach((e,index)=>{
        //     if(e.p=='ft'){
        //       this.scoreDetails.ft = e;
        //       numArray.push(index);
        //     }
        //     if(e.p=='ftg'){
        //       this.scoreDetails.ftg = e;
        //       numArray.push(index);
        //     }
        //     if(e.p=='p'){
        //       this.scoreDetails.p = e;
        //       numArray.push(index);
        //     }
        //   })

          numArray.forEach((e,index)=>{
            if(index == 1){
              if(numArray[0] < numArray[1]){
                this.scoreDetails.ps.splice(e - 1,1)
              }else{
                this.scoreDetails.ps.splice(e,1)
              }
            }else if(index == 2){
              if(numArray[1] < numArray[2]){
                this.scoreDetails.ps.splice(e - 2,1)
              }else if(numArray[1] > numArray[2] && numArray[0] < numArray[2]){
                this.scoreDetails.ps.splice(e - 1,1)
              }else if(numArray[1] > numArray[2] && numArray[0] > numArray[2]){
                this.scoreDetails.ps.splice(e,1)
              }
            }else{
              this.scoreDetails.ps.splice(e,1)
            }
          })

          // console.log(arrayData);
          //更新数据和上一次的数据匹配
          if (
            this.previousStorage &&
            this.previousStorage.match_id == this.data.match_id &&
            this.previousStorage.oddsData.length > 0
          ) {
            this.$public.oddsDataUpdate(
              arrayData,
              this.previousStorage.oddsData,
              2
            );
          }
          this.data.oddsData = arrayData;
          //储存临时数据
          this.previousStorage = this.data;
          //rising=上升、falling=下降
          this.$store.dispatch("GETGAMERATIO", this.data);
          this.key = key;
          // console.log(key);
          console.log("wq", this.data);
        }
      });
    },

    /*---------------------------------------------- */
    //获取头部title数据
    gteTitle(data, type) {
      if (data == "zq") {
        this.title = "足球";
      } else if (data == "lq") {
        this.title = "蓝球";
      } else if (data == "wq") {
        this.title = "网球";
      } else if (data == "bq") {
        this.title = "棒球";
      }
    },

    /*--------------------------------------------- */
    /**
     * 切换玩法类型
     */
    toggleNav: function(index) {
      this.active = index;
      if (this.key[index] == "所有盘口") {
        this.isAll = true;
      } else {
        this.isAll = false;
        this.Single = this.key[index];
      }
    },

    /*--------------------------------------------- */
    /**
     * 切换玩法类型
     */
    returnEvent: function() {
      this.$store.dispatch("SET_CONTROLROUTING", "10003");
      // this.$store.dispatch("SET_RETURN_EVENT",1);
      //console.log(this.$store.getters.getReturnEvent);
    }
  },
  /**
   * 计算属性
   */
  computed: {},
  /**
   * 监听器
   */
  watch: {}
};
</script>
<style scoped>
.header {
  background: #4b4b4b;
}
.header .title {
  font-size: 0.18rem;
  /* color: #f76649; */
  padding: 0 0.2rem;
  /* font-weight: 700; */
  height: 0.6rem;
  line-height: 0.4rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.header-title {
  display: inline-block;
  padding: 0 0.05rem;
  height: 0.4rem;
  text-align: center;
  line-height: 0.4rem;
  background: #ededed;
  color: #f4755b;
  border-radius: 0.05rem;
}
.header-title::after {
  border-width: 0.08rem;
  border-left-color: #ededed;
  border-top-color: #ededed;
  transform: rotate(135deg);
  right: -9%;
  top: 28%;
}
.title .backSingPage {
  display: inline-block;
  background: url("../assets/st-imges/returnimg.png") no-repeat;
  /* filter: brightness(2); */
  background-size: 100% 100%;
  height: 0.28rem;
  width: 0.28rem;
  vertical-align: middle;
  margin-right: 0.16rem;
  cursor: pointer;
}
.title {
  background: #ababab;
  color: #333;
}
.title .backSingPage:hover,
.refresh:hover {
  filter: brightness(2);
}
.redraw {
  width: 0.3rem;
  height: 0.3rem;
  background: #666;
  cursor: pointer;
  text-align: center;
  border-radius: 0.05rem;
}
.redraw:hover {
  background: #959595;
  color: #fff;
}
.refresh {
  background: url("../assets/st-imges/redraw.png") no-repeat;
  background-size: 100% 100%;
  display: inline-block;
  width: 0.2rem;
  height: 0.2rem;
}
/* 普通赛事头部 */
.ordinaryHead {
  background: url("../assets/st-imges/football.png") no-repeat;
  background-size: 100% 100%;
  /* padding: 0.04rem; */
  height: 0.6rem;
  line-height: 0.6rem;
}
.ordinaryHead .match {
  color: #fff;
}
.ordinaryHead .match .info {
  padding: 0 0.2rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.match .time {
  font-weight: 400;
  color: #bd4700;
  margin-left: 0.05rem;
}
.live-score {
  padding: 0 8%;
}
.NavSlide {
  width: 100%;
  overflow: hidden;
  font-size: 0.16rem;
  height: 0.4rem;
  background: #898989;
  color: #cdcdcd;
}
.NavSlide nav {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: middle;
  -ms-flex-align: middle;
  align-items: middle;
  overflow: auto;
}
.NavSlide div {
  text-align: center;
  /* font-size: 0.28rem; */
  -ms-flex-negative: 0;
  flex-shrink: 0;
  padding: 0 0.1rem;
  color: #fff;
  cursor: pointer;
}
.active {
  color: #f76649;
  font-weight: 700;
}
.scroll::-webkit-scrollbar {
  width: 0;
  height: 0;
}
.list {
  line-height: 0.4rem;
  padding: 0 0.1rem;
  color: #fff;
}
.header {
  background: #4b4b4b;
}
.header .title {
  font-size: 0.18rem;
  color: #fe9200;
  padding: 0 0.2rem;
  font-weight: 700;
  height: 0.6rem;
  line-height: 0.4rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.title .backSingPage {
  display: inline-block;
  background: url("../assets/st-imges/returnimg.png") no-repeat;
  background-size: 100% 100%;
  height: 0.28rem;
  width: 0.28rem;
  vertical-align: middle;
  margin-right: 0.16rem;
  cursor: pointer;
}
.title .backSingPage:hover,
.refresh:hover {
  filter: brightness(1.5);
}
.redraw {
  width: 0.3rem;
  height: 0.3rem;
  background: #666;
  cursor: pointer;
  text-align: center;
  border-radius: 0.05rem;
}
.redraw:hover {
  background: #959595;
  color: #fff;
}
.refresh {
  background: url("../assets/st-imges/redraw.png") no-repeat;
  background-size: 100% 100%;
  display: inline-block;
  width: 0.2rem;
  height: 0.2rem;
}
/* 网球头部 */
.tennisHead {
  background: url("../assets/st-imges/tennisball.png") no-repeat;
  background-size: 100% 100%;
  width: 100%;
  height: auto;
}
.match {
  color: #fff;
  height: auto;
}
.match .tit {
  height: 0.32rem;
  line-height: 0.32rem;
  /* margin-top: -4px; */
}
.ballTable {
  background: rgba(0, 0, 0, 0.2);
}
.listHead {
  padding: 0 0.1rem;
  line-height: 0.5rem;
  background: rgba(0, 0, 0, 0.15);
  color: #fff;
}
.listHead .spanCol{
  color: orange;
}

.sumCl {
  color: #ff0;
}
.welcome {
  height: 0.5rem;
  line-height: 0.5rem;
  font-size: 0.16rem;
  padding: 0 0.1rem;
  background: #898989;
  color: #fff;
}
.headerTop {
  width: 50%;
}
.score {
  width: 50%;
}
.score span {
  display: inline-block;
  width: 0.3rem;
  text-align: center;
}
.score span.mg-5 {
  width: 0.7rem;
}
.headerTop span {
  display: inline-block;
  width: 0.3rem;
  text-align: center;
}
.headerTop span.mg-5 {
  width: 0.7rem;
}
.mark {
  background: hsla(0, 0%, 100%, 0.25);
}
.list {
  background: hsla(0, 0%, 100%, 0.2);
}
</style>