aiot-app/pages/promp/promp.vue

<template>
  <view>
    <uni-nav-bar fixed="true" statusBar="true" :title="title"></uni-nav-bar>
    <view class="prompt-content">
      <view class="content-list">
        <label class="iconfont icon-tijiao"></label>
        <label class="fontsize-big">已报工</label>
        <view class="button-lable">
          <!-- <label @click="backMaterials">补归</label> -->
          <label @click="backMaterials">返回详情页</label>
        </view>
        <label class="back-m">{{ Areaseconds }}秒后返回列表页</label>
      </view>
    </view>
  </view>
</template>

<script>
let setTime = null
export default {
  data () {
    return {
      title: '提示',
      pageId: '',
      Areaseconds: 0
    }
  },
  onLoad (option) {
    this.title = option.title
    this.Areacountdown()
  },
  onUnload () {
    clearInterval(setTime)
  },
  methods: {
    backMaterials () {
      this.back(2)
    },
    Areacountdown () {
      let that = this
      return new Promise((rel, rej) => {
        if (true) {
          var seconds = Math.round(5)
          //只有一位数就在前面加0并转为字符串
          function part (val) {
            var lenval = (val + '').length
            if (lenval >= 2) {
              return val
            } else {
              return val
            }
          }
          that.Areaseconds = part(5)
          setTime = setInterval(() => {
            var s = parseInt(that.Areaseconds)
            if (s > 0) {
              if (s > 0) {
                s -= 1
                that.Areaseconds = part(s)
              }
            } else {
              rel() //活动结束回调
              console.log('倒计时结束！')
              this.back(3)
              clearInterval(setTime)
            }
          }, 1000)
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.prompt-content {
  width: 100%;
  height: 1000rpx;
  background-color: #fff;
  .content-list {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    padding-top: 200rpx;
    .icon-tijiao {
      font-size: 138rpx;
      color: $j-primary-green;
    }
    .fontsize-big {
      font-size: 36rpx;
      padding: 30rpx 0;
    }
    .button-lable {
      text-align: center;
      color: $j-primary-green;
      font-size: 30rpx;
      label {
        display: inline-block;
        width: 190rpx;
        height: 70rpx;
        line-height: 70rpx;
        border: 1rpx solid $j-primary-green;
        border-radius: 20rpx;
        margin: 0 10rpx;
      }
    }
    .back-m {
      margin-top: 30rpx;
      font-size: 28rpx;
    }
  }
}
</style>