jch-wx_tmsaip/pages/homePage/moveTrace/moveTrace.vue

<template>
	<AddMoveTrace v-if="ViewType" @close='ChangeViewType' />
	<view class="Main" v-else>
		<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 "></i>
					<text class="UnitThirdViewText">提舶</text>
				</view>
				<text class="UnitThirdText">······</text>
				<view class="UnitThirdView">
					<i class="iconfont icon-yunshu "></i>
					<text class="UnitThirdViewText">返场</text>
				</view>
				<text class="UnitThirdText">······</text>
				<view class="UnitThirdView">
					<i class="iconfont icon-yunshu "></i>
					<text class="UnitThirdViewText">舱单生效</text>
				</view>
				<text class="UnitThirdText">······</text>
				<view class="UnitThirdView">
					<i class="iconfont icon-yunshu "></i>
					<text class="UnitThirdViewText">报关</text>
				</view>
				<text class="UnitThirdText">······</text>
				<view class="UnitThirdView">
					<i class="iconfont icon-yunshu "></i>
					<text class="UnitThirdViewText">装载放行</text>
				</view>
				<text class="UnitThirdText">······</text>
				<view class="UnitThirdView">
					<i class="iconfont icon-yunshu "></i>
					<text class="UnitThirdViewText">码放</text>
				</view>
			</view>
			<view class="UnitFourth">
				<text class="UnitFourthText">船舶:<text class='UnitFourthTextSpan'>{{item.VESSEL}}</text></text>
				<text class="UnitFourthText">ETD:<text class='UnitFourthTextSpan'>{{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">6/4 17:00</text>
					<text class="UnitFifthViewText">6/4 17:00</text>
					<text class="UnitFifthViewText">6/4 17:00</text>
					<text class="UnitFifthViewText">6/4 17:00</text>
				</view>
			</view>
		</view>
		<view class="AddBox" @click="ClickAdd">
			+新增运踪
		</view>
	</view>

</template>

<script>
	import {
		ListData
	} from '../../../common/js/api/homePage/moveTrace.js'
	import AddMoveTrace from './AddMoveTrace.vue'
	export default {
		components: {
			AddMoveTrace
		},
		data() {
			return {
				ViewType: false,
				form: []
			}
		},
		mounted() {
			ListData().then(res => {
				console.log(res.DataList);
				this.form=res.DataList
			}).catch(err=>{
				console.log(err.DataList);
				this.form=err.DataList
			})
		},
		methods: {
			ChangeViewType() {
				this.ViewType = false
			},
			ClickAdd() {
				this.ViewType = !this.ViewType
			}
		}
	}
</script>

<style lang="scss" scoped>
	.Main {
		background: #f2f2f2;
		height: 100%;
		padding: 1rem;
		margin-bottom: 1rem;

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

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

					color: #9d9d9d;

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

				}
			}

			.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: 12%;
			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>