sport_mobile/.svn/pristine/80/809348d8ac04dd02e7dacbcd0eaa96b99b6855ce.svn-base

<template>
  <div>
    <div class="box" v-if="noList">
      <div class="liveTable scroll" v-if="show">
        <div>
          <yd-accordion>
            <yd-accordion-item title="体育分类">
              <div slot="icon">{{time}}</div>
              <div class="title">
                <div
                  v-for="item in titleList"
                  class="row center"
                  :class="ballId == item.id?'titleActive':''"
                  @click.stop="titleActive(item.id)"
                  :key="item.id"
                >{{item.title}}</div>
              </div>
            </yd-accordion-item>
          </yd-accordion>
          <div class="list">
            <div>
              <div v-for="item in data">
                <div v-if="item.doing == 1" class="start row item-center" @click="listClick(item.id)">
                  <div class="row item-center">
                    <img style="margin-right:.15rem;" src="@/assets/st-imges/TV.png">
                    <img
                      style="height:.18rem;width:.18rem;"
                      :src="item.game_type == 'zq'?img.zq:item.game_type == 'lq'?img.lq:item.game_type == 'bq'?img.bq:img.wq"
                    >
                  </div>
                  <div style="padding-left:.1rem;" class="row item-center"><p style="width:.8rem;text-align: center;margin-right:.1rem;">{{item.start_time}}</p> <p style="width:2rem;"> {{item.host_team}} vs {{item.guest_team}}</p></div>
                </div>
              </div>
              <div v-for="item in data" >
                <div class="noStart row item-center" v-if="item.doing == 0" >
                  <div class="row item-center">
                    <p style="font-size:.12rem;margin-right:.1rem;width:.8rem;text-align: center;">{{item.start_time}}</p>
                    <img
                      style="height:.18rem;width:.18rem;"
                      :src="item.game_type == 'zq'?img.zqa:item.game_type == 'lq'?img.lqa:item.game_type == 'bq'?img.bqa:img.wqa"
                    >
                  </div>
                  <div style="padding-left:.1rem;">{{item.host_team}} vs {{item.guest_team}}</div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div v-if="!show" class="btn row center" @click="btnClick">返回列表</div>
      <div v-if="!show">
        <video
          loop
          :paused="playVideo"
          autoplay
          muted
          class="mainright-video"
          src="@/assets/st-imges/radio.mp4"
        ></video>
        <div
          style="width:100%;height:100%;  position: absolute;left: 0;top: 0;"
          class="row center play-hover"
        >
          <div class="playAndPause-box pointer row center">
            <div class="playAndPause row center" @click="videoClick()">
              <img style="width:.4rem;height:.4rem;" src="@/assets/st-imges/play.png">
            </div>
          </div>
        </div>
        <!-- 直播组件底部按钮 -->
        <!-- <div>
          <ul class="elvesfigureBox row allAlignment item-center">
            <li class="elvesfigure" style="background-position:-.1rem -.05rem"></li>
            <li class="elvesfigure" style="background-position:-.7rem -.05rem"></li>
            <li class="elvesfigure" style="background-position:-1.35rem -.05rem"></li>
            <li class="elvesfigure" style="background-position:-2rem -.05rem"></li>
            <li class="elvesfigure" style="background-position:-2.7rem -.05rem"></li>
            <li class="elvesfigure" style="background-position:-3.4rem -.05rem"></li>
          </ul>
        </div>-->
      </div>
    </div>
    <div class="nolist row center" v-if="!noList">当前球类没有正在直播的赛事</div>
  </div>
</template>

<script>
export default {
  name: "liveTable",
  data() {
    return {
      img: {
        zq: require("@/assets/st-imges/tvzq.png"),
        zqa: require("@/assets/st-imges/tvzqa.png"),
        lq: require("@/assets/st-imges/tvlq.png"),
        lqa: require("@/assets/st-imges/tvlqa.png"),
        bq: require("@/assets/st-imges/tvbq.png"),
        bqa: require("@/assets/st-imges/tvbqa.png"),
        wq: require("@/assets/st-imges/tvwq.png"),
        wqa: require("@/assets/st-imges/tvwqa.png")
      },
      data: "", //列表数据
      titleList: [
        { title: "所有体育", id: "all" },
        { title: "篮球", id: "lq" },
        { title: "足球", id: "zq" },
        { title: "网球", id: "wq" },
        { title: "棒球", id: "bq" }
      ], //球类区分
      ballId: "all", //激活的球类代码
      show: true, //组件开关
      activeEvent: "", //被选中的赛事
      playVideo: true, //视频播放器开关
      timers: true, //轮询条件
      noList: true, //有无列表数据
      time:'',
    };
  },
  methods: {
    // 获取列表数据
    getAjax() {
      this.$http
        .get(this.$ports.tvlive.tvlist, {
          game_code: this.ballId
        })
        .then(res => {
          if (res.data.data.length > 0) {
            this.data = res.data.data;
            // console.log(this.data,'我的数据')
          } else {
            this.noList = false;
          }
          // console.log(res, "我的");
        });
    },
    // 球类标题
    titleActive(id) {
      this.ballId = id;
      this.getAjax();
    },
    //选择赛事调用
    listClick(str) {
      this.activeEvent = str;
      this.show = false;
    },
    //视频播放器开关
    videoClick() {
      this.playVideo = !this.playVideo;
      //console.log( this.playVideo)
    },
    // 返回列表开关被点击
    btnClick() {
      this.show = true;
      this.getAjax();
    },
    // 获取今日日期
    getDate(){
      let newdate = new Date();
      let year = newdate.getFullYear();
      let month = newdate.getMonth() + 1;
      let date = newdate.getDate();
      this.time = `${year} - ${month} - ${date}`;

    },
  },
  // 加载组件时
  created(){
    // 初始化时间
    this.getDate()
  },
  // 组件渲染时
  mounted() {
    // 获取直播赛事列表数据
    this.getAjax();
    let _this = this;
    this.$public.ajaxTimerFun(timing => {
      if (_this.timers) {
        _this.getAjax();
      } else {
        clearInterval(timing);
      }
    },1000*180);
  },
  //组件卸载时 
  beforeDestroy() {
    // 关闭轮询
    this.timers = false;
  }
};
</script>

