问题根源分析: 1. diy-group 的 mounted() 在组件挂载时就触发了,但此时 diyData 还没有数据 2. otifyMounted() 在组件 mount 时立即关闭了 H5 的 uni.showLoading(),但页面内容还没就绪 3. 导致启动屏关闭后,首页内容还是空白的 修复方案: 1. 在 diy-group.vue 中,将 loaded 事件的触发时机改为 diyData watch 中,确保数据加载完成后再通知 2. 在 splash-state.js 中, otifyMounted() 不再立即关闭 H5 原生 loading,等待页面就绪后由 _doHide() 统一关闭 3. 在 index.js 中,onDiyGroupLoaded() 延迟 500ms 再通知页面就绪,确保内容渲染完成
171 lines
4.8 KiB
JavaScript
171 lines
4.8 KiB
JavaScript
import splashState from '@/common/js/splash-state.js';
|
||
|
||
export default {
|
||
data() {
|
||
return {
|
||
minScrollTop: 100, // 设置回到顶端按钮显示要求,最小页面滚动距离
|
||
wechatQrcode: '', // 公众号二维码
|
||
diyRoute: '/pages/index/index',
|
||
shopInfo: null, // 店铺信息
|
||
diyGroupReady: false // diy-group 内容是否已渲染完毕(用于控制版本水印显示时机)
|
||
};
|
||
},
|
||
computed: {
|
||
versionWatermark() {
|
||
let v = null;
|
||
try {
|
||
v = typeof __app_version !== 'undefined' ? __app_version : null;
|
||
} catch (e) {}
|
||
if (!v || !v.commitId || !v.buildTime) return '';
|
||
const date = String(v.buildTime).slice(0, 16).replace('T', ' ');
|
||
const commit = String(v.commitId);
|
||
return `Ver.${date} · ${commit}`;
|
||
}
|
||
},
|
||
// 鸿蒙元服务环境: 系统 TabBar 点击 uni.switchTab 静默失败
|
||
// 手动接管 onTabItemTap, 用 uni.reLaunch 兜底, 确保 TabBar 跳转在鸿蒙下也能工作
|
||
// #ifdef MP-HARMONY
|
||
onTabItemTap(e) {
|
||
if (!e || !e.pagePath) return;
|
||
const pages = getCurrentPages();
|
||
const currentPage = pages[pages.length - 1];
|
||
const currentPath = currentPage ? '/' + currentPage.route : '';
|
||
const targetPath = e.pagePath.startsWith('/') ? e.pagePath : '/' + e.pagePath;
|
||
// 已经在目标页则不重复跳转
|
||
if (currentPath === targetPath) return;
|
||
uni.reLaunch({ url: targetPath });
|
||
},
|
||
// #endif
|
||
onLoad(option) {
|
||
// #ifdef H5
|
||
// H5地图选择位置回调数据
|
||
if (option.module && option.module == 'locationPicker') {
|
||
option.name = ''; // 清空地址
|
||
}
|
||
// #endif
|
||
this.name = option.name || 'DIY_VIEW_INDEX'; // 根据店铺运营模式,打开平台(shop)或者连锁门店(stroe)页面,接口会自行判断
|
||
|
||
// 获取店铺信息
|
||
this.shopInfo = uni.getStorageSync('shopInfo');
|
||
|
||
// 每次进入页面重置 diy-group 加载状态, 避免缓存的 ready 导致水印提前显示
|
||
this.diyGroupReady = false;
|
||
},
|
||
onShow() {
|
||
// 获取关注公众号二维码
|
||
this.getFollowQrcode();
|
||
|
||
// 重新获取店铺信息
|
||
this.shopInfo = uni.getStorageSync('shopInfo');
|
||
},
|
||
mounted() {
|
||
// 监听图片、文字、商品列表等组件的点击事件
|
||
this.unsubscribe = this.$eventBus?.onMany([
|
||
'rubik-cube-tap',
|
||
'picture-tap',
|
||
'text-tap',
|
||
'goods-list-tap',
|
||
'presale-tap',
|
||
'notes-tap',
|
||
'merch-list-tap',
|
||
'map-tap',
|
||
'img-ads-tap',
|
||
'many-goods-list-tap',
|
||
'search-tap',
|
||
], this._handleDiyGroupInteractionEvent);
|
||
},
|
||
beforeDestroy() {
|
||
// 移除图片点击事件监听
|
||
if (this.unsubscribe) this.unsubscribe();
|
||
},
|
||
methods: {
|
||
// 关注公众号
|
||
getFollowQrcode() {
|
||
if (!this.$util.isWeiXin()) return;
|
||
this.$api.sendRequest({
|
||
url: '/wechat/api/wechat/followqrcode',
|
||
success: res => {
|
||
if (res.code >= 0 && res.data) {
|
||
this.wechatQrcode = res.data.qrcode;
|
||
}
|
||
}
|
||
});
|
||
},
|
||
officialAccountsOpen() {
|
||
this.$refs.officialAccountsPopup.open();
|
||
},
|
||
officialAccountsClose() {
|
||
this.$refs.officialAccountsPopup.close();
|
||
},
|
||
// 判断是否需要登录授权
|
||
_requireHomeAuth() {
|
||
// #ifdef MP-WEIXIN
|
||
// 检查 index_login_auth 都开启时才需要登录授权
|
||
return this.shopInfo?.index_login_auth === 1;
|
||
// #endif
|
||
|
||
// TODO: 其他平台, 后面可以根据平台类型判断
|
||
|
||
return false;
|
||
},
|
||
// 统一处理点击及触摸事件
|
||
_handleDiyGroupInteractionEvent(payload) {
|
||
// 如果不需要登录授权,直接返回 true 继续传播
|
||
if (!this._requireHomeAuth()) {
|
||
return true;
|
||
}
|
||
|
||
// 如果已登录,直接返回 true 继续传播
|
||
if (this.storeToken) {
|
||
return true;
|
||
}
|
||
|
||
this.$refs.login?.open();
|
||
|
||
// 阻止事件继续传播
|
||
return false;
|
||
},
|
||
// diy-group 渲染完毕回调, 用于触发版本水印等延后显示元素
|
||
// 同时通知 splash-state 页面就绪, 启动屏可以关闭
|
||
// 延迟 500ms 是为了确保页面内容有足够时间渲染
|
||
onDiyGroupLoaded() {
|
||
this.diyGroupReady = true;
|
||
setTimeout(() => {
|
||
try { splashState.notifyPageReady(); } catch (e) {}
|
||
}, 500);
|
||
},
|
||
/**
|
||
* 版本连击 3 次以上显示构建版本信息(供测试人员使用)
|
||
*/
|
||
onVersionTap() {
|
||
this._titleTapCount = (this._titleTapCount || 0) + 1;
|
||
if (this._titleTapTimer) {
|
||
clearTimeout(this._titleTapTimer);
|
||
}
|
||
if (this._titleTapCount > 3) {
|
||
this._titleTapCount = 0;
|
||
this._showVersionInfo();
|
||
return;
|
||
}
|
||
// 2 秒内未达到 3 次则重置计数
|
||
this._titleTapTimer = setTimeout(() => {
|
||
this._titleTapCount = 0;
|
||
}, 2000);
|
||
},
|
||
_showVersionInfo() {
|
||
let v = null;
|
||
try {
|
||
v = typeof __app_version !== 'undefined' ? __app_version : null;
|
||
} catch (e) {}
|
||
if (v && v.commitId) {
|
||
uni.showModal({
|
||
title: '版本信息',
|
||
content: `提交 ID: ${v.commitId}\n构建时间: ${v.buildTime}`,
|
||
showCancel: false
|
||
});
|
||
} else {
|
||
console.error('未获取到构建版本信息');
|
||
}
|
||
}
|
||
}
|
||
} |