sport_mobile/.svn/pristine/61/613d4d9999228137b4c48b1eebda32b74fcab2b5.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="match">
        <div class="live">
          <!-- <div class="tit">{{data.leagueName}}</div> -->
          <div class="info">

            <div class="infoBody flex">
              <div class="matchTime" style="width:20%;">
                <span class="scene">第{{headInfo.schedule == 1 ? '一': 
                  headInfo.schedule == 2 ? '二': headInfo.schedule == 3 ? '三': 
                  headInfo.schedule == 4 ? '四':'加时赛' }}节</span>
                <span class="time">{{headInfo.r_time}}</span>
              </div>
              <div class="flex" style="width:80%;">
                <div class="right_info_row_qt">第一节</div>
                <div class="right_info_row_qt">第二节</div>
                <div class="right_info_row_qt">第三节</div>
                <div class="right_info_row_qt">第四节</div>
                <div class="right_info_row_qt">加时赛</div>
                <div class="right_info_row_qt scence">上半场</div>
                <div class="right_info_row_qt scence">下半场</div>
                <div class="right_info_row_qt scence">总计</div>
              </div>
            </div>

            <div class="infoRow">
              <div class="infoItem flex">
                <div style="width:20%;">
                  <span class="team">{{data.home_team}}</span>
                </div>
                <div class="infoBox" style="width:80%">
                  <div :class="{ col:headInfo.schedule == 1 }" class="infoNum">{{headInfo.sc_1th_H}}</div>
                  <div :class="{ col:headInfo.schedule == 2 }" class="infoNum">{{headInfo.sc_2th_H}}</div>
                  <div :class="{ col:headInfo.schedule == 3 }" class="infoNum">{{headInfo.sc_3th_H}}</div>
                  <div :class="{ col:headInfo.schedule == 4 }" class="infoNum">{{headInfo.sc_4th_H}}</div>
                  <div class="infoNum">{{headInfo.overtime_H}}</div>
                  <div class="infoNum scenceNum">{{headInfo.half_H}}</div>
                  <div class="infoNum scenceNum">{{headInfo.full_H}}</div>
                  <div class="infoNum scenceNum">{{headInfo.whole_H}}</div>
                </div>
              </div>

              <div class="infoItem flex">
                <div style="width:20%;">
                  <span class="team">{{data.guest_team}}</span>
                </div>
                <div class="infoBox" style="width:80%">
                  <div :class="{ col:headInfo.schedule == 1 }" class="infoNum">{{headInfo.sc_1th_C}}</div>
                  <div :class="{ col:headInfo.schedule == 2 }" class="infoNum">{{headInfo.sc_2th_C}}</div>
                  <div :class="{ col:headInfo.schedule == 3 }" class="infoNum">{{headInfo.sc_3th_C}}</div>
                  <div :class="{ col:headInfo.schedule == 4 }" class="infoNum ">{{headInfo.sc_4th_C}}</div>
                  <div class="infoNum">{{headInfo.overtime_C}}</div>
                  <div class="infoNum scenceNum">{{headInfo.half_C}}</div>
                  <div class="infoNum scenceNum">{{headInfo.full_C}}</div>
                  <div class="infoNum scenceNum">{{headInfo.whole_C}}</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 class="letball"> -->
      <!-- 让球 -->
      <div v-show=" Single =='让球'|| Single =='让分'|| isAll">
        <concede/>
      </div>
      <!-- 进球:大/小 -->
      <div v-show=" Single =='进球:大/小'|| isAll">
        <goalsSize/>
      </div>
      <!-- 总分:大/小 -->
      <div v-show=" Single =='总分:大/小'|| isAll">
        <totalScore/>
      </div>
      <!-- <letBall/> -->
      <!-- 独赢 -->
      <div v-show=" Single =='独赢盘'|| isAll">
        <winAlone/>
      </div>
      <!-- 波胆 -->
      <div v-show=" Single =='波胆'|| isAll">
        <waveBladder/>
      </div>
      <!-- 总进球 -->
      <div v-show=" Single =='总进球数'|| isAll">
        <sumGoal/>
      </div>
      <!-- 首粒入球-- -->
      <div v-show=" Single =='球队得分:最后一位数'|| isAll">
        <teamLastScore/>
      </div>
      <!-- 半场/全场 -->
      <div v-show=" Single =='半场/全场'|| isAll">
        <halfCount/>
      </div>
      <!-- 总分:单双 -->
      <div v-show="( 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 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";
