From b486dd4ccd10e3c7163cc61dde29149e1c6b324a Mon Sep 17 00:00:00 2001 From: "liu.huiying@ebiz-digits.com" Date: Wed, 12 Mar 2025 18:25:52 +0800 Subject: [PATCH] =?UTF-8?q?feat:app=E5=B5=8C=E5=A5=97h5?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/App.vue | 2 + src/assets/js/appBridge.js | 206 +++++++++++------------ src/main.ts | 14 +- src/router/index.ts | 2 +- src/views/Home/Index.vue | 11 +- src/views/Survey/views/Publish/Index.vue | 98 ++++++----- 6 files changed, 171 insertions(+), 162 deletions(-) diff --git a/src/App.vue b/src/App.vue index b9a868b..5bb4f10 100644 --- a/src/App.vue +++ b/src/App.vue @@ -10,6 +10,8 @@ onMounted(async() => { appBridge.setHeaderShown(false); // 设置系统状态栏明暗主题 appBridge.setStatusBarStyle('light'); + // 设置禁止原生返回 + // appBridge.takeOverAndroidBack(); } }); diff --git a/src/assets/js/appBridge.js b/src/assets/js/appBridge.js index 19ca426..6fc4c63 100644 --- 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} 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} 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; diff --git a/src/main.ts b/src/main.ts index 1b1e0b8..d400568 100644 --- 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); diff --git a/src/router/index.ts b/src/router/index.ts index a733c43..fb611f4 100644 --- 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') } ] diff --git a/src/views/Home/Index.vue b/src/views/Home/Index.vue index 9d0d6d7..84093f1 100644 --- 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 } }); @@ -49,27 +43,27 @@ @@ -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; + } } }