299 lines
8.9 KiB
Vue
299 lines
8.9 KiB
Vue
<template>
|
||
<div class="content">
|
||
<div style="margin: 10px; color: #2979ff">
|
||
<span v-if="!isEnd">剩余学习时间：{{ time }}</span>
|
||
<span v-else>已完成学习</span>
|
||
</div>
|
||
<u--image :showLoading="true" :src="path" mode="aspectFit" @click="handleImage"></u--image>
|
||
</div>
|
||
</template>
|
||
|
||
<script>
|
||
import config from '@/config'
|
||
import { pathToBase64, base64ToPath } from 'image-tools'
|
||
|
||
export default {
|
||
data() {
|
||
return {
|
||
isShow: true,
|
||
path: '',
|
||
params: {},
|
||
timer: null,
|
||
isEnd: false,
|
||
isShowImg: false,
|
||
time: '',
|
||
isHide: false,
|
||
allStudyDuration: 0,
|
||
random: 0,
|
||
// 失败次数
|
||
failCount: 3
|
||
}
|
||
},
|
||
onLoad(opt) {
|
||
opt = JSON.parse(opt.params)
|
||
console.log('🚀 ~ onLoad ~ opt:', opt)
|
||
this.params = JSON.parse(JSON.stringify(opt))
|
||
this.params.studyDuration = Number(opt.studyDuration)
|
||
this.params.allStudyDuration = Number(opt.allStudyDuration)
|
||
this.path = config.fileUrl + opt.path
|
||
// this.path = opt.path
|
||
console.log('🚀 ~ onLoad ~ this.params:', this.path)
|
||
console.log('🚀 ~ onLoad ~ this.params:', Number(opt.studyDuration), Number(opt.allStudyDuration))
|
||
this.allStudyDuration = Number(this.params.allStudyDuration) - Number(this.params.studyDuration)
|
||
this.random = (this.allStudyDuration / 2).toFixed(0)
|
||
|
||
if (Number(opt.studyDuration) < Number(opt.allStudyDuration)) {
|
||
this.isEnd = false
|
||
setTimeout(() => {
|
||
this.countDown()
|
||
}, 1000)
|
||
} else {
|
||
this.isEnd = true
|
||
// 提示-学习时长已满
|
||
uni.showToast({
|
||
title: '学习时长已满, 随时可以结束学习',
|
||
icon: 'none'
|
||
})
|
||
}
|
||
},
|
||
onShow() {
|
||
console.log('🚀 ~ onShow ~ 页面显示')
|
||
this.isShowImg = false
|
||
},
|
||
// 卸载 隐藏是调用 onHide
|
||
onHide() {
|
||
console.log('🚀 ~ onHide ~ 页面关闭')
|
||
if (this.isEnd || this.isHide) {
|
||
return
|
||
}
|
||
// 关闭页面时，修改项目进度
|
||
if (!this.isShowImg) {
|
||
clearInterval(this.timer)
|
||
this.updStudyDuration()
|
||
}
|
||
},
|
||
onUnload() {
|
||
console.log('🚀 ~ onUnload ~ onUnload-页面关闭:')
|
||
if (this.isEnd) {
|
||
return
|
||
}
|
||
// 关闭页面时，修改项目进度
|
||
if (!this.isShowImg) {
|
||
clearInterval(this.timer)
|
||
this.updStudyDuration()
|
||
}
|
||
},
|
||
methods: {
|
||
// 根据allStudyDuration 倒计时
|
||
countDown() {
|
||
// let allStudyDuration = Number(this.params.allStudyDuration) - Number(this.params.studyDuration)
|
||
let minute = Math.floor(this.allStudyDuration / 60)
|
||
minute = String(minute).padStart(2, '0')
|
||
let second = this.allStudyDuration % 60
|
||
second = String(second).padStart(2, '0')
|
||
this.time = minute + ':' + second
|
||
this.timer = setInterval(() => {
|
||
if (!this.isHide) {
|
||
this.allStudyDuration--
|
||
this.params.studyDuration++
|
||
}
|
||
if (this.allStudyDuration == this.random) {
|
||
this.isShow = false
|
||
clearInterval(this.timer)
|
||
this.openPhotograph()
|
||
}
|
||
console.log('🚀 ~ countDown ~ this.params.studyDuration:', this.params.studyDuration)
|
||
if (this.allStudyDuration <= 0) {
|
||
this.params.studyDuration = this.params.allStudyDuration
|
||
this.isEnd = true
|
||
clearInterval(this.timer)
|
||
// 提示-学习时长已满
|
||
uni.showToast({
|
||
title: '学习时长已满',
|
||
icon: 'none'
|
||
})
|
||
setTimeout(() => {
|
||
this.updStudyDuration()
|
||
}, 1000)
|
||
}
|
||
let arr = this.time.split(':')
|
||
let minute = parseInt(arr[0])
|
||
let second = parseInt(arr[1])
|
||
if (second == 0) {
|
||
minute -= 1
|
||
second = 59
|
||
if (minute < 10) {
|
||
minute = String(minute).padStart(2, '0')
|
||
}
|
||
} else {
|
||
second -= 1
|
||
if (minute < 10) {
|
||
minute = String(minute).padStart(2, '0')
|
||
}
|
||
if (second < 10) {
|
||
second = String(second).padStart(2, '0')
|
||
}
|
||
}
|
||
this.time = minute + ':' + second
|
||
console.log('🚀 ~ countDown ~ 剩余时间-->:', this.allStudyDuration)
|
||
console.log('🚀 ~ countDown ~ this.params.studyDuration:', this.params.studyDuration)
|
||
}, 1000)
|
||
},
|
||
// 修改项目进度
|
||
updStudyDuration() {
|
||
const params = {
|
||
userId: this.params.userId,
|
||
studyId: this.params.studyId,
|
||
stageId: this.params.stageId,
|
||
stageContentId: this.params.stageContentId,
|
||
stageType: this.params.stageType,
|
||
studyCourseId: this.params.studyCourseId,
|
||
sourceId: this.params.sourceId,
|
||
studyDuration: this.params.studyDuration,
|
||
studyPercentage:
|
||
Math.ceil((Number(this.params.studyDuration) / Number(this.params.allStudyDuration)) * 100).toFixed(2) > 100
|
||
? 100
|
||
: Math.ceil((Number(this.params.studyDuration) / Number(this.params.allStudyDuration)) * 100).toFixed(2)
|
||
}
|
||
console.log('🚀 ~ updStudyDuration ~ params:', params)
|
||
this.$verificationToken()
|
||
uni.request({
|
||
url: config.baseUrl + '/exam-student/student/updStudyDuration',
|
||
method: 'post',
|
||
data: params,
|
||
header: {
|
||
'Content-Type': 'application/x-www-form-urlencoded',
|
||
Authorization: uni.getStorageSync('access_token')
|
||
},
|
||
success: res => {
|
||
console.log('🚀 ~ handleEnd ~ res:', res)
|
||
this.isShow = false
|
||
uni.reLaunch({
|
||
url: '/pages/YNEduApp/learnProj/learnProjDetail?id=' + this.params.studyId
|
||
})
|
||
},
|
||
fail: err => {
|
||
console.log('🚀 ~ handleEnd ~ err:', err)
|
||
}
|
||
})
|
||
},
|
||
// 展示图片
|
||
handleImage() {
|
||
this.isShowImg = true
|
||
uni.previewImage({
|
||
urls: [this.path]
|
||
})
|
||
},
|
||
// 拍照录入
|
||
openPhotograph() {
|
||
this.isHide = true
|
||
uni.chooseImage({
|
||
count: 1,
|
||
sizeType: ['compressed'],
|
||
sourceType: ['camera'],
|
||
success: res => {
|
||
let url = ''
|
||
console.log('🚀 ~ res-拍照:', res)
|
||
this.imgToBase64(res.tempFilePaths[0]).then(base64 => {
|
||
url = base64
|
||
console.log('🚀 ~ this.imgToBase64 ~ base64:', url)
|
||
this.getFaceRecognition({ userId: uni.getStorageSync('userId'), img: url })
|
||
})
|
||
},
|
||
fail(err) {
|
||
console.log('🚀 ~ openFaceScan ~ 人脸识别失败', err)
|
||
uni.showToast({
|
||
title: '人脸识别失败',
|
||
icon: ''
|
||
})
|
||
setTimeout(() => {
|
||
this.updStudyDuration()
|
||
}, 1000)
|
||
}
|
||
})
|
||
},
|
||
imgToBase64(data) {
|
||
return new Promise((resolve, reject) => {
|
||
pathToBase64(data)
|
||
.then(base64 => {
|
||
resolve(base64)
|
||
})
|
||
.catch(error => {
|
||
console.error(error)
|
||
reject(error)
|
||
})
|
||
})
|
||
},
|
||
// 发送请求
|
||
getFaceRecognition(params) {
|
||
console.log('🚀 ~ getFaceRecognition ~ params:', params)
|
||
this.$verificationToken()
|
||
uni.request({
|
||
url: config.baseUrl + '/exam-student/personalCenter/getFaceRecognition',
|
||
method: 'POST',
|
||
header: {
|
||
'content-type': 'application/json',
|
||
Authorization: uni.getStorageSync('access_token')
|
||
},
|
||
data: params,
|
||
success: res => {
|
||
console.log('🚀 ~ openFaceScan ~ res-人脸识别:', res)
|
||
res = res.data
|
||
console.log('🚀 ~ openFaceScan ~ res-人脸识别:', res.code)
|
||
if (res.code == 200) {
|
||
// 提示
|
||
uni.showToast({
|
||
title: '人脸识别成功',
|
||
icon: ''
|
||
})
|
||
this.isHide = false
|
||
this.isShow = true
|
||
this.countDown()
|
||
} else {
|
||
this.failCount--
|
||
if (this.failCount == 0) {
|
||
uni.showToast({
|
||
title: '人脸识别失败, 即将结束学习',
|
||
icon: 'none',
|
||
duration: 1500
|
||
})
|
||
setTimeout(() => {
|
||
this.updStudyDuration()
|
||
}, 1500)
|
||
} else {
|
||
uni.showToast({
|
||
title: '人脸识别失败, 请重新录入, 剩余次数: ' + this.failCount + '次',
|
||
icon: 'none',
|
||
duration: 1500
|
||
})
|
||
setTimeout(() => {
|
||
this.openPhotograph()
|
||
}, 1500)
|
||
}
|
||
}
|
||
},
|
||
fail(err) {
|
||
console.log('🚀 ~ openFaceScan ~ 人脸识别失败', err)
|
||
uni.showToast({
|
||
title: '人脸识别失败',
|
||
icon: ''
|
||
})
|
||
setTimeout(() => {
|
||
this.updStudyDuration()
|
||
}, 1000)
|
||
}
|
||
})
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
.content {
|
||
display: flex;
|
||
flex-direction: column;
|
||
justify-content: center;
|
||
align-items: center;
|
||
}
|
||
</style>
|