fix: 若干bug的修复

src/components/luojigou-board/luojigou-board.vue

@@ -11,13 +11,14 @@
           />
         </view>
         <view class="tip " :key="props.cardDesc">
-          <scroll-view
+          <!-- <scroll-view
             scroll-y
-            :style="{height: '88rpx',
-            }"
+            style="height: 88rpx;"
           >
             {{props.cardDesc ? props.cardDesc : "加載中"}}
-          </scroll-view>
+            {{props.cardDesc ? props.cardDesc : "加載中"}}
+          </scroll-view> -->
+          {{props.cardDesc ? props.cardDesc : "加載中"}}
         </view>
         <image
           class="luojigou-dog"
@@ -536,6 +537,8 @@ onMounted(() => {
           position: absolute;
           top: 50rpx;
           left: 176rpx;
+          overflow: hidden;
+          overflow-y: auto;
         }
         .luojigou-dog {
           width: 84rpx;

src/components/navbar/navbar.vue

@@ -20,7 +20,7 @@
           </view>
         </view>
         <view class="right" >
-          <img class="magnifier" @click="opraMagnifier" :src="state.magnifierState ?staticImg.magnifierClose : staticImg.magnifierOpen" alt="">
+          <img v-if="state.showMagnifier" class="magnifier" @click="opraMagnifier" :src="state.magnifierState ?staticImg.magnifierClose : staticImg.magnifierOpen" alt="">
         </view>
       </view>
     </view>
@@ -28,8 +28,8 @@
 </template>
 
 <script lang="ts" setup name="navbar" >
-import { defineProps, reactive, defineEmits } from "vue"
-import { useNavbarInfo, useStaticImg } from '@/hooks/index';
+import { defineProps, reactive, defineEmits, onMounted } from "vue"
+import { useNavbarInfo, useSchedulerOnce, useStaticImg } from '@/hooks/index';
 import type { CardModeEnum } from "@/enum/constant";
 
 const navbarInfo = useNavbarInfo()
@@ -47,8 +47,6 @@ const props = defineProps<IPorps>()
 
 const emits = defineEmits(['goback', 'changeMagnifier'])
 
-console.log(navbarInfo.height);
-
 const contentStyles = {
   height: navbarInfo.contentHeight,
   top: navbarInfo.top,
@@ -56,9 +54,11 @@ const contentStyles = {
 }
 
 const state = reactive({
-  magnifierState: false
+  magnifierState: false,
+  showMagnifier: false
 })
 
+
 const goback = () => emits('goback')
 
 const opraMagnifier = () => {
@@ -66,6 +66,12 @@ const opraMagnifier = () => {
   emits('changeMagnifier', state.magnifierState)
 }
 
+onMounted(() => {
+  useSchedulerOnce(() => {
+    state.showMagnifier = true
+  }, 500)
+})
+
 </script>
 
 

src/components/rive-ani/rive-ani.vue

@@ -208,7 +208,10 @@ const start = async (starCount: number, cardType: 0 | 1) => {
     starCount <= 3 ? AudioController.playFail() : AudioController.playPass()
   }
 
-  useSchedulerOnce(initRive)
+  useSchedulerOnce(() => {
+    useSchedulerOnce(initRive)
+  }, 200)
+
 
 
   if (wisdomCoinStore.remainderWisdomCoin == 0) {

src/components/rotate-tip/rotate-tip.vue

@@ -50,8 +50,9 @@ const staticImg = useStaticImg()
         position: absolute;
         top: 50%;
         left: 50%;
-        transform: translate(-50%, -50%);
+        // transform: translate(-50%, -50%);
         transform-origin: 0% 0%;
+        display: block;
       }
       .phone {
         width: 144px;
@@ -59,9 +60,10 @@ const staticImg = useStaticImg()
         position: absolute;
         top: 50%;
         left: 50%;
-        transform: translate(-50%, -50%);
+        // transform: translate(-50%, -50%);
         rotate: 90deg;
         transform-origin: 0% 0%;
+        display: block;
       }
       .arrow-ani {
         animation: arrow-ani-keyframes 3s ease-in 0s infinite;
@@ -82,31 +84,31 @@ const staticImg = useStaticImg()
 
 @keyframes  arrow-ani-keyframes {
   0% {
-    rotate: 0deg;
+    transform: rotate(0deg) translate(-50%, -50%);
     opacity: 1;
   }
   25% {
-    rotate: -90deg;
+    transform: rotate(-90deg) translate(-50%, -50%);
     opacity: 0;
   }
   100% {
-    rotate: -90deg;
+    transform: rotate(-90deg) translate(-50%, -50%);
     opacity: 0;
   }
 }
 
 @keyframes phone-ani-keyframes {
   0% {
-    rotate: 90deg;
+    transform: rotate(90deg) translate(-50%, -50%);
   }
   25% {
-    rotate: 90deg;
+    transform: rotate(90deg) translate(-50%, -50%);
   }
   50% {
-    rotate: 0deg;
+    transform: rotate(0deg) translate(-50%, -50%);
   }
   100% {
-    rotate: 0deg;
+    transform: rotate(0deg) translate(-50%, -50%);
   }
 }
 </style>

src/hooks/app.ts

@@ -10,7 +10,7 @@ export const useAppBridge = () => {
 
   const _push = (path: string) => window.navAppPage.postMessage(JSON.stringify({ route: path }))
 
-  const _back = (path: string = '') => window.popPage.postMessage(path)
+  const _back = (path: string = '') =>  window.popPage.postMessage(path)
   
   const _getToken = () => {
     window.returnToken = token => useUserStore().token = token

src/hooks/index.ts

@@ -34,11 +34,7 @@ export const useScheduler = (cb: () => void, delay: number) => {
 
   const playing = () => {}
 
-  const clearScheduler = () => {
-    console.log('暂停计时器:', timeId.value);
-    
-    clearInterval(timeId.value as number)
-  }
+  const clearScheduler = () => clearInterval(timeId.value as number)
 
   onUnmounted(clearScheduler)
 
@@ -117,7 +113,7 @@ export const useNavbarInfo = () => {
  * @param {string} id - 您要从中获取信息的元素的 ID
  * @param cb - 回调函数
  * @param {ComponentInternalInstance} vm - 组件实例
- */
+ */ 
 export const useQueryElInfo = (
   id: string,
   cb: (params: UniApp.NodeInfo | UniApp.NodeInfo[] ) => void,
@@ -147,7 +143,6 @@ export const useAudioMange = (src?: string) => {
   audioInstance.value = uni.createInnerAudioContext()
 
   if (src) {
-    console.log('src');
     
     audioInstance.value.src = src
   }
@@ -295,6 +290,11 @@ export const useMagnifier = async (
   { ansUrl: string,  quesUrl: string, instance: ComponentInternalInstance, rate: number}
 ) => {
 
+  function isIOS() {
+    const userAgent = navigator.userAgent;
+    return /iPhone|iPad|iPod/i.test(userAgent);
+  }
+
   const adaptatio = useAdaptationIpadAndPhone()
 
   let ctx: UniApp.CanvasContext = uni.createCanvasContext(canvasId)
@@ -310,11 +310,10 @@ export const useMagnifier = async (
 
   const createImgStr = async () => {
     ctx.drawImage(quesUrl, 0, 0, 224 * deviceWidthRate, 386 * deviceWidthRate)
-    // ctx.save()
     ctx.drawImage(ansUrl, 225 * deviceWidthRate , 0, 75  * deviceWidthRate, 386 * deviceWidthRate)
     ctx.save()
     ctx.draw()
-    ctx.restore();
+    // ctx.restore();
     // 创建 Image 对象并加载图片
     await new Promise( resolve => {
         useSchedulerOnce(() => {
@@ -343,7 +342,7 @@ export const useMagnifier = async (
     
     function initMagnifier () {
           // 计算放大镜区域的位置和尺寸
-          const startX = 0;
+          const startX = 200;
           const startY = 0;
           const width = magnifierSize;
           const height = magnifierSize;
@@ -359,15 +358,15 @@ export const useMagnifier = async (
           ctx.save();
           ctx.beginPath();
           ctx.arc(
-            magnifierSize / 2,
-            magnifierSize / 2,
+            startX,
+            startY,
             magnifierSize / 2,
             0,
             2 * Math.PI
           );
-          ctx.strokeStyle = 'yellow'; // 设置边框颜色为黄色
-          ctx.lineWidth = lineWidth; // 设置边框宽度
-          ctx.stroke(); // 绘制边框
+          ctx.strokeStyle = 'yellow'; 
+          ctx.lineWidth = lineWidth; 
+          ctx.stroke();
           ctx.closePath();
           ctx.clip();
           ctx.drawImage(
@@ -376,8 +375,8 @@ export const useMagnifier = async (
             startY,
             width,
             height,
-            0 - magnifierSize / 2,
-            0 - magnifierSize / 2,
+            startX - magnifierSize / 2,
+            startY - magnifierSize / 2,
             magnifierSize * magnification,
             magnifierSize * magnification
           );
@@ -389,38 +388,66 @@ export const useMagnifier = async (
           
           event.preventDefault();
           event.stopPropagation();
-          const mouseX = (event.touches[0].pageX - canvas.getBoundingClientRect().left) / adaptatio 
-          const mouseY = (event.touches[0].pageY -  canvas.getBoundingClientRect().top) / adaptatio
-  
+          let mouseX = Math.floor((event.touches[0].pageX -  canvas.getBoundingClientRect().left) / adaptatio)
+          let mouseY = Math.floor((event.touches[0].pageY -  canvas.getBoundingClientRect().top) / adaptatio)
+    
+          
+          // 拖拽边界处理
+          if (mouseX <= 0) mouseX = 0
+          if (mouseX >= canvas.getBoundingClientRect().right - 26 ) mouseX =  canvas.getBoundingClientRect().right  - 26 
+          if (mouseY <= 0) mouseY =  0
+          if (mouseY >= (canvas.getBoundingClientRect().bottom - 214   )) mouseY = canvas.getBoundingClientRect().bottom - 214 
+          // 拖拽边界处理
           // 清空 Canvas
           ctx.clearRect(0, 0, canvas.clientWidth, canvas.clientHeight);
-      
+          
           // 计算放大镜区域的位置和尺寸
-          const startX = (mouseX - magnifierSize / 2)
-          const startY = (mouseY - magnifierSize / 2)
+          const startX = Math.floor((mouseX - magnifierSize / 2 )) 
+          const startY = Math.floor((mouseY - magnifierSize / 2 )) 
           const width = magnifierSize;
           const height = magnifierSize;
-      
+          
           // 绘制放大镜效果
           ctx.save();
           ctx.beginPath();
           ctx.arc(mouseX, mouseY, magnifierSize / 2, 0, 2 * Math.PI);
           ctx.strokeStyle = 'yellow';
-          ctx.lineWidth = lineWidth; 
+          ctx.lineWidth = lineWidth;
           ctx.stroke()
           ctx.closePath();
           ctx.clip();
+
+          const sxCount = mouseX - (magnifierSize * magnification) / 2
+          const syCount = mouseY - (magnifierSize * magnification) / 2
+          
+          const sx = sxCount <= 0 ? 0 :  mouseX - (magnifierSize * magnification) / 2
+
+          const sy = syCount <= 0 ? 0 : (mouseY - (magnifierSize * magnification) / 2)
+
           ctx.drawImage(
             imgStr,
             startX,
             startY,
             width,
             height,
-            mouseX - (magnifierSize * magnification) / 2,
-            mouseY - (magnifierSize * magnification) / 2,
-            magnifierSize * magnification,
-            magnifierSize * magnification
+            isIOS() ? sx: sxCount ,
+            isIOS() ? sy : syCount,
+            magnifierSize * magnification ,
+            magnifierSize * magnification  
           );
+          
+          // ctx.drawImage(
+          //   imgStr,
+          //   startX,
+          //   startY,
+          //   width,
+          //   height,
+          //   mouseX - (magnifierSize * magnification) / 2 ,
+          //   mouseY - (magnifierSize * magnification) / 2 ,
+          //   magnifierSize * magnification ,
+          //   magnifierSize * magnification  
+          // );
+         
           ctx.draw()
           ctx.restore();
     }
@@ -451,28 +478,30 @@ export const useMagnifier = async (
 
 
 /**
- * 陀螺仪
+ * @description 陀螺仪 根据陀螺仪判断是否是横屏状态
  */
-export const useGyro = async () => {
+export const useGyroH = async (cb: (dire: string) => void) => {
   const handleOrientation = (event: DeviceOrientationEvent) => {
 
-    var alpha = event.alpha; // 设备绕 Z 轴的旋转角度（0 到 360 度）
+    var alpha = event.alpha!; // 设备绕 Z 轴的旋转角度（0 到 360 度）
     var beta = event.beta!;   // 设备绕 X 轴的旋转角度（-180 到 180 度）
-    var gamma = event.gamma; // 设备绕 Y 轴的旋转角度（-90 到 90 度）
-
-    console.log('beta', beta);
+    var gamma = event.gamma!; // 设备绕 Y 轴的旋转角度（-90 到 90 度）
+    console.log(`x轴:${Math.floor(beta)} y轴：${ Math.floor(gamma)} z轴：${ Math.floor(alpha) }`);
     
-    if ( beta > 45 && beta <= 270 ) {
-      console.log('顺时针横屏');
-    } else if ( beta < -45 && beta >= -270 ) {
-      console.log('逆時針横屏');
+    let dire = ''
+    if (alpha < 10 ) {
+      dire = 'H'
+    } else {
+      dire = 'V'
     }
+    
+    cb && cb(dire)
 
   }
+  
   if (window.DeviceOrientationEvent) {
-    console.log('设备支持陀螺仪功能');
-    // 支持陀螺仪功能
     window.addEventListener('deviceorientation', handleOrientation);
+    // if ( uni.getSystemInfoSync().system.includes('iOS')) { }
   } else {
     console.log('设备不支持陀螺仪功能');
   }
@@ -481,3 +510,5 @@ export const useGyro = async () => {
     window.removeEventListener('deviceorientation', handleOrientation)
   })
 }
+
+

src/pages/GameView/index.vue

@@ -34,8 +34,8 @@
     <rive-ani ref="riveAniRef" :key="navbarState.progress" />
 
   </view>
-
-  <!-- <view class="device-dire-tip"  v-if="device.dire === 'H'" >
+  <!--  -->
+  <!-- <view class="device-dire-tip" v-if="device.dire === 'H'"  >
     <rotate-tip />
   </view>  -->
 
@@ -51,7 +51,7 @@ import { onLoad } from '@dcloudio/uni-app';
 import { reactive, onMounted } from 'vue'
 import { getCardDetailById, submitlearnPortAns } from '@/api/card'
 import { getCollectionDetailById } from '@/api/collection'
-import { useAudioMange, useScheduler, useBase64, useSchedulerOnce, usePlatform, useDeviceDire,useGyro } from '@/hooks/index'
+import { useAudioMange, useScheduler, useBase64, useSchedulerOnce, usePlatform, useDeviceDire, useGyroH } from '@/hooks/index'
 import { usePracticeStore, useOpraRecordStore, useGameCountdownStore, useCalcQuantityStore, useWisdomCoinStore } from '@/store'
 import riveAni from '@/components/rive-ani/rive-ani.vue';
 import { ref } from 'vue';
@@ -92,7 +92,14 @@ const base64 = useBase64()
 
 const staticImg = useStaticImg()
 
-useGyro()
+// useGyroH((dire) => {
+//   device.dire = dire
+//   if (dire === 'H') {
+//     console.log('横屏');
+//   } else {
+//     console.log('竖屏');
+//   }
+// })
 
 onLoad(query => {
 
@@ -158,11 +165,10 @@ const stx = useScheduler(() => {
 
 
 const getIntro = () => {
+  // state.mode = CardModeEnum.OPRA
   // 先判断有没有玩过，如果没有玩过
   if (state.mode === CardModeEnum.OPRA) {
     const played = uni.getStorageSync('played')
-    console.log('played:',played);
-    
     if (!played) {
       uni.setStorageSync('played', 1)
       useSchedulerOnce(() => {
@@ -184,12 +190,14 @@ const changeMagnifier = (status: boolean) => {
 
 // 控制游戏开始
 const gameStart = () => {
+  
   navbarState.countdownTotal = 0
-  playAudio()
-  if (device.dire === 'V') {
-    stx.start()
-  }
   
+  stx.start()
+  useSchedulerOnce(() => {
+    playAudio()
+  }, 100)
+
 }
 
 // 提交单张题卡数据
@@ -236,6 +244,8 @@ const onSubmitCard = async () => {
   calcQuantityStore.clear()
   
   GetCardDetailById()
+
+  
 }
 
 // 提交题卡
@@ -295,7 +305,9 @@ const GetCardDetailById = async () => {
   const { data } = await getCardDetailById(state.cardId!, state.mode)
   state.card = data
   if (state.mode === CardModeEnum.OPRA) {
+   
   }
+  getIntro()
 }
 
 // 返回上一级菜单 学习计划是返回 app 大赛是返回上一级路由
@@ -307,17 +319,10 @@ const goback = () => {
   }
 }
 
-// 监听设备方向，如果是横屏，立马停止所有的计时
-useDeviceDire((dire: 'H' | 'V') => {
-  if (device.dire == 'H' && dire === 'V') {
-    stx.start()
-  } 
-  device.dire = dire
-  
-  if (dire === 'H') {
-    stx.pause()
-  }
-})
+// // 监听设备方向，如果是横屏，立马停止所有的计时
+// useDeviceDire((dire: 'H' | 'V') => {
+
+// })
 
 onMounted(async () => {
 
@@ -326,7 +331,7 @@ onMounted(async () => {
   } else {
     await GetCollectionDetailById()
   }
-  getIntro()
+
 })
 
 </script>