onecric_h5/pages/Videos/index copy.vue

<template>
	<view class="container">
		<div class="top">
			<div class="header">
				<img class="logo" src="/static/logo_big.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 class="title-box">
				<!-- Videos -->
				{{ $t('video.lab') }}
			</div>
			<div class="bar-list">
				<div class="item active">T20 match</div>
				<div class="item">india tour of new zeland</div>
				<div class="item">india tour of new zeland</div>
			</div>
    </div>
    <div class="banner-box">
			<img class="img" src="http://qiniu.onecric.tv/FvPGVpHDcUOL9UfPjLiEw_Kl4AhR.jpg" alt="">
			<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>
			<img class="play" src="/static/image/live/play-icon.png" alt="">
		</div>
		<div class="type-box">
			<div class="type-item">
				<div class="type" @click="$toUrl('./list?type=' + 'T20s')">
					<div>T20s</div>
					<div class="see">
						<!-- See all -->
				{{ $t('video.lab1') }}
					</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 -->
								{{ $t('video.lab2') }}
								</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 -->
								{{ $t('video.lab2') }}
								</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 -->
				{{ $t('video.lab1') }}
					</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 -->
								{{ $t('video.lab2') }}
								</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 -->
								{{ $t('video.lab2') }}
								</div>
								<div>JSCA Stadium Complex</div>
							</div>
						</div>
					</div>
				</div>
			</div>
			<div class="type-item">
				<div class="type">
					<div>
						<!-- Onecric Shows -->
				{{ $t('video.lab3') }}
					</div>
				</div>
				<div class="list1">
					
				</div>
			</div>
		</div>
		<u-empty v-if="obj.total == 0" mode="data" width="474" height="312" textSize="28" marginTop="100"
			:text="$t('common.nodata')" icon="/static/image/common/nodata.png">
		</u-empty>
		<div class="news-install">
      <install></install>
    </div>
	</view>
</template>

<script>
	import { numberToK } from '@/utils/util'
	import install from '@/components/install/install.vue'
	export default {
		components: {
			install
		},
		data() {
			return {
				// 初始化左右盒子
				leftList: [],
				rightList: [],
				// 初始化左右盒子高度
				leftH: 0,
				rightH: 0,
				obj: {
					total: 1
				},
				page: 1,
				status: 'loadmore'
			}
		},
		computed: {
			info() {
				return this.$store.state.info;
			},
			isLogin() {
				return this.$store.state.isLogin;
			},
		},
		onReady() {
			this.getList();
		},
		methods: {
			onTap(data,index) {
				let videoList_index =Number(index)
				this.$toUrl('./live?id=' + data.id+'&index='+videoList_index)
			},
			toUrl() {
				this.$toUrl('./publish')
			},
			// 获取数据
			getList() {
				// 设置状态为加载中
				this.status = 'loading';
				uni.$u.http.get('/api/Video/getList', {
					params: {
						page: this.page,
						type: 1
					}
				}).then(res => {
					// 获取到的数据，请注意数据结构
					// 第一页数据执行以下代码
					if (this.page == 1) {
						// 关闭下拉
						this.leftList=res.data
						// uni.stopPullDownRefresh();
						// 设置组件状态为 重置，可供下拉刷新这类需要重置列表功能时使用
					} else {
						this.leftList = this.leftList.concat(res.data || [])
					}
					this.obj = res;
					this.setList(res)
				}).catch(res => {})
			},
			numberToK(v) {
				return numberToK(v)
			},
			setList(obj) {
				let that = this;
				// obj.data.forEach(res => {
				// 	// 获取图片宽高
				// 	// console.log(res.flie[0].img);
				// 	uni.getImageInfo({
				// 		src: res.flie[0].img,
				// 		success: (image) => {
				// 			// console.log(res.src)
				// 			// 计算图片渲染高度
				// 			let showH = (50 * image.height) / image.width
				// 			// 判断左右盒子高度
				// 			if (that.leftH <= that.rightH) {
				// 				that.leftList.push(res)
				// 				that.leftH += showH
				// 			} else {
				// 				that.rightList.push(res)
				// 				that.rightH += showH
				// 			}
				// 		}
				// 	})
				// })
				let total = this.leftList.length + this.rightList.length;
				if (obj.total > total) {
					this.status = 'loadmore'
				} else {
					this.status = 'No more data'
				}
			},
			go(url, login) {
				if (this.isLogin == 2 && login) {
					this.$toUrl('/pages/login/login')
					return
				}
				this.$toUrl(url)
			},
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #f3f3f3;
	}
	.container {
		padding-bottom: var(--window-bottom);
	}
	.top {
		position: sticky;
		top: 0;
		z-index: 999;
		.header {
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 8rpx 16px 16rpx;
			background-color: #10044A;
		}
		.logo {
			height: 24px;
		}
		.border {
				border: 1px solid #CC2900;
				border-radius: 50%;
			}
		.title-box {
			height: 40px;
			background-color: #262E4A;
			padding: 0 16px;
			display: flex;
			align-items: center;
			color: #fff;
			font-weight: 500;
			font-size: 16px;
		}
		.bar-list {
			display: flex;
			align-items: center;
			flex-wrap: nowrap;
			overflow: auto;
			background-color: #fff;
			.item {
				padding: 12px 16px;
				font-weight: 500;
				font-size: 14px;
				color: #000000;
				white-space: nowrap;
				border-bottom: 2px solid transparent;
				&.active {
					border-color: #FF3300;
				}
			}
		}
	}
	.banner-box {
		position: relative;
		.img {
			width: 100%;
			display: block;
		}
		.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;
			}
		}
		.play {
			position: absolute;
			top: 50%;
			left: 50%;
			transform: translate(-50%, -50%);
			width: 46px;
		}
	}
	.type-box {
		padding: 0 0 16px 8px;
		.type-item {
			.type {
				padding: 26px 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;
					}
				}
			}
		}
	}
	.news-install {
		position: sticky;
		bottom: var(--window-bottom);
		z-index: 200;
	}
</style>