wxc
2 years ago
20 changed files with 446 additions and 190 deletions
@ -0,0 +1,129 @@
|
||||
<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; |
||||
debugger |
||||
const state = reactive({ |
||||
day: 0, |
||||
hour: 0, |
||||
minute: 0, |
||||
second: 0, |
||||
}); |
||||
|
||||
updateState(); |
||||
setRemainingTimeout(); |
||||
|
||||
function updateState() { |
||||
if (timeVal === 0) { |
||||
state.day = 0; |
||||
state.hour = 0; |
||||
state.minute = 0; |
||||
state.second = 0; |
||||
} |
||||
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(); |
||||
|
||||
setRemainingTimeout(); |
||||
|
||||
} |
||||
); |
||||
|
||||
function setRemainingTimeout() { |
||||
// 倒计时 |
||||
if (props.time && props.time < 3600 && props.time > -3600) { |
||||
setTimeout(() => { |
||||
if (countdownFlag.value) { |
||||
timeVal--; |
||||
} else { |
||||
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> |
||||
@ -0,0 +1,9 @@
|
||||
<template> |
||||
<h2>部门会签</h2> |
||||
</template> |
||||
<script setup> |
||||
|
||||
</script> |
||||
<style lang="scss" scoped> |
||||
|
||||
</style> |
||||
Loading…
Reference in new issue