onecric_h5/pages/Live/compontent/detail-info.vue

<template>
	<view class="Info">
		<view class="selection">
			<div class="title">
				<!-- Tournament -->
				{{ $t('live.lab2') }}
			</div>
			<view class="list">
				<u-row justify="space-between" @click="$toUrl(`/pages/Match/match-list?id=${matchDetail.tournament_id}&title=${detail_info.tournament_name}&type=${detail_info.type}`)">
					<view class="selection-info">
						<view class="flex-start">
							<text class="size28 c3 Bold">
								{{detail_info.tournament_name}}
							</text>
						</view>
					</view>
					<image src="/static/image/match/next_ico@2x.png" mode="heightFix" class="detail-right"></image>
				</u-row>
			</view>
		</view>
		<view class="selection">
			<text class="title">
				<!-- Teams -->
				{{ $t('live.lab1') }}
			</text>
			<view class="list">
				<u-row justify="space-between" @click="$toUrl(`/pages/Match/teams/teams?id=${detail_info.home_id}&title=${detail_info.home_name}`)">
					<view class="selection-info">
						<image :src="detail_info.home_logo || '/static/image/common/team.png'" mode="aspectFit" class="mg-rt24"></image>
						<view class="flex-start">
							<text class="size28 c3 Bold">
								{{detail_info.home_name}}
							</text>
							<view class="mg-tp8">
								<!-- <text class="c6 size24 bgE5">TOSS</text> -->
								<!-- <text class="size26 c4">
									{{detail_info.home_member}}
								</text> -->
							</view>
						</view>
					</view>
					<image src="/static/image/match/next_ico@2x.png" mode="heightFix" class="detail-right"></image>
				</u-row>
				<u-row justify="space-between" @click="$toUrl(`/pages/Match/teams/teams?id=${detail_info.away_id}&title=${detail_info.away_name}`)">
					<view class="selection-info">
						<image :src="detail_info.away_logo || '/static/image/common/team.png'" mode="aspectFit" class="mg-rt24"></image>
						<view class="flex-start">
							<text class="size28 c3 Bold">
								{{detail_info.away_name}}
							</text>
							<view class="mg-tp8">
								<!-- <text class="c6 size24 bgE5">TOSS</text> -->
								<!-- <text class="size26 c4">
									{{detail_info.away_member}}
								</text> -->
							</view>
						</view>
					</view>
					<image src="/static/image/match/next_ico@2x.png"  mode="heightFix" class="detail-right"></image>
				</u-row>
			</view>
		</view>
		<view class="selection">
			<text class="title">
				<!-- Match Details -->
				{{ $t('live.lab3') }}
			</text>
			<view class="list">
				<view class="list-item">
					<text class="label">
						<!-- Match -->
					{{ $t('live.lab4') }}
					</text>
					<view class="content">
						{{detail_info.match}}
					</view>
				</view>
				<view class="list-item">
					<text class="label">
						<!-- Match Start Time -->
					{{ $t('live.lab5') }}
					</text>
					<view class="content">
						{{detail_info.match_start_time}}
					</view>
				</view>
				<view class="list-item" v-if="detail_info.venue_name">
					<text class="label">
						<!-- Stadium/Venue -->
					{{ $t('live.lab6') }}
					</text>
					<view class="content cDE9">
						{{detail_info.venue_name || '-'}}
					</view>
				</view>
				<view class="list-item">
					<text class="label">
						<!-- Toss -->
					{{ $t('live.lab57') }}
					</text>
					<view class="content">
						{{detail_info.toss || '-'}}
					</view>
				</view>
				<!-- <view class="list-item">
					<text class="label">Match Officials</text>
					<view class="content">
						Hassan Adnan (On Field),Richard Kettleborough
						(On Field),Wayne Noon (referee)
					</view>
				</view> -->
			</view>
		</view>
		<view class="selection">
			<text class="title">
				<!-- Playing XI -->
				{{ $t('live.lab7') }}
			</text>
			<view class="list">
				<view class="list-item">
					<text class="label">{{detail_info.home_name}}</text>
					<view class="content1">
						{{detail_info.home_member}}
					</view>
				</view>
				<view class="list-item">
					<text class="label">{{detail_info.away_name}}</text>
					<view class="content1">
						{{detail_info.away_member}}
					</view>
					<view class="full">
						<!-- View Full Squad Info -->
					{{ $t('live.lab8') }}
					</view>
				</view>
			</view>
		</view>
		<view class="flex-end selection-table-title">
			<text class="label">
				<!-- Updated 12 hrs ago -->
			{{ $t('live.lab9') }}
			</text>
		</view>
		<view class="selection-table">
			<view >
				<!-- 表头行 -->
				<u-row class="tr-header">
					<view class="text-center">#</view>
					<view class="text-center">
						<!-- TEAM -->
					{{ $t('live.lab25') }}
					</view>
					<view class="text-center">P</view>
					<view class="text-center">W</view>
					<view class="text-center">L</view>
					<view class="text-center">NR</view>
					<view class="text-center">NRR</view>
					<view class="text-center">PTS</view>
				</u-row>
				
				<!-- 表格数据行 -->
				<view v-for="(item,index) in tournament_list" :key="index" :class="{actives:acIndex == index}">
					<u-line color="#CCCCCC"></u-line>
					<u-row @click="clickItem(index)">
						<view class="trc6">{{index+1}}</view>
						<view class="trc3">{{item.competitor || 0}}</view>
						<view class="trc6">{{item.p || 0}}</view>
						<view class="trc6">{{item.w || 0}}</view>
						<view class="trc6">{{item.l || 0}}</view>
						<view class="trc6">{{item.nr || 0}}</view>
						<view class="trc6">{{item.nrr || 0}}</view>
						<view>
							<view class="flex pts">
								<text class="trc3 size28 mg-rt30 Bold"> {{item.pts}} </text>
								<image src="/static/image/match/expert_down_ico.png" mode="aspectFill"></image>
							</view>
						</view>
					</u-row>
					
					<view class="table-item-content" :class="{'active': acIndex==index}">
						<view class="table-item-content-th">
							<text class="label">
							{{ $t('live.lab10') }}
							</text>
							<text class="label">
							{{ $t('live.lab11') }}
							</text>
							<text class="label">
							{{ $t('live.lab12') }}
							</text>
							<text class="label">
							{{ $t('live.lab13') }}
							</text>
						</view>
						<view class="table-item-content-tr" v-for="(item1,index1) in item.match" :key="index1">
							<text class="td">{{item1.competitor}}</text>
							<text class="td1">{{item1.date}}</text>
							<text class="td1">{{item1.venue_name}}</text>
							<text class="td1 overflow1" :class="classFilter(item1.winner) == 1">{{item1.match_result}}</text>
						</view>
					</view>
				</view>
			</view>
			<u-empty
				v-if="tournament_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>
		
		<view class="selection" style="margin-top: 20rpx;">
			<view class="title">
				{{ $t('live.lab14') }}
			</view>
			<view class="li">
				<text class="D4199">#:</text>
				{{ $t('live.lab15') }}
			</view>
			<view class="li">
				<text class="D4199">
					{{ $t('live.lab16') }}:</text>
				{{ $t('live.lab17') }}
			</view>
			<view class="li">
				<text class="D4199">P:</text>
				{{ $t('live.lab18') }}
			</view>
			<view class="li">
				<text class="D4199">W:</text>
				{{ $t('live.lab19') }}
			</view>
			<view class="li">
				<text class="D4199">D:</text>
				{{ $t('live.lab20') }}
			</view>
			<view class="li">
				<text class="D4199">L:</text>
				{{ $t('live.lab21') }}
			</view>
			<view class="li">
				<text class="D4199">NR:</text>
				{{ $t('live.lab22') }}
			</view>
			<view class="li">
				<text class="D4199">NRR:</text>
				{{ $t('live.lab23') }}
			</view>
			<view class="li">
				<text class="D4199">PTS:</text>
				{{ $t('live.lab24') }}
			</view>
			<!-- <view class="li">
				<text class="cfff qqs">Q</text>:
				{{ $t('live.lab24') }}
			</view> -->
		</view>
	</view>
