aiot-app/pages/home/backlog/result.vue

<template>
  <view class="result-container" :class="type">
    <u-icon
      v-if="type === 'approve'"
      size="150"
      color="#157a2c"
      name="checkmark-circle-fill"
    ></u-icon>
    <u-icon v-else size="150" color="#ff0000" name="close-circle-fill"></u-icon>
    <view class="status-text">{{ configs[type][status] }}</view>
    <view class="btn-wrapper">
      <button @click="back">返回上一页</button>
    </view>
    <view class="back-text"> {{ delay }}秒钟后返回详情页 </view>
  </view>
</template>

<script>
export default {
  data () {
    return {
      status: '0',
      type: 'approve',
      configs: {
        approve: ['已审核', '已验收'],
        refuse: ['审核已驳回', '验收不通过']
      },
      delay: 5,
      timer: null
    }
  },
  onLoad (options) {
    this.type = options.type || 'approve'
    this.status = options.status || '0'
    this.timeCount()
  },
  onHide () {
    clearInterval(this.timer)
  },
  onUnload () {
    clearInterval(this.timer)
  },
  methods: {
    back () {
      uni.navigateBack({
        delta: 1
      })
    },
    timeCount () {
      clearInterval(this.timer)
      this.timer = setInterval(() => {
        this.delay--
        if (this.delay <= 0) {
          clearInterval(this.timer)
          this.back()
        }
      }, 1000)
    }
  }
}
</script>

<style lang="scss" scoped>
.result-container {
  display: flex;
  justify-content: center;
  flex-direction: column;
  align-items: center;
  padding-top: 120rpx;

  &.refuse {
    .status-text {
      color: #ff0000;
    }
  }
  .status-text {
    padding: 40rpx 0;
    font-size: 38rpx;
  }
  .btn-wrapper {
    button {
      width: 200rpx;
      font-size: 28rpx;
      height: 48rpx;
      line-height: 46rpx;
      border: 1px solid $j-primary-border-green;
      color: $j-primary-border-green;
      background: #fff;
    }
  }
  .back-text {
    padding: 20rpx;
    color: #ccc;
    font-size: 28rpx;
  }
}
</style>