BRS1.0/pages/extract/index.vue

<template>
  <view class="app-content">
		<!-- <img src="../../static/beijing.png" alt="" class="tuku"> -->
		<Navs :navname="navname" @fall="fall"></Navs>
		<view class="content">
			<view class="content_top">
				<view class="craid" v-if="cap">
					<view class="craid_data">
						<p>{{cap.flightNo}}</p>
					  <span>{{cap.flightDate}}</span>
					</view>
					<view class="craid_data">
						<p>{{cap.outAirport}}</p>
					  <!-- <span>{{cap.time2}}</span> -->
					</view>
					<view class="aircraft"></view>
					<view class="craid_data">
						<p>{{cap.landAirport}}</p>
					  <!-- <span>{{cap.time3}}</span> -->
					</view>
				</view>
				<view class="craids" v-if="!cap">
          <p>暂无航班信息</p>
				</view>
				<view class="scanning">
					<view class="scanning_cd">
						<input  class="input"  v-model.trim="capluggageNum" disabled  type="text" value=""  placeholder-style="font-size:.8125rem;color:rgb(189, 214, 231);display:flex;justify-content: start;" placeholder="请扫描机票信息"/>
						<view class="log_l"></view>
						<view class="log" @tap="scan('1')"></view>
					</view>
				</view>
			</view>
			<view class="content_top">
				<view class="craid" v-if="caps">
					<view class="craid_data">
						<p>{{caps.flightNo}}</p>
					  <span>{{caps.flightDate}}</span>
					</view>
					<view class="craid_data">
						<p>{{caps.outAirport}}</p>
					  <!-- <span>{{caps.time2}}</span> -->
					</view>
					<view class="aircraft"></view>
					<view class="craid_data">
						<p>{{caps.landAirport}}</p>
					  <!-- <span>{{caps.time3}}</span> -->
					</view>
				</view>
				<view class="craids" v-if="!caps">
					<p>暂无航班信息</p>
				</view>
				<view class="scanning">
					<view class="scanning_cd">
						<input  class="input"  v-model.trim="capsluggageNum" disabled type="text" value=""  placeholder-style="font-size:.8125rem;color:rgb(189, 214, 231);display:flex;justify-content: start;" placeholder="请扫描行李牌号"/>
						<view class="log_l"></view>
						<view class="log" @tap="scan('2')"></view>
					</view>
					<view class="gao" v-if="!isMatch">*行李信息不一致，请上报处理</view>
				</view>
			</view>
			<view class="footer">
				<button form-type="submit" class="switchBtndel" @tap="abnormal()">异常处理</button>
				<button form-type="submit" class="btnyes" v-if="isSend" @tap="sendData()">确认提取</button>
			</view>
		</view>
	</view>
</template>

<script>
	import Navs from '../../components/header/navs.vue'
	import maskModel from '../../components/mask-model/mask-model.vue'
	import {
		Format
	} from '@/components/utils/validate'
	export default {
		data() {
			return {
				isShow: true,
				input: '',
				navname: '提取',
				cap:null,
				caps:null,
				luggageNum:null,
				capluggageNum:null,
				capsluggageNum:null,
				isMatch:true,
				isSend:false,
			}
		},
		created(option) {
		},
		onLoad(option){
			// this.navname = JSON.parse(decodeURIComponent(option.item))
			// if (this.navname == '分拣') {
      //   this.tabname = '航班'
			// }
		},
		onUnload() {
			// this.$refs.showMask.show();
		},
		onShow() {
			uni.$on("scancodemsg", (data) => {
				if (data.msg.length > 9) {
					this.luggageNum = Number(data.msg)
					// this.luggageNum = 3784730658
					this.getDetial(this.luggageNum)
				}
			});
		},
		onHide() {
			uni.$off("scancodemsg");
		},
		mounted() {
			// this.$refs.showMask.show();
			// console.log(this.stratvalue.length)
		},
		computed: {
			// getFooterClass () {
			// 	return this.cap.luggageNum ? 'scanning_cds' : 'scanning_cd'
			// },
			// getlooterClasser () {
			// 	return this.caps.luggageNum ? 'scanning_cds' : 'scanning_cd'
			// }
		},
		components: {
			Navs,
			maskModel:maskModel,
		},
		methods: {
			scan(type){
				let that = this
				uni.scanCode({
					onlyFromCamera: true,
					success: function (res) {
						that.luggageNum = Number(res.result)
						// this.luggageNum = 3784730658
						that.getDetial(Number(res.result))
					}
				});
			},
			datatime() {
				let dataTime = Format("yyyy-MM-dd hh:mm:ss", new Date());
				return dataTime
			},
			async getDetial(num) {
				let data = {
					"serviceId": 3002,
					"page": 1,
					"pageSize": 1,
					"dataContent": {
						"luggageNum": num, //行李号
					},
					"event": "0"
				}
				await this.$http.httpPost('/openApi/query', data).then(res => {
					if (res.code == "0" && res.returnData.length>0) {
						if(!this.cap){
							this.cap = res.returnData[0]
							this.capluggageNum = this.luggageNum
						}
						else if(this.cap&&!this.caps){
							this.caps = res.returnData[0]
							this.capsluggageNum = this.luggageNum
							
						}
						else if(this.cap&&this.caps){
							this.cap = null
							this.caps = null
							this.capluggageNum = null
							this.capsluggageNum = null
							this.cap = res.returnData[0]
							this.capluggageNum = this.luggageNum
						}
						if(this.caps.luggageNum == this.cap.luggageNum){
							this.isSend = true
							this.isMatch = true
						}
						if(!this.caps){
							this.isSend = false
							this.isMatch = true
						}
						if(this.caps&&this.caps.luggageNum != this.cap.luggageNum){
							this.isSend = false
							this.isMatch = true
						}
					}
					else{
						uni.showToast({
							icon:'none',
							title: "未查询到该行李信息",
							duration: 5000
						});
					}
				})
			},
			async sendData(){
				this.caps.nodeCode = "extract"
				this.caps.processing_time = this.datatime();
				this.caps.sourceAirport = this.$storage.get('airportName');
				let data = {
					"serviceId": 3005,
					"dataContent": [
						this.caps
					],
					"event": "0"
				}
				await this.$http.httpPost('/openApi/query', data).then(res => {
					if (res.code == "0") {
						uni.showToast({
							icon:'none',
							title: "操作提取成功",
							duration: 5000
						});
					}
					else{
						uni.showToast({
							icon:'none',
							title: "操作失败",
							duration: 5000
						});
					}
				})
			},
			abnormal(){
				if(this.luggageNum){
					uni.navigateTo({
						url: "/pages/baggagecheck/index?luggageNum="+this.luggageNum
					})
				}
				else{
					uni.navigateTo({
						url: "/pages/baggagecheck/index?luggageNum="
					})
				}
			},
			fall () {
				uni.switchTab({
					url: "/pages/index/index"
				})
			}
		},
	}
