370 lines
8.9 KiB
Vue
370 lines
8.9 KiB
Vue
<template>
|
||
<view class="details">
|
||
<head-view :title="title"></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.qdLink}} </p>
|
||
<p v-if="infoData.qdLink == '客户反馈' || infoData.qdLink == '其他'">
|
||
备注：{{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">
|
||
<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">
|
||
<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">
|
||
<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">
|
||
<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
|
||
console.log(this.infoData)
|
||
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: 24px 16px;
|
||
background: #fff;
|
||
margin-bottom: 16px;
|
||
}
|
||
|
||
.formTitle {
|
||
font-size: 18px;
|
||
font-weight: bold;
|
||
display: flex;
|
||
|
||
image {
|
||
width: 18px;
|
||
height: 18px;
|
||
margin-right: 10px;
|
||
margin-top: 5px;
|
||
}
|
||
}
|
||
|
||
.picture {
|
||
margin-top: 20px;
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
|
||
image {
|
||
width: 120px;
|
||
height: 120px;
|
||
margin: 10px;
|
||
}
|
||
}
|
||
|
||
.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> |