|
@@ -1,98 +1,84 @@
|
|
|
-<!--<script setup lang="ts">-->
|
|
|
-<!--/*-->
|
|
|
-<!-- * 组件名: cocos-->
|
|
|
-<!-- * 组件用途: cocos外框-->
|
|
|
-<!-- * 创建日期: 2024/8/21-->
|
|
|
-<!-- * 编写者: JutarryWu-->
|
|
|
-<!-- */-->
|
|
|
-<!--const userId = sessionStorage.getItem('userId')-->
|
|
|
-<!--// const src = `https://byly.jue-ming.com/xuanZeXunLian/?userId=${userId}`-->
|
|
|
-<!--const src = `http://192.168.1.20:7456/?userId=${userId}`-->
|
|
|
-<!--async function exec() {-->
|
|
|
-<!--}-->
|
|
|
-<!--// 定义响应式数据-->
|
|
|
-<!--const hideOne = ref(true)-->
|
|
|
-<!--const hideTwo = ref(true)-->
|
|
|
-<!--const iframe = ref()-->
|
|
|
-<!--// 显示 Cocos 模态框-->
|
|
|
-<!--const showCocos = () => {-->
|
|
|
-<!-- hideTwo.value = false-->
|
|
|
-<!-- setTimeout(() => {-->
|
|
|
-<!-- hideOne.value = false-->
|
|
|
-<!-- }, 260)-->
|
|
|
-<!--}-->
|
|
|
-
|
|
|
-<!--// 隐藏 Cocos 模态框-->
|
|
|
-<!--const hideCocos = () => {-->
|
|
|
-<!-- hideOne.value = true-->
|
|
|
-<!-- setTimeout(() => {-->
|
|
|
-<!-- hideTwo.value = true-->
|
|
|
-<!-- }, 260)-->
|
|
|
-<!--}-->
|
|
|
-<!--// 初始化 iframe-->
|
|
|
-<!--const initIframe = () => {-->
|
|
|
-<!-- showCocos()-->
|
|
|
-<!-- iframe.value = document.getElementById('cocosDialog')-->
|
|
|
-<!-- iframe.value.onload = () => {-->
|
|
|
-<!-- window.addEventListener('message', (e) => {-->
|
|
|
-<!-- if (e.data === 'close') {-->
|
|
|
-<!-- hideCocos()-->
|
|
|
-<!-- } else if (e.data === 'cocos-game-load-over') {-->
|
|
|
-<!-- // console.log('cocos-game-load-over', props.level)-->
|
|
|
-<!-- // sendMessage(props.level)-->
|
|
|
-<!-- }-->
|
|
|
-<!-- })-->
|
|
|
-<!-- }-->
|
|
|
-<!--}-->
|
|
|
-
|
|
|
-<!--// 组件挂载后执行-->
|
|
|
-<!--onMounted(() => {-->
|
|
|
-<!-- nextTick(() => {-->
|
|
|
-<!-- initIframe()-->
|
|
|
-<!-- })-->
|
|
|
-<!--})-->
|
|
|
-<!--// onMounted(() => {-->
|
|
|
-<!--// exec()-->
|
|
|
-<!--// })-->
|
|
|
-<!--</script>-->
|
|
|
-
|
|
|
-<!--<template>-->
|
|
|
-<!-- <section class="app-container">-->
|
|
|
-<!-- <div v-if="false" class="absolute right-[12px] top-[12px] z-[999] cursor-pointer">-->
|
|
|
-<!-- <van-icon name="arrow-up" class="text-[24px] text-[#fff]" />-->
|
|
|
-<!-- </div>-->
|
|
|
-<!-- <iframe-->
|
|
|
-<!-- id="cocosDialog"-->
|
|
|
-<!-- :src="src"-->
|
|
|
-<!-- width="100%"-->
|
|
|
-<!-- height="100%"-->
|
|
|
-<!-- frameborder="0"-->
|
|
|
-<!-- scrolling="no"-->
|
|
|
-<!-- />-->
|
|
|
-<!-- </section>-->
|
|
|
-<!--</template>-->
|
|
|
-
|
|
|
-<!--<style scoped lang="scss">-->
|
|
|
-<!--.app-container {-->
|
|
|
-<!--}-->
|
|
|
-<!--</style>-->
|
|
|
-<template>
|
|
|
- <div
|
|
|
- :class="{ 'hide-one': hideOne, 'hide-two': hideTwo }"
|
|
|
- class="cocos-modal"
|
|
|
- >
|
|
|
- <iframe
|
|
|
- id="cocosDialog"
|
|
|
- :src="src"
|
|
|
- allow="microphone *;camera *"
|
|
|
- style="border: none;"
|
|
|
- ></iframe>
|
|
|
- </div>
|
|
|
-</template>
|
|
|
-
|
|
|
+<!-- <script setup lang="ts"> -->
|
|
|
+<!-- /* -->
|
|
|
+<!-- * 组件名: cocos -->
|
|
|
+<!-- * 组件用途: cocos外框 -->
|
|
|
+<!-- * 创建日期: 2024/8/21 -->
|
|
|
+<!-- * 编写者: JutarryWu -->
|
|
|
+<!-- */ -->
|
|
|
+<!-- const userId = sessionStorage.getItem('userId') -->
|
|
|
+<!-- // const src = `https://byly.jue-ming.com/xuanZeXunLian/?userId=${userId}` -->
|
|
|
+<!-- const src = `http://192.168.1.20:7456/?userId=${userId}` -->
|
|
|
+<!-- async function exec() { -->
|
|
|
+<!-- } -->
|
|
|
+<!-- // 定义响应式数据 -->
|
|
|
+<!-- const hideOne = ref(true) -->
|
|
|
+<!-- const hideTwo = ref(true) -->
|
|
|
+<!-- const iframe = ref() -->
|
|
|
+<!-- // 显示 Cocos 模态框 -->
|
|
|
+<!-- const showCocos = () => { -->
|
|
|
+<!-- hideTwo.value = false -->
|
|
|
+<!-- setTimeout(() => { -->
|
|
|
+<!-- hideOne.value = false -->
|
|
|
+<!-- }, 260) -->
|
|
|
+<!-- } -->
|
|
|
+
|
|
|
+<!-- // 隐藏 Cocos 模态框 -->
|
|
|
+<!-- const hideCocos = () => { -->
|
|
|
+<!-- hideOne.value = true -->
|
|
|
+<!-- setTimeout(() => { -->
|
|
|
+<!-- hideTwo.value = true -->
|
|
|
+<!-- }, 260) -->
|
|
|
+<!-- } -->
|
|
|
+<!-- // 初始化 iframe -->
|
|
|
+<!-- const initIframe = () => { -->
|
|
|
+<!-- showCocos() -->
|
|
|
+<!-- iframe.value = document.getElementById('cocosDialog') -->
|
|
|
+<!-- iframe.value.onload = () => { -->
|
|
|
+<!-- window.addEventListener('message', (e) => { -->
|
|
|
+<!-- if (e.data === 'close') { -->
|
|
|
+<!-- hideCocos() -->
|
|
|
+<!-- } else if (e.data === 'cocos-game-load-over') { -->
|
|
|
+<!-- // console.log('cocos-game-load-over', props.level) -->
|
|
|
+<!-- // sendMessage(props.level) -->
|
|
|
+<!-- } -->
|
|
|
+<!-- }) -->
|
|
|
+<!-- } -->
|
|
|
+<!-- } -->
|
|
|
+
|
|
|
+<!-- // 组件挂载后执行 -->
|
|
|
+<!-- onMounted(() => { -->
|
|
|
+<!-- nextTick(() => { -->
|
|
|
+<!-- initIframe() -->
|
|
|
+<!-- }) -->
|
|
|
+<!-- }) -->
|
|
|
+<!-- // onMounted(() => { -->
|
|
|
+<!-- // exec() -->
|
|
|
+<!-- // }) -->
|
|
|
+<!-- </script> -->
|
|
|
+
|
|
|
+<!-- <template> -->
|
|
|
+<!-- <section class="app-container"> -->
|
|
|
+<!-- <div v-if="false" class="absolute right-[12px] top-[12px] z-[999] cursor-pointer"> -->
|
|
|
+<!-- <van-icon name="arrow-up" class="text-[24px] text-[#fff]" /> -->
|
|
|
+<!-- </div> -->
|
|
|
+<!-- <iframe -->
|
|
|
+<!-- id="cocosDialog" -->
|
|
|
+<!-- :src="src" -->
|
|
|
+<!-- width="100%" -->
|
|
|
+<!-- height="100%" -->
|
|
|
+<!-- frameborder="0" -->
|
|
|
+<!-- scrolling="no" -->
|
|
|
+<!-- /> -->
|
|
|
+<!-- </section> -->
|
|
|
+<!-- </template> -->
|
|
|
+
|
|
|
+<!-- <style scoped lang="scss"> -->
|
|
|
+<!-- .app-container { -->
|
|
|
+<!-- } -->
|
|
|
+<!-- </style> -->
|
|
|
<script setup>
|
|
|
-import { ref, onMounted, nextTick, onUnmounted } from 'vue'
|
|
|
-import {showSuccessToast} from "vant";
|
|
|
+import { nextTick, onMounted, onUnmounted, ref } from 'vue'
|
|
|
+
|
|
|
const userId = sessionStorage.getItem('userId')
|
|
|
const src = `https://byly.jue-ming.com/xuanZeXunLian/?userID=${userId}`
|
|
|
// const src = `http://192.168.1.20:7456/?userID=${userId}`
|
|
@@ -103,7 +89,7 @@ const iframe = ref(null)
|
|
|
const router = useRouter()
|
|
|
|
|
|
// 显示 Cocos 模态框
|
|
|
-const showCocos = () => {
|
|
|
+function showCocos() {
|
|
|
hideTwo.value = false
|
|
|
setTimeout(() => {
|
|
|
hideOne.value = false
|
|
@@ -111,7 +97,7 @@ const showCocos = () => {
|
|
|
}
|
|
|
|
|
|
// 隐藏 Cocos 模态框
|
|
|
-const hideCocos = () => {
|
|
|
+function hideCocos() {
|
|
|
hideOne.value = true
|
|
|
setTimeout(() => {
|
|
|
hideTwo.value = true
|
|
@@ -120,7 +106,7 @@ const hideCocos = () => {
|
|
|
}
|
|
|
|
|
|
// 处理接收到的消息
|
|
|
-const handleMessage = (e) => {
|
|
|
+function handleMessage(e) {
|
|
|
console.log('接收到消息', e.data)
|
|
|
// 限定消息来源,替换为实际的 Cocos 页面域名
|
|
|
// const expectedOrigin = 'http://192.168.1.20:7456'
|
|
@@ -128,7 +114,8 @@ const handleMessage = (e) => {
|
|
|
if (e.data === 'close') {
|
|
|
console.log('收到关闭消息')
|
|
|
router.go(-1)
|
|
|
- }else if (e.data === 'cocos-close') {
|
|
|
+ }
|
|
|
+ else if (e.data === 'cocos-close') {
|
|
|
// showSuccessToast('本次训练已结束')
|
|
|
setTimeout(() => {
|
|
|
// 使用示例
|
|
@@ -147,12 +134,11 @@ const handleMessage = (e) => {
|
|
|
// 执行浏览器环境下的逻辑
|
|
|
}
|
|
|
}, 1300)
|
|
|
-
|
|
|
}
|
|
|
}
|
|
|
|
|
|
// 初始化 iframe
|
|
|
-const initIframe = () => {
|
|
|
+function initIframe() {
|
|
|
showCocos()
|
|
|
iframe.value = document.getElementById('cocosDialog')
|
|
|
if (iframe.value) {
|
|
@@ -177,6 +163,20 @@ onUnmounted(() => {
|
|
|
})
|
|
|
</script>
|
|
|
|
|
|
+<template>
|
|
|
+ <div
|
|
|
+ :class="{ 'hide-one': hideOne, 'hide-two': hideTwo }"
|
|
|
+ class="cocos-modal"
|
|
|
+ >
|
|
|
+ <iframe
|
|
|
+ id="cocosDialog"
|
|
|
+ :src="src"
|
|
|
+ allow="microphone *;camera *"
|
|
|
+ style="border: none;"
|
|
|
+ />
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
<style lang="scss" scoped>
|
|
|
.cocos-modal {
|
|
|
background: #1e2022;
|