onecric_h5/pages/Match/stats-detail.vue

<template>
	<view>
		<view class="select-head">
			<u-navbar :leftText="parent.title" bgColor="transparent" leftIconColor="#fff" :titleStyle="{color:'#fff'}" :fixed="false" leftIconSize="48" :autoBack="true"></u-navbar>
			<view class="select-tab">
				<u-tabs
				:list="list1"
				@click="changeTab" 
				:current="activeIndex"
				lineHeight="0" 
				lineColor="#DC3C23"   
				:activeStyle="{
					color:'#DC3C23',
					fontSize:'32rpx',
					padding:'2rpx 20rpx',
					border:'1rpx solid #DC3C23',
					borderRadius:'31rpx'
				}" 
				:inactiveStyle="{
					color:'#fff',
					fontSize:'32rpx',
					padding:'2rpx 20rpx',
					border:'1rpx solid #FFF',
					borderRadius:'31rpx'
				}"
				></u-tabs>
			</view>
		</view>
		<view class="list">
			<view class="list-item-tr size24 c6">
				<view> # </view>
				<view>
					<!-- TEAM  -->
					{{ $t('live.lab25') }}
				</view>
				<view> {{activeIndex == 0?'B':'M'}} </view>
				<view> {{activeIndex == 0?'S/R':0 < activeIndex && activeIndex < 5?'INN':'O'}} </view>
				<view> {{activeIndex == 0?'VS':activeIndex == 1 || activeIndex == 5?'AVG':activeIndex == 6 || activeIndex == 7?'W':'R'}} </view>
				<view> {{activeIndex == 0 || activeIndex == 1?'RUNS':activeIndex == 2 || activeIndex == 6?'AVG':activeIndex == 3?'S/R':activeIndex == 4?'6S':activeIndex == 5?'W':'ECO'}} </view>
			</view>
			
			<view class="list-item-th" v-for="(item,index) in statsDetail.list" :key="index" :class="{actives:acIndex == index}"><!-- @click="acIndex=item" -->
				<view class="flex-end list-av" :name="index+1">
					<image :src="item.img || '/static/image/common/teams_avatar_ico@2x.png'" mode="aspectFill" class="list-avatar mg-rt16"></image>
				</view>
				<view class="size28 c6">
					<view class="size32 c3 mg-bt6">
						{{item.name}}
					</view>
					<text>{{item.abbreviation}}</text>
				</view>
				<view class="size28 c6">
					<text>{{activeIndex == 0?item.b:item.m}}</text>
				</view>
				<view class="size32 c3 ">
					<text>{{activeIndex == 0?item.sr:0 < activeIndex && activeIndex < 5?item.inn:item.o}}</text>
				</view>
				<view class="size32 c3 ">
					<text>{{activeIndex == 0?item.vscname:activeIndex == 1 || activeIndex == 5?item.avg:activeIndex == 6 || activeIndex == 7?item.w:item.runs}}</text>
				</view>
				<view class="size32 c3 ">
					<text>{{activeIndex == 0 || activeIndex == 1?item.runs:activeIndex == 2 || activeIndex == 6?item.avg:activeIndex == 3?item.sr:activeIndex == 4?item['sixs']:activeIndex == 5?item.w:item.eco}}</text>
				</view>
			</view>
			<u-empty
				v-if="statsDetail.list.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 class="mg-tp36 size28 c9 text-center">
				{{statsDetail.updated_at}}
			</view>
		</view>
		<view class="bgE5 clossary mg-tp36">
			<!-- GLOSSARY -->
			{{ $t('live.lab14') }}
		</view>
		<view class="main size28 c6">
			<view class="mg-bt24"><text class="c3 Bold">#:</text>
				<!-- Rank  -->
				{{ $t('live.lab15') }}
			</view>
			<view class="mg-bt24"><text class="c3 Bold">B:</text>
				<!-- Balls  -->
				{{ $t('match.lab65') }}
			</view>
			<view class="mg-bt24"><text class="c3 Bold">M:</text>
				<!-- Matches  -->
				{{ $t('match.lab83') }}
			</view>
			<view class="mg-bt24"><text class="c3 Bold">R:</text>
				<!-- Runs  -->
				{{ $t('match.lab66') }}
			</view>
			<view class="mg-bt24"><text class="c3 Bold">O:</text>
				<!-- Overs  -->
				{{ $t('match.lab67') }}
			</view>
			<view class="mg-bt24"><text class="c3 Bold">W:</text>
				<!-- Wickets  -->
				{{ $t('match.lab68') }}
			</view>
			<view class="mg-bt24"><text class="c3 Bold">VS:</text>
				<!-- Versus Team  -->
				{{ $t('match.lab69') }}
			</view>
			<view class="mg-bt24"><text class="c3 Bold">INN:</text>
				<!-- Innings  -->
				{{ $t('match.lab70') }}
			</view>
			<view class="mg-bt24"><text class="c3 Bold">AVG:</text>
				<!-- Average  -->
				{{ $t('match.lab71') }}
			</view>
			<view class="mg-bt24"><text class="c3 Bold">S/R:</text>
				<!-- Strike Rate  -->
				{{ $t('match.lab72') }}
			</view>
			<view class="mg-bt24"><text class="c3 Bold">ECO:</text>
				<!-- Economy Rate  -->
				{{ $t('match.lab73') }}
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				acIndex:0,
				list1:[
					{
						name: this.$t('match.lab74'),
					},
					{
						name: this.$t('match.lab75'),
					},
					{
						name: this.$t('match.lab76'),
					},
					{
						name: this.$t('match.lab77'),
					},
					{
						name: this.$t('match.lab78'),
					},
					{
						name: this.$t('match.lab79'),
					},
					{
						name: this.$t('match.lab80'),
					},
					{
						name: this.$t('match.lab81'),
					},
					{
						name: this.$t('match.lab82'),
					},
					{
						name: this.$t('match.lab83'),
					},
					{
						name: this.$t('match.lab84'),
					}
				],
				statsDetail:{
					list:[],
					updated_at:''
				},
				parent:{},
				activeIndex:0
			}
		},
		onLoad(option) {
			option.type = Number(option.type);
			this.activeIndex = option.type;
			this.parent = option;
			this.getList()
		},
		methods: {
			changeTab(e) {
				console.log("e: ",e);
				this.activeIndex = e.index;
				this.getList()
			},
			getList() {
				uni.$u.http.post('/api/Cricket/get_tournament_stats_list',{id:this.parent.id,type:this.activeIndex+1}).then(res=>{
					// this.stats = res
					this.statsDetail = res;
				}).catch(res=>{})
			}
		},
	}
