From ef9e1a4e48b7610ccdbe1909122969462d26cfab Mon Sep 17 00:00:00 2001
From: "LHY\\18810" <18810831805@163.com>
Date: Fri, 14 Mar 2025 23:29:14 +0800
Subject: [PATCH] =?UTF-8?q?feat:app=E5=B5=8C=E5=A5=97h5=E8=BF=94=E5=9B=9E?=
 =?UTF-8?q?=E9=94=AE?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/App.vue                              | 23 +++----
 src/assets/js/appBridge.js               | 34 ++++++++--
 src/components/AndroidBackHandler.vue    | 58 ++++++++++++++++
 src/main.ts                              | 36 +++-------
 src/views/Home/Index.vue                 | 39 +++++------
 src/views/Survey/views/Publish/Index.vue | 86 ++++++------------------
 6 files changed, 145 insertions(+), 131 deletions(-)
 create mode 100644 src/components/AndroidBackHandler.vue

diff --git a/src/App.vue b/src/App.vue
index 96f5004..d56d359 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,21 +1,18 @@
-<script setup lang="ts">
-import { RouterView } from 'vue-router';
-import { onMounted } from 'vue';
-import appBridge from '@/assets/js/appBridge';
-import utils from '@/assets/js/common';
+<script lang="ts">
+import { defineComponent } from 'vue';
+import AndroidBackHandler from '@/components/AndroidBackHandler.vue';
 
