|
|
@@ -13,11 +13,17 @@
|
|
|
<span class="videoCurrentTime_style">|</span>
|
|
|
<span class="btn_sty" @click="seekVideo0">从头播放</span>
|
|
|
</div>
|
|
|
+ <takePicture
|
|
|
+ ref="takePicture"
|
|
|
+ @returnParameter="returnParameter"
|
|
|
+ ></takePicture>
|
|
|
</div>
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
+import takePicture from "@/components/takePicture/index.vue";
|
|
|
export default {
|
|
|
+ components: { takePicture },
|
|
|
inject: ["getGoodsData"],
|
|
|
data() {
|
|
|
return {
|
|
|
@@ -28,7 +34,8 @@ export default {
|
|
|
photoHistoryList: [], //历史和已拍照数据
|
|
|
photoIndex: 0, //当前拍照对应索引
|
|
|
showRecordStatus: false, //是否显示从头播放提示
|
|
|
- showRecordSetTimeOut: null //从头播放提示计时器函数
|
|
|
+ showRecordSetTimeOut: null, //从头播放提示计时器函数
|
|
|
+ openPhotoStatus: 0 //暂存学习状态
|
|
|
};
|
|
|
},
|
|
|
computed: {
|
|
|
@@ -229,7 +236,7 @@ export default {
|
|
|
return photoList;
|
|
|
},
|
|
|
//postTime = true 只提交随机时间 false 提交拍照
|
|
|
- postCoursePhotoRecord(postTime = false) {
|
|
|
+ postCoursePhotoRecord(postTime = false, photoUrl) {
|
|
|
return new Promise((resolve, reject) => {
|
|
|
let currentTime = this.player.j2s_getCurrentTime();
|
|
|
let data = {
|
|
|
@@ -239,7 +246,7 @@ export default {
|
|
|
moduleId: this.activeSection.moduleId,
|
|
|
chapterId: this.activeSection.chapterId,
|
|
|
sectionId: this.activeSection.sectionId,
|
|
|
- photo: this.ossAvatarUrl,
|
|
|
+ photo: postTime ? "" : photoUrl,
|
|
|
photoTime: parseInt(currentTime > 0 ? currentTime : 0),
|
|
|
photoIndex: postTime ? -2 : parseInt(this.photoIndex), //从0算起,-2只提交随机时间
|
|
|
photoNum: parseInt(this.goodsData.goodsPhotographConfig.photoNum),
|
|
|
@@ -248,7 +255,7 @@ export default {
|
|
|
this.$request
|
|
|
.coursePhotoRecord(data)
|
|
|
.then(res => {
|
|
|
- resolve();
|
|
|
+ resolve(res);
|
|
|
})
|
|
|
.catch(err => {
|
|
|
reject();
|
|
|
@@ -426,8 +433,39 @@ export default {
|
|
|
},
|
|
|
//当前视频播放完毕时触发
|
|
|
onPlayOver() {
|
|
|
+ this.$message({
|
|
|
+ type: "success",
|
|
|
+ message: "播放完毕"
|
|
|
+ });
|
|
|
+ this.isFullScreen();
|
|
|
+ this.postStudyRecord(1);
|
|
|
console.log("当前视频播放完毕时触发");
|
|
|
},
|
|
|
+
|
|
|
+ //判断是全屏则退出全屏
|
|
|
+ isFullScreen() {
|
|
|
+ if (!!(document.webkitIsFullScreen || this.fullele())) {
|
|
|
+ try {
|
|
|
+ var de = document;
|
|
|
+ if (de.exitFullscreen) {
|
|
|
+ de.exitFullscreen();
|
|
|
+ } else if (de.mozCancelFullScreen) {
|
|
|
+ de.mozCancelFullScreen();
|
|
|
+ } else if (de.webkitCancelFullScreen) {
|
|
|
+ de.webkitCancelFullScreen();
|
|
|
+ }
|
|
|
+ } catch (err) {}
|
|
|
+ }
|
|
|
+ },
|
|
|
+ fullele() {
|
|
|
+ return (
|
|
|
+ document.fullscreenElement ||
|
|
|
+ document.webkitFullscreenElement ||
|
|
|
+ document.msFullscreenElement ||
|
|
|
+ document.mozFullScreenElement ||
|
|
|
+ null
|
|
|
+ );
|
|
|
+ },
|
|
|
//播放出现错误时触发
|
|
|
onPlayerError() {
|
|
|
this.$message.error("播放出现错误时触发");
|
|
|
@@ -437,7 +475,166 @@ export default {
|
|
|
this.$message.error("发生业务逻辑错误");
|
|
|
},
|
|
|
//启动拍照
|
|
|
- openPhoto() {}
|
|
|
+ openPhoto() {
|
|
|
+ this.$refs.takePicture.openPhoto();
|
|
|
+ },
|
|
|
+ //拍照成功回显 url
|
|
|
+ async returnParameter(url) {
|
|
|
+ let compareFaceData = await this.faceRecognition(url);
|
|
|
+ if (compareFaceData >= 80) {
|
|
|
+ let file = this.$tools.convertBase64UrlToBlob(url);
|
|
|
+ const photoUrl = await this.$upload.upload(file, 0, {
|
|
|
+ gradeId: this.goodsData.gradeId,
|
|
|
+ orderGoodsId: this.goodsData.orderGoodsId
|
|
|
+ });
|
|
|
+ this.postCoursePhotoRecord(false, photoUrl)
|
|
|
+ .then(async res => {
|
|
|
+ this.photoHistoryList.push(this.photoIndex);
|
|
|
+ const STATUS = await this.postStudyRecord(
|
|
|
+ 0,
|
|
|
+ photoUrl,
|
|
|
+ compareFaceData
|
|
|
+ ); //提交记录
|
|
|
+ //恢复播放
|
|
|
+ if (STATUS) {
|
|
|
+ var polyvPlayerContext = this.player;
|
|
|
+ if (polyvPlayerContext && this.openPhotoStatus !== 1) {
|
|
|
+ polyvPlayerContext.j2s_resumeVideo();
|
|
|
+ }
|
|
|
+ }
|
|
|
+ })
|
|
|
+ .catch(err => {
|
|
|
+ this.$message({
|
|
|
+ type: "warning",
|
|
|
+ message: "上传接口报错，请重新拍照上传"
|
|
|
+ });
|
|
|
+ setTimeout(() => {
|
|
|
+ this.openPhoto();
|
|
|
+ }, 1500);
|
|
|
+ });
|
|
|
+ } else {
|
|
|
+ this.$message({
|
|
|
+ type: "warning",
|
|
|
+ message: "人脸匹配不通过，请重新拍照上传"
|
|
|
+ });
|
|
|
+ setTimeout(() => {
|
|
|
+ this.openPhoto();
|
|
|
+ }, 1500);
|
|
|
+ }
|
|
|
+ },
|
|
|
+
|
|
|
+ /**
|
|
|
+ * 提交观看记录
|
|
|
+ * status 1 学完 0未学完
|
|
|
+ */
|
|
|
+ postStudyRecord(status = 0, imgUrl, compareFaceData) {
|
|
|
+ return new Promise((resolve, reject) => {
|
|
|
+ let currentTime = 0;
|
|
|
+ let PlayDuration = 0;
|
|
|
+ var polyvPlayerContext = this.player;
|
|
|
+ if (polyvPlayerContext) {
|
|
|
+ currentTime = polyvPlayerContext.j2s_getCurrentTime(); //当前视频播放时刻
|
|
|
+ PlayDuration = polyvPlayerContext.j2s_realPlayVideoTime(); //本次看的时长
|
|
|
+ }
|
|
|
+ let data = {
|
|
|
+ orderGoodsId: parseInt(this.goodsData.orderGoodsId),
|
|
|
+ goodsId: parseInt(this.goodsData.goodsId),
|
|
|
+ gradeId: parseInt(this.goodsData.gradeId),
|
|
|
+ courseId: this.activeSection.courseId,
|
|
|
+ moduleId: this.activeSection.moduleId,
|
|
|
+ chapterId: this.activeSection.chapterId,
|
|
|
+ sectionId: this.activeSection.sectionId,
|
|
|
+ fromPlat: 2, //来源平台 1小程序 2网站
|
|
|
+ photo: imgUrl || "",
|
|
|
+ studyDuration: parseInt(PlayDuration > 0 ? PlayDuration : 0),
|
|
|
+ videoCurrentTime: parseInt(currentTime > 0 ? currentTime : 0),
|
|
|
+ erJianErZao: this.goodsData.erJianErZao
|
|
|
+ };
|
|
|
+
|
|
|
+ if (imgUrl) {
|
|
|
+ data.similarity = compareFaceData; // 相似度
|
|
|
+ }
|
|
|
+ if (status > 0) {
|
|
|
+ data.status = status;
|
|
|
+ }
|
|
|
+ // /study/record 学习记录
|
|
|
+ this.$request
|
|
|
+ .studyRecord(data)
|
|
|
+ .then(res => {
|
|
|
+ if (status > 0) {
|
|
|
+ this.openPhotoStatus = 0;
|
|
|
+ this.$message.success("学习完成");
|
|
|
+ resolve(false);
|
|
|
+ }
|
|
|
+ if (this.openPhotoStatus === 1) {
|
|
|
+ this.postStudyRecord(1);
|
|
|
+ }
|
|
|
+ if (status == 0 && this.openPhotoStatus !== 1) {
|
|
|
+ resolve(true);
|
|
|
+ }
|
|
|
+ })
|
|
|
+ .catch(err => {
|
|
|
+ if (err.code === 600) {
|
|
|
+ polyvPlayerContext.j2s_pauseVideo();
|
|
|
+ this.$confirm(`开通信息推送不成功，无法学习！`, "提示", {
|
|
|
+ confirmButtonText: "确定",
|
|
|
+ closeOnClickModal: false,
|
|
|
+ closeOnPressEscape: false,
|
|
|
+ distinguishCancelAndClose: false,
|
|
|
+ showCancelButton: false,
|
|
|
+ showClose: false
|
|
|
+ })
|
|
|
+ .then(_ => {
|
|
|
+ //停止执行-退出页面
|
|
|
+ this.$router.back(-1);
|
|
|
+ })
|
|
|
+ .catch(_ => {
|
|
|
+ //停止执行-退出页面
|
|
|
+ this.$router.back(-1);
|
|
|
+ });
|
|
|
+ }
|
|
|
+ if (err.code === 559) {
|
|
|
+ console.log("拍照不够触发");
|
|
|
+ this.$message.error(err.msg);
|
|
|
+ this.openPhotoStatus = 1;
|
|
|
+ setTimeout(() => {
|
|
|
+ this.openPhoto();
|
|
|
+ }, 1500);
|
|
|
+ }
|
|
|
+ if (err.code === 558) {
|
|
|
+ this.$message.error(err.msg);
|
|
|
+ }
|
|
|
+ });
|
|
|
+ });
|
|
|
+ },
|
|
|
+ //人脸校验
|
|
|
+ faceRecognition(url) {
|
|
|
+ return new Promise(resolve => {
|
|
|
+ this.$request
|
|
|
+ .faceCertificationCompareFace({
|
|
|
+ imageA: url,
|
|
|
+ orderGoodsId: this.goodsData.orderGoodsId,
|
|
|
+ gradeId: this.goodsData.gradeId
|
|
|
+ })
|
|
|
+ .then(res => {
|
|
|
+ resolve(res.data);
|
|
|
+ })
|
|
|
+ .catch(err => {
|
|
|
+ if (err.toString().indexOf("timeout") != -1) {
|
|
|
+ err = {
|
|
|
+ msg: "拍照超时，请重新拍照"
|
|
|
+ };
|
|
|
+ }
|
|
|
+ this.$message({
|
|
|
+ type: "warning",
|
|
|
+ message: err.msg
|
|
|
+ });
|
|
|
+ setTimeout(() => {
|
|
|
+ this.openPhoto();
|
|
|
+ }, 1500);
|
|
|
+ });
|
|
|
+ });
|
|
|
+ }
|
|
|
}
|
|
|
};
|
|
|
</script>
|
