feat:app嵌套h5

src/App.vue

@@ -10,6 +10,8 @@ onMounted(async() => {
     appBridge.setHeaderShown(false);
     // 设置系统状态栏明暗主题
     appBridge.setStatusBarStyle('light');
+    // 设置禁止原生返回
+    // appBridge.takeOverAndroidBack();
   }
 });
 </script>

src/assets/js/appBridge.js

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

src/main.ts

@@ -6,15 +6,11 @@ import App from './App.vue';
 import router from './router';
 // 2. 引入组件样式
 import 'vant/lib/index.css';
-// // 调整路由守卫的设置位置
+import appBridge from '@/assets/js/appBridge';
-// router.beforeEach((to, from, next) => {
+router.beforeEach((to, from, next) => {
-//   if (to.query.digitalYiliToken) {
+  appBridge.setTitle(to.meta.title as string);
-//     utils.delCookie('xToken');
+  next();
-//     utils.clearCookie('xToken');
+});
-//     utils.setCookie('xToken', to.query.xToken, 7);
-//   }
-//   next();
-// });
 const app = createApp(App);
 app.use(createPinia());
 app.use(router);

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')
     }
   ]

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 />
 
     <!-- 最新问卷 -->

src/views/Survey/views/Publish/Index.vue

@@ -4,15 +4,13 @@
 
     <van-cell-group inset style="margin-top: 20px; padding: 30px">
       <div>
-        <img
+        <img width="100%"
-          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" />
+        <img :src="publishInfo.img_url" alt="" width="100px" height="100px" />
-        <div>
+        <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
+          <img width="30px"
-            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" />
-            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
+    <div style="
-      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,18 +79,16 @@ 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();
@@ -112,7 +104,7 @@ const operateBtn = (item: OperateItem) => {
   }
 };
 // 复制链接
-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;
+  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);
-  // const subdata = publishInfo.value.download_url
+  }
-  // store.dispatch('common/fileDown', subdata);
 }
 
 </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;
+  justify-content: space-between;
-  margin-right: 20px;
+  margin: 25px 10px 0 0;
 
   span {
     display: flex;
     flex-direction: column;
     align-items: center;
     justify-content: center;
-    margin: 10px;
+    img{
+      margin-bottom: 10px;
+    }
   }
 }
 </style>