Add 添加动态配置功能

UI/VAP.APP/src/components/tab-bar/tab-bar.vue

@@ -0,0 +1,47 @@
+<script setup lang="ts">
+import config from "@/core/config"
+import type { TabBar } from "@/core/types"
+import appStore from "@/stores"
+
+const barList = computed(() => {
+  const list = appStore.tabBarStore.getList()
+  // console.log("LIST_BAR", list)
+  return list
+})
+function changeActive(item: any) {
+  appStore.tabBarStore.switchTab(item)
+}
+const currentTab = computed(() => {
+  const name = appStore.tabBarStore.getCurrent()
+  // console.log("NAME_BAR", name)
+  return name
+})
+const getIconClass = (item: TabBar) => {
+  let str = ""
+  str += currentTab.value == item.name ? item.selectedIcon : item.icon
+  return str
+}
+</script>
+<template>
+  <view
+    v-if="config.dyTabBar"
+    class="d-fcv w-100 bg-white border-top border-t-1 border-gray-4"
+    style="position: fixed; bottom: 0; left: 0; right: 0"
+  >
+    <view
+      class="d-fc flex-column w-100 pt-8 pb-10"
+      :class="{ 'border-left border-l-1 border-gray-4': index > 0, 'border-r-1': index > 0 }"
+      v-for="(item, index) in barList"
+      :key="index"
+      @click="changeActive(item)"
+    >
+      <i v-if="item.icon" class="fs-30" :class="getIconClass(item)"></i>
+      <image
+        v-else-if="item.iconPath"
+        class="w-30px h-30px"
+        :src="currentTab === item.name ? item.selectedIconPath : item.iconPath"
+      ></image>
+      <view class="fs-12 mt-2" :class="{ 'text-vb fs-13': currentTab === item.name }">{{ item.text }}</view>
+    </view>
+  </view>
+</template>

UI/VAP.APP/src/core/config/index.ts