<style scoped>
.liveTable {
  width: 100%;
  height: 3rem;
  position: relative;
  overflow-x: hidden;
  overflow-y: auto;
}
img {
  width: 0.22rem;
  height: 0.18rem;
}
div /deep/ .yd-accordion-head {
  height: 0.4rem;
  background: #888;
}
div /deep/ .yd-accordion-head::after {
  display: none;
}
div /deep/ .yd-accordion-title {
  font-size: 0.12rem;
  color: #fff;
}
div /deep/ .yd-accordion-head-content {
  display: flex;
  justify-content: space-between;
  color: #fff;
  font-size: 0.14rem;
}
div /deep/ .yd-accordion-head-arrow::after {
  display: inline-block;
  border: none;
  width: 0.4rem;
  height: 0.3rem;
  background: url("../assets/st-imges/xiangxia.png") no-repeat;
  background-size: 100% 100%;
}
div /deep/ .yd-accordion-content {
  width: 1rem;
  height: 1.5rem;
  position: absolute;
  right: 0;
}
.title {
  width: 1rem;
  font-size: 0.14rem;
  color: #ddd;
  background: #666;
  border-left: 0.01rem solid #707070;
  border-right: 0.01rem solid #707070;
  border-bottom: 0.01rem solid #707070;
  position: absolute;
  right: 0;
  top: 0;
  z-index: 8;
}
.titleActive {
  background: #555;
}
.title div {
  height: 0.3rem;
  border-top: 0.01rem solid #707070;
}
.list {
  min-height: 3rem;
  background: #777;
  /* position: relative;
  top: 0;
  left: 0; */
  width: 100%;
  padding: 0.15rem 0.2rem;
}
.start {
  min-height: 0.3rem;
  color: #fff;
  font-size: 0.12rem;
  margin: .1rem 0;
}
.noStart {
  min-height: 0.3rem;
  font-size: 0.12rem;
  color: #ccc;
  margin-top: 0.1rem;
}
.scroll::-webkit-scrollbar {
  width: 0;
}
.mainright-video {
  width: 100%;
  height: 100%;
}
.play-hover:hover {
  background: rgba(106, 107, 107, 0.425);
}
.play-hover:hover .playAndPause-box {
  display: block;
}
.playAndPause-box {
  width: 0.78rem;
  height: 0.78rem;
  animation: playAndPause 1s infinite;
  border-radius: 50%;
  display: none;
}
.playAndPause {
  background: #fff;
  width: 0.64rem;
  height: 0.64rem;
  border-radius: 50%;
  margin: 0.07rem auto;
}

@keyframes playAndPause {
  25% {
    background: rgba(255, 255, 255, 0.2);
  }
  35% {
    background: rgba(255, 255, 255, 0.25);
  }
  50% {
    background: rgba(255, 255, 255, 0.3);
  }
  65% {
    background: rgba(255, 255, 255, 0.35);
  }
  75% {
    background: rgba(255, 255, 255, 0.4);
  }
  85% {
    background: rgba(255, 255, 255, 0.35);
  }
  100% {
    background: rgba(255, 255, 255, 0.3);
  }
}
/* .elvesfigureBox {
  width: 100%;
  height: 0.4rem;
  background-color: #2d2d2d;
  padding: 0 0.17rem;
} */
/* .elvesfigureBox li {
  width: 0.3rem;
  height: 0.3rem;
  cursor: pointer;
} */
/* .elvesfigure {
  background: url("../assets/st-imges/elvesfigure.png") no-repeat;
  background-size: 3.9rem 0.4rem;
} */
.box {
  position: relative;
}
.btn {
  position: absolute;
  right: 5%;
  top: 2%;
  width: 0.7rem;
  border-radius: 0.05rem;
  height: 0.3rem;
  background: rgba(233, 233, 233, 0.3);
  z-index: 8;
  cursor: pointer;
  font-size: 0.12rem;
  color: #ddd;
}
.btn:hover {
  background: #898989;
  color: #fff;
}
.nolist {
  height: 2.6rem;
  background: #666;
  color: #fff;
  font-size: 0.16rem;
}
</style>