onecric_h5/pages/Match/match-detail.vue

<template>
	<view class="detail">
		<view class="detail-head" v-if="dispalyTop">
			<div class="header">
				<img class="logo" src="/static/logo_big.png" alt="">
				<div class="flex">
					<img class="msg" src="/static/image/match/msg-icon.png" alt="">
					<u--image
          	class="border"
						:showLoading="true"
						:src="info.avatar || '/static/image/match/teams_avatar_ico@2x.png'"
          	@click="go('/pages/Match/member/usermanger', true)"
						width="24px"
						height="24px"
						shape="circle"
					></u--image>
				</div>
			</div>
			<div class="title-box">
				<div class="flex" @click="stepBack">
          <u-icon name="arrow-left" color="#ffffff" size="16px" bold></u-icon>
          <!-- Live matches -->
					{{ tournament_name }}
        </div>
			</div>
			<view class="nav">
				<view class="nav-name flex font32">
					<text>{{match_detail.home_name}}</text>
					<text>{{match_detail.away_name}}</text>
				</view>
				<view class="nav-score flex">
					<view class="nav-score-li flex-start">
						<image :src="match_detail.home_logo || '/static/image/common/team.png'" mode="aspectFit"></image>
						<view class="font36">{{match_detail.home_display_score}}</view>
						<text class="font24">({{match_detail.home_display_overs}})</text>
					</view>
					<image  v-if="match_detail.status == 2" src="/static/image/match/matches_detail_vs_ico@2x.png" class="nav-score-center" mode=""></image>
					<view class="nav-score" style="text-align: center;" v-if="match_detail.status == 0">
						{{ $t('match.lab76') }}<text style="color: #ff4100;">{{match_detail.live_time}}</text>
					</view>
					<view class="nav-score-li flex-start">
						<text class="font24">({{match_detail.away_display_overs}})</text>
						<view class="font36">{{match_detail.away_display_score}}</view>
						<image style="margin: 0;margin-left: 16rpx;" :src="match_detail.away_logo || '/static/image/common/team.png'" mode="aspectFit"></image>
					</view>
				</view>
				
				<!-- <view class="nav-score" style="text-align: center;" v-if="match_detail.status == 1">
					456456464
				</view> -->
				
				<!-- <view class="nav-score" style="text-align: center;" v-if="match_detail.status == 2">
					match starts in <text style="color: #ff4100;">{{match_detail.live_time}}</text>
				</view> -->
				
				<view class="nav-time font28">
					{{match_detail.match_result}}
				</view>
				<!-- <view class="nav-tab flex" v-if="match_detail.status==1">
					<view class="" @click="liveStatusTop()">
						Live animation
					{{ $t('match.lab77') }}
					</view>
					<text>|</text>
					<view class="" @click="liveStatusChange">
						Live video
					{{ $t('match.lab78') }}
					</view>
				</view>
				<view class="width150 nav-tab "   v-else>
					<view class="text-center" @click="liveStatusTop()">
						Live animation
					{{ $t('match.lab77') }}
					</view>
				
				</view> -->
			</view>
		</view>
		<view class="">
			<view style="height: 300px;overflow: hidden;" v-if="liveStatus == 1">
				<iframe style="width: 100%;" height="300" :src="match_detail.live_path" frameborder="0"></iframe>
			</view>
			<view style="height: 306px;overflow: hidden;" v-if="liveStatus == 2">
				<iframe style="width: 100%;" height="306" :src="match_detail.live_url" frameborder="0"></iframe>
			</view>
		</view>

		<view class="detail-tab">
			<u-tabs
			:list="list1"
			:current="Index"
			lineWidth="80rpx"
			@click="changeTab" 
			lineHeight="4" 
			:scrollable="true"
			lineColor="#DC3C23"
			:activeStyle="{color:'#DC3C23',fontSize:'32rpx'}" 
			:inactiveStyle="{color:'#333',fontSize:'32rpx'}"
			></u-tabs>
		</view>
		<!-- <u-sticky offset-top="0"> -->
			
		<!-- </u-sticky> -->
		<view class="content">
			<Fantasy v-if="Index == 0" :info="match_detail" ref="fantasy"></Fantasy>
			<Info v-if="Index == 1" :matchDetail="match_detail" ref="info" />
			<Live v-if="Index == 2" ref="live" />
			<Scorecard v-if="Index == 3" :list="competition_list" :matchDetail="match_detail" ref="Scorecard" />
			<Updates v-if="(Index == 4 && updateList.length)" :list="updateList" ref="Updates" />
			<Squad v-if="(Index == 5 || (Index == 4 && updateList.length == 0))" :matchDetail="match_detail" ref="squad"/>
		</view>
	</view>
