初始化移动端提交

2025-09-30 00:08:23 +08:00
parent 08784ca8f3
commit f2ffc65094
406 changed files with 55626 additions and 93 deletions
--- a/sheep/components/s-tabbar-uview/s-tabbar-uview.vue
+++ b/sheep/components/s-tabbar-uview/s-tabbar-uview.vue
@@ -0,0 +1,167 @@
+<template>
+  <view class="tabbar-container" v-if="showTabbar">
+    <u-tabbar
+      :value="currentPath"
+      :fixed="true"
+      :placeholder="true"
+      :safeAreaInsetBottom="true"
+      :border="true"
+      :activeColor="activeColor"
+      :inactiveColor="inactiveColor"
+      :bgColor="bgColor"
+      @change="handleTabbarChange"
+    >
+      <u-tabbar-item
+        v-for="(item, index) in tabbarList"
+        :key="index"
+        :name="item.pagePath"
+        :text="item.text"
+      >
+        <template #active-icon>
+          <view class="custom-icon active">
+            <u-icon 
+              :name="item.activeIcon || item.icon" 
+              size="24"
+              :color="activeColor"
+            />
+          </view>
+        </template>
+        <template #inactive-icon>
+          <view class="custom-icon">
+            <u-icon 
+              :name="item.icon" 
+              size="24"
+              :color="inactiveColor"
+            />
+          </view>
+        </template>
+      </u-tabbar-item>
+    </u-tabbar>
+  </view>
+</template>
+
+<script setup>
+import { ref, computed, onMounted } from 'vue'
+
+const props = defineProps({
+  path: {
+    type: String,
+    default: ''
+  }
+})
+
+// 底部导航配置
+const tabbarList = ref([
+  {
+    pagePath: '/pages/index/menu',
+    text: '菜单',
+    icon: 'home',
+    activeIcon: 'home-fill'
+  },
+  {
+    pagePath: '/pages/index/user',
+    text: '我的',
+    icon: 'account',
+    activeIcon: 'account-fill'
+  }
+])
+
+// 颜色配置
+const activeColor = '#0055A2'
+const inactiveColor = '#999999'
+const bgColor = '#ffffff'
+
+// 当前路径
+const currentPath = computed(() => {
+  return props.path || getCurrentPath()
+})
+
+// 是否显示tabbar
+const showTabbar = computed(() => {
+  const currentRoute = getCurrentPath()
+  return tabbarList.value.some(item => item.pagePath === currentRoute)
+})
+
+// 获取当前页面路径
+const getCurrentPath = () => {
+  const pages = getCurrentPages()
+  if (pages.length > 0) {
+    const currentPage = pages[pages.length - 1]
+    return '/' + currentPage.route
+  }
+  return ''
+}
+
+// 处理tabbar切换
+const handleTabbarChange = (name) => {
+  if (name !== currentPath.value) {
+    uni.switchTab({
+      url: name,
+      fail: (error) => {
+        console.error('switchTab failed:', error)
+        // 如果switchTab失败，使用普通跳转
+        uni.navigateTo({
+          url: name,
+          fail: (navError) => {
+            console.error('navigateTo failed:', navError)
+          }
+        })
+      }
+    })
+  }
+}
+
+onMounted(() => {
+  // 隐藏原生tabBar
+  uni.hideTabBar({
+    animation: false
+  })
+})
+</script>
+
+<style lang="scss" scoped>
+.tabbar-container {
+  position: relative;
+  z-index: 999;
+}
+
+.custom-icon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 28px;
+  height: 28px;
+  transition: transform 0.2s ease;
+  
+  &.active {
+    transform: scale(1.1);
+  }
+}
+
+:deep(.u-tabbar) {
+  background-color: #ffffff;
+  border-top: 1px solid #ebedf0;
+  box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.1);
+  
+  .u-tabbar-item {
+    padding: 4px 0 8px;
+    
+    &__text {
+      font-size: 10px;
+      margin-top: 4px;
+      font-weight: 500;
+      line-height: 1.2;
+    }
+    
+    &__icon {
+      margin-bottom: 0;
+    }
+  }
+}
+
+// 为不同主题色适配
+:deep(.u-tabbar .u-tabbar-item--active .u-tabbar-item__text) {
+  color: #0055A2;
+  font-weight: 600;
+}
+</style>