sports_wap/vue_sports/.svn/pristine/d9/d952938c7c4fa057c5ad467ab4a28640b863c8a9.svn-base

<template>
  <div>
    <div class="lod">
      <Loading></Loading>
    </div>
    <div>
      <SportsHead></SportsHead>
          <div class="Serch">

      <div class="Soccer-game row center">
        <div class="Soccer-game-title row center" @click="isreturn()">
          <img class="returnimg" :src="searchreturn">
        
          {{name}}
        </div>
        </div>
      </div>
      <div class="gambling">
        <div class="leagueMatch">
          <yd-button size="large" @click.native="show = true"></yd-button>
          <div class="leagueName">
            <span>{{list.leagueName}}</span>
          </div>
          <div class="teamName">
            <span>{{list.home_team}}</span>
            <div class="vs">vs</div>
            <span>{{list.guest_team}}</span>
          </div>
          <div class="time">
            <span>{{list.match_ptime? list.match_ptime :list.match_time }}</span>
          </div>
          <div v-if="satatus" class="icon" :class="status == true ? 'rotate':'backRotate'">
            <i></i>
          </div>
        </div>
        <div class="box">
          <div id="NavSlide">
            <nav>
              <p v-for="(item,$index) in key" @click="toggleNav($index)" :key="$index">
                <span :class="{active:$index==active}">{{item}}</span>
              </p>
            </nav>
          </div>
        </div>
        <!-- 模态框 -->
        <yd-popup v-if="satatus" v-model="show" position="center" width="90%">
          <div class="modality">
            <div
              class="list"
              v-for="(item,index) in list.league"
              :key="index"
              @click="check(index,item.match_id)"
            >
              <span :class="list.match_id == item.match_id?'col':''">{{item.home_team}}</span>
              <span :class="list.match_id == item.match_id?'col':''">v</span>
              <span :class="list.match_id == item.match_id?'col':''">{{item.guest_team}}</span>
            </div>
          </div>
        </yd-popup>
      </div>
      <div v-show="isShow">
        <!--让球大小-->
        <div v-show="Single =='让球大小' || isAll  ">
          <goal></goal>
        </div>
        <!--独赢-->
        <div v-show="Single =='独赢'|| isAll  ">
          <OnlyWin></OnlyWin>
        </div>
        <!--最先/最后进球-->
        <div v-show="Single =='最先/最后进球' || isAll  ">
          <StartEnd></StartEnd>
        </div>
        <!-- 总进球数 -->
        <div v-show="Single =='总进球数' || isAll  ">
          <GoalSize></GoalSize>
        </div>
        <!-- 波胆 -->
        <div v-show="Single =='波胆' || isAll  ">
          <WaveBladder></WaveBladder>
        </div>
        <!--入球数单双-->
        <div v-show="Single =='进球数单双' || isAll  ">
          <GoalSingleAndDouble></GoalSingleAndDouble>
        </div>
        <!--半场/全场-->
        <div v-show="Single =='半场/全场'|| isAll  ">
          <FullHalf></FullHalf>
        </div>
        <!-- 角球 -->
        <div v-show="Single =='角球' || isAll ">
          <Corner></Corner>
        </div>
        <!-- 球队进球大小 -->
        <div v-show="Single =='球队进球大小' || isAll ">
          <TeamGoalSize></TeamGoalSize>
        </div>
      </div>
      <div v-if="!isShow">
        <NotOpend :title="tipsTitle"></NotOpend>
      </div>
      <StLinkFooter></StLinkFooter>
      <BettingWindow v-if="isWindow"/>
    </div>
  </div>
</template>

