pad-app/pages/index/instructDetails.vue

<template>
	<view class="details">
		<head-view :title="title"></head-view>
		<view class="content contentFixed">
			<view class="liBox">
				<view class="title">
					<image src="../../static/images/carInfo.png" mode="widthFix"></image>
					<text>基本信息</text>
				</view>
				<view class="ul" v-if="objInfo.tradeName == 'W'">
					<view class="li">
						<p>船名：</p>
						<text>{{basicInfo.vslCnName}}</text>
					</view>
					<view class="li">
						<p>航次：</p>
						<text>{{basicInfo.vvyName}}</text>
					</view>
					<view class="li">
						<p>港口：</p>
						<text>{{basicInfo.potName}}</text>
					</view>
					<view class="li">
						<p>货代：</p>
						<text>{{basicInfo.goodsAgent}}</text>
					</view>
					<view class="li">
						<p>联系人：</p>
						<text>{{basicInfo.contact}}</text>
					</view>
					<view class="li">
						<p>联系方式：</p>
						<text>{{basicInfo.contactNumber}}</text>
					</view>
					<view class="li">
						<p>泊位：</p>
						<text>{{basicInfo.planBerthageName}}</text>
					</view>
					<view class="li">
						<p>备注：</p>
						<text>{{basicInfo.remark}}</text>
					</view>
				</view>
				<view class="ul" v-if="objInfo.tradeName == 'N'">
					<view class="li">
						<p>船名：</p>
						<text>{{objInfo.shipInfo.spmIdDesc}}</text>
					</view>
					<view class="li">
						<p>航次：</p>
						<text>{{objInfo.shipInfo.vvyName}}</text>
					</view>
					<view class="li">
						<p>目的港：</p>
						<text>{{objInfo.jcInfo.destPortDesc}}</text>
					</view>
					<view class="li">
						<p>泊位：</p>
						<text>{{objInfo.shipInfo.actualBerthageDesc}}</text>
					</view>
				</view>
			</view>
			<view class="liBox">
				<view class="title">
					<image src="../../static/images/goodsImg.png" mode="widthFix"></image>
					<text>详细信息</text>
				</view>
				<view class="ul" v-if="objInfo.tradeName == 'W'">
					<view class="li">
						<p>提单号：</p>
						<text>{{detailInfo.mnfBl}}</text>
					</view>
					<view class="li">
						<p>品牌：</p>
						<text>{{detailInfo.brdName}}</text>
					</view>
					<view class="li">
						<p>车辆明细：</p>
						<text>{{detailInfo.bvdName}}</text>
					</view>
					<view class="li">
						<p>车长：</p>
						<text>{{detailInfo.carLength}}</text>
					</view>
					<view class="li">
						<p>车宽：</p>
						<text>{{detailInfo.carWidth}}</text>
					</view>
					<view class="li">
						<p>车高：</p>
						<text>{{detailInfo.carHeight}}</text>
					</view>
					<view class="li">
						<p>体积：</p>
						<text>{{detailInfo.volume}}</text>
					</view>
					<view class="li">
						<p>重量：</p>
						<text>{{detailInfo.weight}}</text>
					</view>
					<view class="li">
						<p>单票数量：</p>
						<text>{{detailInfo.ticketGtpks}}</text>
					</view>
					<view class="li">
						<p>单票重量：</p>
						<text>{{detailInfo.ticketWeight}}</text>
					</view>
					<view class="li">
						<p>单票体积：</p>
						<text>{{detailInfo.ticketVolume}}</text>
					</view>
				</view>
				<view class="ul" v-if="objInfo.tradeName == 'N'">
					<view class="li">
						<p>提单号：</p>
						<text>{{objInfo.xqInfo.mnfBl}}</text>
					</view>
					<view class="li">
						<p>品牌：</p>
						<text>{{objInfo.xqInfo.brdName}}</text>
					</view>
					<view class="li">
						<p>车型：</p>
						<text>{{objInfo.xqInfo.bvmName}}</text>
					</view>
					<view class="li">
						<p>车辆数：</p>
						<text>{{objInfo.xqInfo.carAmount}}</text>
					</view>
				</view>
			</view>
			<view class="liBox">
				<view class="title">
					<image src="../../static/images/goodsImg2.png" mode="widthFix"></image>
					<text>货物明细</text>
				</view>
				<view class="formNr">
					<uni-table stripe emptyText="暂无更多数据">
						<!-- 表头行 -->
						<uni-tr>
							<uni-th width="10">序号</uni-th>
							<uni-th width="22">车架号/条形码</uni-th>
							<uni-th width="15">作业状态</uni-th>
							<uni-th width="40">场位</uni-th>
							<uni-th width="15">货物性质</uni-th>
							<uni-th width="10">操作</uni-th>
						</uni-tr>
						<!-- 表格数据行 -->
						<uni-tr v-for="(item,index) in tableList" :key="index">
							<uni-td>{{index + 1}}</uni-td>
							<uni-td>{{item.vinCode}}</uni-td>
							<uni-td>{{item.workStatus}}</uni-td>
							<uni-td v-if="objInfo.tradeName == 'W'">{{item.yardPosition}}</uni-td>
							<uni-td v-if="objInfo.tradeName == 'N'">{{item.yardPos}}</uni-td>
							<uni-td>{{item.natureFlagName}}</uni-td>
							<uni-td>
								<text class="operate" @click="open(item)">残损</text>
							</uni-td>
						</uni-tr>
					</uni-table>
					<uni-pagination :show-icon="true" :total="total" :pageSize="10" :current="current"
						@change="changePage" />
				</view>
			</view>
			<!-- 弹出层 -->
			<uni-popup ref="popup" :mask-click="false">
				<view class="dialog">
					<view class="dtitle">
						<text>残损信息</text>
						<uni-icons type="closeempty" size="30" @click="close"></uni-icons>
					</view>
					<view class="tableContant">
						<view class="nr">
							<text class="text">品牌:{{rowInfo.brdName}}</text>
							<text class="text" v-if="objInfo.tradeName == 'W'">车型:{{rowInfo.goodsTypeName}}</text>
							<text class="text" v-if="objInfo.tradeName == 'N'">车型:{{rowInfo.bvmName}}</text>
							<text class="text">车架号/条形码:{{rowInfo.vinCode}}</text>
						</view>
						<view class="table" v-for="(item,index) in damagedList" :key="index">
							<view class="title">
								<view>质损发生环节: {{item.qdLinkName}}</view>
								<view class="tag" v-if="item.godStatus != null">{{item.godStatus}}</view>
							</view>
							<view class="row">
								<view class="col">
									质损上报人员: {{item.qdReportPerson}}
								</view>
								<view class="col">
									质损上报时间: {{item.qualityDamageTime}}
								</view>
								<view class="col">
									质损发生位置: {{item.yardPos}}
								</view>
							</view>
							<view class="row">
								<view class="col">
									质损概况: {{item.qualityDamageSituationName}}
								</view>
								<view class="col">
									损坏情况: {{item.damageSituationName}}
								</view>
								<view class="col">
									处置情况: {{item.disposalSituationName}}
								</view>
							</view>
							<view class="imgRow">
								<view class="name">
									质损照片:
								</view>
								<view class="imgList">
									<view class="img" v-for="(item2,index2) in item.damageImageList" :key="index2">
										<image :src="item2" mode="widthFix"></image>
									</view>
								</view>
							</view>
							<view class="imgRow">
								<view class="name">
									车架号照片:
								</view>
								<view class="imgList">
									<view class="img" v-for="(item2,index2) in item.vinCodeImageList" :key="index2">
										<image :src="item2" mode="widthFix"></image>
									</view>
								</view>
							</view>
						</view>
					</view>
				</view>
			</uni-popup>
		</view>
	</view>
