web-base-h5/pages/makerspaceView/energySilo.vue

<template>
	<view class="content">
		<view class="djsTimes">
			<view class="times">
				<view class='time_kuang'>
					<view class='tk1'>{{times.userDay}}</view>
					<view class='tk2'>{{'天'}}</view>
				</view>
				<view class='time_kuang'>
					<view class='tk1'>{{times.userHr}}</view>
					<view class='tk2'>{{'时'}}</view>
				</view>
				<view class='time_kuang'>
					<view class='tk1'>{{times.userMin}}</view>
					<view class='tk2'>{{'分'}}</view>
				</view>
				<view class='time_kuang'>
					<view class='tk1'>{{times.userSec}}</view>
					<view class='tk2'>{{'秒'}}</view>
				</view>
			</view>
			<view class="timeRemarks">
				{{'显示进行中最早的倒计时'}}
			</view>
		</view>
		<view class="timeSlide">
			<view class="timeA">{{'开始时间'}}</view>
			<view class="timeB" @click="openDate(0)">
				{{ queryParams.endStartDate?queryParams.endStartDate:'开始时间' }}
			</view>
			<view class="timeA">{{'至'}}</view>
			<view class="timeB" @click="openDate(1)">
				{{ queryParams.endDate?queryParams.endDate:'结束时间' }}
			</view>
			<view class="seatch_r" @click="getDataList">
				<u-icon name="search" size="22" color="#fff"></u-icon>
			</view>
		</view>
		<template v-if="dataList.length>0">
			<view class="thecontent" @click="goDetail(item)" v-for='(item,index) in dataList' :key="index">
				<view class="line_box">
					<view class='line1'>{{'考核状态'}}</view>
					<view class='line2'>{{item.isReachVal}}</view>
				</view>
				<view class="line_box">
					<view class='line1'>{{'礼包数量'}}</view>
					<view class='line3'>{{item.giftNum}}</view>
				</view>
			
				<view class="line_box">
					<view class='line1'>{{'开始时间'}}</view>
					<view class='line2'>{{item.enableDate}}</view>
				</view>
				<view class="line_box">
					<view class='line1'>{{'结束时间'}}</view>
					<view class='line2'>{{item.endDate}}</view>
				</view>
				<view class="line_box">
					<view class='line1'>{{'考核用时（天）'}}</view>
					<view class='line2'>{{item.useDate}}</view>
				</view>
				<view class="line_box">
					<view class='line1'>{{'剩余时间'}}</view>
					<view class='line2'>{{item.daystime}}</view>
				</view>
			
			
			</view>
		</template>
		<u-empty
		v-else
		        mode="data"
		     
		>
		</u-empty>
		<u-datetime-picker :closeOnClickOverlay="true" @close="dataShow = false" @cancel="dataShow = false"
			@confirm="getDate" :show="dataShow" v-model="value1" mode="date"></u-datetime-picker>
	</view>
</template>

