pad-app/pages/index/index.vue

<template>
	<view class="app">
		<head-info :navIndex="0"></head-info>
		<view class="container">
			<view class="content">
				<view class="form">
					<view class="end">
						<superwei-combox class="input" :candidates="tradeList" :isJSON="true" keyName="name"
							placeholder="请选择贸易类型" v-model="tradeName" @select="tradeSelect"></superwei-combox>
						</uni-easyinput>
						<superwei-combox class="input" :candidates="shipList" :isJSON="true" keyName="vvyShip"
							placeholder="请选择船名/航次" v-model="vvyShip" @select="shipSelect"
							@input="shipInput"></superwei-combox>
						</uni-easyinput>
						<button class="btn" @click="onSearch">搜索</button>
					</view>
				</view>
				<view class="itemList">
					<template v-if="itemList.length > 0">
						<view v-for="(item, index) in itemList" :key="index" class="item">
							<view @click="toDetails(item)">
								<view class="title">
									<view class="titleft">
										<image src="../../static/images/ship.png" mode="widthFix"></image>
										<view class="name">
											{{item.spmIdDesc}}
										</view>
									</view>
									<view class="status">
										<p v-if="item.vvyStatus==0" class="dfs">{{item.vvyStatusName}}</p>
										<p v-if="item.vvyStatus==1" class="zyz">{{item.vvyStatusName}}</p>
										<p v-if="item.vvyStatus==2" class="ywc">{{item.vvyStatusName}}</p>
									</view>
								</view>
								<view class="row">
									<view class="nitem">
										航次: <text>{{item.vvyName}}</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.actualBerthageDesc}}</text>
									</view>
								</view>
							</view>
						</view>
						<template v-if="isMore">
							<uni-load-more iconType="circle" status="loading" style="width: 100%;" />
						</template>
					</template>
					<o-empty v-else height="70vh" bg="#f5f6fa" />
				</view>
				<!-- <view class="pageBox" v-if="itemList.length > 0">
					<uni-pagination :show-icon="true" :total="total" :pageSize="pageSize" :current="current"
						@change="changePage" />
				</view> -->
			</view>
		</view>
	</view>
</template>

<script>
	import HeadInfo from '@/components/head-info/head-info';
	import api from "../../common/api.js"
	export default {
		data() {
			return {
				loginObj: {},
				itemList: [],
				tradeName: "外贸",
				tradeType: "W",
				tradeItem: {},
				tradeList: [{
						value: "1",
						name: "外贸"
					},
					{
						value: "2",
						name: "内贸"
					}
				],
				vvyShip: "",
				vvyId: "",
				shipId: "",
				shipName: '',
				shipValue: "",
				shipList: [],

				// 分页
				total: 0,
				pageSize: 12,
				current: 1,

				// 港区信息
				portObj: {},

				isMore: false,
			}
		},
		components: {
			HeadInfo,
		},
		onReachBottom() {
			this.current++
			this.initData()
			this.isMore = true
		},
		onLoad() {
			this.portObj = uni.getStorageSync('portObj')
			this.loginObj = uni.getStorageSync('loginObj')
			this.getShip()
		},
		onBackPress(options) {
			// 触发返回就会调用此方法，这里实现的是禁用物理返回，顶部导航栏的自定义返回 uni.navigateBack 仍可使用
			if (options.from == 'backbutton') {
				return true;
			} else if (options.from == 'navigateBack') {
				return false;
			}
		},
		mounted() {
			this.initData()
		},
		methods: {
			// 切换贸易类型
			tradeSelect(e) {
				this.tradeItem = e
				this.tradeName = e.name
				this.shipId = ""
				this.shipName = ""
				this.vvyId = ""
				this.vvyShip = ""
				this.getShip()
			},
			// 选择船
			shipSelect(e) {
				this.shipId = e.spmId
				this.shipName = e.vslCnname
				this.vvyId = e.vvyId
				this.vvyShip = e.vvyShip
				this.getShip()
			},
			// 选择船输入框
			shipInput(e) {
				this.shipValue = e
				if (e == "") {
					this.vvyId = ""
					this.vvyShip = ""
					this.shipId = ""
					this.shipName = ""
				}
				this.getShip()
			},
			// 获取船舶
			getShip() {
				if (this.tradeName == '外贸') {
					this.tradeType = "W"
				} else {
					this.tradeType = "N"
				}
				let ieType = "E"
				let key = ""
				let spmId = ""
				uni.request({
					url: `${this.$local}/api/shipInstructions/queryByKey?ieType=${ieType}&key=${this.shipValue}&pamId=${this.portObj.portId}&spmId=${spmId}&tradeType=${this.tradeType}`,
					header: {
						'Content-Type': 'application/json', //自定义请求头信息
						'Authorization': `Bearer ${this.loginObj.access_token}`
					},
					method: 'GET', //请求方式，必须为大写
					success: (res) => {
						if (res.data.status == "200") {
							this.shipList = res.data.data
							this.shipList.forEach(v => {
								let vvyShip = `${v.vslCnname}/${v.vvyName}`
								this.$set(v, "vvyShip", vvyShip)
							})
						}
					}
				})
			},
			// 点击搜索
			onSearch() {
				this.current = 1
				this.itemList = []
				this.initData()
			},
			initData() {
				let url = ""
				if (this.tradeName == '内贸') {
					url =
						`${this.$local}/api/domestic/load/command/queryLoadVoyages?pamId=${this.portObj.portId}&vvyId=${this.vvyId}&size=${this.pageSize}&current=${this.current}`
				} else if (this.tradeName == '外贸') {
					url =
						`${this.$local}/api/shipInstructions/queryStowageVoyages?pamId=${this.portObj.portId}&vvyId=${this.vvyId}&tradeType=${this.tradeType}&size=${this.pageSize}&current=${this.current}`
				}
				uni.request({
					url: url,
					header: {
						'Content-Type': 'application/json', //自定义请求头信息
						'Authorization': `Bearer ${this.loginObj.access_token}`
					},
					method: 'GET', //请求方式，必须为大写
					success: (res) => {
						this.isMore = false
						this.total = res.data.data.total
						this.itemList.push(...res.data.data.records)
					}
				})
			},
			// 点击分页
			changePage(e) {
				this.current = e.current;
				this.initData()
			},
			toDetails(item) {
				let obj = {
					shipInfo: item,
				}
				const params = encodeURIComponent(JSON.stringify(obj));
				if (this.tradeName == '外贸') {
					uni.navigateTo({
						url: '/pages/index/instruct?params=' + params
					})
				} else {
					uni.navigateTo({
						url: '/pages/index/domesticTrade?params=' + params
					})
				}
			},
		}
	};
