137 lines
3.0 KiB
Vue
137 lines
3.0 KiB
Vue
<template>
|
||
<view class="remaining-time" :class="computedClass">
|
||
<text class="text">{{ displayText }}</text>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
export default {
|
||
name: 'RemainingTime',
|
||
props: {
|
||
// 截至日期（支持多种格式或null）
|
||
expireDate: {
|
||
type: [String, null], // 允许字符串或null
|
||
default: null, // 默认null
|
||
validator(value) {
|
||
// 允许null，非null时检查是否能解析为有效日期
|
||
if (value === null) return true;
|
||
return !isNaN(Date.parse(value));
|
||
}
|
||
},
|
||
// 阈值天数
|
||
thresholdDays: {
|
||
type: Number,
|
||
default: 3,
|
||
validator(value) {
|
||
return value >= 0;
|
||
}
|
||
},
|
||
// 是否已完成
|
||
finished: {
|
||
type: Boolean,
|
||
default: false
|
||
}
|
||
},
|
||
computed: {
|
||
// 计算剩余天数（处理null和无效日期）
|
||
remainingDays() {
|
||
// 如果无截止日期或日期无效，返回null
|
||
if (!this.expireDate) return null;
|
||
const now = new Date();
|
||
const expire = new Date(this.expireDate);
|
||
// 无效日期处理
|
||
if (isNaN(expire.getTime())) return null;
|
||
const diffTime = expire - now;
|
||
return Math.round(diffTime / (1000 * 60 * 60 * 24));
|
||
},
|
||
// 是否已逾期（仅在有有效日期时判断）
|
||
isExpired() {
|
||
return this.remainingDays !== null && this.remainingDays < 0;
|
||
},
|
||
// 显示文本（优先级：完成 > 无日期 > 逾期 > 剩余时间）
|
||
displayText() {
|
||
if (this.finished) {
|
||
return '已完成';
|
||
}
|
||
// 无截止日期的情况
|
||
if (this.remainingDays === null) {
|
||
return '无截止日期';
|
||
}
|
||
if (this.isExpired) {
|
||
return `已逾期 ${Math.abs(this.remainingDays)} 天`;
|
||
}
|
||
return `剩余 ${this.remainingDays} 天`;
|
||
},
|
||
// 图标类型
|
||
getIconType() {
|
||
if (this.finished) {
|
||
return 'checkmark';
|
||
}
|
||
if (this.remainingDays === null) {
|
||
return 'help'; // 无日期时显示帮助图标
|
||
}
|
||
return this.isExpired ? 'clock' : 'time';
|
||
},
|
||
// 样式类
|
||
computedClass() {
|
||
if (this.finished) {
|
||
return 'finished';
|
||
}
|
||
// 无截止日期的样式
|
||
if (this.remainingDays === null) {
|
||
return 'no-date';
|
||
}
|
||
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;
|
||
}
|
||
|
||
/* 完成状态 */
|
||
.finished {
|
||
background-color: #00b42a;
|
||
color: #ffffff;
|
||
}
|
||
|
||
/* 无截止日期状态 */
|
||
.no-date {
|
||
color: #888888; /* 灰色文字 */
|
||
}
|
||
</style> |