BRS1.0/pages/flightdetails/index.vue

<template>
	<view class="app-content">
		<img :src="icon" alt="" class="tuku">
		<Navs :navname.sync="navname" @fall="fall"></Navs>
		<view class="fight">
			<view class="fight_card">
				<p>{{flightDetail.carrierFlights}}</p>
				<span>{{flightDetail.carrierFlightsDate}}</span>
			</view>
			<view class="fight_card">
				<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">
				<p>{{flightDetail.landAirport}}</p>
				<span>{{flightDetail.scheduleLandInTime?flightDetail.scheduleLandInTime:"-"}}</span>
			</view>
		</view>
		<view class="content">
			<view class="content_bootom" style="top:0">
				<scroll-view scroll-y="true" class="scroll-Y">
					<view class="up" v-for="(item, index) in listdata" :key="index">
						<view class="list" @tap="toDetail(item.luggageNum)">
							<p>{{ item.luggageNum }}</p>
						</view>
						<view class="normal">
							{{item.specialType!=null?item.specialType:" "}}
						</view>
						<view :class="item.exception_type != null?'error':'normal'">
							{{item.exception_type!=null?item.exception_type:"正常"}}
						</view>
					</view>
				</scroll-view>
			</view>
		</view>
	</view>
</template>
<script>
	import Navs from '../../components/header/navs.vue'
	import {
		Format
	} from '@/components/utils/validate'
	export default {
		data() {
			return {
				flightDetail: null,
				input: '',
				main: null,
				poll: null,
				filter: null,
				pusher: null,
				intentServer: null,
				timeShow: true,
				arr: [],
				navname: '航班详情',
				icon: 'static/beijing.png',
				newData: '',
				newDataday: '',
				listdata:[]
			}
		},
		created(option) {
		},
		onLoad() {
			this.flightDetail = this.$storage.getJson('searchData')
			this.getluggageList()
		},
		onUnload() {uni.$off("scancodemsg");},
		onShow() {
			uni.$on("scancodemsg", (data) => {
				if (data.msg.length > 9) {
					uni.navigateTo({
						url: "/pages/detail/index?luggageNum=" + data.msg
					})
				}
			});
			if(this.flightDetail){
				this.getluggageList()
			}
		},
		mounted() {
		},
		beforeDestroy() {
		},
		components: {
			Navs
		},
		methods: {
			fall() {
				uni.navigateBack({
					delta:1
				})
			},
			async getluggageList() {
				let data = {
					"serviceId": 3001,
					"page": 1,
					"pageSize": 999,
					"dataContent": {
						"carrierFlights": this.flightDetail.carrierFlights,
						"carrierFlightsDate": this.flightDetail.carrierFlightsDate,
						"outAirport":this.flightDetail.outAirport,
						"landAirport":this.flightDetail.landAirport
					},
					"event": "0"
				}
				await this.$http.httpPost('/openApi/query', data).then(res => {
					if (res.code == "0") {
						this.listdata = res.returnData;
					}

				})
			},
			toDetail(luggageNum){
				this.currentLuggageNum = luggageNum;
				uni.navigateTo({
					url: "/pages/detail/index?luggageNum="+this.currentLuggageNum
				})
			},
		},
	}
</script>