</template>

<script>
	import Fantasy from './compontent/fantasy.vue';
	import Info from './compontent/Info.vue';
	import Live from './compontent/live.vue';
	import Scorecard from './compontent/Scorecard.vue';
	import Updates from './compontent/Updates.vue';
	import Squad from './compontent/Squad.vue';
	
	export default {
		components:{Fantasy,Info,Live,Scorecard,Updates,Squad},
		data() {
			return {
				Index:0,
				parent:{},
				liveStatus:0,
				match_detail:{},
				competition_list: [],
				dispalyTop:true,
				updateList: [],
				list1: [
					{
						name: this.$t('match.lab31'),
					},
					{
						name: this.$t('live.detailTab4'),
					},
					{
						name: this.$t('live.detailTab3'),
					},
					// {
					// 	name: 'highlights',
					// },
					{
						name: this.$t('live.detailTab5'),
					},
					// {
					// 	name: this.$t('match.lab79'),
					// },
					{
						name:this.$t('live.detailTab6')
					}
				],
				time1: null,
				tournament_name: ''
			}
		},
		computed: {
			info() {
				return this.$store.state.info;
			},
			isLogin() {
				return this.$store.state.isLogin;
			},
			system() {
				return this.$store.state.system;
			},
		},
		onLoad(option) {
			this.parent = option;
			if (this.parent.live == 1) {
				this.Index = 2
			}
			this.cricket_match_detail()
		},
		onPullDownRefresh() {
			// this.page = 1
			this.changeTab({index:this.Index})
			setTimeout(res=>{
				uni.stopPullDownRefresh()
			},1500)
		},
		onUnload() {
			this.time1 && clearInterval(this.time1);
		},
		methods: {
			// 显示隐藏顶部，并更改状态
			liveStatusTop(){
				this.liveStatus = 1
				this.dispalyTop = false
			},
			leftClick() {
				if(this.liveStatus == 1 || this.liveStatus == 2){
					this.liveStatus = 0
				}else {
					this.$back()
				}
			},
			changeTab(e) {
				this.Index = e.index
				if(e.index == 0) {
					this.$nextTick(res=>{
						// this.$refs.fantasy.cricket_tournament_standings(this.match_detail.tournament_id);
						this.$refs.fantasy.cricket_match_detail_fantasy(this.match_detail.match_id);
					})
				}else if(e.index == 1) {
					this.$nextTick(res=>{
						this.$refs.info.cricket_tournament_standings(this.match_detail.tournament_id);
						this.$refs.info.cricket_match_detail_info(this.parent.id);
					})
				}else if(e.index == 2) {
					this.$nextTick(res=>{
						this.$refs.live.cricket_match_detail_live(this.match_detail.match_id);
					})
				}else if(e.index == 4) {
					if (this.updateList.len == 0) {
						this.$refs.squad.cricket_match_detail_squad(this.match_detail);
					}
					// this.$nextTick(res=>{
					// 	this.$refs.Updates.getList(this.match_detail.match_id,0);
					// })
				}else if(e.index == 5) {
					this.$nextTick(res=>{
						this.$refs.squad.cricket_match_detail_squad(this.match_detail);
					})
				}
			},
			/* 获取详情 */
			cricket_match_detail() {
				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',{match_id:this.parent.id,timezone:timeZoneId}).then(res=>{
					this.match_detail = res;
					this.competition_list = res.competition_list || []
					this.getUpdate(this.match_detail.match_id,0)
					this.cricket_match_detail_info(this.match_detail.match_id)
					this.changeTab({index:this.Index})
					if (this.parent.animation) {
						this.liveStatusTop()
					}
				}).catch(res=>{})
			},
			liveStatusChange() {
				this.liveStatus = 2;
				// let watchingOutSign = localStorage.getItem('watchingOutSign')
				// if (watchingOutSign && this.isLogin != 1) {
				// 	this.$r.loginBox()
				// 	this.$store.state.loginShowSign = true
				// 	this.$store.state.loginShowCloseSign = false;
				// } else {
					this.getIsLogin()
				// }
			},
			/* 判断是否登录 未登录情况下只能停留3分钟 180秒 */
			getIsLogin() {
				let that = this;
				if (this.isLogin == 1) return;
				uni.$u.http.get('/api/universal/getHot', {}).then(res => {
					this.$store.state.system = res;
					if (!this.system.login_remind || Number(this.system.login_remind) > 5000) return;
						this.time1 = setTimeout((res) => {
							if (this.isLogin == 1) {
								return
							}
							localStorage.setItem('watchingOutSign', true)
							this.$toast(this.$t('live.lab40'));
							setTimeout((res1) => {
								this.$toUrl('/pages/login/login')
							}, 1500);
						}, this.system.login_remind * 60000);
				})
			},
			stepBack() {
				uni.switchTab({
					url: '/pages/Match/Match'
				})
			},
			/* 详情 */
			cricket_match_detail_info(id) {
				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:id,timezone:timeZoneId}).then(res=>{
					this.tournament_name = res.tournament_name;
				}).catch(res=>{})
			},
			go(url, login) {
				if (this.isLogin == 2 && login) {
					this.$toUrl('/pages/login/login')
					return
				}
				this.$toUrl(url)
			},
			getUpdate(id, type) {
				uni.$u.http.post('/api/Cricket/cricket_match_detail_updates',{id:id,type:type}).then(res=>{
					this.updateList = (res || []);
					if (this.updateList.length) {
						this.list1 = [
								{
									name: this.$t('match.lab31'),
								},
								{
									name: this.$t('live.detailTab4'),
								},
								{
									name: this.$t('live.detailTab3'),
								},
								// {
								// 	name: 'highlights',
								// },
								{
									name: this.$t('live.detailTab5'),
								},
								{
									name: this.$t('match.lab79'),
								},
								{
									name:this.$t('live.detailTab6')
								}
							]
					}
				}).catch(res=>{})
			}
		},
	}
