小程序 通过计算属性 改变状态

<!-- 工期剩余 -->
<!-- 还剩下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>