onecric_h5/pages/Live/list.vue

<template>
	<view class="">
		<view class="header flex-start">
			<image src="/static/image/common/grade-left.png" mode="" @click="$back()"></image>
			{{type == 0?$t('live.title1'):type == 1?$t('live.title2'):$t('live.title3')}}
		</view>
		<view class="detail-video-list">
			<view class="detail-video-li" v-for="(item,index) in liveList" :key="index" @click="historyLive(item)">
				<div class="img-box">
					<img class="bottom" :src="item.bottom" alt="">
					<div class="box">
						<div class="logo-box">
							<img class="logo" :src="item.home_logo" alt="">
							<img class="logo" :src="item.away_logo" alt="">
						</div>
						<div class="detail-box">
							<div class="title text-clamp">{{ item.Name }}</div>
							<div class="start_time">{{ formatDate(item.start_time) }}</div>
							<img class="icon1" src="/static/image/live/play-icon.png" alt="" />
						</div>
					</div>
				</div>
			</view>
		</view>
		<u-loadmore 
			:status="status"
			fontSize="28"
			:line="true"
			:loading-text="statusType.loadingText" 
			:loadmore-text="statusType.loadmoreText" 
			:nomore-text="statusType.nomoreText" 
		/>
	</view>
</template>

<script>
import { numberToK, parseTime } from '@/utils/util'
	export default {
		data() {
			return {
				type:0,
				liveList: [],
				statusType:{
					loadingText: this.$t('common.lab'),
					loadmoreText: this.$t('common.lab1'),
					nomoreText: this.$t('common.lab2')
				},
				status:'loadmore',
				pageNumber: 1
			}
		},
		onLoad(option) {
			this.type = option.type;
			this.getList()
		},
		// 触底触发
		onReachBottom() {
			if(this.status == 'loadmore'){
				this.pageNumber++;
				this.getList();
			}
			
		},
		// 下拉刷新
		onPullDownRefresh(){
			// 正常情况下接口返回应该很会很快。故意延迟调用，让用户有在刷新的体验感
			this.pageNumber = 1;
			this.status = 'loadmore';
			this.getList();
			
			setTimeout(res=>{
				uni.stopPullDownRefresh()
			},1500)
		},
		methods: {
			getList() {
				this.status= 'loading';
				this.getHistory()
			},
			getHistory() {
				uni.$u.http.get('/api/LivePlayBack/list', {
					params: {
						pageNumber: this.pageNumber
					}
				}).then(res => {
					if (this.pageNumber == 1) {
						this.liveList = res.list || []
					} else {
						this.liveList = this.liveList.concat(res.list || [])
					}
					this.status = this.liveList.length == res.total ? 'nomore' : 'loadmore'
				})
			},
			// 点击history
			historyLive(item) {
				uni.navigateTo({
					url:`/pages/Live/history-detail?id=${item.Uid}&ID=${item.live_id}&MediaUrl=${item.MediaUrl}`
				})
			},
			formatDate(value) {
				var date1 = this.$common.parseTime(value * 1000, '{y}/{m}/{d} {h}:{i}:{s}')
				var date = new Date(date1);
				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
				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 =  `${hours}:${minutes} ${ampm},${day} ${Month} `;
				return strTime;
			},
			numberToK(v) {
				return numberToK(v)
			},
			parseTime(t) {
				return parseTime(t, '{y}-{m}-{d} {h}:{i}')
			}
		},
	}
</script>

<style lang="scss">
	page {
		background-color: #F3F3F7 !important;
	}
	.header {
		color: #fff;
		font-size: 34rpx;
		padding: 18rpx 24rpx;
		position: sticky;
		top: 0;
		z-index: 10;
		background-color: #1D2550;
		image {
			width: 60rpx;
			height: 60rpx;
		}
	}
	.detail-video-list {
		flex-wrap: wrap;
		padding: 0 0 24rpx;
	}
	.detail-video-li {
		overflow: hidden;
		margin-top: 20rpx;
		background-color: white;
		.img-box {
			position: relative;
			min-height: 100rpx;
		}
		.box {
			position: absolute;
			left: 0;
			right: 0;
			bottom: 0;
			padding: 16px;
		}
		.logo-box {
			display: flex;
			align-items: center;
			justify-content: space-around;
			margin-bottom: 16px;
			.logo {
				height: 70rpx;
			}
		}
		.detail-box {
			position: relative;
			padding-right: 30px;
			.title {
				margin-bottom: 8px;
				font-weight: 500;
				font-size: 14px;
				color: #fff;
			}
			.start_time {
				font-weight: 400;
				font-size: 12px;
				color: #ACACAC;
			}
			.icon1 {
				position: absolute;
				right: 0;
				top: 50%;
				transform: translateY(-50%);
				width: 28px;
			}
		}
		.bottom {
			display: block;
			width: 100%;
		}
	}
</style>