onecric_h5/pages/Match/teams/teams.vue

<template>
	<view class="size32 c3">
		<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>
		<view class="mg-tp24 mg-bt24 text-center size28 c9">
			<!-- Full squad for this tour -->
			{{ $t('match.lab32') }}
		</view>
		
		<view class="" v-for="(item,index) in tournament_list" :key="index">
			<view class="bgE5 title flex">
				<text class="Bold">{{item.name}}</text>
				<text>{{item.count}}</text>
			</view>
			<view class="stats-main mg-tp12">
				<view class="stats-main-content">
					<u-row v-for="(item1,index1) in item.players" :key="index1" justify="space-between"  @click="$toUrl('./detail?id=' + item1.player_id)">
						<view class="flex-start">
							<image :src="item1.players_logo || '/static/image/common/[email protected]'" mode="aspectFit" class="avatar"></image>
							<view>
								<text class="size32 c3 Bold">{{item1.players_name}}</text>
								<view class="mg-tp5 size c3 font28">
									{{item.name == 'batters'?item1.batting_style:item.name == 'bowlers'?item1.bowling_style:item1.batting_style+'，'+item1.bowling_style}}
								</view>
							</view>
						</view>
					</u-row>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				parent:{
					title:'',
				},
				tournament_list:{}
			};
		},
		onLoad(option) {
			this.parent = option;
			this.get_tournament_team_list()
		},
		methods:{
			/* 获取团队列表 */
			get_tournament_team_list() {
				uni.$u.http.post('/api/Cricket/get_tournament_team_list',{competitor_id:this.parent.id}).then(res=>{
					console.log('----------------');
					for (let var1 in res) {
						res[var1].name = var1
					}
					// console.log(res);
					this.tournament_list = res
				}).catch(res=>{})
			},
		}
	}
</script>

<style lang="scss">
	.title{
		padding: 24rpx 28rpx;
		font-size: 28rpx;
	}
	.select-head {
		position: sticky;
		top: 0;
		z-index: 99;
		background-color: $color1;
		.select-tab {
			padding: 0 28rpx;
			margin-top: 20rpx;
		}
	}
	.stats-main{
		.stats-main-content{
			background: #FFFFFF;
			.u-row{
				border-bottom: 1rpx solid #E5E5E5;
				padding: 24rpx 28rpx;
				.avatar{
					width: 90rpx;
					height: 90rpx;
					border-radius: 50%;
					margin-right: 16rpx;
				}
				.arrow-right{
					width: 48rpx;
					height: 48rpx;
				}
			}
		}
	}
</style>