<script>
import Goal from "@/components/StGoal";
import NotOpend from "@/components/StNotOpend";
import Loading from "@/components/StLoading";
import WaveBladder from "@/components/StWaveBladder";
import StLinkFooter from "@/components/StLinkFooter";
import SportsHead from "@/components/StSportsHead";
import OnlyWin from "@/components/dedicated/StOnlyWin";
import GoalSize from "@/components/dedicated/StGoalSize";
import StartEnd from "@/components/dedicated/StStartEnd";
import FullHalf from "@/components/dedicated/StFullHalf";
import TeamGoalSize from "@/components/dedicated/StTeamGoalSize";
import GoalSingleAndDouble from "@/components/dedicated/StGoalSingleAndDouble";
import Corner from "@/components/dedicated/StCorner";
import BettingWindow from "@/components/StBettingWindow";
export default {
  data() {
    return {
      name:this.$route.query.name, // 球名
      searchreturn: require("@/assets/st-imges/returnbox.png"),
      gameCode: this.$route.query.gameCode, //别名
      match_id: "",
      list: [], //数据
      key: [], //存储key值进行判定
      isShow: "", //更具数据是否显示
      status: false,
      tipsTitle: "暂无相关数据信息",
      active: 0,
      // 投注页是否打开
      isWindow: false,
      // isIphone: false,//是否ios
      // isAndroid: false,//是否Android
      show: false, //是否显示模态框
      satatus: true,
      isAll: true,
      Single: "",
      timers : true
    };
  },
  methods: {
    getAjax: function(gameCode, match_id) {
      this.$store.dispatch("GETSHOW", true);
      this.$http
        .get(this.$ports.gambling.matchOdds, {
          game_code: gameCode,
          matchID: match_id
        })
        .then(res => {
          if (res.data.status == 1) {
            this.key = [];
            if (
              res.data.data.oddsData == [] ||
              res.data.data.oddsData.length == 0 ||
              res.data.data.oddsData == null
            ) {
              this.$store.dispatch("GETSHOW", false);
              this.isShow = false;
              return false;
            }
            this.list = res.data.data;
            let arrayData = [];
            let key = Object.keys(res.data.data.p_code_array);
            let values = Object.values(res.data.data.p_code_array);
            this.isShow = true;
            this.key = ["所有盘口"];
            key.forEach((e, index) => {
              this.key.push(values[index]);
              let stripData = [];
              res.data.data.oddsData.forEach(data => {
                if (data.p_code == e) {
                  stripData.push(data);
                }
                arrayData[index] = stripData;
              });
            });
            this.list.oddsData = arrayData;
            this.$store.dispatch("GETGAMERATIO", this.list);
            console.log("数据源", arrayData);
          }
          this.$store.dispatch("GETSHOW", false);
        });
    },
    /**
     * 切换赛事
     */
    check(index, match_id) {
      this.show = false;
      if (this.list.match_id == match_id) return false;
      this.$store.dispatch("MACTH_ID", match_id);
      this.getAjax(this.gameCode, match_id);
    },
    /**
     * 切换玩法类型
     */
    toggleNav: function(index) {
      this.active = index;
      if (this.key[index] == "所有盘口") {
        this.isAll = true;
      } else {
        this.isAll = false;
        this.Single = this.key[index];
      }
    }

    /**
    // 如果需要区分，则放里面；
    clickApp() {
      let ua = navigator.userAgent.toLowerCase();
      //Android终端
      let isAndroid = ua.indexOf("Android") > -1 || ua.indexOf("Adr") > -1; //Ios终端
      let isiOS = !!ua.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/);
      if (isWeixinBrowser()) {
        this.$router.push({
          path: "/product"
        });
      } else {
        if (/(iPhone|iPad|iPod|iOS)/i.test(navigator.userAgent)) {
          //Ios
          console.log("iphone");
          this.iphone = true;
        } else if (/(Android)/i.test(navigator.userAgent)) {
          //Android终端
          console.log("");
        }
      }

      function isWeixinBrowser() {
        return /micromessenger/.test(ua) ? true : false;
      }
    }
     */
  },
  /**
   * 计算属性
   */
  computed: {
    IsWindow() {
      return this.$store.getters.getIsBetting;
    }
  },
  /**
   * 监听器
   */
  watch: {
    // 监听投注框开关
    IsWindow(val) {
      this.isWindow = val;
    }
  },

  mounted() {
    let _this = this;
    this.$public.ajaxTimerFun(function(timing) {
      _this.getAjax(_this.gameCode, _this.match_id);
      if (!_this.timers) {
        clearInterval(timing);
      }
    });
    this.match_id = this.$store.getters.getMatchId;
    this.getAjax(this.gameCode, this.match_id);
    if (this.$store.getters.getIsBetting) {
      this.isWindow = true;
    }
  },
  beforeDestroy() {
    this.timers = false;
  },
  components: {
    Corner,
    Goal,
    WaveBladder,
    StLinkFooter,
    SportsHead,
    OnlyWin,
    StartEnd,
    GoalSize,
    FullHalf,
    GoalSingleAndDouble,
    TeamGoalSize,
    Loading,
    NotOpend,
    BettingWindow
  }
};
</script>