</template>

<script>
	import HeadInfo from '@/components/head-info/head-info';
	export default {
		data() {
			return {
				loginObj: {},
				title: "货物详情",
				id: "",

				// 基本信息
				basicInfo: {},

				// 详细信息
				detailInfo: {},

				// 货物明细
				tableList: [],

				// 货物明细当前行信息
				rowInfo: {},

				// 残损信息列表
				damagedList: [],

				// 质损照片
				damageImage: [],

				// 车架号照片
				vinCodeImage: [],

				// 内贸详情数据
				objInfo: {},
				//分页数据
				total:20,
                current:1
			}
		},
		components: {
			HeadInfo
		},
		onLoad(options) {
			this.objInfo = JSON.parse(decodeURIComponent(options.params))
			console.log(this.objInfo)
			this.loginObj = uni.getStorageSync('loginObj')
			this.loadList()
			this.getTableInfo()
		},
		methods: {
			// 获取基础信息和详细信息
			loadList() {
				uni.request({
					url: `${this.$local}/api/shipInstructions/listDetail?spsId=${this.objInfo.id}`,
					header: {
						'Content-Type': 'application/json', //自定义请求头信息
						'Authorization': `Bearer ${this.loginObj.access_token}`
					},
					method: 'GET', //请求方式，必须为大写
					success: (res) => {
						if (res.data.status == 200) {
							this.basicInfo = res.data.data.basicInfo
							this.detailInfo = res.data.data.detailInfo
						}
					}
				})
			},
			// 获取货物明细数据
			getTableInfo() {
				let url = ""
				if (this.objInfo.tradeName == 'W') {
					url = `${this.$local}/api/shipInstructions/goodsDetail/page?spsId=${this.objInfo.id}&size=10&current=${this.current}`
				} else if (this.objInfo.tradeName == 'N') {
					url =
						`${this.$local}/api/domestic/load/command/pageForCargoDetails?splId=${this.objInfo.xqInfo.splId}&dlcId=${this.objInfo.jcInfo.dlcId}`
				}
				uni.request({
					url: url,
					header: {
						'Content-Type': 'application/json', //自定义请求头信息
						'Authorization': `Bearer ${this.loginObj.access_token}`
					},
					method: 'GET', //请求方式，必须为大写
					success: (res) => {
						if (res.data.status == 200) {
							this.total = res.data.data.total
							this.tableList = res.data.data.records
							console.log(this.tableList)
						}
					}
				})
			},
			open(item) {
				console.log(item)
				this.rowInfo = item
				this.$refs.popup.open('center')
				this.getDamaged(item.vinCode)
			},
			// 获取残损信息
			getDamaged(vinCode) {
				uni.request({
					url: `${this.$local}/api/goodsQuality/damage/${vinCode}`,
					header: {
						'Content-Type': 'application/json', //自定义请求头信息
						'Authorization': `Bearer ${this.loginObj.access_token}`
					},
					method: 'GET', //请求方式，必须为大写
					success: (res) => {
						if (res.data.status == 200) {
							this.damagedList = res.data.data
							this.damagedList.forEach((item, index) => {
								item.damageImage.forEach((v, index2) => {
									this.initImg(v, "1", index, index2)
								})
								item.vinCodeImage.forEach((v, index2) => {
									this.initImg(v, "2", index, index2)
								})
							})
						}
					}
				})
			},
			initImg(fileName, type, index, index2) {
				uni.request({
					url: `${this.$local}/api/file/url/?fileName=${fileName}`,
					header: {
						'Content-Type': 'application/json', //自定义请求头信息
						'Authorization': `Bearer ${this.loginObj.access_token}`
					},
					method: 'GET', //请求方式，必须为大写
					success: (res) => {
						if (type == 1) {
							this.damageImage.push(res.data)
							this.$set(this.damagedList[index], "damageImageList", this.damageImage)
							if (this.damagedList[index].damageImage.length == this.damageImage.length) {
								this.damageImage = []
							}
						} else if (type == 2) {
							this.vinCodeImage.push(res.data)
							this.$set(this.damagedList[index], "vinCodeImageList", this.vinCodeImage)
							if (this.damagedList[index].vinCodeImage.length == this.vinCodeImage.length) {
								this.vinCodeImage = []
							}
						}

					}
				})
			},
			close() {
				this.$refs.popup.close()
			},
			//切换分页
			changePage(e) {
              this.current = e.current
			  this.getTableInfo()
			}
		}
	}
