inspectionPlayer.nvue

<template>
	<!-- 巡店播放视频 -->
	<view class="inspection-player" :style="`height:${webviewHeight}px`">
		<!-- @message="handleMessage" -->
		<web-view
			v-if="webviewSrc"
			:webview-styles="webviewStyles"
			:style="`height:${webviewHeight}px`"
			:src="webviewSrc"
      @message="handleMessage"
			@onPostMessage="handleMessage"
		></web-view>
		<view v-else>页面加载失败</view>
		
		<!-- <view class="test-message" style="z-index: 999;">
			{{webviewMessage}}
		</view> -->
	</view>
</template>

<script setup>
  import host from '@/utils/ip-config.js'
	import { onMounted, ref } from 'vue'; // onMounted
	import { onLoad } from '@dcloudio/uni-app';
	import { getStageObj } from '@/utils'
	import { getPlayerParams, toQueryString } from './utils.js'
	
	const webviewStyles = ref({
		progress: {
			color: '#42ba7d',
		},
		// height: '100%',
		// height: '300px',
	})
	 // 当前监控点，相关的数据
	const monitorInfoData = ref(null)
	
	// 导航条
	function setPageTitle(name) {
		uni.setNavigationBarTitle({
			title: name,
		});
	}
	// 跳转至表单页面
	function handleNextPage(url) {
		const params = {
			// 开发环境，使用9217
			// restaurantId: 9217,
			restaurantId: monitorInfoData.value.mallId,
			pic: webviewMessage.value.imgUrl,
			gateId: monitorInfoData.value.id,
			mallId: monitorInfoData.value.mallId,
		}
		
		const targetUrl = url || '/subPackages/accountGroup/pages/inspection/inspectionForm'
		const queryString = toQueryString(params)
		uni.navigateTo({
			url: `${targetUrl}?${queryString}`,
		})
	}
	
	const webviewMessage = ref(null)
	// 处理页面跳转
	function processIframeData(targetData) {
		if (targetData.origin === 'processing') {
			webviewMessage.value = targetData
			handleNextPage('/subPackages/accountGroup/pages/inspection/inspectionProcessing')
		} else if (targetData.origin === 'back') {
			uni.navigateBack()
		} else {
			webviewMessage.value = targetData
			handleNextPage()  
		}
	}
	// 获取iframe消息
	function handleMessage(data) {
		console.log('handleMessage', data)
		// uni.showToast({icon: 'success', title: 'message'})
		if (data.detail && data.detail.data) {
			if (data.detail.data.length > 0) {
				// id: 632，imgUrl: 'patrol/screenshot/20250602/dc5497b9-04b7-45af-be99-aaa5ec1cb51d.jpg'
				// webviewMessage.value = data.detail.data[0]
				// handleNextPage()
				
				processIframeData(data.detail.data[0])
			}
		}
	}
	
	const webviewHeight = ref(0)
	const webviewSrc = ref('')
	onLoad((options) => {
		console.log('onLoad', options)
		// 设置容器高度
		const systemInfo = uni.getSystemInfoSync()
		webviewHeight.value = systemInfo.windowHeight
		
    // 'https://store.keliuyun.com/apph5/'
    // const targetDomain = 'http://192.168.1.20:3000/apph5/'
		const targetDomain = `https://store.keliuyun.com/apph5/`
		
		// 从localStorage中，获取监控点相关信息
		const targetData = uni.getStorageSync('inspectionCurrentMonitor')
		monitorInfoData.value = JSON.parse(targetData) || {}
		// 开发环境，变量为true
		const targetParams = getPlayerParams(monitorInfoData.value, false)
		
		// 设置标题为，监控点名称
		setPageTitle(targetParams.name)
		console.log('targetParams', targetParams)
		// const queryString = new URLSearchParams(targetParams).toString();
		
		const queryString = toQueryString(targetParams)
		webviewSrc.value = `${targetDomain}?${queryString}`
    console.log(webviewSrc.value,'-s-s-s-s-s');
		
		// 设置postMessage
		/* #ifdef H5 */
		window.onmessage = function(event) {
		  console.log("收到消息：", event);
		  const targetData = event.data?.data
		  if (targetData && targetData.arg) {
			  processIframeData(targetData.arg)
		  }
		};
		/* #endif */
	})
</script>

<style lang="scss" scoped>
	.inspection-player {
		height: 100vh;
	}
</style>