@@ -3,6 +3,7 @@ export default {
   //baseUrl: "/api",
   //baseUrl: "http://localhost:6066",
   baseUrl: "http://te.yue.shvber.com:4031/prod-api",
+  dyTabBar: false, //是否动态tabBar 设为true 需要将page.json中tabBar.custom配置为true
   // 应用信息
   appInfo: {
     // 应用名称

UI/VAP.APP/src/core/tab-bar/_default.ts

@@ -0,0 +1,31 @@
+import type { TabBar } from "../types"
+
+export const defaultTabs: TabBar[] = [
+  {
+    name: "home",
+    pageName: "index",
+    icon: "iconfont icon-home", // 使用字体图标 不会出现tabbar闪烁问题
+    selectedIcon: "iconfont icon-home-s text-vb",
+    iconPath: "/static/images/tabbar/home.png",
+    selectedIconPath: "/static/images/tabbar/home2.png",
+    text: "首页",
+  },
+  {
+    name: "work",
+    pageName: "work",
+    icon: "iconfont icon-work",
+    selectedIcon: "iconfont icon-work-s text-vb",
+    iconPath: "/static/images/tabbar/work.png",
+    selectedIconPath: "/static/images/tabbar/work2.png",
+    text: "工作台",
+  },
+  {
+    name: "user",
+    pageName: "mine",
+    icon: "iconfont icon-user",
+    selectedIcon: "iconfont icon-user-s text-vb",
+    iconPath: "/static/images/tabbar/mine.png",
+    selectedIconPath: "/static/images/tabbar/mine2.png",
+    text: "个人中心",
+  },
+]

UI/VAP.APP/src/core/tab-bar/index.ts

@@ -0,0 +1 @@
+export * from "./_default"

UI/VAP.APP/src/core/types/_alumnus.ts

@@ -1,36 +0,0 @@
-export interface AlumnusProfile {
-  userId: number
-  amId: number
-  orgId: number
-  orgName: string
-  phonenumber: string
-  userType: string
-  name: string
-  avatar?: string
-  gender: string
-  birthday: string
-  type: string
-  enrolYear: string
-  graduateYear: string
-  amClass: string
-  education: string
-  province: string
-  city: string
-  district: string
-  nativePlace: string
-  amPublic: string
-  auditStatus: number
-  email: string
-  qq: string
-  wechat: string
-  industry: string
-  industryArea: string
-  workUnit: string
-  position: string
-  address: string
-  workUnitMore: string
-  industryMore: string
-  selfIntroduction: string
-  resources: string
-  remark: string
-}

UI/VAP.APP/src/route/_types.ts → UI/VAP.APP/src/core/types/_page.ts

@@ -1,3 +1,5 @@
+import type pages from "@/route/_pages"
+
 export interface Params {
   id?: number | string
 }
@@ -8,3 +10,5 @@ export interface BackParams {
   /** 返回携带的数据 */
   data?: any
 }
+
+export type PageNames = keyof typeof pages

UI/VAP.APP/src/core/types/_tab-bar.ts

@@ -0,0 +1,12 @@
+import type { PageNames } from "./_page"
+
+export interface TabBar {
+  name: string
+  pageName: PageNames
+  pagePath?: string
+  icon?: string
+  selectedIcon?: string
+  iconPath?: string
+  selectedIconPath?: string
+  text: string
+}

UI/VAP.APP/src/core/types/index.ts

@@ -1,3 +1,4 @@
-export * from "./_alumnus"
+export * from "./_page"
+export * from "./_tab-bar"
 export * from "./_user"
 export * from "./_cascader"

UI/VAP.APP/src/pages.json

@@ -126,6 +126,7 @@
     }
   ],
   "tabBar": {
+    "custom": false,
     "color": "#8a8a8a",
     "selectedColor": "#1989fa",
     "borderStyle": "white",

UI/VAP.APP/src/pages/index/index.vue

@@ -1,16 +1,17 @@
 <template>
-  <view ref="" class="content">
+  <view ref="" class="d-fc flex-column">
     <image class="logo" src="/static/logos/logo.png" />
     <view class="text-area">
       <text class="title text-vb fw">{{ title }}欢迎您</text>
     </view>
+    <TabBar></TabBar>
   </view>
 </template>
 
 <script setup lang="ts">
 import route from "@/route"
 import appStore from "@/stores"
-import apis from "@/api"
+import TabBar from "@/components/tab-bar/tab-bar.vue"
 
 const title = ref(appStore.authStore.getUser()?.orgName ? appStore.authStore.getUser()?.orgName : "Vber移动端")
 onLoad(() => {
@@ -20,13 +21,6 @@ onLoad(() => {
 </script>
 
 <style>
-.content {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-}
-
 .logo {
   height: 200rpx;
   width: 200rpx;

UI/VAP.APP/src/pages/mine/index.vue

@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import appStore from "@/stores"
 import route from "@/route"
+import TabBar from "@/components/tab-bar/tab-bar.vue"
 
 const ready = ref(false)
 
@@ -91,5 +92,6 @@ onMounted(init)
     <view v-else class="d-fc h-200px bg-tran">
       <vb-loading color="var(--vb-color)" :show-text="true"></vb-loading>
     </view>
+    <TabBar></TabBar>
   </view>
 </template>

UI/VAP.APP/src/pages/work/index.vue

@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import TabBar from "@/components/tab-bar/tab-bar.vue"
 const swiperOpts = reactive({
   current: 0,
   swiperDotIndex: 0,
@@ -95,5 +96,6 @@ function changeGrid() {
         </uni-grid-item>
       </uni-grid>
     </view>
+    <TabBar></TabBar>
   </view>
 </template>

UI/VAP.APP/src/route/index.ts

@@ -1,10 +1,8 @@
 import type { DeepReadonly } from "vue"
-import type { BackParams, Params } from "./_types"
+import type { BackParams, Params, PageNames } from "@/core/types"
 import pages from "./_pages"
 import appStore from "@/stores"
 
-type PageNames = keyof typeof pages
-
 type ObjectType<T> = T extends "Params" ? Params : any
 
 const routeStore = {} as Record<PageNames, unknown>

UI/VAP.APP/src/static/font/iconfont.css

@@ -1,6 +1,6 @@
 @font-face {
   font-family: "iconfont"; /* Project id 4173588 */
-  src: url("iconfont.ttf?t=1706713072162") format("truetype");
+  src: url("iconfont.ttf?t=1709624013443") format("truetype");
 }
 
 .iconfont {
@@ -11,6 +11,14 @@
   -moz-osx-font-smoothing: grayscale;
 }
 
+.icon-work-s:before {
+  content: "\eb53";
+}
+
+.icon-work:before {
+  content: "\eba6";
+}
+
 .icon-scan:before {
   content: "\e76f";
 }

UI/VAP.APP/src/stores/_tab-bar.ts

@@ -0,0 +1,39 @@
+import type { TabBar } from "@/core/types"
+import route from "@/route"
+import { defaultTabs } from "@/core/tab-bar"
+
+export const useTabBarStore = defineStore("tabBar", () => {
+  const list = ref<TabBar[]>(defaultTabs)
+  const currentPageName = ref("home")
+  function getIndex(name: string) {
+    return list.value.findIndex((v) => v.name === "name") || 0
+  }
+
+  function switchTab(item: TabBar) {
+    const _item = list.value.find((v) => v.name === item.name)
+    if (_item) {
+      currentPageName.value = _item.name
+      route.switchTab(item.pageName)
+    }
+  }
+  function getCurrent() {
+    return currentPageName.value
+  }
+  function getCurrentIndex() {
+    return getIndex(currentPageName.value)
+  }
+
+  function getList() {
+    if (list.value.length > 5) {
+      throw Error("tabBar 的长度不能大于5")
+    }
+    return list.value
+  }
+
+  return {
+    getList,
+    getCurrent,
+    getCurrentIndex,
+    switchTab,
+  }
+})

UI/VAP.APP/src/stores/index.ts

@@ -2,11 +2,13 @@ import type { App } from "vue"
 import { createPinia } from "pinia"
 
 import { useAuthStore } from "./_auth"
+import { useTabBarStore } from "./_tab-bar"
 
 const store = createPinia()
 
 export interface IAppStore {
   authStore: ReturnType<typeof useAuthStore>
+  tabBarStore: ReturnType<typeof useTabBarStore>
 }
 export const appStore: IAppStore = {} as IAppStore
 
@@ -15,6 +17,7 @@ export const appStore: IAppStore = {} as IAppStore
  */
 export const registerStore = () => {
   appStore.authStore = useAuthStore()
+  appStore.tabBarStore = useTabBarStore()
 }
 export function setupStore(app: App<Element>) {
   app.use(store)