自定义tabbar

自定义tabbar

collect_information/src/app.config.ts

@@ -14,6 +14,7 @@ export default defineAppConfig({
     navigationBarTextStyle: 'black',
   },
   tabBar: {
+    custom: true,
     list: [
       {
         pagePath: 'pages/projectManager/index/index',

collect_information/src/custom-tab-bar/index.json.js

@@ -0,0 +1,3 @@
+export default {
+  "component": true
+}

collect_information/src/custom-tab-bar/index.vue

@@ -0,0 +1,91 @@
+<template>
+  <cover-view class="tab-bar">
+    <cover-view class="tab-bar-border"></cover-view>
+    <cover-view v-for="(item, index) in list" :key="index" class="tab-bar-item" @tap="switchTab(index, item.pagePath)">
+      <cover-image :src="selected === index ? item.selectedIconPath : item.iconPath"/>
+      <cover-view :style="{ color: selected === index ? selectedColor : color }">{{ item.text }}</cover-view>
+    </cover-view>
+  </cover-view>
+</template>
+
+<script setup>
+import Taro from '@tarojs/taro'
+import {computed} from 'vue'
+import {useCounterStore} from '@/store'
+
+const store = useCounterStore()
+const selected = computed(() => store.getSelected)
+
+const color = '#000000'
+const selectedColor = '#DC143C'
+const list = [
+  {
+    pagePath: '/pages/projectManager/index/index',
+    text: '首页',
+    iconPath: "../assets/mine/punch.png",
+    selectedIconPath: "../assets/mine/punch-active.png"
+  },
+  {
+    pagePath: '/pages/employeeInfo/employeeInfo',
+    text: '员工信息',
+    iconPath: "../assets/mine/punch.png",
+    selectedIconPath: "../assets/mine/punch-active.png"
+  },
+  {
+    pagePath: '/pages/mine/mine',
+    text: '我的',
+    iconPath: "../assets/mine/my.png",
+    selectedIconPath: "../assets/mine/my-active.png"
+  },
+]
+
+function switchTab(index, url) {
+  setSelected(index)
+  Taro.switchTab({url})
+}
+
+function setSelected(index) {
+  store.setSelected(index)  // 使用 Pinia 的 action
+}
+</script>
+
+<style lang="scss">
+.tab-bar {
+  position: fixed;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  height: 100px;
+  background: white;
+  display: flex;
+  padding-bottom: env(safe-area-inset-bottom);
+}
+
+.tab-bar-border {
+  background-color: rgba(0, 0, 0, 0.33);
+  position: absolute;
+  left: 0;
+  top: 0;
+  width: 100%;
+  height: 1px;
+  transform: scaleY(0.5);
+}
+
+.tab-bar-item {
+  flex: 1;
+  text-align: center;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  flex-direction: column;
+}
+
+.tab-bar-item cover-image {
+  width: 54px;
+  height: 54px;
+}
+
+.tab-bar-item cover-view {
+  font-size: 20px;
+}
+</style>

collect_information/src/store/index.ts

@@ -3,9 +3,17 @@ import {defineStore} from 'pinia'
 export const useCounterStore = defineStore('counter', {
   state: () => {
     return {
-       userInfo:{}
+      userInfo: {},
+      selected: 0
     }
   },
-  actions: {},
+  actions: {
+    setSelected(index: number) {
+      this.selected = index
+    }
+  },
+  getters: {
+    getSelected: (state) => state.selected
+  }
 })
 

policeManagement/src/config/index.ts

@@ -1,33 +1,33 @@
 export const CLIENT_TYPE = "MANAGEMENT_POLICE";  //登录平台类型
 export const ROUTER_WHITE_LIST: string[] = ['/login', '/test', '/register-index'];
 export const SYSTEM_MENUS: SystemMenu[] = [
-    {
+    // {
-        title: '首页',
+    //     title: '首页',
-        name: 'index',
+    //     name: 'index',
-        path: '/index',
+    //     path: '/index',
-        type: "menu",
+    //     type: "menu",
-        component: () => import('@/views/index.vue')
+    //     component: () => import('@/views/index.vue')
-    }, {
+    // }, {
-        title: '单位管理',
+    //     title: '单位管理',
-        name: 'unitManage',
+    //     name: 'unitManage',
-        path: '/unitManage',
+    //     path: '/unitManage',
-        type: 'dir',
+    //     type: 'dir',
-        children: [
+    //     children: [
-            {
+    //         {
-                title: '公安单位',
+    //             title: '公安单位',
-                name: 'policeUnit',
+    //             name: 'policeUnit',
-                path: '/policeUnit',
+    //             path: '/policeUnit',
-                type: 'menu',
+    //             type: 'menu',
-                // icon: 'icon-policeman-full',
+    //             // icon: 'icon-policeman-full',
-                // size: '16',
+    //             // size: '16',
-                component: () => import('@/views/unitManage/policeUnit/index.vue')
+    //             component: () => import('@/views/unitManage/policeUnit/index.vue')
-            }, {
+    //         }, {
-                title: '保安单位',
+    //             title: '保安单位',
-                name: 'securityUnit',
+    //             name: 'securityUnit',
-                path: '/securityUnit',
+    //             path: '/securityUnit',
-                type: 'menu',
+    //             type: 'menu',
-                component: () => import('@/views/unitManage/securityUnit/index.vue')
+    //             component: () => import('@/views/unitManage/securityUnit/index.vue')
-            }
+    //         }
-        ]
+    //     ]
-    }
+    // }
 ]

policeManagement/src/views/user/user-weapp.vue

@@ -60,6 +60,43 @@ const columns: TableProps['columns'] = [
     dataIndex: 'createTime',
     title: '创建时间',
   },
+  {
+    dataIndex: 'opt',
+    title: '操作',
+    customRender({record}) {
+      if (record.checkStatus.value === 1) {
+        return <a-space>
+          <a-popconfirm
+              title="确认审核通过嘛?"
+              onConfirm={async () => {
+                const resp = await api.post('/management/passMiniProgramUser', {
+                  dataId: record.snowFlakeId,
+                  unitOptType: 'POLICE_UNIT'
+                })
+                message.success(resp.message)
+                await tableRef.value?.requestGetTableData()
+              }}>
+            <a-button type="primary">审核通过
+            </a-button>
+          </a-popconfirm>
+        </a-space>
+      }
+      return <a-space>
+
+        <a-button
+            class={record.isEnable.value === 0 ? 'btn-danger' : 'btn-success'}
+            onClick={async () => {
+              const resp = await api.post('/management/disableOrEnable', {
+                dataId: record.snowFlakeId,
+                unitOptType: UNIT_TYPE.police
+              })
+              message.success(resp.message)
+              await tableRef.value?.requestGetTableData()
+            }}
+        >{record.isEnable.value === 0 ? '禁用' : '启用'}</a-button>
+      </a-space>
+    },
+  }
 
 ]
 const x: number = columns.reduce((a, b) => a + (b.width as number), 0)