</script>

<style lang="scss" scoped>
.app-content{
  position: relative;
	background: rgb(49, 85, 99);
	>.content{
		width: 100%;
		height: calc(100vh - 4.625rem);
		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%;
				}
			}
			>.craids{
				height: 5.625rem;
				padding: 0 2.5625rem 0 2.5625rem;
				display: flex;
				justify-content: center;
				align-items: center;
				>p{
					color: rgb(189, 214, 231);
					font-family: Noto Sans SC;
					font-size: 13px;
					font-weight: 500;
				}
			}
			>.scanning{
				// height: 12rem;
				padding: 0 1.5rem 0 1.5rem;
				opacity: 1;
				transition: all 3s;
				>.gao{
					color: yellow;
				}
				.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);	
			>.choice{
				width: 100%;
				height: 2.5rem;
				display: flex;
				background: rgb(240, 241, 243);
				>.handle{
					width: 50%;
					display: flex;
					align-items: center;
					justify-content: center;
					color: rgb(0, 0, 0);
					font-family: Noto Sans SC;
					font-size: 15px;
					font-weight: 700;
					border-radius: 6px 6px 0px 0px;
					background: rgb(255, 255, 255);
				}
			  >.handles{
					width: 50%;
					display: flex;
					align-items: center;
					justify-content: center;
					color: rgb(0, 0, 0);
					font-family: Noto Sans SC;
					font-size: 15px;
					font-weight: 700;		
				}
			}
			.up{
				width: 100%;
				display: flex;
				align-items: center;
				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%;
				}
				>.list{
					width: 97%;
					position: relative;
					height: 3.75rem;
					display: flex;
					align-items: center;
					transform: all 3s;
					right: 0;
					color: rgb(0, 0, 0);
					font-family: Noto Sans SC;
					font-size: 13px;
					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%;
					}
				}
			}
			.ups{
				width: 100%;
				display: flex;
				align-items: center;
				margin-left: 1rem;
				border-bottom: 1px solid rgb(238, 238, 238);
				// transform: all 3s;
				>.down_up{
					width: .875rem;
					height: .875rem;
					position: relative;
					right:  1.875rem;
					background: url('../../static/xia.png') no-repeat;
					background-size: 100% 100%;
				}
				>.list{
					width: 97%;
					position: relative;
					height: 3.75rem;
					display: flex;
					align-items: center;
					right: 3.75rem;
					// right: 0;
					color: rgb(0, 0, 0);
					font-family: Noto Sans SC;
					font-size: 13px;
					font-weight: 500;
					transform: all 3s;
				}
				>.delete{
					width: 3.75rem;
					height: 3.75rem;
					background: rgb(237, 101, 101);
					display: flex;
					align-items: center;
					justify-content: center;
					position: relative;
					right: 1rem;
					transform: all 3s;
					// right: -3.75rem;
					>.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);
			}
			.but{
				width: 20.5625rem;
        height: 2.75rem;
				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: 2.25rem;
				margin-bottom: 2.25rem;
			}
		}
		>.footer{
			width: 100%;
			height: 7.4375rem;
			position: absolute;
			bottom: 0;
			display: flex;
			align-items: center;
			justify-content: center;
			>.switchBtndel{
				width: 9.4375rem;
				height: 2.75rem;
				box-sizing: border-box;
				background: rgb(243, 253, 255);
				border: 1px solid rgb(172, 218, 230);
				border-radius:
				4px;
				color: rgb(59, 150, 159);
				font-family: Noto Sans SC;
				font-size: 16px;
				font-weight: 700;
			}
			>.btnyes{
				width: 9.4375rem;
				height: 2.75rem;
				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:
				4px;
				color: rgb(255, 255, 255);
				font-family: Noto Sans SC;
				font-size: 16px;
				font-weight: 700;
			}
			>.unbtnyes{
				width: 9.4375rem;
				height: 2.75rem;
				background: rgb(126, 138, 143);
				border-radius:
				4px;
				color: rgb(255, 255, 255);
				font-family: Noto Sans SC;
				font-size: 16px;
				font-weight: 700;
			}
		}
	}
}
</style>