初始版本

staff_uniapp/src/components/tabbar/tabbar.vue

@@ -0,0 +1,59 @@
+<template>
+    <u-tabbar
+        v-model="current"
+        v-bind="tabbarStyle"
+        :list="tabbarList"
+        :hide-tab-bar="true"
+        @change="handleChange"
+    ></u-tabbar>
+</template>
+
+<script lang="ts" setup>
+import {useAppStore} from '@/stores/app'
+import {navigateTo} from '@/utils/util'
+import {computed, ref, onMounted} from 'vue'
+import {getDecorateTabbar} from "@/api/shop";
+
+const current = ref()
+const appStore = useAppStore()
+
+const tabbarStyle = ref({
+    activeColor: '#007AFF',
+    inactiveColor: '#999999'
+})
+const tabbarList = ref<any>([])
+
+const getTabbarList = async () => {
+    const res = await getDecorateTabbar()
+    const data = JSON.parse(res.data)
+    tabbarStyle.value = {
+        activeColor: data.style.selected_color,
+        inactiveColor: data.style.default_color
+    }
+    tabbarList.value = data.list?.filter((item: any) => item.is_show == 1)
+        .map((item: any) => {
+            return {
+                iconPath: item.unselected,
+                selectedIconPath: item.selected,
+                text: item.name,
+                link: item.link,
+                pagePath: item.link.path
+            }
+        })
+}
+
+const nativeTabbar = [
+    '/pages/index/index',
+    '/pages/order/order',
+    '/pages/user/user'
+]
+const handleChange = (index: number) => {
+    const selectTab = tabbarList.value[index]
+    const navigateType = nativeTabbar.includes(selectTab.link.path) ? 'switchTab' : 'reLaunch'
+    navigateTo(selectTab.link, navigateType)
+}
+
+onMounted(() => {
+    getTabbarList()
+})
+</script>