pad-app/pages/quality/details.vue

<template>
	<view class="details">
		<head-view :title="title" url="/pages/quality/index"></head-view>
		<view class="container contentFixed">
			<!-- <view class="userInfo">
				<p>填报人：{{infoData.qdReportPerson}}</p>
				<p>上报部门：{{infoData.qrpDept}}</p>
			</view> -->
			<view class="itemBox">
				<view class="formTitle">
					<image src="../../static/images/goodsImg2.png"></image>
					<text>基本信息</text>
				</view>
				<view class="ul zsInfo">
					<view class="li">
						<p>质损发生环节：</p>
						<view class="rightInfo">
							<p>{{infoData.qdLinkName}} </p>
							<p v-if="infoData.qdLinkName == '客户反馈' || infoData.qdLinkName == '其他'">
								备注：{{infoData.linkFeedback}}{{infoData.linkOther}}
							</p>
						</view>
					</view>
				</view>
			</view>
			<view class="itemBox">
				<view class="formTitle">
					<image src="../../static/images/zlIcon.png"></image>
					<text>板车照片</text>
				</view>
				<view class="picture" :class="{picture2 : boardCarPhotos > 0}">
					<template v-for="(item,index) in boardCarPhotos">
						<image :key="item" :src="item" @click="clickImg(boardCarPhotos,index)"></image>
					</template>
				</view>
			</view>
			<view class="itemBox">
				<view class="formTitle">
					<image src="../../static/images/cpIcon.png"></image>
					<text>板车车牌照</text>
				</view>
				<view class="picture" :class="{picture2 : boardCarList > 0}">
					<template v-for="(item,index) in boardCarList">
						<image :key="item" :src="item" @click="clickImg(boardCarList,index)"></image>
					</template>
				</view>
			</view>
			<view class="itemBox">
				<view class="formTitle">
					<image src="../../static/images/zxIcon.png"></image>
					<text>质损信息</text>
				</view>
				<view class="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.qdGodsCategory}}</p>
							<p v-if="infoData.qdGcOther != null && infoData.qdGcOther != ''">
								备注：{{infoData.qdGcOther}}
							</p>
						</view>
					</view>
					<view class="li imageLi" v-if="zsImg != ''">
						<image :src="zsImg"></image>
					</view>
					<view class="li tsLi">
						<p>质损概况：</p>
						<view class="rightInfo">
							<p>{{infoData.qualityDamageSituationName}}</p>
							<p v-if="infoData.qdsOther != null && infoData.qdsOther != ''">
								备注：{{infoData.qdsOther}}
							</p>
						</view>
					</view>
					<view class="li tsLi">
						<p>损伤情况：</p>
						<view class="rightInfo">
							<p>{{infoData.damageSituationName}}</p>
							<p v-if="infoData.dsOther != null && 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 != null && infoData.dpsOther != ''">
								备注：{{infoData.dpsOther}}
							</p>
						</view>
					</view>
				</view>
			</view>
			<view class="itemBox">
				<view class="formTitle">
					<image src="../../static/images/zsIcon.png"></image>
					<text>质损照片</text>
				</view>
				<view class="picture" :class="{picture2 : qualityDamage > 0}">
					<template v-for="(item,index) in qualityDamage">
						<image :key="item" :src="item" @click="clickImg(qualityDamage,index)"></image>
					</template>
				</view>
			</view>
			<view class="itemBox">
				<view class="formTitle">
					<image src="../../static/images/cjhIcon.png"></image>
					<text>车架号图片</text>
				</view>
				<view class="picture" :class="{picture2 : carFrameNumber > 0}">
					<template v-for="(item,index) in carFrameNumber">
						<image :key="item" :src="item" @click="clickImg(carFrameNumber,index)"></image>
					</template>
				</view>
			</view>
			<view class="btnSign">
				<view class="signLeft">
					<p>质损负责人签名:</p>
					<p>Quality loss responsible:</p>
				</view>
				<view class="signRightft">
					<image :src="signImg"></image>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				title: "",
				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) => {
						if (res.statusCode == 200) {
							this.infoData = res.data.data
							this.title = `${this.infoData.vinCode} - 质损详情`
							// 获取板车照片
							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 == 6) {
								this.zsImg = res.data
							}
						}
					}
				})
			},
			// 点击图片放大
			clickImg(urlList, index) {
				uni.previewImage({
					current: index,
					urls: urlList,
				})
			},
		}
	}
</script>

<style lang="less" scoped>
	.details {
		.container {
			padding: 16px;
			padding-bottom: 80px;

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

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

			.itemBox {
				padding: 16px;
				background: #fff;
				margin-bottom: 16px;
			}

			.formTitle {
				font-size: 18px;
				color: #666;
				font-weight: bold;
				display: flex;

				image {
					width: 18px;
					height: 18px;
					margin-right: 10px;
					margin-top: 5px;
				}
			}

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

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

			.picture2 {
				margin-top: 20px;
			}

			.zsInfo {
				display: flex;
				flex-wrap: wrap;
				margin-top: 24px;

				.li {
					width: 48%;
					display: flex;
					margin-bottom: 12px;
					font-size: 14px;
					color: #23262E;
				}

				.tsLi {
					width: 100%;
				}

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

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

			.btnSign {
				width: 100%;
				height: 66px;
				position: fixed;
				bottom: 0;
				left: 0;
				border: 1px solid #E1E5ED;
				box-shadow: 0 -1px 4px 0 rgba(0, 0, 0, 0.05);
				display: flex;
				justify-content: flex-end;
				background-color: #fff;

				.signLeft {
					display: flex;
					flex-direction: column;
					justify-content: center;
					gap: 3px;

					p {
						text-align: right;
					}
				}

				.signRightft {
					display: flex;
					flex-direction: column;
					justify-content: center;

					image {
						width: 120px;
						height: 100%;
					}
				}
			}
		}
	}
</style>