android-cloud-H5/pages/rtcEngine/components/TimeoutNoOps.vue

<template>
  <van-dialog v-model="noOperationSetTimeoutTimeVisible" title="提示" show-cancel-button
      :message="levitatedSphereContent" :confirm-button-text="confirmButtonText"
      confirm-button-color="#3cc51f" cancel-button-text="继续操作" @cancel="noOperationSetTimeout('cancel')"
      @confirm="noOperationSetTimeout('cancel'), exit(), noOperationSetTimeoutTimeVisible = false">
  </van-dialog>
</template>

<script>
/**
 * 超时无操作
 * 弹窗提示
 * 弹窗倒计时无操作则自动退出
 */
export default {
  name: 'TimeoutNoOps',
  data() {
    return {
      // 后台查询,是否是启动不操作自动退出云机功能
      isFiringNoOperationSetTimeout: false,
      // 超过指定触碰时间的弹窗是否显示
      noOperationSetTimeoutTimeVisible: false,
      // 弹窗提示内容
      levitatedSphereContent: '由于您长时间未操作，将自动断开视频链接（不影响云手机内应用运行）',
      // 间隔无操作时间
      noOperationSetTimeoutTime: 300000,
      // 超过指定触碰时间的弹窗文案
      confirmButtonText: '',
      // 超过指定触碰时间的弹窗定时器
      noOperationSetTimeoutTimeInterval: null,
      // 弹窗后的倒计时定时器
      noOperationSetIntervalTimeInterval: null,
    }
  },
  methods: {
    // 查询超过指定触碰时间是否提示关闭弹窗
    pushflowPopup(){
      this.$axios.get('/public/v5/pushflow/popup').then(res => {
        if (res.success) {
          this.isFiringNoOperationSetTimeout = res.data;
          this.noOperationSetTimeout();
        }
      })
    },
    // 不触碰屏幕显示退出链接弹窗
    noOperationSetTimeout(key) {
      if (!this.isFiringNoOperationSetTimeout) return

      clearTimeout(this.noOperationSetTimeoutTimeInterval);

      if (key === 'cancel') {
        clearInterval(this.noOperationSetIntervalTimeInterval);
        // 关闭弹窗
        this.noOperationSetTimeoutTimeVisible = false;
        this.noOperationSetTimeout();
        return;
      }

      // 超过指定触碰时间的弹窗定时器
      this.noOperationSetTimeoutTimeInterval = setTimeout(() => {
        let index = 9;
        this.confirmButtonText = '退出（10秒）';
        // 超过指定触碰时间的弹窗定时器
        this.noOperationSetTimeoutTimeVisible = true;
        // 弹窗后的倒计时定时器
        this.noOperationSetIntervalTimeInterval = setInterval(() => {
          this.confirmButtonText = `退出${index ? `（${index}秒）` : ''}`
          index--;
          if (index < 0) {
            // 关闭弹窗, 并清空倒计时定时器
            this.noOperationSetTimeout('cancel')
            // 退出云手机
            this.exit();
          }
        }, 1000);
      }, this.noOperationSetTimeoutTime)
    },
    // 退出
    exit() {
      this.$emit('exit');
    },
  }
}
</script>

<style>

</style>