101 lines
2.1 KiB
Vue
101 lines
2.1 KiB
Vue
<template>
|
||
<view class="remaining-time" :class="computedClass">
|
||
<uni-icons
|
||
:type="isExpired ? 'clock' : 'time'"
|
||
:size="14"
|
||
class="icon"
|
||
></uni-icons>
|
||
<text class="text">{{ displayText }}</text>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
export default {
|
||
name: 'RemainingTime',
|
||
props: {
|
||
// 截至日期（ISO格式，如：'2025-12-31T23:59:59'）
|
||
expireDate: {
|
||
type: String,
|
||
required: true,
|
||
validator(value) {
|
||
// 验证日期格式有效性
|
||
return !isNaN(Date.parse(value));
|
||
}
|
||
},
|
||
// 阈值天数（超过此值为绿色，否则红色）
|
||
thresholdDays: {
|
||
type: Number,
|
||
required: true,
|
||
default: 3,
|
||
validator(value) {
|
||
return value >= 0;
|
||
}
|
||
}
|
||
},
|
||
computed: {
|
||
// 计算剩余天数（负数表示逾期）
|
||
remainingDays() {
|
||
const now = new Date();
|
||
const expire = new Date(this.expireDate);
|
||
const diffTime = expire - now;
|
||
// 转换为天数并四舍五入
|
||
return Math.round(diffTime / (1000 * 60 * 60 * 24));
|
||
},
|
||
// 是否已逾期
|
||
isExpired() {
|
||
return this.remainingDays < 0;
|
||
},
|
||
// 显示文本
|
||
displayText() {
|
||
if (this.isExpired) {
|
||
return `已逾期 ${Math.abs(this.remainingDays)} 天`;
|
||
}
|
||
return `剩余 ${this.remainingDays} 天`;
|
||
},
|
||
// 计算样式类
|
||
computedClass() {
|
||
if (this.isExpired) {
|
||
return 'expired'; // 逾期状态
|
||
}
|
||
return this.remainingDays > this.thresholdDays
|
||
? 'normal' // 正常状态（超过阈值）
|
||
: 'warning'; // 警告状态（低于阈值）
|
||
}
|
||
}
|
||
};
|
||
</script>
|
||
|
||
<style scoped>
|
||
.remaining-time {
|
||
display: inline-flex;
|
||
align-items: center;
|
||
padding: 4rpx 12rpx;
|
||
border-radius: 20rpx;
|
||
font-size: 24rpx;
|
||
line-height: 1;
|
||
}
|
||
|
||
.icon {
|
||
margin-right: 8rpx;
|
||
}
|
||
|
||
.text {
|
||
font-weight: 500;
|
||
}
|
||
|
||
/* 正常状态（超过阈值） */
|
||
.normal {
|
||
color: #00b42a; /* 绿色 */
|
||
}
|
||
|
||
/* 警告状态（低于阈值） */
|
||
.warning {
|
||
color: #f53f3f; /* 红色 */
|
||
}
|
||
|
||
/* 逾期状态 */
|
||
.expired {
|
||
background-color: #fef0f0;
|
||
color: #f53f3f; /* 红色背景+红色文字 */
|
||
}
|
||
</style> |