You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
323 lines
7.4 KiB
Vue
323 lines
7.4 KiB
Vue
<template>
|
|
<AddMoveTrace v-if="ViewType" @close='ChangeViewType' />
|
|
<scroll-view scroll-y="true" class="Main" v-else @scrolltolower="scrolltolower">
|
|
<view class="HeaderSearch">
|
|
<uni-icons class='HeaderIcon' type="search"></uni-icons>
|
|
<input class="HeaderInput" placeholder="输入历史提单号或备注快速搜索" />
|
|
</view>
|
|
<view class="MainUnit" v-for="item in form" :key="item">
|
|
<view class="UnitFirst">
|
|
<view class="UnitFirstLeft">
|
|
<view class="BZ">
|
|
<text class="BZtext">备注</text>
|
|
</view>
|
|
<text class="BZdetails">尚未备注</text>
|
|
</view>
|
|
</view>
|
|
<view class="UnitSecond">
|
|
<text class="UnitSecondText">提单号:<text class="UnitSecondTextSpan">{{item.MBLNO}}</text></text>
|
|
<text class="UnitSecondText">+订阅目的港数据</text>
|
|
</view>
|
|
<view class="UnitThird">
|
|
<view class="UnitThirdView">
|
|
<i class="iconfont icon-yunshu" :class="item.StaTiXiang=='N'||!item.StaTiXiang?'Ntype':'YType'"></i>
|
|
<text class="UnitThirdViewText">提箱</text>
|
|
</view>
|
|
<text class="UnitThirdText">······</text>
|
|
<view class="UnitThirdView" >
|
|
<i class="iconfont icon-yunshu" :class="item.StaFanChange=='N'||!item.StaFanChange?'Ntype':'YType'"></i>
|
|
<text class="UnitThirdViewText">返场</text>
|
|
</view>
|
|
<text class="UnitThirdText">······</text>
|
|
<view class="UnitThirdView">
|
|
<i class="iconfont icon-yunshu" :class="item.StaCangDan=='N'||!item.StaCangDan?'Ntype':'YType'"></i>
|
|
<text class="UnitThirdViewText">舱单生效</text>
|
|
</view>
|
|
<text class="UnitThirdText">······</text>
|
|
<view class="UnitThirdView">
|
|
<i class="iconfont icon-yunshu" :class="item.StaTiDan=='N'||!item.StaTiDan?'Ntype':'YType'"></i>
|
|
<text class="UnitThirdViewText">报关</text>
|
|
</view>
|
|
<text class="UnitThirdText">······</text>
|
|
<view class="UnitThirdView">
|
|
<i class="iconfont icon-yunshu" :class="item.StaZhuangZai=='N'||!item.StaZhuangZai?'Ntype':'YType'"></i>
|
|
<text class="UnitThirdViewText">装载放行</text>
|
|
</view>
|
|
<text class="UnitThirdText">······</text>
|
|
<view class="UnitThirdView">
|
|
<i class="iconfont icon-yunshu" :class="item.StaMaTouFangXing=='N'||!item.StaMaTouFangXing?'Ntype':'YType'"></i>
|
|
<text class="UnitThirdViewText">码放</text>
|
|
</view>
|
|
</view>
|
|
<view class="UnitFourth">
|
|
<text class="UnitFourthText">船舶:<text class='UnitFourthTextSpan'>{{item.VESSEL}}</text></text>
|
|
<text class="UnitFourthText UnitFourthTextTime">ETD:<text
|
|
class='UnitFourthTextSpan'>{{FormatTiem(item.ETD)}}</text></text>
|
|
</view>
|
|
<view class="UnitFifth">
|
|
<view class="UnitFifthView">
|
|
<text class="UnitFifthViewText">预计到港</text>
|
|
<text class="UnitFifthViewText">实际到港</text>
|
|
<text class="UnitFifthViewText">预计离港</text>
|
|
<text class="UnitFifthViewText">实际离岗</text>
|
|
</view>
|
|
<view class="UnitFifthView">
|
|
<text class="UnitFifthViewText">{{FormatTiem(item.ETA)}}</text>
|
|
<text class="UnitFifthViewText">{{FormatTiem(item.ATA)}}</text>
|
|
<text class="UnitFifthViewText">{{FormatTiem(item.ETD)}}</text>
|
|
<text class="UnitFifthViewText">{{FormatTiem(item.ATD)}}</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="AddBox" @click="ClickAdd">
|
|
+新增运踪
|
|
</view>
|
|
</scroll-view>
|
|
|
|
</template>
|
|
|
|
<script>
|
|
import {
|
|
ListData
|
|
} from '../../../common/js/api/homePage/moveTrace.js'
|
|
import {
|
|
FormatTiem
|
|
} from './time.js'
|
|
import AddMoveTrace from './AddMoveTrace.vue'
|
|
export default {
|
|
components: {
|
|
AddMoveTrace
|
|
},
|
|
data() {
|
|
return {
|
|
FormatTiem,
|
|
ViewType: false,
|
|
form: [],
|
|
GetData: {
|
|
"offset": 0,
|
|
"limit": 10,
|
|
}
|
|
}
|
|
},
|
|
mounted() {
|
|
this.FnGetData()
|
|
},
|
|
methods: {
|
|
time(timestamp) {
|
|
// let data=Number(timestamp)
|
|
// console.log(123213);
|
|
// timestamp.toString()
|
|
// return data
|
|
},
|
|
FnGetData() {
|
|
ListData(this.GetData).then(res => {
|
|
this.form = [...this.form, ...res.DataList]
|
|
}).catch(err => {
|
|
this.form = [...this.form, ...err.DataList]
|
|
})
|
|
console.log(this.form, this.form.length);
|
|
},
|
|
scrolltolower() {
|
|
++this.GetData.offset
|
|
this.FnGetData()
|
|
|
|
},
|
|
ChangeViewType() {
|
|
this.ViewType = false
|
|
},
|
|
ClickAdd() {
|
|
this.ViewType = !this.ViewType
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.Main {
|
|
background: #f2f2f2;
|
|
height: calc(100% - 175rpx);
|
|
padding: 1rem 1rem;
|
|
padding-bottom: 0;
|
|
box-sizing: border-box;
|
|
overflow: auto;
|
|
|
|
.HeaderSearch {
|
|
padding: .5rem;
|
|
display: flex;
|
|
align-items: center;
|
|
background: #fff;
|
|
border-radius: 5rpx;
|
|
|
|
.HeaderIcon {
|
|
margin-right: .5rem;
|
|
}
|
|
|
|
.HeaderInput {
|
|
flex: 1;
|
|
}
|
|
}
|
|
|
|
.MainUnit {
|
|
margin-top: 1rem;
|
|
background: #FFF;
|
|
padding-bottom: .2rem;
|
|
|
|
.UnitFirst {
|
|
|
|
background: #e7eafb;
|
|
padding: 16rpx 32rpx;
|
|
|
|
.UnitFirstLeft {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
|
|
.BZ {
|
|
margin-right: 16rpx;
|
|
background: #465499;
|
|
transform: skewX(-24deg);
|
|
display: inline-block;
|
|
|
|
.BZtext {
|
|
color: #fff;
|
|
padding: 3rpx 15rpx;
|
|
display: inline-block;
|
|
transform: skewX(24deg);
|
|
}
|
|
}
|
|
}
|
|
|
|
.BZdetails {
|
|
color: #4e5999;
|
|
}
|
|
}
|
|
|
|
.UnitSecond {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
padding: 16rpx 32rpx;
|
|
border-bottom: 1rpx solid #e6e6e6;
|
|
|
|
>.UnitSecondText {
|
|
&:first-child {
|
|
color: #9d9d9d;
|
|
|
|
.UnitSecondTextSpan {
|
|
color: #000;
|
|
font-weight: 700;
|
|
}
|
|
}
|
|
|
|
&:last-child {
|
|
color: #5873f5;
|
|
}
|
|
}
|
|
}
|
|
|
|
.UnitThird {
|
|
display: flex;
|
|
padding: 1rem .5rem;
|
|
|
|
.UnitThirdView {
|
|
width: 2.5rem;
|
|
display: flex;
|
|
flex-direction: column;
|
|
|
|
i {
|
|
width: 2.5rem;
|
|
height: 2.5rem;
|
|
text-align: center;
|
|
line-height: 2.5rem;
|
|
background: #53a8ff;
|
|
border-radius: 50%;
|
|
color: #fff;
|
|
&.Ntype{
|
|
background: #c9c9c9;
|
|
}
|
|
}
|
|
|
|
.UnitThirdViewText {
|
|
text-align: center;
|
|
font-size: .6rem;
|
|
margin-top: .4rem;
|
|
}
|
|
}
|
|
|
|
.UnitThirdText {
|
|
flex: 1;
|
|
height: 2.5rem;
|
|
line-height: 2.5rem;
|
|
text-align: center;
|
|
color: #c9c9c9;
|
|
}
|
|
}
|
|
|
|
.UnitFourth {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
padding: 16rpx 32rpx;
|
|
border-bottom: 1rpx solid #e6e6e6;
|
|
|
|
.UnitFourthText {
|
|
min-width: 60%;
|
|
color: #9d9d9d;
|
|
&.UnitFourthTextTime {
|
|
min-width: 40%;
|
|
.UnitFourthTextSpan {
|
|
width: auto;
|
|
}
|
|
}
|
|
|
|
.UnitFourthTextSpan {
|
|
line-height: .8rem;
|
|
color: #000;
|
|
font-weight: 700;
|
|
width: 10rem;
|
|
display: inline-block;
|
|
overflow: hidden;
|
|
white-space: nowrap;
|
|
text-overflow: ellipsis;
|
|
}
|
|
|
|
}
|
|
}
|
|
|
|
.UnitFifth {
|
|
.UnitFifthView {
|
|
display: flex;
|
|
|
|
.UnitFifthViewText {
|
|
flex: 10;
|
|
text-align: center;
|
|
border-left: 1rpx solid #e6e6e6;
|
|
border-bottom: 1rpx solid #e6e6e6;
|
|
font-size: .9rem;
|
|
padding: .2rem 0;
|
|
|
|
&:first-child {
|
|
border-left: none;
|
|
}
|
|
}
|
|
|
|
&:last-child {
|
|
color: #57b450;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.AddBox {
|
|
position: fixed;
|
|
left: 50%;
|
|
bottom: 165rpx;
|
|
transform: translate(-50%, 0);
|
|
width: 30%;
|
|
height: 2.2rem;
|
|
background: #fff;
|
|
border-radius: .8rem;
|
|
text-align: center;
|
|
line-height: 2.2rem;
|
|
box-shadow: 0px 0px 12px #aeadad;
|
|
}
|
|
}
|
|
</style>
|