assess-app/components/en-utils/en-number/en-number.vue

<template>
  <view class="number-box" :class="[textWeight,textSize,textColor]">
      {{number}}
  </view>
</template>

<script>
export default {
  name:'en-number',
  props:{
    'endNum':{
      default:0
    },
    textColor:{
      default: 'color-02154E'
    },
    textSize:{
      default: 'size-30'
    },
    textWeight:{
      default: 'sys-weight-400'
    }
  },
  data() {
    return {
      number:0
    };
  },
  watch:{
    'endNum':function () {
      this.startNumber()
    }
  },
  mounted() {
    this.startNumber()
  },
  methods: {
    startNumber(){
      if(this.endNum<=0){
        return
      }
      this.number=0
      let addNum=9
      let frameNum=1
      if(this.endNum<=500){
        addNum=1
        frameNum=15
      }else if(this.endNum<7000){
        addNum=3
        frameNum=11
      }else if(this.endNum<16000){
        addNum=6
        frameNum=8
      }
      let intervalId=setInterval(()=>{
        this.number+=addNum
        if(this.number>=this.endNum){
          this.number=this.endNum
          clearInterval(intervalId)
        }
      },frameNum)
    }

  },
}
</script>

<style lang="scss">
.number-box{
  display: inline;
}

</style>