mechanicStore-app/pages/index/merchant.uvue

<template>
  <view class="page">
    <view class="content">当前页面：{{ currentTabName }}</view>

    <!-- 自定义底部导航 -->
    <CustomBottomNav 
      :current-index="currentTab" 
      @change="onTabChange" 
    />
  </view>
</template>

<script setup lang="ts">
import { ref, computed } from 'vue';
import CustomBottomNav from '@/components/CustomBottomNav.uvue';

// 当前选中索引
const currentTab = ref(3);

// 根据索引获取名称（用于演示）
const tabNames = ['小丁', '理疗', '预约', '商户', '我的'];
const currentTabName = computed(() => tabNames[currentTab.value]);

// 切换 Tab
const onTabChange = (index: number) => {
  currentTab.value = index;

  // 可选：跳转到对应 tabBar 页面
  const pages = [
    '/pages/index/index',
    '/pages/index/therapy',
    '/pages/index/order',
    '/pages/index/merchant',
    '/pages/index/my'
  ];
  uni.switchTab({ url: pages[index] });
};
</script>

<style scoped>
.page {
  min-height: 100vh;
  padding-bottom: 100rpx; /* 防止内容被遮挡 */
  background-color: #f8f8f8;
  padding: 20rpx;
}

.content {
  font-size: 32rpx;
  color: #333;
}
</style>