</script>

<style lang="less" scoped>
	.details {
		.content {
			padding: 16px;

			.liBox {
				width: 100%;
				padding: 24px 16px;
				background-color: #fff;
				margin-bottom: 16px;

				.title {
					display: flex;
					margin-bottom: 20px;

					image {
						width: 24px;
						height: 24px;
						margin-top: 2px;
					}

					text {
						font-size: 18px;
						font-weight: bold;
						margin-left: 10px;
					}
				}

				.ul {
					display: flex;
					flex-wrap: wrap;

					.li {
						width: 32%;
						margin-bottom: 12px;
						display: flex;
						font-size: 14px;
						height: 20px;
						line-height: 20px;

						p {
							color: #999;
						}

						text {
							color: #23262E;
						}
					}
				}
			}

			.formTitle {
				padding-left: 10px;
				border-left: 5px solid #2979ff;
				font-size: 20px;
				font-weight: bold;
			}

			.formNr {
				/deep/.uni-table-th {
					background-color: #f4f4f4;
					color: #0B266A;
					font-size: 15px;

					.uni-table-th-content {
						padding-left: 7.5px;
						border-left: 1px solid #C3CBD8;
					}
				}

				/deep/.uni-table-td {
					padding-left: 15px;
				}

				.operate {
					color: #2979ff;
				}
			}
		}
	}

	.dialog {
		width: 90vh;
		height: 80vh;
		background-color: #fff;
		border-radius: 10px;

		.dtitle {
			width: 100%;
			height: 60px;
			line-height: 60px;
			border-radius: 10px 10px 0 0;
			padding: 0 20px;
			font-size: 18px;
			font-weight: 700;
			background-color: #f9f9f9;
			text-align: left;
			display: flex;
			justify-content: space-between;
		}

		.tableContant {
			height: calc(80vh - 60px);
			overflow-y: auto;


			.nr {
				padding: 0 20px;
				height: 60px;
				line-height: 60px;
				display: flex;
				justify-content: flex-start;

				.text {
					min-width: 120px;
					text-align: left;
				}
			}

			.table {
				width: calc(100% - 40px);
				margin: 0 20px 20px;
				padding: 0 20px;
				border-bottom: 1px solid #ebebeb;

				.title {
					height: 40px;
					line-height: 40px;
					font-weight: 900;
					text-align: left;
					display: flex;
					justify-content: flex-start;

					.tag {
						width: 60px;
						margin: 10px 15px 0;
						border-radius: 3px;
						height: 20px;
						line-height: 20px;
						font-weight: 400;
						color: #fff;
						text-align: center;
						background-color: #108ee9;
					}
				}

				.row {
					width: 100%;
					display: flex;
					justify-content: space-between;
					font-size: 18px;
					height: 40px;
					font-size: 10px;

					.col {
						width: 32%;
						text-align: left;
					}

				}

				.imgRow {
					margin-bottom: 25rpx;
					display: flex;
					justify-content: flex-start;

					.name {
						width: 80px;
						text-align: left;
						font-size: 10px;
					}

					.imgList {
						width: calc(100% - 80px);
						display: flex;
						justify-content: flex-start;
						flex-wrap: wrap;

						.img {
							width: 100px;
							margin-left: 10px;
							margin-bottom: 10px;
						}
					}
				}
			}
		}
	}
</style>