sport_mobile/.svn/pristine/30/30030f0f8dbd4fda0f6c5b8cb3efb4b04cf6487d.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">
        <div style="padding:0.1rem;">
          <div class="match">
            <!-- <div class="tit">
              <span>ATP意大利电信杯</span>
            </div> -->
            <div class="ballTable">
              <div class="listHead row allAlignment">
                <div class="txt-c-0">
                  <div class="section">{{scoreDetails.cp}}<span v-if="scoreDetails.triangle == 'sh'">▼</span><span v-else>▲</span></div>
                </div>
                <div class="row ">
                  <span class="session row center" :class="{current:scoreDetails.cp ==i+1} " v-for="(tiem,i) in 9">
                    {{i+1}}
                  </span>
                  <!-- <span class="mg-5">盘</span> -->
                  <span class="mg-session row center">加时</span>
                  <span class="mg-session row center">当前</span>
                  <span class="mg-session row center">总局数</span>
                </div>
              </div>

              <div class="row allAlignment scoreInfo">
                <div class="row">
                  <div class="ballhold" :class="{attack:scoreDetails.triangle =='sa'}">•</div>
                  <div class="team" style="text-align:left;">{{data.home_team}}</div>
                </div>
                <div class="row">
                 <span class="session row center" :class="{current:scoreDetails.cp ==i+1} " v-for="(tiem,i) in scoreDetails.ps"
                 :key="i">
                    {{tiem.a}}
                  </span>
                  <span class=" mg-session row center " style="background: rgba(255, 165, 0, 0.49);">0</span>
                  <span class=" mg-session row center mark" v-if="scoreDetails.cu">{{scoreDetails.cu.a}}</span>
                  <span class="mg-session row center mark " v-if="scoreDetails.ft">{{scoreDetails.ft.a}}</span>
                </div>
              </div>
              
              <div class="row allAlignment scoreInfo">
                <div class="row">
                  <div class="ballhold"  :class="{attack:scoreDetails.triangle =='sh'} ">•</div>
                  <div class="team" style="text-align:left;">{{data.guest_team}}</div>
                </div>
                <div class="row">
                  <span class="session row center" :class="{current:scoreDetails.cp ==i+1} " v-for="(tiem,i) in scoreDetails.ps">
                    {{tiem.h}}
                  </span>
            
                  <span class="mg-session row center " style="  background:rgba(255, 165, 0, 0.49);">0</span>
                  <span class="mg-session row center mark" v-if="scoreDetails.cu">{{scoreDetails.cu.h}}</span>
                  <span class="mg-session row center mark" v-if="scoreDetails.cu">{{scoreDetails.ft.h}}</span>
                </div>
              </div>
               <div class="listHead row allAlignment"> 
                  <div class="row center">
                    <div  class="eliminate ">
                      <span :class="{spanBox:scoreDetails.tb}" style="margin-left:.11rem;"></span>
                      <div style="width:.31rem;" class="row allAlignment">
                        <span :class="{spanBox:scoreDetails.sb}"></span>
                        <span :class="{spanBox:scoreDetails.fb}"></span>
                      </div>
                    </div>
                  </div>
                 <div>
                   <span>出局:</span>
                   <span>{{scoreDetails.ot}}</span>
                 </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 class="letball"> -->
      <!-- 让球 -->
      <div v-show=" Single =='让球'|| isAll">
        <concede/>
      </div>
      <!-- 进球:大/小 -->
      <div v-show=" Single =='进球:大/小'|| isAll">
        <goalsSize/>
      </div>
      <!-- 总分:大/小 -->
      <div v-show=" (Single =='总分:大/小'|| Single =='总得分:大/小')|| isAll">
        <totalScore/>
      </div>
      <!-- <letBall/> -->
      <!-- 独赢 -->
      <div v-show=" (Single =='独赢'|| Single =='独赢盘')  || isAll">
        <winAlone/>
      </div>
      <!-- 波胆 -->
      <div v-show=" Single =='波胆'|| isAll">
        <waveBladder/>
      </div>
      <!-- 总进球 -->
      <div v-show=" Single =='总进球数'|| isAll">
        <sumGoal/>
      </div>
      <!-- 首粒入球-- -->
      <div v-show=" Single =='首粒入球/最后一粒入球'|| isAll">
        <goalEntry/>
      </div>
      <!-- 半场/全场 -->
      <div v-show=" Single =='半场/全场'|| isAll">
        <halfCount/>
      </div>
      <!-- 总分:单双 -->
      <div v-show="(Single =='总得分:单/双'|| Single =='总分:单双'|| Single =='进球:单/双' || Single == '总局数:单/双' )|| isAll">
        <scoreSingleDouble/>
      </div>
      <!-- 球队进球数:大/小 -->
      <div v-show=" Single =='球队进球数:大/小'|| isAll">
        <teamGoalsSize/>
      </div>
      <!-- 球队得分:大/小 -->
      <div v-show=" Single =='球队得分:大/小'|| isAll">
        <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";