export default {
  data() {
    return {
      activity: "", //活动代码
      active: 0, // 投注页是否打开
      ballCode: "", //球类代码
      matchId: "", //赛事idd
      data: [], //赛事数据源
      previousStorage: "", //前一次data储存数据
      title: "", //
      key: "", //玩法名字
      Single: "", //
      isAll: true, //
      timers: true,
      headInfo:'',//滚球头部数据
    };
  },
  components: {
    // letBall,
    goalsSize,
    winAlone,
    sumGoal,
    waveBladder,
    teamLastScore,
    // 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;
          this.headInfo = JSON.parse(this.data.result_mark);
          this.headInfo.schedule = this.headInfo.schedule.replace(/[^0-9]/ig,"");
          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", "10001");
      // 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.1rem;
  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: -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;
}
.scroll::-webkit-scrollbar {
  width: 0;
  height: 0;
}

/* 棒球头部 */
.bqHead {
  background: url("../assets/st-imges/baseball.png") no-repeat;
  background-size: 100% 100%;
  font-size: 0.18rem;
}
.zqHead {
  color: #fff;
  background: url("../assets/st-imges/football.png") no-repeat;
  background-size: 100% 100%;
  font-size: 0.18rem;
}
.bqHead .pd-10 {
  padding: 0.1rem;
}
.bqHead .tit {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.match .info {
  background: rgba(0, 0, 0, 0.5);
  height: 0.52rem;
  line-height: 0.52rem;
  font-size: 15px;
  text-align: center;
  font-size: 0.18rem;
}
.match .info .pk,
.match .tit .scene {
  font-weight: bold;
  color: rgb(254, 146, 0);
}
.tit .time {
  color: #bd4700;
}
.welcome {
  height: 0.36rem;
  line-height: 0.36rem;
  font-size: 0.16rem;
  padding: 0 0.1rem;
  background: #4e4e4e;
  color: black;
}




.flex{
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.header{
    background: #4b4b4b;
}
.header .title{
    font-size: 0.18rem;
    color: #fe9200;
    padding: 0 0.2rem;
    font-weight: 700;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.title .backSingPage{
    display:inline-block;
    background: url("../assets/st-imges/arrow_left.png") no-repeat;
    background-size: 100% 100%;
    height: 0.21rem;
    width: 0.2rem;
    vertical-align: middle;
    margin-right: 0.16rem;
    cursor: pointer;
}
.title .backSingPage:hover,.refresh:hover{
    filter: brightness(100);
}
.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;
}
/* 篮球头部 */
.header .match{
    background: #c28d47;
    background-image: url("./../assets/st-imges/basketball.png") no-repeat;
    background-size: 100% 100%;
    color: #fff;
}
.header .match .live{
    padding: 0.06rem;
}
/* .live .tit{
    height: 30px;
    line-height: 30px;
    font-size: 0.14rem;
} */
.match .info{
    margin-top: 0.1rem;
    position: relative;
    height: auto;
    background: rgba(0,0,0,.5);
    line-height: 52px;
    font-size: 15px;
    text-align: center;
}
.infoBody{
    background: #000;
    opacity: .85;
    height: 0.52rem;
    padding-left: 0.1rem;
    font-size: 0.14rem;
}
.matchTime span{
    display: inline-block;
}
.matchTime .scene{
    color: #ff9200;
    margin-right: 0.06rem;
}
.matchTime .time{
    color: #b4b4b4;

}
.right_info_row_qt{
    width: 0.75rem;
    font-size: 0.12rem;
    text-align: center;
    padding: 0.04rem;
    color: #787878;
    box-sizing: border-box;
    font-weight: 700;
    font-family: serif;
}
.infoRow{
    padding-left: 0.1rem;
}
.scence{
    width: 0.75rem;
    padding: 0;
    /* padding-top: 0.19rem; */
}
.infoItem{
    height: 0.5rem;
    line-height: 0.24rem;
    width: auto
}
.infoBox{
    width: 2.73rem;
    height:0.5rem;
        display: flex;
    align-items: center;
    justify-content: space-between;
    /* right: 0; */
    /* position: absolute; */
}
.infoBox > div{
    width: .75rem;
}
.infoNum{
    width: 0.25rem;
    font-size: 0.13rem;
    line-height: 0.28rem;
    padding: 0;
    height: 100%;
    line-height: 0.5rem;
    color: #fff;
    font-weight: 400;
    text-align: center;
    font-family: sans-serif;

}
.scenceNum{
    background: hsla(0,0%,100%,.16);
    width: 0.52rem;
    margin-left: 1px;
}
.infoItem .team{
    font-size: 0.16rem;
}
.col{
    color: #ff9200;
}
.ycol{
    color:#dcbc4c;
}
</style>