BRS1.0/components/header/nav.vue

<template>
	<view class="nav-content">
		<view class="nav">
			<view class="log" v-if="navtype" @tap="clickOrder">

			</view>
			<view class="nav-sech">
				<picker v-if="airportList && airportList.length>0" class="secah" @change="change" :value="valueIndex" :range="airportList">
					<view>{{airportList[valueIndex]}}</view>
				</picker>
				<input class="uni-input input-nav" @tap="test" disabled="true" v-model="flightNo" :placeholder="placeholder" />
				<uni-icons type="clear" size="26" @tap="clear" color="#fff" v-if="flightNo!=''"></uni-icons>
			</view>
		</view>
	</view>
</template>
<script>
	export default {
		data() {
			return {
				searchText: '', //搜索内容
				placeholder: '请输入航班号或行李号',
				array: [],
				airportList:[],
				valueIndex:this.index
			}
		},
		props: {
			navname: {
				type: String,
				default: ''
			},
			navtype: {
				type: Boolean,
				default: true
			},
			navtypes: {
				type: Boolean,
				default: false
			},
			index:{
				type: Number,
				default: 0
			},
			flightNo:{
				type: String,
				default: ''
			},
		},
		created(option) {
			this.airportList =this.$storage.getJson('airportList');
			if(!this.airportList){
				this.getAirportList()
			}
		},
		onUnload() {},
		onShow() {
		},
		mounted() {},
		methods: {
			clear(){
				this.$emit("clear")
			},
			async getAirportList(){
				let data={
						"serviceId": 14,
						"dataContent": [],
						"event": "0"
					}
				await this.$http.httpPost('/openApi/query',data).then(res => {
					this.airportList = []
					if(res.code == "0"){
						res.returnData.map(item =>{
							this.airportList.push(item['IATACode'])
							
							this.airportList.sort()
						})
						this.$storage.setJson('airportList',this.airportList);
						let num = this.valueIndex;
						this.$storage.set('airportName',this.airportList[num])
					}
				})
			},
			change(e){
				this.valueIndex = e.detail.value
				this.$emit('airport',this.airportList[this.valueIndex])
				this.$storage.set('airportName',this.airportList[this.valueIndex])
				this.$storage.set('airport',this.valueIndex);
			},
			test() {
				uni.navigateTo({
					url: "/pages/search/index"
				})
			},
			compareDesc(propertyName) {
			  return function(object1, object2) {
			    var value1 = object1[propertyName];
			    var value2 = object2[propertyName];
			    if(value2 < value1) {
			      return -1;
			    } else if(value2 > value1) {
			      return 1;
			    } else {
			      return 0;
			    }
			  }
			},
			//搜索框输入事件
			inputSearch() {
				this.$emit('input', this.searchText)
			},
			clickOrder() {
				this.$emit('fall')
			}
		},
	}
</script>
<style lang="scss" scoped>
	.nav-content {
		>.nav {
			width: 100%;
			height: 2.375rem;
			display: flex;
			justify-content: center;
			align-items: center;
			padding-top: 2.25rem;
			color: rgb(255, 255, 255);
			font-family: Noto Sans SC;
			font-size: 1rem;
			position: relative;

			// background: rgba(234, 241, 245,0.2);
			>.log {
				width: .375rem;
				height: .75rem;
				font-size: .75rem;
				position: absolute;
				left: 1.5rem;
				background: url('../../static/ico.png') no-repeat;
				background-size: 100% 100%;
			}

			>.nav-sech {
				width: 18.5625rem;
				height: 1.875rem;
				display: flex;
				align-items: center;
				background: rgba(234, 241, 245, 0.2);
				border-radius: 4px;

				.secah {
					width: 3.75rem;
					height: 80%;
					display: flex;
					align-items: center;
					justify-content: center;
					color: rgb(255, 255, 255);
					font-family: Noto Sans SC;
					font-size: 14px;
					font-weight: 400;
					border-right: .0625rem solid rgb(255, 255, 255);
				}

				.my-input-placeholder {
					color: rgb(170, 195, 207);
				}

				.input-nav {
					padding-left: .625rem;
					color: rgb(170, 195, 207);
				}

			}

			>.up {
				position: absolute;
				right: 1.5rem;
				color: rgb(255, 255, 255);
				font-family: Noto Sans SC;
				font-size: .875rem;
				font-weight: 500;
			}
		}
	}
</style>