<style lang="scss" scoped>
	.app-content {
		position: relative;
		width: 100vw;
		height: 100vh;
		overflow: hidden;
		>.tuku {
			position: absolute;
			z-index: -1;
			width: 100%;
			top: -250px;
			let:20px;
		}

		>.fight {
			padding: 0 1.75rem 5rem 1.75rem;
			// height: 3.75rem;
			display: flex;
			align-items: center;
			justify-content: space-around;
			margin-top: 1.375rem;
			
			.fight_center {
				width: 3rem;
				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%;
				}
			}

			>.fight_card {
				display: flex;
				flex-direction: column;
				align-items: 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: 11px;
					font-weight: 500;
				}
			}
		}

		>.times {
			width: 100%;
			height: 3.6875rem;
			display: flex;
			align-items: center;
			justify-content: center;
			color: rgb(255, 255, 255);
			font-family: Noto Sans SC;
			font-size: 18px;
			font-weight: 700;

			p {
				margin-right: .625rem;
			}
		}

		.content {
			width: 100%;
			height: calc(100vh - 10rem);
			position: relative;
			
			// overflow: hidden;
			// background: rgb(49, 85, 99);
			>.content_top {
				width: 100%;
				// background: rgb(49, 85, 99);
				padding-bottom: 1.3125rem;

				>.craid {
					// width: 100%;
					height: 5.625rem;
					padding: 0 2.5625rem 0 2.5625rem;
					display: flex;
					justify-content: space-between;
					flex-wrap: wrap;
					align-items: center;

					>.craid_data {
						display: flex;
						flex-direction: column;
						justify-content: center;
						align-items: start;

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

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

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

				>.scanning {
					height: 12rem;
					padding: 0 1.5rem 0 1.5rem;
					opacity: 1;
					transition: all 3s;

					.scanning_cd {
						width: 100%;
						height: 3rem;
						opacity: 1;
						transition: all 3s;
						background: rgb(59, 103, 123);
						margin-top: 1rem;
						margin-bottom: .5rem;
						border-radius: 4px;
						display: flex;
						justify-content: center;
						align-items: center;
						color: rgb(255, 255, 255);
						font-family: Noto Sans SC;
						font-size: 16px;

						>.log {
							width: .875rem;
							height: .875rem;
							background: url('../../static/saoma.png') no-repeat;
							background-size: 100% 100%;
							margin-left: 1rem;
						}

						>.log_l {
							width: .125rem;
							height: 1.3125rem;
							margin-left: 4rem;
							background: rgb(255, 255, 255);
						}
					}

					.scanning_cds {
						width: 100%;
						height: 3rem;
						opacity: 1;
						transition: all 3s;
						background: rgb(51, 161, 165);
						margin-top: 1rem;
						margin-bottom: .5rem;
						border-radius: 4px;
						display: flex;
						justify-content: center;
						align-items: center;
						color: rgb(255, 255, 255);
						font-family: Noto Sans SC;
						font-size: 16px;

						>.log {
							width: .875rem;
							height: .875rem;
							background: url('../../static/saoma.png') no-repeat;
							background-size: 100% 100%;
							margin-left: 1rem;
						}

						>.log_l {
							width: .125rem;
							height: 1.3125rem;
							margin-left: 4rem;
							background: rgb(255, 255, 255);
						}
					}
				}
			}

			>.content_bootom {
				width: 100%;
				// height: calc(100vh - 20.9375rem - 4.375rem);
				padding-bottom: 0;
				position: absolute;
				bottom: 0;
				top: 20.75rem;
				// border-radius: 6px 6px 0px 0px;
				overflow: hidden;
				background: rgb(255, 255, 255);
				padding: 0 10px;
				box-sizing: border-box;
				.up {
					width: 100%;
					display: flex;
					align-items: center;
					justify-content: space-between;
					margin-left: 1rem;
					border-bottom: 1px solid rgb(238, 238, 238);
				
					// transform: all 3s;
					>.down_up {
						width: .875rem;
						height: .875rem;
						background: url('../../static/xia.png') no-repeat;
						background-size: 100% 100%;
					}
					
					>.error{
						width: 60px;
						color:red
					}
					>.normal{
						width: 60px;
						color:#4682b4 
					}
					>.list {
						position: relative;
						height: 3rem;
						display: flex;
						align-items: center;
						transform: all 3s;
						right: 0;
						color: rgb(0, 0, 0);
						font-family: Noto Sans SC;
						font-size: 16px;
						font-weight: 500;
					}
				
					>.delete {
						width: 3.75rem;
						height: 3.75rem;
						background: rgb(237, 101, 101);
						display: flex;
						align-items: center;
						justify-content: center;
						position: relative;
						right: -3.75rem;
						transform: all 3s;
				
						>.log {
							width: .875rem;
							height: .875rem;
							background: url('../../static/vector@1x.png') no-repeat;
							background-size: 100% 100%;
						}
					}
				}
				
				.scroll-Y {
					// height: calc(100% - 2.5rem - 2.75rem - 2.25rem - 2.25rem);
					height: calc(100% - 2.5rem - 2.75rem);
				}

				.but {
					width: 20.5625rem;
					height: 2.5rem;
					background: linear-gradient(179.10deg, rgba(51, 161, 165, 1.00) 11.326%, rgba(59, 111, 142, 1.00) 119.032%, rgba(59, 111, 142, 1.00) 119.032%, rgba(59, 111, 142, 1.00) 119.032%);
					border-radius: .25rem;
					color: rgb(255, 255, 255);
					font-family: Noto Sans SC;
					font-size: 1rem;
					margin: 0 auto;
					display: flex;
					align-items: center;
					justify-content: center;
					margin-top: 0.25rem;
					margin-bottom: 2.25rem;
				}
			}
		}
	}
</style>