onecric_h5/pages/Match/match-list.vue

<template>
	<view class="select">
		<view class="select-head">
			<u-navbar :leftText="parent.title" titleWidth="200" bgColor="transparent" leftIconColor="#fff" :titleStyle="{color:'#fff'}" :fixed="false" leftIconSize="48" :autoBack="true"></u-navbar>
			<view class="select-tab">
				<u-tabs
				:list="list1"
				lineWidth="100rpx"
				@click="changeTab" 
				lineHeight="4" 
				lineColor="#DC3C23"   
				:activeStyle="{color:'#DC3C23',fontSize:'32rpx',fontWeight:'Bold'}" 
				:inactiveStyle="{color:'#fff',fontSize:'32rpx'}"
				></u-tabs>
			</view>
		</view>
		<view class="list" v-if="activeIndex == 0">
			<view class="li" :class="{'match-target': item.id == parent.matchid}" v-for="(item,index) in tournament_match" :key="index" @click="$toUrl('./match-detail?id=' + item.id + '&title=' + parent.title)">
				<view class="li-top flex">
					<!-- status 0未开始  1已开始  2已结束 -->
					<view class="flex-start font28">
						<image src="/static/image/match/begin.png" mode="" v-if="item.status == 1"></image>
						<text v-if="item.status == 0" class="begin">{{item.live_time}}</text>
						<!-- <text v-if="item.status == 2">{{item.match_result}}</text> -->
						{{item.match_num}}
						<!-- {{item1.status == 0?item1.live_time+ ' ' + :item1.match_result}} -->
					</view>
					<!-- <image src="/static/image/match/schedule_adorn_ico@2x.png" mode=""></image> -->
				</view>
				<view class="li-team flex font32">
					<view class="flex-start">
						<image :src="item.home_logo || '/static/image/common/team.png'" mode="aspectFit"></image>
						{{item.home_name}}
					</view>
					<view class="li-team-value" :style="{color:item.match_result_type == 'w'?'#000':'#666'}">
						{{item.home_display_score}}
					</view>
				</view>
				<view class="li-team flex">
					<view class="flex-start">
						<image :src="item.away_logo || '/static/image/common/team.png'" mode="aspectFit"></image>
						{{item.away_name}}
					</view>
					<view class="" :style="{color:item.match_result_type == 'r'?'#000':'#666'}">
						{{item.away_display_score}}
					</view>
				</view>
				<view class="li-foot font28">
					{{item.match_result}}
				</view>
			</view>
			<u-empty
				v-if="tournament_match && tournament_match.length == 0"
				mode="data"
				width="474"
				height="312"
				textSize="28"
				marginTop="100"
				:text="$t('common.nodata')"
				icon="/static/image/common/nodata.png"
			>
			</u-empty>
		</view>
		<view v-else-if="activeIndex == 1">
			<view class="stats-main mg-tp12">
				<view class="flex-start stats-main-title">
					<view></view>
					<text class="size36 c3 Bold">
						{{ $t('match.lab80') }}
					</text>
				</view>
				
				<view class="stats-main-content">
					<u-row v-for="item in 5" :key="item" justify="space-between"  @click="toUrl(0,item)">
						<view>
							<text class="size32 c3 Bold">{{item == 1?'Highest Individual Score':item == 2?'Most Runs':item == 3?'Best Batting Average':item == 4?'Highest Strike Rate':'Maximum Sixes'}}</text>
							<view class="mg-tp16 size c3">
								{{item == 1?stats.highest_score_name:item == 2?stats.most_runs_name:item == 3?stats.best_battingAv_name:item == 4?stats.highest_strikeRate_name:stats.maximum_sixes_name}} - <text class="Bold">
								{{item == 1?stats.highest_score:item == 2?stats.most_runs:item == 3?stats.best_battingAv:item == 4?stats.highest_strikeRate:stats.maximum_sixes}}
								</text>
							</view>
						</view>
						<image src="../../static/image/match/next_ico@2x.png" mode="heightFix" class="arrow-right"></image>
					</u-row>
				</view>
			</view>
			<u-gap bgColor="#E5E5E5" heignt="24"></u-gap>
			
			<view class="stats-main mg-tp12">
				<view class="flex-start stats-main-title">
					<view></view>
					<text class="size36 c3 Bold">
						{{ $t('match.lab81') }}
					</text>
				</view>
				<view class="stats-main-content">
					<u-row v-for="item in 3" justify="space-between" :key="item" @click="toUrl(5,item)">
						<view>
							<text class="size32 c3 Bold">{{item == 1?'Most Wickets':item == 2?'Best Bowling Average':'Best Bowling Economy'}}</text>
							<view class="mg-tp16 size c3">
								{{item == 1?stats.most_wickets_name:item == 2?stats.best_bowling_average_name:stats.best_bowling_economy_name}} - <text class="Bold">{{item == 1?stats.most_wickets:item == 2?stats.best_bowling_average:stats.best_bowling_economy}}</text>
							</view>
						</view>
						<image src="../../static/image/match/next_ico@2x.png" mode="heightFix" class="arrow-right"></image>
					</u-row>
				</view>
			</view>
			<view class="stats-main mg-tp12" style="display: none;">
				<view class="flex-start stats-main-title">
					<view></view>
					<text class="size36 c3 Bold">
						{{ $t('match.lab82') }}
					</text>
				</view>
				<view class="stats-main-content">
					<u-row v-for="item in 3" justify="space-between" :key="item" @click="toUrl(8,item)">
						<view>
							<text class="size32 c3 Bold">{{item == 1?'Most Catches':item == 2?'Most Run Outs':'Most Stumpings'}}</text>
							<view class="mg-tp16 size c3">
								{{item == 1?stats.most_catches_name:item == 2?stats.most_run_outs_name:stats.most_stumpings_name}} - <text class="Bold">{{item == 1?stats.most_catches:item == 2?stats.most_run_outs:stats.most_stumpings}}</text>
							</view>
						</view>
						<image src="../../static/image/match/next_ico@2x.png" mode="heightFix" class="arrow-right"></image>
					</u-row>
				</view>
			</view>
		</view>
		<Teams ref="teams" v-else-if="activeIndex == 2" />
		<Points ref="points"  v-else-if="activeIndex == 3" />
		<Updates  v-else-if="activeIndex == 4" ref="Updates" />
	</view>