<style scoped>
/* 头部 */
.Serch {
  height: 0.88rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: linear-gradient(to bottom, #6a6a6a, #565656);
  color: #f76649;
  font-family: "PingFang-SC-Regular";
  padding: 0 0.33rem;
}
.returnimg {
  width: 0.37rem;
  height: 0.3rem;
  margin-right: 0.1rem;
}
.Soccer-game-title {
  height: 0.88rem;
  font-size: 0.3rem;
}
.Soccer-game-box {
  height: 0.88rem;
  /* padding: 0 0.32rem; */
  background-color: #626262;
}
.gambling {
  background: #f8f8f8;
}
.leagueMatch {
  position: relative;
  padding: 0.3rem 0.32rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: nowrap;
  border-bottom: 1px solid #e4e4e4;
  background: linear-gradient(to top, #ffe9c9, #fff3e2);
}
.leagueMatch div {
  font-size: 0.28rem;
  text-align: left;
  color: #333333;
}
.leagueName {
  width: 2.26rem;
}
.leagueMatch .teamName {
  text-align: center;
}
.teamName .vs {
  text-align: center;
  font-size: 0.24rem;
  color: #fd8f26;
}
.leagueMatch .time {
  width: 1.3rem;
  color: #333333;
  font-size: 0.24rem;
}
.leagueMatch .icon i {
  display: inline-block;
  width: 0.4rem;
  height: 0.4rem;
  background: url("../../../assets/st-imges/xiangxia.png") no-repeat;
  background-size: 100% 100%;
  transform: rotate(180deg);
}
.leagueMatch .rotate {
  transform: rotate(180deg);
  transition: 0.2s;
}
.leagueMatch .backRotate {
  transform: rotate(0deg);
  transition: 0.2s;
}

.box {
  padding: 0 0.32rem;
  background: #f8f8f8;
}
#NavSlide {
  width: 100%;
  overflow: hidden;
}
#NavSlide nav {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: middle;
  -ms-flex-align: middle;
  align-items: middle;
  overflow: auto;
}
#NavSlide p {
  text-align: center;
  font-size: 0.28rem;
  -ms-flex-negative: 0;
  flex-shrink: 0;
  padding: 0 0.2rem 0 0;
  margin: 0 0.1rem 0 0;
  color: #b8b8b8;
  height: 0.88rem;
  line-height: 0.88rem;
}
/* #NavSlide p a{
	color: #E5E5E5;
	text-decoration: none;
} */
#NavSlide p span.active {
  color: #363636;
}
#NavSlide .fixadd {
  position: absolute;
  right: -4px;
  background-color: #31c17b;
}
button.yd-btn-block {
  background: #f8f8f8;
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  /* z-index: -1; */
  margin: 0;
  opacity: 0;
}
.modality {
  text-align: center;
  background: #fbfbfb;
  padding: 0.2rem 0;
  height: 5rem;
  /* overflow: hidden; */
}
.modality span {
  color: #000000;
  font-size: 0.28rem;
}
.modality div {
  /* margin: 0.06rem 0; */
  padding: 0.2rem 0;
  background: #fbfbfb;
  border-bottom: 1px solid #e4e4e4;
}
.modality div .col {
  color: #fd8f26;
}
</style>