324 lines
7.8 KiB
Vue
324 lines
7.8 KiB
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> |