mailbox-lan-vue/src/views/work/components/RemainingTime.vue

<template>
    <div class="remaining-container text-center" :countdown="countdownFlag">
        <div class="time-val">
            <template v-if="state.day !== 0">
                <span class="number">{{ state.day }}</span>
                <span>天</span>
            </template>
            <template v-if="state.hour !== 0">
                <span class="number">{{ state.hour }}</span>
                <span>小时</span>
            </template>
            <template v-if="state.minute !== 0">
                <span class="number">{{ state.minute }}</span>
                <span>分钟</span>
            </template>
            <template v-if="state.second !== 0">
                <span class="number">{{ state.second }}</span>
                <span>秒</span>
            </template>
        </div>
        <div>
            <span>{{ countdownFlag ? "剩余处理时间" : "已超时" }}</span>
        </div>
    </div>
</template>
<script setup>
const props = defineProps({
    time: {
        type: Number,
        default: 0,
    },
});
const emit = defineEmits(["update:time"]);

const countdownFlag = ref(true);
let timeVal = props.time;

const state = reactive({
    day: 0,
    hour: 0,
    minute: 0,
    second: 0,
});

let timerFlag = false;

updateState();
setRemainingInterval();

function updateState() {
    if (timeVal > 0) {
        countdownFlag.value = true;
        getState(timeVal);
    }
    // timeVal 小于0
    if (timeVal <= 0) {
        countdownFlag.value = false;
        getState(-timeVal);
    }
    function getState(val) {
        state.day = Math.floor(val / (60 * 60 * 24));
        state.hour = Math.floor(val / (60 * 60)) % 24;
        if (state.day === 0) {
            state.minute = Math.floor(val / 60) % 60;
        } else {
            state.minute = 0;
        }
        if (state.day === 0 && state.hour === 0) {
            state.second = Math.floor(val) % 60;
        } else {
            state.second = 0;
        }
    }
}

watch(
    () => props.time,
    (newVal) => {
        timeVal = props.time;
        updateState();
        setRemainingInterval();
    }
);


function setRemainingInterval() {
    // 倒计时
    if (props.time && props.time < 3600 && props.time > -3600 && !timerFlag) {
        timerFlag = true;
        setInterval(() => {
            timeVal--;
            emit("update:time", timeVal);
        }, 1000);
    }
}
</script>
<style lang="scss" scoped>
.remaining-container {
    color: #fff;
    span {
        font-size: 18px;
        line-height: 1;
    }
    .time-val {
        vertical-align: bottom;
        margin-bottom: 20px;
        .number {
            font-size: 56px;
        }
    }
    &[countdown="true"] {
        color: #333;
        .time-val {
            color: #666;
            .number {
                color: var(--primary-color);
            }
        }
    }
}
</style>