tabbar bug修复
This commit is contained in:
BAKEYi
parent
bbe660cbfc
commit
1d611bee0b
|
|
@ -1,131 +1,183 @@
|
||||||
<template>
|
<template>
|
||||||
<uv-tabbar fixed :value="selected" @change="change1" activeColor="#FF4767 " :placeholder="false"
|
<uv-tabbar
|
||||||
:safeAreaInsetBottom="false" :customStyle="{height:`110rpx`}">
|
v-if="tabbarReady"
|
||||||
<!-- <uv-tabbar-item v-for="(item,index) in $store.state.tabbarList" :key="index" :text="item.text" -->
|
:key="refreshKey"
|
||||||
<uv-tabbar-item v-for="(item,index) in tabbarList" :key="index" :text="item.text"
|
fixed
|
||||||
:badge="getNum(index)"
|
:value="currentTabIndex"
|
||||||
:customStyle="{height:`110rpx`}">
|
@change="onTabChange"
|
||||||
<template v-slot:active-icon>
|
activeColor="#FF4767"
|
||||||
<image class="icon" :src="item.selectedIconPath"></image>
|
:placeholder="false"
|
||||||
</template>
|
:safeAreaInsetBottom="false"
|
||||||
<template v-slot:inactive-icon>
|
:customStyle="{height:'110rpx'}"
|
||||||
<image class="icon" :src="item.iconPath"></image>
|
>
|
||||||
</template>
|
<uv-tabbar-item
|
||||||
</uv-tabbar-item>
|
v-for="(item, idx) in tabbarList"
|
||||||
</uv-tabbar>
|
:key="idx"
|
||||||
|
:name="idx"
|
||||||
|
:text="item.text"
|
||||||
|
:badge="getNum(idx)"
|
||||||
|
:customStyle="{height:'110rpx'}"
|
||||||
|
@click="onItemClick(idx)"
|
||||||
|
>
|
||||||
|
<template v-slot:active-icon>
|
||||||
|
<image class="icon" :src="item.selectedIconPath"></image>
|
||||||
|
</template>
|
||||||
|
<template v-slot:inactive-icon>
|
||||||
|
<image class="icon" :src="item.iconPath"></image>
|
||||||
|
</template>
|
||||||
|
</uv-tabbar-item>
|
||||||
|
</uv-tabbar>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
import request from "@/utils/request";
|
import { mapState, mapMutations } from 'vuex';
|
||||||
export default {
|
import request from "@/utils/request";
|
||||||
name: "tab-bar",
|
|
||||||
props: {
|
|
||||||
selected: {
|
|
||||||
type: [Number, String]
|
|
||||||
}
|
|
||||||
},
|
|
||||||
data() {
|
|
||||||
return {
|
|
||||||
tabbarList: [{
|
|
||||||
"iconPath": "/static/images/tabbar/new_home_gray.png",
|
|
||||||
"text": "首页",
|
|
||||||
"selectedIconPath": "/static/images/tabbar/new_home.png",
|
|
||||||
"pagePath": "/pages/home/home"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"iconPath": "/static/images/tabbar/new_order_gray.png",
|
|
||||||
"text": "订单",
|
|
||||||
"selectedIconPath": "/static/images/tabbar/new_order.png",
|
|
||||||
"pagePath": "/pages/order/all-orders"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"iconPath": "/static/images/tabbar/new_message_gray.png",
|
|
||||||
"text": "消息",
|
|
||||||
"selectedIconPath": "/static/images/tabbar/new_message.png",
|
|
||||||
"pagePath": "/pages/message/message"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"iconPath": "/static/images/tabbar/new_my_gray.png",
|
|
||||||
"text": "我的",
|
|
||||||
"selectedIconPath": "/static/images/tabbar/new_my.png",
|
|
||||||
"pagePath": "/pages/my/my"
|
|
||||||
}
|
|
||||||
]
|
|
||||||
};
|
|
||||||
},
|
|
||||||
computed: {
|
|
||||||
messageNum() {
|
|
||||||
return this.$store.state.messageNum || 0
|
|
||||||
}
|
|
||||||
},
|
|
||||||
async created() {
|
|
||||||
// if (!this.$store.state.tabbarList.length) {
|
|
||||||
// let isnNetwork = uni.getStorageSync("isnNetwork");
|
|
||||||
// if (isnNetwork) {
|
|
||||||
// await this.getButtonImg()
|
|
||||||
// } else {
|
|
||||||
// uni.getNetworkType({
|
|
||||||
// success: (res) => {
|
|
||||||
// console.log(res.networkType);
|
|
||||||
// if (res.networkType == "none") {
|
|
||||||
|
|
||||||
// this.$store.commit("setTabbarList", this.tabbarList)
|
export default {
|
||||||
// } else {
|
name: "tab-bar",
|
||||||
// // 页面加载逻辑
|
// 不再需要 props.selected，完全由 Vuex 控制高亮
|
||||||
// uni.setStorageSync("isnNetwork", 1);
|
data() {
|
||||||
// this.getButtonImg()
|
return {
|
||||||
// }
|
refreshKey: 0, // 强制重建标识
|
||||||
// },
|
tabbarReady: false, // 组件就绪标识
|
||||||
// });
|
tabbarList: [ // tab 配置
|
||||||
// }
|
{
|
||||||
|
iconPath: "/static/images/tabbar/new_home_gray.png",
|
||||||
|
text: "首页",
|
||||||
|
selectedIconPath: "/static/images/tabbar/new_home.png",
|
||||||
|
pagePath: "/pages/home/home"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
iconPath: "/static/images/tabbar/new_order_gray.png",
|
||||||
|
text: "订单",
|
||||||
|
selectedIconPath: "/static/images/tabbar/new_order.png",
|
||||||
|
pagePath: "/pages/order/all-orders"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
iconPath: "/static/images/tabbar/new_message_gray.png",
|
||||||
|
text: "消息",
|
||||||
|
selectedIconPath: "/static/images/tabbar/new_message.png",
|
||||||
|
pagePath: "/pages/message/message"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
iconPath: "/static/images/tabbar/new_my_gray.png",
|
||||||
|
text: "我的",
|
||||||
|
selectedIconPath: "/static/images/tabbar/new_my.png",
|
||||||
|
pagePath: "/pages/my/my"
|
||||||
|
}
|
||||||
|
]
|
||||||
|
};
|
||||||
|
},
|
||||||
|
computed: {
|
||||||
|
// 从 Vuex 获取全局高亮索引
|
||||||
|
...mapState(['currentTabIndex', 'messageNum'])
|
||||||
|
},
|
||||||
|
watch: {
|
||||||
|
// 当 tabbarList 内容变化（如异步更新图标）时，强制重建组件
|
||||||
|
tabbarList: {
|
||||||
|
deep: true,
|
||||||
|
handler() {
|
||||||
|
this.rebuildTabbar();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
created() {
|
||||||
|
// 初始化时延迟显示，避免闪烁
|
||||||
|
this.tabbarReady = false;
|
||||||
|
this.$nextTick(() => {
|
||||||
|
this.tabbarReady = true;
|
||||||
|
// 如果需要异步加载图标，取消下面注释
|
||||||
|
// this.getButtonImg();
|
||||||
|
});
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
...mapMutations(['SET_CURRENT_TAB_INDEX']),
|
||||||
|
|
||||||
// }
|
// 设置全局选中索引（简化调用）
|
||||||
|
setCurrentTabIndex(index) {
|
||||||
|
this.SET_CURRENT_TAB_INDEX(index);
|
||||||
|
},
|
||||||
|
|
||||||
},
|
// 强制重建 uv-tabbar（用于异步更新图标后）
|
||||||
methods: {
|
rebuildTabbar() {
|
||||||
getNum(index) {
|
this.tabbarReady = false;
|
||||||
if (index == 2) {
|
this.$nextTick(() => {
|
||||||
return this.messageNum
|
this.refreshKey++;
|
||||||
} else {
|
this.tabbarReady = true;
|
||||||
return 0
|
});
|
||||||
}
|
},
|
||||||
},
|
|
||||||
//获取头部背景图片
|
// 获取角标数字（只有消息 tab 且数量 > 0 才显示）
|
||||||
async getButtonImg() {
|
getNum(index) {
|
||||||
let res = await request.post("/sj/poster/getButtonImg", {});
|
if (index === 2 && this.messageNum > 0) {
|
||||||
if (res.code == 200) {
|
return this.messageNum;
|
||||||
// if (res.data?.photo) {
|
}
|
||||||
// this.topBgImage = res.data?.photo + '?time=666'
|
return null;
|
||||||
// }
|
},
|
||||||
this.tabbarList.forEach((item, index) => {
|
|
||||||
if (res.data[index].iconPath) {
|
// 异步更新图标（保留你的业务逻辑）
|
||||||
item.iconPath = res.data[index].iconPath
|
async getButtonImg() {
|
||||||
}
|
try {
|
||||||
if (res.data[index].selectedIconPath) {
|
let res = await request.post("/sj/poster/getButtonImg", {});
|
||||||
item.selectedIconPath = res.data[index].selectedIconPath
|
if (res.code === 200) {
|
||||||
}
|
this.tabbarList.forEach((item, index) => {
|
||||||
})
|
if (res.data[index]?.iconPath) {
|
||||||
}
|
item.iconPath = res.data[index].iconPath;
|
||||||
this.$store.commit("setTabbarList", this.tabbarList)
|
}
|
||||||
},
|
if (res.data[index]?.selectedIconPath) {
|
||||||
change1(val) {
|
item.selectedIconPath = res.data[index].selectedIconPath;
|
||||||
// 因为在pages中配置了需要跳转的页面为 tabbar页面
|
}
|
||||||
// 所以不能使用navigateTo 只能使用下面这个方法跳转。
|
});
|
||||||
uni.switchTab({
|
this.$store.commit("setTabbarList", this.tabbarList);
|
||||||
url: this.tabbarList[val].pagePath
|
// 图标更新后，强制重建组件
|
||||||
})
|
this.rebuildTabbar();
|
||||||
this.messageUpudateNum()
|
}
|
||||||
}
|
} catch (err) {
|
||||||
}
|
console.error('getButtonImg 请求失败', err);
|
||||||
}
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
// uv-tabbar 的 change 事件（组件内部触发）
|
||||||
|
onTabChange(val) {
|
||||||
|
const idx = parseInt(val, 10);
|
||||||
|
this.doJump(idx);
|
||||||
|
},
|
||||||
|
|
||||||
|
// 手动点击 item 时触发
|
||||||
|
onItemClick(idx) {
|
||||||
|
this.doJump(idx);
|
||||||
|
},
|
||||||
|
|
||||||
|
// 实际跳转逻辑 + 更新全局高亮
|
||||||
|
doJump(index) {
|
||||||
|
const idx = parseInt(index, 10);
|
||||||
|
if (isNaN(idx) || !this.tabbarList[idx]) return;
|
||||||
|
|
||||||
|
// 先更新全局高亮（立即生效）
|
||||||
|
this.setCurrentTabIndex(idx);
|
||||||
|
|
||||||
|
// 跳转页面
|
||||||
|
const targetPage = this.tabbarList[idx].pagePath;
|
||||||
|
uni.switchTab({
|
||||||
|
url: targetPage,
|
||||||
|
fail: (err) => console.error('switchTab 失败', err)
|
||||||
|
});
|
||||||
|
|
||||||
|
// 保留你原有的消息更新方法
|
||||||
|
if (typeof this.messageUpudateNum === 'function') {
|
||||||
|
this.messageUpudateNum();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
};
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style lang="scss">
|
<style lang="scss">
|
||||||
.icon {
|
.icon {
|
||||||
height: 54rpx;
|
height: 54rpx;
|
||||||
width: 54rpx;
|
width: 54rpx;
|
||||||
}
|
}
|
||||||
::v-deep .uv-tabbar__content{
|
::v-deep .uv-tabbar__content {
|
||||||
z-index: 999!important;
|
z-index: 999 !important;
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
@ -6,40 +6,43 @@ Vue.use(Vuex);
|
||||||
|
|
||||||
const store = new Vuex.Store({
|
const store = new Vuex.Store({
|
||||||
state: {
|
state: {
|
||||||
messageNum: 0,//底部消息数量
|
messageNum: 0, // 底部消息数量
|
||||||
sjServiceList:{},//商家分配手艺人时服务数据shop/staff
|
// ========== 新增：全局当前选中的 tab 索引 ==========
|
||||||
tabbarList: [], //底部设置
|
currentTabIndex: 0, // 用于自定义 tabbar 高亮
|
||||||
reservationTime: {}, // 预约时刻信息
|
// ============================================
|
||||||
reservationSyr: {}, // 预约手艺人人信息
|
sjServiceList: {}, // 商家分配手艺人时服务数据shop/staff
|
||||||
reservationAddress: {}, // 预约地址信息
|
tabbarList: [], // 底部设置
|
||||||
selectStore: {}, //选择的门店信息
|
reservationTime: {}, // 预约时刻信息
|
||||||
wxShareType: 0, // 正式版:0，测试版:1，体验版:2
|
reservationSyr: {}, // 预约手艺人人信息
|
||||||
//公共的变量，这里的变量不能随便修改，只能通过触发mutations的方法才能改变
|
reservationAddress: {}, // 预约地址信息
|
||||||
|
selectStore: {}, // 选择的门店信息
|
||||||
|
wxShareType: 0, // 正式版:0，测试版:1，体验版:2
|
||||||
searchCity: {
|
searchCity: {
|
||||||
center: "117.330043,38.372266",
|
center: "117.330043,38.372266",
|
||||||
name: "黄骅",
|
name: "黄骅",
|
||||||
},
|
},
|
||||||
systemInfo: uni.getSystemInfoSync(), //设备信息
|
systemInfo: uni.getSystemInfoSync(),
|
||||||
//是否有定位权限
|
|
||||||
isLocation: false,
|
isLocation: false,
|
||||||
//路由
|
|
||||||
baseUrl: "",
|
baseUrl: "",
|
||||||
//手机和app信息
|
|
||||||
version: {
|
version: {
|
||||||
VersionCode: "",
|
VersionCode: "",
|
||||||
DeviceBrand: "",
|
DeviceBrand: "",
|
||||||
DeviceType: "",
|
DeviceType: "",
|
||||||
},
|
},
|
||||||
//商家信息
|
|
||||||
sjInfo: {},
|
sjInfo: {},
|
||||||
workSpaceSJClassList: [], //商家工位分类列表
|
workSpaceSJClassList: [],
|
||||||
workHourSJClassList: [], //商家工时分类列表
|
workHourSJClassList: [],
|
||||||
},
|
},
|
||||||
mutations: {
|
mutations: {
|
||||||
//写入底部消息数量
|
// 写入底部消息数量
|
||||||
setMessageNum(state, newval) {
|
setMessageNum(state, newval) {
|
||||||
state.messageNum = newval;
|
state.messageNum = newval;
|
||||||
},
|
},
|
||||||
|
// ========== 新增：设置全局当前选中 tab 索引 ==========
|
||||||
|
SET_CURRENT_TAB_INDEX(state, index) {
|
||||||
|
state.currentTabIndex = index;
|
||||||
|
},
|
||||||
|
// ==============================================
|
||||||
clearServiceState(state) {
|
clearServiceState(state) {
|
||||||
state.reservationTime = {};
|
state.reservationTime = {};
|
||||||
state.reservationSyr = {};
|
state.reservationSyr = {};
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue