Files
xingque/_backup_pre_redesign/custom-tab-bar/index.wxml

42 lines
1.8 KiB
Plaintext

<view class="custom-tab-bar">
<view class="bar-row">
<!-- 左侧椭圆身份按钮 -->
<view class="role-switch-btn" catchtap="toggleRolePicker">
<image class="role-switch-icon" src="/images/role-switch.png" mode="aspectFit" />
<text class="role-switch-text">切换身份</text>
</view>
<!-- 右侧纯黑闪光胶囊 -->
<view class="tab-capsule">
<block wx:for="{{tabList}}" wx:key="index">
<view class="tab-item {{selectedIndex === index ? 'active' : ''}}"
data-path="{{item.pagePath}}"
data-index="{{index}}"
catchtap="switchTab">
<!-- 🔥 根据页面路径判断是否显示角标,不再写死 index -->
<view class="badge-container" wx:if="{{item.pagePath === 'pages/xiaoxi/xiaoxi' && badgeText}}">
<view class="tab-badge">{{badgeText}}</view>
</view>
<image class="tab-icon" src="{{selectedIndex === index ? item.selectedIconPath : item.iconPath}}" mode="aspectFit" />
<text class="tab-text">{{item.text}}</text>
</view>
</block>
</view>
</view>
<!-- 身份选择弹窗 -->
<view wx:if="{{showRolePicker}}" class="picker-mask" catchtap="toggleRolePicker"></view>
<view wx:if="{{showRolePicker}}" class="picker-panel">
<view class="picker-header">
<text class="picker-title">切换身份</text>
<text class="picker-close" catchtap="toggleRolePicker">✕</text>
</view>
<block wx:for="{{availableRoles}}" wx:key="key">
<view class="role-option {{currentRole === item.key ? 'active' : ''}}"
data-role="{{item.key}}" catchtap="selectRole">
<text>{{item.name}}</text>
<text wx:if="{{currentRole === item.key}}" class="check-mark">✓</text>
</view>
</block>
</view>
</view>