ZF sun
9d2b76687c
add ability to skip privacy popup when visiting specific H5 URLs directly, update PrivacyManager.show to accept skip option, add skip logic for specific form page to avoid blocking UI
478 lines
16 KiB
Vue
478 lines
16 KiB
Vue
<script>
|
|
import auth from 'common/js/auth.js';
|
|
import configExternal, { themeConfig } from 'common/js/config-external.js'
|
|
import Lang from 'common/js/lang.js';
|
|
import ThemeOverride from 'common/js/theme-override.js';
|
|
import PrivacyManager from 'common/js/privacy.js';
|
|
import splashState from 'common/js/splash-state.js';
|
|
|
|
import {
|
|
Weixin
|
|
} from 'common/js/wx-jssdk.js';
|
|
|
|
// ============================================================
|
|
// 隐私弹窗跳过规则 (H5 only)
|
|
// 浏览器直接访问以下 URL(子串匹配 pathname+hash+search)时不弹隐私弹窗
|
|
// 用于"打开 URL 直接看效果"的场景,避免被隐私弹窗挡住
|
|
// 注意: 只跳过本次弹窗,不写 storage,下次正常访问其他页面还会弹
|
|
// ============================================================
|
|
const SKIP_PRIVACY_URL_PATTERNS_H5 = [
|
|
'/pages_tool/form/formdata', // 表单详情:扫码/外链直访,弹窗会挡住表单
|
|
]
|
|
|
|
/**
|
|
* 判断当前 H5 URL 是否命中"跳过隐私弹窗"黑名单
|
|
* @returns {boolean}
|
|
*/
|
|
function _shouldSkipPrivacyForCurrentUrl() {
|
|
// #ifdef H5
|
|
if (typeof window === 'undefined' || !window.location) return false
|
|
const patterns = SKIP_PRIVACY_URL_PATTERNS_H5
|
|
if (!patterns || !patterns.length) return false
|
|
// 覆盖 history 模式和 hash 模式: pathname + search + hash 都拼上
|
|
const path = (window.location.pathname || '')
|
|
+ (window.location.search || '')
|
|
+ (window.location.hash || '')
|
|
return patterns.some(p => path.indexOf(p) !== -1)
|
|
// #endif
|
|
// #ifndef H5
|
|
return false
|
|
// #endif
|
|
}
|
|
|
|
// ============================================================
|
|
// 主题/语言启动
|
|
// ============================================================
|
|
export default {
|
|
mixins: [auth],
|
|
data() {
|
|
return {
|
|
// remote-only 模式下,业务可通过 await getApp().$langReady 等待语言包就绪
|
|
$langReady: Promise.resolve({ ok: true, source: 'local' })
|
|
};
|
|
},
|
|
onLaunch: async function(options) {
|
|
// ============================================================
|
|
// 主题提前加载(关键):让首屏渲染前 CSS 变量已挂上,避免闪一下
|
|
// ============================================================
|
|
|
|
// ---- 0) 同步预热: 立即读 storage 拿 preset,触发 require(不 await)
|
|
// 目的: 让 loadTheme 的 require 提前进入 microtask,后续 await 几乎瞬时
|
|
const cached = uni.getStorageSync('themeStyle');
|
|
let presetName = themeConfig.defaultTheme;
|
|
if (cached) {
|
|
presetName = (typeof cached === 'object') ? cached.name : cached;
|
|
}
|
|
// 触发 preset require(不 await,缓存 promise 到 configExternal.loadedConfigs)
|
|
configExternal.loadTheme(presetName);
|
|
|
|
// ---- 1) uniacid 立即写入(后续所有 HTTP 都要用到)
|
|
const uniacidChanged = options.query && options.query.uniacid && String(uni.getStorageSync('uniacid') || '') !== String(options.query.uniacid);
|
|
if (options.query && options.query.uniacid) {
|
|
uni.setStorageSync('uniacid', options.query.uniacid);
|
|
}
|
|
if (uniacidChanged) {
|
|
try { Lang.onUniacidChange(); } catch (e) {}
|
|
try { ThemeOverride.onUniacidChange(); } catch (e) {}
|
|
try { uni.$emit && uni.$emit('uniacid:changed'); } catch (e) {}
|
|
}
|
|
|
|
// remote-only 模式:
|
|
// H5: main.js 已 await boot 完成, 这里秒回 (splash 也由 main.js 全权负责)
|
|
// 小程序/鸿蒙: main.js 同步 $mount(), boot 在这里异步执行
|
|
// → splashState.show() 同步设置 visible 标志, 框架推页面后 splash 组件挂载时读取 isShow() 渲染
|
|
const langBoot = Lang.boot();
|
|
this.$langReady = langBoot;
|
|
// #ifndef H5
|
|
const _needSplash = Lang.isRemoteOnly && Lang.isRemoteOnly();
|
|
if (_needSplash) {
|
|
splashState.show();
|
|
}
|
|
// #endif
|
|
|
|
// ---- 2) 主题应用(同步 await) + 远端拉取(并行 await )
|
|
// 关键: 这一步必须 await,否则 page 会在主题挂上之前就渲染
|
|
// 内部行为: 第一次 apply 只用 preset(此时 remote 还没拉),远端就绪后第二次 apply 叠加
|
|
// 并行把 Lang.boot / ThemeOverride.boot 也拉了,节省总时间
|
|
await Promise.all([
|
|
// A) 主题第一次 apply — 走 preset,失败静默走默认
|
|
this.$store.dispatch('applyThemeWithRemote', presetName)
|
|
.catch(e => console.warn('[theme] pre-apply fail', e)),
|
|
// B) Lang boot — 直接根据返回值判断 toast,不走 lang:fallback 事件
|
|
// 为什么不走事件:
|
|
// 1) lang:fallback 受 setRemoteStatus 内部去重影响(fail→fail 不 emit),不可靠
|
|
// 2) 监听器注册时机晚于 boot 完成,首次失败收不到
|
|
// 3) boot() 返回值已经包含了 status/reason,直接判断更清晰
|
|
// 触发条件:
|
|
// - status === 'fail': 远端拉取失败(包含"无缓存兜底"和"有缓存兜底"两种)
|
|
// - reason !== 'unknown': 排除业务主动设置的未知错误
|
|
// 防刷: 进程内全局标志,只弹一次
|
|
// 延迟弹出: uni.showToast 会覆盖当前 toast,1500ms ≈ 默认 toast duration,
|
|
// 等启动期其他 toast / 模态弹窗先消失再弹,降低被覆盖风险
|
|
langBoot.then((res) => {
|
|
if (res && res.status === 'fail' && res.reason && res.reason !== 'unknown') {
|
|
if (globalThis.__i18nFallbackToastShown) return;
|
|
globalThis.__i18nFallbackToastShown = true;
|
|
setTimeout(() => {
|
|
try {
|
|
uni.showToast({
|
|
title: `Failed to load i18n. ${res.reason} Please check your network and try again.`,
|
|
icon: 'none',
|
|
duration: 10000,
|
|
});
|
|
} catch (e) {}
|
|
}, 3000);
|
|
}
|
|
}, (e) => {
|
|
console.warn('[i18n] boot fail', e);
|
|
}),
|
|
// C) ThemeOverride boot(brand/light/dark 三桶,bootTimeout=2000ms)
|
|
ThemeOverride.boot().catch(e => console.warn('[theme] boot fail', e)),
|
|
]);
|
|
|
|
// #ifndef H5
|
|
if (_needSplash) {
|
|
splashState.hide({ reason: 'boot-complete' });
|
|
}
|
|
// #endif
|
|
|
|
// 隐私协议弹窗: boot 完成后统一触发,确保翻译数据已就绪
|
|
// 通过 PrivacyManager → uni.$emit('privacy:show') 通知当前页面的 privacy-popup 组件
|
|
// 只弹一次: 同意后写 storage,后续不再弹
|
|
// 异步查询平台隐私状态(微信/鸿蒙), H5 同步返回
|
|
// H5 直访特定 URL(子串匹配)时跳过本次弹窗,不写 storage,下次正常访问其他页面还会弹
|
|
try { await PrivacyManager.show({ skip: _shouldSkipPrivacyForCurrentUrl() }); } catch (e) { console.warn('[privacy] show fail', e); }
|
|
|
|
// ---- 3) 远端就绪后,主题再 apply 一次(preset + remote 合并 )
|
|
// 这一次 setThemeStyle + themeColorSet 是同步路径(preset 已在 cache,remote 也在 cache)
|
|
// 如果跟 step 2 的 apply 值相同,Vuex 会重复 commit 但页面无视觉变化
|
|
await this.$store.dispatch('applyThemeWithRemote', presetName);
|
|
|
|
// ============================================================
|
|
// 后续: 监听器 / 平台条件 / 其它 storage commit(全部同步/轻量)
|
|
// ============================================================
|
|
|
|
// 监听远端翻译更新事件(管理后台改了词条后由后端推送 / 主动 reload)
|
|
// 注意:lang.js 内 emitUpdated 已经 commit 了 setComponentRefresh,这里
|
|
// 只做副作用(navigation title 等),不重复 forceUpdate
|
|
uni.$on && uni.$on('lang:updated', (info) => {
|
|
if (info && info.lang) {
|
|
Lang.refresh(true); // true = 显式推送 emitUpdated(虽然 loadOverrides 内部已发,这里保险起见)
|
|
}
|
|
});
|
|
// 监听远端主题覆写更新(管理后台改了 token 后,本地 Vuex 重新合并并应用)
|
|
// 关键: 走 applyThemeWithRemote action,保留原 setThemeStyle/themeColorSet 链路不动
|
|
uni.$on && uni.$on('theme:updated', () => {
|
|
// 重新从 storage 读 preset(可能用户在管理页切了预设)
|
|
const cur = uni.getStorageSync('themeStyle');
|
|
const curName = (cur && typeof cur === 'object') ? cur.name : (cur || 'default');
|
|
this.$store.dispatch('applyThemeWithRemote', curName);
|
|
});
|
|
// 监听 uniacid 切换: 通知主题运行时清旧租户缓存,下次 refresh 拿到新值
|
|
uni.$on && uni.$on('uniacid:changed', () => {
|
|
try { ThemeOverride.onUniacidChange(); } catch (e) {}
|
|
});
|
|
// i18n 远端拉取失败的 toast 提示已迁移到上方 boot() 完成的 then() 中,
|
|
// 直接根据 boot 返回值判断,不再依赖 lang:fallback 事件
|
|
uni.hideTabBar();
|
|
|
|
// #ifdef MP
|
|
if (uni.getUpdateManager) {
|
|
const updateManager = uni.getUpdateManager();
|
|
updateManager.onCheckForUpdate(function(res) {
|
|
// 请求完新版本信息的回调
|
|
});
|
|
|
|
updateManager.onUpdateReady(function(res) {
|
|
uni.showModal({
|
|
title: Lang.lang('common.updateTip'),
|
|
content: Lang.lang('common.updateReady'),
|
|
success(res) {
|
|
if (res.confirm) {
|
|
// 新的版本已经下载好，调用 applyUpdate 应用新版本并重启
|
|
updateManager.applyUpdate();
|
|
}
|
|
}
|
|
});
|
|
});
|
|
|
|
updateManager.onUpdateFailed(function(res) {
|
|
// 新的版本下载失败
|
|
});
|
|
}
|
|
// #endif
|
|
|
|
// #ifdef H5
|
|
if (this.$util.getDeviceInfo().platform == 'ios') {
|
|
uni.setStorageSync('initUrl', location.href);
|
|
}
|
|
// #endif
|
|
|
|
if (uni.onNetworkStatusChange) {
|
|
uni.onNetworkStatusChange(function(res) {
|
|
if (!res.isConnected) {
|
|
uni.showModal({
|
|
title: Lang.lang('common.networkLost'),
|
|
content: Lang.lang('common.networkCheck'),
|
|
showCancel: false
|
|
});
|
|
}
|
|
});
|
|
}
|
|
|
|
// /api/config/init 拉服务器侧数据(包含真正该用的 preset name)
|
|
// 内部: success 回调里再次 dispatch('applyThemeWithRemote', serverPreset)
|
|
// fire-and-forget: 不阻塞后续同步 commit
|
|
this.$store.dispatch('init');
|
|
|
|
// 插件是否存在
|
|
if (uni.getStorageSync('addonIsExist')) {
|
|
this.$store.commit('setAddonIsExist', uni.getStorageSync('addonIsExist'));
|
|
}
|
|
|
|
// 默认图
|
|
if (uni.getStorageSync('defaultImg')) {
|
|
this.$store.commit('setDefaultImg', uni.getStorageSync('defaultImg'));
|
|
}
|
|
|
|
// 站点信息
|
|
if (uni.getStorageSync('siteInfo')) {
|
|
this.$store.commit('setSiteInfo', uni.getStorageSync('siteInfo'));
|
|
}
|
|
|
|
// 门店配置
|
|
if (uni.getStorageSync('globalStoreConfig')) {
|
|
this.$store.commit('setGlobalStoreConfig', uni.getStorageSync('globalStoreConfig'));
|
|
}
|
|
|
|
// 门店信息
|
|
if (uni.getStorageSync('globalStoreInfo')) {
|
|
this.$store.commit('setGlobalStoreInfo', uni.getStorageSync('globalStoreInfo'));
|
|
}
|
|
|
|
// 默认门店信息
|
|
if (uni.getStorageSync('defaultStoreInfo')) {
|
|
this.$store.commit('setDefaultStoreInfo', uni.getStorageSync('defaultStoreInfo'));
|
|
}
|
|
|
|
// 客服配置
|
|
if (uni.getStorageSync('servicerConfig')) {
|
|
this.$store.commit('setServicerConfig', uni.getStorageSync('servicerConfig'));
|
|
}
|
|
|
|
// 企业微信配置
|
|
if (uni.getStorageSync('wxworkConfig')) {
|
|
this.$store.commit('setWxworkConfig', uni.getStorageSync('wxworkConfig'));
|
|
}
|
|
|
|
// 版权信息
|
|
if (uni.getStorageSync('copyright')) {
|
|
this.$store.commit('setCopyright', uni.getStorageSync('copyright'));
|
|
}
|
|
|
|
// 地址配置
|
|
if (uni.getStorageSync('mapConfig')) {
|
|
this.$store.commit('setMapConfig', uni.getStorageSync('mapConfig'));
|
|
}
|
|
|
|
if (uni.getStorageSync('token')) {
|
|
this.$store.commit('setToken', uni.getStorageSync('token'));
|
|
}
|
|
|
|
// 会员信息
|
|
if (uni.getStorageSync('memberInfo')) {
|
|
this.$store.commit('setMemberInfo', uni.getStorageSync('memberInfo'));
|
|
|
|
// 查询购物车信息
|
|
this.$store.dispatch('getCartNumber');
|
|
}
|
|
|
|
// #ifdef H5
|
|
// 自动授权登录
|
|
// 未登录情况下
|
|
if (!uni.getStorageSync('memberInfo')) {
|
|
this.getAuthInfo();
|
|
}
|
|
if (this.$store.state.token) {
|
|
this.$api.sendRequest({
|
|
url: '/api/member/info',
|
|
success: (res) => {
|
|
if (res.code >= 0) {
|
|
this.$store.commit('setMemberInfo', res.data);
|
|
}
|
|
}
|
|
});
|
|
}
|
|
// #endif
|
|
|
|
// #ifdef MP-ALIPAY
|
|
if (options.query && options.query.m) uni.setStorageSync('source_member', options.query.m);
|
|
// #endif
|
|
},
|
|
onShow: function(options) {
|
|
// #ifdef MP
|
|
// 自动授权登录
|
|
this.getAuthInfo();
|
|
if (this.$store.state.token) {
|
|
this.$api.sendRequest({
|
|
url: '/api/member/info',
|
|
success: (res) => {
|
|
if (res.code >= 0) {
|
|
this.$store.commit('setMemberInfo', res.data);
|
|
}
|
|
}
|
|
});
|
|
}
|
|
// #endif
|
|
|
|
// #ifdef MP-ALIPAY
|
|
if (options.query && options.query.m) uni.setStorageSync('source_member', options.query.m);
|
|
// #endif
|
|
},
|
|
onHide: function() {},
|
|
methods: {
|
|
/**
|
|
* 获取授权信息
|
|
*/
|
|
getAuthInfo() {
|
|
// #ifdef H5
|
|
if (this.$util.isWeiXin()) {
|
|
this.$util.getUrlCode(urlParams => {
|
|
if (urlParams.source_member) uni.setStorageSync('source_member', urlParams
|
|
.source_member);
|
|
|
|
if (urlParams.code == undefined) {
|
|
this.$api.sendRequest({
|
|
url: '/wechat/api/wechat/authcode',
|
|
data: {
|
|
redirect_url: location.href,
|
|
scopes: 'snsapi_userinfo'
|
|
},
|
|
success: res => {
|
|
if (res.code >= 0) {
|
|
location.href = res.data;
|
|
}
|
|
}
|
|
});
|
|
} else {
|
|
this.$api.sendRequest({
|
|
url: '/wechat/api/wechat/authcodetoopenid',
|
|
data: {
|
|
code: urlParams.code
|
|
},
|
|
success: res => {
|
|
if (res.code >= 0) {
|
|
let data = {};
|
|
if (res.data.openid) data.wx_openid = res.data.openid;
|
|
if (res.data.unionid) data.wx_unionid = res.data.unionid;
|
|
if (res.data.userinfo) Object.assign(data, res.data
|
|
.userinfo);
|
|
this.authLogin(data);
|
|
}
|
|
}
|
|
});
|
|
}
|
|
});
|
|
}
|
|
// #endif
|
|
|
|
// #ifdef MP
|
|
this.getCode(data => {
|
|
this.authLogin(data, 'authOnlyLogin');
|
|
});
|
|
// #endif
|
|
},
|
|
/**
|
|
* 授权登录
|
|
*/
|
|
authLogin(data, type = 'authLogin') {
|
|
if (uni.getStorageSync('source_member')) data.source_member = uni.getStorageSync('source_member');
|
|
|
|
uni.setStorageSync('authInfo', data);
|
|
|
|
this.$api.sendRequest({
|
|
url: type == 'authLogin' ? '/api/login/auth' : '/api/login/authonlylogin',
|
|
data,
|
|
success: res => {
|
|
if (res.code >= 0) {
|
|
this.$store.commit('setToken', res.data.token);
|
|
this.getMemberInfo()
|
|
this.$store.dispatch('getCartNumber');
|
|
}
|
|
}
|
|
});
|
|
},
|
|
/**
|
|
* 公众号分享设置
|
|
*/
|
|
shareConfig() {
|
|
this.$api.sendRequest({
|
|
url: '/wechat/api/wechat/share',
|
|
data: {
|
|
url: window.location.href
|
|
},
|
|
success: res => {
|
|
if (res.code == 0) {
|
|
var wxJS = new Weixin();
|
|
wxJS.init(res.data.jssdk_config);
|
|
|
|
let share_data = JSON.parse(JSON.stringify(res.data.share_config.data));
|
|
if (share_data) {
|
|
wxJS.setShareData({
|
|
title: share_data.title,
|
|
desc: share_data.desc,
|
|
link: share_data.link,
|
|
imgUrl: this.$util.img(share_data.imgUrl)
|
|
},
|
|
res => {
|
|
}
|
|
);
|
|
}
|
|
|
|
let hideOptionMenu = res.data.share_config.permission.hideOptionMenu;
|
|
let hideMenuItems = res.data.share_config.permission.hideMenuItems;
|
|
|
|
if (hideOptionMenu) {
|
|
wxJS.weixin.hideOptionMenu(); //屏蔽分享好友等按钮
|
|
} else {
|
|
wxJS.weixin.showOptionMenu(); //放开分享好友等按钮
|
|
}
|
|
}
|
|
},
|
|
fail: err => {}
|
|
});
|
|
},
|
|
getMemberInfo() {
|
|
this.$api.sendRequest({
|
|
url: '/api/member/info',
|
|
success: (res) => {
|
|
if (res.code >= 0) {
|
|
// 登录成功，存储会员信息
|
|
this.$store.commit('setMemberInfo', res.data);
|
|
}
|
|
}
|
|
});
|
|
}
|
|
},
|
|
watch: {
|
|
$route: {
|
|
handler(newName, oldName) {
|
|
if (this.$util.isWeiXin()) {
|
|
this.shareConfig();
|
|
}
|
|
},
|
|
// 代表在watch里声明了firstName这个方法之后立即先去执行handler方法
|
|
immediate: true
|
|
}
|
|
}
|
|
};
|
|
</script>
|
|
<style lang="scss">
|
|
@import './common/css/main.scss';
|
|
@import './common/css/iconfont.css';
|
|
@import './common/css/icondiy.css'; // 自定义图标库
|
|
@import './common/css/icon/extend.css'; // 扩展图标库
|
|
page {
|
|
background: #f4f6fa;
|
|
}
|
|
</style> |