ykz-wx/pages/index/CfLogistics.vue

<template>
	<view class="cf-logistics">
		<pub-loading-view :loaded="loaded" height="100%">
			<view class="no-data" v-if="!dataList.no || dataList.statusList.length == 0">
				<image mode="heightFix" src="/static/image/no-data.png" />
				暂无数据
			</view>
			<view v-else>
				<view class="cf-logistics-top">
					<view class="icon"><text class="iconfont">&#xe674;</text></view>
					{{dataList.no}}
					<view class="copy-icon"> <text class="iconfont">&#xe620;</text></view>
				</view>
				<view class="logistics-list">
					<view class="logistics-item" :class="item.className" v-for="item in dataList.statusList" :key="item.id">
						<view class="logistics-item-left">
							<view class="icon" v-if='item.icon'>
								<text class="iconfont">&#xe602;</text>
							</view>
							<view class="icon" :class="item.className" v-else-if="item.className=='is-finish'">
								收
							</view>
							<view class="dot" v-else></view>
							<view class="line"></view>
						</view>
						<view class="logistics-item-right">
							<view class="logistics-item-title" v-if="item.title">{{item.title}}</view>
							<view class="logistics-item-time">{{item.time}}</view>
							<view>{{item.text}}</view>
						</view>
					</view>
				</view>
			</view>
		</pub-loading-view>
	</view>
</template>
<script lang="ts" setup>
	import { ref, onMounted,PropType } from 'vue'
	
	const props = defineProps({
		dataList: {
			type: Object as PropType<any>,
			default: () => ({})
		},
	})
	
	
	const loaded = ref(false)
	
	onMounted(() => {
	})
</script>

<style lang="scss" scoped>
	.cf-logistics {
		background: #fff;
		padding: $uni-spacing-col-s3 $page-row-spacing;
		height: 100%;
		box-sizing: border-box;

		.icon {
			width: 64rpx;
			height: 64rpx;
			background: $uni-bg-icon;
			border-radius: 50%;
			@include flex-center;

			.iconfont {
				background: linear-gradient(180deg, #46ACFF 0%, $uni-color-primary 100%);
				background-clip: text;
				text-fill-color: transparent;
				-webkit-background-clip: text;
				-webkit-text-fill-color: transparent;
			}
		}

		.cf-logistics-top {
			@include flex;
			margin-bottom: 32rpx;

			.icon {
				background: $uni-color-primary-light;
				margin-right: 24rpx;
			}

			.copy-icon {
				margin-left: 16rpx;
			}
		}

		.logistics-list {
			overflow-y: auto;
			flex: 1;

			height: calc(100% - 96rpx);

			.logistics-item {
				color: $uni-text-color-grey;
				display: flex;
				min-height: 140rpx;


				.logistics-item-left {
					@include flex;
					flex-direction: column;
					margin-right: 24rpx;

					.icon {
						.iconfont {
							background: linear-gradient(180deg, #C2CFE7 0%, #899AB9 100%);
							background-clip: text;
							text-fill-color: transparent;
							-webkit-background-clip: text;
							-webkit-text-fill-color: transparent;
						}

						&.is-finish {
							background: $uni-color-primary;
							color: #fff;
						}
					}

					.dot {
						width: 24rpx;
						height: 24rpx;
						background: $uni-border-color;
						border-radius: 50%;
						margin: 0 20rpx;
					}

					.line {
						flex: 1;
						// width: 1px;
						border-left: 1px dashed $uni-border-color;
						margin: 12rpx 0;
					}
				}

				.logistics-item-right {
					margin-bottom: 32rpx;
					font-size: 24rpx;
					line-height: $uni-line-height-sm;

					.logistics-item-title {
						font-size: 28rpx;
						line-height: $uni-line-height-base;
						margin-bottom: 8rpx;
					}

					.logistics-item-time {
						margin-bottom: 8rpx;
					}
				}

				&.is-finish {
					.logistics-item-left {
						.line {
							border-left: 1px dashed $uni-color-primary;
						}
					}

					.logistics-item-right {
						color: $uni-text-color;

						.logistics-item-title {
							font-weight: 800;
						}
					}
				}

				&:last-child {
					.logistics-item-left {
						.line {
							display: none;
						}
					}
				}
			}
		}
	}
</style>