sports_wap/vue_sports/.svn/pristine/9b/9b8e0cb9da34de48363d862dd8403386d4743adf.svn-base

<template>
  <div class="BallDisc column">
    <div class="row allAlignment center box" style="background:#a0a0a0;" @click="jumpBallDisc">
      <span class="row center" style="font-size:.3rem;color:#fff; font-weight: bold;">{{titel}}</span>
      <div>
        <span class="mark row center">{{index}}</span>
        <img src="../assets/st-imges/minRightArrow.png" alt>
      </div>
    </div>
    <div style=" padding: 0  0.3rem;">
      <BasketballBlock :type="st.type1"></BasketballBlock>
      <BasketballBlock :type="st.type2"></BasketballBlock>
      <BasketballBlock :type="st.type3"></BasketballBlock>
      <Tennis></Tennis>
    </div>
    <div v-if="noData">
      <NotOpend :title="this.info"/>
    </div>
    <!-- <Loading/> -->
  </div>
</template>
<script>
import "../css/index.css";
import BasketballBlock from "./StBasketballBlock";
import Loading from "./StLoading";
import Tennis from "./StTennis";
import NotOpend from "@/components/StNotOpend";
export default {
  name: "BallDisc",
  data() {
    return {
      data: "",
      titel: "滚球盘",
      index: 0,
      // 区分接口
      st: {
        type1: 1,
        type2: 2,
        type3: 3
      },
      noData: false,
      info: "暂无相关滚球赛事",
      zqCondition: false,
      bqCondition: false,
      wqCondition: false,
      lqCondition: false
    };
  },
  methods: {
    jumpBallDisc: function() {
      this.$router.push({
        path: "/StRollBallpage",
        query: { number: 0, home: true, hmsts: 1 }
      });
      // this.$route.query.number
    },
    noDataShow() {
      if (
        this.bqCondition == true &&
        this.wqCondition == true &&
        this.zqCondition == true &&
        this.lqCondition == true
      ) {
        this.noData = true;
        
      } else {
        this.noData = false;
    
      }
    }
  },
  components: {
    BasketballBlock,
    Tennis,
    Loading,
    NotOpend
  },
  mounted() {
    //   获取条数。。

    this.$http.get(this.$ports.home.trollingBall).then(res => {
      console.log("zq", res);
      if (
        res.data.status == 200 &&
        res.data.data.length > 0 &&
        res.data.data.matchData.length > 0
      ) {
        this.index += res.data.data.matchData.length;
        this.zqCondition = false;
        if (this.index == NaN) {
          this.index = 0;
        }
      } else {
      
        this.zqCondition = true;
        this.noDataShow();
      }
    });
    this.$http.get(this.$ports.home.rollingBall).then(res => {
      if (
        res.data.status == 1 &&
        res.data.data.length > 0 &&
        res.data.data.matchData.length > 0
      ) {
        this.index += res.data.data.matchData.length;
        this.lqCondition = false;
      } else {
        this.lqCondition = true;
        this.noDataShow();
      
      }
    });
    this.$http.get(this.$ports.home.wqrollingBall).then(res => {
      if (
        res.data.status == 1 &&
        res.data.data.length > 0 &&
        res.data.data.matchData.length > 0
      ) {
        this.index += res.data.data.matchData.length;
        this.wqCondition = false;
        if (this.index == NaN) {
          this.index = 0;
        }
      } else {
        this.wqCondition = true;
        this.noDataShow();
      
      }
    });
    this.$http.get(this.$ports.home.bqrollingBall).then(res => {
      if (
        res.data.status == 1 &&
        res.data.data.length > 0 &&
        res.data.data.matchData.length > 0
      ) {
        this.index += res.data.data.matchData.length;
        this.bqCondition = false;
        if (this.index == NaN) {
          this.index = 0;
        }
      } else {
        this.bqCondition = true;
        this.noDataShow();
     
      }
    });
  }
};
</script>
<style  scoped>
.box {
  width: 100%;
  padding: 0.28rem 0;
  background: #f8f8f8;
  padding: 0 0.3rem;
  height: 0.88rem;
}
.BallDisc {
  font-size: 0.32rem;
  background: #f8f8f8;
  color: #000000;
  margin-bottom: 0.12rem;
}
div /deep/ .tennis .ballBtn {
  border-bottom: none;
}
.mark {
  position: absolute;
  right: 0.8rem;
  width: 0.4rem;
  height: 0.4rem;
  border-radius: 50%;
  background: #f76649;
  color: floralwhite;
  font-size: 0.2rem;
}
</style>