onecric_h5/pages/Videos/index.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" :class="{'active': item.id == barId}" v-for="item in barList" :key="item.id" @click="changeBar(item.id)">{{ item.name }}</div>
			</div>
    </div>
    <div class="banner-box" :class="{'fadeInBtm': animationLoaded}" v-if="bannerInfo.id" @click="onTap(bannerInfo.id)">
			<img class="img" :src="bannerInfo.flie[0].img" alt="">
			<div class="info-box">
				<div class="title text-clamp2">{{ bannerInfo.title }}</div>
			</div>
			<img class="play" src="/static/image/live/play-icon.png" alt="">
		</div>
		<div class="type-box">
			<div class="type-item" v-for="item in list" :key="item.name">
				<div class="type">
					<div :class="{'fadeInRight': animationLoaded}">{{ item.name }}</div>
					<div class="see" :class="{'fadeInLeft': animationLoaded}" @click="$toUrl('./list?type=' + item.name)">
						<!-- See all -->
						{{ $t('video.lab1') }}
					</div>
				</div>
				<div class="list1" :class="{'fadeInTop': animationLoaded}">
					<div class="item" v-for="li in item.list" :key="li.id" @click="onTap(li.id, item.name)">
						<div class="img-box">
							<u--image :showLoading="true" :src="li.flie[0].img" 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-clamp2">{{ li.title }}</div>
							<div class="flex">
								<div class="live">
								{{ li.username }}
								</div>
								<div>{{ li.addtime }}</div>
							</div>
						</div>
					</div>
				</div>
			</div>
			<div class="type-item" v-if="otherList.length">
				<div class="type" :class="{'fadeInRight': animationLoaded}">
					<div>
						<!-- Others -->
						{{ $t('video.lab18') }}
					</div>
				</div>
				<div class="list1" :class="{'fadeInTop': animationLoaded}">
					<div class="item" v-for="item in otherList" :key="item.id" @click="onTap(item.id)">
						<div class="img-box">
							<u--image :showLoading="true" :src="item.flie[0].img" 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-clamp2">{{ item.title }}</div>
							<div class="flex">
								<div class="live">
								{{ item.username }}
								</div>
								<div>{{ item.addtime }}</div>
							</div>
						</div>
					</div>
				</div>
			</div>
			<div class="type-item" v-if="showsList.length">
				<div class="type" :class="{'fadeInRight': animationLoaded}">
					<div>
						<!-- Onecric Shows -->
						{{ $t('video.lab3') }}
					</div>
				</div>
				<div class="list1" :class="{'fadeInTop': animationLoaded}">
					<div class="item1" v-for="item in showsList" :key="item.id" @click="onTap(item.id)">
						<u--image :showLoading="true" :src="item.img" width="100%" height="120px">
							<template v-slot:loading>
								<image class="loading-list-img" src="/static/image/common/live-list-bg.png"></image>
							</template>
						</u--image>
					</div>
				</div>
			</div>
		</div>
		<div class="news-install">
      <install></install>
    </div>
	</view>
</template>

<script>
import animationMixin from '@/pages/mixins/animation'
	import { numberToK } from '@/utils/util'
	import install from '@/components/install/install.vue'
	export default {
  	mixins: [animationMixin],
		components: {
			install
		},
		data() {
			return {
				barList: [],
				barId: null,
				bannerInfo: {
					flie: []
				},
				list: [],
				otherList: [],
				showsList: []
			}
		},
		computed: {
			info() {
				return this.$store.state.info;
			},
			isLogin() {
				return this.$store.state.isLogin;
			},
		},
		onPullDownRefresh() {
			this.init();
		},
		onReady() {
			this.init()
		},
		methods: {
			init() {
				uni.$u.http.get('/api/Video/getCategory').then(res => {
					this.barList = res || []
					if (this.barList.length) {
						this.barId = this.barList[0].id
						this.getTournamentVideo()
					} else {
						this.barId = null
						uni.stopPullDownRefresh();
					}
				})
			},
			getTournamentVideo() {
				uni.$u.http.get('/api/Video/getTournamentVideo', {
					params: {
						id: this.barId
					}
				}).then(res => {
					this.bannerInfo = res.banner || {
						flie: []
					}
					this.otherList = res.others || []
					this.showsList = res.shows || []
					let list = res.list || []
					let list1 = []
					list.forEach((item) => {
						if (item.list && item.list.length > 0) {
							list1.push(item)
						}
					})
					this.list = list1
				}).finally(() => {
					uni.stopPullDownRefresh();
					if (this.animationLoaded) {
            return
          }
          this.animationLoaded = true
          this.$nextTick(() => {
            this.scrollFun()
          })
				})
			},
			onTap(id,tournament) {
				let url = './live?id=' + id
				if (tournament) {
					url += ('&tournament='+tournament)
				}
				this.$toUrl(url)
			},
			numberToK(v) {
				return numberToK(v)
			},
			changeBar(id) {
				if (this.barId == id) {
					return
				}
				this.barId = id
			},
			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;
		min-height: 70vh;
		.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;
				}
			}
			.item1 {
				border-radius: 4px;
				min-width: 106px;
				max-width: 106px;
				overflow: hidden;
				margin-right: 16px;
			}
			.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>