dev/dcp-app-gate/pages/information/InformationData/dom/navbarSearch1.vue

<!--
* props
*   list  /op/geiIntegratedDataMenus/getMenu 接口回传参数
* $emit
*   selectedIteml 选中项的source属性值 查询使用
-->
<template>
	<view>
		<u-navbar
				:back-text="i18n('return')"
				:back-text-style="backStyle"
				back-icon-color="#fff" title-color="#fff"
				:back-icon-size="28"
				:background="popupShow?whiteBackground:background"
				style="z-index: 12000;position: relative;"
				:class="[popupShow?'isSearch':'isNotSearch']"
		>
			<view class="search-wrap">
				<u-search v-model="searchInput"
									:show-action="false"
									height="56"
									:action-style="{color: '#fff'}"
									:placeholder="$i18n.locale == 'zh'? '请输入关键字': 'Please input keywords'"
									@change="searchChange"
									@focus="searchFocus"
				></u-search>
			</view>
			<view class="navbar-right" slot="right" v-if="popupShow">
				<view class="dot-box right-item">
					<text style="margin-right: 20upx;" @click="searchBlue">{{i18n('Cancel')}}</text>
				</view>
			</view>
		</u-navbar>
		<u-popup v-model="popupShow"
						 mode="top">
			 <!-- #ifdef H5 -->
				<view style="height: 88upx;"></view>
			 <!-- #endif -->
			 <!-- #ifdef APP-PLUS -->
			 				<view style="height: 150upx;"></view>
			 <!-- #endif -->
			<view style="max-height: 800upx;overflow: auto;">
				<view v-for="(item,index) in searchResultListFilter"
							@click="selectedItem(item,index)"
							class="listText">
					<text v-if="$i18n.locale == 'zh'" style="line-height: 60upx;"><text v-html="item.indexName"></text></text>
					<text v-if="$i18n.locale == 'en'" style="line-height: 60upx;"><text v-html="item.indexEnName"></text></text>
				</view>
				<view v-if="searchResultListFilter.length ==0"
							style="text-align: center;">
					<text v-if="$i18n.locale == 'zh'" style="line-height: 60upx;">无相关搜索</text>
					<text v-if="$i18n.locale == 'en'" style="line-height: 60upx;">Unrelated search</text>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
export default {
	name: "navbarSearch",
	props: {
		backStyle: {
			type: Object,
			default: ()=>{
				return {
					color: '#fff',
					fontSize: '28upx'
				}
			}
		},
		background: {
			type: Object,
			default: ()=>{
				return {
					backgroundImage: 'linear-gradient(270deg, #4BC0E2 0%, #538BE7 100%)'
				}
			}
		},
		list: {
			type: Array,
			default: () => []
		}
	},

	computed:{
		searchResultList() {
			let arr=[]
			this.setIcon(this.list,'child',arr,0)
			return arr;
		},
		searchResultListMap() {
			let replaceReg = new RegExp(this.searchInput, 'g')
			let replaceString = '<span style="color:red">' + this.searchInput + '</span>'
			let arr=this.searchResultList.map(item=>{
				return {
					indexEnName:item.indexEnName.replace(replaceReg,replaceString),
					indexEnNameText:item.indexEnName,
					id:item.id,
					source:item.source,
					nodeId:item.nodeId,
					indexName:item.indexName.replace(replaceReg,replaceString),
					indexNameText:item.indexName
				}
			})
			return arr;
		},
		searchResultListFilter() {
			let arr=[]
			if(this.$i18n.locale=='zh'){
				arr = this.searchResultListMap.filter(item=>item.indexName.indexOf(this.searchInput)!=-1)
			}
			if(this.$i18n.locale=='en'){
				arr = this.searchResultListMap.filter(item=>item.indexEnName.indexOf(this.searchInput)!=-1)
			}
			return arr;
		}
	},
	data() {
		return {
			popupShow: false,
			searchInput: '',
			whiteBackground:{
				background: '#ffffff'
			}
		}
	},
	methods: {
		setIcon(data,key,arr,index){
			let ind = index
			data.forEach(item=>{
				if(index < 3){
					if(item[key] && item[key].length > 0){
						this.setIcon(item[key],key,arr,ind+1)
					}else{
						arr.push(item)
					}
				}else{

				}
			})
		},
		i18n(data) {
			return this.$t('common.' + data);
		},
		selectedItem(item,index) {
			if(this.$i18n.locale=='zh'){
				this.searchInput = item.indexNameText
			}
			if(this.$i18n.locale=='en'){
				this.searchInput = item.indexEnNameText
			}
			this.searchBlue()
			this.$emit('selectedItem',{item})
		},
		searchChange(value) {
			if(value===''){
				this.$emit('selectedItem',{item:{}})
			}
			console.log('**',this.searchResultList)
			console.log('**',this.searchResultListMap)
			console.log('**',this.searchResultListFilter)
		},
		searchFocus(value) {
			this.popupShow = true
		},
		searchBlue(value) {
			this.popupShow = false
		},
		clearInput(){
			this.searchInput = '';
			this.$emit('selectedItem',{item:{}})
		}
	}
}
</script>

<style scoped lang="scss">
.search-wrap {
	margin: 0 20rpx;
	flex: 1;
}
.listText{
	width: 100%;
	border-bottom: 1px solid #efefef;
	padding: 0 30upx;
	box-sizing: border-box;
}
.isSearch /deep/ .u-back-wrap{
	display: none;
}
</style>