uniapp uni-popup change

uniapp uni-popup  change Record a small function  

uni-popup Official documents

monitor pop Display and hide of page ;

<template>
  <uni-popup ref="popup" type="bottom" background-color="#ffffff" @change="change" @maskClick="maskClick">
    <view class="pop-content">
      <view class="audio-top">
        <view class="top-left" @click="onCancel()">
           Cancel 
        </view>
        <view class="top-right" @click="onComfirm()">
           complete 
        </view>
      </view>
      <view class="audio-conetnt">
        <image src="/static/animation/audio-record-pink.gif" mode=""></image>
      </view>
    </view>
  </uni-popup>
</template>

<script>
  export default {
    data() {
      return {
        eventStartAudio: 'safetydetial-startaudio',
        eventCancelAudio: 'recordaduio-cancelaudio',
        eventStopAudio: 'recordaduio-stopaudio',
        timer: null,
      }
    },
    mounted() {
      console.log("pop mounted")
      uni.$on(this.eventStartAudio, args => {
        this.onOpen()
      })
    },
    methods: {
      onOpen() {
        this.$refs.popup.open()
      },
      change(e) {
        console.log("closeMask:", e)
        //  When showing or hiding   Clear timer 
        if (this.timer) {
          clearTimeout(this.timer)
          this.timer = null
        }
        // Start the timer when it is displayed 
        if (e.show) {
          this.timer = setTimeout(() => {
            this.onComfirm()
          }, 5 * 1000);
        }
      },
      maskClick() {
        console.log("maskClick")
        uni.$emit(this.eventCancelAudio)
      },
      onCancel() {
        console.log("onCancel")
        this.$refs.popup.close()
        uni.$emit(this.eventCancelAudio)
      },
      onComfirm() {
        console.log("onComfirm")
        this.$refs.popup.close()
        uni.$emit(this.eventStopAudio)
      }
    },
    destroyed() {
      uni.$off(this.eventStartAudio)
    }
  }
</script>

<style lang="scss" scoped>
  .pop-content {
    width: 100%;
    height: 350rpx;
    background-color: #ffffff;
    display: flex;
    flex-direction: column;
    align-items: center;

    .audio-top {
      width: 100%;
      height: 80rpx;
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      align-items: center;
      font-size: 28rpx;
      border-bottom: 1px solid #dddddd;

      .top-left {
        margin-left: 24rpx;
        padding: 2px 8rpx;
        border: 1px solid #1D69F9;
        border-radius: 6rpx;
      }

      .top-right {
        margin-right: 24rpx;
        padding: 2px 8rpx;
        border: 1px solid #1D69F9;
        border-radius: 6rpx;
      }

    }

    .audio-conetnt {
      flex: 1;
      display: flex;
      flex-direction: row;
      justify-content: center;
      align-items: center;

      image {
        width: 200rpx;
        height: 200rpx;
      }
    }
  }
</style>