</template>

<script>
	export default {
		props: {
      matchDetail: {
        default: {}
      }
    },
		data() {
			return {
				acIndex:null,
				detail_info:{},
				tournament_list:[]
			}
		},
    created() {
      this.cricket_tournament_standings()
      this.cricket_match_detail_info()
    },
		methods:{
			clickItem(index){
				console.log('index :>> ', index);
				this.acIndex=(this.acIndex==index?null:index)
				console.log(this.acIndex);
			},
			/* 积分	 */
			cricket_tournament_standings() {
				uni.$u.http.post('/api/Cricket/cricket_tournament_standings',{
          tournament_id: this.matchDetail.tournament_id
        }).then(res=>{
					this.tournament_list = res;
				}).catch(res=>{})
			},
			/* 详情 */
			cricket_match_detail_info() {
				let time = new Date();
				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/cricket_match_detail_info',{
          match_id: this.matchDetail.match_id,
          timezone: timeZoneId
        }).then(res=>{
					this.detail_info = res;
				}).finally(() => {
        })
			},
			classFilter(key) {
				return key == 1 ? 'c430' : key == 2 ? 'cC23' : 'c666'
			}
		}
	}
</script>

<style lang="scss">
	.Info{
		padding: 12px 15rpx;
		.selection{
			background-color: #fff;
			margin-bottom: 10px;
			border-radius: 5px;
			overflow: hidden;
			.title {
				line-height: 33px;
				background-color: rgba(16, 5, 74, .1);
				padding: 0 28rpx;
				font-size: 17px;
				font-weight: 700;
				color: #242424;
				display: block;
			}
			.list{
				padding: 0 28rpx;
				.u-row{
					padding: 36rpx 0;
					border-bottom: 1rpx solid #ccc;
					&:last-child{
						border: none;
					}
					.selection-info{
						display: flex;
						image{
							width: 80rpx;
							height: auto;
						}
					}
					.detail-right{
						width: 48rpx;
						height: 48rpx;
					}
				}
				
				.list-item{
					padding: 24rpx 0;
					&+.list-item {
						border-top: 1rpx solid #d1d1d1;
					}
				}
			}
			.label {
				font-size: 12px;
				color: #939292;
			}
			.content {
				font-size: 17px;
				color: #242424;
				&.cDE9 {
					color: #0C52D2;
				}
			}
			.content1 {
				font-size: 15px;
				color: #242424;
			}
			.full {
				font-size: 15px;
				font-weight: 700;
				color: #ff3300;
				text-align: center;
				padding-top: 25px;
				padding-bottom: 8px;
			}
		}
		.selection-table-title{
			padding: 36rpx 28rpx 36rpx 0;
		}
		.selection-table{
			background-color: #fff;
			border-radius: 5px;
			overflow: hidden;
			.tr-header{
				background-color: rgba(16, 5, 74, .1);
				color: #484A4D;
				font-size: 12px;
			}
			.pts{
				image{
					width: 19rpx;
					height: 19rpx;
					transition: all 0.5s ease;
				}
			}
			.u-row{
				display: grid;
				grid-template-columns: 10% 15% 10% 10% 10% 10% 20% 10%;
				grid-template-rows:74rpx;
				transition: all 0.5s ease;
				font-size: 12px;
			}
			.trc6{
				color: #666;
				text-align: center;
			}
			.trc3{
				color: #333;
				text-align: center;
			}
			.table-item-content{
				height: 0rpx;
				overflow: hidden;
				line-height: 66rpx;
				transition: all 0.5s ease;
				height: 0;
				&.active {
					height: 100%;
					padding: 24rpx 28rpx 0;
				}
				.table-item-content-th{
					height: 27px;
					background: rgba(16, 5, 74, .1);
					border-radius: 10rpx;
					display: grid;
					grid-template-columns: 15% 20% 25% 40%;
					grid-template-rows:27px;
					padding-left: 24rpx;
					color: #505255;
					align-items: center;
					font-size: 12px;
				}
				.table-item-content-tr{
					display: grid;
					grid-template-columns: 15% 20% 25% 40%;
					grid-template-rows:70rpx;
					min-height: 70rpx;
					padding-left: 24rpx;
				}
				.td {
					font-size: 14px;
					color: #282828;
				}
				.td1 {
					font-size: 12px;
					color: #5A5C5F;
				}
			}
			.actives{
				.u-row{
					background-color: #1D2550;
				}
				.trc6{
					color: #999;
				}
				.trc3{
					color: #fff;
				}
				.pts{
					image{
						transform: rotateZ(180deg);
					}
				}
				// .table-item-content{
				// 	height: max-content;
				// }
			}
		}
		.li {
			font-size: 14px;
			font-weight: 400;
			text-align: left;
			color: #242424;
			line-height: 1;
			display: flex;
			align-items: center;
			height: 39px;
			.D4199 {
				color: #4D4199;
				display: inline-block;
				width: 50px;
				text-align: right;
				padding-right: 19px;
			}
		}
		.qqs{
			font-size: 28rpx;
			background-color: #EEA831;
			display: inline-block;
			padding: 0 8rpx;
			border-radius: 100rpx;
		}
	}
</style>