onecric_h5/pages/Match/teams/detail.vue

<template>
	<view class="detail">
		<view class="head">
			<u-navbar :leftText="$t('navbar.txt9')" bgColor="transparent" leftIconColor="#fff" :titleStyle="{color:'#fff'}" :fixed="false" leftIconSize="48" :autoBack="true"></u-navbar>
			<view class="flex-start head-info">
				<image :src="playerInfo.image_path || '/static/image/common/[email protected]'" mode="aspectFit"></image>
				<view class="head-info-left">
					<view class="title font32">
						{{playerInfo.full_name}}
					</view>
					<view class="t">
						{{playerInfo.type}}
					</view>
					<view class="t">
						{{playerInfo.birth}}
					</view>
				</view>
			</view> 
			<view class="select-tab flex-center">
				<u-tabs
				:list="list1"
				@click="changeTab"
				:isscroll="false"
				lineHeight="4" 
				:current="tabIndex"
				lineColor="#DC3C23"   
				:activeStyle="{color:'#DC3C23',fontSize:'32rpx',fontWeight:'Bold'}" 
				:inactiveStyle="{color:'#333',fontSize:'32rpx'}"
				></u-tabs>
			</view>
		</view>
		
		<Bio v-show="tabIndex == 0" ref="bio"></Bio>
		<career v-show="tabIndex == 1" ref="career"></career>
	</view>
</template>

<script>
	import Bio from '@/pages/Match/compontent/Bio.vue'
	import career from '@/pages/Match/compontent/Career.vue'
	export default {
		components:{Bio,career},
		data() {
			return {
				parent:{},
				list1: [
					{
						name: this.$t('match.lab29'),
					},
					{
						name: this.$t('match.lab30'),
					},
					// {
					// 	name: this.$t('match.lab31'),
					// }
				],
				tabIndex:1,
				playerInfo:{}
			}
		},
		onLoad(option) {
			this.parent = option;
			this.getDetail()
			this.$nextTick(res=>{
				this.$refs.bio.getBio(option.id)
				this.$refs.career.getInfo(this.parent.id)
			})
		},
		methods:{
			changeTab(e) {
				this.tabIndex = e.index
				if(e.index == 1) {
					this.$nextTick(res=>{
						this.$refs.career.getInfo(this.parent.id)
					})
				}
			},
			/* 获取详情 */
			getDetail() {
				uni.$u.http.post('/api/CricketPlayer/cricket_player_index',{player_id:this.parent.id}).then(res=>{
					this.playerInfo = res
				}).catch(res=>{})
			}
			
		}
	}
</script>

<style lang="scss">
	.info {
		
	}
	.select-tab {
		margin: 0 24rpx;
		margin-bottom: 40rpx;
		border-radius: 40rpx 40rpx 0 0;
		background-color: white;
	}
	.head {
		background-color: #1D2550;
	}
	.head-info {
		color: #fff;
		margin-top: 26rpx;
		padding: 24rpx 28rpx;
		
		image {
			width: 120rpx;
			height: 120rpx;
			margin-right: 24rpx;
		}
		.title {
			font-weight: bold;
		}
		.t {
			color: #999;
			font-size: 24rpx;
		}
	}
</style>