exam/exam-06173-uni/pages/course/components/ReadCheck.vue

<template>

<view style="display: none;">用户行为监测...</view>

</template>

<script>

export default {
  name: 'ReadCheck',
  props: {
    timeSec: Number
  },
  data() {
    return {
      goSec: 0,
      checkTimer: null,
	  confirmTimer: null,
	  dialogShow: false
    }
  },

  mounted() {
    console.log('定时', this.timeSec)
    this.initTimer()
  },
  
  destroyed() {
  	 this.clearTimer()
  },

  methods: {

    // 确认时间展示
    clearTimer() {
      if(this.checkTimer){
		  clearInterval(this.checkTimer)
		  clearTimeout(this.confirmTimer)
	  }
	  
	  this.goSec = 0
	  this.dialogShow = false
    },

    // 初始化定时器
    initTimer() {
 
 
      this.checkTimer = setInterval(() => {
        if (this.goSec >= this.timeSec && !this.dialogShow) {
		  this.dialogShow = true
          this.showModal()
		  
		  // 30秒确认
		  this.confirmTimer = setTimeout(()=>{
			  clearInterval(this.checkTimer)
			  this.$emit('break')
		  }, 30000)
        }

        this.goSec += 1
      }, 1000 * 60)
    },

	showModal(){
		
		let that = this

		uni.showModal({
		    title: '学习校验',
		    content: `请点击确认按钮继续学习，请在30秒内点击确认按钮！`,
		    success: function (res) {
		        if (res.confirm) {
		            that.clearTimer()
		        } else if (res.cancel) {
		            console.log('用户点击取消');
					that.dialogShow = false
		        }
		    }
		});
	}
  }
}
</script>

<style scoped>

</style>