<template> <view> <web-view @message="onmessage" src="/hybrid/html/ddvideo.html"></web-view> </view> </template> <script> import { clzConfirm,saveBase64ToAliOss } from '@/libs/tools' import {getTaskDetail,savePointTask} from '@/api/task' import {getTaskTargetById} from '@/api/taskTarget' import { photoPaiZhao, getVideoUrl } from '@/api/store'; export default { data() { return { wv: null, isClose: false, // 是否关闭当前窗口 isEditImg: false, // 是否正在编辑图片 showPz: false, // 是否正在拍照 types: 'video', // 巡店类型,video,scene taskId: '', // 任务id storeId: '', // 门店id storeName: '',// 门店名称 }; }, methods: { // 监听html页面事件 onmessage(event) { let data = event.detail.data[0] // console.log(data) if(data.action == 'toast'){ uni.showToast({ icon:'none', title: data.msg }) } // webview 窗口传过来的页面状态 if(data.action == 'getWinStatus'){ let d = JSON.parse(data.msg) this[d.key] = d.val } // 获取视频地址 if(data.action == 'getVideoUrl'){ this.getStoreVideoUrl(JSON.parse(data.msg)) } // 抓拍图片 if(data.action == 'takePhotos'){ this.takePhotos(JSON.parse(data.msg)) } // 保存编辑后的图片 if(data.action == 'saveEditImg'){ this.uploadImg(data.msg) } // 删除图片 if(data.action == 'delImgs'){ this.delImgs(data.msg) } // 预览图片 if (data.action == 'previewImg') { this.previewImg(data.msg) } // 提交巡店 if(data.action == 'submitTask'){ this.submitTask(JSON.parse(data.msg)) } }, // 删除图片 delImgs(index){ const _this = this; clzConfirm({ title: '提示', content: '确定删除此图片,删除后无法恢复?', success: function(res) { if (res.confirm || res.index == 0) { _this.wv.evalJS("vm.delImgsSuccess("+index+")") } } }); }, // 预览图片 previewImg(path){ uni.previewImage({ urls:[path] }) }, // 拍照截图,data.type 1 是列表按钮触发的,2 是弹框里触发的 takePhotos(data){ if(data.videoPlayerStatus == 'playing'){ uni.showLoading({ mask: true, title: '正在抓拍图片...' }) photoPaiZhao({streamId:data.streamId}).then(res=>{ console.log(res) if(res.data){ this.wv.evalJS("vm.takePhotoSuccess('"+res.data.url+"')") }else{ uni.showToast({ icon:'none', title: res.message || '拍照截图失败,稍后重试' }) } uni.hideLoading() }) }else{ uni.showToast({ icon:'none', title: '开始播放视频后才可以拍照截图' }) } }, // 上传编辑后的图片到阿里云 uploadImg(formData) { const _this = this; saveBase64ToAliOss(formData,function(res){ // console.log(res); // 关闭编辑图片 _this.wv.evalJS("vm.closeImgsEdit()") // 更新编辑后的图片 _this.wv.evalJS("vm.updateItemImg('"+res.data+"')") }) }, // 查询任务明细 getTaskDetail(){ getTaskTargetById({taskId:this.taskId}).then(res => { console.log(res.data) this.wv.evalJS("vm.getTaskDetail('"+JSON.stringify(res.data)+"')") }) }, // 获取视频列表 getVideoList(){ let list = this.$store.state.vuex_storeVideoList this.wv.evalJS("vm.setVideoList('"+JSON.stringify(list)+"')") }, // 获取视频地址 getStoreVideoUrl(item){ getVideoUrl({streamId:item.streamId,outProtocol:"hls"}).then(res=>{ console.log(res) if(res.status == 200&&res.data){ this.wv.evalJS("vm.getVideoUrlSuccess('"+res.data.url+"')") }else{ uni.showToast({ icon:'none', title: "获取视频地址失败,请返回重试" }) } }) }, // 提交本次任务 submitTask(data){ const _this = this; const params = { id: this.taskId, taskTargetDTOList: data } console.log(params,'savePointTask') clzConfirm({ title: '提示', content: '确定提交本次点检任务?', success: function(res) { if (res.confirm || res.index == 0) { savePointTask(params).then(ret=>{ console.log(ret) if(ret.status == 200){ _this.isClose = true // 打开完成页面 uni.redirectTo({ url: '/pages/spotCheckCenter/spotCheckResult?id=' + _this.taskId }); // 刷新列表 uni.$emit('updatePointTaskList') }else{ _this.isClose = false } uni.showToast({ icon:'none', title: ret.message }) }) } } }); }, }, onLoad(options) { // 巡店类型,视频还时现场 this.types = options.types this.taskId = options.taskId this.storeId = options.storeId this.storeName = options.storeName console.log(options,this.taskId) }, onUnload() { uni.$off("closeTour") }, onReady() { let _this = this // #ifdef APP-PLUS //获取当前页面的webview对象 var currentWebview = this.$mp.page.$getAppWebview() //如果是页面初始化调用时,需要延时一下 setTimeout(function() { _this.wv = currentWebview.children()[0] _this.wv.evalJS("vm.setTyps('"+_this.types+"','"+_this.storeName+"')") // 获取视频列表 if(_this.types == 'video'){ _this.getVideoList() } //查询任务项明细 _this.getTaskDetail() }, 500); // #endif // 关闭当前页面 uni.$on("closeTour",(flag)=>{ if(flag==1){ this.isClose = true uni.navigateBack() } }) }, // 监听返回键 onBackPress() { let _this = this if(!_this.isClose){ // 正在编辑图片 if(this.isEditImg){ // 关闭编辑图片 _this.wv.evalJS("vm.closeImgsEdit()") } // 正在拍照 else if(this.showPz){ // 关闭拍照弹框 _this.wv.evalJS("vm.onClosePz()") }else{ clzConfirm({ title: '提示', content: '点检还未完成,确定退出吗?', success: function(res) { if (res.confirm || res.index == 0) { _this.isClose = true uni.navigateBack({ delta: 1 }); } } }); } return true } }, } </script> <style> </style>