<script>
	import * as ene from '@/config/market.js'
	import {
		formatMsToDate
	} from '@/util/index'

	export default {
		data() {
			return {
				dataList: [],
				queryParams: {
					pageNum: 1,
					pageSize: 50,
					endStartDate: "",
					endDate: "",

				},
				dataShow: false,
				timeIndex: 0,
				value1: '',
				times: {
					userDay: "0",
					userHr: "00",
					userMin: "00",
					userSec: "00"
				},
				theSecond: "",
				countdownInterval:""
			}
		},
		onLoad() {

			this.getDataList();


		},
		beforeDestroy() {
		 clearInterval(this.countdownInterval); // 清除倒计时定时器
		},
		methods: {
			goDetail(item) {
				uni.navigateTo({
					url: '/pages/makerspaceView/energySiloDetail?pkId=' + item.pkId
				})
			},
			// 倒计时事件
			countdown() {
				const that = this;
				// 获取后台接口返回的时间戳（以秒为单位）
				let surplusDate = that.theSecond;
				// 创建一个计时器
				that.countdownInterval = setInterval(() => {
					// 将时间戳减去一秒
					surplusDate--;
					if (surplusDate <= 0) {
						// 倒计时结束
						clearInterval(that.countdownInterval);
						return;
					}
					// 计算倒计时的天、小时、分钟和秒数
					let day = Math.floor(surplusDate / (60 * 60 * 24));
					let hour = Math.floor((surplusDate % (60 * 60 * 24)) / (60 * 60));
					let minute = Math.floor((surplusDate % (60 * 60)) / 60);
					let second = surplusDate % 60;
					// 将单个数字补零，以保持统一的格式
					day = day < 10 ? "0" + day : day;
					hour = hour < 10 ? "0" + hour : hour;
					minute = minute < 10 ? "0" + minute : minute;
					second = second < 10 ? "0" + second : second;

					// 将倒计时的天、小时、分钟和秒数分别存储起来
					// 在页面上展示倒计时
					that.times.userDay = day;
					that.times.userHr = hour;
					that.times.userMin = minute;
					that.times.userSec = second;

				}, 1000);
			},
			openDate(index) {
				this.timeIndex = index
				this.dataShow = true
			},
			getDate(e) {
				if (this.timeIndex == 1) {
					this.queryParams.endDate = formatMsToDate(e.value)
				} else {
					this.queryParams.endStartDate = formatMsToDate(e.value)
				}
				this.dataShow = false
			},
			getDataList() {
				ene.getSiloList(this.queryParams).then(res => {
					if (res.total > 0) {
						this.theSecond = res.rows[0].surplusDate
						res.rows.forEach(ele => {
							ele.daystime = ele.surplusDate
							let days = parseInt(ele.daystime / (3600 * 24)); // 计算天数
							let hours = parseInt((ele.daystime % (3600 * 24)) / 3600); // 计算小时数
							let minutes = parseInt((ele.daystime % 3600) / 60); // 计算分钟数
							let seconds = ele.daystime % 60; // 计算秒数
							ele.daystime = days + '天' + hours + '时' + minutes +'分' + seconds +'秒';
						})
						this.dataList = res.rows
						this.countdown()
					} else {
						this.theSecond =0
						this.dataList = res.rows
						this.times.userDay = "0";
						this.times.userHr = "0";
						this.times.userMin = "0";
						this.times.userSec = "0";
					 clearInterval(this.countdownInterval); // 清除倒计时定时器

					}

				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	::v-deep .u-empty{
		background-color: #FFFFFF;
	}
	.content {
		background-color: #F2F2F2;

		.djsTimes {
			background: linear-gradient(180deg, #FE5541, #F65C1A);
			padding: 37rpx 60rpx;

			.times {
				display: flex;
				align-items: center;
				justify-content: space-around;

				.time_kuang {
					width: 106rpx;
					height: 106rpx;
					padding: 13rpx 17rpx;
					background-color: rgba(255, 255, 255, 0.35);
					box-shadow: 0rpx 3rpx 7rpx 0rpx rgba(255, 255, 255, 0.35);
					border-radius: 8rpx;
					display: flex;
					flex-direction: column;
					justify-content: center;
					align-items: center;

					.tk1 {
						font-size: 68rpx;
						font-family: Arial;
						font-weight: bold;
						color: #FFFFFF;
					}

					.tk2 {
						font-size: 24rpx;
						font-family: Source Han Sans CN;
						font-weight: 400;
						color: #FFFFFF;
					}

				}
			}

			.timeRemarks {
				margin-top: 33rpx;
				text-align: center;
				ont-size: 26rpx;
				font-family: Source Han Sans CN;
				font-weight: 400;
				color: #FFFFFF;
			}
		}

		.timeSlide {
			display: flex;
			align-items: center;
			padding: 38rpx 26rpx;
			justify-content: space-between;
			background-color: #FFFFFF;

			.timeA {
				font-size: 26rpx;
				font-family: Source Han Sans CN;
				font-weight: 400;
				color: #333;
				margin-right: 46rpx;
			}

			.timeB {
				font-size: 24rpx;
				font-family: Arial;
				font-weight: 400;
				color: #999999;
				text-align: center;
			}

			.seatch_r {
				background: #005BAC;
				border-radius: 50%;
				padding: 8rpx;
				margin-left: 24rpx;
			}
		}

		.thecontent {
			background-color: #FFFFFF;
			margin-top: 25rpx;
			margin-bottom: 21rpx;
			padding: 10rpx 23rpx 30rpx 23rpx;

			.line_box {
				display: flex;
				align-items: center;
				justify-content: space-between;
				margin-top: 25rpx;

				.line1 {
					font-size: 26rpx;
					font-family: Source Han Sans CN;
					font-weight: 400;
					color: #999999;
				}

				.line2 {
					font-size: 26rpx;
					font-family: Source Han Sans CN;
					font-weight: 400;
					color: #333333;
				}

				.line3 {
					font-size: 26rpx;
					font-family: Source Han Sans CN;
					font-weight: 400;
					color: rgba(251, 48, 36, 1);
				}
			}
		}
	}
</style>