瀏覽代碼

fix:联调好game弹窗通信

aamin 1 年之前
父節點
當前提交
9664725498
共有 3 個文件被更改,包括 87 次插入5 次删除
  1. 21 0
      src/App.vue
  2. 48 5
      src/views/MoreContent.vue
  3. 18 0
      src/views/PaintingDetailList.vue

+ 21 - 0
src/App.vue

@@ -37,6 +37,8 @@ const store = useStore()
 //   })
 // }
 
+const time = ref(null)
+
 function isNotMobile() {
   const userAgent = navigator.userAgent || navigator.vendor || window.opera
   const mobileKeywords = [
@@ -56,6 +58,25 @@ onMounted(() => {
     // appDom.clientHeight = '844px'
     // appDom.clientWidth = '390px'
   }
+
+  window.addEventListener(
+    "resize",
+    () => {
+      //@ts-ignore
+      clearTimeout(time.value)
+      //@ts-ignore
+      time.value = window.setTimeout(() => {
+        // 根元素
+        const dom = document.querySelector("#app")
+        if (dom && document.documentElement.clientWidth < 1000) {
+          dom.style.height = document.documentElement.clientHeight + "px"
+          dom.style.width = document.documentElement.clientWidth + "px"
+
+        }
+      }, 100)
+    },
+    true
+  )
 })
 
 </script>

+ 48 - 5
src/views/MoreContent.vue

@@ -349,7 +349,10 @@
       v-if="isShowGamePage"
       class="game-box"
     >
-      <iframe :src="`./game/index.html`" />
+      <iframe
+        id="gameIframe"
+        :src="`./game/index.html`"
+      />
       <!-- edit弹框 -->
       <div
         v-if="isShowToastFromGame"
@@ -388,7 +391,10 @@
         >
           取消
         </div>
-        <div class="yes-btn">
+        <div
+          class="yes-btn"
+          @click="saveTitle"
+        >
           保存
         </div>
       </div>
@@ -471,12 +477,24 @@ const checkInput2 = (event) => {
   }
 }
 
-
+const saveTitle = () => {
+  var iframe = document.getElementById('gameIframe')
+  var iframeWindow = iframe.contentWindow || window.frames['yourIframeId']
+  if (iframeWindow) {
+    iframeWindow.saveTitle(input1.value.length >= 7 ? input1.value + '\n' + input2.value : input1.value )
+    isShowToastFromGame.value = false
+  }
+}
 
 onMounted(() => {
   window.closeGame = () => {
     isShowGamePage.value = false
   }
+
+  window.isShowToastFromGame = () =>{
+    isShowToastFromGame.value = true
+  }
+
 })
 
 const {
@@ -489,6 +507,31 @@ const windowHeightDesign = 844
 
 const scrollTarget = ref(null)
 const { width: windowWidth, height: windowHeight } = useWindowSize()
+
+const time = ref()
+
+onMounted(() => {
+  // windowWidth.value = document.documentElement.clientWidth
+  // windowHeight.value = document.documentElement.clientHeight
+  window.addEventListener(
+    "resize",
+    () => {
+      //@ts-ignore
+      clearTimeout(time.value)
+      //@ts-ignore
+      time.value = window.setTimeout(() => {
+        // 根元素
+        const dom = document.querySelector("#app")
+        if (dom && document.documentElement.clientWidth < 1000) {
+          dom.style.height = document.documentElement.clientHeight + "px"
+          dom.style.width = document.documentElement.clientWidth + "px"
+
+        }
+      }, 100)
+    },
+    true
+  )
+})
 const maxTranslateLength = computed(() => {
   return windowHeight.value * windowWidthDesign / windowHeightDesign
 })
@@ -497,9 +540,9 @@ const { onSwipeLeft, onswipeRight, haveSwipedThisTime, translateLength, currentA
   maxTranslateLength,
   viewportWidth: windowWidth,
   anchorPosList: [
-    maxTranslateLength.value * 216 / windowWidthDesign - windowWidth.value / 2,
+    maxTranslateLength.value * 236 / windowWidthDesign - windowWidth.value / 2,
     maxTranslateLength.value * 967 / windowWidthDesign - windowWidth.value / 2,
-    maxTranslateLength.value * 1860 / windowWidthDesign - windowWidth.value / 2,
+    maxTranslateLength.value * 1840 / windowWidthDesign - windowWidth.value / 2,
     // maxTranslateLength.value - windowWidth.value
   ],
   initialAnchorIdx: Number(route.query.anchorIdx) || 0

+ 18 - 0
src/views/PaintingDetailList.vue

@@ -37,6 +37,10 @@
       direction="h"
       :is-show="isShowOperationTip"
     />
+    <OperationTip
+      v-if="isShowOperationTip2"
+      class="operation-tip2"
+    />
     <BtnBack
       class="btn-back"
       @click="router.go(-1)"
@@ -80,6 +84,13 @@ const onSlideChange = (e) => {
 }
 
 const isShowOperationTip = ref(true)
+
+const isShowOperationTip2 = ref(false)
+onMounted(() => {
+  setTimeout(() => {
+    isShowOperationTip2.value = true
+  }, 4000)
+})
 </script>
 
 <style lang="less" scoped>
@@ -120,6 +131,13 @@ const isShowOperationTip = ref(true)
     transform: translateX(-50%);
     z-index: 10;
   }
+  >.operation-tip2{
+    position: absolute;
+    right: calc(20 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+    bottom: calc(20 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+    transform: translateX(-50%);
+    z-index: 10;
+  }
   >.btn-back{
     z-index: 10;
   }