im-uniapp/components/oa/oa-remind-time/index.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>