haha/haha-admin-mp/src/components/CustomTabBar.vue

<template>
  <view class="custom-tabbar">
    <view class="tab-item" :class="{ active: currentIndex === 0 }" @click="switchTab(0)">
      <view class="tab-icon">
        <view class="icon-work"></view>
      </view>
      <text class="tab-text">工作台</text>
    </view>

    <view class="tab-item" :class="{ active: currentIndex === 1 }" @click="switchTab(1)">
      <view class="tab-icon">
        <view class="icon-order"></view>
      </view>
      <text class="tab-text">订单</text>
    </view>

    <view class="scan-zone">
      <view class="scan-btn" @click="handleScan">
        <view class="scan-icon"></view>
      </view>
      <text class="scan-label">扫码</text>
    </view>

    <view class="tab-item" :class="{ active: currentIndex === 2 }" @click="switchTab(2)">
      <view class="tab-icon">
        <view class="icon-device"></view>
      </view>
      <text class="tab-text">设备</text>
    </view>

    <view class="tab-item" :class="{ active: currentIndex === 3 }" @click="switchTab(3)">
      <view class="tab-icon">
        <view class="icon-my"></view>
      </view>
      <text class="tab-text">我的</text>
    </view>
  </view>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue';
import { logger } from '@/utils/logger';

const tabPages = [
  '/pages/index/index',
  '/pages/orders/list',
  '/pages/device/list',
  '/pages/my/my'
];

const currentIndex = ref(0);

onMounted(() => {
  const pages = getCurrentPages();
  const currentPage = pages[pages.length - 1];
  const currentPath = '/' + currentPage.route;

  const index = tabPages.indexOf(currentPath);
  if (index !== -1) {
    currentIndex.value = index;
  }
});

const switchTab = (index: number) => {
  if (currentIndex.value === index) return;

  currentIndex.value = index;
  uni.switchTab({
    url: tabPages[index]
  });
};

const handleScan = () => {
  uni.scanCode({
    scanType: ['qrCode', 'barCode'],
    success: (res) => {
      logger.log('扫码结果:', res.result);
      let deviceId = '';

      const urlPattern = /\/([A-Z0-9]+)(\?|$)/;
      const match = res.result.match(urlPattern);
      if (match && match[1]) {
        deviceId = match[1];
      } else {
        try {
          const qrData = JSON.parse(res.result);
          deviceId = qrData.deviceId || res.result;
        } catch {
          deviceId = res.result;
        }
      }

      if (deviceId) {
        uni.navigateTo({
          url: `/pages/device/detail?id=${deviceId}&mode=stock`
        });
      } else {
        uni.showToast({
          title: '无法识别设备',
          icon: 'none'
        });
      }
    },
    fail: () => {
      uni.showToast({
        title: '扫码取消',
        icon: 'none'
      });
    }
  });
};
</script>

<style lang="scss" scoped>
.custom-tabbar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: 100rpx;
  background: $bg-color-card;
  border-top: 1rpx solid rgba(0, 0, 0, 0.06);
  display: flex;
  align-items: flex-end;
  justify-content: space-around;
  padding-bottom: constant(safe-area-inset-bottom);
  padding-bottom: env(safe-area-inset-bottom);
  z-index: 999;
}

/* ======== Tab 项 ======== */
.tab-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  flex: 1;
  height: 100%;
  color: $text-color-muted;
  transition: color 0.2s ease;
}

.tab-icon {
  width: 44rpx;
  height: 44rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  margin-bottom: 2rpx;
}

.tab-item.active {
  color: $primary-color;
}

.tab-text {
  font-size: 20rpx;
  font-weight: 400;
  line-height: 1.3;
}

.tab-item.active .tab-text {
  font-weight: 500;
}

