refactor: ♻️ 监听屏幕点击代码修改

src/components/PublicComponent/PublicComponent.vue

@@ -27,19 +27,9 @@ const AutoBackNotification = defineAsyncComponent(() => import('@/base/AutoBackN
 const router = useRouter()
 const route = useRoute()
 const store = useRootStore()
-const { language, showSearch, showDetail, mapStatus, nativeMethods } = storeToRefs(store)
-const {
-  checkHandleScreen,
-  showCountDownDialog,
-  title,
-  toIndexTime,
-  toWallpaperTime,
-  isWallpaper,
-  setLogout,
-  resetClickNumber,
-  logout,
-  sleepToWallpaper
-} = useHandleScreen(handleScreen)
+const { language, showSearch, showDetail } = storeToRefs(store)
+const { checkHandleScreen, showCountDownDialog, title, toIndexTime, toWallpaperTime, isWallpaper, setLogout, resetClickNumber, logout } =
+  useHandleScreen(handleScreen)
 
 //指定时间返回首页时做的操作
 function handleScreen() {
@@ -64,17 +54,6 @@ onBeforeUnmount(() => {
   window.removeEventListener('touchend', checkHandleScreen)
 })
 
-watch(mapStatus, async newVal => {
-  //当地图加载成功之后自动触发一次屏保弹框以便能进入屏保
-  if (newVal) {
-    if (!nativeMethods.value?.hasProgram()) {
-      return
-    }
-    await sleepToWallpaper()
-    nativeMethods.value?.goScreenSave()
-  }
-})
-
 watch(route, to => {
   if (to.fullPath === '/' || to.fullPath === '/nav') {
     window?.Map_QM?.startRender()

src/composables/useHandleScreen.ts

@@ -12,7 +12,7 @@ export const useHandleScreen = (callback: () => void) => {
 
   const router = useRouter()
   const store = useRootStore()
-  const { isAndroid, nativeMethods } = toRefs(store)
+  const { device, nativeMethods, mapStatus } = toRefs(store)
 
   const { logout, resetClickNumber, setLogout, addTotalClick } = useLogout()
 
@@ -59,7 +59,7 @@ export const useHandleScreen = (callback: () => void) => {
   window.sleepToWallpaper = sleepToWallpaper
 
   async function checkHandleScreen(e: TouchEvent) {
-    !isAndroid && addTotalClick(e)
+    device.value.label === 'windows' && addTotalClick(e)
     toIndexTime.value = totalTime.value[0]
     toWallpaperTime.value = totalTime.value[1]
 
@@ -85,10 +85,17 @@ export const useHandleScreen = (callback: () => void) => {
 
   //监听时间 大于等于0且小于等于5时显示弹框
   watch([toIndexTime, toWallpaperTime], ([indexTime, wallpaperTime]) => {
-    if ((indexTime >= MIN_TIME && indexTime <= MAX_TIME) || (wallpaperTime >= MIN_TIME && wallpaperTime <= MAX_TIME)) {
-      showCountDownDialog.value = true
-    } else {
-      showCountDownDialog.value = false
+    showCountDownDialog.value = (indexTime >= MIN_TIME && indexTime <= MAX_TIME) || (wallpaperTime >= MIN_TIME && wallpaperTime <= MAX_TIME)
+  })
+
+  watch(mapStatus, async (newVal: boolean) => {
+    //当地图加载成功之后自动触发一次屏保弹框以便能进入屏保
+    if (newVal) {
+      if (!nativeMethods.value?.hasProgram()) {
+        return
+      }
+      await sleepToWallpaper()
+      nativeMethods.value?.goScreenSave()
     }
   })
 
@@ -111,7 +118,6 @@ export const useHandleScreen = (callback: () => void) => {
     logout,
     checkHandleScreen,
     resetClickNumber,
-    sleepToWallpaper,
     setLogout
   }
 }

src/store/root/getters.ts

@@ -14,7 +14,7 @@ export type GenGetters = CreateGetters<State, GettersMap>
 
 export const getters: GenGetters = {
   nativeMethods() {
-    if (this.isAndroid) {
+    if (this.device.label === 'android') {
       return window.android
     }
     return window.chrome?.webview?.hostObjects?.sync?.csobj

src/store/root/state.ts

@@ -1,5 +1,4 @@
 import type { GroupList, BrandRes } from '@/http/api/brand/types'
-import { isAndroid } from '@/utils/utils'
 
 export interface State {
   shopList: Readonly<Shop[]> //店铺列表
@@ -16,7 +15,6 @@ export interface State {
   mapStatus: boolean //地图加载是否成功
   device: Device //当前设备信息
   shop: Shop //店铺信息
-  isAndroid: boolean
 }
 
 export const state = (): State => ({
@@ -33,6 +31,5 @@ export const state = (): State => ({
   config: {} as Config,
   mapStatus: false,
   device: {} as Device,
-  shop: {} as Shop,
-  isAndroid: isAndroid()
+  shop: {} as Shop
 })