初始化

components/waybill-info/waybill-info.vue

@@ -0,0 +1,93 @@
+<template>
+	<scroll-view class="waybill-info" style="height:200rpx;" :scroll-y="true">
+		<template v-if="WaybillInfo">
+			<view class="waybill-info-item" v-for="item in [...WaybillInfo.kuaidi.data].reverse()">
+				<view class="time-line">
+
+				</view>
+				<view class="item-icon">
+					<image src="../../static/11快递@2x.png" style="width: 50rpx;height: 50rpx;" mode=""></image>
+				</view>
+				<view class="item-info">
+					<view class="item-status">
+						{{getTitle(item.context)}}
+					</view>
+					<view class="item-time">
+						{{item.time}}
+					</view>
+					<view class="item-status-address">
+						{{item.context}}
+					</view>
+				</view>
+			</view>
+		</template>
+	</scroll-view>
+</template>
+
+<script>
+	export default {
+		props: {
+			WaybillInfo: {
+				type: Object,
+				default: () => {}
+			}
+		},
+		name: "waybill-info",
+		data() {
+			return {
+				getTitle(text) {
+
+					const regex = /【(.*?)】/;
+
+					const matches = regex.exec(text);
+
+					if (matches && matches.length > 1) {
+						const extractedText = matches[1]; // 提取括号中的字
+						return extractedText
+					}
+				},
+			};
+		}
+	}
+</script>
+
+<style scoped lang="scss">
+	.waybill-info {
+		flex: 1;
+		box-sizing: border-box;
+		background: #FFFFFF;
+		border-radius: 40rpx;
+		min-height: 300rpx;
+		padding: 38rpx;
+		position: relative;
+	}
+
+	.time-line {
+		position: absolute;
+		height: calc(100% - 72rpx);
+		border-left: 1rpx dashed #ccc;
+		left: 26rpx;
+		top: 38rpx;
+	}
+
+	.waybill-info-item {
+		display: flex;
+		margin-bottom: 60rpx;
+
+		.item-icon {
+			margin-right: 20rpx;
+		}
+
+		.item-status {
+			font-size: 30rpx;
+			font-weight: bold;
+			margin-bottom: 10rpx;
+		}
+
+		.item-time,
+		.item-status-address {
+			font-size: 24rpx;
+			color: #999999;
+		}
+	}
+</style>