sports_wap/vue_sports/.svn/pristine/89/89ba63b30039079b9fa12164a546d58ad0cbadf9.svn-base

<template>
  <div>
    <div class="Serch" v-if="headShow">
      <div class="Soccer-game row center">
        <div class="Soccer-game-title row center" @click="isreturn()">
          <img class="returnimg" :src="img.searchreturn">
          <!-- {{Regulations.title}} -->
          {{name}}
        </div>
        <div
          v-if="isShow"
          style="height:0.88rem;margin-left:0.16rem;padding:0 0.1rem;"
          class="row center"
          @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 && isShow">
      <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="dayShow" class="box">
      <div id="NavSlide">
        <nav>
          <p v-for="(item,$index) in arr" @click="toggle($index,item.id)">
            <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 {
  props: ["name", "headShow"],
  data() {
    return {
      isShow: true, //如果为串场则把导航显示出来，否则不显示
      SerchValue: "",
      data: "", //联赛列表
      ballId: "", //球类别名
      noData: false, //没有数据为true
      datetimeNum: "", //赛事时间
      active: 0,
      entryShow: true, //参赛表
      lgId: "",
      serchTime: 0, //默认时间值
      sear: "", //早盘存储查找时间
      listnum: 0, //赛事类型
      isTrue: true, //显示日期
      dayShow: false,
      Serchchange: false,
      info: "没有相关联赛信息",
      isSoccerGameClick: true,
      entryList: "", // 参赛表数据
      str_type: false, //串场冠军盘传值
      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: 0, name: "赛事" },
          { id: 2, name: "冠军盘口" }
        ]
      },
      active: 0,
      arr: [] //时间条
    };
  },
  components: {
    NotOpend
  },
  methods: {
    //设置一周赛事
    fun_date: function() {
      let date = new Date();
      let date2 = new Date(date);
      for (let i = 0; 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: "其他早盘" });
        }
      }
      this.datetimeNum = this.arr[0].id;
    },
    // search=搜索关键字 lg_id = 联赛id （如果传入，则获取联赛下冠军盘口）
    getAjaxInfo: function(lg_id, search, match_date, str_type, index) {
      // console.log(
      //   this.$store.getters.getBallId,
      //   this.$store.getters.getActivity
      // );
      this.$store.dispatch("GETSHOW", true);
      this.$http
        .get(this.$ports.match.matchState, {
          game_code: this.$store.getters.getBallId,
          type_code: this.$store.getters.getActivity,
          lg_id,
          search,
          match_date,
          str_type
        })
        .then(res => {
          this.$store.dispatch("GETSHOW", false);
          if (
            res.data.status == 1 &&
            res.data.data.length > 0 &&
            res.data.data != null
          ) {
            console.log("数据", res.data);
            this.Regulations.title = res.data.data.type;
            this.noData = false;
            this.data = res.data.data;
          } else {
            this.data = "";
            this.noData = true;
          }
        });
    },
    //获取冠军盘口数据
    getChampion: function(typeGame, search) {
      console.log("冠军盘口");
      this.$store.dispatch("GETSHOW", true);
      this.$http
        .get(this.$ports.match.first, { typeGame, search })
        .then(res => {
          if (
            res.status == 200 &&
            res.data.data != [] &&
            res.data.data != null
          ) {
            if (res.data.data.info.length > 0) {
              this.data = res.data.data.info;
            } else {
              this.data = "";
            }
            this.$store.dispatch("GETSHOW", false);
          } else {
            this.$store.dispatch("GETSHOW", false);
          }
        });
    },
    //显示隐藏赛事类型
    IsSoccerGameClick(isclick) {
      this.isSoccerGameClick = !isclick;
    },
    //获取input输入的值查询数据
    serchchange(val) {
      if (val.length >= 1) {
        this.Serchchange = true;
      } else {
        this.Serchchange = false;
      }
      if (this.$store.getters.getActivity == "StMorningPlate") {
        this.getAjaxInfo("", val, this.serchTime);
      } else {
        this.getAjaxInfo("", val);
      }
    },
    //删除搜索框数据
    delinputvalue() {
      this.SerchValue = "";
      this.Serchchange = false;
      if (this.listnum == 2) {
        this.getAjaxInfo("", "", "");
      } else if (this.listnum == 3) {
        this.getChampion(this.$store.getters.getBallId);
      }
    },
    //切换赛事类型
    listActive(id) {
      // console.log("id", id);
      // sessionStorage.setItem("active", id);
      if (this.listnum == id) return false;
      this.SerchValue = "";
      this.listnum = id;
      this.str_type = true;
      console.log("this.listnum", this.listnum);
      if (id == 0) {
        this.entryShow = true;
        this.isTrue = true;
        this.getAjaxInfo("", "", "", id);
      } else {
        this.isTrue = false;
        if (id == 2) {
          this.entryShow = true;
          //  this.getChampion(this.$route.query.id)
          this.getAjaxInfo("", "", "", id);
        } else if (id == 1) {
          this.entryShow = false;
          this.$store.dispatch("GETSHOW", true);
          this.$http
            .get(this.$ports.match.participate, {
              typeGame: this.$store.getters.getBallId
            })
            .then(res => {
              //console.log("res", res);
              if (
                res.status == 200 &&
                res.data.data != [] &&
                res.data.data != null
              ) {
                this.entryShow = false;
                this.entryList = res.data.data;
                this.$store.dispatch("GETSHOW", false);
              } else {
                this.$store.dispatch("GETSHOW", false);
              }
            });
        }
      }
    },
    //切换日期时间
    toggle: function(index, id) {
      if (index == this.active) return false;
      //console.log("index", index);
      this.serchTime = id;
      this.active = index;
      this.datetimeNum = id;
      this.sear = id;
      this.SerchValue = "";
      this.getAjaxInfo("", "", id);
    },
    //打开联赛投注页面
    goMatchInfo: function(sessionId, code) {
      console.log("this.str_type", this.str_type);
      if (
        this.$store.getters.getActivity == "StStringScene" ||
        this.$store.getters.getActivity == "StChampion"
      ) {
        console.log("true");
        this.$router.push({
          path: "StLeagueList",
          query: {
            game_code: this.ballId,
            leagueID: sessionId,
            name: this.name,
            home: 1,
            matchDate: this.datetimeNum,
            navBall: "2",
            code: code,
            strType: this.listnum
          }
        });
      } else {
        this.$router.push({
          path: "StLeagueList",
          query: {
            game_code: this.ballId,
            leagueID: sessionId,
            name: this.name,
            home: 1,
            matchDate: this.datetimeNum,
            navBall: "2",
            code: code
          }
        });
      }
    },
    // 返回上一层页面
    isreturn() {
      history.go(-1);
    }
  },
  mounted() {
    //分球的类型获取默认数据
    this.ballId = this.$store.getters.getBallId;
    this.active = 0;
    // this.$store.dispatch("GETSHOW", true);
    this.fun_date();
    this.serchTime = this.arr[0].title;
    // this.getAjaxInfo();
    // if (sessionStorage.getItem("active")) {
    //   this.listnum = sessionStorage.getItem("active");
    // } else {
    //   this.listnum = 0;
    // }
    // 判断冠军跳转
    if (this.$store.getters.getActivity == "StChampion") {
      this.str_type = true;
    } else {
      this.str_type = false;
      if (this.$store.getters.getActivity == "StMorningPlate") {
        this.dayShow = true;
      } else {
        this.dayShow = false;
      }
    }
    if (this.listnum != 1) {
      this.entryShow = true;
    }
  },
  computed: {
    getActivity: function() {
      if (
        this.$store.getters.getActivity == "StChampion" ||
        this.$store.getters.getActivity == "StMorningPlate" ||
        this.$store.getters.getActivity == "StToday"
      ) {
        this.isShow = false;
      } else {
        this.isShow = true;
        // 判断位串场的时候则传值type到下一个页面
      }
      this.getAjaxInfo();
      // 当别名改变时，修改状态
      // if (sessionStorage.getItem("ballId")) {
      //   if (sessionStorage.getItem("active")) {
      //     sessionStorage.removeItem("active");
      //     this.listnum = 0;
      //   } else {
      //   }
      // }
      this.listnum = 0;
      return this.$store.getters.getActivity;
    }
  },
  watch: {
    getActivity(val) {
      // 判断是不是早盘，是则显示时间条
      if (this.$store.getters.getActivity == "StMorningPlate") {
        this.dayShow = true;
      } else {
        this.dayShow = false;
      }
      //       if (this.$store.getters.getActivity == "StStringScene" || this.$store.getters.getActivity == "StChampion") {
      //   this.str_type = true;

      // } else {
      //   this.str_type = 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: 0.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: 0.88rem;
  padding: 0.2rem;
  width: 100%;
  display: flex;
  justify-content: space-between;
  border-bottom: 1px solid #aaa;
}
.entry .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;
}
</style>