jch-wx_tmsaip/pages/manifest/cabinQuery/cabinQuery.vue

<template>
	<view class="cabin-query">
		<view class="query-box">
			<view class="choice-btn">
				<view class="left"><text class="iconfont icon-yunshu"></text><text class="tip">起运港</text></view>
				<view class="right" @click="openInputSerch('portDeparture')">
					<text class="gk" v-if="fromData.portDeparture">{{fromData.portDeparture }}</text>
					<text class="gk"  v-else>请选择起运港</text>
					<text class="icon iconfont icon-daoda"></text>
				</view>
			</view>

			<view class="choice-btn">
				<view class="left"><text class="iconfont icon-yunshu"></text><text class="tip">目的港</text></view>
				<view class="right"  @click="openInputSerch('portArrival')">
					<text class="gk" v-if="fromData.portArrival">{{fromData.portArrival }}</text>
					<text class="gk"  v-else>请选择目的港</text>
					<text class="icon iconfont icon-daoda"></text>
				</view>
			</view>

			<view class="choice-btn"  @click="openInputSerch('boxType')">
				<view class="left"><text class="iconfont icon-a-jizhuangxiang1"></text><text class="tip">箱型</text></view>
				<view class="right">
					<text class="gk" v-if="fromData.boxType">{{fromData.boxType }}</text>
					<text class="gk"  v-else>请选择箱型</text>
					<text class="icon iconfont icon-daoda"></text>
				</view>
			</view>
			
			<view class="choice-btn"  @click="openInputSerch('webCode')">
				<view class="left"><text class="iconfont icon-a-jizhuangxiang1"></text><text class="tip">船公司</text></view>
				<view class="right">
					<text class="gk" v-if="fromData.webCode">{{fromData.webCodeName }}</text>
					<text class="gk"  v-else>请选择船公司</text>
					<text class="icon iconfont icon-daoda"></text>
				</view>
			</view>

			<view class="choice-btn">
				<view class="left"><text class="iconfont icon-shijian"></text><text class="tip">开始时间</text></view>
				<view class="right">
					<uni-datetime-picker type="date" :clear-icon="false" v-model="fromData.startTime"
						@maskClick="startTimeClick" :start="Date.now()" />
				</view>
			</view>

			<view class="choice-btn">
				<view class="left"><text class="iconfont icon-shijian"></text><text class="tip">结束时间</text></view>
				<view class="right">
					<uni-datetime-picker type="date" :clear-icon="false" v-model="fromData.endTime"
						@maskClick="endTimeClick" :start="Date.now()" />
				</view>
			</view>

			<view class="button-box">
				<button class="enter" @click="goQuery">查询</button>
				<button class="reset" v-show="hasFromData" @click="resetFrom">重置</button>
			</view>
			
		</view>
		<!-- <view class="query-history">
			<view class="history-tit">
				<text class="left">历史记录</text>
			</view>
			<view class="history-list">
				<view class="history-view">
					<view class="setOut">
						<text class="tip">出发地</text>
						<text class="top">{{fromData.portDeparture}}</text>
					</view>
					<view class="icon iconfont icon-daoda"></view>
					<view class="arrive">
						<text class="tip">目的地</text>
						<text class="top">{{fromData.portArrival}}</text>
					</view>
					
					<text class="icon-tab left"></text>
					<text class="icon-tab right"></text>
					
					<text class="icon-tab top-left"></text>
					<text class="icon-tab top-right"></text>
				</view>
				
				<view class="history-view">
					<view class="setOut">
						<text class="tip">出发地</text>
						<text class="top">{{fromData.portDeparture}}</text>
					</view>
					<view class="icon iconfont icon-daoda"></view>
					<view class="arrive">
						<text class="tip">目的地</text>
						<text class="top">{{fromData.portArrival}}</text>
					</view>
					
					<text class="icon-tab left"></text>
					<text class="icon-tab right"></text>
				</view>
				
				<view class="history-view">
					<view class="setOut">
						<text class="tip">出发地</text>
						<text class="top">{{fromData.portDeparture}}</text>
					</view>
					<view class="icon iconfont icon-daoda"></view>
					<view class="arrive">
						<text class="tip">目的地</text>
						<text class="top">{{fromData.portArrival}}</text>
					</view>
					
					<text class="icon-tab left"></text>
					<text class="icon-tab right"></text>
				</view>
			</view>
			
		</view>
		 -->
		<inputSearch 
		ref="inputView"
		v-if="inputSearchShow" 
		:inputData="inputSearchData"
		@change="getInputChange"
		@submit="getInputRes"
		@cancel="cancelInput"
		/>
		
	</view>
