uniapp定时器定时刷新获取

要用uniapp做一个效果：页面定时刷新获取，根据时间变换状态。

 这里按钮有5种状态：预约，已预约，已售罄，未开始，已结束。要把当前时间和后端返回的时间做对比，如果还没到开始时间则显示未开始，如果到开始时间还未结束则有预约，已预约，已售罄。如果超过结束时间则显示已结束。

后端返回的数据：

 主要要把now_time每秒+1和start_time,end_time作比较，

代码如下  先html:

<!-- 主要内容 -->
		<view class="mainContent">
			<view class="main_one" v-for="(item, index) in mainList">
				<view class="mainTop"><image :src="item.img"></image></view>
				<view class="mo_content">
					<view class="mo_title">{{ item.name }}</view>
					<view class="mo_text">价值:{{ item.min_price }}-{{ item.max_price }} 元</view>
					<view class="mo_text">合同/收益:{{item.contract_period}}天/{{ item.rate_of_return }}%</view>
					<view class="mo_text">预约积分:{{ item.need_score }}</view>
					<view class="mo_text">抢购时间:{{ item.end_time }}</view>
					<view class="soldView" :data-id="item.id" :data-_state_text="item._state_text"  @click="appointment">
						<view class="sold "  v-if="item._state_text == '预约'&&item.appointment">已预约</view>
						<view class="sold" v-else-if="item._state_text == '已售罄'">{{ item._state_text }}</view>
						<view class="sold" v-else-if="item._state_text == '未开始'">{{ item._state_text }}</view>
						<view class="sold appointment"  v-else>{{ item._state_text }}</view>
						<!-- <view class="sold unopen" v-if="item._state_text == '未开始'">{{ item._state_text }}</view> -->
					</view>
				</view>
			</view>
		</view>

 然后css:

.mainContent{
	width: 100%;
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	/* margin-top: 41rpx; */
	justify-content: space-between;
}
.main_one{
	width: 335rpx;
	height: 595rpx;
	box-shadow: 0px 0px 18px 0px #272B4C;
	border-radius: 15rpx;
	margin-top: 30rpx;
}
.mainTop{
	width: 100%;
	height: 238rpx;
}
.mainTop image{
	width: 100%;
	height: 100%;
	border-radius: 10rpx 10rpx 0px 0px;
}
.mo_content{
	padding: 17rpx 18rpx;
	box-sizing: border-box;
}
.mo_title{
	color: #FFFFFF;
	font-size: 32rpx;
	margin-bottom: 15rpx;
}
.mo_text{
	font-size: 24rpx;
	color: #fff;
	line-height: 40rpx;
}
.soldView{
	width: 100%;
	height: 70rpx;
	display: flex;
	justify-content: center;
	margin-top: 27rpx;
}
.sold{
	width: 290rpx;
	height: 70rpx;
	line-height: 70rpx;
	background: #21243B;
	opacity: 0.39;
	border-radius: 35rpx;
	text-align: center;
	color: #888888;
	font-size: 29rpx;
	z-index: 10;
}
.soldView .appointment{
	background: #BA6933; 
	color: #fff;
	opacity: 1;
	z-index: 100;
}

 最后js:

//首页场次列表
		getSessionsList() {
			let that = this;
			 clearInterval(that.dd) //首先清理定时器
			this.$request(
				'/api/sessions-config/get?token=' + that.token, //请求时带token
				{
					status: 1  //带的参数
				},
				'get'
			).then(res => {
				console.log(res);
				//let now_time = "";
				if (res.status == 1) {  //后端返回的status = 1 是正确的状态
					let nowTime = res.now_time; //服务器返回的时间
					that.mainList = res.result;  //返回的数据列表
					that.mainList.forEach((item, index) => {  //循环数据列表
						//item.start_time = item.start_time.substr(0, 5);
						that.mainList[index].end_time=item.end_time.substr(0, 5); //处理结束时间的时间格式
						that.startTimeArr.push(item.end_time) //把end_time追加到startTimeArr里面。
					});
					console.log(that.startTimeArr); //打印出追加的数组
					let sjz = []; //声明一个空的数组存放时间戳
					that.startTimeArr.forEach((item,index)=>{ //循环startTimeArr
						  var index =item.lastIndexOf(":"); //处理其格式保留到分，截掉秒数
						  item  = that.nowday.getnowday() +" "+ item; //引用getnowday()转换成year + '-' + month + '-' + day +hour + ":" + minute 格式
						   var date1= new Date(item); 
						   var time3 = Date.parse(date1);//转换成毫秒的时间戳
						   sjz = sjz.concat(time3/1000) //转换成秒的时间戳
					})
					console.log(sjz); //打印时间戳
					that.dd=setInterval( //定时器 每秒执行
							function(){ 
								nowTime=nowTime+1 //服务器返回的时间每秒+1
								//console.log(nowTime)
								for(var i=0;i<sjz.length;i++){ //循环请求的时间数组
										if(nowTime==sjz[i]){ 当服务器时间戳和数据列表里的时间戳相等市再执行一下请求
												that.getSessionsList();
										}
								}
						},1000
							)
				}
			});
		},

 最后一个：获取当前年月日的方法 getnowday()：

在common里新建一个nowday.js,具体代码：

function getnowday() {
  var date = new Date(),
  year = date.getFullYear(),
  month = date.getMonth() + 1,
  day = date.getDate(),
  hour = date.getHours() < 10 ? "0" + date.getHours() : date.getHours(),
  minute = date.getMinutes() < 10 ? "0" + date.getMinutes() : date.getMinutes(),
  second = date.getSeconds() < 10 ? "0" + date.getSeconds() : date.getSeconds();
  month >= 1 && month <= 9 ? (month = "0" + month) : "";
  day >= 0 && day <= 9 ? (day = "0" + day) : "";
  var timer = year + '-' + month + '-' + day 
  // + ':' + second
  // + ' ' + hour + ':' + minute ;
  return timer;
}
module.exports = {
   getnowday:getnowday
}

在main.js里引入：

import nowday from 'common/nowday.js';
Vue.prototype.nowday=nowday;

 这样就可以了 当现在时间到了列表里的结束时间时按钮会自动变为已结束，不可点击预约，这样不用用户手动刷新app.其主要知识点：js时间函数 new Date() ，时间转时间戳：Date.parse()；setInterval ()，js字符串的截取，数组的追加，连接等。