workApp/components/navBar.vue

<template>
	<!-- 头部 -->
	<uni-nav-bar :class="{'custom_uni_nav_bar':!onlyTitle,'custom_navbar_only_title':onlyTitle,'custom_only_title_back_icon':!showHeadSearchInput}"
		:height="`${height}rpx`" :backgroundColor="backgroundColor" :title="title" color="#333333" :fixed="true"
		:border="showHeaderborder" :statusBar="true" :leftWidth="leftWidth" :rightWidth="rightWidth">
		<!-- 返回按钮 -->
		<template v-slot:left>
			<uni-icons class="left_icon" type="left" color="#333333" @click="GoBack()" />
		</template>
		<!-- 表头内容 -->
		<view :class="['nav_head',{'only_title':!showHeadSearchInput,'leftWidth0':leftWidth=='0rpx'}]" v-if="!onlyTitle">
			<text class="nav_title">{{title}}</text>
			<template v-if="showHeadSearchInput">
				<uni-easyinput v-if="rightType=='searchBox'" 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>
				<template v-else>
					<slot name="headRightIcon" />
				</template>
			</template>
		</view>
		<!-- 条件选择器 -->
		<view :class="['filter_picker',`len${PickerDataLens}`]" v-if="showFilterPicker">
			<template v-for="(item,index) in filterPickerData" :key="index">
				<picker class="item_filter_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>
		<slot name="tabs_top_content" />
		<!-- tabs -->
		<view class="scroll_tabs" v-if="showTabs && tabList.length > 0">
			<scroll-view class="scroll_tabs_view" 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>
			<slot name="tabs_right_content" />
		</view>
		<!-- tabs 按钮 -->
		<scroll-view v-if="showTabBtns && tabBtns.length > 0" class="scroll_tab_btn" scroll-x="true" scroll-left="0" :show-scrollbar="false">
			<slot name="tab_btns_left" />	
			<view :class="['tab_item',{'selected':item.value===state.tabBtnSelected}]" v-for="item in tabBtns" :key="item.value" @click="SelectTabBtnsValue(item.value)">
				{{item.label}}
			</view>
		</scroll-view>
		<slot name="tabs_bottom_content" />
	</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 uniEasyinput from '@/uni_modules/uni-easyinput/components/uni-easyinput/uni-easyinput.vue';
	import {
		reactive,
		onMounted,
		watch,
		computed
	} 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: () => []
		},
		defaultTabValue:{
			type: [String,Number],
			default: () => ''
		},//默认值
		defaultTabBtnValue:{
			type: [String,Number],
			default: () => ''
		},//默认值
		tabBtns: { //tabBtns
			type: Array,
			default: () => []
		},
		showHeadSearchInput:{//是否显示头部搜索框
			type: Boolean,
			default: true
		},
		rightType:{//头部右侧内容
			type: String,
			default: 'searchBox'
		},
		showFilterPicker: { //是否显示条件选择器
			type: Boolean,
			default: false
		},
		showTabs: { //是否显示条件选择器tabs
			type: Boolean,
			default: false
		},
		showTabBtns: { //是否显示条件选择器tabBtns
			type: Boolean,
			default: false
		}
	});
	const state = reactive({
		searchWord: '', //关键字
		filterOpts:{
			valueIndex:0,
			index:0,
			filterPickerValue: []
		},//条件选择器选中的值
		tabsSelected: '', //tabs 默认选中
		tabBtnSelected: '',//tabBtns 默认选中
		searchInputStyles: { //搜索框样式
			borderColor: '#DCDFE6',
			color: '#333333'
		},
		searchInputPlaceholderStyle: 'color: #C0C4CC;fontSize: 28rpx' //搜索框样式
	})
	const PickerDataLens = computed(()=>{
		return props.filterPickerData.filter(item=>item?.list?.length > 0)?.length || 0;
	})
	watch(()=>props.tabList,(newVal, oldVal)=>{
		if(newVal){
			const firstValue = props?.tabList?.[0]?.value ?? '';
			state.tabsSelected = props.defaultTabValue!==''?props.defaultTabValue : firstValue; //tab 默认值
		}
	})
	watch(()=>props.tabBtns,(newVal, oldVal)=>{
		if(newVal){
			const firstValue = props?.tabBtns?.[0]?.value ?? '';
			state.tabBtnSelected = props.defaultTabBtnValue!==''?props.defaultTabBtnValue : firstValue; //tab 默认值
		}
	})
	//关键字搜索
	const HandleSearchInput = (e) => {
		state.searchWord = e;
		CommonFilterData('search');
	}
	//切换条件选择器  index:数组filterPickerData索引
	const ChangeFilterPicker = (e, index) => {
		const valueIndex = e.detail.value; //下拉框选中值的索引
		const selectedValue = props.filterPickerData?.[index]?.list?.[valueIndex]?.value ?? '';
		state.filterOpts.filterPickerValue[index] = selectedValue;
		//处理下一级默认值
		for(let i = 0; i < props.filterPickerData.length; i++){
			if(i > index){
				const list = props.filterPickerData?.[i]?.list || [];
				state.filterOpts.filterPickerValue[i] = list.length > 0 ? list[0].value : '';
			}
		}
		state.filterOpts.valueIndex = valueIndex;
		state.filterOpts.index = index;
		CommonFilterData('filterPicker');
	}
	//tabs切换
	const SelectTabsValue = (value) => {
		state.tabsSelected = value;
		CommonFilterData('tabs');
	}
	//tabBtns切换
	const SelectTabBtnsValue = (value) => {
		state.tabBtnSelected = value;
		CommonFilterData('tabBtns');
	}
	//条件发生改变进行数据查询
	const CommonFilterData = (type) => {
		emit('CommonFilterData',{
			searchWord:state.searchWord, 
			filterOpts:state.filterOpts,
			tabsSelected:state.tabsSelected,
			tabBtnSelected:state.tabBtnSelected
		},type);
	}
	const GoBack = () => {
		if (props.backPath == 'myIndex') {
			uni.redirectTo({
				url: '/pages/my/index'
			});
		} else if (props.backPath == 'workspace') { //跳转工作台
			uni.redirectTo({
				url: '/pages/workspace/index'
			});
		} else {
			emit('GoBack');
		}
	}
	onMounted(() => {
		const firstValue = props?.tabList?.[0]?.value ?? '';
		const firstBtnValue = props?.tabBtns?.[0]?.value || '';
		state.tabsSelected = props.defaultTabValue!==''?props.defaultTabValue : firstValue; //tab 默认值
		state.tabBtnSelected = props.defaultTabBtnValue!==''?props.defaultTabBtnValue : firstBtnValue; //tabBtns 默认值
		state.filterOpts.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>