</template>

<script>
	import uniDatetimePicker from '@/uni_modules/uni-datetime-picker/components/uni-datetime-picker/uni-datetime-picker.vue'
	import inputSearch from '@/components/inputSearch/inputSearch.vue'
	import {
		realGk,
		realBox,
	} from '@/common/js/api/manifest/cabinQuery.js'
	export default {
		components: {
			uniDatetimePicker,
			inputSearch
		},
		data() {
			return {
				fromData: {
					portDeparture: 'QINGDAO',
					portDepartureCode: 'CNTAO',
					portArrival: '',
					portArrivalCode: '',
					boxType: '',
					webCode: '',
					webCodeName: '',
					// portArrival: 'GDANSK, POLAND',
					// portArrivalCode: 'PLGDN',
					// boxType: '22G1',
					startTime: '',
					endTime: '',
				},
				hasFromData: true,
				inputSearchShow: false,
				inputSearchData:{
					placeholder: '',
					dataList: [],
					showName: '',
					type: '',
					history: null,
				},
				inputSearchRes: {},
				webCodeData:[
						{
							name: '马士基',
							code: 'MSK',
							image: '../../../static/image/logo/msk.png',
							list: [],
							status: 'loading',
						},
						{
							name: 'MCC',
							code: 'MCC',
							image: '../../../static/image/logo/MCC.png',
							list: [],
							status: 'loading',
						},
						{
							name: '法国达飞',
							code: 'CMA',
							image: '../../../static/image/logo/cma.png',
							list: [],
							status: 'loading',
						},
						{
							name: '中远',
							code: 'COSCO',
							image: '../../../static/image/logo/cosco.png',
							list: [],
							status: 'loading',
						},
						{
							name: 'OOCL',
							code: 'OOCL',
							image: '../../../static/image/logo/oocl.png',
							list: [],
							status: 'loading',
						}
					],
			}
		},
		watch: {
			fromData: {
				handler(newValue, oldValue) {
					let hasData = false
					for (let key in newValue) {
						if (newValue[key] != '') {
							hasData = true;
						}
					}
					this.hasFromData = hasData;
				},
				deep: true,
				immediate: true
			}
		},

		methods: {
			departureClick(e) {
				console.log(e);
				this.fromData.portDeparture = e.text;
			},
			arrivalClick(e) {
				console.log(e);
				this.fromData.portArrival = e.text;
			},
			startTimeClick(e) {
				console.log('startTimeClick事件:', e);
			},
			endTimeClick(e) {
				console.log('endTimeClick事件:', e);
			},
			goQuery() {
				let res = '';
				Object.keys(this.fromData).map((val, index) => {
					if (this.fromData[val] == '' && val!='endTime') {
						res = val
						console.log(val, this.fromData[val] == '')
					}
				})
				switch (res) {
					// case 'endTime':
					// 	this.$util.Tips({
					// 		title: '请填写结束时间'
					// 	});
					// 	return false;
					// 	break;
					case 'startTime':
						this.$util.Tips({
							title: '请填写开始时间'
						});
						return false;
						break;
					case 'boxType':
						this.$util.Tips({
							title: '请填写箱型'
						});
						return false;
						break;
					case 'portArrival':
						this.$util.Tips({
							title: '请填写目的港'
						});
						return false;
						break;
					case 'portDeparture':
						this.$util.Tips({
							title: '请填写起运港'
						});
						return false;
						break;
				}
				uni.navigateTo({
					url: '/pages/manifest/cabinHistory/cabinHistory?data='+JSON.stringify(this.fromData)
				})
			},
			resetFrom() {
				this.fromData =  {
					portDeparture: '',
					portDepartureCode: '',
					portArrival: '',
					portArrivalCode: '',
					boxType: '',
					startTime: '',
					endTime: '',
				}
			},
			openInputSerch(type){
				this.inputSearchShow = true;
				if(type == 'portDeparture'){
					let data = {
						placeholder: '请输入起运港',
						dataList: [],
						showName: 'EnName',
						type: 'portDeparture',
						history: this.fromData.portDeparture ? {
							EnName: this.fromData.portDeparture,
							code: this.fromData.portDepartureCode,
						} : null,
					}
					this.$set(this, 'inputSearchData' , data)
				}else if(type == 'portArrival'){
					let data = {
						placeholder: '请输入目的港',
						dataList: [],
						showName: 'EnName',
						type: 'portArrival',
						history: this.fromData.portArrival ? {
							EnName: this.fromData.portArrival,
							code: this.fromData.portArrivalCode,
						} : null,
					}
					this.$set(this, 'inputSearchData' , data)
				}else if(type == 'boxType'){
					let data = {
						placeholder: '请输入箱型',
						dataList: [],
						showName: 'Code',
						type: 'boxType',
						history: this.fromData.boxType ? {
							Code: this.fromData.boxType
						} : null,
					}
					this.$set(this, 'inputSearchData' , data)
				}else if(type == 'webCode'){
					let data = {
						placeholder: '请输入船公司',
						dataList: [],
						showName: 'name',
						type: 'webCode',
						history: this.fromData.webCode ? {
							name: this.fromData.webCodeName,
							code: this.fromData.webCode,
						} : null,
					}
					this.$set(this, 'inputSearchData' , data)
					this.$set(this.inputSearchData, 'dataList', this.webCodeData);
				}
			},
			
			getInputChange(key){
				if(this.inputSearchData.type == 'portDeparture' || this.inputSearchData.type == 'portArrival'){
					realGk({
						name: key,
						port_type: this.inputSearchData.type == 'portDeparture' ? 'pol' : 'pod'
					}).then(res =>{
						if(res.code == 200){
							this.$set(this.inputSearchData, 'dataList', []);
							this.$set(this.inputSearchData, 'dataList', res.data);
							this.$refs.inputView.$data.inLoading = false;
							this.$forceUpdate()
						}else{
							this.$set(this.inputSearchData, 'dataList', []);
							this.$refs.inputView.$data.inLoading = false;
						}
					}).catch(err =>{
						console.log('报错信息==', err)
						this.$set(this.inputSearchData, 'dataList', []);
						this.$refs.inputView.$data.inLoading = false;
					})
				}else if(this.inputSearchData.type == 'boxType'){
					realBox({
						name: key,
					}).then(res =>{
						if(res.code == 200){
							this.$set(this.inputSearchData, 'dataList', res.data);
							this.$refs.inputView.$data.inLoading = false;
							this.$forceUpdate()
						}else{
							this.$set(this.inputSearchData, 'dataList', []);
							this.$refs.inputView.$data.inLoading = false;
						}
					}).catch(err =>{
						console.log('报错信息==', err)
						this.$set(this.inputSearchData, 'dataList', []);
						this.$refs.inputView.$data.inLoading = false;
					})
				}else if(this.inputSearchData.type == 'webCode'){
					let newData = [];
					this.webCodeData.map((item,index)=>{
						if(item.name.includes(key)){
							newData.push(item)
						}
					})
					console.log(newData)
					if(newData.length > 0){
						setTimeout(()=>{
							this.$set(this.inputSearchData, 'dataList', newData);
							this.$refs.inputView.$data.inLoading = false;
							this.$forceUpdate()
						},300)
					}else{
						setTimeout(()=>{
							this.$set(this.inputSearchData, 'dataList', []);
							this.$refs.inputView.$data.inLoading = false;
							this.$forceUpdate()
						},300)
					}
				}
			},
			
			getInputRes(data){
				console.log(data);
				if(this.inputSearchData.type == 'portDeparture'){
					this.fromData.portDeparture = data.EnName;
					this.fromData.portDepartureCode = data.code;
				}else if(this.inputSearchData.type == 'portArrival'){
					this.fromData.portArrival = data.EnName;
					this.fromData.portArrivalCode  = data.code;
				}else if(this.inputSearchData.type == 'boxType'){
					this.fromData.boxType = data.Code;
				}else if(this.inputSearchData.type == 'webCode'){
					this.fromData.webCode = data.code;
					this.fromData.webCodeName  = data.name;
				}
				this.inputSearchShow = false;
				this.inputSearchData = {
					placeholder: '',
					history: data,
					dataList: [],
					showName: '',
					type: '',
				}
			},
			
			cancelInput(){
				this.inputSearchShow = false;
				this.inputSearchData = {
					placeholder: '',
					history: null,
					dataList: [],
					showName: '',
					type: '',
				}
			}
			
		}
	}
