自定义tabbar

自定义tabbar
This commit is contained in:
TimSpan 2024-09-11 10:25:03 +08:00
parent 0301099879
commit 7f86ec40cc
8 changed files with 171 additions and 31 deletions

BIN
.DS_Store vendored

Binary file not shown.

View File

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

View File

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

View File

@ -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>

View File

@ -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
}
})

View File

@ -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: '首页',
name: 'index',
path: '/index',
type: "menu",
component: () => import('@/views/index.vue')
}, {
title: '单位管理',
name: 'unitManage',
path: '/unitManage',
type: 'dir',
children: [
{
title: '公安单位',
name: 'policeUnit',
path: '/policeUnit',
type: 'menu',
// icon: 'icon-policeman-full',
// size: '16',
component: () => import('@/views/unitManage/policeUnit/index.vue')
}, {
title: '保安单位',
name: 'securityUnit',
path: '/securityUnit',
type: 'menu',
component: () => import('@/views/unitManage/securityUnit/index.vue')
}
]
}
// {
// title: '首页',
// name: 'index',
// path: '/index',
// type: "menu",
// component: () => import('@/views/index.vue')
// }, {
// title: '单位管理',
// name: 'unitManage',
// path: '/unitManage',
// type: 'dir',
// children: [
// {
// title: '公安单位',
// name: 'policeUnit',
// path: '/policeUnit',
// type: 'menu',
// // icon: 'icon-policeman-full',
// // size: '16',
// component: () => import('@/views/unitManage/policeUnit/index.vue')
// }, {
// title: '保安单位',
// name: 'securityUnit',
// path: '/securityUnit',
// type: 'menu',
// component: () => import('@/views/unitManage/securityUnit/index.vue')
// }
// ]
// }
]

View File

@ -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)

Binary file not shown.