pad-app/pages/index/index.vue

<template>
	<view class="app">
		<head-info></head-info>
		<view class="container">
			<side-bar path='1'></side-bar>
			<view class="content">
				<view class="form">
					<view class="end">
						<superwei-combox class="input" :candidates="portList" :isJSON="true" keyName="pamName"
							placeholder="港区" v-model="portName" @input="portInput"
							@select="portSelect"></superwei-combox>
						<superwei-combox class="input" :candidates="shipList" :isJSON="true" keyName="vvyName"
							placeholder="船名/航次" v-model="shipName" @input="shipInput"
							@select="shipSelect"></superwei-combox>
						</uni-easyinput>
						<button class="btn" @click="onSearch">搜索</button>
					</view>
				</view>
				<view class="itemList">
					<view v-for="(item, index) in ltemList" :key="index" class="item" @click="toDetails(item.spmId)">
						<view class="title">
							<view class="name">
								海王星领袖
							</view>
							<view class="status">
								<text v-if="item.vvyStatus==2" class="green">● 作业中</text>
								<text v-else>● 已完成</text>
							</view>
						</view>
						<view class="table">
							<view class="row">
								<view class="nitem">
									航次: <text>735546</text>
								</view>
								<view class="nitem">
									贸易类型: <text>{{item.tradeType}}</text>
								</view>
							</view>
							<view class="row">
								<view class="nitem">
									进出口: <text>{{item.importExportFlag}}</text>
								</view>
								<view class="nitem">
									泊位: <text>{{item.actualBerthage}}</text>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>

</template>

<script>
	import SideBar from '@/components/sider-bar/slider-bar';
	import HeadInfo from '@/components/head-info/head-info';
	import {
		mapActions
	} from 'vuex'
	let timers = null;
	export default {
		data() {
			return {
				ltemList: [],
				portName: '',
				portItem: {},
				portList: [],
				shipName: '',
				shipItem: {},
				shipList: []
			}
		},
		onLoad() {
			// this.loadList()
		},
		components: {
			SideBar,
			HeadInfo
		},
		methods: {
			...mapActions([
				'majax',
				'najax'
			]),
			portInput(e) {
				clearTimeout(timers)
				timers = setTimeout(() => {
					this.getPort(e)
				}, 500)
			},
			portSelect(e) {
				this.portItem = e
				this.shipName = ''
				this.shipItem = {}
			},
			// 获取港口
			getPort(keyWords) {
				let data = {}
				data.pamName = keyWords
				this.majax({
					url: this.$local + "/api/miniapp/portAreaManage/getPortArea",
					params: data,
					method: 'GET'
				}).then(res => {
					this.portList = res.data
				})
				// 模拟
				this.portList = [{
					potId: 1123,
					pamName: '测试港口'
				}]
			},
			shipInput(e) {
				clearTimeout(timers)
				timers = setTimeout(() => {
					this.getShip(e)
				}, 500)
			},
			shipSelect(e) {
				this.shipItem = e
			},
			// 获取船舶
			getShip(keyWords) {
				console.log(this.portName);
				let data = {}
				data.ieType = 'I' // I进口 E出口 暂无法区分
				data.key = keyWords
				data.pamId = this.portItem.pamId
				this.majax({
					url: this.$local + "/api/shipInstructions/queryByKey",
					params: data,
					method: 'GET'
				}).then(res => {
					this.shipList = res.data
				})
				// 模拟
				this.shipList = [{
					vvyId: 1123,
					vvyName: '测试航次'
				}]
			},
			onSearch() {
				let data = {}
				data.tradeType = '外贸' // I进口 E出口 暂无法区分
				data.vvyId = this.shipItem.vvyId
				data.pamId = this.portItem.pamId
				this.majax({
					url: this.$local + "/api/shipInstructions/queryStowageVoyages",
					params: data,
					method: 'GET'
				}).then(res => {
					this.ltemList = res.data.records
				})
				// 模拟
				this.ltemList = [{
					actualBerthage: "一号位置",
					actualBerthageDesc: "",
					importExportFlag: "出口",
					spmId: "spm1112",
					spmIdDesc: "331122",
					tradeType: "内贸",
					vvyId: "11231",
					vvyName: "海王星领袖",
					vvyStatus: "2",
					vvyStatusName: "作业中",
				}]
			},

			toDetails(id) {
				uni.navigateTo({
					url: '/pages/index/instruct?id=' + id
				})
			},
		}
	};
</script>

<style>
	.container {
		display: flex;
	}

	.content {
		flex: 1;
		padding: 20px;

		.form {
			display: flex;
			justify-content: flex-end;

			.end {
				width: 500px;
				display: flex;
				justify-content: space-between;

				.input {
					width: 200px;
					height: 35px;
					line-height: 35px;
					padding-left: 10px;
					margin-left: 15px;
				}

				.btn {
					height: 35px;
					line-height: 35px;
					margin-left: 20px;
				}
			}

		}

		.itemList {
			width: 100%;
			display: flex;
			justify-content: flex-start;
			flex-wrap: wrap;

			.item {
				width: 32%;
				margin-top: 15px;
				margin-right: 2%;
				height: 160px;
				border: 1px solid #c9cacb;
				padding: 22px 15px;

				.title {
					display: flex;
					justify-content: space-between;
					font-size: 21px;
					margin-bottom: 20px;
					font-weight: 700;
				}

				.status {
					font-size: 16px;
					font-weight: 400;
				}


				.row {
					display: flex;
					justify-content: space-between;
					font-size: 18px;
					margin: 10px 0;

					.nitem {
						width: 46%;

						text {
							color: #929292;
						}
					}

				}
			}

			.item:nth-child(3n) {
				margin-right: 0;
			}
		}
	}
</style>