sports_wap/vue_sports/.svn/pristine/48/484c2ab90fbf1c7d16cf9ee967e8967ce40d252e.svn-base

<template>
  <div>
    <div class="Serch">
      <div class="Soccer-game row center">
        <div class="Soccer-game-title row center">
          <img class="returnimg" :src="img.searchreturn" @click="isreturn()">
          {{Regulations.title}}
        </div>
        <div
          class="row center"
          style="height:0.88rem;margin-left:0.1rem;padding:0 0.1rem;"
          @click="IsSoccerGameClick(isSoccerGameClick)"
        >
          <img
            :class="isSoccerGameClick==true?'Soccer-game-src act':'Soccer-game-src return'"
            :src="img.Soccerimg1"
          >
        </div>
      </div>
      <div class="Serch-box">
        <div class="Serch-box-home">
          <img class="Serch-box-img" :src="img.Serchimg">
          <input
            v-model="SerchValue"
            @input="serchchange(SerchValue)"
            class="Serch-box-input"
            type="text"
            placeholder="请输入联赛名称"
          >
          <img
            class="Serch-box-del"
            @click="delinputvalue()"
            v-if="Serchchange==true"
            :src="img.Serchdel"
          >
        </div>
      </div>
    </div>
    <div class="Soccer-game-box row" v-if="isSoccerGameClick==true">
      <p
        @click="listActive(i.id)"
        v-for="(i,index) in Regulations.list"
        :key="index"
        :class="listnum==i.id?'active':''"
      >{{i.name}}</p>
    </div>
    <div v-if="this.$route.query.id =='zq'&&  this.isTrue == true " class="box">
      <div id="NavSlide">
        <nav>
          <p v-for="(item,$index) in arr" @click="toggle($index,item.id)" :key="$index">
            <span :class="{active:$index==active}">{{item.title}}</span>
          </p>
        </nav>
      </div>
    </div>
    <div class="match" v-if="entryShow">
      <yd-accordion accordion>
        <div class="matchBox" v-for="items in data" :key="items.id">
          <yd-accordion-item :title="items.region" open>
            <div class="list">
              <div
                v-for="item in items.league_count"
                :key="item.lg_id"
                @click="goMatchInfo(item.lg_id )"
              >
                <span>{{item.league}}</span>
                <span class="num">{{item.count}}</span>
              </div>
            </div>
          </yd-accordion-item>
        </div>
      </yd-accordion>
    </div>
    <div v-if="noData">
      <NotOpend :title="this.info"/>
    </div>
    <!-- 参赛表 -->
    <div v-if="!entryShow" class="entry">
      <div
        class="list"
        v-for="item in entryList.info"
        :key="item.id"
        @click="goMatchInfo(item.lg_id,item.code )"
      >
        <span>{{item.name}}</span>
        <span class="num">{{item.count}}</span>
      </div>
    </div>
  </div>
</template>

