56 lines
1.2 KiB
Vue
56 lines
1.2 KiB
Vue
|
<template>
|
||
|
|
<view class="remain-span">
|
||
|
|
<view v-if="status === 2">
|
||
|
|
<uni-tag text="已完成" type="success" />
|
||
|
|
</view>
|
||
|
|
<view v-else-if="status === 3">
|
||
|
|
<uni-tag text="异常" type="error" />
|
||
|
|
</view>
|
||
|
|
<template v-else>
|
||
|
|
<view v-if="isTimeout">
|
||
|
|
<uni-tag text="超时" type="error" />
|
||
|
|
</view>
|
||
|
|
<view v-else>
|
||
|
|
<uni-tag :text="'剩余' + remainDays + '天'" type="info" />
|
||
|
|
</view>
|
||
|
|
</template>
|
||
|
|
</view>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
export default {
|
||
|
|
name: 'ExpressRemainTime',
|
||
|
|
props: {
|
||
|
|
planDate: {
|
||
|
|
type: [String, Date],
|
||
|
|
required: false
|
||
|
|
},
|
||
|
|
status: {
|
||
|
|
type: Number,
|
||
|
|
required: true
|
||
|
|
}
|
||
|
|
},
|
||
|
|
computed: {
|
||
|
|
remainDays() {
|
||
|
|
if (!this.planDate) return '-';
|
||
|
|
const now = new Date();
|
||
|
|
const plan = new Date(this.planDate);
|
||
|
|
const diff = plan.getTime() - now.getTime();
|
||
|
|
return Math.ceil(diff / (1000 * 60 * 60 * 24));
|
||
|
|
},
|
||
|
|
isTimeout() {
|
||
|
|
if (!this.planDate) return false;
|
||
|
|
const now = new Date();
|
||
|
|
const plan = new Date(this.planDate);
|
||
|
|
return now.getTime() > plan.getTime();
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style scoped>
|
||
|
|
.remain-span {
|
||
|
|
display: inline-block;
|
||
|
|
}
|
||
|
|
</style>
|