onecric_h5/pages/Live/compontent/live-view.vue

<!-- 推荐 -->
<template>
	<view class="list">
		<view class="list-swiper">
			<view class=""
				style="background: rgb(221, 221, 221);width: 100%;height: 60vw;border-radius: 20rpx;"
				v-if="list.length == 0">

			</view>
			<swiper v-else class="swiper" circular :indicator-dots="false" @change="swiperChange" :autoplay="true" :interval="2000"
					:duration="500">
				<swiper-item v-for="(item, index) in list" :key="index" @click="swiperClick(item)">
					<div class="swiper-box">
						<u--image
							mode="scaleToFill"
							:showLoading="true"
							:src="item.img"
							width="100%"
							height="60vw"
						>
							<template v-slot:loading>
								<image class="loading-banner-img" src="/static/image/common/video-banner-bg.png"></image>
							</template>
						</u--image>
						<div class="info-box">
							<div class="title text-clamp">1st T20I, India v New Zealand</div>
							<div class="tip">2023 Men's T20I Series | JSCA International Stadium Complex, Ranchi</div>
							<div class="btn-box">
								<div class="btn">
									<img class="img" src="/static/image/live/polygon.png" alt="">
									Watch
								</div>
							</div>
						</div>
					</div>
				</swiper-item>
			</swiper>
			<div v-if="list.length > 1" class="swiper__indicator">
				<div class="line__bar">
					<div class="dots" :class="{'active': index == swiperCurrent}" v-for="(i, index) in list" :key="index">
					</div>
				</div>
			</div>
		</view>
		<div class="live-list-box" v-if="todayList.length > 0">
			<div class="flex">
				<div class="all flex" @click="toMatch">View all <img class="right" src="/static/image/live/right.png" alt=""></div>
			</div>
			<div class="mySwiper">
        <div class="swiper-wrapper">
          <div class="swiper-slide" v-for="(item, index) in todayList" :key="index">
            <div class="today-box">
							<div class="box1">
								Match 5, South Africa Women 2023 Tri-Series | Buffalo Park, East London
								<img class="right" src="/static/image/live/right.png" alt="">
							</div>
							<div class="box2">
								at 28 January, 19:00 Local ( 22:00 PKT ) - Buffalo Park, East London, South Africa
							</div>
							<u-row>
								<u-col span="6">
									<view class="bg-purple">
										<img class="logo" src="https://cdn.sportmonks.com/images/cricket/teams/24/1976.png" alt=""/>
										<div class="text-clamp">{{ item.home_name }}</div>
									</view>
								</u-col>
								<u-col span="6">
									<view class="bg-purple bg-purple1 text-clamp">
										<img class="logo" src="https://cdn.sportmonks.com/images/cricket/teams/24/1976.png" alt=""/>
										<div class="text-clamp">{{ item.away_name }}</div>
									</view>
								</u-col>
							</u-row>
						</div>
          </div>
        </div>
      </div>
		</div>
		<div class="anchor-list">
			<div class="item">
				<u--image
					:showLoading="true"
					:src="'/static/image/match/teams_avatar_ico@2x.png'"
					width="62px"
					height="62px"
					shape="circle"
				></u--image>
			</div>
			<div class="item">
				<u--image
					:showLoading="true"
					:src="'/static/image/match/teams_avatar_ico@2x.png'"
					width="62px"
					height="62px"
					shape="circle"
				></u--image>
			</div>
			<div class="item">
				<u--image
					:showLoading="true"
					:src="'/static/image/match/teams_avatar_ico@2x.png'"
					width="62px"
					height="62px"
					shape="circle"
				></u--image>
			</div>
			<div class="item">
				<u--image
					:showLoading="true"
					:src="'/static/image/match/teams_avatar_ico@2x.png'"
					width="62px"
					height="62px"
					shape="circle"
				></u--image>
			</div>
			<div class="item">
				<u--image
					:showLoading="true"
					:src="'/static/image/match/teams_avatar_ico@2x.png'"
					width="62px"
					height="62px"
					shape="circle"
				></u--image>
			</div>
			<div class="item">
				<u--image
					:showLoading="true"
					:src="'/static/image/match/teams_avatar_ico@2x.png'"
					width="62px"
					height="62px"
					shape="circle"
				></u--image>
			</div>
		</div>
		<div class="type-box">
			<div class="type-item">
				<div class="type" @click="toMatch">
					<div>T20s</div>
					<div class="see">See all</div>
				</div>
				<div class="list1">
					<div class="item">
						<div class="img-box">
							<u--image :showLoading="true" src="https://api.onecric.tv/upload/WechatIMG443.jpg" width="100%" height="105px">
								<template v-slot:loading>
									<image class="loading-list-img" src="/static/image/common/live-list-bg.png"></image>
								</template>
							</u--image>
							<img class="play" src="/static/image/live/play-icon.png" alt="">
						</div>
						<div class="body">
							<div class="title text-clamp">India v New Zealand</div>
							<div class="tip">2023 Men's T20I Series | 1st T20I</div>
							<div class="flex">
								<div class="live">Live</div>
								<div>JSCA Stadium Complex</div>
							</div>
						</div>
					</div>
					<div class="item">
						<div class="img-box">
							<u--image :showLoading="true" src="https://qiniu.onecric.tv/moren.png" width="100%" height="105px">
								<template v-slot:loading>
									<image class="loading-list-img" src="/static/image/common/live-list-bg.png"></image>
								</template>
							</u--image>
							<img class="play" src="/static/image/live/play-icon.png" alt="">
						</div>
						<div class="body">
							<div class="title text-clamp">India v New Zealand</div>
							<div class="tip">2023 Men's T20I Series | 1st T20I</div>
							<div class="flex">
								<div class="live">Live</div>
								<div>JSCA Stadium Complex</div>
							</div>
						</div>
					</div>
				</div>
			</div>
			<div class="type-item">
				<div class="type">
					<div>T20s</div>
					<div class="see">See all</div>
				</div>
				<div class="list1">
					<div class="item">
						<div class="img-box">
							<u--image :showLoading="true" src="https://api.onecric.tv/upload/WechatIMG443.jpg" width="100%" height="105px">
								<template v-slot:loading>
									<image class="loading-list-img" src="/static/image/common/live-list-bg.png"></image>
								</template>
							</u--image>
							<img class="play" src="/static/image/live/play-icon.png" alt="">
						</div>
						<div class="body">
							<div class="title text-clamp">India v New Zealand</div>
							<div class="tip">2023 Men's T20I Series | 1st T20I</div>
							<div class="flex">
								<div class="live">Live</div>
								<div>JSCA Stadium Complex</div>
							</div>
						</div>
					</div>
					<div class="item">
						<div class="img-box">
							<u--image :showLoading="true" src="https://api.onecric.tv/upload/WechatIMG443.jpg" width="100%" height="105px">
								<template v-slot:loading>
									<image class="loading-list-img" src="/static/image/common/live-list-bg.png"></image>
								</template>
							</u--image>
							<img class="play" src="/static/image/live/play-icon.png" alt="">
						</div>
						<div class="body">
							<div class="title text-clamp">India v New Zealand</div>
							<div class="tip">2023 Men's T20I Series | 1st T20I</div>
							<div class="flex">
								<div class="live">Live</div>
								<div>JSCA Stadium Complex</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
		<u-toast ref="uToast"></u-toast>
	</view>
