feat:app嵌套h5

2025-03-12 18:25:52 +08:00
parent d05cc14ff3
commit b486dd4ccd
6 changed files with 171 additions and 162 deletions
--- a/src/App.vue
+++ b/src/App.vue
@@ -10,6 +10,8 @@ onMounted(async() => {
    appBridge.setHeaderShown(false);
    // 设置系统状态栏明暗主题
    appBridge.setStatusBarStyle('light');
+    // 设置禁止原生返回
+    // appBridge.takeOverAndroidBack();
  }
 });
 </script>
--- a/src/assets/js/appBridge.js
+++ b/src/assets/js/appBridge.js
@@ -1,25 +1,25 @@
 export default {
  /** ****************** ReactNative通信 ********************/
  /**
-     * 生成唯一ID
-     * @returns {string} 唯一ID
-     */
+   * 生成唯一ID
+   * @returns {string} 唯一ID
+   */
  generateUniqueId() {
    return `cb_${Date.now()}_${Math.floor(Math.random() * 1000)}`;
  },
  /**
-     * @desc 检查是否在ReactNative环境中
-     * @returns {Boolean} 是否在ReactNative WebView中
-     */
+   * @desc 检查是否在ReactNative环境中
+   * @returns {Boolean} 是否在ReactNative WebView中
+   */
  isInReactNative() {
    return typeof window !== 'undefined' && !!window.ReactNativeWebView;
  },

  /**
-     * @desc 发送消息到ReactNative
-     * @param {Object} message 消息对象
-     * @returns {Boolean} 发送是否成功
-     */
+   * @desc 发送消息到ReactNative
+   * @param {Object} message 消息对象
+   * @returns {Boolean} 发送是否成功
+   */
  postMessageToRN(data) {
    if (!this.isInReactNative()) {
      return false;
@@ -33,10 +33,10 @@ export default {
  },

  /**
-     * @desc 控制头部导航栏显示/隐藏
-     * @param {Boolean} visible 是否显示导航栏
-     * @returns {Boolean} 操作是否成功
-     */
+   * @desc 控制头部导航栏显示/隐藏
+   * @param {Boolean} visible 是否显示导航栏
+   * @returns {Boolean} 操作是否成功
+   */
  setHeaderShown(visible = false) {
    return this.postMessageToRN({
      type: 'headerShown',
@@ -45,9 +45,9 @@ export default {
  },

  /**
-     * @desc 关闭当前页面，触发返回操作
-     * @returns {Boolean} 操作是否成功
-     */
+   * @desc 关闭当前页面，触发返回操作
+   * @returns {Boolean} 操作是否成功
+   */
  navigateBack() {
    return this.postMessageToRN({
      type: 'back'
@@ -55,10 +55,10 @@ export default {
  },

  /**
-     * @desc 设置头部导航栏标题
-     * @param {String} title 标题文本
-     * @returns {Boolean} 操作是否成功
-     */
+   * @desc 设置头部导航栏标题
+   * @param {String} title 标题文本
+   * @returns {Boolean} 操作是否成功
+   */
  setTitle(title) {
    if (title) {
      return this.postMessageToRN({
@@ -69,10 +69,10 @@ export default {
  },

  /**
-     * @desc 设置系统状态栏明暗主题
-     * @param {String} style 主题风格，'light'为浅色，'dark'为深色
-     * @returns {Boolean} 操作是否成功
-     */
+   * @desc 设置系统状态栏明暗主题
+   * @param {String} style 主题风格，'light'为浅色，'dark'为深色
+   * @returns {Boolean} 操作是否成功
+   */
  setStatusBarStyle(style = 'light') {
    return this.postMessageToRN({
      type: 'statusBar',
@@ -81,10 +81,10 @@ export default {
  },

  /**
-     * @desc 跳转到APP页面
-     * @param {String} url APP内页面路由
-     * @returns {Boolean} 操作是否成功
-     */
+   * @desc 跳转到APP页面
+   * @param {String} url APP内页面路由
+   * @returns {Boolean} 操作是否成功
+   */
  navigateToAppPage(url) {
    return this.postMessageToRN({
      type: 'navigate',
@@ -92,22 +92,22 @@ export default {
    });
  },

-  // /**
-  //  * @desc 跳转到H5页面
-  //  * @param {String} h5Url 目标H5链接
-  //  * @param {String} name 导航头中的标题文案
-  //  * @param {Boolean} fullscreen 是否全屏显示（隐藏导航头）
-  //  * @returns {Boolean} 操作是否成功
-  //  */
-  // navigateToH5(h5Url, name, fullscreen = false) {
-  //   if (fullscreen) {
-  //     h5Url = this.appendQueryParam(h5Url, 'fullscreen', 'true');
-  //   }
-  //   return this.postMessageToRN({
-  //     type: 'navigate',
-  //     url: `authH5?url=${encodeURIComponent(h5Url)}&name=${name}`
-  //   });
-  // },
+  /**
+   * @desc 跳转到H5页面
+   * @param {String} h5Url 目标H5链接
+   * @param {String} name 导航头中的标题文案
+   * @param {Boolean} fullscreen 是否全屏显示（隐藏导航头）
+   * @returns {Boolean} 操作是否成功
+   */
+  navigateToH5(h5Url, name, fullscreen = false) {
+    if (fullscreen) {
+      h5Url = this.appendQueryParam(h5Url, 'fullscreen', 'true');
+    }
+    return this.postMessageToRN({
+      type: 'navigate',
+      url: `authH5?url=${encodeURIComponent(h5Url)}&name=${name}`
+    });
+  },

  // /**
  //  * @desc 给URL添加查询参数
@@ -123,9 +123,9 @@ export default {
  // },

  /**
-     * @desc 禁用原生返回（Android）
-     * @returns {Boolean} 操作是否成功
-     */
+   * @desc 禁用原生返回（Android）
+   * @returns {Boolean} 操作是否成功
+   */
  takeOverAndroidBack() {
    return this.postMessageToRN({
      type: 'takeOverAndroidBack'
@@ -133,10 +133,10 @@ export default {
  },

  /**
-     * @desc 跳转到手机浏览器中打开页面
-     * @param {String} url 要打开的URL
-     * @returns {Boolean} 操作是否成功
-     */
+   * @desc 跳转到手机浏览器中打开页面
+   * @param {String} url 要打开的URL
+   * @returns {Boolean} 操作是否成功
+   */
  openInBrowser(url) {
    return this.postMessageToRN({
      type: 'openLink',
@@ -145,10 +145,10 @@ export default {
  },

  /**
-     * @desc 使用原生扫码工具
-     * @param {Function} callback 扫码结果回调函数
-     * @returns {Boolean} 操作是否成功
-     */
+   * @desc 使用原生扫码工具
+   * @param {Function} callback 扫码结果回调函数
+   * @returns {Boolean} 操作是否成功
+   */
  scanCode(callback) {
    const cbId = this.generateUniqueId();
    window[cbId] = callback;
@@ -159,16 +159,16 @@ export default {
  },

  /**
-     * @desc 分享链接到微信
-     * @param {Object} options 分享选项
-     * @param {String} options.title 分享标题
-     * @param {String} options.description 分享副标题
-     * @param {String} options.thumbImageUrl 缩略图URL
-     * @param {String} options.webpageUrl 网页链接
-     * @param {Number} options.scene 分享场景：0为微信好友，1为朋友圈
-     * @param {Function} callback 分享结果回调函数
-     * @returns {Boolean} 操作是否成功
-     */
+   * @desc 分享链接到微信
+   * @param {Object} options 分享选项
+   * @param {String} options.title 分享标题
+   * @param {String} options.description 分享副标题
+   * @param {String} options.thumbImageUrl 缩略图URL
+   * @param {String} options.webpageUrl 网页链接
+   * @param {Number} options.scene 分享场景：0为微信好友，1为朋友圈
+   * @param {Function} callback 分享结果回调函数
+   * @returns {Boolean} 操作是否成功
+   */
  shareToWeChat(options, callback) {
    const cbId = this.generateUniqueId();
    window[cbId] = callback;
@@ -184,16 +184,16 @@ export default {
  },

  /**
-     * @desc 分享视频到抖音
-     * @param {Object} options 分享选项
-     * @param {String} options.title 分享标题
-     * @param {String} options.shortTitle 抖音短标题
-     * @param {Array<String>} options.videos 视频地址数组
-     * @param {Boolean} options.isPublish 是否直接跳转到发布页
-     * @param {Boolean} options.tip 是否显示APP自带的提示与loading
-     * @param {Function} callback 分享结果回调函数
-     * @returns {Boolean} 操作是否成功
-     */
+   * @desc 分享视频到抖音
+   * @param {Object} options 分享选项
+   * @param {String} options.title 分享标题
+   * @param {String} options.shortTitle 抖音短标题
+   * @param {Array<String>} options.videos 视频地址数组
+   * @param {Boolean} options.isPublish 是否直接跳转到发布页
+   * @param {Boolean} options.tip 是否显示APP自带的提示与loading
+   * @param {Function} callback 分享结果回调函数
+   * @returns {Boolean} 操作是否成功
+   */
  shareVideoToDouyin(options, callback) {
    const cbId = this.generateUniqueId();
    window[cbId] = callback;
@@ -209,10 +209,10 @@ export default {
  },

  /**
-     * @desc 唤起抖音
-     * @param {Function} callback 操作结果回调函数
-     * @returns {Boolean} 操作是否成功
-     */
+   * @desc 唤起抖音
+   * @param {Function} callback 操作结果回调函数
+   * @returns {Boolean} 操作是否成功
+   */
  openDouyin(callback) {
    const cbId = this.generateUniqueId();
    window[cbId] = callback;
@@ -223,11 +223,11 @@ export default {
  },

  /**
-     * @desc 分享文本到微博
-     * @param {String} content 要分享的文本内容
-     * @param {Function} callback 分享结果回调函数
-     * @returns {Boolean} 操作是否成功
-     */
+   * @desc 分享文本到微博
+   * @param {String} content 要分享的文本内容
+   * @param {Function} callback 分享结果回调函数
+   * @returns {Boolean} 操作是否成功
+   */
  shareTextToWeibo(content, callback) {
    const cbId = this.generateUniqueId();
    window[cbId] = callback;
@@ -239,11 +239,11 @@ export default {
  },

  /**
-     * @desc 保存到相册
-     * @param {String} src 媒体资源URL（图片或视频）
-     * @param {Function} callback 保存结果回调函数
-     * @returns {Boolean} 操作是否成功
-     */
+   * @desc 保存到相册
+   * @param {String} src 媒体资源URL（图片或视频）
+   * @param {Function} callback 保存结果回调函数
+   * @returns {Boolean} 操作是否成功
+   */
  save2Album(src, callback) {
    const cbId = this.generateUniqueId();
    window[cbId] = callback;
@@ -255,11 +255,11 @@ export default {
  },

  /**
-     * @desc 请求安卓权限
-     * @param {String} permission 权限名称，如'android.permission.CAMERA'
-     * @param {Function} callback 请求结果回调函数
-     * @returns {Boolean} 操作是否成功
-     */
+   * @desc 请求安卓权限
+   * @param {String} permission 权限名称，如'android.permission.CAMERA'
+   * @param {Function} callback 请求结果回调函数
+   * @returns {Boolean} 操作是否成功
+   */
  requestAndroidPermission(permission, callback) {
    const cbId = this.generateUniqueId();
    window[cbId] = callback;
@@ -270,14 +270,14 @@ export default {
    });
  },
  /**
-     * @desc 获取新的认证令牌
-     * @param {Function} callback 获取结果回调函数，参数格式为：
-     *                            {status: 0|1, msg: string, data: string}
-     *                            status: 0成功，1失败
-     *                            msg: 错误信息
-     *                            data: 新token
-     * @returns {Boolean} 操作是否成功
-     */
+   * @desc 获取新的认证令牌
+   * @param {Function} callback 获取结果回调函数，参数格式为：
+   *                            {status: 0|1, msg: string, data: string}
+   *                            status: 0成功，1失败
+   *                            msg: 错误信息
+   *                            data: 新token
+   * @returns {Boolean} 操作是否成功
+   */
  getNewAuthToken(callback) {
    const cbId = this.generateUniqueId();
    window[cbId] = callback;
--- a/src/main.ts
+++ b/src/main.ts
@@ -6,15 +6,11 @@ import App from './App.vue';
 import router from './router';
 // 2. 引入组件样式
 import 'vant/lib/index.css';
-// // 调整路由守卫的设置位置
-// router.beforeEach((to, from, next) => {
-//   if (to.query.digitalYiliToken) {
-//     utils.delCookie('xToken');
-//     utils.clearCookie('xToken');
-//     utils.setCookie('xToken', to.query.xToken, 7);
-//   }
-//   next();
-// });
+import appBridge from '@/assets/js/appBridge';
+router.beforeEach((to, from, next) => {
+  appBridge.setTitle(to.meta.title as string);
+  next();
+});
 const app = createApp(App);
 app.use(createPinia());
 app.use(router);
--- a/src/router/index.ts
+++ b/src/router/index.ts
@@ -59,7 +59,7 @@ const router = createRouter({
    }, {
      path: '/publish',
      name: 'publish',
-      meta: { title: '问卷发布' },
+      meta: { title: '问卷投放' },
      component: () => import('../views/Survey/views/Publish/Index.vue')
    }
  ]
--- a/src/views/Home/Index.vue
+++ b/src/views/Home/Index.vue
@@ -3,29 +3,34 @@
 import LastSurvey from './components/LastSurvey/Index.vue';
 import Market from './components/Market/Index.vue';
 import CreateSurvey from './components/CreateSurvey/Index.vue';
-import { onMounted } from 'vue';
+import { onMounted,ref } from 'vue';
 import utils from '@/assets/js/common';
 import { getUserInfo } from '@/api/common/index.js';
 import { showFailToast } from 'vant';
-
+let contentShow = ref(false);
 onMounted(async() => {
  if (utils.getParameter('digitalYiliToken')) {
    const appToken = utils.getParameter('digitalYiliToken');
    getUserInfo(appToken).then((res) => {
      if (res.data) {
+        contentShow = true;
        utils.setSessionStorage('userInfo', res.data.data);
      } else {
+        contentShow = false;
        showFailToast(error.response.data?.message || error.data?.message || error.message || '服务器错误');
      }
    }).catch((error) => {
+      contentShow = false;
      showFailToast(error.response.data?.message || error.message || '服务器错误');
    });
+  }else{
+    contentShow = true
  }
 });
 </script>

 <template>
-  <div class="container">
+  <div class="container" v-if="contentShow">
    <create-survey />

    <!-- 最新问卷 -->
--- a/src/views/Survey/views/Publish/Index.vue
+++ b/src/views/Survey/views/Publish/Index.vue
@@ -4,15 +4,13 @@

    <van-cell-group inset style="margin-top: 20px; padding: 30px">
      <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="" alt="" width="100px" height="100px" />
-        <div>
+        <img :src="publishInfo.img_url" alt="" width="100px" height="100px" />
+        <div class="tit">
          <div>液态奶产品研究标准化问卷</div>
          <div>扫码填写问卷</div>
        </div>
@@ -20,17 +18,14 @@
      <div>移动端仅做数据回收，问卷数据分析请前往PC端浏览</div>
      <div class="operation">
        <span v-for="(item, index) in operateList" :key="index" @click="operateBtn(item)">
-          <img
-            width="30px"
-            src="https://files.axshare.com/gsc/DR6075/44/1a/03/441a03a8b1004755a7a392b311acf97f/images/%E6%8A%95%E6%94%BE/u21.png?pageId=2f9ba10c-92b8-4c9b-b40b-04e65a0b4333"
-          />
+          <img width="30px"
+            src="https://files.axshare.com/gsc/DR6075/44/1a/03/441a03a8b1004755a7a392b311acf97f/images/%E6%8A%95%E6%94%BE/u21.png?pageId=2f9ba10c-92b8-4c9b-b40b-04e65a0b4333" />
          {{ item.title }}
        </span>
      </div>
    </van-cell-group>
    <!-- 底部功能性按钮 -->
-    <div
-      style="
+    <div style="
        position: fixed;
        bottom: 0;
        display: flex;
@@ -40,8 +35,7 @@
        width: 100%;
        height: 50px;
        background-color: white;
-      "
-    >
+      ">
    </div>
  </div>
 </template>
@@ -49,27 +43,27 @@
 <script setup lang="ts">
 import { useRoute } from 'vue-router';
 import { onMounted, reactive, ref } from 'vue';
+import { showFailToast, showSuccessToast } from 'vant';
+import utils from '@/assets/js/common';
 import appBridge from '@/assets/js/appBridge';
 import { getQrcode } from '@/api/survey';
-import { showFailToast, showSuccessToast } from 'vant';
+

 const route = useRoute();
 const surveyTitle = route.meta.title as string;
+appBridge.setTitle(surveyTitle)
 const operateList = reactive([
  {
    title: '复制链接',
    type: 'copyLink',
-    img: ''
  },
  {
    title: '转发到微信',
    type: 'shareLink',
-    img: ''
  },
  {
    title: '下载二维码',
    type: 'qrCode',
-    img: ''
  }
 ]);

@@ -85,34 +79,32 @@ interface PublishInfo {
 const publishInfo = ref<PublishInfo>({} as PublishInfo);

 type OperateItem = typeof operateList[0];
-onMounted(async() => {
+onMounted(async () => {
  getQrcode('Xxgdr5EN').then((res) => {
    if (res.data) {
      publishInfo.value = res.data.data || {};
-      console.log(res.data);
    }
  }).catch((error) => {
    showFailToast(error.data?.message || error.message || '服务器错误');
  });
 });
 const operateBtn = (item: OperateItem) => {
-  console.log(item);
  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);
@@ -122,7 +114,7 @@ function copyLink() {
  showSuccessToast('复制成功');
 }
 // 分享链接
-function shareLink() {
+function shareLink () {
  const params = {
    type: 'shareToWx',
    title: publishInfo.value.download_url.title,
@@ -137,16 +129,20 @@ function shareLink() {
 }

 // 下载二维码
-function downLoadImg() {
+function downLoadImg () {
  const { title, url } = publishInfo.value.download_url;
-  const link = document.createElement('a');
-  link.href = url;
-  link.download = title;
-  document.body.appendChild(link);
-  link.click();
-  document.body.removeChild(link);
-  // const subdata = publishInfo.value.download_url
-  // store.dispatch('common/fileDown', subdata);
+  if (utils.getCookie('xToken')) {
+    appBridge.save2Album(url, (result: any) => {
+      showSuccessToast('下载成功');
+    });
+  } else {
+    const link = document.createElement('a');
+    link.href = url;
+    link.download = title;
+    document.body.appendChild(link);
+    link.click();
+    document.body.removeChild(link);
+  }
 }

 </script>
@@ -173,20 +169,30 @@ function downLoadImg() {

 .qrcode {
  display: flex;
+  margin: 10px 0;
+  .tit{
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    margin: 0 10px;
+    line-height: 20px;
+  }
 }

 .operation {
  display: flex;
  flex-direction: row;
-  justify-content: start;
-  margin-right: 20px;
+  justify-content: space-between;
+  margin: 25px 10px 0 0;

  span {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
-    margin: 10px;
+    img{
+      margin-bottom: 10px;
+    }
  }
 }
 </style>