web-base-h5/components/tabbar-test.vue

<template>
  <view class="test-page">
    <view class="test-content">
      <view class="test-title">TabBar图标测试</view>

      <!-- 显示当前状态 -->
      <view class="status-info">
        <text>当前选中: {{ currentTab }}</text>
        <text>主题皮肤: {{ systemSkin }}</text>
        <text>购物车数量: {{ shopCarLength || 0 }}</text>
      </view>

      <!-- 图标测试区域 -->
      <view class="icon-test">
        <view class="icon-section">
          <text class="section-title">首页图标测试</text>
          <view class="icon-row">
            <image src="@/static/images/one1.png" class="test-icon" />
            <image src="@/static/images/one2.png" class="test-icon" />
            <image src="@/static/images/one11.jpg" class="test-icon" />
          </view>
        </view>

        <view class="icon-section">
          <text class="section-title">会员专区图标测试</text>
          <view class="icon-row">
            <image src="@/static/images/special1.png" class="test-icon" />
            <image src="@/static/images/special2.png" class="test-icon" />
          </view>
        </view>

        <view class="icon-section">
          <text class="section-title">个人推广图标测试</text>
          <view class="icon-row">
            <image src="@/static/images/share-act.svg" class="test-icon" />
            <image src="@/static/images/share.svg" class="test-icon" />
          </view>
        </view>

        <view class="icon-section">
          <text class="section-title">购物车图标测试</text>
          <view class="icon-row">
            <image src="@/static/images/three1.png" class="test-icon" />
            <image src="@/static/images/three2.png" class="test-icon" />
            <image src="@/static/images/three11.jpg" class="test-icon" />
          </view>
        </view>

        <view class="icon-section">
          <text class="section-title">我的图标测试</text>
          <view class="icon-row">
            <image src="@/static/images/my_icon1.png" class="test-icon" />
            <image src="@/static/images/my_icon2.png" class="test-icon" />
          </view>
        </view>
      </view>

      <!-- 主题切换按钮 -->
      <view class="theme-switcher">
        <button @click="switchTheme" class="theme-btn">
          切换主题 (当前: {{ systemSkin === 2 ? '绿色' : '默认' }})
        </button>
      </view>
    </view>

    <!-- 使用修复后的TabBar -->
    <RaisedTabbar :current="currentTab" @change="handleTabChange" />
  </view>
</template>

<script>
import RaisedTabbar from './raised-tabbar.vue'
import { mapGetters } from 'vuex'

export default {
  name: 'TabbarTest',
  components: {
    RaisedTabbar,
  },
  data() {
    return {
      currentTab: 0,
    }
  },
  computed: {
    ...mapGetters(['shopCarLength', 'user']),
    systemSkin() {
      return this.user?.skin || 0
    },
  },
  methods: {
    handleTabChange(index) {
      this.currentTab = index
      console.log('Tab切换到:', index)
    },
    switchTheme() {
      // 这里只是演示，实际项目中应该通过Vuex更新
      if (this.user) {
        this.$store.commit('updateUserSkin', this.systemSkin === 2 ? 0 : 2)
      }
    },
  },
}
</script>

<style lang="scss" scoped>
.test-page {
  min-height: 100vh;
  background: #f8f9fa;
  padding-bottom: 100px;
}

.test-content {
  padding: 40rpx;
}

.test-title {
  font-size: 36rpx;
  font-weight: bold;
  text-align: center;
  color: #333;
  margin-bottom: 40rpx;
}

.status-info {
  background: white;
  border-radius: 16rpx;
  padding: 30rpx;
  margin-bottom: 40rpx;
  box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.08);

  text {
    display: block;
    font-size: 28rpx;
    color: #666;
    margin-bottom: 10rpx;

    &:last-child {
      margin-bottom: 0;
    }
  }
}

.icon-test {
  background: white;
  border-radius: 16rpx;
  padding: 30rpx;
  margin-bottom: 40rpx;
  box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.08);
}

.icon-section {
  margin-bottom: 40rpx;

  &:last-child {
    margin-bottom: 0;
  }
}

.section-title {
  font-size: 28rpx;
  font-weight: bold;
  color: #333;
  margin-bottom: 20rpx;
  display: block;
}

.icon-row {
  display: flex;
  align-items: center;
  gap: 20rpx;
}

.test-icon {
  width: 60rpx;
  height: 60rpx;
  border: 2rpx solid #eee;
  border-radius: 8rpx;
  background: #f9f9f9;
}

.theme-switcher {
  text-align: center;
}

.theme-btn {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  border: none;
  border-radius: 50rpx;
  padding: 20rpx 40rpx;
  font-size: 28rpx;
  font-weight: bold;
}
</style>