</template>

<script>
import { numberToK, parseTime } from '@/utils/util'
	export default {
		components: {
		},
		data() {
			return {
				liveList: {
					live_commentary: {},
					nolive_broadcast: {},
					robot: {}
				},
				todayList: [],
				comingList: [],
				live_commentary: [],
				nolive_broadcast: [],
				robot: [],
				bannerList: [],
				robotLength: 0,
				swiperCurrent: 0,
				swiper: null
			}
		},
		props: {
			list: {
				type: Array,
				default: []
			}
		},
		mounted() {
			this.getList()
		},
		methods: {
			swiperClick(item) {
				if (item.anchor_id) {
					uni.navigateTo({
						url: `./live-detail?id=${item.anchor_id}&ID=${item.id}`
					})
					return
				}
				if (item.param_id) {
					uni.navigateTo({
						url: '/pages/Match/match-detail?id=' + item.param_id
					})
					return
				}
			},
			// 点击history
			historyLive(item) {
				// console.error(item)
				// return
				uni.navigateTo({
					url:`/pages/Live/history-detail?id=${item.Uid}&ID=${item.live_id}&MediaUrl=${item.MediaUrl}`
				})
			},
			/* 跳转 */
			toUrl(item) {
				console.log(item);
				/* item.type == 1?'basketball':'football */
				if (item.type == 1) {
					uni.navigateTo({
						url: '../competition/basketballDetail?id=' + item.id
					})
				} else {
					uni.navigateTo({
						url: '../competition/detail?id=' + item.sourceid
					})
				}
			},
			toUrlLive(item) {
				gtag('event', 'live_H5', {
					'live_H5': '0'
				});
				uni.navigateTo({
					url: `./live-detail?id=${item.live_id}&ID=${item.id}`
				})
			},
			getList() {
				uni.$u.http.get('/api/live_streaming/getLiveList', {
					params: 2
				}).then(res => {
					this.live_commentary = res.data || []
				})
				uni.$u.http.get('/api/live_streaming/getLiveListNew', {
					params: {
						timeZone: this.$store.state.timeZone
					}
				}).then(res => {
					this.todayList = res.toay || [];
					this.comingList = res.upcoming || [];
					this.$nextTick(() => {
            this.swiper && this.swiper.destroy();
						this.swiper = new Swiper(".mySwiper", {
							loop: true,
							spaceBetween: 16,
              autoplay: true,
            });
					})
				})
				uni.$u.http.get('/api/LivePlayBack/list', {}).then(res => {
					if (res.list) {
						this.robotLength = res.list.length
						this.robot = res.list.slice(0, 6)
					} else {
						this.robot = []
					}
				})
			},
			toMatch() {
      	sessionStorage.setItem('match_live', JSON.stringify(2))
				uni.switchTab({
					url: '/pages/Match/Match'
				})
			},
			swiperChange(e) {
				this.swiperCurrent = e.detail.current
			},
			numberToK(v) {
				return numberToK(v)
			},
			formatDate(value) {
				var date1 = this.$common.parseTime(value * 1000, '{y}/{m}/{d} {h}:{i}:{s}')
				var date = new Date(date1 + ' UTC+5:30');
				var weekNum = new Date().getDay()
				let week = ""
				switch (weekNum) {
					case 0:
						week = "Sun";
						break;
					case 1:
						week = "Mon";
						break;
					case 2:
						week = "Tue";
						break;
					case 3:
						week = "Wed";
						break;
					case 4:
						week = "Thu";
						break;
					case 5:
						week = "Fri";
						break;
					case 6:
						week = "Sat";
						break;
				}
				var MonthNum = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1)
				let Month = ''
				switch (MonthNum) {
					case 1:
						Month = "Jan";
						break;
					case 2:
						Month = "Feb";
						break;
					case 3:
						Month = "Mar";
						break;
					case 4:
						Month = "Apr";
						break;
					case 5:
						Month = "May";
						break;
					case 6:
						Month = "Jun";
						break;
					case 7:
						Month = "Jul";
						break;
					case 8:
						Month = "Aug";
						break;
					case 9:
						Month = "Sept";
						break;
					case 10:
						Month = "Oct";
						break;
					case 11:
						Month = "Nov";
						break;
					case 12:
						Month = "Dec";
						break;
				}
				let day = (date.getDate() < 10 ? '0' + (date.getDate()) : date.getDate())
				// this.week = week
				// this.month = Month
				// this.day = day
				var hours = date.getHours();
				var minutes = date.getMinutes();
				var ampm = hours >= 12 ? 'PM' : 'AM';
				hours = hours % 12;
				hours = hours ? hours : 12; // the hour '0' should be '12'
				minutes = minutes < 10 ? '0' + minutes : minutes;
				// var strTime = week + ',' + day + Month + '.' + 'Watch live in' + hours + ':' + minutes + ' ' + ampm;
				var strTime = this.$t('match.lab92') + ' ' + hours + ':' + minutes + ' ' + ampm;
				return strTime;
			},
			parseTime(t) {
				return parseTime(t, '{m}-{d} {h}:{i}')
			},
			parseTime1(t) {
				return parseTime(t, '{y}-{m}-{d} {h}:{i}')
			}
		}
	}
