pad-app/pages/quality/details.vue

<template>
	<view class="details">
		<head-view title="船名/航次"></head-view>
		<view class="container">
			<view class="userInfo">
				<p>填报人：{{infoData.qdReportPerson}}</p>
				<p>上报部门：{{infoData.qrpDept}}</p>
			</view>
			<view class="formTitle">
				基本信息
			</view>
			<view class="ul zsInfo">
				<view class="li">
					<p>质损发生环节</p>
					<view class="rightInfo">
						<p>{{infoData.qdLinkName}} </p>
						<p v-if="infoData.linkFeedback != '' || infoData.linkOther != ''">
							备注：{{infoData.linkFeedback}}{{infoData.linkOther}}
						</p>
					</view>
				</view>
			</view>
			<view class="ul">
				<view class="li">
					<p class="liTitle">板车照片</p>
					<view class="picture">
						<template v-for="item in boardCarPhotos">
							<image :key="item" :src="item" mode="widthFix"></image>
						</template>
					</view>
				</view>
				<view class="li">
					<p class="liTitle">板车车牌照</p>
					<view class="picture">
						<template v-for="item in boardCarList">
							<image :key="item" :src="item" mode="widthFix"></image>
						</template>
					</view>
				</view>
			</view>
			<view class="formTitle">
				质损信息
			</view>
			<view class="ul zsInfo">
				<view class="li">
					<p>车架号/条形码：</p>
					<p>{{infoData.vinCode}}</p>
				</view>
				<view class="li">
					<p>船名/航次：</p>
					<p>{{infoData.spmIdAndVvyId}}</p>
				</view>
				<view class="li">
					<p>车型：</p>
					<p>{{infoData.bvmName}}</p>
				</view>
				<view class="li">
					<p>品牌：</p>
					<p>{{infoData.brdName}}</p>
				</view>
				<view class="li">
					<p>场位：</p>
					<p>{{infoData.pos}}</p>
				</view>
				<view class="li">
					<p>质损时间：</p>
					<p>{{infoData.qualityDamageTime}}</p>
				</view>
				<view class="li">
					<p>质损货物品类：</p>
					<view class="rightInfo">
						<p>{{infoData.qdGodsCategoryName}}</p>
						<p v-if="infoData.qdGcOther != ''">
							备注：{{infoData.qdGcOther}}
						</p>
					</view>
				</view>
				<view class="li imageLi">
					<image :src="zsImg" mode="widthFix"></image>
				</view>
				<view class="li tsLi">
					<p>质损概况：</p>
					<view class="rightInfo">
						<p>{{infoData.qdGodsCategoryName}}</p>
						<p v-if="infoData.qdGcOther != ''">
							备注：{{infoData.qdGcOther}}
						</p>
					</view>
				</view>
				<view class="li tsLi">
					<p>损伤情况：</p>
					<view class="rightInfo">
						<p>{{infoData.damageSituationName}}</p>
						<p v-if="infoData.dsOther != ''">
							备注：{{infoData.dsOther}}
						</p>
					</view>
				</view>
				<view class="li tsLi">
					<p>处置情况：</p>
					<view class="rightInfo">
						<p>{{infoData.disposalSituationName}}</p>
						<p v-if="infoData.dpsOther != ''">
							备注：{{infoData.dpsOther}}
						</p>
					</view>
				</view>
				<view class="li zpLi">
					<p class="liTitle">质损照片</p>
					<view class="picture">
						<template v-for="item in qualityDamage">
							<image :key="item" :src="item" mode="widthFix"></image>
						</template>
					</view>
				</view>
				<view class="li zpLi">
					<p class="liTitle">车架号图片</p>
					<view class="picture">
						<template v-for="item in carFrameNumber">
							<image :key="item" :src="item" mode="widthFix"></image>
						</template>
					</view>
				</view>
			</view>
			<view class="formTitle">
				签字
			</view>
			<view class="ul">
				<view class="li flexLi">
					<p class="liTitle">质损负责人</p>
					<p>{{infoData.qdLiablePerson}}</p>
				</view>
				<view class="li flexLi">
					<p class="liTitle">签名</p>
					<view class="picture">
						<image :src="signImg" mode="widthFix"></image>
					</view>
				</view>
			</view>
			<view class="btnList">
				<van-button type="default" @click="cancel">取消</van-button>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				ygqId: "",
				loginObj: {},
				infoData: {},
				// 板车照片
				boardCarPhotos: [],
				// 板车车牌照
				boardCarList: [],
				// 质损照片
				qualityDamage: [],
				// 	车架号图片
				carFrameNumber: [],
				// 签名图片
				signImg: "",
				// 质损参考图
				zsImg: "",
			}
		},
		onLoad(options) {
			if ('params' in options) {
				// 获取传递的对象参数，使用decodeURIComponent解码，并转为对象
				this.ygqId = JSON.parse(decodeURIComponent(options.params)).ygqId
			}
			this.loginObj = uni.getStorageSync('loginObj')
			this.initData()
		},
		methods: {
			initData() {
				uni.request({
					url: `${this.$local}/api/goodsQuality/getDetail?ygqId=${this.ygqId}`,
					header: {
						'Content-Type': 'application/json', //自定义请求头信息
						'Authorization': `Bearer ${this.loginObj.access_token}`
					},
					method: 'GET', //请求方式，必须为大写
					success: (res) => {
						console.log('接口返回------', res);
						if (res.statusCode == 200) {
							this.infoData = res.data.data
							// 获取板车照片
							this.infoData.boardCarPhotos.forEach(v => {
								this.initImg(v.filePath, "1")
							})
							// 获取板车车牌照
							this.infoData.boardCarLicensePlates.forEach(v => {
								this.initImg(v.filePath, "2")
							})
							// 获取质损照片
							this.infoData.qualityDamagePhotos.forEach(v => {
								this.initImg(v.filePath, "3")
							})
							// 获取车架号图片
							this.infoData.carFrameNumberPhotos.forEach(v => {
								this.initImg(v.filePath, "4")
							})
							this.initImg(this.infoData.signUrl, "5")
							this.initImg(this.infoData.refImageUrl, "6")
						}
					}
				})
			},
			// type 1 板车照片 2板车车牌照 3质损照片 4车架号图片 5签名 6参考图
			initImg(fileName, type) {
				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 (res.statusCode == 200) {
							if (type == 1) {
								this.boardCarPhotos.push(res.data)
							} else if (type == 2) {
								this.boardCarList.push(res.data)
							} else if (type == 3) {
								this.qualityDamage.push(res.data)
							} else if (type == 4) {
								this.carFrameNumber.push(res.data)
							} else if (type == 5) {
								this.signImg = res.data
							} else if (type == 5) {
								this.zsImg = res.data
							}
						}
					}
				})
			},
			// 取消
			cancel() {
				uni.navigateTo({
					url: '/pages/quality/index'
				})
			}
		}
	}
</script>

<style lang="less" scoped>
	.details {
		.container {
			padding: 20px 30px;

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

				p {
					margin-right: 30px;
					font-size: 16px;
				}
			}

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

			.ul {
				margin-bottom: 30px;

				.rightInfo {
					display: flex;

					p {
						width: 120px;
					}
				}

				.flexLi {
					display: flex;
				}

				.li {
					margin-top: 30px;

					.liTitle {
						min-width: 100px;
						margin-right: 20px;
						font-size: 16px;
						font-weight: bold;
					}

					.picture {
						margin-top: 20px;
						display: flex;
						flex-wrap: wrap;

						image {
							width: 120px;
							height: 120px;
							margin: 10px;
						}
					}


				}
			}

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

				.li {
					width: 48%;
					display: flex;

					p:first-child {
						width: 120px;
					}
				}

				.tsLi {
					width: 100%;
				}

				.zpLi {
					width: 100%;
					display: block;
				}

				.imageLi {
					width: 100%;
					height: 400px;
				}
			}

			.btnList {
				display: flex;
				justify-content: center;

				/deep/ .van-button {
					margin: 30px 0;
					width: 120px;
					height: 50px;
				}
			}
		}
	}
</style>