uni做出物流签收信息（步骤条）源码

最新推荐文章于 2024-06-18 21:08:53 发布

小慕呀

最新推荐文章于 2024-06-18 21:08:53 发布

阅读量1.1k

点赞数

分类专栏： uni 文章标签：前端

本文链接：https://blog.csdn.net/weixin_44394740/article/details/116518343

版权

uni 专栏收录该内容

3 篇文章 1 订阅

订阅专栏

这是一个关于物流信息展示的前端代码实现，使用了HTML、CSS（Less）和JavaScript。内容包括物流公司的名称、运单号以及一系列物流状态更新，如运输中、已揽件、已发货等，每个状态包含时间戳和详细描述。CSS部分详细定义了样式，包括字体、颜色、布局和图标。JavaScript部分提供了数据结构，存储了物流步骤的具体信息。

摘要由CSDN通过智能技术生成

效果如下：
在这里插入图片描述

html:

<!-- 物流信息 -->
			<view class="LogisticsInformation_Box">
				<view class="LogisticsInformation">
					<view class="LogisticsInformation_topBox">
						<image src="../../static/image/my/kuaidi.png"></image>
						<view>申通快递</view>
						<view>123456789010987654321</view>
						<view class="btnCopy">
							复制
						</view>
					</view>
					<!-- 签收信息 -->
					<view class="Logistics_information">
						<view class="Logistics_informationBox" v-for="(item,index) in steps" :key="index">
							<view class="timesBox">
								{{item.spans}}
							</view>
							<view class="Logistics_information_left">
								
							</view>
							<view class="Logistics_information_right">
								<view class="imagesimg">
									<image :src="item.icon" class="imgs" :class="item.status ?'wl_Order_placed':''">
									</image>
								</view>
								<view class="content">
									<view class="content_title">{{item.text}}</view>
									<view class="content_detail">{{item.desc}}</view>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>

css: ( 用了less )

	// 物流信息
			.LogisticsInformation_Box {
				width: 100%;
				background-color: #fff;
				margin-top: 5rpx;

				.LogisticsInformation {
					width: 660rpx;
					margin: 0 auto;
					padding: 5rpx 0;

					.LogisticsInformation_topBox {
						display: flex;

						image {
							width: 33rpx;
							height: 33rpx;
							margin-right: 15rpx;
							border-radius: 50%;
						}

						font-size: 18rpx;
						font-family: zihun105hao-jianyahei;
						font-weight: 400;
						color: #050505;

						view {
							margin-right: 15rpx;
						}

						.btnCopy {
							margin-left: 35rpx;
							font-size: 18rpx;
							font-family: SourceHanSansCN;
							font-weight: 300;
							color: #FCC1C7;
						}
					}

					.Logistics_information {
						width: 700rpx;
						margin: 0 auto;
						margin-top: 40rpx;

						.Logistics_informationBox {
							display: flex;

							.timesBox {
								width: 100rpx;
								font-size: 16rpx;
								font-family: zihun105hao-jianyahei;
								font-weight: 400;
								color: #767676;
							}

							.Logistics_information_left {
								width: 4rpx;
								background-color: #C9C9C9;
							}

							.Logistics_information_right {
								display: flex;
								height: 130rpx;

								.imagesimg {
									.wl_Order_placed {
										width: 52rpx !important;
										height: 52rpx !important;
										background-color: #fff !important;
										margin-left: -28rpx !important;
										margin-right: 30rpx !important;
									}

									.imgs {
										margin-left: -12rpx;
										width: 18rpx;
										height: 18rpx;
										background-color: #fff;
										margin-right: 49rpx;
									}
								}

								.content {
									.content_title {
										width: 150rpx;
										font-size: 18rpx;
										font-family: SimHei;
										font-weight: 400;
										color: #8A8A8A;
										display: flex;
										justify-content: space-between;

										.content_data {
											font-size: 14rpx;
											font-family: SimHei;
											font-weight: 400;
											color: #8A8A8A;
										}
									}

									.content_detail {
										margin-top: 15rpx;
										width: 500rpx;
										height: 14rpx;
										font-size: 14rpx;
										font-family: SimHei;
										font-weight: 400;
										color: #8A8A8A;
									}
								}
							}
						}

						.Logistics_informationBox:first-child .timesBox {
							font-size: 16rpx;
							font-family: SourceHanSansCN;
							font-weight: 500;
							color: #000000 !important;
						}

						.Logistics_informationBox:last-child .Logistics_information_left {
							width: 0;
						}

						.Logistics_informationBox:first-child .Logistics_information_right .content .content_title,
						.Logistics_informationBox:first-child .Logistics_information_right .content .content_detail {
							font-size: 16rpx;
							font-family: SourceHanSansCN;
							font-weight: 500;
							color: #000000 !important;

						}
					}
				}
			}

js:

<script>
	export default {
		data() {
			return {
				steps: [{
						text: '运输中',
						spans: '03-02  19:00',
						desc: '快件已到达【上海】',
						icon: '../../static/image/my/order/wl_Signed_in.png',
						status: true

					},
					{
						
						spans: '03-02  19:00',
						desc: '快件已到达【上海转运中心】扫描员是【001】',
						icon: '../../static/image/my/order/wl_icon.png',
						status: false

					},
					{
						spans: '03-02  19:00',
						desc: '快件已到达【上海转运中心】扫描员是【001】',
						icon: '../../static/image/my/order/wl_icon.png',
						status: false

					},
					{
						spans: '03-02  19:00',
						desc: '快件已到达【上海转运中心】扫描员是【001】',
						icon: '../../static/image/my/order/wl_icon.png',
						status: false

					},
					{
						spans: '03-02  19:00',
						desc: '快件已到达【上海转运中心】扫描员是【001】',
						icon: '../../static/image/my/order/wl_icon.png',
						status: false

					},
					{
						spans: '03-02  19:00',
						desc: '快件由【华北转运中心】发往【上海转运中心】',
						icon: '../../static/image/my/order/wl_icon.png',
						status: false

					},
					{
						text: '已揽件',
						spans: '03-02  19:00',
						desc: '卖家已揽件',
						icon: '../../static/image/my/order/lanjian.png',
						status: true

					},
					{
						text: '已发货',
						spans: '03-02  19:00',
						desc: '包裹正在等待揽收',
						icon: '../../static/image/my/order/wl_Delivered.png',
						status: true


					},
					{
						text: '已下单',
						spans: '03-02  19:00',
						desc: '商品已下单',
						icon: '../../static/image/my/order/wl_Order_placed.png',
						status: true

					},
				],

			}
		},
		methods: {

		}
	}
</script>