BRS2.0/components/flightInfo/flightInfo.vue

<template>
	<view class="flightBox">
		<view class="flight" v-if="flightDetail">
			<view class="top">
				<view class="flightNo">
					{{flightDetail.carrierFlights}}
				</view>
				<view class="flightNo">
					{{flightDetail.carrierFlightsDate}}
				</view>
			</view>
			<view class="flightInfo" @tap="toFlight()">
				<view class="fight_card start">
					<p>{{flightDetail.outAirport}}</p>
					<span>{{flightDetail.scheduleTakeOffTime?flightDetail.scheduleTakeOffTime:"-"}}</span>
				</view>
				<view class="fight_center">
					<view class="type">
						{{flightDetail.normalState}}
					</view>
					<view class="aircraft"></view>
				</view>
				<view class="fight_card end">
					<p>{{flightDetail.landAirport}}</p>
					<span>{{flightDetail.scheduleLandInTime?flightDetail.scheduleLandInTime:"-"}}</span>
				</view>
			</view>
			<view class="foot" v-if="isSite!=''">
				<view :class="isSite=='LOAD'?'setSite':'containerNo'">
					<view class="">
						位置：{{site}}
					</view>
					<view class="" @click="showBox('site')">
						<uni-icons type="compose" color="#fff" size="24"></uni-icons>
					</view>
				</view>
				<view class="passenger_cabin" v-if="isSite=='LOAD'">
					<view class="">
						仓位：{{passenger_cabin}}
					</view>
					<view class="" @click="showBox('passenger_cabin')">
						<uni-icons type="compose" color="#fff" size="24"></uni-icons>
					</view>
				</view>
				<view class="containerNo" v-if="isSite=='LOAD'">
					<view class="">
						容器：{{containerNo}}
					</view>
					<view class="" @click="showBox('containerNo')">
						<uni-icons type="compose" color="#fff" size="24"></uni-icons>
					</view>
				</view>
				<view class="luggageNo">
					<view class="">
						录入行李：{{luggageNo}}
					</view>
					<view class="" @click="showBox('luggageNo')">
						<uni-icons type="compose" color="#fff" size="24"></uni-icons>
					</view>
				</view>
			</view>
		</view>
		<view class="flight" v-else>
			<view class="noMore">
				暂无航班信息
			</view>
		</view>
		<view class=""> 
			<uni-popup ref="inputDialog" type="dialog">
				<uni-popup-dialog ref="inputClose" mode="input" title="请扫描或输入" value="" placeholder="请输入内容"
					@confirm="dialogInputConfirm"></uni-popup-dialog>
			</uni-popup>
		</view>
	</view>
</template>

<script>
	export default {
		name: "flifgtInfo",
		data() {
			return {
				type:""
			};
		},
		props: {
			flightDetail: {
				type: Object,
				default: null
			},
			isSite: {
				type: String,
				default: ''
			},
			site: {
				type: String,
				default: "-"
			},
			containerNo: {
				type: String,
				default: ""
			},
			passenger_cabin: {
				type: String,
				default: ""
			},
			luggageNo: {
				type: String,
				default: ""
			},
		},
		methods: {
			toFlight: function() {
				this.$emit("toFlight", true)
			},
			showBox: function(val) {
				this.type = val;
				this.$refs.inputDialog.open()
			},
			dialogInputConfirm:function(val){
				this.$emit('setVal',val,this.type)
				this.$refs.inputDialog.close()
			}
		}
	}
</script>

<style lang="scss" scoped>
	.flightBox {
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: center;
		padding: 1rem 15px 1rem 15px;
		box-sizing: border-box;

		>.flight {
			width: 100%;
			min-height: 96px;
			background: rgba(0, 0, 0, 0.25);
			border-radius: 5px;
			padding: 5px 10px;

			.top {
				height: 26px;
				width: 100%;
				display: flex;
				align-items: center;
				justify-content: space-between;
				border-bottom: 1px solid #333;

				.flightNo {
					color: rgb(255, 255, 255);
					font-family: Noto Sans SC;
					font-size: 16px;
					line-height: 24px;
					font-weight: 700;
				}

				.fightDate {
					color: rgb(255, 255, 255);
					font-family: Noto Sans SC;
					font-size: 16px;
					line-height: 24px;
					font-weight: 700;
				}
			}

			.flightInfo {
				width: 100%;
				display: flex;
				align-items: center;
				justify-content: space-around;
				height: 70px;

				>.fight_card {
					width: 33.3%;
					display: flex;
					flex-direction: column;
					align-items: flex-start;
					justify-content: center;

					>p {
						color: rgb(255, 255, 255);
						font-family: Noto Sans SC;
						font-size: 16px;
						line-height: 24px;
						font-weight: 700;
					}

					>span {
						color: rgb(255, 255, 255);
						font-family: Noto Sans SC;
						font-size: 13px;
						font-weight: 500;
					}
				}

				.end {
					display: flex;
					flex-direction: column;
					align-items: flex-end;
					justify-content: center;
				}

				.fight_center {
					width: 33.3%;
					display: flex;
					flex-direction: column;
					align-items: center;
					justify-content: center;
					color: rgb(255, 255, 255);
					font-family: Noto Sans SC;
					font-size: 16px;
					line-height: 24px;
					font-weight: 700;

					>.aircraft {
						width: 1.75rem;
						height: 1.75rem;
						background: url('../../static/hang.png') no-repeat;
						background-size: 100% 100%;
					}
				}

			}

			.foot {
				border-top: 1px solid #333;
				width: 100%;
				padding: 5px;
				color: #fff;
				display: flex;
				flex-direction: row;
				flex-wrap: wrap;
				justify-content: space-between;
				box-sizing: border-box;

				.setSite {
					width: 50%;
					display: flex;
					flex-direction: row;
					justify-content: space-between;
					padding: 5px 0;
					box-sizing: border-box;
				}

				.containerNo {
					width: 100%;
					display: flex;
					flex-direction: row;
					justify-content: space-between;
					padding: 5px 0;
					box-sizing: border-box;
				}

				.passenger_cabin {
					width: 45%;
					display: flex;
					flex-direction: row;
					justify-content: space-between;
					padding: 5px 0;
					box-sizing: border-box;
				}

				.luggageNo {
					width: 100%;
					display: flex;
					flex-direction: row;
					justify-content: space-between;
					padding: 5px 0;
					box-sizing: border-box;
				}
			}

			.noMore {
				display: flex;
				align-items: center;
				justify-content: center;
				color: rgb(255, 255, 255);
				font-family: Noto Sans SC;
				font-size: 16px;
				line-height: 24px;
				font-weight: 700;
				min-height: 96px;
			}
		}
	}
</style>