</script>

<style lang="less" scoped>
	.content {
		padding: 20px;
		min-height: calc(100vh - 68px - 40px);
		margin-top: 66px;
		margin-bottom: 20px;

		.form {
			width: 100%;
			height: 50px;
			background: #f5f6fa;
			display: flex;
			position: fixed;
			top: 66px;
			right: 0;
			z-index: 995;
			padding-left: 20px;

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

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

				.btn {
					height: 35px;
					line-height: 35px;
					margin-left: 0;
					font-size: 16px;
					color: #fff;
					background-color: #0067CF;
					margin-right: 10px;
					margin-top: 10px;
				}
			}

		}

		.itemList {
			width: 100%;
			display: flex;
			// justify-content: space-between;
			flex-wrap: wrap;
			position: relative;
			margin-top: 40px;
			padding-bottom: 50px;

			/deep/.o-empty {
				width: 100%;
			}

			.item {
				width: calc(33.3% - 16px);
				background-color: #fff;
				border-radius: 8px;
				padding: 16px;
				position: relative;
				margin-bottom: 16px;
				margin-right: 16px;

				.title {
					display: flex;
					justify-content: space-between;
					margin-bottom: 24px;

					.titleft {
						display: flex;
					}

					image {
						width: 32px;
						height: 32px;
						margin-right: 12px;
					}

					.name {
						margin-top: 5px;
						font-size: 16px;
						color: #23262E;
						font-weight: bold;
					}
				}

				.row {
					display: flex;
					justify-content: space-between;
					font-size: 16px;
					margin-bottom: 12px;

					.nitem {
						width: 49%;
						overflow: hidden;
						text-overflow: ellipsis;
						white-space: nowrap;
						color: #999;

						text {
							color: #23262e;
						}
					}
				}

				.status {
					font-size: 16px;
					position: absolute;
					right: 0;
					top: 23px;

					p {
						padding: 5px;
						border-radius: 13px 0 0 13px;
					}

					.dfs {
						color: #0067CF;
						background: #F1F8FF;
					}

					.zyz {
						color: #04B578;
						background: #E8FFF7;
					}

					.ywc {
						color: #666666;
						background: #F7F7F7;
					}
				}
			}

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

		.pageBox {
			width: 100%;
			height: 50px;
			background-color: #fff;
			margin-top: 20px;
			position: fixed;
			bottom: 0;
			left: 0;
			display: flex;
			flex-direction: column;
			justify-content: center;
		}
	}
</style>