</script>

<style lang="less">
	.cabin-query {
		background: #f4f4f4;
		height: 100vh;
		padding: 20rpx;

		.query-box {
			background: #fff;
			padding: 0 30rpx 30rpx 30rpx;
			box-sizing: border-box;
			border-radius: 16rpx;
			box-shadow: 0 0 18rpx #eee;

			.choice-btn {
				height: 100rpx;
				display: flex;
				border-bottom: 1rpx solid #eee;

				.left {
					width: 220rpx;
					font-size: 28rpx;
					font-weight: 600;
					color: #666;
					height: 100rpx;
					line-height: 100rpx;

					.iconfont {
						font-size: 44rpx;
						margin-right: 12rpx;
						margin-top: 2rpx;
						color: #86c7ff;
						// color: #999;
						font-weight: 500;
						display: inline-block;
						vertical-align: top;
					}
					
					.tip{
						display: inline-block;
						vertical-align: top;
					}

					.icon-shijian {
						font-size: 36rpx;
					}
				}

				.right {
					flex: 1;
					padding-top: 15rpx;
					font-size: 28rpx;
					color: #666;
					line-height: 80rpx;
					display: flex;
					overflow: hidden;
					.gk{
						flex: 1;
						overflow: hidden;
						text-overflow: ellipsis;
						white-space: nowrap;
					}
					.icon{
						// float: right;
						font-size: 28rpx;
						color: #000;
						margin-right: 20rpx;
						width: 50rpx;
						text-align: right;
					}
					.box-type {
						height: 75rpx;
						text-align: left;
						line-height: 75rpx;
						display: block;
						padding-left: 20rpx;
					}
				}
			}

			.button-box {
				margin-top: 40rpx;
				height: 100rpx;
				display: flex;
				padding: 0 40rpx;

				button {
					height: 80rpx;
					line-height: 80rpx;
				}

				.enter {
					flex: 1;
					background: #ff8213;
					color: #fff;
					border-radius: 80rpx;
					border: none;
					font-size: 30rpx;
				}

				.reset {
					width: 200rpx;
					text-align: center;
					color: #ff8213;
					margin-left: 20rpx;
					background: #fff;
					border: 2rpx solid #ff8213;
					padding: 0 30rpx;
					border-radius: 80rpx;
					font-size: 28rpx;

					.iconfont {
						margin-right: 8rpx;
					}
				}
			}
		}
	
		.query-history{
			padding-top: 40rpx;
			.history-tit{
				height: 80rpx;
				line-height: 80rpx;
				padding: 0 20rpx;
				color: #333;
				font-size: 28rpx;
				font-weight: 600;
				// background:#fff;
			}
			.history-list{
				box-shadow: 0 0 10rpx #ccc;
			}
			
			.history-view{
				width:100%;
				padding:10rpx 50rpx;
				background:#fff;
				display: flex;
				// height: 100rpx;
				box-sizing: border-box;
				border-radius: 10rpx;
				// box-shadow: 0 0 10rpx #eee;
				position: relative;
				border-bottom: 1px dashed #eee;
				&:nth-last-of-type(1){
					border-bottom: none;
				}
				.setOut,.arrive{
					// width: 250rpx;
					flex: 1;
					padding: 0 20rpx;
					// height: 100rpx;
					text-align: center;
					padding: 10rpx 0;
					.top{
						line-height: 50rpx;
						color: #333;
						font-weight: 600;
						display: block;
					}
					.tip{
						line-height: 40rpx;
						color: #999;
						font-weight: 500;
						font-size: 24rpx;
						display: block;
					}
				}
				.icon{
					font-size: 50rpx;
					color: #2c96fb;
					width: 100rpx;
					line-height: 150rpx;
					height: 150rpx;
					display: inline-block;
					text-align: center;
				}
				.screen{
					width: 100rpx;
					line-height: 100rpx;
					text-align: center;
					font-size: 32rpx;
					color: #999;
				}
			
				.icon-tab{
					width: 40rpx;
					height: 40rpx;
					background: #f4f4f4;
					position: absolute;
					border-radius: 50%;
					position: absolute;
					bottom: -20rpx;
					z-index: 999;
					// box-shadow: inset 0px 0px 10px 1px #f4f4f4;
					&.left{
						left:-20rpx;
					}
					&.right{
						right:-20rpx;
					}
				}
				.top-left{
					width: 40rpx;
					height: 40rpx;
					background: #f4f4f4;
					position: absolute;
					border-radius: 50%;
					position: absolute;
					top: -20rpx;
					z-index: 999;
					left:-20rpx;
				}
				.top-right{
					width: 40rpx;
					height: 40rpx;
					background: #f4f4f4;
					position: absolute;
					border-radius: 50%;
					position: absolute;
					top: -20rpx;
					z-index: 999;
					right:-20rpx;
				}
			}
			
		}
	}
</style>