</script>

<style lang="scss">
	.select-head {
		position: sticky;
		top: 0;
		z-index: 99;
		background-color: $color1;
		.select-tab {
			padding: 0 28rpx;
			margin-top: 20rpx;
		}
	}
	
	.list{
		
		.list-item-tr{
			display: grid;
			grid-template-columns: 130rpx 225rpx 90rpx 90rpx 90rpx 90rpx;
			padding: 24rpx;
			border-bottom: 1rpx solid #ccc;
		}
		.list-item-th{
			display: grid;
			grid-template-columns: 130rpx 225rpx 90rpx 90rpx 90rpx 90rpx;
			padding: 24rpx;
			border-bottom: 1rpx solid #ccc;
			.list-avatar{
				width: 90rpx;
				height: 90rpx;
				border-radius: 50px;
				// overflow: visible;
			}
			.list-av {
				position: relative;
				&:before{
					content: attr(name);
					position: absolute;
					left: 0rpx;
					top: 50%;
					width: 40rpx;
					height: 40rpx;
					border-radius: 200rpx;
					background-color: #E5E5E5;
					margin-top: -20rpx;
					font-size: 24rpx;
					color: #999;
					text-align: center;
					line-height: 40rpx;
					z-index: 1;
				}
			}
		}
		.actives{
			background: #FFE6E2;
			.list-av{
				&:before{
					background: #DC3C23;
					color: #fff;
				}
			}
		}
	}
	
	.clossary{
		padding: 20rpx 28rpx;
	}
	
	.main{
		padding: 24rpx 28rpx;
		margin-top: 30rpx;
		view{
			text{
				margin-right: 16rpx;
				display: inline-block;
			}
		}
	}
</style>