<script>
import NotOpend from "@/components/StNotOpend";
import "../css/index.css";
export default {
  data() {
    return {
      SerchValue: "",
      data: "", //联赛列表
      ballId: "", //球类别名
      noData: false, //没有数据为true
      datetimeNum: "", //赛事时间
      active: 0,
      listnum: 2, //赛事类型
      isTrue: true, //显示日期
      Serchchange: false,
      info: "没有相关联赛信息",
      isSoccerGameClick: true,
      entryShow: false, //显示参赛表
      entryList: "", // 参赛表数据
      img: {
        Soccerimg1: require("../assets/st-imges/soccer1.png"),
        Soccerimg2: require("../assets/st-imges/soccer1.png"),
        Serchimg: require("../assets/st-imges/sousuo.png"),
        Serchdel: require("../assets/st-imges/del.png"),
        searchreturn: require("../assets/st-imges/returnbox.png")
      },
      Regulations: {
        title: " ",
        list: [
          { id: 1, name: "参赛表" },
          { id: 2, name: "赛事" },
          { id: 3, name: "冠军盘口" }
        ]
      },
      active: 0,
      arr: [{ id: "", title: "所有赛事" }, { id: "today", title: "今日赛事" }],
      timers: true
    };
  },
  components: {
    NotOpend
  },
  created() {
    this.fun_date();
  },
  methods: {
    //设置一周赛事
    fun_date: function() {
      let date = new Date();
      let date2 = new Date(date);
      for (let i = 1; i < 7; i++) {
        date2.setDate(date.getDate() + i);
        let years = date2.getFullYear();
        let month =
          date2.getMonth() + 1 < 10
            ? "0" + (date2.getMonth() + 1)
            : date2.getMonth() + 1;
        let day =
          date2.getDate() < 10 ? "0" + date2.getDate() : date2.getDate();
        let time2 = {};
        time2.id = years + "-" + month + "-" + day;
        time2.title = years + "-" + month + "-" + day;
        this.arr.push(time2);
        if (i == 6) {
          this.arr.push({ id: "morning", title: "早盘" });
        }
      }
    },
    //获取数据信息
    //game_code=球类型、search=联赛搜索关键字、datetime=日期搜索、event_type=赛事类型

    getAjaxInfo: function(url,typeGame,gameType,game_code,search,datetime,event_type
    ) {
      this.$http
        .get(url, { typeGame, gameType, search, datetime, event_type })
        .then(res => {
          console.log(res,'你好')
          this.$store.dispatch("GETSHOW", false);
          if (
            res.status == 200 &&
            res.data.data != [] &&
            res.data.data != null
          ) {
            console.log("数据", res.data);
            if (this.listnum == 1) {
              this.entryList = res.data.data;
              console.log("entry", this.entryList);
            }
            this.Regulations.title = res.data.data.type;
            if (res.data.data.info.length > 0) {
              this.data = res.data.data.info;
            } else {
              this.data = "";
              this.noData = true;
            }
            // this.$store.dispatch('GET_BALL_DATA',res.data);//将活动类别存入vuex里面
          }
        });
    },
    //获取冠军盘口数据
    getChampion: function(game_code, type_code, search) {
      this.$store.dispatch("GETSHOW", true);
      this.$http
        .get(this.$ports.match.matchState, {
          type_code: "StChampion",
          game_code,
          search
        })
        .then(res => {
          console.log("res", res);
          if (
            res.data.status == 1 &&
            res.data.data.length > 0 &&
            res.data.data != null
          ) {
            this.data = res.data.data;
            console.log("res", res);
            this.$store.dispatch("GETSHOW", false);
          } else {
          }
        });
    },
    //显示隐藏赛事类型
    IsSoccerGameClick(isclick) {
      this.isSoccerGameClick = !isclick;
    },
    //获取input输入的值查询数据
    serchchange(val) {
      if (val.length >= 1) {
        this.Serchchange = true;
      } else {
        this.Serchchange = false;
      }
      if (this.listnum == 2) {
        this.getAjaxInfo(
          this.$ports.match.matchData,
          "",
          this.$route.query.id,
          this.$route.query.id,
          val,
          this.datetimeNum,
          this.listnum
        );
      } else if (this.listnum == 3) {
        this.getChampion(this.$route.query.id, val);
      }
    },
    //删除搜索框数据
    delinputvalue() {
      this.SerchValue = "";
      this.Serchchange = false;
      if (this.listnum == 2) {
        this.getAjaxInfo(
          this.$ports.match.matchData,
          "",
          this.$route.query.id,
          this.$route.query.id,
          "",
          this.datetimeNum,
          this.listnum
        );
      } else if (this.listnum == 3) {
        this.getChampion(this.$route.query.id);
      }
    },
    //切换赛事类型
    listActive(id) {
      if (this.listnum == id) return false;
      this.SerchValue = "";
      this.listnum = id;
			
      if (id == 2) {
        this.isTrue = true;
        this.entryShow = true;
        this.getAjaxInfo(
          this.$ports.match.matchData,
          "",
          this.$route.query.id,
          this.$route.query.id,
          "",
          this.datetimeNum,
          id
        );
      } else {
        this.isTrue = false;
        if (id == 3) {
          this.entryShow = true;
          this.getChampion(this.$route.query.id);
        } else if (id == 1) {
          this.entryShow = false;
          this.getAjaxInfo(this.$ports.match.participate, this.$route.query.id);
        }
      }
    },
    //切换日期时间
    toggle: function(index, id) {
      this.active = index;
      this.datetimeNum = id;
      console.log("id", this.datetimeNum);
      this.SerchValue = "";
      this.getAjaxInfo(
        this.$ports.match.matchData,
        "",
        this.$route.query.id,
        this.$route.query.id,
        "",
        id,
        this.listnum
      );
    },
    //打开联赛投注页面
    goMatchInfo: function(sessionId, code) {
      console.log("code", code);
      if (this.listnum == 3) {
        this.$router.push({
          path: "StLeagueList",
          query: {
            game_code: this.ballId,
            leagueID: sessionId,
            name: this.Regulations.title,
            matchDate: this.datetimeNum,
            code: code,
            champion: 3
          }
        });
      } else if (this.listnum == 2) {
        this.$router.push({
          path: "StLeagueList",
          query: {
            game_code: this.ballId,
            leagueID: sessionId,
            name: this.Regulations.title,
            matchDate: this.datetimeNum,
            code: code,
            matchDtl: 2
          }
        });
      } else {
        this.$router.push({
          path: "StLeagueList",
          query: {
            game_code: this.ballId,
            leagueID: sessionId,
            name: this.Regulations.title,
            matchDate: this.datetimeNum,
            code: code
          }
        });
      }
    },
    // 返回上一层页面
    isreturn() {
      history.go(-1);
    }
  },
  mounted() {
    let _this = this;
    this.$public.ajaxTimerFun(function(timing) {
      _this.getAjaxInfo(
        _this.$ports.match.matchData,
        "",
        _this.$route.query.id,
        _this.$store.getters.getBallId
      );
      if (!_this.timers) {
        clearInterval(timing);
      }
    });
    //分球的类型获取默认数据
    this.ballId = this.$route.query.id;
    //console.log(this.$route.query.id);
    this.$store.dispatch("GETSHOW", true);
    this.getAjaxInfo(
      this.$ports.match.matchData,
      "",
      this.$route.query.id,
      this.$store.getters.getBallId
    );
    if (this.listnum == 2) {
      this.entryShow = true;
    }
  },
  computed: {
    changeListNum() {
      return this.listnum;
    }
  },
  watch: {
    changeListNum(val) {
      let _this = this;
      this.timers = false;
      if (val == 1) {
        this.timers = true;
        this.$public.ajaxTimerFun(function(timing) {
          _this.getAjaxInfo(
            _this.$ports.match.participate,
            _this.$route.query.id
          );
          if (!_this.timers) {
            clearInterval(timing);
          }
        });
      } else if (val == 2) {
        this.timers = true;
        this.$public.ajaxTimerFun(function(timing) {
          _this.getAjaxInfo(
            _this.$ports.match.matchData,
            "",
            _this.$route.query.id,
            _this.$route.query.id,
            "",
            _this.datetimeNum,
						'2'
          );
          if (!_this.timers) {
            clearInterval(timing);
          }
        });
      } else {
        this.timers = true;
        this.$public.ajaxTimerFun(function(timing) {
          _this.getChampion(_this.$route.query.id);
          if (!_this.timers) {
            clearInterval(timing);
          }
        });
      }
    }
  },
  beforeDestroy() {
    this.timers = false;
  }
};
</script>

