sport_bigScren/pages/schedule/index.vue

<template>
	<view class="home">
		<view class="header">
			<view class="logo">
				<image :src="logo_img"></image>
			</view>
			<view class="info">
				<view class="a">劳拉之星{{"|"+saiName}}</view>
				<view class="b">{{subName}}</view>
			</view>
		</view>
		<view class="body">
			<view class="list">
				<view class="item" v-for="(a,i) in slist" :key="i">
					<view class="a">{{a.time}}</view>
					<view class="b">{{a.name}}</view>
					<view class="c">{{a.type_name}}</view>
				</view>
			</view>
			<view class="items">
				<image src="@/static/bottom.png"></image>
			</view>
		</view>
	</view>
</template>

<script>
	const app = getApp()
	let ptimer = null;
	export default {
		data() {
			return {
				slist: [],
				saiName: "",
				alist: [],
				pageTotal: 0,
				pageNum: 1,
				logo_img: ""
			}
		},
		onLoad() {
			this.logo_img = uni.getStorageSync("logo_img")
			this.saiName = uni.getStorageSync("saiName");
			var obj = uni.getStorageSync("slist")?uni.getStorageSync("slist"):{};
			this.alist = obj.list
			this.initfenye();
			this.subName = obj.name+'('+obj.time+obj.type_name+')'+" 日程";
			
			if(app.globalData.socketWBObj){
				app.globalData.socketWBObj.closeSocket();
			}
			app.globalData.socketWBObj = new this.$websocketUtils(1);
			//监听获取消息
			 uni.$on('socketMessage', res=>{
				 if(res){
					var { cmd, data } = res.data !='链接成功'?JSON.parse(res.data):{};
					//成绩
					if(cmd == 'score'){
						uni.setStorageSync("slist",data)
						uni.navigateTo({
							url: '/pages/score/index'
						})
					}else if(cmd == 'declare') {//宣告
						uni.setStorageSync("slist",data)
						uni.navigateTo({
							url: '/pages/declare/index'
						})
					}else if(cmd == 'schedule') {//日程
						var obj = data;
						this.alist = obj.list
						this.pageNum = 1;
						this.initfenye();
						this.subName = obj.name+'('+obj.time+obj.type_name+')'+" 日程";
					}else if(cmd == 'check_in') {//检录
						uni.navigateTo({
							url: '/pages/index/init'
						})
					}else if(cmd == 'award') {//颁奖
						uni.setStorageSync("slist",data)
						uni.navigateTo({
							url: '/pages/award/index'
						})
					}else if(cmd == 'clear') {//清屏
						uni.navigateTo({
							url: '/pages/clear/index'
						})
					}
				 }
			 })
		},
		onUnload() {
			clearInterval(ptimer)
		},
		destroyed() {
			clearInterval(ptimer)
		},
		methods: {
			paginateArray(array, pageSize, pageNumber) {
			  // 计算开始索引和结束索引
			  const startIndex = (pageNumber - 1) * pageSize;
			  const endIndex = startIndex + pageSize;
			 console.log(startIndex, endIndex)
			  // 返回当前页的子数组
			  return array.slice(startIndex, endIndex);
			},
			initfenye() {
				const that = this;
				that.pageTotal = Math.ceil(that.alist.length/10);
				that.slist = that.paginateArray(that.alist,10,that.pageNum);
				clearInterval(ptimer);
				ptimer = setInterval(()=>{
					if(that.pageNum >= this.pageTotal){
						that.pageNum = 1;
					}else{
						that.pageNum ++;
					}
					that.slist = that.paginateArray(that.alist,9,that.pageNum)
				},10000)
			},
			arrayUnique(arr, name) {
			    var hash = {};
			    return arr.reduce(function (item, next) {
			        hash[next[name]]
			            ? ""
			            : (hash[next[name]] = true && item.push(next));
			        return item;
			    }, []);
			},
		}
	}
</script>

<style lang="scss" scoped>
.body{
	min-height: calc(100vh - 186px);
	background: url(@/static/bg3.png) center center no-repeat;
	background-size: cover;
	margin-top: 2px;
	.items{
		height: 86px;
		display: flex;
		align-items: center;
		justify-content: flex-end;
		border-top: 2px solid #6286d7;
		image{
			width: 415px;
			height: 45px;
			margin-right: 45rpx;
		}
		
	}
	.list{
		height: calc(100vh - 186px - 88px);
	}
	.item{
		padding: 10px 0;
		border-top: 2px solid #6286d7;
		display: flex;
		align-items: center;
		justify-content: space-between;
		&:first-child{
			border-top: 2px solid transparent;
		}
		.a{
			width: 203px;
			line-height: 60px;
			font-weight: bold;
			font-size: 51rpx;
			color: #FFFFFF;
			text-align: center;
			margin: 0 50px;
			background-color: #DD1D2B;
			border-radius: 10rpx;
		}
		.b{
			flex: 1;
			font-size: 51px;
			color: #FFFFFF;
			text-overflow: ellipsis;
			white-space: nowrap;
			overflow: hidden;
			margin-left: 5%;
		}
		.c{
			width: 200px;
			font-size: 51px;
			color: #FFFFFF;
			margin-right: 5%;
		}
	}
}
@media screen and (min-width: 1200px) and (max-width: 1359px) {
	.body{
		.item{
			.a{
				width: 170px;
				font-size: 30px;
			}
			.b{
				font-size: 30px;
			}
			.c{
				font-size: 30px;
			}
		}
		
	}
}
</style>