123

components/YSteps/YSteps.vue

@@ -0,0 +1,174 @@
+<template>
+	<!-- 
+		stepList: [
+			{
+				date: '08-28', // 左侧日期 -- 必选
+				time: '11:22', // 左侧时间 -- 必选
+				info: '开卡', // 右侧内容 -- 可选
+				index: '1', // 中间 Index -- 可选
+				isFinished: true, // 是否已完成（完成 index 为 √）-- 可选
+				isActive: false, // 是否为当前节点 Active（当前节点 即使完成 index 也不会显示 √）-- 可选
+				isShowSlot: false // 右侧是否有 Slot（显示在 右侧内容下方）-- 可选
+			},
+			{
+				date: '08-30',
+				time: '15:33',
+				info: '激活',
+				index: '2',
+				isFinished: false,
+				isActive: true,
+				isShowSlot: true
+			}
+		]
+
+		slot 示例：
+		<y-steps :stepList="stepList">
+			<mx-button type="danger" value="激活网点查看" />
+		</y-steps>
+
+		可按自己需求修改 css 中颜色变量
+	 -->
+	<view class="steps">
+		<view
+			v-for="(step, index) in stepList"
+			:key="'stepsItem' + index"
+      		:class="['steps-item', step.isActive ? 'steps-item-active' : '', step.isFinished ? 'steps-item-finished' : '']">
+			<view class="steps-item-left">
+				<text class="steps-item-left-date">{{ step.date }}<br><text class="steps-item-left-time">{{ step.time }}</text></text>
+			</view>
+			<view class="steps-item-index">
+				<view :class="['line', index != 0 ? '' : 'line-transparent']"></view>
+				<view v-if="!step.isActive && step.isFinished" class="index index-success"><icon type="success_no_circle" size="16" /></view>
+				<view v-else class="index">{{ step.index ? step.index : index + 1 }}</view>
+				<view :class="['line', index != stepList.length - 1 ? '' : 'line-transparent']"></view>
+			</view>
+			<view class="steps-item-right">
+				<view class="right-info-item">
+					<view>{{ step.info }}</view>
+					<view v-if="step.isShowSlot">
+						<slot></slot>
+					</view>
+				</view>
+			</view>
+		</view>
+	</view>
+</template>
+
+<script>
+	export default {
+		name: 'YSteps',
+		props: {
+			stepList: {
+				type: Array,
+				default: () => []
+			}
+		}
+	};
+</script>
+
+<style lang="scss" scoped>
+	$normolColor: #009688;
+	$activeColor: #ff3838;
+	$finishedColor: #4DB6AC;
+	$normolBgColor: #80CBC4;
+	$activeBgColor: #F8BBD0;
+	$finishedBgColor: #B2DFDB;
+	.steps {
+		display: flex;
+		flex-direction: column;
+		.steps-item {
+			display: flex;
+			.steps-item-left {
+				display: flex;
+				align-items: center;
+				color: $normolColor;
+				.steps-item-left-date {
+					font-size: 30rpx;
+					padding-top: 32rpx;
+					line-height: 40rpx;
+				}
+				.steps-item-left-time {
+					font-size: 26rpx;
+				}
+			}
+			.steps-item-index {
+				padding: 0 20rpx;
+				display: flex;
+				flex-direction: column;
+				align-items: center;
+				.line {
+					flex: 1;
+					width: 5rpx;
+					background-color: $normolBgColor;
+				}
+				.line-transparent {
+					background-color: transparent;
+				}
+				.index {
+					width: 50rpx;
+					height: 50rpx;
+					font-size: 25rpx;
+					font-weight: 900;
+					text-align: center;
+					line-height: 50rpx;
+					border-radius: 50rpx;
+					color: $normolColor;
+					background-color: $normolBgColor;
+				}
+				/deep/ .index-success {
+					display: flex;
+					justify-content: center;
+					align-items: center;
+					.uni-icon-success_no_circle {
+						color: $normolColor;
+					}
+				}
+			}
+			.steps-item-right {
+				display: flex;
+				flex-direction: column;
+				padding: 20rpx 0;
+				color: $normolColor;
+				.right-info-item {
+					display: flex;
+					flex-direction: column;
+					justify-content: center;
+					padding: 30rpx;
+					text {
+						font-size: 30rpx;
+						font-weight: 600;
+						line-height: 30rpx;
+					}
+				}
+			}
+		}
+		.steps-item-finished {
+			.steps-item-left {
+				color: $finishedColor;
+			}
+			.steps-item-index {
+				.index {
+					color: $finishedColor;
+					background-color: $finishedBgColor;
+				}
+			}
+			.steps-item-right {
+				color: $finishedColor;
+			}
+		}
+		.steps-item-active {
+			.steps-item-left {
+				color: $activeColor;
+			}
+			.steps-item-index {
+				.index {
+					color: $activeColor;
+					background-color: $activeBgColor;
+				}
+			}
+			.steps-item-right {
+				color: $activeColor;
+			}
+		}
+	}
+</style>

pages/detailNode/index.vue

@@ -0,0 +1,227 @@
+<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>