tqApp-webView/learnMobile/materialList/details.vue

<template>
    <view class="pageContainer">
        <ss-preview :fileUrl="fileUrl" v-if="fileUrl" :fileType="fileType" :imageList="imageList"></ss-preview>
        <view class="countDownTime" v-show="countDownTime">剩余时间：{{ countDownTime }}s</view>
		
		<!-- 人脸校验 -->
		<tq-face ref="faceRef" 
			@success="faceSuccess"
			@close="faceClose"
		></tq-face>
    </view>
</template>
<script>
import ssPreview from '@/uni_modules/ss-preview/components/ss-preview/ss-preview.vue'

import { materialDetail, saveUserMaterial } from "@/api/learnMobile/index";
let deepSetInterval;
let countDownInterval;
export default {
    components: {
        ssPreview
    },
    data() {
        return {
            fileType: '2', //类型（1.预览图片，2.预览文件，3.预览视频）
            showPreview: false,
            id: '',
            fileUrl: '',
            imageList: [],
            startTime: '',
            endTime: '',
            countDownTime: '',
            recordId: '',
			
			isValidFace: false, //是否检验人脸
			lastTime: '', //人脸校验前剩余时间
			rdTime: '',//触发人脸时间点
        }
    },
    onLoad(option) {
        this.id = option.id
        console.log('参数', option)
        this.startTime = this.dayjs().format('YYYY-MM-DD HH:mm:ss')
        this.getData();
    },
    //页面销毁事件
    onUnload() {
        console.log('销毁')
        clearInterval(deepSetInterval)
        clearInterval(countDownInterval)
    },
    methods: {
		
		getRandomInteger(min, max) {
		  return Math.floor(Math.random() * (max - min + 1)) + min;
		},
		
		randomTime(time) {
			let max = time-1
			this.rdTime = this.getRandomInteger(1,max)
		},
		
        async getData() {
            let { data, code } = await materialDetail({
                id: this.id
            })
            if (code == '0') {
                if (data.type === 1) {
                    this.fileType = '2'
                }
                if (data.type === 2) {
                    this.fileType = '3'
                }
				this.randomTime(data.learnTime)
                this.countDown(data.learnTime)
                this.fileUrl = this.$getImages(data.annexUrl)
            }
        },
        /**倒计时 */
        countDown(time) {
            countDownInterval = setInterval(() => {
				if(time == this.rdTime && !this.isValidFace) {
					this.lastTime = time
					clearInterval(countDownInterval)
					this.openFace()
					return
				}
                time--
                this.countDownTime = time
                if (time <= 0) {
                    clearInterval(countDownInterval)
                    this.countDownTime = 0
                    this.endTime = this.dayjs().format('YYYY-MM-DD HH:mm:ss')
                    this.saveLearn()
                }
            }, 1000)
        },
        /**保存学习记录 */
        async saveLearn() {
            let { code, data } = await saveUserMaterial({
                startTime: this.startTime,
                endTime: this.dayjs().format('YYYY-MM-DD HH:mm:ss'),//this.endTime,
                materialId: this.id,
                recordId: this.recordId
            })
            if (code == '0') {
                // uni.showToast({
                //     title: '学习成功'
                // })
                this.recordId = data.recordId
                if (!deepSetInterval) {
                    this.deepSaveLearn()
                }
            }
        },
        deepSaveLearn() {
            if (deepSetInterval) clearInterval(deepSetInterval);
            deepSetInterval = setInterval(e => {
                this.saveLearn()
            }, 5000)
        },
		openFace() {
			this.$refs.faceRef.show()
		},
		faceClose() {
			uni.navigateBack()
		},
		faceSuccess() {
			this.isValidFace = true
			this.countDown(this.lastTime)
		}
    },
}

</script>
<style lang="scss" scoped>
.pageContainer {
    height: 100%;

    .nodata-image {
        height: 500px;
        width: 100%;
    }

    .countDownTime {
        position: fixed;
        z-index: 999;
        // width: 400rpx;
        bottom: 0;
        left: 0;
        background: rgba(255, 255, 255, .4);
        color: rgba(0, 0, 0, .6);
        border-radius: 4rpx;
        padding: 4rpx 18rpx;
    }
}
</style>