uni_project/unimall-app/components/WuLiu-step.vue

<template>
	<view class="ali">
		<view class="ali_state">
			<block v-for="(item,i) in datas" :key="i">
				<view class="State_Four">
					<view class="FourBox">
						<text class="line" :class="[i == 0?'noline':'']"></text>
						<!-- =====如果不够，可以再方法和过滤器中同时添加判断-或者如下的-[v-else-if]操作 -->
						<!-- <text class="ali_top_icon" style="margin: 0 0;" v-else-if="item.station.includes('丰巢智能快递柜') && i!= datas.length-1">待</text> -->
						<text class="ali_top_icon" :class="[item.station.includes('签收')?'isOk':'']" style="margin: 0 0;" v-if="Type(item.station) == true && i!= datas.length-1">{{item.station | Type}}</text>
						<view class="ali_top_icons" style="margin: 0 0;" v-else>
							<text class="line" :class="[i == 0?'noline':'']"></text>
							<text class="ali_top_iconss"></text>
							<text class="line" :class="[i == 0?'noline':'']"></text>
						</view>
						<text class="line" :class="[i == datas.length -1?'noline':'']"></text>
					</view>
					<view class="station">
						<text class="a14"  v-if="i == datas.length-1">已发货</text>
						<text class="a14"  v-else>{{item.station}}</text>
						<text class="a12" style="padding-top: 10upx;">{{item.time}}</text>
					</view>
				</view>
			</block>
		</view>
	</view>
</template>

<script>
	export default{
		props:["datas"],
		data(){
			return{
				
			}
		},
		//过滤返回关键字
		filters:{
			Type(item){
				let Info;
				let Phone = /\d{11}/;
				if(Phone.test(item) && item.includes('正在派')){
					Info = "派";
				}else if(item.includes('已收取快件')){
					Info = "揽";
				}else if(item.includes('营业')){
					Info = "运";
				}else if(item.includes('丰巢智能快递柜')){
					Info = "待";
				}else if(item.includes('签收')){
					Info = "收";
				}else{
					Info = "";
				}
				return Info
			}
		},
		methods: {
			//判断哪个该展示关键字--还是默认
			Type(item){
				
				let Info;
				let Phone = /\d{11}/;
				if(Phone.test(item) && item.includes('正在派')){
					Info = true;
				}else if(item.includes('已收取快件')){
					Info = true;
				}else if(item.includes('营业')){
					Info = true;
				}else if(item.includes('丰巢智能快递柜')){
					Info = true;
				}else if(item.includes('签收')){
					Info = true;
				}else{
					Info = false;
				}
				return Info
			}
		},
	}
</script>

<style>
	.isOk{
		background-color: #F0AD4E !important;
	}
	.ali_top_iconss{
		width: 12upx;
		height: 12upx;
		display: block;
		background-color: #999;
		padding-right: 2upx;
		border-radius: 50%;
	}
	.noline{
		background-color: #fff !important;
	}
	.State_Four{
		display: flex;
		/* border: 1upx solid red; */
	}
	.FourBox{
		display: flex;
		flex-direction: column;
		align-items: center;
		padding-right: 24upx;
	}
	.line{
		width: 2upx;
		display: flex;
		flex-direction: column;
		flex: 1;
		background-color: #999;
	}
	/* ============= */
	.station{
		display: flex;
		flex-direction: column;
		width: 90%;
		padding: 24upx 0;
	}
	.borders{
		border-bottom: 1upx solid #F2F2F2;
		padding: 24upx 0;
	}
	.ali_top_icons{
		width: 46upx;
		height: 46upx;
		display: block;
		background-color: #FFF;
		border-radius: 50%;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		align-content: center;
	}
	.ali_top_icon{
		width: 46upx;
		height: 46upx;
		display: block;
		background-color: #83AECF;
		color: #fff;
		font-size: 28upx;
		border-radius: 50%;
		display: flex;
		justify-content: center;
		align-items: center;
		margin-right: 20upx;
	}
	.ali_top{
		display: flex;
		justify-content: flex-start;
		align-items: center;
	}
	/* ========公共========= */
	.a14{
		font-size: 28upx;
		color: #000000;
	}
	.a12{
		font-size: 24upx;
		color: #999;
	}
	.ali{
		/* width: 100%; */
		/* border: 1upx solid #F76260; */
		background-color: #FFFFFF;
		margin: 24upx;
		border-radius:18upx;
		padding: 0 24upx;
		display: flex;
		flex: 1;
		flex-direction: column;
	}
</style>