/* ======== 图标：工作台（简约房子） ======== */
.icon-work {
  width: 32rpx;
  height: 28rpx;
  position: relative;

  /* 房屋主体 */
  &::before {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 24rpx;
    height: 15rpx;
    border: 2rpx solid currentColor;
    border-radius: 2rpx 2rpx 3rpx 3rpx;
  }

  /* 屋顶 — 旋转正方形取上半部 */
  &::after {
    content: '';
    position: absolute;
    top: 1rpx;
    left: 50%;
    transform: translateX(-50%) rotate(45deg);
    width: 18rpx;
    height: 18rpx;
    border-top: 2rpx solid currentColor;
    border-left: 2rpx solid currentColor;
    border-radius: 2rpx 0 0 0;
  }
}

/* ======== 图标：订单（简约票据） ======== */
.icon-order {
  width: 26rpx;
  height: 30rpx;
  border: 2rpx solid currentColor;
  border-radius: 4rpx;
  position: relative;

  /* 折角 */
  &::before {
    content: '';
    position: absolute;
    top: -2rpx;
    right: -2rpx;
    width: 0;
    height: 0;
    border-left: 7rpx solid transparent;
    border-bottom: 7rpx solid currentColor;
    border-radius: 0 0 0 2rpx;
  }

  /* 文字横线 */
  &::after {
    content: '';
    position: absolute;
    top: 9rpx;
    left: 5rpx;
    right: 9rpx;
    height: 2rpx;
    background: currentColor;
    border-radius: 1rpx;
    box-shadow: 0 5rpx 0 currentColor, 0 10rpx 0 currentColor;
  }
}

/* ======== 图标：设备（简约显示器） ======== */
.icon-device {
  width: 32rpx;
  height: 28rpx;
  position: relative;

  /* 屏幕 */
  &::before {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 28rpx;
    height: 18rpx;
    border: 2rpx solid currentColor;
    border-radius: 4rpx;
  }

  /* 底座 */
  &::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 18rpx;
    height: 4rpx;
    background: currentColor;
    border-radius: 0 0 2rpx 2rpx;
  }
}

/* ======== 图标：我的（简约人物） ======== */
.icon-my {
  width: 28rpx;
  height: 32rpx;
  position: relative;

  /* 头部 */
  &::before {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 13rpx;
    height: 13rpx;
    border: 2rpx solid currentColor;
    border-radius: 50%;
  }

  /* 身体 — 更大的弧线 */
  &::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 26rpx;
    height: 12rpx;
    border: 2rpx solid currentColor;
    border-radius: 14rpx 14rpx 0 0;
    border-bottom: none;
  }
}

/* ======== 扫码按钮（绝对定位突出） ======== */
.scan-zone {
  flex: 1;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  height: 100rpx;
}

.scan-btn {
  position: absolute;
  bottom: 64rpx;
  left: 50%;
  transform: translateX(-50%);
  width: 96rpx;
  height: 96rpx;
  border-radius: 50%;
  background: $primary-color;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 6rpx 24rpx rgba(255, 193, 7, 0.45);
  transition: transform 0.15s ease, box-shadow 0.15s ease;

  &:active {
    transform: translateX(-50%) scale(0.93);
    box-shadow: 0 3rpx 12rpx rgba(255, 193, 7, 0.35);
  }
}

.scan-icon {
  width: 40rpx;
  height: 40rpx;
  position: relative;

  /* 四角 L 形：左上 + 右下 */
  &::before, &::after {
    content: '';
    position: absolute;
    width: 16rpx;
    height: 16rpx;
  }

  &::before {
    top: 0;
    left: 0;
    border-top: 5rpx solid #ffffff;
    border-left: 5rpx solid #ffffff;
    border-radius: 4rpx 0 0 0;
  }

  &::after {
    bottom: 0;
    right: 0;
    border-bottom: 5rpx solid #ffffff;
    border-right: 5rpx solid #ffffff;
    border-radius: 0 0 4rpx 0;
  }
}

.scan-label {
  font-size: 20rpx;
  color: $text-color-primary;
  font-weight: 400;
  padding-bottom: 8rpx;
  margin-top: 12rpx;
}
</style>