557 lines
12 KiB
Vue
557 lines
12 KiB
Vue
<template>
|
||
<view class="details">
|
||
<head-view title="货物详情"></head-view>
|
||
<view class="container">
|
||
<view class="formTitle">
|
||
基本信息
|
||
</view>
|
||
<view class="formNr">
|
||
<view class="row">
|
||
<view class="col">
|
||
<view class="title">
|
||
船名:
|
||
</view>
|
||
<text>1123</text>
|
||
|
||
</view>
|
||
<view class="col">
|
||
<view class="title">
|
||
航次:
|
||
</view>
|
||
<text>1123</text>
|
||
</view>
|
||
</view>
|
||
<view class="row">
|
||
<view class="col">
|
||
<view class="title">
|
||
港口:
|
||
</view>
|
||
<text>1123</text>
|
||
|
||
</view>
|
||
<view class="col">
|
||
<view class="title">
|
||
泊位:
|
||
</view>
|
||
<text>1123</text>
|
||
</view>
|
||
</view>
|
||
<view class="row">
|
||
<view class="col">
|
||
<view class="title">
|
||
备注:
|
||
</view>
|
||
<text>1123</text>
|
||
|
||
</view>
|
||
<view class="col">
|
||
|
||
</view>
|
||
</view>
|
||
<view class="row">
|
||
<view class="col">
|
||
<view class="title">
|
||
货代:
|
||
</view>
|
||
<text>1123</text>
|
||
|
||
</view>
|
||
<view class="col">
|
||
<view class="title">
|
||
联系人:
|
||
</view>
|
||
<text>1123</text>
|
||
</view>
|
||
</view>
|
||
<view class="row">
|
||
<view class="col">
|
||
<view class="title">
|
||
联系方式:
|
||
</view>
|
||
<text>1123</text>
|
||
|
||
</view>
|
||
<view class="col">
|
||
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="formTitle">
|
||
详细信息
|
||
</view>
|
||
<view class="formNr">
|
||
<view class="row">
|
||
<view class="col">
|
||
<view class="title">
|
||
提单号:
|
||
</view>
|
||
<text>1123</text>
|
||
|
||
</view>
|
||
<view class="col">
|
||
<view class="title">
|
||
品牌:
|
||
</view>
|
||
<text>1123</text>
|
||
</view>
|
||
</view>
|
||
<view class="row">
|
||
|
||
<view class="col">
|
||
<view class="title">
|
||
型号:
|
||
</view>
|
||
<text>1123</text>
|
||
</view>
|
||
<view class="col">
|
||
</view>
|
||
</view>
|
||
<view class="row">
|
||
<view class="col">
|
||
<view class="title">
|
||
车型明细:
|
||
</view>
|
||
<text>1123</text>
|
||
|
||
</view>
|
||
<view class="col">
|
||
<view class="title">
|
||
车长:
|
||
</view>
|
||
<text>1123</text>
|
||
</view>
|
||
</view>
|
||
<view class="row">
|
||
<view class="col">
|
||
<view class="title">
|
||
车宽:
|
||
</view>
|
||
<text>1123</text>
|
||
|
||
</view>
|
||
<view class="col">
|
||
<view class="title">
|
||
车高:
|
||
</view>
|
||
<text>1123</text>
|
||
</view>
|
||
</view>
|
||
<view class="row">
|
||
<view class="col">
|
||
<view class="title">
|
||
体积:
|
||
</view>
|
||
<text>1123</text>
|
||
|
||
</view>
|
||
<view class="col">
|
||
<view class="title">
|
||
重量:
|
||
</view>
|
||
<text>1123</text>
|
||
</view>
|
||
</view>
|
||
<view class="row">
|
||
<view class="col">
|
||
<view class="title">
|
||
数量:
|
||
</view>
|
||
<text>1123</text>
|
||
|
||
</view>
|
||
<view class="col">
|
||
<view class="title">
|
||
单票数量:
|
||
</view>
|
||
<text>1123</text>
|
||
</view>
|
||
</view>
|
||
<view class="row">
|
||
<view class="col">
|
||
<view class="title">
|
||
单票重量:
|
||
</view>
|
||
<text>1123</text>
|
||
|
||
</view>
|
||
<view class="col">
|
||
<view class="title">
|
||
单票体积:
|
||
</view>
|
||
<text>1123</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="formTitle">
|
||
货物明细
|
||
</view>
|
||
<view class="formNr">
|
||
<uni-table border stripe emptyText="暂无更多数据">
|
||
<!-- 表头行 -->
|
||
<uni-tr class="gray">
|
||
<uni-th align="center" width="20">序号</uni-th>
|
||
<uni-th align="center" width="20">车架号/条形码</uni-th>
|
||
<uni-th align="center" width="20">作业状态</uni-th>
|
||
<uni-th align="center" width="20">场位</uni-th>
|
||
<uni-th align="center" width="20">操作</uni-th>
|
||
</uni-tr>
|
||
<!-- 表格数据行 -->
|
||
<uni-tr>
|
||
<uni-td>1123</uni-td>
|
||
<uni-td>2</uni-td>
|
||
<uni-td>3</uni-td>
|
||
<uni-td>4</uni-td>
|
||
<uni-td align="center">
|
||
<view class="uni-group">
|
||
<button class="uni-button" size="mini" type="primary" @click="open">残损</button>
|
||
</view>
|
||
</uni-td>
|
||
</uni-tr>
|
||
</uni-table>
|
||
</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() {
|
||
this.id = this.$route.query.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: 20px 30px;
|
||
|
||
.formTitle {
|
||
padding-left: 10px;
|
||
border-left: 5px solid #2979ff;
|
||
font-size: 20px;
|
||
font-weight: bold;
|
||
}
|
||
|
||
.formNr {
|
||
margin: 40px 0 30px;
|
||
|
||
.row {
|
||
width: 70%;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
font-size: 18px;
|
||
line-height: 60px;
|
||
|
||
.col {
|
||
display: flex;
|
||
justify-content: center;
|
||
|
||
.title {
|
||
width: 150px;
|
||
text-align: right;
|
||
font-weight: 900;
|
||
color: #999ba6;
|
||
}
|
||
|
||
}
|
||
}
|
||
|
||
.gray {
|
||
background-color: #f9f9f9;
|
||
}
|
||
|
||
}
|
||
}
|
||
}
|
||
|
||
.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> |