物流查询

pages/workbench/express/components/ExpressRemainTime.vue

@@ -0,0 +1,55 @@
+<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>