export default {
  data() {
    return {
      activity: "", //活动代码
      active: 0, // 投注页是否打开
      ballCode: "", //球类代码
      matchId: "", //赛事idd
      data: [], //赛事数据源
      previousStorage: "", //前一次data储存数据
      title: "", //
      scoreDetails:'',//比分详情
      key: "", //玩法名字
      Single: "", //
      isAll: true, //
      timers:true,
    };
  },
  components: {
    // letBall,
    goalsSize,
    winAlone,
    sumGoal,
    waveBladder,
    goalEntry,
    // corner,
    halfCount,
    concede,
    // goal,
    // goalHalfCourt,
    // letPlate,
    totalScore,
    score,
    scoreSingleDouble,
    teamGoalsSize,
    teamTotalScoreSize
  },
  /**
   * 页面加载完成挂载
   */
  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 = ["所有盘口"];
          this.data.p_code_array.forEach((e, index) => {
            let palyData = [];
            //组合玩法title
            palyCode.forEach(p => {
              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;
            });
          });

          //处理赛事比分信息
          // console.log('bq',JSON.parse(this.data.result_mark)); 
          this.scoreDetails = {"ps": [{"adv": -1, "a": 6, "e": 3246496, "h": 2, "p": "ft"}, {"adv": -1, "a": 2, "e": 3246496, "h": 0, "p": "ot"}, {"adv": -1, "a": 4, "e": 3246496, "h": 3, "p": "i1"}, {"adv": -1, "a": 2, "e": 3246496, "h": 2, "p": "i2"}, {"adv": -1, "a": 2, "e": 3246496, "h": 0, "p": "i3"}, {"adv": -1, "a": 0, "e": 3246496, "h": 0, "p": "i4"}, {"adv": -1, "a": 0, "e": 3246496, "h": 0, "p": "i5"}, {"adv": -1, "a": 0, "e": 3246496, "h": 0, "p": "i6"}, {"adv": -1, "a": 0, "e": 3246496, "h": 0, "p": "i7"}, {"adv": -1, "a": 0, "e": 3246496, "h": 0, "p": "i8"}, {"adv": -1, "a": 0, "e": 3246496, "h": 0, "p": "i9"}], "ot": 2,"cp":3,"triangle":"sa","sb":true,"tb":false,"fb":true}
          let numArray=[] 
          this.scoreDetails.ps.forEach((e,index)=>{
            if(e.p=='ft'){
              this.scoreDetails.ft = e;
              numArray.push(index);
            }
            if(e.p=='ot'){
              this.scoreDetails.cu = 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{
              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);
         
        }
      });
    },

    /*---------------------------------------------- */
    //获取头部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", "10002");
      // this.$store.dispatch("SET_RETURN_EVENT",1);
      //console.log(this.$store.getters.getReturnEvent);
    }
  },
  /**
   * 计算属性
   */
  computed: {},
  /**
   * 监听器
   */
  watch: {}
};
</script>
<style scoped>
.header {
  background: #4b4b4b;
}
.eliminate span {
  display: block;
  width: 0.1rem;
  height: 0.1rem;
  background: #ccc;
  transform: rotate(45deg);
}
.spanBox {
  background: orange !important;
}
.ballhold{
  /* color:#fff; */
  font-size: 0.2rem;
}
.current{
  color: orange;
}
.attack{
  color: rgb(197, 210, 60);
}
.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;
  /* width: .6rem; */
  height: .4rem;
  text-align: center;
  line-height: .4rem;
  background: #ededed;
  color: #f4755b;
  border-radius: .05rem;
  padding: 0 0.05rem;
}
.header-title::after{
  border-width:.08rem;
  border-left-color:  #ededed;
  border-top-color:  #ededed;
  transform: rotate(135deg);
  right: -10%;
  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;
}
.session{
  width:0.3rem;
}
.scoreInfo{
  line-height: 0.5rem;
  padding: 0 0.1rem ;
}
.mg-session{
  width:0.7rem;
  
}
.mark{
  background: hsla(0, 0%, 100%, 0.25);
}
.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;
}

.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 {
  line-height: 0.5rem;
  padding: 0 0.1rem;
  background: rgba(0, 0, 0, 0.15);
}
.listHead .txt-c-0 {
  display: flex;
  color: orange;
}
.cl {
  color: orange;
}
.sumCl {
  color: #ff0;

}
.welcome{
  height: .5rem;
  line-height: 0.5rem;
  font-size: 0.16rem;
  padding: 0 0.1rem;
  background: #898989;
  color: #fff;
}
</style>