-onMounted(async() => {
-  if (utils.getSessionStorage('xToken')) {
-    // 隐藏/显示 header
-    appBridge.setHeaderShown(false);
-    // 设置系统状态栏明暗主题
-    appBridge.setStatusBarStyle('light');
+export default defineComponent({
+  name: 'App',
+  components: {
+    AndroidBackHandler
   }
 });
 </script>
 
 <template>
-  <div>
-    <RouterView />
+  <div id="app">
+    <AndroidBackHandler />
+    <router-view></router-view>
   </div>
 </template>
diff --git a/src/assets/js/appBridge.js b/src/assets/js/appBridge.js
index 31446a2..3dae8aa 100644
--- a/src/assets/js/appBridge.js
+++ b/src/assets/js/appBridge.js
@@ -49,9 +49,20 @@ export default {
    * @returns {Boolean} 操作是否成功
    */
   navigateBack() {
-    return this.postMessageToRN({
-      type: 'back'
-    });
+    if (!this.isInReactNative()) {
+      return false;
+    }
+    try {
+      window.ReactNativeWebView.postMessage(JSON.stringify({
+        type: 'back',
+        data: {
+          force: false // 不强制返回，让原生端判断是否可以返回
+        }
+      }));
+      return true;
+    } catch (error) {
+      return false;
+    }
   },
 
   /**
@@ -127,9 +138,20 @@ export default {
    * @returns {Boolean} 操作是否成功
    */
   takeOverAndroidBack() {
-    return this.postMessageToRN({
-      type: 'takeOverAndroidBack'
-    });
+    if (!this.isInReactNative()) {
+      return false;
+    }
+    try {
+      window.ReactNativeWebView.postMessage(JSON.stringify({
+        type: 'takeOverAndroidBack',
+        data: {
+          enabled: true
+        }
+      }));
+      return true;
+    } catch (error) {
+      return false;
+    }
   },
 
   /**
diff --git a/src/components/AndroidBackHandler.vue b/src/components/AndroidBackHandler.vue
new file mode 100644
index 0000000..d94f264
--- /dev/null
+++ b/src/components/AndroidBackHandler.vue
@@ -0,0 +1,58 @@
+<template>
+  <div></div>
+</template>
+
+<script lang="ts">
+import { defineComponent, onMounted, onUnmounted } from 'vue';
+import { useRouter, useRoute } from 'vue-router';
+import appBridge from '@/assets/js/appBridge';
+
+export default defineComponent({
+  name: 'AndroidBackHandler',
+  setup() {
+    const router = useRouter();
+    const route = useRoute();
+    // 检查是否可以返回
+    const canGoBack = () => {
+      // 检查是否有历史记录
+      if (window.history.length > 1) {
+        return true;
+      }
+      // 检查路由状态
+      const position = router.options.history.state?.position;
+      return typeof position === 'number' && position > 0;
+    };
+
+    // 检查是否是首页
+    const isHomePage = () => {
+      // 根据实际路由配置修改这里的判断逻辑
+      return route.path === '/' || route.path === '/home';
+    };
+
+    // 处理返回按钮事件
+    const handleBack = () => {
+      // 如果有历史记录，说明是从其他页面进入的
+      if (canGoBack()) {
+        router.go(-1);
+        return false;
+      } else {
+        appBridge.navigateBack();
+      }
+    };
+
+    onMounted(() => {
+      // 设置禁止原生返回
+      appBridge.takeOverAndroidBack();
+      // 添加返回按钮监听
+      window.onAndroidBack = handleBack;
+    });
+
+    onUnmounted(() => {
+      // 移除返回按钮监听
+      window.onAndroidBack = null;
+    });
+
+    return {};
+  }
+});
+</script>
diff --git a/src/main.ts b/src/main.ts
index d42604f..cc6560e 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -12,50 +12,30 @@ import appBridge from '@/assets/js/appBridge';
 import VConsole from 'vconsole';
 const app = createApp(App);
 
-// import VConsole from 'vconsole';
-// let vconsole;
 if (import.meta.env.VITE_APP_ENV !== 'production') {
   const vconsole = new VConsole();
   app.use(vconsole);
-  // eslint-disable-next-line no-unused-vars
-  // vconsole = new VConsole();
 }
 
-// 添加 TypeScript 类型声明，在文件顶部添加
 declare global {
   interface Window {
     onAndroidBack: (() => void) | null;
-    appBridge?: any; // 同时添加 appBridge 类型声明
+    appBridge?: any;
   }
 }
-
+// 隐藏/显示 header
+appBridge.setHeaderShown(false);
+// 设置系统状态栏明暗主题
+appBridge.setStatusBarStyle('light');
 router.beforeEach((to, from, next) => {
   if (to.query.digitalYiliToken) {
     utils.setSessionStorage('xToken', to.query.digitalYiliToken);
   }
-  // appBridge.setTitle(to.meta.title as string);
-  // 设置禁止原生返回
-  appBridge.takeOverAndroidBack();
-  // 定义路由是否可以返回的判断
-  const routerCanGoBack = () => {
-    const position = router.options.history.state?.position;
-    return typeof position === 'number' && position > 0;
-  };
-
-  // 定义调用APP返回的方法
-  const callAppGoBack = () => {
-    appBridge.navigateBack(); // 使用现有的navigateBack方法替代不存在的goBack方法
-  };
-  // 添加 Android 返回按钮监听方法
-  window.onAndroidBack = () => {
-    if (routerCanGoBack()) {
-      router.back();
-    } else {
-      callAppGoBack();
-    }
-  };
+  // 设置 header 标题
+  appBridge.setTitle(to.meta.title as string);
   next();
 });
+
 app.use(createPinia());
 app.use(router);
 app.mount('#app');
diff --git a/src/views/Home/Index.vue b/src/views/Home/Index.vue
index 354f30e..2ace324 100644
--- a/src/views/Home/Index.vue
+++ b/src/views/Home/Index.vue
@@ -8,23 +8,24 @@ import { onMounted, ref } from 'vue';
 // import { showFailToast } from 'vant';
 const contentShow = ref(false);
 onMounted(async() => {
-  if (utils.getSessionStorage('xToken')) {
-    const appToken = utils.getParameter('digitalYiliToken');
-    getUserInfo(appToken).then((res) => {
-      if (res.data) {
-        contentShow.value = true;
-        utils.setSessionStorage('userInfo', res.data.data);
-      } else {
-        contentShow.value = false;
-        showFailToast(error.response.data?.message || error.data?.message || error.message || '服务器错误');
-      }
-    }).catch((error) => {
-      contentShow.value = false;
-      showFailToast(error?.response?.data?.message || error?.message || '服务器错误');
-    });
-  } else {
-    contentShow.value = true;
-  }
+  contentShow.value = true;
+  // if (utils.getSessionStorage('xToken')) {
+  //   const appToken = utils.getParameter('digitalYiliToken');
+  //   getUserInfo(appToken).then((res) => {
+  //     if (res.data) {
+  //       contentShow.value = true;
+  //       utils.setSessionStorage('userInfo', res.data.data);
+  //     } else {
+  //       contentShow.value = false;
+  //       showFailToast(error.response.data?.message || error.data?.message || error.message || '服务器错误');
+  //     }
+  //   }).catch((error) => {
+  //     contentShow.value = false;
+  //     showFailToast(error?.response?.data?.message || error?.message || '服务器错误');
+  //   });
+  // } else {
+  //   contentShow.value = true;
+  // }
 });
 </script>
 
@@ -45,13 +46,13 @@ onMounted(async() => {
   padding: 0 10px 60px;
   background: linear-gradient(0deg, #f5f5f5 0%, #f5f5f5 84%, #a5d380 100%);
 
-  & > :first-child {
+  &> :first-child {
     display: flex;
     justify-content: space-around;
     border-radius: 6px;
     background-color: white;
 
-    & > div {
+    &>div {
       display: flex;
       flex-direction: column;
       width: 50px;
diff --git a/src/views/Survey/views/Publish/Index.vue b/src/views/Survey/views/Publish/Index.vue
index 77063dd..0bd0134 100644
--- a/src/views/Survey/views/Publish/Index.vue
+++ b/src/views/Survey/views/Publish/Index.vue
@@ -5,11 +5,9 @@
       <!-- <van-cell-group v-if="status === 1" inset style="padding-top: 15px"> -->
       <van-cell-group inset style="padding-top: 15px">
         <div>
-          <img
-            width="100%"
+          <img width="100%"
             src="https://files.axshare.com/gsc/DR6075/44/1a/03/441a03a8b1004755a7a392b311acf97f/images/%E6%8A%95%E6%94%BE/u14.jpg?pageId=2f9ba10c-92b8-4c9b-b40b-04e65a0b4333"
-            alt=""
-          />
+            alt="" />
         </div>
         <div class="qrcode">
           <img :src="publishInfo.img_url" alt="" width="100px" height="100px" />
@@ -42,8 +40,8 @@
 </template>
 
 <script setup lang="ts">
-import { useRoute, useRouter } from 'vue-router';
-import { onMounted, onBeforeUnmount, reactive, ref, watch } from 'vue';
+import { useRoute } from 'vue-router';
+import { onMounted, reactive, ref, watch } from 'vue';
 import { showFailToast, showToast } from 'vant';
 import utils from '@/assets/js/common';
 import appBridge from '@/assets/js/appBridge';
@@ -52,7 +50,6 @@ import { getQrcode } from '@/api/publish';
 import configUrl from '../../../../config';
 
 const route = useRoute();
-const router = useRouter();
 const surveyTitle = route.meta.title as string;
 appBridge.setTitle(surveyTitle);
 const sn = route.query.sn;
@@ -111,7 +108,7 @@ type OperateItem = (typeof operateList)[0];
 // }
 // }
 
-function getCode() {
+function getCode () {
   publishInfo.value.img_url
     = 'https://test-cxp-pubcos.yili.com/uat-yls//survey-api/publish/202503130938138261340.png';
   publishInfo.value.url = `${configUrl.proxyDomain}/publish?sn=${sn && sn !== undefined ? sn : ''}`;
@@ -143,68 +140,27 @@ watch(status, (val) => {
     getCode();
   }
 });
-// 判断路由是否可以返回
-const routerCanGoBack = () => {
-  const position = router.options.history.state?.position;
-  return typeof position === 'number' && position > 0;
-};
-
-// 处理返回逻辑
-const handleBack = () => {
-  if (routerCanGoBack()) {
-    console.log('h5返回');
-    router.back(); // 执行 h5 路由返回
-    return true; // 表示已处理返回事件
-  } else {
-    console.log('app返回');
-    // 没有更多历史记录，尝试使用appBridge处理返回
-    if ((window as any).appBridge && (window as any).appBridge.closeWebView) {
-      (window as any).appBridge.closeWebView();
-    }
-    return false; // 表示未处理返回事件，应由APP处理
-  }
-};
-// 清理全局事件处理
-onBeforeUnmount(() => {
-  (window as any).onAndroidBack = null;
-});
-onMounted(async() => {
-  // 为window添加返回处理方法
-  (window as any).onAndroidBack = () => {
-    // 设置禁止原生返回（如果有appBridge对象）
-    if ((window as any).appBridge && (window as any).appBridge.takeOverAndroidBack) {
-      (window as any).appBridge.takeOverAndroidBack();
-    }
-    return handleBack();
-  };
-
-  // 如果有appBridge，设置返回按钮动作
-  if ((window as any).appBridge && (window as any).appBridge.setBackButtonAction) {
-    (window as any).appBridge.setBackButtonAction(() => {
-      return handleBack();
-    });
-  }
-
+onMounted(async () => {
   // fetchInfo();
   getCode();
 });
 const operateBtn = (item: OperateItem) => {
   switch (item.type) {
-  case 'shareLink':
-    shareLink();
-    break;
-  case 'copyLink':
-    copyLink();
-    break;
-  case 'qrCode':
-    downLoadImg();
-    break;
-  default:
-    break;
+    case 'shareLink':
+      shareLink();
+      break;
+    case 'copyLink':
+      copyLink();
+      break;
+    case 'qrCode':
+      downLoadImg();
+      break;
+    default:
+      break;
   }
 };
 // 复制链接
-function copyLink() {
+function copyLink () {
   const input = document.createElement('input');
   input.value = publishInfo.value.url;
   document.body.appendChild(input);
@@ -214,7 +170,7 @@ function copyLink() {
   showToast('复制成功');
 }
 // 分享链接
-function shareLink() {
+function shareLink () {
   const params = {
     type: 'shareToWx',
     title: publishInfo.value.download_url.title,
@@ -224,11 +180,11 @@ function shareLink() {
     scene: 0 // 朋友圈1  微信好友0
   };
   console.log('shareUrl', publishInfo.value.url);
-  appBridge.shareToWeChat(params);
+  appBridge.shareToWeChat(params, () => { });
 }
 
 // 下载二维码
-function downLoadImg() {
+function downLoadImg () {
   const { title, url } = publishInfo.value.download_url;
   if (utils.getSessionStorage('xToken')) {
     appBridge.save2Album(url, () => {