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>
|