</script>

<style lang="scss">
	.detail-head {
		position: sticky;
		top: 0;
		z-index: 9;
		overflow: hidden;
		background: url(/static/image/match/schedule_pulldown_ico@2x.png) center top / 100% 100% no-repeat;
		.header {
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 8rpx 16px 16rpx;
			background-color: #10044A;
			.msg {
				width: 19px;
				margin-right: 16px;
			}
			.border {
				border: 1px solid #CC2900;
				border-radius: 50%;
			}
		}
		.logo {
			height: 24px;
		}
		.title-box {
			height: 40px;
			background-color: #262E4A;
			padding: 0 16px;
			display: flex;
			align-items: center;
			color: #fff;
			font-weight: 500;
			font-size: 16px;
			.u-icon {
				margin-right: 10px;
			}
		}
		.nav {
			color: #fff;
			padding: 0 52rpx;
		}
		.nav-name  {
			margin-top: 54rpx;
			text {
				max-width: 30%;
				text-align: center;
			}
		}
		.nav-score-center {
			width: 48rpx;
			height: 48rpx;
			margin: 0 54rpx;
		}
		.nav-score-li {
			image {
				width: 80rpx;
				height: 80rpx;
				margin-right: 16rpx;
			}
			text {
				// margin-top: 20rpx;
				// align-self: flex-end;
			}
		}
		.nav-time {
			margin-top: 34rpx;
			margin-bottom: 102rpx;
			text-align: center;
		}
		.width150{
			width: 290rpx  !important;
		}
		.nav-tab {
			width: 506rpx;
			margin: 24rpx auto;
			padding: 6rpx 6rpx;
			border-radius: 40rpx;
			background-color:  rgba(0,0,0,0.5);
		}
		

	}
	.detail-tab {
		z-index: 999;
		background-color: $color6;
	}
</style>