zhywpt-sp/subpackage/orders/components/order-logistics.vue

<!-- 订单物流 -->
<template>
	<view :class="['as-layout-horizontal', index as any === 0?'active':'', flag === 2 ? 'logistics-gray' : '']"  style="overflow: visible" v-for="(item,index) in options" :key="index">
		<view class="logistics-layout">
			<view class="logistics-layout-top">
				<view class="title" :style="index as any === 0 ? 'color:#00B38B' : 'color:#333'">
					{{(item as ItemType).title}}
				</view>
				<view class="more" v-if="(item as ItemType).right" @click="emit('more')">
					<span class="label">详细信息</span>
					<image class="arror" :src="`${$imgUrl}common/arror-right-green.png`"></image>
				</view>
			</view>
			<view class="desc">
				{{(item as ItemType).desc}}
			</view>
		</view>
	</view>
</template>

<script setup lang="ts">
	import { PropType } from "vue";
	interface ItemType{
		title:string,
		desc:string,
		right?:boolean,
	}
	
	const emit = defineEmits(['more'])
	
	const props = defineProps({
		//数据列表
		options:{
			type:Array as PropType<ItemType[]>,
			default: () => ([])
		},
		
		//1-列表 2-详情
		flag:{
			type:Number,
			default: 1
		}
	})
	
	console.log(props.flag)
	
</script>

<style lang="scss" scoped>
	.as-layout-horizontal{
		border-left: 1px solid #00B38B;
		padding-bottom: 45rpx;
		margin-top: 18rpx;
		position: relative;
		
		&::after{
			content: '';
			left: -10rpx;
			top: -18rpx;
			position: absolute;
			width: 18rpx;
			height: 18rpx;
			border-radius: 50%;
			border: 1px solid #00B38B;
			box-sizing: border-box;
		}
		&:last-child{
			border-left: none;
			padding-bottom: 0px;
			&::after{
				left: -8.5rpx;
			}
		}
	
		.logistics-layout{
			padding-left: 34rpx;
			
			&-top{
				width: 100%;
				display: flex;
				margin-top: -30rpx;
				align-items: center;
				.more{
					display: flex;
					align-items: center;
					.label{
						font-size: 24rpx;
						color: #00B38B;
					}
					.arror{
						width: 30rpx;
						height: 30rpx;
					}
				}
			}
			.title{
				font-size: 30rpx;
				color: #00B38B;
				flex: 1;
			}
			.desc{
				font-size: 24rpx;
				margin-top: 20rpx;
				color: #999999;
				line-height: 25px;
			}
		}
	}
	
	.logistics-gray{
		border-color: #DCDCDC;
		&::after{
			background-color: #DCDCDC;
			border: none;
		}
	}
	
	.active{
		position: relative;
		&::after{
			content: '';
			position: absolute;
			width: 18rpx;
			height: 18rpx;
			left:-10rpx;
			border-radius: 50%;
			background-color: #00B38B;
		}
	}
	
</style>