</template>

<script>
	import Teams from './compontent/Teams.vue';
	import Points from './compontent/Points.vue';
	import Updates from './compontent/Updates.vue'
	export default {
		components:{Teams,Points,Updates},
		data(){
			return {
				list1:[
					{
						name: this.$t('match.lab83'),
					},
					{
						name: this.$t('match.lab84'),
					},
					{
						name: this.$t('match.lab'),
					},
					{
						name: this.$t('match.lab85'),
					},
					// {
					// 	name: this.$t('match.lab79'),
					// }
				],
				page:1,
				parent:{
					title:'',
				},
				stats:{},//Stats
				status:'more',
				firstSign: false,
				tournament_team:[],
				activeIndex:0,
				tournament_match:[],
			}
		},
		onLoad(option) {
			this.parent = option;
			this.get_cricket_tournament_match()
		},
		onPullDownRefresh() {
			this.page = 1;
			this.changeTab({index:this.activeIndex})
			setTimeout(res=>{
				uni.stopPullDownRefresh()
			},1500)
		},
		onReachBottom() {
			if(this.status == 'more' && this.activeIndex == 0) {
				this.get_cricket_tournament_match()
			}
		},
		methods: {
			
			toUrl(type,i) {
				let title = this.parent.type.toUpperCase()
				this.$toUrl(`./stats-detail?id=${this.parent.id}&type=${(type+i) - 1}&title=Tour Stats：${title}`)
				// ''+parent.id+ '&title=' + parent.title
			},
			
			get_cricket_tournament_match() {
				let time = new Date();
				this.status = 'loading';
				let timeZone = time.toLocaleTimeString('en-us',{timeZoneName:'short'});  //'1:12:38 PM GMT+8'
				let timeZoneId = Intl.DateTimeFormat().resolvedOptions().timeZone; //'Asia/Shanghai'
				uni.$u.http.post('/api/Cricket/get_cricket_tournament_match',{tournament_id:this.parent.id,timezone:timeZoneId,page:this.page}).then(res=>{
					
					if(this.page == 1) {
						this.tournament_match = res.data
					}else {
						this.tournament_match = this.tournament_match.concat(res.data);
					}
					if(res.tatal == 0) {
						this.status = 'none'
					}
					if(this.tournament_match.length < res.total) {
						this.status = 'more'
						this.page++
					}else {
						this.status = 'noMore'
					}
					!this.firstSign && this.$nextTick(() => {
						uni.pageScrollTo({
							duration: 0,
							selector: '.match-target',
						});
						this.firstSign = true
					})
					// }
				}).catch(res=>{})
				
				uni.$u.http.post('/api/Cricket/get_tournament_stats',{id:this.parent.id}).then(res=>{
					this.stats = res
				}).catch(res=>{})
				
			},
			/* 获取团队列表 */
			get_tournament_team() {
				uni.$u.http.post('/api/Cricket/get_tournament_team',{tournament_id:this.parent.id}).then(res=>{
					this.tournament_team = res
				}).catch(res=>{})
			},
			
			
			changeTab(e) {
				this.activeIndex = e.index
				if(e.index == 0){
					this.get_cricket_tournament_match()
				}else if(e.index == 2) {
					this.$nextTick(res=>{
						this.$refs.teams.get_tournament_team(this.parent.id)
					})
					
				}else if(e.index == 3) {
					this.$nextTick(res=>{
						this.$refs.points.cricket_tournament_standings(this.parent.id)
					})
					
				}else if(e.index == 4) {
					this.$nextTick(res=>{
						this.$refs.Updates.getList(this.parent.id,1)
					})
				}
			}
		},
	}
