174 lines
3.9 KiB
Plaintext
174 lines
3.9 KiB
Plaintext
<!--
|
|
商家端自定义 TabBar 组件
|
|
- 仅在 merchant Tab 页中使用
|
|
- 支持微信小程序 custom tabBar 模式
|
|
- 底部安全区自动适配
|
|
-->
|
|
<template>
|
|
<view class="merchant-tabbar" :style="{ paddingBottom: safeBottom }">
|
|
<view
|
|
v-for="(item, index) in tabs"
|
|
:key="index"
|
|
class="tab-item"
|
|
:class="{ active: currentIndex === index }"
|
|
@click="switchTab(index)"
|
|
>
|
|
<view class="tab-icon-wrap">
|
|
<text class="tab-icon">{{ item.icon }}</text>
|
|
<view v-if="item.badge > 0" class="tab-badge">
|
|
<text class="badge-text">{{ item.badge > 99 ? '99+' : item.badge }}</text>
|
|
</view>
|
|
</view>
|
|
<text class="tab-text">{{ item.text }}</text>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script lang="uts">
|
|
export default {
|
|
props: {
|
|
current: {
|
|
type: Number,
|
|
default: 0
|
|
},
|
|
badges: {
|
|
type: Object,
|
|
default: () => ({})
|
|
}
|
|
},
|
|
|
|
data() {
|
|
return {
|
|
currentIndex: this.current as number,
|
|
safeBottom: '0px',
|
|
tabs: [
|
|
{ text: '首页', icon: '🏠', path: '/pages/mall/merchant/index', badge: 0 },
|
|
{ text: '消息', icon: '💬', path: '/pages/mall/merchant/messages', badge: 0 },
|
|
{ text: '订单', icon: '📋', path: '/pages/mall/merchant/orders', badge: 0 },
|
|
{ text: '成长', icon: '🚀', path: '/pages/mall/merchant/growth', badge: 0 },
|
|
{ text: '我的', icon: '👤', path: '/pages/mall/merchant/profile', badge: 0 }
|
|
]
|
|
}
|
|
},
|
|
|
|
watch: {
|
|
current(val: number) {
|
|
this.currentIndex = val
|
|
},
|
|
badges(val: Record<string, number>) {
|
|
this.updateBadges(val)
|
|
}
|
|
},
|
|
|
|
mounted() {
|
|
this.initSafeArea()
|
|
this.currentIndex = this.current
|
|
},
|
|
|
|
methods: {
|
|
initSafeArea() {
|
|
// #ifdef MP-WEIXIN
|
|
try {
|
|
const info = wx.getWindowInfo()
|
|
const safeAreaBottom = info.screenHeight - info.safeArea.bottom
|
|
if (safeAreaBottom > 0) {
|
|
this.safeBottom = safeAreaBottom + 'px'
|
|
}
|
|
} catch (e) {}
|
|
// #endif
|
|
},
|
|
|
|
updateBadges(badgeMap: Record<string, number>) {
|
|
const keys = ['index', 'messages', 'orders', 'growth', 'profile']
|
|
for (let i = 0; i < keys.length; i++) {
|
|
if (badgeMap[keys[i]] != null) {
|
|
this.tabs[i].badge = badgeMap[keys[i]]
|
|
}
|
|
}
|
|
},
|
|
|
|
switchTab(index: number) {
|
|
if (this.currentIndex === index) return
|
|
this.currentIndex = index
|
|
uni.reLaunch({
|
|
url: this.tabs[index].path
|
|
})
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style>
|
|
.merchant-tabbar {
|
|
position: fixed;
|
|
bottom: 0;
|
|
left: 0;
|
|
right: 0;
|
|
display: flex;
|
|
flex-direction: row;
|
|
align-items: flex-start;
|
|
background-color: #ffffff;
|
|
border-top-width: 1rpx;
|
|
border-top-style: solid;
|
|
border-top-color: #eeeeee;
|
|
z-index: 999;
|
|
padding-top: 16rpx;
|
|
}
|
|
|
|
.tab-item {
|
|
flex: 1;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
padding-bottom: 12rpx;
|
|
position: relative;
|
|
}
|
|
|
|
.tab-icon-wrap {
|
|
position: relative;
|
|
margin-bottom: 8rpx;
|
|
}
|
|
|
|
.tab-icon {
|
|
font-size: 48rpx;
|
|
line-height: 1;
|
|
filter: grayscale(100%) opacity(0.45);
|
|
}
|
|
|
|
.tab-item.active .tab-icon {
|
|
filter: none;
|
|
}
|
|
|
|
.tab-text {
|
|
font-size: 22rpx;
|
|
color: #999999;
|
|
}
|
|
|
|
.tab-item.active .tab-text {
|
|
color: #ff5000;
|
|
font-weight: bold;
|
|
}
|
|
|
|
.tab-badge {
|
|
position: absolute;
|
|
top: -10rpx;
|
|
right: -20rpx;
|
|
min-width: 32rpx;
|
|
height: 32rpx;
|
|
background-color: #ff3b30;
|
|
border-radius: 16rpx;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
padding-left: 8rpx;
|
|
padding-right: 8rpx;
|
|
}
|
|
|
|
.badge-text {
|
|
font-size: 20rpx;
|
|
color: #ffffff;
|
|
font-weight: bold;
|
|
}
|
|
</style>
|