|
|
@@ -1,36 +1,206 @@
|
|
|
-<script setup lang="ts">
|
|
|
-/*
|
|
|
- * 组件名: cocos
|
|
|
- * 组件用途: cocos外框
|
|
|
- * 创建日期: 2024/8/21
|
|
|
- * 编写者: JutarryWu
|
|
|
- */
|
|
|
+<!--<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>
|
|
|
+import { ref, onMounted, nextTick, onUnmounted } from 'vue'
|
|
|
+import {showSuccessToast} from "vant";
|
|
|
const userId = sessionStorage.getItem('userId')
|
|
|
-const src = `https://byly.jue-ming.com/xuanZeXunLian/?userId=${userId}`
|
|
|
-async function exec() {
|
|
|
+const src = `https://byly.jue-ming.com/xuanZeXunLian/?userID=${userId}`
|
|
|
+// const src = `http://192.168.1.20:7456/?userID=${userId}`
|
|
|
+// 定义响应式数据
|
|
|
+const hideOne = ref(true)
|
|
|
+const hideTwo = ref(true)
|
|
|
+const iframe = ref(null)
|
|
|
+const router = useRouter()
|
|
|
+
|
|
|
+// 显示 Cocos 模态框
|
|
|
+const showCocos = () => {
|
|
|
+ hideTwo.value = false
|
|
|
+ setTimeout(() => {
|
|
|
+ hideOne.value = false
|
|
|
+ }, 260)
|
|
|
}
|
|
|
|
|
|
+// 隐藏 Cocos 模态框
|
|
|
+const hideCocos = () => {
|
|
|
+ hideOne.value = true
|
|
|
+ setTimeout(() => {
|
|
|
+ hideTwo.value = true
|
|
|
+ // emit('queryLevel')
|
|
|
+ }, 260)
|
|
|
+}
|
|
|
+
|
|
|
+// 处理接收到的消息
|
|
|
+const handleMessage = (e) => {
|
|
|
+ console.log('接收到消息', e.data)
|
|
|
+ // 限定消息来源，替换为实际的 Cocos 页面域名
|
|
|
+ // const expectedOrigin = 'http://192.168.1.20:7456'
|
|
|
+ // if (e.origin !== expectedOrigin) return
|
|
|
+ if (e.data === 'close') {
|
|
|
+ console.log('收到关闭消息')
|
|
|
+ router.go(-1)
|
|
|
+ }else if (e.data === 'cocos-close') {
|
|
|
+ // showSuccessToast('本次训练已结束')
|
|
|
+ setTimeout(() => {
|
|
|
+ // 使用示例
|
|
|
+ const userAgent = navigator.userAgent.toLowerCase()
|
|
|
+ const isWechatEnvironment = userAgent.includes('micromessenger')
|
|
|
+ if (isWechatEnvironment) {
|
|
|
+ // 执行微信环境下的逻辑，如调用微信JS-SDK
|
|
|
+ if (wx && wx.miniProgram) {
|
|
|
+ wx.miniProgram.navigateTo({
|
|
|
+ url: '/pages/media/pages/feedbackTask/finish/finish',
|
|
|
+ })
|
|
|
+ }
|
|
|
+ }
|
|
|
+ else {
|
|
|
+ router.go(-1)
|
|
|
+ // 执行浏览器环境下的逻辑
|
|
|
+ }
|
|
|
+ }, 1300)
|
|
|
+
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+// 初始化 iframe
|
|
|
+const initIframe = () => {
|
|
|
+ showCocos()
|
|
|
+ iframe.value = document.getElementById('cocosDialog')
|
|
|
+ if (iframe.value) {
|
|
|
+ iframe.value.onload = () => {
|
|
|
+ // 监听消息事件
|
|
|
+ console.log('iframe加载完成')
|
|
|
+ window.addEventListener('message', handleMessage)
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+// 组件挂载后执行
|
|
|
onMounted(() => {
|
|
|
- exec()
|
|
|
+ nextTick(() => {
|
|
|
+ initIframe()
|
|
|
+ })
|
|
|
+})
|
|
|
+
|
|
|
+// 组件卸载时移除事件监听器
|
|
|
+onUnmounted(() => {
|
|
|
+ window.removeEventListener('message', handleMessage)
|
|
|
})
|
|
|
</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
|
|
|
- :src="src"
|
|
|
- width="100%"
|
|
|
- height="100%"
|
|
|
- frameborder="0"
|
|
|
- scrolling="no"
|
|
|
- />
|
|
|
- </section>
|
|
|
-</template>
|
|
|
+<style lang="scss" scoped>
|
|
|
+.cocos-modal {
|
|
|
+ background: #1e2022;
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ position: fixed;
|
|
|
+ top: 0;
|
|
|
+ left: 0;
|
|
|
+ z-index: 99;
|
|
|
+ opacity: 1;
|
|
|
+ transition: all 0.2s ease-in-out;
|
|
|
+ overflow: hidden;
|
|
|
+
|
|
|
+ &.hide-one {
|
|
|
+ opacity: 0;
|
|
|
+ }
|
|
|
+
|
|
|
+ &.hide-two {
|
|
|
+ top: 110%;
|
|
|
+ }
|
|
|
|
|
|
-<style scoped lang="scss">
|
|
|
-.app-container {
|
|
|
+ iframe {
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ }
|
|
|
}
|
|
|
</style>
|
