uniapp列表页面实现动态耗时功能展示

一、需求描述

今天做到一个项目是需要动态显示耗时功能，也就是uniapp微信小程序中显示耗时功能如下图：

二、代码逻辑

编写一个动态时间方法，获取数据之后调追加给列表

三、完整代码实现

<template>
	<view class="content">
		<view class="list">
			<repeat v-for="(item, index) in list" :key="item.id">
				<view class="list_item">
					<navigator :url="'/pages/repair/repair_detail?id='+item.id" hover-class="none">
						<view class="device_name">
							<view class="device_nameL">设备：</view>
							<view class="device_nameR">【{{item.device_name}}】</view>
						</view>
						<view class="hao_hour" v-if="item.status==1">
							<view class="hao_hourL">耗时：</view>
							<view class="hao_hourR">
								<text class="time-unit">{{ item.countdown.days ? item.countdown.days : 0 }}</text
								<text class="time-label">天</text>
								<text class="time-unit">{{ item.countdown.hours ? item.countdown.hours : 0 }}</text>
								<text class="time-label">时</text>
								<text class="time-unit">{{ item.countdown.minutes ? item.countdown.minutes : 0}}</text>
								<text class="time-label">分</text>
								<text class="time-unit seconds">{{ item.countdown.seconds ? item.countdown.seconds : 0 }}</text>
								<text class="time-label">秒</text>
							</view>
						</view>
					</navigator>
				</view>
			</repeat>
		</view>
	</view>
</template>

<script>
	var page = 1;
	export default {
		data() {
			return {
				list: [],
				timer: null, // 全局计时器
			}
		},
		mounted() {
		  this.getRepair(); // 获取工单数据并启动倒计时
		 },
		async onLoad(options) {
			page = 1;
			this.getRepair(); 
		},
		//上啦加载
		async onPullDownRefresh() {
			page = 1;
			this.getRepair();
			uni.stopPullDownRefresh()
		},
		//上拉刷新
		async onReachBottom(){
			uni.showLoading({
			 title: '加载中'
			});
			// 页数+1
			page = page + 1;
			var that = this;
			var status = that.status
 
			const repairListResponse = await this.$crmRequest({
				url: '/repair/repair/repairList',
				method:'get',
				data: {
					page:page
				}
			})
			 console.log(repairListResponse.data)
			if(repairListResponse.data.code==200){
				var oldData = that.list; //获取旧的数据
				var newData = repairListResponse.data.data.data; //获取新的数据
 
				that.list = oldData.concat(newData)
				uni.hideLoading()	
			}else{
				that.list = [];
			}
 
 
		 },
		methods: {
			// 获取工单
			async getRepair(){
				var status = this.status;
				const repairListResponse = await this.$crmRequest({
					url: '/repair/repair/repairList',
					method:'get',
					data: {
						page:page
					}
				})
				if(repairListResponse.data.code==200){
					this.list = repairListResponse.data.data.data
					 // 为每个工单添加倒计时字段
					 this.list.forEach(item => {
						this.initCountdown(item); // 初始化每个工单的倒计时
					 });
				}else{
					this.list = [];
				}
 
			},
		// 启动全局倒计时（如果有多个工单）
		 startCountdown() {
			this.list.forEach(item => {
			 this.initCountdown(item); // 初始化每个工单的倒计时
			});
		 },
		 beforeDestroy() {
		  // 清除所有定时器，避免内存泄漏
		  this.list.forEach(item => {
		   if (item.timer) {
		    clearInterval(item.timer);
		   }
		  });
		 },
 
		 // 更新倒计时
		 updateCountdown(item, targetDate) {
		  const targetTime = new Date(targetDate.replace(/-/g, '/')).getTime();
		  const now = new Date().getTime();
		  const timeDifference = now - targetTime;
 
		  if (timeDifference < 0) {
		   // 如果目标时间在未来，清空倒计时
		   this.$set(item, 'countdown', { days: '0', hours: '00', minutes: '00', seconds: '00' });
		   return;
		  }
 
		  // 计算天、时、分、秒
		  const days = Math.floor(timeDifference / (1000 * 60 * 60 * 24));
		  const hours = Math.floor((timeDifference % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
		  const minutes = Math.floor((timeDifference % (1000 * 60 * 60)) / (1000 * 60));
		  const seconds = Math.floor((timeDifference % (1000 * 60)) / 1000);
 
		  // 使用 $set() 更新倒计时数据，避免直接修改响应式对象
		  this.$set(item, 'countdown', {
		   days: days.toString(),
		   hours: hours.toString().padStart(2, '0'),
		   minutes: minutes.toString().padStart(2, '0'),
		   seconds: seconds.toString().padStart(2, '0')
		  });
		 },
 
		 // 初始化每个工单的倒计时
		 initCountdown(item) {
		  const targetDate = item.acceptance_time; // 每个工单的目标时间
 
		  // 清除旧的定时器，防止内存泄漏
		  if (item.timer) {
		   clearInterval(item.timer);
		  }
 
		  // 设置定时器
		  item.timer = setInterval(() => {
		   this.updateCountdown(item, targetDate);
		  }, 1000);
		 },
		},
	}
</script>

<style>
page{ background-color: #f6f6f6;}
.content{ width: 100%;}
.hao_hour{ width: 650rpx; float: left; margin-left: 25rpx; padding: 5rpx 0rpx;}
.hao_hourL{ width: 90rpx; float: left; font-size: 28rpx; color: #979ba1;}
.hao_hourR{ width: 560rpx; float: left; font-size: 28rpx; color: #1f1f1f;}
.time-unit {
 font-size: 28rpx;
 color: #333;
 text-align: center;
}

.time-unit.seconds {
 color: #ff4757;
}
.time-label {
 font-size: 28rpx;
 color: #1f1f1f;
 margin: 0 5rpx;
 font-weight: normal;
}
</style>