jch-wx_tmsaip/pages/homePage/moveTrace/moveTrace.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" @click="dialogToggle(item)">+订阅目的港数据</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>
		<view>
			<uni-popup ref="alertDialog">
				<uni-popup-dialog :type="msgType" cancelText="关闭" confirmText="同意" title="通知"
					:content="`是否‘订阅提单号${mblno}目的港数据’`" @confirm="dialogConfirm" @close="dialogClose">
				</uni-popup-dialog>
			</uni-popup>
		</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,
				},
				mblno: ''
			}
		},
		mounted() {
			this.FnGetData()
		},
		methods: {
			dialogClose() {
				this.$refs.alertDialog.close()
			},
			dialogConfirm() {
				this.$refs.alertDialog.close()
			},
			dialogToggle(item) {
				this.mblno = item.MBLNO
				this.$refs.alertDialog.open()
			},
			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;
			width: 100%;

			.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 {
					font-size: .8rem;
					&:first-child {
						color: #9d9d9d;

						.UnitSecondTextSpan {
							color: #000;
							font-weight: 700;
						}
					}

					&:last-child {
						color: #5873f5;
					}
				}
			}

			.UnitThird {
				display: flex;
				padding: 1rem .5rem;
				width: 100%;
				box-sizing:border-box;

				.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>