onecric_h5/pages/Live/compontent/OtherTab.vue

<!-- 足球 -->
<template>
	<view class="list">
		<view class="list-head" v-if="hotList.length != 0">
			<view class="list-title flex-start">
				<text>{{$t('live.anchor')}}</text>
			</view>
			<view class="list-list flex-start">
				<view class="list-list-li" v-for="(item,index) in hotList" :key="index">
					<image :src="item.avatar" mode=""></image>
					<view class="text-clamp">{{item.user_nickname}}</view>
				</view>
			</view>
		</view>
		<view class="detail-title flex-start">
			<image src="/static/image/live/detail01.png" mode=""></image>
			<text style="">{{$t('live.title')}}</text>
		</view>
		<view class="detail-video-list flex" style="flex-wrap: wrap;">
			<view class="detail-video-li" v-for="(item,index) in liveList" :key="index" @click="$toUrl(`./live-detail?id=${item.live_id}&ID=${item.id}`)">
				<div v-if="item.islive==0" class="zhezao">{{formatDate(item.starttime)}}</div>
        <div class="img_box">
					<u--image :showLoading="true" :src="(item.home_logo && item.away_logo) ? item.bottom : item.thumb" width="100%" height="176rpx">
						<template v-slot:loading>
							<image class="loading-list-img" src="/static/image/common/live-list-bg.png"></image>
						</template>
					</u--image>
					<image v-if="item.home_logo && item.away_logo" class="home_logo" :src="item.home_logo" mode="aspectFill" alt=""></image>
					<image v-if="item.home_logo && item.away_logo" class="away_logo" :src="item.away_logo" mode="aspectFill" alt=""></image>
				</div>
				<image v-if="item.islive==1" src="/static/image/live/live-icon.png" mode="" class="live-icon"></image>
				<view class="detail-video-content ">
					<view class="detail-video-title text-clamp2">
						{{item.title}}
					</view>
					<view class="detail-video-right flex">
						<image class="detail-video-content-logo" :src="item.avatar" mode="aspectFill"></image>
						<view class="detail-video-info flex">
							<text  class="text-clamp">{{item.user_nickname}}</text>
							<u-icon color="#999" name="eye" size="30" v-if="item.viewers && item.islive==1"></u-icon>
							<view v-if="item.islive==1">{{numberToK(item.viewers)}}</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<u-empty
			v-if="liveList.length == 0"
			mode="data"
			width="474"
			height="312"
			textSize="28"
			marginTop="100"
			:text="$t('common.nodata')"
			icon="/static/image/common/nodata.png"
		>
		</u-empty>
		<!-- <u-empty text="暂无直播"  v-if="liveList.total == 0" src="/static/images/competition/none.png" icon-size="400" mode="list"></u-empty> -->
	</view>
</template>

<script>
import { numberToK } from '@/utils/util'
	export default {
		data() {
			return {
				liveList: []
			}
		},
		computed: {
			hotList() {
				return this.liveList.filter(item => {
					return item.ishot == 1
				})
			}
		},
		mounted() {
		},
		methods:{
			getList(){
				// 正在直播
        //  type   1  无人直播 0 主播直播
        // islive  1  正在直播 0 未开始
        // ishot  1热门直播
				let data = {
          type: 1,
				}
				uni.$u.http.get('/api/live_streaming/getLiveListold', {params:data}).then(res => {
					this.liveList = res.data || []
				})
			},
			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';
				if (hours != 12) {
          hours = hours % 12;
        }
        if (hours == 12 && minutes) {
          hours = hours % 12;
          ampm = 'PM'
        }
        hours = hours < 10 ? "0" + hours : hours;
				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;
			},
		}
	}
</script>

<style lang="scss">
.zhezao {
		background: rgba(0, 0, 0, 0.5);
		position: absolute;
		top: 0;
		left: 0;
		z-index: 2;
		color: #fff;
		text-align: center;
		line-height: 1;
		padding: 10rpx 6rpx;
		border-radius: 6rpx;
		font-size: 16rpx;
		white-space: nowrap;
	}
	.live-icon {
		position: absolute;
		right: 10rpx;
		bottom: 160rpx;
		width: 60rpx;
		height: 32rpx;
	}
	.list {
		padding: 0 18rpx 140rpx;
		// padding-top: 6vh;
	}
	.list-head {
		overflow: hidden;
		margin-top: 20rpx;
		border-radius: 12rpx;
		background-color: white;
		.list-title {
			padding: 16rpx 12rpx;
			background: url(/static/image/news/hot-title.png)left top / 290rpx 100% no-repeat;
			// image {
			// 	width: 28rpx;
			// 	height: 32rpx;
			// 	margin-right: 12rpx;
			// }
			text {
				color: #fff;
				font-size: 28rpx;
			}
		}
	}
	.list-list-li{
		margin-right: 20rpx;
		image {
			width: 72rpx;
			height: 72rpx;
			margin: 0 auto;
			display: block;
			border-radius: 50%;
			margin-bottom: 10rpx;
		}
		view {
			max-width: 99%;
		}
	}
	.list-list {
		padding: 0 8rpx;
		margin-top: 24rpx;
		margin-bottom: 24rpx;
		width: 100%;
		overflow: auto;
	}
	.detail-title {
		margin-top: 32rpx;
		font-weight: bold;
		image {
			width: 40rpx;
			height: 40rpx;
			margin-right: 16rpx;
		}
		text {
			color: #333;
			font-size: 32rpx;
		}
	}
	.detail-video-li {
		overflow: hidden;
		margin-top: 20rpx;
		position: relative;
		width: calc(100% / 2 - 9rpx);
		border-radius: 12rpx;
		background-color: white;
		.loading-list-img {
			width: 100%;
			height: 176rpx;
			display: block;
		}
    .img_box {
      position: relative;
    }
    .home_logo, .away_logo {
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      width: 90rpx;
      height: 90rpx;
      border-radius: 50%;
    }
    .home_logo {
      left: 30rpx;
    }
    .away_logo {
      right: 30rpx;
    }
		.detail-video-content {
			padding: 16rpx;
		
			.detail-video-content-logo {
				width: 40rpx;
				height: 40rpx;
				border-radius: 50%;
				margin-right: 24rpx;
			}
		
			.detail-video-title {
				width: 99%;
				height: 80rpx;
				color: #333;
				font-size: 28rpx;
			}
		}
		
		.detail-video-info {
			font-size: 24rpx;
			flex: 1;
			image {
				width: 24rpx;
				height: 24rpx;
				margin-right: 6rpx;
			}
		
			text {
				flex: 1;
				width: 100rpx;
				color: #9193B4;
		
			}
		
			view {
				
				color: #999;
			}
		}
	}
	.detail-video-right {
		flex: 1;
		min-width: 100px;
	}
</style>