502 lines
12 KiB
Vue
502 lines
12 KiB
Vue
<template>
|
||
<view class="details">
|
||
<view class="container">
|
||
<view class="liBox">
|
||
<view class="title">
|
||
<image src="../../static/images/carInfo.png" mode=""></image>
|
||
<text>基本信息</text>
|
||
</view>
|
||
<view class="ul">
|
||
<view class="li">
|
||
<p>船名：</p>
|
||
<text>海王星领袖</text>
|
||
</view>
|
||
<view class="li">
|
||
<p>航次：</p>
|
||
<text>29089473289</text>
|
||
</view>
|
||
<view class="li">
|
||
<p>港口：</p>
|
||
<text>厦门港</text>
|
||
</view>
|
||
<view class="li">
|
||
<p>货代：</p>
|
||
<text>货代货代货代货代</text>
|
||
</view>
|
||
<view class="li">
|
||
<p>联系人：</p>
|
||
<text>张xx</text>
|
||
</view>
|
||
<view class="li">
|
||
<p>联系方式：</p>
|
||
<text>12345678900</text>
|
||
</view>
|
||
<view class="li">
|
||
<p>泊位：</p>
|
||
<text>一泊位</text>
|
||
</view>
|
||
<view class="li">
|
||
<p>备注：</p>
|
||
<text>我是备注我是备注我是备注</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="liBox">
|
||
<view class="title">
|
||
<image src="../../static/images/goodsImg.png" mode=""></image>
|
||
<text>货物明细</text>
|
||
</view>
|
||
<view class="ul">
|
||
<view class="li">
|
||
<p>提单号：</p>
|
||
<text>789654654123</text>
|
||
</view>
|
||
<view class="li">
|
||
<p>品牌：</p>
|
||
<text>奔驰</text>
|
||
</view>
|
||
<view class="li">
|
||
<p>型号：</p>
|
||
<text>cx87898888</text>
|
||
</view>
|
||
<view class="li">
|
||
<p>车辆明细：</p>
|
||
<text>车辆明细车辆明细</text>
|
||
</view>
|
||
<view class="li">
|
||
<p>车长：</p>
|
||
<text>1888</text>
|
||
</view>
|
||
<view class="li">
|
||
<p>车宽：</p>
|
||
<text>1688</text>
|
||
</view>
|
||
<view class="li">
|
||
<p>车高：</p>
|
||
<text>1000</text>
|
||
</view>
|
||
<view class="li">
|
||
<p>体积：</p>
|
||
<text>28888</text>
|
||
</view>
|
||
<view class="li">
|
||
<p>重量：</p>
|
||
<text>48888</text>
|
||
</view>
|
||
<view class="li">
|
||
<p>数量：</p>
|
||
<text>288</text>
|
||
</view>
|
||
<view class="li">
|
||
<p>单票数量：</p>
|
||
<text>10</text>
|
||
</view>
|
||
<view class="li">
|
||
<p>单票重量：</p>
|
||
<text>33</text>
|
||
</view>
|
||
<view class="li">
|
||
<p>单票体积：</p>
|
||
<text>20</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="liBox">
|
||
<view class="title">
|
||
<image src="../../static/images/goodsImg2.png" mode=""></image>
|
||
<text>货物表格</text>
|
||
</view>
|
||
<view class="formNr">
|
||
<uni-table border stripe emptyText="暂无更多数据">
|
||
<!-- 表头行 -->
|
||
<uni-tr class="gray">
|
||
<uni-th align="center" width="22">序号</uni-th>
|
||
<uni-th align="center" width="22">车架号/条形码</uni-th>
|
||
<uni-th align="center" width="22">作业状态</uni-th>
|
||
<uni-th align="center" width="22">场位</uni-th>
|
||
<uni-th align="center" width="12">操作</uni-th>
|
||
</uni-tr>
|
||
<!-- 表格数据行 -->
|
||
<uni-tr>
|
||
<uni-td>1</uni-td>
|
||
<uni-td>a</uni-td>
|
||
<uni-td>ix3</uni-td>
|
||
<uni-td>18283</uni-td>
|
||
<uni-td align="center">
|
||
<text class="operate" @click="open">残损</text>
|
||
</uni-td>
|
||
</uni-tr>
|
||
</uni-table>
|
||
</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">品牌:</text>
|
||
<text class="text">车型:</text>
|
||
<text class="text">车架号/条形码:</text>
|
||
</view>
|
||
<view class="table">
|
||
<view class="title">
|
||
<view>质损发生环节: 收车交接</view>
|
||
<view class="tag">已收车</view>
|
||
</view>
|
||
<view class="row">
|
||
<view class="col">
|
||
质损上报人员: 张星星
|
||
</view>
|
||
<view class="col">
|
||
质损上报时间: 2023/09/08 23:00
|
||
</view>
|
||
<view class="col">
|
||
质损发生位置: 舱内
|
||
</view>
|
||
</view>
|
||
<view class="row">
|
||
<view class="col">
|
||
质损概况: 磕伤
|
||
</view>
|
||
<view class="col">
|
||
损坏情况: 凹陷
|
||
</view>
|
||
<view class="col">
|
||
处置情况: 其他 这是一段关于其他的描述
|
||
</view>
|
||
</view>
|
||
<view class="imgRow">
|
||
<view class="name">
|
||
质损照片:
|
||
</view>
|
||
<view class="imgList">
|
||
<view class="img">
|
||
<image src="../../static/images/testImg.jpg" mode="widthFix"></image>
|
||
</view>
|
||
<view class="img">
|
||
<image src="../../static/images/testImg.jpg" mode="widthFix"></image>
|
||
</view>
|
||
<view class="img">
|
||
<image src="../../static/images/testImg.jpg" mode="widthFix"></image>
|
||
</view>
|
||
<view class="img">
|
||
<image src="../../static/images/testImg.jpg" mode="widthFix"></image>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="imgRow">
|
||
<view class="name">
|
||
车架号照片:
|
||
</view>
|
||
<view class="imgList">
|
||
<view class="img">
|
||
<image src="../../static/images/testImg.jpg" mode="widthFix"></image>
|
||
</view>
|
||
<view class="img">
|
||
<image src="../../static/images/testImg.jpg" mode="widthFix"></image>
|
||
</view>
|
||
<view class="img">
|
||
<image src="../../static/images/testImg.jpg" mode="widthFix"></image>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<view class="table">
|
||
<view class="title">
|
||
<view>质损发生环节: 收车交接</view>
|
||
<view class="tag">已收车</view>
|
||
</view>
|
||
<view class="row">
|
||
备注：这段备注很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长
|
||
</view>
|
||
<view class="row">
|
||
<view class="col">
|
||
质损上报人员: 张星星
|
||
</view>
|
||
<view class="col">
|
||
质损上报时间: 2023/09/08 23:00
|
||
</view>
|
||
<view class="col">
|
||
质损发生位置: 舱内
|
||
</view>
|
||
</view>
|
||
<view class="row">
|
||
<view class="col">
|
||
质损概况: 磕伤
|
||
</view>
|
||
<view class="col">
|
||
损坏情况: 凹陷
|
||
</view>
|
||
<view class="col">
|
||
处置情况: 其他 这是一段关
|
||
</view>
|
||
</view>
|
||
<view class="imgRow">
|
||
<view class="name">
|
||
质损照片:
|
||
</view>
|
||
<view class="imgList">
|
||
<view class="img">
|
||
<image src="../../static/images/testImg.jpg" mode="widthFix"></image>
|
||
</view>
|
||
<view class="img">
|
||
<image src="../../static/images/testImg.jpg" mode="widthFix"></image>
|
||
</view>
|
||
<view class="img">
|
||
<image src="../../static/images/testImg.jpg" mode="widthFix"></image>
|
||
</view>
|
||
<view class="img">
|
||
<image src="../../static/images/testImg.jpg" mode="widthFix"></image>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="imgRow">
|
||
<view class="name">
|
||
车架号照片:
|
||
</view>
|
||
<view class="imgList">
|
||
<view class="img">
|
||
<image src="../../static/images/testImg.jpg" mode="widthFix"></image>
|
||
</view>
|
||
<view class="img">
|
||
<image src="../../static/images/testImg.jpg" mode="widthFix"></image>
|
||
</view>
|
||
<view class="img">
|
||
<image src="../../static/images/testImg.jpg" mode="widthFix"></image>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</uni-popup>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import {
|
||
mapActions
|
||
} from 'vuex'
|
||
import HeadInfo from '@/components/head-info/head-info';
|
||
export default {
|
||
data() {
|
||
return {
|
||
id: 0
|
||
}
|
||
},
|
||
components: {
|
||
HeadInfo
|
||
},
|
||
onLoad(options) {
|
||
this.id = JSON.parse(decodeURIComponent(options.id))
|
||
this.loadList() // 总指令：分页查询
|
||
},
|
||
methods: {
|
||
...mapActions([
|
||
'majax',
|
||
'najax'
|
||
]),
|
||
loadList() {
|
||
let data = {}
|
||
data.spsId = this.id
|
||
this.majax({
|
||
url: this.$local + "/api/shipInstructions/listDetail",
|
||
params: data,
|
||
method: 'GET'
|
||
}).then(res => {
|
||
// this.itemList = res.data.records
|
||
})
|
||
},
|
||
open() {
|
||
this.$refs.popup.open('center')
|
||
},
|
||
close() {
|
||
this.$refs.popup.close()
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style lang="less" scoped>
|
||
.details {
|
||
.container {
|
||
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;
|
||
|
||
p {
|
||
color: #999;
|
||
}
|
||
|
||
text {
|
||
color: #23262E;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.formTitle {
|
||
padding-left: 10px;
|
||
border-left: 5px solid #2979ff;
|
||
font-size: 20px;
|
||
font-weight: bold;
|
||
}
|
||
|
||
.formNr {
|
||
.gray {
|
||
background-color: #f9f9f9;
|
||
}
|
||
|
||
.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> |