workApp/components/nav-bar.vue

<template>
	<uni-nav-bar :class="{'custom_uni_nav_bar':!onlyTitle,'custom_navbar_only_title':onlyTitle}"
		:height="`${height}rpx`" :backgroundColor="backgroundColor" :title="title" color="#333333" :fixed="true"
		:border="showHeaderborder" :statusBar="true" :leftWidth="leftWidth" :rightWidth="rightWidth" left-icon="left"
		@clickLeft="GoBack()">
		<!-- 表头内容 -->
		<view class="nav_head" v-if="!onlyTitle">
			<text class="nav_title">{{title}}</text>
			<uni-easyinput class="search_box" v-model="state.searchWord" trim="all" :styles="state.searchInputStyles"
				:placeholderStyle="state.searchInputPlaceholderStyle" placeholder="请输入关键字搜索" @input="HandleSearchInput">
				<template #left>
					<image src="/static/image/overview/search.png" class="search_icon"></image>
				</template>
			</uni-easyinput>
		</view>
		<!-- 条件选择器 -->
		<view class="filter_picker" v-if="showFilterPicker">
			<template v-for="(item,index) in filterPickerData" :key="index">
				<picker mode="selector" v-if="item?.list?.length > 0" :range="item.list" :value="item.valueIndex" range-key="label" style="width: calc((100% - 32rpx * 2) / 3);" @change="(e)=>ChangeFilterPicker(e,index)">
					<view class="filter_item">
						<text class="filter_text">{{ item?.list?.[item.valueIndex]?.label || '' }}</text>
						<uni-icons type="down" size="16" color="#999999"></uni-icons>
					</view>
				</picker>
			</template>
		</view>
		<!-- tabs -->
		<scroll-view v-if="showTabs" class="scroll_tabs" scroll-x="true" scroll-left="0" :show-scrollbar="false">
			<view :class="['tab_item',{'selected':item.value==state.tabsSelected}]" v-for="item in tabList" :key="item.value" @click="SelectTabsValue(item.value)">
				{{item.label}}
			</view>
		</scroll-view>
	</uni-nav-bar>
</template>

<script setup>
	import uniNavBar from '@/uni_modules/uni-nav-bar/components/uni-nav-bar/uni-nav-bar.vue';
	import uniIcons from '@/uni_modules/uni-icons/components/uni-icons/uni-icons.vue';
	import {
		reactive,
		onMounted
	} from 'vue';
	const emit = defineEmits(['GoBack','CommonFilterData']);
	const props = defineProps({
		height: { //高度
			type: String,
			default: () => ''
		},
		leftWidth: { //导航栏左侧插槽宽度
			type: String,
			default: () => '96rpx'
		},
		rightWidth: { //导航栏右侧插槽宽度
			type: String,
			default: () => '96rpx'
		},
		title: { //标题
			type: String,
			default: () => ''
		},
		showHeaderborder: { //是否显示边框 默认不显示
			type: Boolean,
			default: false
		},
		backgroundColor: { //背景色
			type: String,
			default: () => '#FFFFFF'
		},
		backPath: { //返回路径
			type: String,
			default: () => ''
		},
		onlyTitle: { //是否只显示标题
			type: Boolean,
			default: true
		},
		filterPickerData: { //条件选择器
			type: Array,
			default: () => []
		},
		tabList: { //tabs
			type: Array,
			default: () => []
		},
		showFilterPicker: { //是否显示条件选择器
			type: Boolean,
			default: false
		},
		showTabs: { //是否显示条件选择器tabs
			type: Boolean,
			default: false
		}
	});
	const state = reactive({
		searchWord: '', //关键字
		filterPickerValue: [], //条件选择器默认值
		tabsSelected: '', //tabs 默认选中
		searchInputStyles: { //搜素框样式
			borderColor: '#DCDFE6',
			color: '#333333'
		},
		searchInputPlaceholderStyle: 'color: #C0C4CC;fontSize: 28rpx' //搜素框样式
	})
	//关键字搜索
	const HandleSearchInput = (e) => {
		state.searchWord = e;
		CommonFilterData(state.searchWord, {
			filterPickerValue: [...state.filterPickerValue]
		}, state.tabsSelected, 'search');
	}
	//切换条件选择器  index:数组filterPickerData索引
	const ChangeFilterPicker = (e, index) => {
		const valueIndex = e.detail.value; //下拉框选中值的索引
		const selectedValue = props.filterPickerData?.[index]?.list?.[valueIndex]?.value ?? '';
		state.filterPickerValue[index] = selectedValue;
		CommonFilterData(state.searchWord, {
			valueIndex,
			index,
			filterPickerValue: [...state.filterPickerValue]
		}, state.tabsSelected, 'filterPicker');
	}
	//tabs切换
	const SelectTabsValue = (value) => {
		state.tabsSelected = value;
		CommonFilterData(state.searchWord, {
			filterPickerValue: [...state.filterPickerValue]
		}, state.tabsSelected, 'tabs');
	}
	//条件发生改变进行数据查询
	const CommonFilterData = (searchWord, filterPickerValue, tabsSelected, type) => {
		emit('CommonFilterData', searchWord, filterPickerValue, tabsSelected, type);
	}
	const GoBack = () => {
		if (props.backPath == 'myIndex') {
			uni.switchTab({
				url: '/pages/my/index'
			});
		} else if (props.backPath == 'workspace') { //跳转工作台
			uni.switchTab({
				url: '/pages/workspace/index'
			});
		} else {
			emit('GoBack');
		}
	}
	onMounted(() => {
		state.tabsSelected = props?.tabList?.[0]?.value || ''; //tab 默认值
		state.filterPickerValue = props.filterPickerData.map(item => item?.defaultValue ?? '');
	})
</script>

<style scoped lang="scss">
	:deep(.uni-navbar__header) {
		padding: 0;
		position: relative;
		z-index: 999;
	}

	:deep(.uni-navbar__header-container) {
		padding: 0;
	}
</style>