<style scoped>
.act {
  transform: rotate(180deg);
  transition: 0.2s;
}
.return {
  transform: rotate(0deg);
  transition: 0.2s;
}
.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;
}
.Serch-box {
  display: flex;
  align-items: center;
}
.Serch-box-input {
  width: 3.8rem;
  border: none;
  position: absolute;
  height: 0.44rem;
  line-height: 0.44rem;
  left: 0.5rem;
  color: #aaa;
}
.Serch-box-img {
  width: 0.3rem;
  height: 0.3rem;
  position: absolute;
  left: 0.1rem;
  top: 0.06rem;
}
.Serch-box-del {
  width: 0.2rem;
  height: 0.2rem;
  position: absolute;
  right: 0.2rem;
}
.Serch-box-home {
  height: 0.45rem;
  line-height: 0.45rem;
  width: 4.73rem;
  background: #e4e4e4;
  border-radius: 0.2rem;
  display: flex;
  justify-content: space-around;
  align-items: center;
  padding-left: 0.1rem;
  padding-right: 0.1rem;
  position: relative;
}
.Soccer-game-title {
  height: 0.88rem;
  font-size: 0.3rem;
}
.Soccer-game-box {
  height: 0.88rem;
  /* padding: 0 0.32rem; */
  background-color: #626262;
}
.Soccer-game-box > p {
  margin: 0.3rem;
  color: #a6a6a6;
}
.Soccer-game-box p.active {
  color: #f76649;
}
.Soccer-game-src {
  width: 0.25rem;
  height: 0.15rem;
  /* margin-left: .3rem */
}
.box {
  background: #ebebeb;
  padding: 0 0.14rem;
}
#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.1rem;
  margin: 0 0.05rem;
  color: #b8b8b8;
  height: 0.88rem;
  line-height: 0.88rem;
}
/* #NavSlide p a{
	color: #E5E5E5;
	text-decoration: none;
} */
#NavSlide p span.active {
  color: #363636;
}