</script>

<style lang="scss">
	.list {
		padding-bottom: 140rpx;
	}
	.list-swiper {
		padding: 0;
		position: relative;
		.swiper {
			height: 60vw;
		}
		.loading-banner-img {
			width: 100%;
			height: 60vw;
		}
		.swiper-box {
			position: relative;
		}
		.info-box {
			position: absolute;
			top: 0;
			left: 0;
			right: 0;
			bottom: 0;
			background: linear-gradient(180deg, rgba(16, 4, 74, 0) 0%, #080031 100%);
			display: flex;
			flex-direction: column;
			justify-content: flex-end;
			padding: 26rpx 16px;
			.title {
				color: #fff;
				font-weight: 600;
				font-size: 26px;
				margin-bottom: 16px;
			}
			.tip {
				font-weight: 500;
				font-size: 16px;
				color: #C7C7C7;
				margin-bottom: 16px;
			}
			.btn-box {
				height: 34px;
				.btn {
					height: 34px;
					width: 92px;
					background: linear-gradient(94.25deg, #FF3300 -3.08%, #D22A00 100%);
					border-radius: 4px;
					display: flex;
					align-items: center;
					justify-content: center;
					color: #fff;
					font-weight: 500;
					font-size: 14px;
				}
				.img {
					width: 14px;
					margin-right: 6px;
				}
			}
		}
		.swiper__indicator {
			position: absolute;
			right: 16px;
			bottom: 39rpx;
			z-index: 2;
			.line__bar {
				display: flex;
				align-items: center;
			}
			.dots {
				width: 8px;
				height: 8px;
				border: 1px solid #D52B01;
				border-radius: 50%;
				& + .dots {
					margin-left: 8px;
				}
				&.active {
					background-color: #D52B01;
				}
			}
		}
	}
	.live-list-box {
		padding-top: 16px;
		.all {
			font-weight: 500;
			font-size: 14px;
			color: #242424;
			padding: 0 16px;
			.right {
				margin-left: 8px;
				width: 9px;
			}
		}
		.mySwiper {
			overflow: hidden;
			padding: 12px 16px 16px;
		}
		.today-box {
			background: #FFFFFF;
			box-shadow: 0px 4px 26px -4px rgba(78, 78, 78, 0.25);
			border-radius: 6px;
			padding: 24px 24px 20px;
			.box1 {
				padding-right: 25px;
				position: relative;
				font-weight: 500;
				font-size: 14px;
				color: #242424;
				margin-bottom: 16px;
				.right {
					width: 9px;
					position: absolute;
					right: 0;
					top: 50%;
					transform: translateY(-50%);
				}
			}
			.box2 {
				font-weight: 600;
				font-size: 12px;
				color: #4E4E4E;
				margin-bottom: 16px;
			}
			.bg-purple {
				font-weight: 600;
				font-size: 18px;
				color: #242424;
				display: flex;
				align-items: center;
				.logo {
					width: 30px;
					margin-right: 16rpx;
				}
			}
			.bg-purple1 {
				padding-left: 10px;
				justify-content: flex-end;
			}
		}
	}
	.anchor-list {
		padding: 10px 0 10px 16px;
		overflow: auto;
		display: flex;
		align-items: center;
		flex-wrap: nowrap;
		.item {
			margin-right: 12px;
			padding: 6px;
			border-radius: 50%;
			border: 2px solid #CC2900;
		}
	}
	.type-box {
		padding: 0 0 16px 8px;
		.type-item {
			margin-bottom: 10px;
			.type {
				padding: 16px 8px 10px 0;
				display: flex;
				align-items: center;
				justify-content: space-between;
				font-weight: 600;
				font-size: 18px;
				line-height: 1;
				color: #242424;
				.see {
					font-weight: 400;
					font-size: 14px;
					color: #4E4E4E;
				}
			}
		}
		.list1 {
			display: flex;
			flex-wrap: nowrap;
			overflow: auto;
			.item {
				background: #FFFFFF;
				box-shadow: 0px 4px 26px rgba(174, 174, 174, 0.16);
				border-radius: 4px;
				min-width: 214px;
				max-width: 214px;
				overflow: hidden;
				margin-right: 16px;
				.img-box {
					position: relative;
					.play {
						position: absolute;
						top: 50%;
						left: 50%;
						transform: translate(-50%, -50%);
						width: 46px;
					}
				}
				.loading-list-img {
					width: 100%;
					height: 105px;
				}
			}
			.body {
				padding: 12px 10px;
				.title {
					font-weight: 500;
					font-size: 14px;
					color: #242424;
					margin-bottom: 8px;
				}
				.tip {
					font-weight: 400;
					font-size: 12px;
					color: #4E4E4E;
					margin-bottom: 26px;
				}
				.flex {
					justify-content: space-between;
					font-weight: 400;
					font-size: 10px;
					color: #4E4E4E;
					.live {
						font-weight: 500;
						color: #FF3300;
					}
				}
			}
		}
	}
</style>