<!-- 工期剩余 -->
<!-- 还剩下3天的时候变成红色 -->
<template>
<div class="day-residue-tag">
<span>{{stateTitle}}:</span>
<span>{{residueTime}}</span>
</div>
</template>
<script>
export default {
props: {
// 为10的时候,是完工
state: {
name: '订单状态',
type: Number
},
expect_at: {
name: '工期剩余',
type: String
},
finish_at: {
name: '完工时间',
type: String
}
},
computed: {
stateTitle() {
if (this.state == 10) {
return '完成时间'
}
return '工期剩余'
},
// 剩余时间
residueTime() {
if (this.state > 6) {
if (this.finish_at) {
return this.timeF(this.finish_at)
}
else return '--'
}
// 计算剩余时间差
const diff = new Date(this.expect_at).getTime() - new Date().getTime();
return this.countDownText(diff)
}
},
methods: {
// 倒计时时间显示处理
countDownText(diff) {
const d = Math.floor(diff / (60 * 1000 * 60 * 24));
const ddiff = diff % (60 * 1000 * 60);
const h = Math.floor(ddiff / (60 * 1000 * 60 * 24));
const hdiff = diff % (60 * 1000 * 60);
const m = Math.floor(hdiff / (60 * 1000));
const mdiff = hdiff % (60 * 1000);
const s = mdiff / (1000);
const sCeil = Math.ceil(s);
const sFloor = Math.floor(s);
return `${d}天`
},
}
}
</script>
<style lang="less" scoped>
.day-residue-tag {
}
</style>
小程序 通过计算属性 改变状态
最新推荐文章于 2024-04-07 10:46:48 发布