sport_mobile/.svn/pristine/b3/b3822d93dc8e4d5d7da478c890a06d1695e58f16.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="ordinaryHead">
        <div class="match">
          <div class="info">
            <div>
              <span>{{data.home_team}}</span>
              <span class="pk">VS</span>
              <span>{{data.guest_team}}</span>
            </div>
            <div class="timer">
              <div>
                <span class="scene">{{data.match_ptime}}</span>
                &nbsp;
                <span class="time">{{data.match_time}}</span>
              </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 =='让分'|| Single =='让球'|| isAll">
        <concede/>
      </div>
      <!-- 让局 -->
      <div v-show=" Single =='让局'|| isAll">
        <theBureau />
        <!-- <concede/> -->
      </div>
      <!-- 进球:大/小 -->
      <div v-show=" Single =='进球:大/小'|| isAll">
        <goalsSize/>
      </div>
      <!-- 总分:大/小 -->
      <div v-show=" 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 =='进球:单/双' )|| isAll">
        <scoreSingleDouble/>
      </div>
      <!-- 球队进球数:大/小 -->
      <div v-show=" (Single =='球队进球数:大/小'|| isAll ) && this.title == '足球'">
        <teamGoalsSize/>
      </div>
      <!-- 球队得分:大/小 -->
      <div v-show="(Single =='球队得分:大/小'|| isAll) && this.title != '足球'">
        <teamTotalScoreSize/>
      </div>
      <!-- 球队得分:大/小 -->
      <div v-show="Single =='球队得分:最后一位数'|| isAll">
        <teamLastScore/>
      </div>
      <!-- 总局数:单/双 -->
      <div v-show="Single == '总局数:单/双'|| isAll">
        <BureauOddEven />
        <!-- <teamTotalScoreSize/> -->
      </div>
      <!-- 让盘 -->
      <div v-show=" Single =='让盘'|| isAll">
        <thePlate /> 
        <!-- <teamTotalScoreSize/> -->
      </div>
      <!-- 冠军 -->
      <div v-show=" Single =='冠军'|| isAll">
        <TopGame />
        <!-- <teamTotalScoreSize/> -->
      </div>
      <!-- 总局数:大/小 -->
      <div v-show=" Single =='总局数:大/小'|| isAll  && this.title == '网球'">
        <BureauSizeOfThe />
        <!-- <teamTotalScoreSize/> -->
      </div>
      <!-- 角球 -->
      <div>

      </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 teamLastScore from "@/components/betting/teamLastScore";
// 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: [], //赛事数据源
      previousStorage: "", //前一次data储存数据
      title: "", //
      key: "", //玩法名字
      Single: "", //
      isAll: true, //
      timers:true,
    };
  },
  components: {
    // letBall,
    goalsSize,
    winAlone,
    sumGoal,
    waveBladder,
    goalEntry,
    teamLastScore,
    // corner,
    halfCount,
    concede,
    // goal,
    // goalHalfCourt,
    // letPlate,
    totalScore,
    score,
    scoreSingleDouble,
    teamGoalsSize,
    teamTotalScoreSize,
    theBureau,
    BureauOddEven,
    BureauSizeOfThe,
    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 = ["所有盘口"];

          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(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(arrayData);
        }
      });
    },

    /*---------------------------------------------- */
    //获取头部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", "CO");
      // 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;
  width: .6rem;
  height: .4rem;
  text-align: center;
  line-height: .4rem;
  background: #ededed;
  color: #f4755b;
  border-radius: .05rem;
}
.header-title::after{
  border-width:.08rem;
  border-left-color:  #ededed;
  border-top-color:  #ededed;
  transform: rotate(135deg);
  right: -12%;
  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;
}
/* #NavSlide p a{
      color: #E5E5E5;
      text-decoration: none;
    } */
.active {
  color: #f76649;
  font-weight: 700;
}

</style>