</script>

<style lang="scss">
	/deep/.u-navbar__content__left__text {
		width: 90%;
		display: block;
		overflow: hidden;
		/* //超出的文本隐藏 */
		text-overflow: ellipsis;
		/* //溢出用省略号显示 */
		white-space: nowrap;
		/* //溢出不换行 */
	}
	.select-head {
		position: sticky;
		top: 0;
		z-index: 99;
		background-color: $color1;
		.select-tab {
			padding: 0 28rpx;
			margin-top: 20rpx;
		}
	}
	.list {
		padding: 0 28rpx;
		padding-bottom: 100rpx;
		.li {
			padding: 24rpx;
			box-shadow: 0px 0px 8rpx 0px $color7;
			border-radius: 10rpx;
			margin-top: 24rpx;
		}
		.li-top {
			color: $color4;
		
			image {
				width: 36rpx;
				height: 36rpx;
			}
			view {
				image {
					width: 82rpx;
					height: 42rpx;
					margin-right: 16rpx;
				}
			}
			text {
				margin-right: 16rpx;
			}
			.begin {
				color: #666;
				padding: 0 10rpx;
				background-color: #E5E5E5;
			}
		}
		.li-team {
			width: 80%;
			margin-top: 24rpx;
			image {
				width: 56rpx;
				height: 56rpx;
				margin-right: 16rpx;
			}
			.li-team-value {
				color: $color4;
			}
		}
		.li-foot {
			color: $color4;
			margin-top: 24rpx;
		}
	}
	
	.stats-main{
		padding: 24rpx 28rpx;
		.stats-main-title{
			view{
				width: 6rpx;
				height: 40rpx;
				background: #DC3C23;
				margin-right: 16rpx;
			}
		}
		.stats-main-content{
			margin-top: 29rpx;
			background: #FFFFFF;
			box-shadow: 0rpx 0rpx 8rpx 1rpx $color7;
			border-radius: 10rpx 10rpx 10rpx 10rpx;
			.u-row{
				border-bottom: 1rpx solid #E5E5E5;
				padding: 24rpx;
				.arrow-right{
					width: 48rpx;
					height: 48rpx;
				}
			}
		}
	}
	
	
	
	
	
	
</style>