zhuoxin-leader-uniapp/components/fxyk-navbar/fxyk-navbar.vue

<template>
	<u-navbar :is-back="false" title="" :border-bottom="false" :background="background">
		<view class="slot-wrap">
			<view class="navbar d-flex a-center j-sb w-100" :class="{'search': isSearch}">
				<view v-if="isNeedReturn" class="white-color" :style="{'color': iconColor}" @click="jump_back">
					<u-icon name="arrow-left"></u-icon>
				</view>
				<view v-else class="hide_color">>>></view>
				<view v-if="!isSearch" class="white-color d-flex a-center">{{ title }}</view>
				<view v-else style="width:70%">
					<fxyk-search ref="search" />
				</view>
				<view v-if="!isSearch" class="hide_color">>></view>
				<view v-else ><u-button shape="circle" :custom-style="buttonStyle" :throttle-time="500" @click="search">搜索</u-button></view>
			</view>
		</view>
		<u-toast ref="uToast" />
	</u-navbar>
</template>

<script>
	import { mapMutations } from 'vuex'
	export default {
		props: {
			// 是否为搜索页
			isSearch: {
				type: Boolean,
				default: false
			},
			// 标题 
			title: {
				type: String,
				default: ''
			},
			// 是否需要返回箭头
			isNeedReturn: {
				type: Boolean,
				default: true
			},
			// 返回箭头颜色
			iconColor: {
				type: String,
				default: '#fff'
			}
		},
		data() {
			return {
				background: {
					backgroundColor: "#40349C",
				},
				value: ''
			}
		},
		computed: {
			buttonStyle() {
				return {
					'background-color': '#40349C',
					'color': '#fff',
					'height': '60rpx',
					'width': '100rpx',
					'font-size': '12px'
				}
			},
		},
		methods: {
			...mapMutations(['updateSearchItemData', 'clearSearchData']),
			// 返回上一页
			jump_back() {
				uni.navigateBack()
			},
			// 搜索
			search() {
				let result = this.$refs.search.value
				// 获取搜索框中输入的值
				if (!result) {
					this.$refs.uToast.show({
						title: '请输入搜索内容',
						type: 'error',
						icon: false
					}) 
					return
				}
				let data = []
				// 获取历史搜索记录
				let searchData = uni.getStorageSync('searchData') ? uni.getStorageSync('searchData') : []
				// 该搜索条件是否已经存在
				let index = searchData.findIndex( (value) => result.toString() === value )
				if(index === -1 ) {
					data.push(result, ...searchData)
					// 存入本地缓存
					uni.setStorageSync('searchData', data)
					//  存入vuex
					this.clearSearchData(data)
				}
				uni.navigateTo({
					url: '/pages/index/searchData?status=1'
				})
				// 清空搜索框内数据
				this.$refs.search.value = ''
				this.updateSearchItemData()
			}
		}
	}
</script>

<style lang="scss" scoped>
	.slot-wrap {
		display: flex;
		align-items: center;
		height: 100%;
		/* 如果您想让slot内容占满整个导航栏的宽度 */
		flex: 1;
		/* 如果您想让slot内容与导航栏左右有空隙 */
		// padding: 0 30rpx;
		.navbar {
			height: 120rpx;
			padding: 0 2%;
			.white-color {			
				font-size: 40rpx;
				font-family: SimSun;
				font-weight: 400;
				line-height: 44px;
				color: #FFFFFF;
			}
			.hide_color {
				color: $yk-main-bg-color;
			}
		}
	}
	.search {
		background-color: $yk-bg-color;
		margin-top: 80rpx;
	}
</style>