pad-app/pages/receipt/index.vue

<template>
	<view class="app">
		<head-info :navIndex="5"></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="importExportList" :isJSON="true" keyName="name"
							placeholder="请选择进出口" v-model="importExport" @select="importExportSelect"></superwei-combox>
						</uni-easyinput>
						<superwei-combox class="input" :candidates="shipList" :isJSON="true" keyName="vvyShip"
							placeholder="请选择船名/航次" v-model="vvyShip" @select="shipSelect"></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.spmName}}
										</view>
									</view>
									<view class="status">
										<text v-if="item.handoverStatus==0" class="nStarted">● 未完成</text>
										<text v-if="item.handoverStatus==1" class="green">● 进行中 </text>
										<text v-if="item.handoverStatus==2" class="complete">● 已完成</text>
									</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.importExportFlagName}}</text>
									</view>
									<view class="nitem">
										完工时间: <text>{{item.actualFinishTimeFmt}}</text>
									</view>
								</view>
							</view>
						</view>
					</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>
	export default {
		data() {
			return {
				// 登录信息
				loginObj: {},
				// 港区信息
				portObj: {},
				// 进出口
				importExport: "出口",
				importExportList: [{
						value: "E",
						name: "出口"
					},
					{
						value: "I",
						name: "进口"
					}
				],
				// 内外贸
				tradeName: "外贸",
				tradeList: [{
						value: "1",
						name: "外贸"
					},
					{
						value: "2",
						name: "内贸"
					}
				],
				// 船名航次
				vvyShip: "",
				vvyId: "",
				shipId: "",
				shipName: '',
				shipList: [],

				itemList: [],

				// 分页
				total: 0,
				pageSize: 6,
				current: 1,
			}
		},
		onBackPress(options) {
			// 触发返回就会调用此方法，这里实现的是禁用物理返回，顶部导航栏的自定义返回 uni.navigateBack 仍可使用
			if (options.from == 'backbutton') {
				return true;
			} else if (options.from == 'navigateBack') {
				return false;
			}
		},
		mounted() {
			this.loginObj = uni.getStorageSync('loginObj')
			this.portObj = uni.getStorageSync('portObj')
			this.getShip()
			this.initData()
		},
		methods: {
			// 切换贸易类型
			tradeSelect(e) {
				this.tradeName = e.name
				this.shipId = ""
				this.shipName = ""
				this.vvyId = ""
				this.vvyShip = ""
				this.getShip()
			},
			// 切换进出口
			importExportSelect(e) {
				this.importExport = 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
			},
			// 获取船舶
			getShip() {
				if (this.tradeName == '外贸') {
					this.tradeType = "W"
				} else {
					this.tradeType = "N"
				}
				let ieType = ""
				if (this.importExport == '出口') {
					ieType = "E"
				} else {
					ieType = "I"
				}
				let key = ""
				let spmId = ""
				uni.request({
					url: `${this.$local}/api/shipInstructions/queryByKey?ieType=${ieType}&key=${ieType}&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.initData()
			},
			// 获取船只
			initData() {
				// 一级页面   /shp/iEDeliverySlipController/page GET
				// 二级页面 	/shp/iEDeliverySlipController/planPage?vvyId=2455a195e549db737fa4431f91995e46&importExportFlag=E  航次 进出口标识 GET
				// 二级页面质损	/shp/iEDeliverySlipController/iEDeliverySlipPlanDamage splId 进出口标识 POST
				// 提交签名 /vesselVoyages/vvyId 根据ID更新 可修改总指令装船要求 	PUT
				let importExportFlag = ""
				if (this.importExport == '出口') {
					importExportFlag = "E"
				} else {
					importExportFlag = "I"
				}
				let tradType = ""
				if (this.tradeName == '外贸') {
					tradType = "W"
				} else {
					tradType = "N"
				}
				uni.request({
					url: `${this.$local}/shp/iEDeliverySlipController/page?pamId=${this.portObj.portId}&vvyId=${this.vvyId}&size=${this.pageSize}&current=${this.current}&importExportFlag=${importExportFlag}&tradType=${tradType}`,
					header: {
						'Content-Type': 'application/json', //自定义请求头信息
						'Authorization': `Bearer ${this.loginObj.access_token}`
					},
					method: 'GET', //请求方式，必须为大写
					success: (res) => {
						this.total = res.data.data.total
						this.itemList = res.data.data.records
					}
				})
			},
			// 点击分页
			changePage(e) {
				this.current = e.current;
				this.initData()
			},
			// 点击进入详情
			toDetails(item) {
				let obj = {
					vvyId: item.vvyId,
				}
				const params = encodeURIComponent(JSON.stringify(obj));
				uni.navigateTo({
					url: '/pages/receipt/details?params=' + params
				})
			},
		}
	}
</script>

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

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

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

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

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

		}

		.itemList {
			width: 100%;
			display: flex;
			justify-content: flex-start;
			flex-wrap: wrap;
			position: relative;
			margin-top: 15px;
			gap: 16px;

			/deep/.o-empty {
				width: 100%;
				margin-top: 15px;
			}

			.item {
				width: 32.2%;
				background-color: #fff;
				border-radius: 8px;
				padding: 10px 20px;
				position: relative;

				.title {
					display: flex;
					padding: 10px 0;
					justify-content: space-between;

					.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: 14px;
					padding: 10px 0;
					font-size: 16px;

					.nitem {
						width: 46%;

						.text {
							color: #929292;
						}
					}
				}

				.status {
					margin-top: 5px;
					font-size: 16px;

					.nStarted {
						color: #bbb;
					}

					.complete {
						color: #0067CF;
					}
				}
			}

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

		.pageBox {
			margin-top: 20px;
		}
	}
</style>