BRS1.0/pages/detailNode/index.vue

<template>
	<view class="app-content">
		<view class="header">
			<view class="title">
				行李路径
			</view>
			<view class="log" @tap="fall"></view> 
		</view>
		<view class="content">
			<uni-section class="mb-10" :title="'行李编号：'+luggageNum" type="circle"></uni-section>
			<uni-section class="mb-10" :title="'航班号：'+carrierFlights" type="circle"></uni-section>
			<uni-section class="mb-10" :title="'航班日期：'+carrierFlightsDate" type="circle"></uni-section>
			<y-steps :stepList="stepList"></y-steps>
		</view>
	</view>
</template>

<script>
	import YSteps from '@/components/YSteps/YSteps.vue'
	export default {
			components: { YSteps },
			data() {
				return {
					luggageNum:null,
					carrierFlightsDate:null,
					carrierFlights:null,
					active: 0,
					stepList: [
					    {
					        date: '值机', // 左侧日期 -- 必选
					        time: '-', // 左侧时间 -- 必选
					        info: '', // 右侧内容 -- 可选
					        index: '1', // 中间 Index -- 可选
					        isFinished: false, // 是否已完成（完成 index 为 √）-- 可选
					        isActive: true, // 是否为当前节点 Active（当前节点 即使完成 index 也不会显示 √）-- 可选
					        isShowSlot: true // 右侧是否有 Slot（显示在 右侧内容下方）-- 可选
					    },
					    {
					        date: '安检',
					        time: '-',
					        info: '',
					        index: '2',
					        isFinished: false,
					        isActive: true,
					        isShowSlot: true
					    },
					    {
					        date: '分拣',
					        time: '-',
					        info: '',
					        index: '3',
					        isFinished: false,
					        isActive: true,
					        isShowSlot: true
					    },
					    {
					        date: '装车',
					        time: '-',
					        info: '',
					        index: '4',
					        isFinished: false,
					        isActive: true,
					        isShowSlot: true
					    },
					    {
					        date: '装机',
					        time: '-',
					        info: '',
					        index: '5',
					        isFinished: false,
					        isActive: true,
					        isShowSlot: true
					    },
					    {
					        date: '到达',
					        time: '-',
					        info: '',
					        index: '6',
					        isFinished: false,
					        isActive: true,
					        isShowSlot: true
					    },
					    {
					        date: '卸机',
					        time: '-',
					        info: '',
					        index: '7',
					        isFinished: false,
					        isActive: true,
					        isShowSlot: true
					    }
					]
				}
			},
			onLoad(option) {
				this.luggageNum = option.luggageNum;
				this.carrierFlights = option.carrierFlights;
				this.carrierFlightsDate = option.carrierFlightsDate;
				this.getNode()
			},
			methods: {
				fall() {
					uni.navigateBack({
						delta: 1
					})
				},
				async getNode(){
					let data = {
						"serviceId": 3009,
						"dataContent": {
							"luggageNum":this.luggageNum,
							"carrierFlights":this.carrierFlights,
							"carrierFlightsDate":this.carrierFlightsDate
						},
						"event": "0"
					}
					await this.$http.httpPost('/openApi/query', data).then(res => {
						if (res.code == "0" && res.returnData.length > 0) {
							console.log(res)
							let luggageData = res.returnData[0]
							if(luggageData.checkInDate!=null){
								this.stepList[0].info = luggageData.checkInDate;
								this.stepList[0].time = luggageData.checkInlocation?luggageData.checkInlocation:"-";
								this.stepList[0].isFinished = true;
								this.stepList[0].isActive = false;
							}
							if(luggageData.security_check_time!=null){
								this.stepList[1].info = luggageData.security_check_time;
								this.stepList[1].time = luggageData.security_location?luggageData.security_location:"-";
								this.stepList[1].isFinished = true;
								this.stepList[1].isActive = false;
							}
							if(luggageData.sorting_time!=null){
								this.stepList[2].info = luggageData.sorting_time;
								this.stepList[2].time = luggageData.sorting_location?luggageData.sorting_location:"-";
								this.stepList[2].isFinished = true;
								this.stepList[2].isActive = false;
							}
							if(luggageData.loading_time!=null){
								this.stepList[3].info = luggageData.loading_time;
								this.stepList[3].time = luggageData.installationAddress?luggageData.installationAddress:"-";
								this.stepList[3].isFinished = true;
								this.stepList[3].isActive = false;
							}
							if(luggageData.installation_time!=null){
								this.stepList[4].info = luggageData.installation_time;
								this.stepList[4].time = luggageData.installation_location?luggageData.installation_location:"-";
								this.stepList[4].isFinished = true;
								this.stepList[4].isActive = false;
							}
							if(luggageData.arrivedtime!=null){
								this.stepList[5].info = luggageData.arrivedtime;
								this.stepList[5].time = luggageData.arrviedLocation?luggageData.arrviedLocation:"-";
								this.stepList[5].isFinished = true;
								this.stepList[5].isActive = false;
							}
							if(luggageData.unloadtime!=null){
								this.stepList[6].info = luggageData.unloadtime;
								this.stepList[6].time = luggageData.unloadLocation?luggageData.unloadLocation:"-";
								this.stepList[6].isFinished = true;
								this.stepList[6].isActive = false;
							}
						}
					})
				},
				
			}
		}
</script>


<style lang="scss" scoped>
	.app-content {
		>.header {
			width: 100%;
			height: 3.375rem;
			padding-top: 15px;
			display: flex;
			justify-content: center;
			align-items: center;
			background: rgba(49,85,99,1);
			color: rgb(255, 255, 255);
			font-family: Noto Sans SC;
			font-size: 1rem;
			position: fixed;
			left: 0;
			top: 0;
			z-index: 1;
			
			>.log {
				width: .375rem;
				height: .75rem;
				font-size: .75rem;
				position: absolute;
				left: 1.5rem;
				background: url('../../static/ico@1x.png') no-repeat;
				background-size: 100% 100%;
			}
			
			>.up {
				width: .8456rem;
				height: .8456rem;
				position: absolute;
				right: 1.5rem;
				background: url('../../static/search.png') no-repeat;
				background-size: 100% 100%;
				// color: rgb(37, 121, 160);
				// font-family: Noto Sans SC;
				// font-size: .875rem;
				// font-weight: 500;
			}
		}
		>.content {
			box-sizing: border-box;
			width: 100%;
			// height: calc(100vh - 20.9375rem - 4.375rem);
			padding-bottom: 0;
			padding-left: 50px;
			position: absolute;
			bottom: 0;
			top: 5rem;
			border-radius: 6px 6px 0px 0px;
			overflow: hidden;
			background: rgb(255, 255, 255);
		}
	}
</style>