微信小程序联调
This commit is contained in:
zhonghua.li
497
unpackage/dist/build/mp-weixin/custom-tab-bar/index.vue
vendored
Normal file
497
unpackage/dist/build/mp-weixin/custom-tab-bar/index.vue
vendored
Normal file
@@ -0,0 +1,497 @@
|
||||
<template>
|
||||
<view class="tabbar">
|
||||
<!-- 调试信息：显示当前可见的tabs -->
|
||||
<view style="display: none;">
|
||||
DEBUG: visibleTabs length: {{ visibleTabs.length }},
|
||||
tabs: {{ visibleTabs.map(t => t.text).join(', ') }},
|
||||
furnitureTabs length: {{ furnitureTabs.length }},
|
||||
furnitureTabs: {{ furnitureTabs.map(t => t.text).join(', ') }},
|
||||
roles: {{ roles.join(', ') }}
|
||||
</view>
|
||||
|
||||
<!-- 强制显示所有家具角色的tab -->
|
||||
<view
|
||||
v-for="item in furnitureTabs"
|
||||
:key="item.key"
|
||||
class="tabbar-item"
|
||||
:class="{ active: currentPath === item.pagePath }"
|
||||
@click="switchTab(item)"
|
||||
>
|
||||
<image class="tabbar-icon" :src="currentPath === item.pagePath ? item.selectedIconPath : item.iconPath" />
|
||||
<text class="tabbar-text">{{ item.text }}</text>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
// 直接在全局作用域添加调试代码，确保能执行
|
||||
console.log('CUSTOM TABBAR FILE LOADED - THIS MUST SHOW');
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
roleName: '',
|
||||
roles: [],
|
||||
currentPath: '',
|
||||
allTabs: [
|
||||
{
|
||||
key: 'furniture_reception',
|
||||
text: '接待',
|
||||
pagePath: '/pages/furniture_reception/furniture_reception',
|
||||
iconPath: '/static/tabbar/reception.png',
|
||||
selectedIconPath: '/static/tabbar/reception_active.png',
|
||||
},
|
||||
{
|
||||
key: 'furniture_customer',
|
||||
text: '客户',
|
||||
pagePath: 'pages-subpackage/furniture_customer/furniture_customer',
|
||||
iconPath: '/static/tabbar/customer.png',
|
||||
selectedIconPath: '/static/tabbar/customer_active.png',
|
||||
},
|
||||
{
|
||||
key: 'ucenter',
|
||||
text: '我的',
|
||||
pagePath: 'pages/ucenter/ucenter',
|
||||
iconPath: '/static/tabbar/me.png',
|
||||
selectedIconPath: '/static/tabbar/me_active.png',
|
||||
},
|
||||
// 已从导航中移除，但保留代码
|
||||
// {
|
||||
// key: 'champion',
|
||||
// text: '销冠',
|
||||
// pagePath: '/pages/champion/champion',
|
||||
// iconPath: '/static/tabbar/insight.png',
|
||||
// selectedIconPath: '/static/tabbar/insight_active.png',
|
||||
// },
|
||||
// {
|
||||
// key: 'workspace',
|
||||
// text: '工作台',
|
||||
// pagePath: '/pages/workspace/workspace',
|
||||
// iconPath: '/static/tabbar/workspace.png',
|
||||
// selectedIconPath: '/static/tabbar/workspace_active.png',
|
||||
// },
|
||||
{
|
||||
key: 'ucenter',
|
||||
text: '我的',
|
||||
pagePath: '/pages/ucenter/ucenter',
|
||||
iconPath: '/static/tabbar/me.png',
|
||||
selectedIconPath: '/static/tabbar/me_active.png',
|
||||
},
|
||||
{
|
||||
key: 'ai_analysis',
|
||||
text: 'AI分析',
|
||||
pagePath: '/pages/ai_analysis/ai_analysis',
|
||||
iconPath: '/static/tabbar/ai_analysis.png',
|
||||
selectedIconPath: '/static/tabbar/ai_analysis_active.png',
|
||||
},
|
||||
{
|
||||
key: 'meeting_summary',
|
||||
text: '总结和统计',
|
||||
pagePath: '/pages-subpackage/meeting_summary/meeting_summary',
|
||||
iconPath: '/static/tabbar/insight.png',
|
||||
selectedIconPath: '/static/tabbar/insight_active.png',
|
||||
},
|
||||
],
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
furnitureTabs() {
|
||||
// 强制返回所有家具角色的tab，使用与pages.json相同的路径格式
|
||||
return [
|
||||
{
|
||||
key: 'furniture_reception',
|
||||
text: '接待',
|
||||
pagePath: 'pages/furniture_reception/furniture_reception', // 移除开头的/
|
||||
iconPath: '/static/tabbar/reception.png',
|
||||
selectedIconPath: '/static/tabbar/reception_active.png',
|
||||
},
|
||||
{
|
||||
key: 'furniture_customer',
|
||||
text: '客户',
|
||||
pagePath: 'pages-subpackage/furniture_customer/furniture_customer', // 移除开头的/
|
||||
iconPath: '/static/tabbar/customer.png',
|
||||
selectedIconPath: '/static/tabbar/customer_active.png',
|
||||
},
|
||||
{
|
||||
key: 'ai_analysis',
|
||||
text: 'AI分析',
|
||||
pagePath: 'pages/ai_analysis/ai_analysis',
|
||||
iconPath: '/static/tabbar/ai_analysis.png',
|
||||
selectedIconPath: '/static/tabbar/ai_analysis_active.png',
|
||||
},
|
||||
{
|
||||
key: 'ucenter',
|
||||
text: '我的',
|
||||
pagePath: 'pages/ucenter/ucenter', // 移除开头的/
|
||||
iconPath: '/static/tabbar/me.png',
|
||||
selectedIconPath: '/static/tabbar/me_active.png',
|
||||
}
|
||||
];
|
||||
},
|
||||
|
||||
visibleTabs() {
|
||||
console.log('=== CUSTOM TABBAR VISIBLE TABS CALCULATED ===');
|
||||
console.log('VISIBLE TABS CALC - THIS MUST SHOW IN H5');
|
||||
|
||||
// 简化逻辑：直接返回家具相关的tabs，跳过权限检查
|
||||
const furnitureKeys = ['furniture_reception', 'furniture_customer', 'ai_analysis', 'ucenter'];
|
||||
const result = furnitureKeys.map(key => {
|
||||
return this.allTabs.find(tab => tab.key === key);
|
||||
}).filter(Boolean);
|
||||
|
||||
console.log('[TabBar][visibleTabs] 直接返回家具tabs:', result.map(t => t.key), 'texts:', result.map(t => t.text));
|
||||
return result;
|
||||
},
|
||||
},
|
||||
created() {
|
||||
console.log('=== CUSTOM TABBAR COMPONENT CREATED ===');
|
||||
console.log('CUSTOM TABBAR CREATED - THIS MUST SHOW IN H5');
|
||||
this.refreshRole();
|
||||
this.updateActivePath();
|
||||
},
|
||||
mounted() {
|
||||
console.log('=== CUSTOM TABBAR COMPONENT MOUNTED ===');
|
||||
console.log('CUSTOM TABBAR MOUNTED - THIS MUST SHOW IN CONSOLE');
|
||||
|
||||
// 强制执行，不依赖条件编译
|
||||
this.forceH5TabBarSetup();
|
||||
|
||||
// 监听外部刷新事件（登录后、页面切换时可触发）
|
||||
uni.$on('tabbar:refresh', this.handleExternalRefresh);
|
||||
// 初始化时同步一次
|
||||
this.handleExternalRefresh();
|
||||
|
||||
// H5平台：额外处理页面刷新后的显示问题
|
||||
// #ifdef H5
|
||||
// 监听页面显示事件，确保刷新后tabBar正确显示
|
||||
uni.on('onShow', () => {
|
||||
setTimeout(() => {
|
||||
console.log('H5: 页面显示事件触发，刷新tabBar');
|
||||
this.handleExternalRefresh();
|
||||
this.forceH5TabBarSetup();
|
||||
}, 300);
|
||||
});
|
||||
|
||||
// 监听浏览器刷新事件
|
||||
if (typeof window !== 'undefined') {
|
||||
window.addEventListener('load', () => {
|
||||
setTimeout(() => {
|
||||
console.log('H5: 页面加载完成，刷新tabBar');
|
||||
this.handleExternalRefresh();
|
||||
this.forceH5TabBarSetup();
|
||||
}, 500);
|
||||
});
|
||||
}
|
||||
// #endif
|
||||
},
|
||||
beforeDestroy() {
|
||||
uni.$off('tabbar:refresh', this.handleExternalRefresh);
|
||||
},
|
||||
methods: {
|
||||
refreshRole() {
|
||||
try {
|
||||
// 角色来源优先级：单独存储的 roleName > 登录响应里的 roleName
|
||||
const storedRole = uni.getStorageSync('backend-role-name') || '';
|
||||
const loginResp = uni.getStorageSync('backend-login-response') || {};
|
||||
const respRole = loginResp.roleName || '';
|
||||
|
||||
// 兼容后端返回大小写/空格/多角色逗号分隔的情况
|
||||
const normalize = (val) =>
|
||||
typeof val === 'string'
|
||||
? val
|
||||
.split(',')
|
||||
.map((s) => s.trim().toLowerCase())
|
||||
.filter(Boolean)
|
||||
: [];
|
||||
|
||||
const roles = [
|
||||
...normalize(storedRole),
|
||||
...normalize(respRole),
|
||||
];
|
||||
|
||||
// 角色判定
|
||||
const hasEdu = roles.includes('speaking_training_teacher');
|
||||
const hasStudent = roles.includes('speaking_training_students');
|
||||
this.roles = roles;
|
||||
this.roleName = hasEdu ? 'speaking_training_teacher' : hasStudent ? 'speaking_training_students' : (roles[0] || '');
|
||||
|
||||
console.log('[TabBar][role] storedRole:', storedRole, 'respRole:', respRole, 'normalized:', roles, 'hasEdu:', hasEdu, 'hasStudent:', hasStudent, 'finalRoleName:', this.roleName);
|
||||
// #ifdef H5
|
||||
// H5 平台自定义 tabBar 无法生效，仍使用原生 DOM；这里额外做一次 DOM 显隐
|
||||
console.log('[TabBar][H5] refreshRole completed, will call toggleNativeTabs');
|
||||
// 注意：不在refreshRole中直接调用，而是在setupH5TabBar中处理
|
||||
// #endif
|
||||
} catch (e) {
|
||||
console.warn('读取角色失败:', e);
|
||||
}
|
||||
},
|
||||
updateActivePath() {
|
||||
const pages = getCurrentPages();
|
||||
const currentPage = pages[pages.length - 1];
|
||||
// currentPage.route 不带前导斜杠
|
||||
this.currentPath = currentPage && currentPage.route ? `/${currentPage.route}` : '';
|
||||
},
|
||||
switchTab(item) {
|
||||
// 切换前刷新一次角色，防止角色变更后仍看到教务/作业等
|
||||
this.refreshRole();
|
||||
const allowedKeys = this.getAllowedKeys();
|
||||
if (!allowedKeys.includes(item.key)) {
|
||||
uni.showToast({ title: '当前账号无此模块权限', icon: 'none', duration: 1200 });
|
||||
console.warn('[TabBar][block-switch]', 'key:', item.key, 'path:', item.pagePath, 'allowed:', allowedKeys, 'roles:', this.roles);
|
||||
return;
|
||||
}
|
||||
if (this.currentPath === item.pagePath) return;
|
||||
|
||||
// uni.switchTab 需要相对路径（去掉前导斜杠）
|
||||
const url = item.pagePath.startsWith('/') ? item.pagePath.substring(1) : item.pagePath;
|
||||
|
||||
uni.switchTab({
|
||||
url: url,
|
||||
success: () => {
|
||||
console.log('[TabBar][switchTab] success:', url);
|
||||
this.updateActivePath();
|
||||
},
|
||||
fail: (err) => {
|
||||
console.error('[TabBar][switchTab] fail:', err, 'url:', url);
|
||||
// 如果 switchTab 失败，尝试使用 reLaunch（适用于 tabBar 页面）
|
||||
uni.reLaunch({
|
||||
url: url,
|
||||
fail: (err2) => {
|
||||
console.error('[TabBar][reLaunch] fail:', err2, 'url:', url);
|
||||
uni.showToast({
|
||||
title: '页面跳转失败，请检查页面配置',
|
||||
icon: 'none',
|
||||
duration: 2000
|
||||
});
|
||||
},
|
||||
success: () => {
|
||||
this.updateActivePath();
|
||||
}
|
||||
});
|
||||
},
|
||||
complete: () => {
|
||||
// 延迟更新，确保页面切换完成
|
||||
setTimeout(() => {
|
||||
this.updateActivePath();
|
||||
}, 100);
|
||||
},
|
||||
});
|
||||
},
|
||||
handleExternalRefresh() {
|
||||
// 每次收到事件时重新读取角色并刷新选中态
|
||||
this.refreshRole();
|
||||
this.updateActivePath();
|
||||
|
||||
console.log('[TabBar][refresh] currentPath:', this.currentPath, 'roleName:', this.roleName, 'visibleKeys:', this.visibleTabs.map(t => t.key), 'roles:', this.roles);
|
||||
},
|
||||
getAllowedKeys() {
|
||||
console.log('=== CUSTOM TABBAR GET ALLOWED KEYS CALLED ===');
|
||||
console.log('GET ALLOWED KEYS - 简化版本，总是返回家具相关tabs');
|
||||
|
||||
// 简化逻辑：总是返回家具相关的tabs
|
||||
const furnitureTabs = ['furniture_reception', 'furniture_customer', 'ai_analysis', 'ucenter'];
|
||||
console.log('[TabBar][allowed] 简化逻辑 ->', furnitureTabs);
|
||||
return furnitureTabs;
|
||||
},
|
||||
// #ifdef H5
|
||||
toggleNativeTabs() {
|
||||
// H5 平台自定义 tabbar 不生效，直接根据角色显隐原生 tabbar 项
|
||||
// 当前位置顺序（根据 pages.json 中的 tabBar.list 顺序）：接待、客户、AI分析、我的、团队、总结和统计…
|
||||
const ORDER = ['furniture_reception', 'furniture_customer', 'ai_analysis', 'ucenter', 'reception', 'customer', 'team', 'meeting_summary', 'common_begin_reception'];
|
||||
const allowed = this.getAllowedKeys();
|
||||
// 限制重试次数，防止渲染时机未就绪
|
||||
this._h5TabRetries = (this._h5TabRetries || 0) + 1;
|
||||
try {
|
||||
const items = document.querySelectorAll('.uni-tabbar .uni-tabbar__item');
|
||||
if (!items || !items.length) {
|
||||
// 原生 tabbar 可能尚未渲染，稍后重试一次
|
||||
if (this._h5TabRetries <= 10) {
|
||||
setTimeout(() => this.toggleNativeTabs(), 150);
|
||||
} else {
|
||||
console.warn('[TabBar][H5 DOM] retry limit reached, allowed:', allowed.join(','));
|
||||
}
|
||||
return;
|
||||
}
|
||||
ORDER.forEach((key, idx) => {
|
||||
const node = items[idx];
|
||||
if (!node) return;
|
||||
node.style.display = allowed.includes(key) ? '' : 'none';
|
||||
});
|
||||
console.log('[TabBar][H5 DOM] allowed:', allowed.join(','), 'retries:', this._h5TabRetries);
|
||||
this._h5TabRetries = 0;
|
||||
} catch (e) {
|
||||
console.warn('[TabBar][H5 DOM] toggle tabs failed:', e);
|
||||
}
|
||||
},
|
||||
isInTabBar(pagePath) {
|
||||
// 检查页面路径是否在原生tabBar配置中
|
||||
const tabBarList = [
|
||||
'pages/furniture_reception/furniture_reception',
|
||||
'pages-subpackage/furniture_customer/furniture_customer',
|
||||
'pages/ai_analysis/ai_analysis',
|
||||
'pages/ucenter/ucenter'
|
||||
];
|
||||
const normalizedPath = pagePath.startsWith('/') ? pagePath.substring(1) : pagePath;
|
||||
const result = tabBarList.includes(normalizedPath);
|
||||
console.log('[TabBar][isInTabBar]', { pagePath, normalizedPath, tabBarList, result });
|
||||
return result;
|
||||
},
|
||||
forceH5TabBarSetup() {
|
||||
console.log('=== FORCE H5 TABBAR SETUP CALLED ===');
|
||||
|
||||
// 立即执行toggleNativeTabs
|
||||
setTimeout(() => {
|
||||
console.log('FORCE: Executing toggleNativeTabs immediately');
|
||||
this.forceToggleNativeTabs();
|
||||
}, 100);
|
||||
|
||||
// 多次延迟执行
|
||||
[500, 1000, 2000, 3000, 5000].forEach((delay, index) => {
|
||||
setTimeout(() => {
|
||||
console.log(`FORCE: Delayed execution ${index + 1} after ${delay}ms`);
|
||||
this.forceToggleNativeTabs();
|
||||
}, delay);
|
||||
});
|
||||
},
|
||||
|
||||
forceToggleNativeTabs() {
|
||||
console.log('=== FORCE TOGGLE NATIVE TABS START ===');
|
||||
|
||||
try {
|
||||
// 获取允许的tab
|
||||
const allowed = this.getAllowedKeys();
|
||||
console.log('FORCE: Current roles:', this.roles);
|
||||
console.log('FORCE: Allowed keys:', allowed);
|
||||
|
||||
// 简化DOM查找 - 直接查找所有可能的tabBar元素
|
||||
const allElements = document.querySelectorAll('*');
|
||||
const tabElements = Array.from(allElements).filter(el =>
|
||||
el.textContent && (
|
||||
el.textContent.includes('接待') ||
|
||||
el.textContent.includes('客户') ||
|
||||
el.textContent.includes('AI分析') ||
|
||||
el.textContent.includes('我的')
|
||||
)
|
||||
);
|
||||
|
||||
console.log('FORCE: Found tab elements with text:', tabElements.length);
|
||||
tabElements.forEach((el, idx) => {
|
||||
console.log(`FORCE: Element ${idx}:`, {
|
||||
tag: el.tagName,
|
||||
class: el.className,
|
||||
text: el.textContent,
|
||||
currentDisplay: el.style.display,
|
||||
computedDisplay: window.getComputedStyle(el).display
|
||||
});
|
||||
});
|
||||
|
||||
if (tabElements.length === 0) {
|
||||
console.warn('FORCE: No tab elements found! Looking for containers...');
|
||||
|
||||
// 查找可能的容器
|
||||
const containers = document.querySelectorAll('div, nav, section');
|
||||
const possibleContainers = Array.from(containers).filter(el =>
|
||||
el.children && el.children.length >= 4
|
||||
);
|
||||
|
||||
console.log('FORCE: Possible containers:', possibleContainers.length);
|
||||
possibleContainers.forEach((container, idx) => {
|
||||
console.log(`FORCE: Container ${idx}:`, {
|
||||
tag: container.tagName,
|
||||
class: container.className,
|
||||
children: container.children.length
|
||||
});
|
||||
});
|
||||
|
||||
return;
|
||||
}
|
||||
|
||||
// 按文本内容排序：接待、客户、AI分析、我的
|
||||
const sortedElements = tabElements.sort((a, b) => {
|
||||
const order = ['接待', '客户', 'AI分析', '我的'];
|
||||
const aIndex = order.findIndex(text => a.textContent.includes(text));
|
||||
const bIndex = order.findIndex(text => b.textContent.includes(text));
|
||||
return aIndex - bIndex;
|
||||
});
|
||||
|
||||
console.log('FORCE: Processing sorted elements...');
|
||||
|
||||
// 处理每个元素
|
||||
sortedElements.forEach((element, index) => {
|
||||
const keyMap = ['furniture_reception', 'furniture_customer', 'ai_analysis', 'ucenter'];
|
||||
const key = keyMap[index];
|
||||
const shouldShow = allowed.includes(key);
|
||||
|
||||
console.log(`FORCE: Processing ${key} (${element.textContent}): shouldShow=${shouldShow}`);
|
||||
|
||||
if (shouldShow) {
|
||||
element.style.display = '';
|
||||
element.style.visibility = 'visible';
|
||||
// 确保父元素也可见
|
||||
let parent = element.parentElement;
|
||||
while (parent) {
|
||||
parent.style.display = '';
|
||||
parent.style.visibility = 'visible';
|
||||
parent = parent.parentElement;
|
||||
}
|
||||
console.log(`FORCE: SHOWED ${key}`);
|
||||
} else {
|
||||
element.style.display = 'none';
|
||||
element.style.visibility = 'hidden';
|
||||
console.log(`FORCE: HID ${key}`);
|
||||
}
|
||||
});
|
||||
|
||||
console.log('=== FORCE TOGGLE NATIVE TABS END ===');
|
||||
|
||||
} catch (e) {
|
||||
console.error('FORCE: Error in forceToggleNativeTabs:', e);
|
||||
}
|
||||
},
|
||||
|
||||
// #endif
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.tabbar {
|
||||
position: fixed;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
height: 52px;
|
||||
background: #ffffff;
|
||||
border-top: 1px solid #e5e7eb;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-around;
|
||||
padding-bottom: env(safe-area-inset-bottom);
|
||||
}
|
||||
|
||||
.tabbar-item {
|
||||
flex: 1;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: #7a7e83;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.tabbar-item.active {
|
||||
color: #007aff;
|
||||
}
|
||||
|
||||
.tabbar-icon {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
|
||||
.tabbar-text {
|
||||
line-height: 16px;
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user