sports_wap/vue_sports/.svn/pristine/b2/b29db425aca1ea54d41aba1397c46834edb0e224.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" :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)">
						<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:"今日赛事"}]
			}
		},
		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 =>{
				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{
							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() {
			//分球的类型获取默认数据
			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;
			}
		}
	}
</script>

<style scoped>
.act{
	transform: rotate(180deg);
	transition:.2s;
}
.return{
	transform: rotate(0deg);
	transition:.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: .37rem;
		height: .3rem;
		margin-right: .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:.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: .12rem;
  background: #F9F9F9;
  padding: 0.27rem 0.34rem 0 0.32rem;
}
div /deep/ .yd-accordion-head{
		padding: 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 .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>