.yd-cell-box .yd-cell {
  z-index: 99;
  border-radius: 0.2rem;
}
.matchBox {
  margin-bottom: 0.12rem;
  background: #f9f9f9;
  padding: 0.27rem 0.34rem 0 0.32rem;
}
div /deep/ .yd-accordion-head {
  padding: 0 0.13rem 0 0;
}
div /deep/ .yd-accordion-content:after {
  height: 0;
}
.match .tit {
  display: flex;
  justify-content: space-between;
  font-size: 0.32rem;
  margin-bottom: 0.3rem;
}
.match .list {
  overflow: hidden;
  transition: all 0.3s cubic-bezier(0.4, 0.6, 0.2, 1);
}
.match .list div {
  background: #dcdcdc;
  width: 100%;
  height: 0.88rem;
  padding: 0.26rem 0.56rem 0.3rem 0.3rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-radius: 0.08rem;
  margin-bottom: 0.12rem;
}
div /deep/ .yd-accordion-head:after {
  height: 0;
}
.match .list span {
  color: #333333;
  font-size: 0.28rem;
}
.match .list .num {
  width: 0.4rem;
  height: 0.4rem;
  display: inline-block;
  line-height: 0.4rem;
  text-align: center;
  color: #f5f5f5;
  border-radius: 50%;
  font-size: 0.2rem;
  background: #f76649;
}
.yd-accordion {
  background: transparent;
}
.match .list div:nth-last-child(1) {
  margin-bottom: 0.34rem;
}
div /deep/ .yd-accordion-head,
div /deep/ .yd-accordion-head-content,
div /deep/ .yd-accordion-title,
div /deep/ .yd-accordion-title-full {
  height: 0.3rem;
}
div /deep/ .yd-accordion-title {
  min-height: 0;
}
div /deep/ .yd-accordion-head {
  margin-bottom: 0.3rem;
}
div /deep/ .yd-accordion-head-arrow:after {
  border: none;
  width: 0.4rem;
  height: 0.4rem;
  background: url("../assets/st-imges/xiangxia.png") no-repeat;
  background-size: 0.4rem 0.4rem;
}
/* 参赛表 */
.entry .list {
  height: 1rem;
  line-height: 0.6rem;
  padding: 0.2rem;
  width: 100%;
  display: flex;
  background: #a0a0a0;
  color: #fefefe;
  justify-content: space-between;
  border-bottom: 1px solid #aaa;
  font-size: 0.28rem;
}
.entry .list .num {
  margin-top: 0.1rem;
  width: 0.4rem;
  height: 0.4rem;
  display: inline-block;
  line-height: 0.4rem;
  text-align: center;
  color: #f5f5f5;
  border-radius: 50%;
  font-size: 0.2rem;
  background: #f76649;
}
</style>